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

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

@@ -1,165 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Divider applies theme and style props 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "flexDirection": "row",
-      },
-      undefined,
-    ]
-  }
->
-  <View
-    style={
-      Array [
-        Object {
-          "backgroundColor": "hsl(0, 0%, 0%)",
-          "flex": 1,
-          "height": 0.5,
-        },
-        Object {
-          "backgroundColor": "blue",
-        },
-      ]
-    }
-    testID="amplify__divider__line"
-  />
-  <Text
-    accessibilityRole="text"
-    style={
-      Array [
-        Object {
-          "fontSize": 16,
-          "fontWeight": "400",
-          "lineHeight": 24,
-        },
-        Object {
-          "color": "hsl(210, 50%, 10%)",
-        },
-        Array [
-          Object {
-            "fontSize": 16,
-            "margin": 16,
-            "textAlign": "center",
-          },
-          Object {
-            "color": "red",
-          },
-        ],
-      ]
-    }
-  >
-    Divider label
-  </Text>
-  <View
-    style={
-      Array [
-        Object {
-          "backgroundColor": "hsl(0, 0%, 0%)",
-          "flex": 1,
-          "height": 0.5,
-        },
-        Object {
-          "backgroundColor": "blue",
-        },
-      ]
-    }
-  />
-</View>
-`;
-
-exports[`Divider renders as expected with label 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "flexDirection": "row",
-      },
-      undefined,
-    ]
-  }
->
-  <View
-    style={
-      Array [
-        Object {
-          "backgroundColor": "hsl(0, 0%, 0%)",
-          "flex": 1,
-          "height": 0.5,
-        },
-        undefined,
-      ]
-    }
-    testID="amplify__divider__line"
-  />
-  <Text
-    accessibilityRole="text"
-    style={
-      Array [
-        Object {
-          "fontSize": 16,
-          "fontWeight": "400",
-          "lineHeight": 24,
-        },
-        Object {
-          "color": "hsl(210, 50%, 10%)",
-        },
-        Array [
-          Object {
-            "fontSize": 16,
-            "margin": 16,
-            "textAlign": "center",
-          },
-          undefined,
-        ],
-      ]
-    }
-  >
-    Divider label
-  </Text>
-  <View
-    style={
-      Array [
-        Object {
-          "backgroundColor": "hsl(0, 0%, 0%)",
-          "flex": 1,
-          "height": 0.5,
-        },
-        undefined,
-      ]
-    }
-  />
-</View>
-`;
-
-exports[`Divider renders as expected without label 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "flexDirection": "row",
-      },
-      undefined,
-    ]
-  }
->
-  <View
-    style={
-      Array [
-        Object {
-          "backgroundColor": "hsl(0, 0%, 0%)",
-          "flex": 1,
-          "height": 0.5,
-        },
-        undefined,
-      ]
-    }
-    testID="amplify__divider__line"
-  />
-</View>
-`;

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

@@ -1,60 +0,0 @@
-import React from 'react';
-import { fireEvent, render, renderHook } from '@testing-library/react-native';
-
-import { useTheme } from '../../../theme';
-import { CLOSE_BUTTON_TEST_ID } from '../ErrorMessage';
-import ErrorMessage from '../ErrorMessage';
-import { getThemedStyles } from '../styles';
-
-describe('ErrorMessage', () => {
-  it('renders default ErrorMessage as expected', () => {
-    const { toJSON, queryByTestId } = render(
-      <ErrorMessage>Default ErrorMessage</ErrorMessage>
-    );
-    expect(toJSON()).toMatchSnapshot();
-    expect(queryByTestId(CLOSE_BUTTON_TEST_ID)).toBeFalsy();
-  });
-
-  it('handles an onDismiss callback', () => {
-    const customOnDismiss = jest.fn();
-    const { getByTestId } = render(
-      <ErrorMessage onDismiss={customOnDismiss}>
-        Default ErrorMessage
-      </ErrorMessage>
-    );
-
-    const dismissButton = getByTestId(CLOSE_BUTTON_TEST_ID);
-    fireEvent.press(dismissButton);
-
-    expect(customOnDismiss).toHaveBeenCalledTimes(1);
-  });
-
-  it('applies theme and style props', () => {
-    const customStyle = { backgroundColor: 'blue' };
-    const customLabelStyle = { color: 'white' };
-    const labelText = 'Themed ErrorMessage';
-
-    const { getByRole, getByText, toJSON } = render(
-      <ErrorMessage labelStyle={customLabelStyle} style={customStyle}>
-        {labelText}
-      </ErrorMessage>
-    );
-
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current);
-
-    const alert = getByRole('alert');
-    const label = getByText(labelText);
-
-    expect(alert.props.style).toStrictEqual([
-      themedStyle.container,
-      customStyle,
-    ]);
-
-    expect(label.props.style).toStrictEqual([
-      themedStyle.label,
-      customLabelStyle,
-    ]);
-    expect(toJSON()).toMatchSnapshot();
-  });
-});

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

@@ -1,123 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ErrorMessage applies theme and style props 1`] = `
-<View
-  accessibilityRole="alert"
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "hsl(0, 75%, 85%)",
-        "flexDirection": "row",
-        "paddingHorizontal": 8,
-        "paddingVertical": 12,
-      },
-      Object {
-        "backgroundColor": "blue",
-      },
-    ]
-  }
->
-  <Image
-    accessibilityRole="image"
-    source={
-      Object {
-        "testUri": "../../../src/assets/icons/error.png",
-      }
-    }
-    style={
-      Array [
-        Object {
-          "height": 20,
-          "resizeMode": "contain",
-          "tintColor": undefined,
-          "width": 20,
-        },
-        Array [
-          Object {
-            "margin": 8,
-            "tintColor": "hsl(0, 100%, 20%)",
-          },
-          undefined,
-        ],
-      ]
-    }
-  />
-  <Text
-    style={
-      Array [
-        Object {
-          "color": "hsl(0, 100%, 20%)",
-          "flex": 1,
-          "fontSize": 16,
-          "paddingHorizontal": 8,
-        },
-        Object {
-          "color": "white",
-        },
-      ]
-    }
-  >
-    Themed ErrorMessage
-  </Text>
-</View>
-`;
-
-exports[`ErrorMessage renders default ErrorMessage as expected 1`] = `
-<View
-  accessibilityRole="alert"
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "hsl(0, 75%, 85%)",
-        "flexDirection": "row",
-        "paddingHorizontal": 8,
-        "paddingVertical": 12,
-      },
-      undefined,
-    ]
-  }
->
-  <Image
-    accessibilityRole="image"
-    source={
-      Object {
-        "testUri": "../../../src/assets/icons/error.png",
-      }
-    }
-    style={
-      Array [
-        Object {
-          "height": 20,
-          "resizeMode": "contain",
-          "tintColor": undefined,
-          "width": 20,
-        },
-        Array [
-          Object {
-            "margin": 8,
-            "tintColor": "hsl(0, 100%, 20%)",
-          },
-          undefined,
-        ],
-      ]
-    }
-  />
-  <Text
-    style={
-      Array [
-        Object {
-          "color": "hsl(0, 100%, 20%)",
-          "flex": 1,
-          "fontSize": 16,
-          "paddingHorizontal": 8,
-        },
-        undefined,
-      ]
-    }
-  >
-    Default ErrorMessage
-  </Text>
-</View>
-`;

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

@@ -1,73 +0,0 @@
-import React from 'react';
-import { render, renderHook } from '@testing-library/react-native';
-
-import { useTheme } from '../../../theme';
-import Heading from '../Heading';
-import { HeadingProps } from '../types';
-import { getThemedStyles } from '../styles';
-
-const levels: HeadingProps['level'][] = [1, 2, 3, 4, 5, 6];
-
-describe('Heading', () => {
-  it('renders a level 6 Heading by default', () => {
-    const title = 'Test Heading';
-
-    const { toJSON, getByText } = render(<Heading>{title}</Heading>);
-
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current);
-
-    const heading = getByText(title);
-
-    expect(heading.props.style).toStrictEqual([
-      themedStyle.text,
-      themedStyle[6],
-      undefined,
-    ]);
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it.each(levels)('renders a level %i Heading as expected', (level) => {
-    const title = `Heading level ${level}`;
-
-    const { toJSON, getByText } = render(
-      <Heading level={level}>{title}</Heading>
-    );
-
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current);
-
-    const heading = getByText(title);
-
-    expect(heading.props.style).toStrictEqual([
-      themedStyle.text,
-      themedStyle[level ?? 6],
-      undefined,
-    ]);
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('applies theme and style props', () => {
-    const customStyle = { color: 'red' };
-    const title = 'Styled Heading';
-
-    const { toJSON, getByText } = render(
-      <Heading style={customStyle}>{title}</Heading>
-    );
-
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current);
-
-    const heading = getByText(title);
-
-    expect(heading.props.style).toStrictEqual([
-      themedStyle.text,
-      themedStyle[6],
-      customStyle,
-    ]);
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});

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

@@ -1,171 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Heading applies theme and style props 1`] = `
-<Text
-  accessibilityRole="header"
-  style={
-    Array [
-      Object {
-        "color": "hsl(210, 50%, 10%)",
-      },
-      Object {
-        "fontSize": 14,
-        "fontWeight": "700",
-        "lineHeight": 21,
-      },
-      Object {
-        "color": "red",
-      },
-    ]
-  }
->
-  Styled Heading
-</Text>
-`;
-
-exports[`Heading renders a level 1 Heading as expected 1`] = `
-<Text
-  accessibilityRole="header"
-  style={
-    Array [
-      Object {
-        "color": "hsl(210, 50%, 10%)",
-      },
-      Object {
-        "fontSize": 40,
-        "fontWeight": "300",
-        "lineHeight": 60,
-      },
-      undefined,
-    ]
-  }
->
-  Heading level 1
-</Text>
-`;
-
-exports[`Heading renders a level 2 Heading as expected 1`] = `
-<Text
-  accessibilityRole="header"
-  style={
-    Array [
-      Object {
-        "color": "hsl(210, 50%, 10%)",
-      },
-      Object {
-        "fontSize": 32,
-        "fontWeight": "400",
-        "lineHeight": 48,
-      },
-      undefined,
-    ]
-  }
->
-  Heading level 2
-</Text>
-`;
-
-exports[`Heading renders a level 3 Heading as expected 1`] = `
-<Text
-  accessibilityRole="header"
-  style={
-    Array [
-      Object {
-        "color": "hsl(210, 50%, 10%)",
-      },
-      Object {
-        "fontSize": 24,
-        "fontWeight": "500",
-        "lineHeight": 36,
-      },
-      undefined,
-    ]
-  }
->
-  Heading level 3
-</Text>
-`;
-
-exports[`Heading renders a level 4 Heading as expected 1`] = `
-<Text
-  accessibilityRole="header"
-  style={
-    Array [
-      Object {
-        "color": "hsl(210, 50%, 10%)",
-      },
-      Object {
-        "fontSize": 20,
-        "fontWeight": "500",
-        "lineHeight": 30,
-      },
-      undefined,
-    ]
-  }
->
-  Heading level 4
-</Text>
-`;
-
-exports[`Heading renders a level 5 Heading as expected 1`] = `
-<Text
-  accessibilityRole="header"
-  style={
-    Array [
-      Object {
-        "color": "hsl(210, 50%, 10%)",
-      },
-      Object {
-        "fontSize": 16,
-        "fontWeight": "600",
-        "lineHeight": 24,
-      },
-      undefined,
-    ]
-  }
->
-  Heading level 5
-</Text>
-`;
-
-exports[`Heading renders a level 6 Heading as expected 1`] = `
-<Text
-  accessibilityRole="header"
-  style={
-    Array [
-      Object {
-        "color": "hsl(210, 50%, 10%)",
-      },
-      Object {
-        "fontSize": 14,
-        "fontWeight": "700",
-        "lineHeight": 21,
-      },
-      undefined,
-    ]
-  }
->
-  Heading level 6
-</Text>
-`;
-
-exports[`Heading renders a level 6 Heading by default 1`] = `
-<Text
-  accessibilityRole="header"
-  style={
-    Array [
-      Object {
-        "color": "hsl(210, 50%, 10%)",
-      },
-      Object {
-        "fontSize": 14,
-        "fontWeight": "700",
-        "lineHeight": 21,
-      },
-      undefined,
-    ]
-  }
->
-  Test Heading
-</Text>
-`;

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

@@ -1,100 +0,0 @@
-import React from 'react';
-import { render, renderHook } from '@testing-library/react-native';
-import { ConsoleLogger as Logger } from '@aws-amplify/core';
-
-import { useTheme } from '../../../theme';
-import { getThemedStyles } from '../styles';
-import Icon from '../Icon';
-import { IconProps, iconSizes } from '..';
-import { Size } from '../types';
-
-// use empty mockImplementation to turn off console output
-const warnSpy = jest.spyOn(Logger.prototype, 'warn').mockImplementation();
-
-const MOCK_SOURCE = { uri: 'mock.png' };
-const testID = 'iconTestID';
-const props: IconProps = {
-  source: MOCK_SOURCE,
-  testID,
-};
-
-describe('Icon', () => {
-  it('renders as expected', () => {
-    const { toJSON, getByTestId } = render(<Icon {...props} />);
-    expect(toJSON()).toMatchSnapshot();
-
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current);
-
-    const image = getByTestId(testID);
-    expect(image.props.accessibilityRole).toEqual('image');
-    expect(image.props.source).toEqual(MOCK_SOURCE);
-
-    expect(themedStyle.icon.height).toEqual(iconSizes.medium);
-    expect(themedStyle.icon.width).toEqual(iconSizes.medium);
-    expect(image.props.style).toStrictEqual([themedStyle.icon, undefined]);
-  });
-
-  it('renders as expected with custom styles', () => {
-    const customStyle = { tintColor: 'red' };
-    const { toJSON, getByTestId } = render(
-      <Icon {...props} style={customStyle} />
-    );
-    expect(toJSON()).toMatchSnapshot();
-
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current);
-
-    expect(getByTestId(testID).props.style).toStrictEqual([
-      themedStyle.icon,
-      customStyle,
-    ]);
-  });
-
-  it('renders an animated icon', () => {
-    const { toJSON } = render(<Icon {...props} animated />);
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('should override size as number', () => {
-    const testSize = 22;
-    const { toJSON, getByTestId } = render(<Icon {...props} size={testSize} />);
-    expect(toJSON()).toMatchSnapshot();
-
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current, undefined, testSize);
-
-    const image = getByTestId(testID);
-    expect(themedStyle.icon.height).toEqual(testSize);
-    expect(themedStyle.icon.width).toEqual(testSize);
-    expect(image.props.style).toStrictEqual([themedStyle.icon, undefined]);
-  });
-
-  it('should override size as string', () => {
-    const testSize = 'large';
-    const { toJSON, getByTestId } = render(<Icon {...props} size={testSize} />);
-    expect(toJSON()).toMatchSnapshot();
-
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current, undefined, testSize);
-
-    const image = getByTestId(testID);
-    expect(themedStyle.icon.height).toEqual(iconSizes[testSize]);
-    expect(themedStyle.icon.width).toEqual(iconSizes[testSize]);
-    expect(image.props.style).toStrictEqual([themedStyle.icon, undefined]);
-  });
-
-  it('throws an error for invalid size type', () => {
-    const invalidSize = 'small_medium' as unknown as Size;
-
-    const { toJSON } = render(<Icon {...props} size={invalidSize} />);
-    expect(toJSON()).toMatchSnapshot();
-
-    expect(warnSpy).toHaveBeenCalledTimes(1);
-    expect(warnSpy).toHaveBeenCalledWith(
-      `"${invalidSize}" is not a valid icon size. Available values are: ${Object.keys(
-        iconSizes
-      )}`
-    );
-  });
-});