test: update Surface iOS style tests

Author: DimitarNestorov

src/components/__tests__/Surface.test.tsx

@@ -39,6 +39,88 @@ describe('Surface', () => {
       },
     });
 
+    it.each`
+      property              | value
+      ${'opacity'}          | ${0.7}
+      ${'transform'}        | ${[{ scale: 1.02 }]}
+      ${'width'}            | ${'42%'}
+      ${'height'}           | ${'32.5%'}
+      ${'margin'}           | ${13}
+      ${'marginLeft'}       | ${13.1}
+      ${'marginRight'}      | ${13.2}
+      ${'marginTop'}        | ${13.3}
+      ${'marginBottom'}     | ${13.4}
+      ${'marginHorizontal'} | ${13.5}
+      ${'marginVertical'}   | ${13.6}
+      ${'position'}         | ${'absolute'}
+      ${'alignSelf'}        | ${'flex-start'}
+      ${'top'}              | ${1.1}
+      ${'right'}            | ${1.2}
+      ${'bottom'}           | ${1.3}
+      ${'left'}             | ${1.4}
+      ${'start'}            | ${1.5}
+      ${'end'}              | ${1.6}
+      ${'flex'}             | ${6}
+    `('applies $property to outer 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')).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
+      ${'borderRadius'}            | ${3}
+      ${'borderTopLeftRadius'}     | ${1}
+      ${'borderTopRightRadius'}    | ${2}
+      ${'borderBottomLeftRadius'}  | ${3}
+      ${'borderBottomRightRadius'} | ${4}
+    `('applies $property to every layer', ({ property, value }) => {
+      const style = { [property]: value };
+
+      const { getByTestId } = render(
+        <Surface testID="surface-test" style={style}>
+          {null}
+        </Surface>
+      );
+
+      expect(getByTestId('surface-test-outer-layer')).toHaveStyle(style);
+      expect(getByTestId('surface-test-middle-layer')).toHaveStyle(style);
+      expect(getByTestId('surface-test')).toHaveStyle(style);
+    });
+
     describe('outer layer', () => {
       it('should not render rest style', () => {
         const testID = 'surface-test';