@hero-design/rn 7.3.2 → 7.4.0

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

@@ -0,0 +1,531 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BottomSheet renders correctly with close state 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  onRequestClose={[MockFunction]}
+  transparent={true}
+  visible={false}
+>
+  <View
+    pointerEvents="box-none"
+    style={
+      Array [
+        Object {
+          "bottom": 0,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      nativeID="animatedComponent"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "backgroundColor": "#292a2b",
+          "bottom": 0,
+          "left": 0,
+          "opacity": 0.48,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    />
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      onLayout={[Function]}
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+          "borderTopLeftRadius": 16,
+          "borderTopRightRadius": 16,
+          "elevation": 10,
+          "maxHeight": "94%",
+          "shadowColor": "#292a2b",
+          "shadowOffset": Object {
+            "height": 3,
+            "width": 0,
+          },
+          "shadowOpacity": 0.27,
+          "shadowRadius": 4.65,
+          "transform": Array [
+            Object {
+              "scaleY": 0,
+            },
+            Object {
+              "translateY": 0,
+            },
+          ],
+          "width": "100%",
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+              "minHeight": 64,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          adjacentIcon={true}
+          style={
+            Array [
+              Object {
+                "flex": 1,
+                "justifyContent": "center",
+                "paddingLeft": 24,
+                "paddingRight": 0,
+                "paddingVertical": 8,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#292a2b",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.54,
+                  "lineHeight": 26,
+                },
+                undefined,
+              ]
+            }
+            themeFontSize="xlarge"
+            themeFontWeight="semi-bold"
+            themeIntent="body"
+          >
+            Title
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "justifyContent": "center",
+                "width": 72,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            nativeID="animatedComponent"
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+            testID="bottom-sheet-close-icon"
+          >
+            <HeroIcon
+              name="cancel"
+              style={
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                    "fontSize": 24,
+                  },
+                  undefined,
+                ]
+              }
+              themeIntent="text"
+              themeSize="medium"
+            />
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "borderBottomColor": "#dadbde",
+              "borderBottomWidth": 1,
+              "maxWidth": "100%",
+            },
+            undefined,
+          ]
+        }
+      />
+      <Text>
+        Content
+      </Text>
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#dadbde",
+                "borderBottomWidth": 1,
+                "maxWidth": "100%",
+              },
+              undefined,
+            ]
+          }
+        />
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "flex-end",
+                "minHeight": 64,
+                "paddingHorizontal": 24,
+                "paddingVertical": 8,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            accessibilityRole="button"
+            accessible={true}
+            collapsable={false}
+            focusable={false}
+            nativeID="animatedComponent"
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {},
+                ]
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#007AFF",
+                      "fontSize": 18,
+                      "margin": 8,
+                      "textAlign": "center",
+                    },
+                  ]
+                }
+              >
+                Footer CTA
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</Modal>
+`;
+
+exports[`BottomSheet renders correctly with open state 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  onRequestClose={[MockFunction]}
+  transparent={true}
+  visible={true}
+>
+  <View
+    pointerEvents="box-none"
+    style={
+      Array [
+        Object {
+          "bottom": 0,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      nativeID="animatedComponent"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "backgroundColor": "#292a2b",
+          "bottom": 0,
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    />
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      onLayout={[Function]}
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+          "borderTopLeftRadius": 16,
+          "borderTopRightRadius": 16,
+          "elevation": 10,
+          "maxHeight": "94%",
+          "shadowColor": "#292a2b",
+          "shadowOffset": Object {
+            "height": 3,
+            "width": 0,
+          },
+          "shadowOpacity": 0.27,
+          "shadowRadius": 4.65,
+          "transform": Array [
+            Object {
+              "scaleY": 0,
+            },
+            Object {
+              "translateY": 0,
+            },
+          ],
+          "width": "100%",
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+              "minHeight": 64,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          adjacentIcon={true}
+          style={
+            Array [
+              Object {
+                "flex": 1,
+                "justifyContent": "center",
+                "paddingLeft": 24,
+                "paddingRight": 0,
+                "paddingVertical": 8,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#292a2b",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "letterSpacing": 0.54,
+                  "lineHeight": 26,
+                },
+                undefined,
+              ]
+            }
+            themeFontSize="xlarge"
+            themeFontWeight="semi-bold"
+            themeIntent="body"
+          >
+            Title
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "justifyContent": "center",
+                "width": 72,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            accessible={true}
+            collapsable={false}
+            focusable={true}
+            nativeID="animatedComponent"
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+            testID="bottom-sheet-close-icon"
+          >
+            <HeroIcon
+              name="cancel"
+              style={
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                    "fontSize": 24,
+                  },
+                  undefined,
+                ]
+              }
+              themeIntent="text"
+              themeSize="medium"
+            />
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "borderBottomColor": "#dadbde",
+              "borderBottomWidth": 1,
+              "maxWidth": "100%",
+            },
+            undefined,
+          ]
+        }
+      />
+      <Text>
+        Content
+      </Text>
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "borderBottomColor": "#dadbde",
+                "borderBottomWidth": 1,
+                "maxWidth": "100%",
+              },
+              undefined,
+            ]
+          }
+        />
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "flex-end",
+                "minHeight": 64,
+                "paddingHorizontal": 24,
+                "paddingVertical": 8,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            accessibilityRole="button"
+            accessible={true}
+            collapsable={false}
+            focusable={false}
+            nativeID="animatedComponent"
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {},
+                ]
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#007AFF",
+                      "fontSize": 18,
+                      "margin": 8,
+                      "textAlign": "center",
+                    },
+                  ]
+                }
+              >
+                Footer CTA
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</Modal>
+`;

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

@@ -0,0 +1,107 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import { Button, Text } from 'react-native';
+import BottomSheet from '..';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+
+const Content = () => <Text>Content</Text>;
+
+describe('BottomSheet', () => {
+  it('renders correctly with open state', () => {
+    const { toJSON, getByText } = renderWithTheme(
+      <BottomSheet
+        open
+        header="Title"
+        footer={<Button title="Footer CTA" />}
+        onRequestClose={jest.fn()}
+      >
+        <Content />
+      </BottomSheet>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Title')).toBeDefined();
+    expect(getByText('Footer CTA')).toBeDefined();
+    expect(getByText('Content')).toBeDefined();
+  });
+
+  it('renders correctly with close state', () => {
+    const { toJSON } = renderWithTheme(
+      <BottomSheet
+        open={false}
+        header="Title"
+        footer={<Button title="Footer CTA" />}
+        onRequestClose={jest.fn()}
+      >
+        <Content />
+      </BottomSheet>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  describe('Header', () => {
+    it('renders default header correctly', () => {
+      const { getByText } = renderWithTheme(
+        <BottomSheet open header="Title">
+          <Content />
+        </BottomSheet>
+      );
+
+      expect(getByText('Title')).toBeDefined();
+      expect(getByText('Content')).toBeDefined();
+    });
+
+    it('renders custom header correctly', () => {
+      const { getByText } = renderWithTheme(
+        <BottomSheet open header={<Text>Custom Title</Text>}>
+          <Content />
+        </BottomSheet>
+      );
+
+      expect(getByText('Custom Title')).toBeDefined();
+      expect(getByText('Content')).toBeDefined();
+    });
+
+    it('renders header close button correctly', () => {
+      const onRequestClose = jest.fn();
+
+      const { getByText, getByTestId } = renderWithTheme(
+        <BottomSheet open header="Title" onRequestClose={onRequestClose}>
+          <Content />
+        </BottomSheet>
+      );
+
+      expect(getByText('Content')).toBeDefined();
+      expect(getByTestId('bottom-sheet-close-icon')).toBeDefined();
+
+      // Invoke onRequestClose when pressed
+      fireEvent.press(getByTestId('bottom-sheet-close-icon'));
+      expect(onRequestClose).toBeCalled();
+    });
+
+    it('not render header close button', () => {
+      const { getByText, queryByTestId } = renderWithTheme(
+        <BottomSheet open header="Title" showCloseButton={false}>
+          <Content />
+        </BottomSheet>
+      );
+
+      expect(queryByTestId('bottom-sheet-close-icon')).toBeNull();
+      expect(getByText('Content')).toBeDefined();
+    });
+  });
+
+  describe('Footer', () => {
+    it('renders footer correctly', () => {
+      const { getByText } = renderWithTheme(
+        <BottomSheet open footer={<Button title="Footer Button" />}>
+          <Content />
+        </BottomSheet>
+      );
+
+      expect(getByText('Footer Button')).toBeDefined();
+      expect(getByText('Content')).toBeDefined();
+    });
+  });
+});