fix repeatibility

configs/all-devices.json

@@ -1,5 +1,5 @@
 {
-  "exclude": ["ManyStories"],
+  "include": ["TestInfo"],
   "devices": [
     {
       "id": "pixel.7.pro",

testing/expo-storybook-8/src/components/TestInfo/ExpoUpdateInfo.stories.tsx

@@ -0,0 +1,13 @@
+import { ExpoUpdateInfo, StoryDecorator } from '@sherlo/testing-components';
+import type { Meta } from '@storybook/react';
+
+/**
+ * This is a test screen that we add to our tests
+ * to display information about device and app configuration
+ */
+export default {
+  component: ExpoUpdateInfo,
+  decorators: [StoryDecorator({ placement: 'center' })],
+} as Meta<typeof ExpoUpdateInfo>;
+
+export const Basic = {};

testing/testing-components/src/components/ExpoUpdateInfo.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import * as Updates from 'expo-updates';
+import InfoItem from './InfoItem';
+
+const ExpoUpdateInfo = () => {
+  return (
+    <View style={[styles.container]}>
+      {Updates.updateId ? (
+        <>
+          <InfoItem
+            iconName="mobile-friendly"
+            text={`Runtime Version: ${Updates.runtimeVersion}`}
+          />
+          <InfoItem
+            iconName="update"
+            text={`Update (${Updates.createdAt?.toLocaleString('en-US', {
+              month: '2-digit',
+              day: '2-digit',
+              year: 'numeric',
+              hour: '2-digit',
+              minute: '2-digit',
+              second: '2-digit',
+              hour12: false,
+            })}) with ID:`}
+          />
+          <InfoItem text={Updates.updateId} />
+        </>
+      ) : (
+        <InfoItem text={'No update available'} />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+    paddingHorizontal: 20,
+  },
+});
+
+export default ExpoUpdateInfo;

testing/testing-components/src/components/InfoItem.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Text, View, StyleSheet, useColorScheme } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
+
+export const InfoItem: React.FC<{
+  iconName?: React.ComponentProps<typeof MaterialIcons>['name'];
+  text?: string;
+}> = ({ iconName, text }) => {
+  const theme = useColorScheme();
+  const textColor = theme === 'dark' ? '#FFF' : '#333';
+  return (
+    <View style={styles.infoContainer}>
+      {iconName ? <MaterialIcons name={iconName} size={24} color={textColor} /> : null}
+      <Text style={[styles.text, { color: textColor }]}>{text}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  infoContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  text: {
+    fontSize: 12,
+    marginLeft: 10,
+  },
+});
+
+export default InfoItem;

testing/testing-components/src/components/TestInfo.tsx

@@ -1,23 +1,8 @@
 import React from 'react';
-import { Text, View, StyleSheet, StatusBar } from 'react-native';
-import { MaterialIcons } from '@expo/vector-icons';
-import * as Updates from 'expo-updates';
+import { View, StyleSheet } from 'react-native';
 import * as Localization from 'expo-localization';
 import { useColorScheme } from 'react-native';
-
-const InfoItem: React.FC<{
-  iconName?: React.ComponentProps<typeof MaterialIcons>['name'];
-  text?: string;
-}> = ({ iconName, text }) => {
-  const theme = useColorScheme();
-  const textColor = theme === 'dark' ? '#FFF' : '#333';
-  return (
-    <View style={styles.infoContainer}>
-      {iconName ? <MaterialIcons name={iconName} size={24} color={textColor} /> : null}
-      <Text style={[styles.text, { color: textColor }]}>{text}</Text>
-    </View>
-  );
-};
+import { InfoItem } from './InfoItem';
 
 const TestScreen = () => {
   const theme = useColorScheme();
@@ -30,28 +15,6 @@ const TestScreen = () => {
       <InfoItem iconName="place" text={`Country: ${country}`} />
 
       <InfoItem iconName="brightness-4" text={`Theme: ${theme}`} />
-
-      {Updates.updateId ? (
-        <>
-          <InfoItem
-            iconName="mobile-friendly"
-            text={`Runtime Version: ${Updates.runtimeVersion}`}
-          />
-          <InfoItem
-            iconName="update"
-            text={`Update (${Updates.createdAt?.toLocaleString('en-US', {
-              month: '2-digit',
-              day: '2-digit',
-              year: 'numeric',
-              hour: '2-digit',
-              minute: '2-digit',
-              second: '2-digit',
-              hour12: false,
-            })}) with ID:`}
-          />
-          <InfoItem text={Updates.updateId} />
-        </>
-      ) : null}
     </View>
   );
 };
@@ -71,7 +34,7 @@ const styles = StyleSheet.create({
     marginBottom: 20,
   },
   text: {
-    fontSize: 16,
+    fontSize: 12,
     marginLeft: 10,
   },
 });

testing/testing-components/src/components/index.ts

@@ -1 +1,2 @@
 export { default as TestInfo } from './TestInfo';
+export { default as ExpoUpdateInfo } from './ExpoUpdateInfo';