Add tests of keyframe animations

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

@@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 import { runTests, configure } from './RuntimeTestsApi';
 import { RenderLock } from './utils/SyncUIRunner';
+import { FlatList } from 'react-native-gesture-handler';
 
 export class ErrorBoundary extends React.Component<
   { children: React.JSX.Element | Array<React.JSX.Element> },
@@ -72,18 +73,18 @@ export default function RuntimeTestsRunner({ tests }: RuntimeTestRunnerProps) {
   }
 
   return (
-    <View style={styles.container}>
+    <View style={styles.flexOne}>
       {started ? null : (
         <>
           <TestSelector tests={tests} testSelectionCallbacks={testSelectionCallbacks} />
           <Pressable onPressOut={handleStartClick} style={styles.button}>
-            <Text style={styles.buttonTextWhite}>Run tests</Text>
+            <Text style={styles.whiteText}>Run tests</Text>
           </Pressable>
         </>
       )}
       {/* Don't render anything if component is undefined to prevent blinking */}
       {component || null}
-      {finished ? <Text style={styles.reloadText}>Reload the app to run the tests again</Text> : null}
+      {finished ? <Text style={styles.navyText}>Reload the app to run the tests again</Text> : null}
     </View>
   );
 }
@@ -122,22 +123,24 @@ function TestSelector({ tests, testSelectionCallbacks }: TestSelectorProps) {
   }
 
   return (
-    <View>
+    <View style={styles.flexOne}>
       <SelectAllButtonProps handleSelectAllClick={selectAllClick} select={true} />
       <SelectAllButtonProps handleSelectAllClick={selectAllClick} select={false} />
 
-      <View style={styles.selectButtonsFrame}>
-        {tests.map(testData => {
+      <FlatList
+        style={styles.selectButtonsFrame}
+        data={tests}
+        renderItem={({ item }) => {
           return (
             <SelectTest
-              key={testData.testSuiteName}
-              testSuiteName={testData.testSuiteName}
-              selectClick={() => selectClick(testData)}
+              key={item.testSuiteName}
+              testSuiteName={item.testSuiteName}
+              selectClick={() => selectClick(item)}
               selectedTests={selectedTests}
             />
           );
-        })}
-      </View>
+        }}
+      />
     </View>
   );
 }
@@ -167,7 +170,7 @@ function SelectTest({ testSuiteName, selectClick, selectedTests }: SelectTestPro
       onPressOut={() => handleSelectClickOut()}>
       <View style={[styles.checkbox, selectedTests.get(testSuiteName) ? styles.checkedCheckbox : {}]} />
       <View style={styles.selectButton}>
-        <Text style={styles.buttonText}>{testSuiteName}</Text>
+        <Text style={styles.navyText}>{testSuiteName}</Text>
       </View>
     </Pressable>
   );
@@ -195,26 +198,43 @@ function SelectAllButtonProps({ handleSelectAllClick, select }: SelectAllButtonP
       onPressIn={handleSelectAllClickIn}
       onPressOut={() => handleSelectAllClickOut()}
       style={[styles.selectAllButton, isPressed ? styles.pressedButton : {}]}>
-      <Text style={styles.buttonText}>{select ? 'Select all' : 'Deselect all'}</Text>
+      <Text style={styles.navyText}>{select ? 'Select all' : 'Deselect all'}</Text>
     </Pressable>
   );
 }
 
+const TEXT = {
+  fontSize: 20,
+  alignSelf: 'center',
+} as const;
+
+const BUTTON = {
+  height: 40,
+  justifyContent: 'center',
+  alignItems: 'center',
+} as const;
+
+const WHITE_BUTTON = {
+  ...BUTTON,
+  borderWidth: 2,
+  backgroundColor: 'white',
+  borderColor: 'navy',
+  marginVertical: 5,
+  borderRadius: 10,
+} as const;
+
 const styles = StyleSheet.create({
-  container: {
+  flexOne: {
     flex: 1,
     flexDirection: 'column',
   },
   selectAllButton: {
-    marginVertical: 5,
+    ...WHITE_BUTTON,
     marginHorizontal: 20,
-    height: 40,
-    borderWidth: 2,
-    borderRadius: 10,
-    backgroundColor: 'white',
-    borderColor: 'navy',
-    justifyContent: 'center',
-    alignItems: 'center',
+  },
+  selectButton: {
+    ...WHITE_BUTTON,
+    flex: 1,
   },
   selectButtonsFrame: {
     borderRadius: 10,
@@ -223,30 +243,17 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     paddingVertical: 10,
   },
-  selectButton: {
-    height: 40,
-    borderWidth: 2,
-    marginVertical: 5,
-    borderRadius: 10,
-    backgroundColor: 'white',
-    borderColor: 'navy',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flex: 1,
-  },
   button: {
-    height: 40,
+    ...BUTTON,
     backgroundColor: 'navy',
-    justifyContent: 'center',
-    alignItems: 'center',
     zIndex: 1,
   },
-  buttonText: {
-    fontSize: 20,
+  navyText: {
+    ...TEXT,
     color: 'navy',
   },
-  buttonTextWhite: {
-    fontSize: 20,
+  whiteText: {
+    ...TEXT,
     color: 'white',
   },
   buttonWrapper: {
@@ -266,11 +273,6 @@ const styles = StyleSheet.create({
   checkedCheckbox: {
     backgroundColor: 'navy',
   },
-  reloadText: {
-    fontSize: 20,
-    color: 'navy',
-    alignSelf: 'center',
-  },
   pressedButton: {
     zIndex: 2,
     backgroundColor: '#FFFA',

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

@@ -52,6 +52,31 @@ export default function RuntimeTestsExample() {
             require('./tests/utilities/relativeCoords.test');
           },
         },
+        {
+          testSuiteName: 'entering and exiting',
+          importTest: () => {
+            require('./tests/layoutAnimations/entering/enteringColors.test');
+            require('./tests/layoutAnimations/entering/predefinedEntering.test');
+            require('./tests/layoutAnimations/exiting/predefinedExiting.test');
+          },
+        },
+        {
+          testSuiteName: 'layout transitions',
+          importTest: () => {
+            describe('Compare layout transitions with **constant view size** with snapshots', () => {
+              require('./tests/layoutAnimations/layout/predefinedLayoutPosition.test');
+            });
+            describe('Compare Test layout transitions including view **size changes** with snapshots', () => {
+              require('./tests/layoutAnimations/layout/positionAndSize.test');
+            });
+          },
+        },
+        {
+          testSuiteName: 'keyframe animations',
+          importTest: () => {
+            require('./tests/layoutAnimations/keyframe/basic.test');
+          },
+        },
         {
           testSuiteName: 'layoutAnimations',
           importTest: () => {
@@ -66,6 +91,7 @@ export default function RuntimeTestsExample() {
             });
           },
         },
+
         {
           testSuiteName: 'advanced API',
           importTest: () => {