@aws-amplify/ui-react-native 1.2.22 → 1.2.23

package/src/primitives/Tabs/__tests__/Tab.spec.tsx

@@ -1,75 +0,0 @@
-import React from 'react';
-import { StyleSheet, Text } from 'react-native';
-import { render, renderHook } from '@testing-library/react-native';
-
-import { useTheme } from '../../../theme';
-import { Tab } from '..';
-import { getThemedStyles } from '../styles';
-import { getThemedStyles as getButtonThemedStyles } from '../../Button/styles';
-
-const customStyles = StyleSheet.create({
-  tabStyle: {
-    backgroundColor: 'lavender',
-    borderTopColor: 'rebeccapurple',
-  },
-});
-
-describe('Tab', () => {
-  it('renders default Tab as expected', () => {
-    const { toJSON } = render(<Tab>Default Tab</Tab>);
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('renders as expected with a component passed as children', () => {
-    const { toJSON } = render(
-      <Tab>
-        <Text>Text component</Text>
-      </Tab>
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('renders as expected when Tab is selected', () => {
-    const { getByRole, toJSON } = render(<Tab selected>Selected Tab</Tab>);
-
-    expect(toJSON()).toMatchSnapshot();
-
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current);
-    const buttonThemedStyle = getButtonThemedStyles(result.current);
-
-    const tab = getByRole('tab');
-    expect(tab.props.style).toStrictEqual([
-      { ...buttonThemedStyle.container, ...buttonThemedStyle.containerDefault },
-      undefined,
-      [
-        {
-          ...themedStyle.tab,
-          ...themedStyle.readonly,
-          ...themedStyle.selected,
-        },
-        undefined,
-        undefined,
-      ],
-    ]);
-  });
-
-  it('can apply custom styling', () => {
-    const { getByRole, toJSON } = render(
-      <Tab style={customStyles.tabStyle}>Styled Tab</Tab>
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current);
-    const buttonThemedStyle = getButtonThemedStyles(result.current);
-
-    const tab = getByRole('tab');
-    expect(tab.props.style).toStrictEqual([
-      { ...buttonThemedStyle.container, ...buttonThemedStyle.containerDefault },
-      undefined,
-      [{ ...themedStyle.tab }, undefined, customStyles.tabStyle],
-    ]);
-  });
-});

package/src/primitives/Tabs/__tests__/Tabs.spec.tsx

@@ -1,81 +0,0 @@
-import React, { useState } from 'react';
-import { fireEvent, render, renderHook } from '@testing-library/react-native';
-
-import { useTheme } from '../../../theme';
-import { Tab, Tabs } from '..';
-import { getThemedStyles } from '../styles';
-
-const onChangeMock = jest.fn();
-
-const ControlledTabs = ({
-  onChangeCallback,
-  selectedIndex,
-}: {
-  onChangeCallback?: jest.Mock<any, any>;
-  selectedIndex?: number;
-}) => {
-  const [index, setIndex] = useState(selectedIndex);
-  const onChangeHandler = (nextIndex: number) => {
-    setIndex(nextIndex);
-    onChangeCallback?.(nextIndex);
-  };
-
-  return (
-    <Tabs onChange={onChangeHandler} selectedIndex={index}>
-      <Tab>Sign In</Tab>
-      <Tab>Create Account</Tab>
-      <Tab disabled>Disabled Tab</Tab>
-    </Tabs>
-  );
-};
-
-describe('Tabs', () => {
-  beforeEach(() => {
-    onChangeMock.mockClear();
-  });
-
-  it('can be used as a controlled component', () => {
-    const { queryAllByRole } = render(
-      <ControlledTabs onChangeCallback={onChangeMock} />
-    );
-
-    const tabs = queryAllByRole('tab');
-    fireEvent.press(tabs[1]);
-    expect(onChangeMock).toBeCalledWith(1);
-    fireEvent.press(tabs[0]);
-    expect(onChangeMock).toBeCalledWith(0);
-  });
-
-  it('does not allow disabled Tabs to be selected', () => {
-    const { queryAllByRole } = render(
-      <ControlledTabs onChangeCallback={onChangeMock} />
-    );
-
-    const tabs = queryAllByRole('tab');
-    fireEvent.press(tabs[2]);
-    expect(onChangeMock).not.toHaveBeenCalled();
-    expect(tabs[2].props.accessibilityState).toHaveProperty('disabled', true);
-  });
-
-  it('applies theme and custom styling', () => {
-    const customStyles = { backgroundColor: 'blue' };
-    const { getByRole, toJSON } = render(
-      <Tabs style={customStyles}>
-        <Tab>Sign In</Tab>
-        <Tab>Create Account</Tab>
-      </Tabs>
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current);
-
-    const tablist = getByRole('tablist');
-
-    expect(tablist.props.style).toStrictEqual([
-      themedStyle.tabList,
-      customStyles,
-    ]);
-  });
-});

package/src/primitives/Tabs/__tests__/__snapshots__/Tab.spec.tsx.snap

@@ -1,278 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tab can apply custom styling 1`] = `
-<View
-  accessibilityRole="tab"
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "transparent",
-        "borderColor": "hsl(210, 10%, 58%)",
-        "borderRadius": 4,
-        "borderWidth": 1,
-        "justifyContent": "center",
-        "paddingHorizontal": 16,
-        "paddingVertical": 12,
-      },
-      undefined,
-      Array [
-        Object {
-          "backgroundColor": "transparent",
-          "borderBottomColor": "hsl(210, 5%, 87%)",
-          "borderBottomWidth": 2,
-          "borderRadius": 0,
-          "borderWidth": 0,
-          "flexBasis": 0,
-          "flexGrow": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 12,
-        },
-        undefined,
-        Object {
-          "backgroundColor": "lavender",
-          "borderTopColor": "rebeccapurple",
-        },
-      ],
-    ]
-  }
->
-  <Text
-    style={
-      Array [
-        Object {
-          "color": "hsl(210, 50%, 10%)",
-          "fontSize": 16,
-          "fontWeight": "700",
-          "textAlign": "center",
-        },
-        Array [
-          Object {
-            "color": "hsl(210, 25%, 25%)",
-            "fontSize": 16,
-            "fontWeight": "700",
-          },
-          undefined,
-          null,
-        ],
-      ]
-    }
-  >
-    Styled Tab
-  </Text>
-</View>
-`;
-
-exports[`Tab renders as expected when Tab is selected 1`] = `
-<View
-  accessibilityRole="tab"
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "transparent",
-        "borderColor": "hsl(210, 10%, 58%)",
-        "borderRadius": 4,
-        "borderWidth": 1,
-        "justifyContent": "center",
-        "paddingHorizontal": 16,
-        "paddingVertical": 12,
-      },
-      undefined,
-      Array [
-        Object {
-          "backgroundColor": "hsl(0, 0%, 100%)",
-          "borderBottomColor": "hsl(190, 95%, 30%)",
-          "borderBottomWidth": 2,
-          "borderRadius": 0,
-          "borderWidth": 0,
-          "color": "hsl(190, 95%, 30%)",
-          "flexBasis": 0,
-          "flexGrow": 1,
-          "opacity": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 12,
-        },
-        undefined,
-        undefined,
-      ],
-    ]
-  }
->
-  <Text
-    style={
-      Array [
-        Object {
-          "color": "hsl(210, 50%, 10%)",
-          "fontSize": 16,
-          "fontWeight": "700",
-          "textAlign": "center",
-        },
-        Array [
-          Object {
-            "color": "hsl(210, 25%, 25%)",
-            "fontSize": 16,
-            "fontWeight": "700",
-          },
-          undefined,
-          Object {
-            "backgroundColor": "hsl(0, 0%, 100%)",
-            "borderBottomColor": "hsl(190, 95%, 30%)",
-            "color": "hsl(190, 95%, 30%)",
-          },
-        ],
-      ]
-    }
-  >
-    Selected Tab
-  </Text>
-</View>
-`;
-
-exports[`Tab renders as expected with a component passed as children 1`] = `
-<View
-  accessibilityRole="tab"
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "transparent",
-        "borderColor": "hsl(210, 10%, 58%)",
-        "borderRadius": 4,
-        "borderWidth": 1,
-        "justifyContent": "center",
-        "paddingHorizontal": 16,
-        "paddingVertical": 12,
-      },
-      undefined,
-      Array [
-        Object {
-          "backgroundColor": "transparent",
-          "borderBottomColor": "hsl(210, 5%, 87%)",
-          "borderBottomWidth": 2,
-          "borderRadius": 0,
-          "borderWidth": 0,
-          "flexBasis": 0,
-          "flexGrow": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 12,
-        },
-        undefined,
-        undefined,
-      ],
-    ]
-  }
->
-  <Text>
-    Text component
-  </Text>
-</View>
-`;
-
-exports[`Tab renders default Tab as expected 1`] = `
-<View
-  accessibilityRole="tab"
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "transparent",
-        "borderColor": "hsl(210, 10%, 58%)",
-        "borderRadius": 4,
-        "borderWidth": 1,
-        "justifyContent": "center",
-        "paddingHorizontal": 16,
-        "paddingVertical": 12,
-      },
-      undefined,
-      Array [
-        Object {
-          "backgroundColor": "transparent",
-          "borderBottomColor": "hsl(210, 5%, 87%)",
-          "borderBottomWidth": 2,
-          "borderRadius": 0,
-          "borderWidth": 0,
-          "flexBasis": 0,
-          "flexGrow": 1,
-          "paddingHorizontal": 16,
-          "paddingVertical": 12,
-        },
-        undefined,
-        undefined,
-      ],
-    ]
-  }
->
-  <Text
-    style={
-      Array [
-        Object {
-          "color": "hsl(210, 50%, 10%)",
-          "fontSize": 16,
-          "fontWeight": "700",
-          "textAlign": "center",
-        },
-        Array [
-          Object {
-            "color": "hsl(210, 25%, 25%)",
-            "fontSize": 16,
-            "fontWeight": "700",
-          },
-          undefined,
-          null,
-        ],
-      ]
-    }
-  >
-    Default Tab
-  </Text>
-</View>
-`;

package/src/primitives/Tabs/__tests__/__snapshots__/Tabs.spec.tsx.snap

@@ -1,163 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tabs applies theme and custom styling 1`] = `
-<View
-  accessibilityRole="tablist"
-  style={
-    Array [
-      Object {
-        "flexDirection": "row",
-        "width": "100%",
-      },
-      Object {
-        "backgroundColor": "blue",
-      },
-    ]
-  }
->
-  <View
-    accessibilityRole="tab"
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onBlur={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      Array [
-        Object {
-          "alignItems": "center",
-          "backgroundColor": "transparent",
-          "borderColor": "hsl(210, 10%, 58%)",
-          "borderRadius": 4,
-          "borderWidth": 1,
-          "justifyContent": "center",
-          "paddingHorizontal": 16,
-          "paddingVertical": 12,
-        },
-        undefined,
-        Array [
-          Object {
-            "backgroundColor": "hsl(0, 0%, 100%)",
-            "borderBottomColor": "hsl(190, 95%, 30%)",
-            "borderBottomWidth": 2,
-            "borderRadius": 0,
-            "borderWidth": 0,
-            "color": "hsl(190, 95%, 30%)",
-            "flexBasis": 0,
-            "flexGrow": 1,
-            "opacity": 1,
-            "paddingHorizontal": 16,
-            "paddingVertical": 12,
-          },
-          undefined,
-          undefined,
-        ],
-      ]
-    }
-  >
-    <Text
-      style={
-        Array [
-          Object {
-            "color": "hsl(210, 50%, 10%)",
-            "fontSize": 16,
-            "fontWeight": "700",
-            "textAlign": "center",
-          },
-          Array [
-            Object {
-              "color": "hsl(210, 25%, 25%)",
-              "fontSize": 16,
-              "fontWeight": "700",
-            },
-            undefined,
-            Object {
-              "backgroundColor": "hsl(0, 0%, 100%)",
-              "borderBottomColor": "hsl(190, 95%, 30%)",
-              "color": "hsl(190, 95%, 30%)",
-            },
-          ],
-        ]
-      }
-    >
-      Sign In
-    </Text>
-  </View>
-  <View
-    accessibilityRole="tab"
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onBlur={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      Array [
-        Object {
-          "alignItems": "center",
-          "backgroundColor": "transparent",
-          "borderColor": "hsl(210, 10%, 58%)",
-          "borderRadius": 4,
-          "borderWidth": 1,
-          "justifyContent": "center",
-          "paddingHorizontal": 16,
-          "paddingVertical": 12,
-        },
-        undefined,
-        Array [
-          Object {
-            "backgroundColor": "transparent",
-            "borderBottomColor": "hsl(210, 5%, 87%)",
-            "borderBottomWidth": 2,
-            "borderRadius": 0,
-            "borderWidth": 0,
-            "flexBasis": 0,
-            "flexGrow": 1,
-            "paddingHorizontal": 16,
-            "paddingVertical": 12,
-          },
-          undefined,
-          undefined,
-        ],
-      ]
-    }
-  >
-    <Text
-      style={
-        Array [
-          Object {
-            "color": "hsl(210, 50%, 10%)",
-            "fontSize": 16,
-            "fontWeight": "700",
-            "textAlign": "center",
-          },
-          Array [
-            Object {
-              "color": "hsl(210, 25%, 25%)",
-              "fontSize": 16,
-              "fontWeight": "700",
-            },
-            undefined,
-            null,
-          ],
-        ]
-      }
-    >
-      Create Account
-    </Text>
-  </View>
-</View>
-`;