Testing colors

apps/common-app/src/examples/RuntimeTests/ReanimatedRuntimeTestsRunner/matchers/Comparators.ts

@@ -1,3 +1,4 @@
+import { isColor, processColor } from 'react-native-reanimated';
 import type { TestValue, ValidPropNames } from '../types';
 import { ComparisonMode, isValidPropName } from '../types';
 
@@ -18,19 +19,10 @@ const COMPARATORS: {
   },
 
   [ComparisonMode.COLOR]: (expected, value) => {
-    if (typeof value !== 'string' || typeof expected !== 'string') {
+    if (!isColor(expected) || !isColor(value)) {
       return false;
     }
-
-    const expectedLowerCase = expected.toLowerCase();
-    const [opaqueColorRe, transparencyColorRe] = [6, 8].map(length => new RegExp(`^#?([A-Fa-f0-9]{${length}})$`));
-    const shouldAddTransparency = opaqueColorRe.test(expectedLowerCase);
-    const expectedUnified = shouldAddTransparency ? `${expectedLowerCase}ff` : expectedLowerCase;
-
-    if (!transparencyColorRe.test(expectedUnified)) {
-      throw Error(`Invalid color format "${expectedUnified}", please use hex color (like #123abc)`);
-    }
-    return value === expectedUnified;
+    return processColor(expected) === processColor(value);
   },
 
   [ComparisonMode.DISTANCE]: (expected, value) => {

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

@@ -75,112 +75,79 @@ describe('withSequence animation of number', () => {
   test.each([
     {
       startColor: 'gold',
-      startColorHex: '#ffd700ff',
       middleColor: 'forestgreen',
-      middleColorHex: '#228b22ff',
       finalColor: 'darkblue',
-      finalColorHex: '#00008bff',
     },
     {
       startColor: '#ffd700ab',
-      startColorHex: '#ffd700ab',
       middleColor: 'forestgreen',
-      middleColorHex: '#228b22ff',
       finalColor: 'darkblue',
-      finalColorHex: '#00008bff',
     },
     {
       startColor: '#ffd700ab',
-      startColorHex: '#ffd700ab',
       middleColor: 'forestgreen',
-      middleColorHex: '#228b22',
       finalColor: '#88bbcc44',
-      finalColorHex: '#88bbcc44',
     },
     {
       startColor: 'gold',
-      startColorHex: '#ffd700ff',
       middleColor: 'hsl(180, 50%, 50%)',
-      middleColorHex: '#40bfbfff',
       finalColor: 'hsl(120,100%,50%)',
-      finalColorHex: '#00ff00ff',
     },
     {
       startColor: 'gold',
-      startColorHex: '#ffd700ff',
       middleColor: 'hsl(70, 100%, 75%)',
-      middleColorHex: '#eaff80ff',
       finalColor: 'hsl(120,100%,50%)',
-      finalColorHex: '#00ff00ff',
     },
     {
       startColor: 'hwb(70, 50%, 0%)',
-      startColorHex: '#eaff80ff',
       middleColor: 'hsl(180, 50%, 50%)',
-      middleColorHex: '#40bfbfff',
       finalColor: 'hsl(120,100%,50%)',
-      finalColorHex: '#00ff00ff',
     },
     {
       startColor: 'hwb(70, 50%, 0%)',
-      startColorHex: '#eaff80ff',
       middleColor: 'hsl(180, 50%, 50%)',
-      middleColorHex: '#40bfbfff',
       finalColor: 'hsl(120,100%,50%)',
-      finalColorHex: '#00ff00ff',
     },
     {
       startColor: 'hwb(70, 50%, 0%)',
-      startColorHex: '#eaff80ff',
       middleColor: 'hsl(180, 50%, 50%)',
-      middleColorHex: '#40bfbfff',
       finalColor: 'rgb(101,255,50)',
-      finalColorHex: '#65ff32ff',
     },
     {
       startColor: 'hwb(70, 50%, 0%)',
-      startColorHex: '#eaff80ff',
       middleColor: 'hsl(180, 50%, 50%)',
-      middleColorHex: '#40bfbfff',
       finalColor: 'hsla( 120 , 100% , 50%, 0.5 )',
-      finalColorHex: '#00ff0080',
     },
     {
       startColor: 'hwb(70, 50%, 0%)',
-      startColorHex: '#eaff80ff',
       middleColor: 'hsl(180, 50%, 50%)',
-      middleColorHex: '#40bfbfff',
       finalColor: 'rgb(101,255,50)',
-      finalColorHex: '#65ff32ff',
     },
     {
       startColor: 'hwb(70, 50%, 0%)',
-      startColorHex: '#eaff80ff',
       middleColor: 'hsl(180, 50%, 50%)',
-      middleColorHex: '#40bfbfff',
       finalColor: 'rgba(100,255,50,0.5)',
-      finalColorHex: '#64ff3280',
     },
   ])(
     'Animate ${startColor} → ${finalColor} → ${middleColor} → ${finalColor}',
-    async ({ startColor, startColorHex, middleColor, middleColorHex, finalColor, finalColorHex }) => {
+    async ({ startColor, middleColor, finalColor }) => {
       await render(<WidthComponent startColor={startColor} middleColor={middleColor} finalColor={finalColor} />);
       const activeComponent = getTestComponent(Component.ACTIVE);
       const passiveComponent = getTestComponent(Component.PASSIVE);
 
       await wait(DELAY / 2);
       // TODO Decide what should be the starting value of activeComponent
-      expect(await activeComponent.getAnimatedStyle('backgroundColor')).not.toBe(startColorHex, ComparisonMode.COLOR);
-      expect(await passiveComponent.getAnimatedStyle('backgroundColor')).toBe(startColorHex, ComparisonMode.COLOR);
+      expect(await activeComponent.getAnimatedStyle('backgroundColor')).not.toBe(startColor, ComparisonMode.COLOR);
+      expect(await passiveComponent.getAnimatedStyle('backgroundColor')).toBe(startColor, ComparisonMode.COLOR);
       await wait(200 + DELAY);
-      expect(await activeComponent.getAnimatedStyle('backgroundColor')).toBe(finalColorHex, ComparisonMode.COLOR);
-      expect(await passiveComponent.getAnimatedStyle('backgroundColor')).toBe(finalColorHex, ComparisonMode.COLOR);
+      expect(await activeComponent.getAnimatedStyle('backgroundColor')).toBe(finalColor, ComparisonMode.COLOR);
+      expect(await passiveComponent.getAnimatedStyle('backgroundColor')).toBe(finalColor, ComparisonMode.COLOR);
       await wait(300 + DELAY);
-      expect(await activeComponent.getAnimatedStyle('backgroundColor')).toBe(middleColorHex, ComparisonMode.COLOR);
-      expect(await passiveComponent.getAnimatedStyle('backgroundColor')).toBe(middleColorHex, ComparisonMode.COLOR);
+      expect(await activeComponent.getAnimatedStyle('backgroundColor')).toBe(middleColor, ComparisonMode.COLOR);
+      expect(await passiveComponent.getAnimatedStyle('backgroundColor')).toBe(middleColor, ComparisonMode.COLOR);
       await wait(200 + DELAY);
-      expect(await activeComponent.getAnimatedStyle('backgroundColor')).toBe(finalColorHex, ComparisonMode.COLOR);
-      expect(await passiveComponent.getAnimatedStyle('backgroundColor')).toBe(finalColorHex, ComparisonMode.COLOR);
+      expect(await activeComponent.getAnimatedStyle('backgroundColor')).toBe(finalColor, ComparisonMode.COLOR);
+      expect(await passiveComponent.getAnimatedStyle('backgroundColor')).toBe(finalColor, ComparisonMode.COLOR);
     },
   );
 });

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

@@ -100,23 +100,23 @@ describe('withTiming animation of COLOR 🎨', () => {
   });
 
   test.each([
-    { from: '#6495ed', fromHex: '#6495ed', to: '#ff7f50', toHex: '#ff7f50' },
-    { from: '#6495edab', fromHex: '#6495edab', to: '#ff7f50ab', toHex: '#ff7f50ab' },
-    { from: '#6495ed', fromHex: '#6495ed', to: '#1b1', toHex: '#11bb11' },
-    { from: 'rgba(100,149,237,0.67)', fromHex: '#6495edab', to: '#1b1', toHex: '#11bb11' },
-    { from: '#1b1', fromHex: '#11bb11', to: 'rgba(100,149,237,0.67)', toHex: '#6495edab' },
-    { from: '#5bc', fromHex: '#55bbcc', to: '#ff7f50', toHex: '#ff7f50' },
-    { from: '#5bc', fromHex: '#55bbcc', to: '#1b1', toHex: '#11bb11' },
-  ])('Animate from ${from} to ${to}', async ({ from, to, fromHex, toHex }) => {
+    { from: '#6495ed', to: '#ff7f50' },
+    { from: '#6495edab', to: '#ff7f50ab' },
+    { from: '#6495ed', to: '#1b1' },
+    { from: 'rgba(100,149,237,0.67)', to: '#1b1' },
+    { from: '#1b1', to: 'rgba(100,149,237,0.67)' },
+    { from: '#5bc', to: '#ff7f50' },
+    { from: '#5bc', to: '#1b1' },
+  ])('Animate from ${from} to ${to}', async ({ from, to }) => {
     await render(<ColorComponent color1={from} color2={to} />);
     const componentActive = getTestComponent(COMPONENT_REF_ACTIVE);
     const componentPassive = getTestComponent(COMPONENT_REF_PASSIVE);
 
-    expect(await componentActive.getAnimatedStyle('backgroundColor')).toBe(fromHex, ComparisonMode.COLOR);
-    expect(await componentPassive.getAnimatedStyle('backgroundColor')).toBe(fromHex, ComparisonMode.COLOR);
+    expect(await componentActive.getAnimatedStyle('backgroundColor')).toBe(from, ComparisonMode.COLOR);
+    expect(await componentPassive.getAnimatedStyle('backgroundColor')).toBe(from, ComparisonMode.COLOR);
     await wait(1000);
-    expect(await componentActive.getAnimatedStyle('backgroundColor')).toBe(toHex, ComparisonMode.COLOR);
-    expect(await componentPassive.getAnimatedStyle('backgroundColor')).toBe(toHex, ComparisonMode.COLOR);
+    expect(await componentActive.getAnimatedStyle('backgroundColor')).toBe(to, ComparisonMode.COLOR);
+    expect(await componentPassive.getAnimatedStyle('backgroundColor')).toBe(to, ComparisonMode.COLOR);
   });
 });
 

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

@@ -3,7 +3,6 @@ import { View, StyleSheet } from 'react-native';
 import type { AnimatableValueObject } from 'react-native-reanimated';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, withDelay } from 'react-native-reanimated';
 import type { ValidPropNames } from '../../../ReanimatedRuntimeTestsRunner/types';
-import { ComparisonMode } from '../../../ReanimatedRuntimeTestsRunner/types';
 import {
   describe,
   test,
@@ -13,6 +12,7 @@ import {
   getTestComponent,
   wait,
 } from '../../../ReanimatedRuntimeTestsRunner/RuntimeTestsApi';
+import { getComparisonModeForProp } from '../../../ReanimatedRuntimeTestsRunner/matchers/Comparators';
 
 const COMPONENT_REF = 'AnimatedComponent';
 
@@ -42,16 +42,6 @@ const AnimatedComponent = ({
 };
 
 describe('withTiming animation of WIDTH', () => {
-  const comparisonModes = {
-    zIndex: ComparisonMode.NUMBER,
-    opacity: ComparisonMode.NUMBER,
-    width: ComparisonMode.DISTANCE,
-    height: ComparisonMode.DISTANCE,
-    top: ComparisonMode.DISTANCE,
-    left: ComparisonMode.DISTANCE,
-    backgroundColor: ComparisonMode.COLOR,
-  };
-
   test.each([
     {
       startStyle: { width: 10 },
@@ -74,15 +64,15 @@ describe('withTiming animation of WIDTH', () => {
       finalStyle: { opacity: 0.1, backgroundColor: '#AAAAFFFD' },
     },
   ])(
-    'Animate\tfrom \t${startStyle}\n\t\tto\t${finalStyle}',
+    'Animate from **${startStyle}** to **${finalStyle}**',
     async ({ startStyle, finalStyle }: { startStyle: any; finalStyle: any }) => {
       await render(<AnimatedComponent startStyle={startStyle} finalStyle={finalStyle} />);
       const component = getTestComponent(COMPONENT_REF);
       await wait(1000);
       for (const key of Object.keys(finalStyle)) {
         expect(await component.getAnimatedStyle(key as ValidPropNames)).toBe(
           finalStyle[key],
-          comparisonModes[key as keyof typeof comparisonModes],
+          getComparisonModeForProp(key as ValidPropNames),
         );
       }
     },
@@ -97,6 +87,6 @@ const styles = StyleSheet.create({
   box: {
     height: 100,
     width: 100,
-    margin: 30,
+    margin: 0,
   },
 });