chore: Update AnimatedStyle and Animated tests

Author: gabrieldonadel

Libraries/Animated/__tests__/Animated-test.js

@@ -62,17 +62,15 @@ describe('Animated tests', () => {
       );
 
       expect(node.__getValue()).toEqual({
-        style: [
-          {
-            backgroundColor: 'red',
-            opacity: 0,
-            transform: [{translate: [100, 100]}, {translateX: 100}, {scale: 0}],
-            shadowOffset: {
-              width: 0,
-              height: 0,
-            },
+        style: {
+          backgroundColor: 'red',
+          opacity: 0,
+          transform: [{translate: [100, 100]}, {translateX: 100}, {scale: 0}],
+          shadowOffset: {
+            width: 0,
+            height: 0,
           },
-        ],
+        },
       });
 
       expect(anim.__getChildren().length).toBe(0);
@@ -86,21 +84,15 @@ describe('Animated tests', () => {
       expect(callback).toBeCalled();
 
       expect(node.__getValue()).toEqual({
-        style: [
-          {
-            backgroundColor: 'red',
-            opacity: 0.5,
-            transform: [
-              {translate: [150, 150]},
-              {translateX: 150},
-              {scale: 0.5},
-            ],
-            shadowOffset: {
-              width: 0.5,
-              height: 0.5,
-            },
+        style: {
+          backgroundColor: 'red',
+          opacity: 0.5,
+          transform: [{translate: [150, 150]}, {translateX: 150}, {scale: 0.5}],
+          shadowOffset: {
+            width: 0.5,
+            height: 0.5,
           },
-        ],
+        },
       });
 
       node.__detach();
@@ -181,15 +173,15 @@ describe('Animated tests', () => {
         <Animated.View style={{opacity}} />,
       );
 
-      expect(testRenderer.toJSON().props.style[0].opacity).toEqual(0);
+      expect(testRenderer.toJSON().props.style.opacity).toEqual(0);
 
       Animated.timing(opacity, {
         toValue: 1,
         duration: 0,
         useNativeDriver: false,
       }).start();
 
-      expect(testRenderer.toJSON().props.style[0].opacity).toEqual(1);
+      expect(testRenderer.toJSON().props.style.opacity).toEqual(1);
     });
 
     it('warns if `useNativeDriver` is missing', () => {
@@ -812,34 +804,30 @@ describe('Animated tests', () => {
   describe('Animated Vectors', () => {
     it('should animate vectors', () => {
       const vec = new Animated.ValueXY();
-      const vecLayout = vec.getLayout();
-      const opacity = vec.x.interpolate({
-        inputRange: [0, 42],
-        outputRange: [0.2, 0.8],
-      });
 
       const callback = jest.fn();
 
       const node = new AnimatedProps(
         {
           style: {
-            opacity,
+            opacity: vec.x.interpolate({
+              inputRange: [0, 42],
+              outputRange: [0.2, 0.8],
+            }),
             transform: vec.getTranslateTransform(),
-            ...vecLayout,
+            ...vec.getLayout(),
           },
         },
         callback,
       );
 
       expect(node.__getValue()).toEqual({
-        style: [
-          {
-            opacity: 0.2,
-            transform: [{translateX: 0}, {translateY: 0}],
-            left: 0,
-            top: 0,
-          },
-        ],
+        style: {
+          opacity: 0.2,
+          transform: [{translateX: 0}, {translateY: 0}],
+          left: 0,
+          top: 0,
+        },
       });
 
       node.__attach();
@@ -851,14 +839,12 @@ describe('Animated tests', () => {
       expect(callback.mock.calls.length).toBe(2); // once each for x, y
 
       expect(node.__getValue()).toEqual({
-        style: [
-          {
-            opacity: 0.8,
-            transform: [{translateX: 42}, {translateY: 1492}],
-            left: 42,
-            top: 1492,
-          },
-        ],
+        style: {
+          opacity: 0.8,
+          transform: [{translateX: 42}, {translateY: 1492}],
+          left: 42,
+          top: 1492,
+        },
       });
 
       node.__detach();
@@ -951,15 +937,13 @@ describe('Animated tests', () => {
       expect(listener.mock.calls.length).toBe(2);
       expect(listener).toBeCalledWith({value: 137});
       expect(view.__getValue()).toEqual({
-        style: [
-          {
-            transform: [
-              {
-                translateX: 137,
-              },
-            ],
-          },
-        ],
+        style: {
+          transform: [
+            {
+              translateX: 137,
+            },
+          ],
+        },
       });
       value4.removeListener(id);
       value1.setValue(40);
@@ -1027,18 +1011,17 @@ describe('Animated tests', () => {
 
     it('should animate colors', () => {
       const color = new Animated.Color({r: 255, g: 0, b: 0, a: 1.0});
-      const scale = color.a.interpolate({
-        inputRange: [0, 1],
-        outputRange: [1, 2],
-      });
       const callback = jest.fn();
       const node = new AnimatedProps(
         {
           style: {
             backgroundColor: color,
             transform: [
               {
-                scale,
+                scale: color.a.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [1, 2],
+                }),
               },
             ],
           },
@@ -1047,12 +1030,10 @@ describe('Animated tests', () => {
       );
 
       expect(node.__getValue()).toEqual({
-        style: [
-          {
-            backgroundColor: 'rgba(255, 0, 0, 1)',
-            transform: [{scale: 2}],
-          },
-        ],
+        style: {
+          backgroundColor: 'rgba(255, 0, 0, 1)',
+          transform: [{scale: 2}],
+        },
       });
 
       node.__attach();
@@ -1061,12 +1042,10 @@ describe('Animated tests', () => {
       color.setValue({r: 11, g: 22, b: 33, a: 0.5});
       expect(callback.mock.calls.length).toBe(4);
       expect(node.__getValue()).toEqual({
-        style: [
-          {
-            backgroundColor: 'rgba(11, 22, 33, 0.5)',
-            transform: [{scale: 1.5}],
-          },
-        ],
+        style: {
+          backgroundColor: 'rgba(11, 22, 33, 0.5)',
+          transform: [{scale: 1.5}],
+        },
       });
 
       node.__detach();