test: fix tests after removal of middle layer in Surface

Author: DimitarNestorov

src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap

@@ -33,6 +33,9 @@ exports[`Card renders an outlined card 1`] = `
     collapsable={false}
     style={
       Object {
+        "backgroundColor": "rgba(255, 251, 254, 1)",
+        "borderRadius": 12,
+        "elevation": 1,
         "flex": undefined,
         "shadowColor": "#000",
         "shadowOffset": Object {
@@ -43,65 +46,52 @@ exports[`Card renders an outlined card 1`] = `
         "shadowRadius": 0,
       }
     }
-    testID="card-container-middle-layer"
+    testID="card-container"
   >
     <View
-      collapsable={false}
+      pointerEvents="none"
       style={
+        Array [
+          Object {
+            "borderColor": "rgba(121, 116, 126, 1)",
+            "borderRadius": 12,
+          },
+          Object {
+            "borderWidth": 1,
+            "height": "100%",
+            "position": "absolute",
+            "width": "100%",
+            "zIndex": 2,
+          },
+        ]
+      }
+      testID="card-outline"
+    />
+    <View
+      accessibilityState={
         Object {
-          "backgroundColor": "rgba(255, 251, 254, 1)",
-          "borderRadius": 12,
-          "elevation": 1,
-          "flex": undefined,
+          "disabled": true,
         }
       }
-      testID="card-container"
-    >
-      <View
-        pointerEvents="none"
-        style={
-          Array [
-            Object {
-              "borderColor": "rgba(121, 116, 126, 1)",
-              "borderRadius": 12,
-            },
-            Object {
-              "borderWidth": 1,
-              "height": "100%",
-              "position": "absolute",
-              "width": "100%",
-              "zIndex": 2,
-            },
-          ]
-        }
-        testID="card-outline"
-      />
-      <View
-        accessibilityState={
+      accessible={true}
+      focusable={false}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
           Object {
-            "disabled": true,
-          }
-        }
-        accessible={true}
-        focusable={false}
-        onClick={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Array [
-            Object {
-              "flexShrink": 1,
-            },
-            undefined,
-          ]
-        }
-        testID="card"
-      />
-    </View>
+            "flexShrink": 1,
+          },
+          undefined,
+        ]
+      }
+      testID="card"
+    />
   </View>
 </View>
 `;

src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap

@@ -71,43 +71,26 @@ describe('Surface', () => {
       );
 
       expect(getByTestId('surface-test-outer-layer')).toHaveStyle(style);
-      expect(getByTestId('surface-test-middle-layer')).not.toHaveStyle(style);
       expect(getByTestId('surface-test')).not.toHaveStyle(style);
     });
 
-    it.each`
-      property               | value
-      ${'padding'}           | ${12}
-      ${'paddingLeft'}       | ${12.1}
-      ${'paddingRight'}      | ${12.2}
-      ${'paddingTop'}        | ${12.3}
-      ${'paddingBottom'}     | ${12.4}
-      ${'paddingHorizontal'} | ${12.5}
-      ${'paddingVertical'}   | ${12.6}
-      ${'borderWidth'}       | ${2}
-      ${'borderColor'}       | ${'black'}
-    `('applies $property to inner layer only', ({ property, value }) => {
-      const style = { [property]: value };
-
-      const { getByTestId } = render(
-        <Surface testID="surface-test" style={style}>
-          {null}
-        </Surface>
-      );
-
-      expect(getByTestId('surface-test-outer-layer')).not.toHaveStyle(style);
-      expect(getByTestId('surface-test-middle-layer')).not.toHaveStyle(style);
-      expect(getByTestId('surface-test')).toHaveStyle(style);
-    });
-
     it.each`
       property                     | value
+      ${'padding'}                 | ${12}
+      ${'paddingLeft'}             | ${12.1}
+      ${'paddingRight'}            | ${12.2}
+      ${'paddingTop'}              | ${12.3}
+      ${'paddingBottom'}           | ${12.4}
+      ${'paddingHorizontal'}       | ${12.5}
+      ${'paddingVertical'}         | ${12.6}
+      ${'borderWidth'}             | ${2}
+      ${'borderColor'}             | ${'black'}
       ${'borderRadius'}            | ${3}
       ${'borderTopLeftRadius'}     | ${1}
       ${'borderTopRightRadius'}    | ${2}
       ${'borderBottomLeftRadius'}  | ${3}
       ${'borderBottomRightRadius'} | ${4}
-    `('applies $property to inner layer', ({ property, value }) => {
+    `('applies $property to inner layer only', ({ property, value }) => {
       const style = { [property]: value };
 
       const { getByTestId } = render(
@@ -117,7 +100,6 @@ describe('Surface', () => {
       );
 
       expect(getByTestId('surface-test-outer-layer')).not.toHaveStyle(style);
-      expect(getByTestId('surface-test-middle-layer')).not.toHaveStyle(style);
       expect(getByTestId('surface-test')).toHaveStyle(style);
     });
 
@@ -179,7 +161,6 @@ describe('Surface', () => {
 
         const style = { backgroundColor };
         expect(getByTestId('surface-test-outer-layer')).not.toHaveStyle(style);
-        expect(getByTestId('surface-test-middle-layer')).not.toHaveStyle(style);
         expect(getByTestId('surface-test')).toHaveStyle(style);
       });