Add tests of keyframe animations (#6433)

## Summary https://github.com/user-attachments/assets/7f16ea17-a5e0-4469-afd4-4f029a194410 ## Test plan
software-mansion · Aug 28, 2024 · a50a41c · a50a41c
1 parent e03058a
commit a50a41c
Show file tree

Hide file tree

Showing 4 changed files with 1,710 additions and 58 deletions.
diff --git a/apps/common-app/src/examples/RuntimeTests/ReJest/RuntimeTestsRunner.tsx b/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>
+          <Pressable onPressOut={handleStartClick} style={button}>
+            <Text style={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={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>
   );
 }
@@ -166,8 +169,8 @@ function SelectTest({ testSuiteName, selectClick, selectedTests }: SelectTestPro
       onPressIn={() => handleSelectClickIn()}
       onPressOut={() => handleSelectClickOut()}>
       <View style={[styles.checkbox, selectedTests.get(testSuiteName) ? styles.checkedCheckbox : {}]} />
-      <View style={styles.selectButton}>
-        <Text style={styles.buttonText}>{testSuiteName}</Text>
+      <View style={selectButton}>
+        <Text style={navyText}>{testSuiteName}</Text>
       </View>
     </Pressable>
   );
@@ -194,61 +197,60 @@ function SelectAllButtonProps({ handleSelectAllClick, select }: SelectAllButtonP
     <Pressable
       onPressIn={handleSelectAllClickIn}
       onPressOut={() => handleSelectAllClickOut()}
-      style={[styles.selectAllButton, isPressed ? styles.pressedButton : {}]}>
-      <Text style={styles.buttonText}>{select ? 'Select all' : 'Deselect all'}</Text>
+      style={[selectAllButton, isPressed ? styles.pressedButton : {}]}>
+      <Text style={navyText}>{select ? 'Select all' : 'Deselect all'}</Text>
     </Pressable>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'column',
+const commonStyles = StyleSheet.create({
+  textCommon: {
+    fontSize: 20,
+    alignSelf: 'center',
   },
-  selectAllButton: {
-    marginVertical: 5,
-    marginHorizontal: 20,
+  buttonCommon: {
     height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  whiteButtonCommon: {
     borderWidth: 2,
-    borderRadius: 10,
     backgroundColor: 'white',
     borderColor: 'navy',
-    justifyContent: 'center',
-    alignItems: 'center',
+    marginVertical: 5,
+    borderRadius: 10,
+  },
+});
+
+const basicStyles = StyleSheet.create({
+  selectAllButton: { marginHorizontal: 20 },
+  selectButton: { flex: 1 },
+  button: { backgroundColor: 'navy', zIndex: 1, height: 60, marginBottom: 40 },
+  navyText: { color: 'navy' },
+  whiteText: { color: 'white' },
+});
+
+const whiteButtonCommon = StyleSheet.flatten([commonStyles.buttonCommon, commonStyles.whiteButtonCommon]);
+const selectAllButton = StyleSheet.flatten([whiteButtonCommon, basicStyles.selectAllButton]);
+const selectButton = StyleSheet.flatten([whiteButtonCommon, basicStyles.selectButton]);
+const button = StyleSheet.flatten([commonStyles.buttonCommon, basicStyles.button]);
+const navyText = StyleSheet.flatten([commonStyles.textCommon, basicStyles.navyText]);
+const whiteText = StyleSheet.flatten([commonStyles.textCommon, basicStyles.whiteText]);
+
+const styles = StyleSheet.create({
+  flexOne: {
+    flex: 1,
+    flexDirection: 'column',
   },
+
   selectButtonsFrame: {
     borderRadius: 10,
     backgroundColor: 'lightblue',
     margin: 20,
     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,
-    backgroundColor: 'navy',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 1,
-  },
-  buttonText: {
-    fontSize: 20,
-    color: 'navy',
-  },
-  buttonTextWhite: {
-    fontSize: 20,
-    color: 'white',
-  },
+
   buttonWrapper: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -266,11 +268,6 @@ const styles = StyleSheet.create({
   checkedCheckbox: {
     backgroundColor: 'navy',
   },
-  reloadText: {
-    fontSize: 20,
-    color: 'navy',
-    alignSelf: 'center',
-  },
   pressedButton: {
     zIndex: 2,
     backgroundColor: '#FFFA',

diff --git a/apps/common-app/src/examples/RuntimeTests/RuntimeTestsExample.tsx b/apps/common-app/src/examples/RuntimeTests/RuntimeTestsExample.tsx
@@ -53,11 +53,16 @@ export default function RuntimeTestsExample() {
           },
         },
         {
-          testSuiteName: 'layoutAnimations',
+          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');
             });
@@ -66,6 +71,12 @@ export default function RuntimeTestsExample() {
             });
           },
         },
+        {
+          testSuiteName: 'keyframe animations',
+          importTest: () => {
+            require('./tests/layoutAnimations/keyframe/basic.test');
+          },
+        },
         {
           testSuiteName: 'advanced API',
           importTest: () => {