Prefer waitForAnimationUpdates over wait

apps/common-app/src/examples/RuntimeTests/tests/animations/withDecay/basic.test.tsx

@@ -6,11 +6,11 @@ import {
   describe,
   test,
   render,
-  wait,
   mockAnimationTimer,
   recordAnimationUpdates,
   unmockAnimationTimer,
   expect,
+  waitForAnimationUpdates,
 } from '../../../ReanimatedRuntimeTestsRunner/RuntimeTestsApi';
 import { Snapshots } from './basic.snapshot';
 
@@ -29,12 +29,12 @@ describe('withDecay animation, test various config', () => {
     );
   };
 
-  async function getSnapshotUpdates(config: WithDecayConfig, duration: number) {
+  async function getSnapshotUpdates(snapshotName: keyof typeof Snapshots, config: WithDecayConfig) {
     await mockAnimationTimer();
     const updatesContainer = await recordAnimationUpdates();
     await render(<DecayComponent config={config} />);
 
-    await wait(duration);
+    await waitForAnimationUpdates(Snapshots[snapshotName].length);
 
     const updates = updatesContainer.getUpdates();
     const nativeUpdates = await updatesContainer.getNativeSnapshots();
@@ -44,24 +44,23 @@ describe('withDecay animation, test various config', () => {
   }
 
   test.each([
-    [1200, { velocity: 900 }],
-    [600, { velocity: 9, velocityFactor: 100 }],
-    [900, { velocity: 900, deceleration: 0.997 }],
-    [400, { velocity: 900, clamp: [0, 150] }],
-    [900, { velocity: 900, clamp: [0, 150], rubberBandEffect: true }],
-    [800, { velocity: 2000, clamp: [0, 150], rubberBandEffect: true }],
-    [500, { velocity: 2000, clamp: [0, 150], rubberBandEffect: true, rubberBandFactor: 2 }],
-  ] as Array<[number, WithDecayConfig]>)('Config ${1}', async ([duration, config]) => {
-    const snapshotName =
-      'decay_' +
+    { velocity: 900 },
+    { velocity: 9, velocityFactor: 100 },
+    { velocity: 900, deceleration: 0.997 },
+    { velocity: 900, clamp: [0, 150] },
+    { velocity: 900, clamp: [0, 150], rubberBandEffect: true },
+    { velocity: 2000, clamp: [0, 150], rubberBandEffect: true },
+    { velocity: 2000, clamp: [0, 150], rubberBandEffect: true, rubberBandFactor: 2 },
+  ] as Array<WithDecayConfig>)('Config ${0}', async config => {
+    const snapshotName = ('decay_' +
       Object.entries(config)
         .map(([key, val]) => {
           return `${key}_${val.toString().replace(/\./g, '_').replace(/,/g, '_')}`;
         })
-        .join('$');
+        .join('$')) as keyof typeof Snapshots;
 
-    const [updates, nativeUpdates] = await getSnapshotUpdates(config, duration);
-    expect(updates).toMatchSnapshots(Snapshots[snapshotName as keyof typeof Snapshots]);
+    const [updates, nativeUpdates] = await getSnapshotUpdates(snapshotName, config);
+    expect(updates).toMatchSnapshots(Snapshots[snapshotName]);
     expect(updates).toMatchNativeSnapshots(nativeUpdates);
   });
 });

apps/common-app/src/examples/RuntimeTests/tests/animations/withSequence/callbackCascade.test.tsx

@@ -12,13 +12,13 @@ import {
   test,
   expect,
   render,
-  wait,
   callTracker,
   getTrackerCallCount,
   mockAnimationTimer,
   recordAnimationUpdates,
   getRegisteredValue,
   registerValue,
+  waitForAnimationUpdates,
 } from '../../../ReanimatedRuntimeTestsRunner/RuntimeTestsApi';
 import { Snapshots } from './snapshots.snapshot';
 
@@ -97,7 +97,7 @@ describe(`Cascade of callbacks`, () => {
     const updatesContainerActive = await recordAnimationUpdates();
 
     await render(<CallbackComponent />);
-    await wait(1400);
+    await waitForAnimationUpdates(Snapshots.CallbackCascade.length);
     const updates = updatesContainerActive.getUpdates();
     const nativeUpdates = await updatesContainerActive.getNativeSnapshots();
 
@@ -202,7 +202,7 @@ describe(`Test all callbacks have been called in valid order`, () => {
     await mockAnimationTimer();
     const updatesContainerActive = await recordAnimationUpdates();
     await render(<CallbackComponent />);
-    await wait(1400);
+    await waitForAnimationUpdates(Snapshots.CallbackOrder.length);
     const updates = updatesContainerActive.getUpdates();
     const nativeUpdates = await updatesContainerActive.getNativeSnapshots();
     expect(updates).toMatchSnapshots(Snapshots.CallbackOrder);

apps/common-app/src/examples/RuntimeTests/tests/animations/withSpring/variousConfig.test.tsx

@@ -9,7 +9,7 @@ import {
   mockAnimationTimer,
   recordAnimationUpdates,
   render,
-  wait,
+  waitForAnimationUpdates,
 } from '../../../ReanimatedRuntimeTestsRunner/RuntimeTestsApi';
 import { Snapshots } from './withSpring.snapshot';
 
@@ -41,12 +41,11 @@ const AnimatedComponent = ({
   );
 };
 
-async function getSnapshotUpdates(animateFrom: number, animateTo: number, config: WithSpringConfig, waitTime = 2000) {
+async function getSnapshotUpdates(snapshotName: keyof typeof Snapshots, animateFrom: number, animateTo: number) {
   await mockAnimationTimer();
   const updatesContainer = await recordAnimationUpdates();
-  await render(<AnimatedComponent animateFrom={animateFrom} animateTo={animateTo} config={config} />);
-  await wait(waitTime);
-
+  await render(<AnimatedComponent animateFrom={animateFrom} animateTo={animateTo} config={{}} />);
+  await waitForAnimationUpdates(Snapshots[snapshotName].length);
   const updates = updatesContainer.getUpdates();
   const nativeUpdates = await updatesContainer.getNativeSnapshots();
 
@@ -63,9 +62,9 @@ describe('WithSpring snapshots 📸, test various configs', () => {
     ] as Array<[number, number]>)(
       'Empty config, from ${0} to ${1}',
       async ([animateFrom, animateTo]: [number, number]) => {
-        const [updates, nativeUpdates] = await getSnapshotUpdates(animateFrom, animateTo, {});
-        const snapshotName = `empty_${animateFrom}_${animateTo}`;
-        expect(updates).toMatchSnapshots(Snapshots[snapshotName as keyof typeof Snapshots]);
+        const snapshotName = `empty_${animateFrom}_${animateTo}` as keyof typeof Snapshots;
+        const [updates, nativeUpdates] = await getSnapshotUpdates(snapshotName, animateFrom, animateTo);
+        expect(updates).toMatchSnapshots(Snapshots[snapshotName]);
         expect(updates).toMatchNativeSnapshots(nativeUpdates, true);
       },
     );

apps/common-app/src/examples/RuntimeTests/tests/animations/withTiming/transformMatrices.test.tsx

@@ -8,7 +8,7 @@ import {
   mockAnimationTimer,
   recordAnimationUpdates,
   render,
-  wait,
+  waitForAnimationUpdates,
 } from '../../../ReanimatedRuntimeTestsRunner/RuntimeTestsApi';
 import { MatrixSnapshots } from './withTiming.snapshot';
 
@@ -38,11 +38,16 @@ const AnimatedComponent = ({
   );
 };
 
-async function getSnapshotUpdates(initialTransform: Array<number>, finalTransform: Array<number>) {
+async function getSnapshotUpdates(
+  snapshotName: keyof typeof MatrixSnapshots,
+  initialTransform: Array<number>,
+  finalTransform: Array<number>,
+) {
   await mockAnimationTimer();
   const updatesContainer = await recordAnimationUpdates();
   await render(<AnimatedComponent initialTransform={initialTransform} finalTransform={finalTransform} />);
-  await wait(1200);
+
+  await waitForAnimationUpdates(MatrixSnapshots[snapshotName].length);
   const updates = updatesContainer.getUpdates();
   return updates;
 }
@@ -70,8 +75,9 @@ describe('withTiming snapshots 📸, test TRANSFORM MATRIX', () => {
       finalTransform: [1, 1, 100, 1, 0, 2, 0, 0.5, 30, 0, 10, 0, 30, 0, 0, 2],
     },
   ])('From ${initialTransform} to ${finalTransform}', async ({ initialTransform, finalTransform }, index) => {
-    const updates = await getSnapshotUpdates(initialTransform, finalTransform);
-    expect(updates).toMatchSnapshots(MatrixSnapshots[`matrix_${index}` as keyof typeof MatrixSnapshots]);
+    const snapshotName = `matrix_${index}` as keyof typeof MatrixSnapshots;
+    const updates = await getSnapshotUpdates(snapshotName, initialTransform, finalTransform);
+    expect(updates).toMatchSnapshots(MatrixSnapshots[snapshotName]);
   });
 });
 

apps/common-app/src/examples/RuntimeTests/tests/core/useDerivedValue/basic.test.tsx

@@ -15,10 +15,10 @@ import {
   render,
   useTestRef,
   getTestComponent,
-  wait,
   recordAnimationUpdates,
   mockAnimationTimer,
   unmockAnimationTimer,
+  waitForAnimationUpdates,
 } from '../../../ReanimatedRuntimeTestsRunner/RuntimeTestsApi';
 import { BasicSnapshots } from './useDerivedValue.snapshot';
 
@@ -103,6 +103,7 @@ describe('Test useDerivedValue changing width', () => {
   ].forEach(({ derivedFun, msg, index }) => {
     describe(`Tests for derived function ${msg}`, () => {
       async function getSnapshotUpdatesAndCheckFinalValue(
+        snapshotLength: number,
         startWidth: number,
         finalWidth: number,
         animate: AnimationLocation,
@@ -120,9 +121,7 @@ describe('Test useDerivedValue changing width', () => {
           />,
         );
         const testComponent = getTestComponent(WIDTH_COMPONENT);
-        const waitTime =
-          animationType === AnimationType.NONE ? 50 : animationType === AnimationType.TIMING ? 350 : 1800;
-        await wait(waitTime);
+        await waitForAnimationUpdates(snapshotLength);
         expect(await testComponent.getAnimatedStyle('width')).toBe(derivedFun(finalWidth), ComparisonMode.PIXEL);
         const updates = updatesContainerActive.getUpdates();
         const naiveUpdates = await updatesContainerActive.getNativeSnapshots();
@@ -200,18 +199,22 @@ describe('Test useDerivedValue changing width', () => {
             [AnimationLocation.ANIMATED_STYLE]: 3,
           };
 
+          const snapshot = BasicSnapshots[`func_${index}` as keyof typeof BasicSnapshots];
           const snapshotName =
-            `width_${animationType}_${snapshotIdPerType[animate]}_${startWidth}_${finalWidth}`.replace(/\./g, '$');
+            `width_${animationType}_${snapshotIdPerType[animate]}_${startWidth}_${finalWidth}`.replace(
+              /\./g,
+              '$',
+            ) as keyof typeof snapshot;
 
           const [updates, nativeUpdates] = await getSnapshotUpdatesAndCheckFinalValue(
+            snapshot[snapshotName].length,
             startWidth,
             finalWidth,
             animate,
             animationType,
           );
 
-          const snapshot = BasicSnapshots[`func_${index}` as keyof typeof BasicSnapshots];
-          expect(updates).toMatchSnapshots(snapshot[snapshotName as keyof typeof snapshot]);
+          expect(updates).toMatchSnapshots(snapshot[snapshotName]);
           expect(updates).toMatchNativeSnapshots(nativeUpdates, true);
         },
       );