Introduce Import buttons to run tests more easily

apps/common-app/src/examples/RuntimeTests/ReanimatedRuntimeTestsRunner/RuntimeTestsRunner.tsx

@@ -1,9 +1,14 @@
-import { View, Button, StyleSheet, Text } from 'react-native';
+import { View, TouchableOpacity, StyleSheet, Text } from 'react-native';
 import type { ReactNode } from 'react';
 import React, { useEffect, useState } from 'react';
 import { runTests, configure } from './RuntimeTestsApi';
 import type { LockObject } from './types';
 
+interface ImportButton {
+  testSuiteName: string;
+  importTest: () => void;
+}
+
 let renderLock: LockObject = { lock: false };
 export class ErrorBoundary extends React.Component<
   { children: React.JSX.Element | Array<React.JSX.Element> },
@@ -21,30 +26,61 @@ export class ErrorBoundary extends React.Component<
 
   render() {
     if (this.state.hasError) {
-      return <Text>Something went wrong.</Text>;
+      return <Text>Unable to render component</Text>;
     }
 
     return this.props.children;
   }
 }
 
-export default function RuntimeTestsRunner() {
+function ImportButtons({ importButtons }: { importButtons: Array<ImportButton> }) {
+  const [importedTests, setImportedTests] = useState<Array<string>>([]);
+
+  return (
+    <View>
+      {importButtons.map(({ testSuiteName, importTest }) => {
+        return (
+          <TouchableOpacity
+            key={testSuiteName}
+            onPress={() => {
+              importTest();
+              if (!importedTests.includes(testSuiteName)) {
+                setImportedTests([...importedTests, testSuiteName]);
+              }
+            }}
+            style={[styles.importButton, importedTests.includes(testSuiteName) ? styles.importButtonImported : {}]}>
+            <Text style={styles.buttonText}>{testSuiteName}</Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}
+
+export default function RuntimeTestsRunner({ importButtons }: { importButtons: Array<ImportButton> }) {
   const [component, setComponent] = useState<ReactNode | null>(null);
+  const [started, setStarted] = useState<boolean>(false);
   useEffect(() => {
     if (renderLock) {
       renderLock.lock = false;
     }
   }, [component]);
   return (
     <View style={styles.container}>
-      <Button
-        title="Run tests"
-        // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        onPress={async () => {
-          renderLock = configure({ render: setComponent });
-          await runTests();
-        }}
-      />
+      {started ? null : <ImportButtons importButtons={importButtons} />}
+      {started ? null : (
+        <TouchableOpacity
+          // eslint-disable-next-line @typescript-eslint/no-misused-promises
+          onPress={async () => {
+            setStarted(true);
+            renderLock = configure({ render: setComponent });
+            await runTests();
+          }}
+          style={styles.button}>
+          <Text style={styles.buttonTextWhite}>Run tests</Text>
+        </TouchableOpacity>
+      )}
+
       {/* Don't render anything if component is undefined to prevent blinking */}
       {component || null}
     </View>
@@ -56,4 +92,32 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'column',
   },
+  importButton: {
+    height: 40,
+    borderWidth: 2,
+    marginHorizontal: 40,
+    marginVertical: 5,
+    borderRadius: 10,
+    borderColor: 'navy',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  importButtonImported: {
+    backgroundColor: 'pink',
+  },
+  button: {
+    height: 40,
+    marginVertical: 10,
+    backgroundColor: 'navy',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonText: {
+    fontSize: 20,
+    color: 'navy',
+  },
+  buttonTextWhite: {
+    fontSize: 20,
+    color: 'white',
+  },
 });

apps/common-app/src/examples/RuntimeTests/RuntimeTestsExample.tsx

@@ -1,30 +1,55 @@
 import React from 'react';
 import RuntimeTestsRunner from './ReanimatedRuntimeTestsRunner/RuntimeTestsRunner';
 
-// load tests
-import './tests/TestsOfTestingFramework.test';
-
-import './tests/animations';
-
-import './tests/core/cancelAnimation.test';
-
-import './tests/utilities/relativeCoords.test';
-
-import './tests/layoutAnimations/entering/enteringColors.test';
-import './tests/layoutAnimations/entering/predefinedEntering.test';
-
-import './tests/layoutAnimations/exiting/predefinedExiting.test';
-
-import './tests/layoutAnimations/layout/predefinedLayoutPosition.test';
-
-import './tests/advancedAPI/useFrameCallback.test';
-// import './tests/advancedAPI/measure.test'; crash on Android
-
-import './tests/core/useSharedValue.test';
-import './tests/core/useAnimatedStyle/reuseAnimatedStyle.test';
-import './tests/core/useDerivedValue/basic.test';
-import './tests/core/useDerivedValue/chain.test';
-
 export default function RuntimeTestsExample() {
-  return <RuntimeTestsRunner />;
+  return (
+    <RuntimeTestsRunner
+      importButtons={[
+        {
+          testSuiteName: 'Tests of testing framework',
+          importTest: () => {
+            require('./tests/TestsOfTestingFramework.test');
+          },
+        },
+        {
+          testSuiteName: 'animations',
+          importTest: () => {
+            require('./tests/animations');
+          },
+        },
+        {
+          testSuiteName: 'core',
+          importTest: () => {
+            require('./tests/core/cancelAnimation.test');
+            require('./tests/core/useSharedValue.test');
+            require('./tests/core/useAnimatedStyle/reuseAnimatedStyle.test');
+            require('./tests/core/useDerivedValue/basic.test');
+            require('./tests/core/useDerivedValue/chain.test');
+          },
+        },
+        {
+          testSuiteName: 'utilities',
+          importTest: () => {
+            require('./tests/utilities/relativeCoords.test');
+          },
+        },
+        {
+          testSuiteName: 'layoutAnimations',
+          importTest: () => {
+            require('./tests/layoutAnimations/entering/enteringColors.test');
+            require('./tests/layoutAnimations/entering/predefinedEntering.test');
+            require('./tests/layoutAnimations/exiting/predefinedExiting.test');
+            require('./tests/layoutAnimations/layout/predefinedLayoutPosition.test');
+          },
+        },
+        {
+          testSuiteName: 'advancedAPI',
+          importTest: () => {
+            require('./tests/advancedAPI/useFrameCallback.test');
+            // require('./tests/advancedAPI/measure.test'); // crash on Android
+          },
+        },
+      ]}
+    />
+  );
 }

apps/common-app/src/examples/RuntimeTests/tests/TestsOfTestingFramework.test.tsx

@@ -146,7 +146,7 @@ const LayoutAnimation = () => {
   );
 };
 
-describe.skip('Tests of Test Framework', () => {
+describe('Tests of Test Framework', () => {
   test('withTiming - expect error', async () => {
     await render(<AnimatedComponent />);
     const component = getTestComponent('BrownComponent');