@hero-design/rn 8.42.0-alpha.0 → 8.42.0

package/src/components/Error/__tests__/__snapshots__/index.spec.tsx.snap

@@ -245,146 +245,164 @@ exports[`Error renders error screen with image correctly 1`] = `
 `;
 
 exports[`Error renders full screen error page correctly 1`] = `
-<Modal
-  animationType="slide"
-  hardwareAccelerated={false}
-  onDismiss={[Function]}
-  onRequestClose={[Function]}
-  style={
-    [
+[
+  <View
+    collapsable={false}
+    style={
       {
-        "height": "100%",
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
-  visible={true}
->
+        "backgroundColor": "#000000",
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />,
   <View
+    collapsable={false}
     style={
-      [
-        {
-          "backgroundColor": "#ccd2d3",
-          "display": "flex",
-          "flex": 1,
-          "flexDirection": "column",
-        },
-        undefined,
-      ]
+      {
+        "bottom": 0,
+        "left": 0,
+        "opacity": 1,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": [
+          {
+            "translateY": 1334,
+          },
+        ],
+      }
     }
-    themeVariant="full-screen"
   >
     <View
       style={
         [
           {
-            "alignItems": "center",
+            "backgroundColor": "#ccd2d3",
             "display": "flex",
             "flex": 1,
             "flexDirection": "column",
-            "justifyContent": "center",
-            "padding": 24,
           },
           undefined,
         ]
       }
+      themeVariant="full-screen"
     >
       <View
         style={
           [
             {
-              "height": 176,
-              "marginBottom": 24,
-              "width": 176,
+              "alignItems": "center",
+              "display": "flex",
+              "flex": 1,
+              "flexDirection": "column",
+              "justifyContent": "center",
+              "padding": 24,
             },
             undefined,
           ]
         }
       >
-        <Image
-          source={
-            {
-              "uri": "path_to_image",
-            }
+        <View
+          style={
+            [
+              {
+                "height": 176,
+                "marginBottom": 24,
+                "width": 176,
+              },
+              undefined,
+            ]
           }
+        >
+          <Image
+            source={
+              {
+                "uri": "path_to_image",
+              }
+            }
+            style={
+              [
+                {
+                  "borderRadius": 0,
+                  "height": 72,
+                  "width": 72,
+                },
+                [
+                  {
+                    "height": 176,
+                    "marginBottom": 24,
+                    "resizeMode": "contain",
+                    "width": 176,
+                  },
+                  undefined,
+                ],
+              ]
+            }
+            testID="error-image"
+          />
+        </View>
+        <Text
+          allowFontScaling={false}
           style={
             [
               {
-                "borderRadius": 0,
-                "height": 72,
-                "width": 72,
+                "color": "#001f23",
+                "fontFamily": "RebondGrotesque-SemiBold",
+                "fontSize": 24,
+                "letterSpacing": 0.24,
+                "lineHeight": 32,
               },
               [
                 {
-                  "height": 176,
-                  "marginBottom": 24,
-                  "resizeMode": "contain",
-                  "width": 176,
+                  "color": "#001f23",
+                  "marginBottom": 8,
+                  "textAlign": "center",
                 },
                 undefined,
               ],
             ]
           }
-          testID="error-image"
-        />
-      </View>
-      <Text
-        allowFontScaling={false}
-        style={
-          [
-            {
-              "color": "#001f23",
-              "fontFamily": "RebondGrotesque-SemiBold",
-              "fontSize": 24,
-              "letterSpacing": 0.24,
-              "lineHeight": 32,
-            },
+          themeIntent="body"
+          themeLevel="h4"
+          themeTypeface="playful"
+        >
+          We’re sorry, something went wrong
+        </Text>
+        <Text
+          allowFontScaling={false}
+          style={
             [
               {
                 "color": "#001f23",
-                "marginBottom": 8,
-                "textAlign": "center",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 18,
+                "letterSpacing": 0.54,
+                "lineHeight": 26,
               },
-              undefined,
-            ],
-          ]
-        }
-        themeIntent="body"
-        themeLevel="h4"
-        themeTypeface="playful"
-      >
-        We’re sorry, something went wrong
-      </Text>
-      <Text
-        allowFontScaling={false}
-        style={
-          [
-            {
-              "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 18,
-              "letterSpacing": 0.54,
-              "lineHeight": 26,
-            },
-            [
-              {
-                "color": "#4d6265",
-                "textAlign": "center",
-              },
-              undefined,
-            ],
-          ]
-        }
-        themeIntent="body"
-        themeTypeface="playful"
-        themeVariant="regular"
-      >
-        Please try again later
-      </Text>
+              [
+                {
+                  "color": "#4d6265",
+                  "textAlign": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="playful"
+          themeVariant="regular"
+        >
+          Please try again later
+        </Text>
+      </View>
     </View>
-  </View>
-</Modal>
+  </View>,
+]
 `;
 
 exports[`Error renders title only correctly 1`] = `

package/src/components/Error/__tests__/index.spec.tsx

@@ -3,6 +3,7 @@ import { fireEvent } from '@testing-library/react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Error from '..';
 import Image from '../../Image';
+import Portal from '../../Portal';
 
 const title = `We’re sorry, something went wrong`;
 const description = 'Please try again later';
@@ -46,12 +47,14 @@ describe('Error', () => {
   });
   it('renders full screen error page correctly', () => {
     const { toJSON, getByText, getByTestId } = renderWithTheme(
-      <Error
-        variant="full-screen"
-        title={title}
-        description={description}
-        image="path_to_image"
-      />
+      <Portal.Provider>
+        <Error
+          variant="full-screen"
+          title={title}
+          description={description}
+          image="path_to_image"
+        />
+      </Portal.Provider>
     );
 
     expect(getByText(title)).toBeTruthy();

package/src/components/Modal/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal renders correctly 1`] = `
+[
+  <View
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "#000000",
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0.4,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />,
+  <View
+    collapsable={false}
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "opacity": 1,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": [
+          {
+            "translateY": 0,
+          },
+        ],
+      }
+    }
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="regular"
+    >
+      Modal content
+    </Text>
+  </View>,
+]
+`;
+
+exports[`Modal renders correctly with transparent 1`] = `
+[
+  <View
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "transparent",
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0.4,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />,
+  <View
+    collapsable={false}
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "opacity": 1,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": [
+          {
+            "translateY": 0,
+          },
+        ],
+      }
+    }
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="regular"
+    >
+      Modal content
+    </Text>
+  </View>,
+]
+`;

package/src/components/Modal/__tests__/index.spec.tsx

@@ -0,0 +1,99 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import { BackHandler } from 'react-native';
+import Modal from '..';
+import { Button } from '../../..';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Portal from '../../Portal';
+import Typography from '../../Typography';
+
+describe('Modal', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(
+      <Portal.Provider>
+        <Modal visible>
+          <Typography.Body>Modal content</Typography.Body>
+        </Modal>
+      </Portal.Provider>
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with transparent', () => {
+    const wrapper = renderWithTheme(
+      <Portal.Provider>
+        <Modal visible transparent>
+          <Typography.Body>Modal content</Typography.Body>
+        </Modal>
+      </Portal.Provider>
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('trigger onShow callback correctly', () => {
+    const onShow = jest.fn();
+    renderWithTheme(
+      <Portal.Provider>
+        <Modal visible onShow={onShow}>
+          <Typography.Body>Modal content</Typography.Body>
+        </Modal>
+      </Portal.Provider>
+    );
+
+    expect(onShow).toBeCalledTimes(1);
+  });
+
+  it('trigger onRequestClose callback correctly', () => {
+    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+      OS: 'android',
+      select: () => null,
+    }));
+
+    const onRequestClose = jest.fn();
+    renderWithTheme(
+      <Portal.Provider>
+        <Modal visible onRequestClose={onRequestClose}>
+          <Typography.Body>Modal content</Typography.Body>
+        </Modal>
+      </Portal.Provider>
+    );
+
+    // @ts-expect-error: BackHandler mock
+    BackHandler.mockPressBack();
+    expect(onRequestClose).toBeCalled();
+  });
+
+  it('trigger onDismiss callback correctly', async () => {
+    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+      OS: 'ios',
+      select: () => null,
+    }));
+
+    const onDismiss = jest.fn();
+
+    const ModalExample = () => {
+      const [modalVisible, setModalVisible] = React.useState(true);
+
+      return (
+        <Portal.Provider>
+          <Modal
+            animationType="none"
+            visible={modalVisible}
+            onDismiss={onDismiss}
+            transparent
+          >
+            <Typography.Body>Modal content</Typography.Body>
+            <Button text="Close modal" onPress={() => setModalVisible(false)} />
+          </Modal>
+        </Portal.Provider>
+      );
+    };
+
+    const { getByText } = renderWithTheme(<ModalExample />);
+
+    fireEvent.press(getByText('Close modal'));
+    expect(onDismiss).toBeCalled();
+  });
+});