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

package/src/InAppMessaging/hooks/useMessageProps/__tests__/utils.spec.ts

@@ -1,355 +0,0 @@
-import { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native';
-
-import {
-  MessageComponentBaseProps,
-  MessageLayout,
-  MessageTextAlign,
-} from '@aws-amplify/ui-react-core-notifications';
-import { BUTTON_PRESSED_OPACITY } from '../../../constants';
-import { MessageDefaultStyle } from '../types';
-import { StyleParams } from '../types';
-
-import {
-  getComponentButtonStyle,
-  getContainerAndWrapperStyle,
-  getPayloadStyle,
-  getMessageStyles,
-  shouldFillDeviceScreen,
-} from '../utils';
-
-type ResolveContainerStyle = {
-  container: (state?: PressableStateCallbackType) => StyleProp<ViewStyle>;
-};
-
-const EMPTY_STYLE = Object.freeze({});
-
-const baseDefaultStyle: MessageDefaultStyle = {
-  body: {},
-  buttonContainer: {},
-  buttonsContainer: {},
-  buttonText: {},
-  wrapper: {},
-  container: {},
-  contentContainer: {},
-  header: {},
-  iconButton: {},
-  image: {},
-  imageContainer: {},
-  textContainer: {},
-};
-
-describe('getComponentButtonStyle', () => {
-  const pressedOpacity = { opacity: BUTTON_PRESSED_OPACITY };
-
-  it.each(['primaryButton' as const, 'secondaryButton' as const])(
-    'returns the expected output in the happy path for a %s',
-    (buttonType) => {
-      const defaultStyle = {
-        ...baseDefaultStyle,
-        buttonContainer: { backgroundColor: 'white' },
-        buttonText: { color: 'red' },
-      };
-      const payloadStyle = {
-        [buttonType]: {
-          backgroundColor: 'maroon',
-          borderRadius: 4,
-          color: 'teal',
-        },
-      };
-      const overrideStyle = {
-        [buttonType]: {
-          container: { backgroundColor: 'pink' },
-          text: { color: 'black' },
-        },
-      };
-      const styleParams = { defaultStyle, payloadStyle, overrideStyle };
-
-      const expectedContainerPressedStyle = [
-        pressedOpacity,
-        { backgroundColor: 'white' },
-        { backgroundColor: 'maroon', borderRadius: 4 },
-        { backgroundColor: 'pink' },
-      ];
-      const expectedContainerUnpressedStyle = [
-        EMPTY_STYLE,
-        { backgroundColor: 'white' },
-        { backgroundColor: 'maroon', borderRadius: 4 },
-        { backgroundColor: 'pink' },
-      ];
-
-      const expectedTextStyle = [
-        { color: 'red' },
-        { color: 'teal' },
-        { color: 'black' },
-      ];
-
-      const output = getComponentButtonStyle({ styleParams, buttonType });
-
-      const containerPressedStyle = (output as ResolveContainerStyle).container(
-        { pressed: true }
-      );
-      const containerUnpressedStyle = (
-        output as ResolveContainerStyle
-      ).container({ pressed: false });
-
-      expect(containerPressedStyle).toStrictEqual(
-        expectedContainerPressedStyle
-      );
-      expect(containerUnpressedStyle).toStrictEqual(
-        expectedContainerUnpressedStyle
-      );
-
-      expect(output.text).toStrictEqual(expectedTextStyle);
-    }
-  );
-
-  describe('button container style', () => {
-    it('returns unpressed button container style when press event is not provided', () => {
-      const defaultStyle = {
-        buttonContainer: { backgroundColor: 'white' },
-        buttonText: {},
-      } as MessageDefaultStyle;
-      const styleParams = {
-        defaultStyle,
-        payloadStyle: {},
-        overrideStyle: {},
-      };
-
-      const output = getComponentButtonStyle({
-        styleParams,
-        buttonType: 'primaryButton',
-      });
-
-      const buttonContainerStyle = (
-        output as ResolveContainerStyle
-      ).container();
-
-      const expectedButtonContainerStyle = [
-        EMPTY_STYLE,
-        { backgroundColor: 'white' },
-        EMPTY_STYLE,
-        EMPTY_STYLE,
-      ];
-
-      expect(buttonContainerStyle).toStrictEqual(expectedButtonContainerStyle);
-    });
-
-    it('correctly evaluates button container override style when it is a function', () => {
-      const pressedStyle = { backgroundColor: 'seafoam' };
-      const unpressedStyle = { backgroundColor: 'fuschia' };
-      const overrideStyle = {
-        primaryButton: {
-          container: ({ pressed }: { pressed: boolean }) =>
-            pressed ? pressedStyle : unpressedStyle,
-        },
-      };
-      const styleParams = {
-        defaultStyle: baseDefaultStyle,
-        payloadStyle: {},
-        overrideStyle,
-      };
-
-      const output = getComponentButtonStyle({
-        styleParams,
-        buttonType: 'primaryButton',
-      });
-
-      const containerPressedStyle = (output as ResolveContainerStyle).container(
-        { pressed: true }
-      );
-      const containerUnpressedStyle = (
-        output as ResolveContainerStyle
-      ).container({ pressed: false });
-
-      const expectedContainerPressedStyle = [
-        pressedOpacity,
-        EMPTY_STYLE,
-        EMPTY_STYLE,
-        pressedStyle,
-      ];
-      const expectedContainerUnressedStyle = [
-        EMPTY_STYLE,
-        EMPTY_STYLE,
-        EMPTY_STYLE,
-        unpressedStyle,
-      ];
-
-      expect(containerPressedStyle).toStrictEqual(
-        expectedContainerPressedStyle
-      );
-      expect(containerUnpressedStyle).toStrictEqual(
-        expectedContainerUnressedStyle
-      );
-    });
-  });
-});
-
-describe('getContainerAndWrapperStyle', () => {
-  it('returns the expected output for a banner component in the happy path', () => {
-    const defaultStyle = {
-      ...baseDefaultStyle,
-      container: { backgroundColor: 'red' },
-      wrapper: { opacity: 0.4 },
-    };
-    const payloadStyle = { container: { backgroundColor: 'teal' } };
-    const overrideStyle = { container: { backgroundColor: 'pink' } };
-
-    const output = getContainerAndWrapperStyle({
-      layout: 'TOP_BANNER',
-      styleParams: { defaultStyle, payloadStyle, overrideStyle },
-    });
-
-    const expectedContainerStyle = [
-      { backgroundColor: 'red' },
-      { backgroundColor: 'teal' },
-      { backgroundColor: 'pink' },
-    ];
-
-    const expectedWrapperStyle = { opacity: 0.4 };
-
-    expect(output.container).toStrictEqual(expectedContainerStyle);
-    expect(output.wrapper).toStrictEqual(expectedWrapperStyle);
-  });
-
-  it('returns the expected output for a non-banner component in the happy path', () => {
-    const defaultStyle = {
-      ...baseDefaultStyle,
-      container: { backgroundColor: 'red' },
-      wrapper: { opacity: 0.4 },
-    };
-    const payloadStyle = { container: { backgroundColor: 'teal' } };
-    const overrideStyle = { container: { backgroundColor: 'pink' } };
-
-    const output = getContainerAndWrapperStyle({
-      layout: 'CAROUSEL',
-      styleParams: { defaultStyle, payloadStyle, overrideStyle },
-    });
-
-    const expectedContainerStyle = [{}, {}, {}];
-
-    const expectedWrapperStyle = [
-      { opacity: 0.4 },
-      { backgroundColor: 'red' },
-      { backgroundColor: 'teal' },
-      { backgroundColor: 'pink' },
-    ];
-
-    expect(output.container).toStrictEqual(expectedContainerStyle);
-    expect(output.wrapper).toStrictEqual(expectedWrapperStyle);
-  });
-
-  it('correctly handles a style array passed as the argument of overrideStyle.container', () => {
-    const defaultStyle = {
-      ...baseDefaultStyle,
-      container: { backgroundColor: 'red' },
-      wrapper: { opacity: 0.4 },
-    };
-    const payloadStyle = { container: { backgroundColor: 'teal' } };
-    const overrideStyle = {
-      container: [{ backgroundColor: 'pink' }, { flex: 5 }],
-    };
-
-    const output = getContainerAndWrapperStyle({
-      layout: 'CAROUSEL',
-      styleParams: { defaultStyle, payloadStyle, overrideStyle },
-    });
-
-    const expectedContainerStyle = [EMPTY_STYLE, EMPTY_STYLE, { flex: 5 }];
-
-    const expectedWrapperStyle = [
-      { opacity: 0.4 },
-      { backgroundColor: 'red' },
-      { backgroundColor: 'teal' },
-      { backgroundColor: 'pink' },
-    ];
-
-    expect(output.container).toStrictEqual(expectedContainerStyle);
-    expect(output.wrapper).toStrictEqual(expectedWrapperStyle);
-  });
-});
-
-describe('getPayloadStyle', () => {
-  it('returns the expected output in the happy path', () => {
-    const output = getPayloadStyle({
-      body: { style: { textAlign: 'left' as MessageTextAlign } },
-      container: { style: { backgroundColor: 'lightgray', borderRadius: 2 } },
-      header: { style: { textAlign: 'center' as MessageTextAlign } },
-      primaryButton: { style: { backgroundColor: 'salmon', color: 'olive' } },
-      secondaryButton: { style: { backgroundColor: 'sand', color: 'peru' } },
-    } as MessageComponentBaseProps);
-
-    expect(output).toMatchSnapshot();
-  });
-});
-
-describe('getMessageStyles', () => {
-  const defaultStyle = {
-    body: { color: 'fuschia' },
-    buttonContainer: { backgroundColor: 'chartreuse' },
-    buttonText: { color: 'pink' },
-    buttonsContainer: { backgroundColor: 'teal' },
-    contentContainer: { backgroundColor: 'lightblue' },
-    container: { backgroundColor: 'red', borderRadius: 1 },
-    header: { backgroundColor: 'purple' },
-    iconButton: { backgroundColor: 'blue' },
-    image: { backgroundColor: 'yellow' },
-    imageContainer: { backgroundColor: 'green' },
-    textContainer: { backgroundColor: 'antiquewhite' },
-    wrapper: { backgroundColor: 'gray' },
-  };
-
-  const payloadStyle: StyleParams['payloadStyle'] = {
-    body: { textAlign: 'left' as MessageTextAlign },
-    container: { backgroundColor: 'lightgray', borderRadius: 2 },
-    header: { textAlign: 'center' as MessageTextAlign },
-    primaryButton: { backgroundColor: 'salmon', color: 'olive' },
-    secondaryButton: { backgroundColor: 'sand', color: 'peru' },
-  };
-
-  const overrideStyle = {
-    body: { color: 'white' },
-    closeIconButton: { backgroundColor: 'turquoise' },
-    closeIconColor: 'darkcyan',
-    container: { backgroundColor: 'lawngreen', borderRadius: 3 },
-    header: { backgroundColor: 'lightpink' },
-    image: { backgroundColor: 'royalblue' },
-    primaryButton: {
-      container: { backgroundColor: 'seagreen' },
-      text: { color: 'black' },
-    },
-    secondaryButton: {
-      container: { backgroundColor: 'sienna' },
-      text: { color: 'orchid' },
-    },
-  };
-  it('returns the expected output in the happy path', () => {
-    const output = getMessageStyles({
-      layout: 'FULL_SCREEN',
-      styleParams: { defaultStyle, payloadStyle, overrideStyle },
-    });
-
-    expect(output).toMatchSnapshot();
-  });
-
-  it('adds a bottom padding for carousel page indicators', () => {
-    const output = getMessageStyles({
-      layout: 'CAROUSEL',
-      styleParams: { defaultStyle, payloadStyle: {}, overrideStyle: {} },
-    });
-
-    expect(output).toMatchSnapshot();
-  });
-});
-
-describe('shouldFillDeviceScreen', () => {
-  it.each([
-    ['BOTTOM_BANNER', false],
-    ['MIDDLE_BANNER', false],
-    ['TOP_BANNER', false],
-    ['MODAL', false],
-    ['CAROUSEL', true],
-    ['FULL_SCREEN', true],
-  ])('returns the expected output for a %s layout', (layout, expected) => {
-    expect(shouldFillDeviceScreen(layout as MessageLayout)).toBe(expected);
-  });
-});

package/src/__mocks__/@react-native-async-storage/async-storage.ts

@@ -1,2 +0,0 @@
-// mock RN AsyncStorage module to prevent errors from Amplify JS usage of the module
-export { default } from '@react-native-async-storage/async-storage/jest/async-storage-mock';

package/src/__mocks__/@react-native-community/netinfo.ts

@@ -1,3 +0,0 @@
-// mock RN NetInfo module to prevent errors from Amplify JS usage of the module
-// @ts-ignore - ignoring as this is a JS mock
-export { default } from '@react-native-community/netinfo/jest/netinfo-mock.js';

package/src/__mocks__/react-native-safe-area-context.ts

@@ -1,9 +0,0 @@
-jest.mock('react-native-safe-area-context');
-
-const SafeAreaProvider = 'SafeAreaProvider';
-const SafeAreaView = 'SafeAreaView';
-
-// return somewhat arbitrary values, safe area insets of iPhone 13
-const useSafeAreaInsets = jest.fn(() => ({ bottom: 44, top: 47 }));
-
-export { SafeAreaProvider, SafeAreaView, useSafeAreaInsets };

package/src/__tests__/__snapshots__/index.spec.ts.snap

@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`@aws-amplify/ui-react-native exports should match snapshot 1`] = `
-Array [
-  "Authenticator",
-  "AuthenticatorProps",
-  "Theme",
-  "ThemeProvider",
-  "UseAuthenticator",
-  "WithAuthenticatorOptions",
-  "defaultDarkModeOverride",
-  "defaultTheme",
-  "useAuthenticator",
-  "useTheme",
-  "withAuthenticator",
-  "BannerMessageProps",
-  "CarouselMessageProps",
-  "FullScreenMessageProps",
-  "InAppMessageDisplay",
-  "InAppMessagingProvider",
-  "MessageComponents",
-  "ModalMessageProps",
-  "useInAppMessaging",
-  "withInAppMessaging",
-]
-`;

package/src/__tests__/index.spec.ts

@@ -1,8 +0,0 @@
-import * as exported from '..';
-
-describe('@aws-amplify/ui-react-native', () => {
-  it('exports should match snapshot', () => {
-    const exportedKeys = Object.keys(exported);
-    expect(exportedKeys).toMatchSnapshot();
-  });
-});

package/src/hooks/useDeprecationWarning/__tests__/useDeprecationWarning.spec.ts

@@ -1,42 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks';
-
-import { platform } from '../../../utils';
-import useDeprecationWarning from '../useDeprecationWarning';
-
-const mockIsDev = jest.fn();
-jest.mock('../../../utils', () => ({
-  ...jest.requireActual('../../../utils'),
-  IS_DEV: mockIsDev,
-}));
-
-// add empty mockImplementation to prevent logging output to the console
-const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation();
-
-const message = 'This component is deprecated, use X instead';
-const shouldWarn = true;
-
-describe('useDeprecationWarning', () => {
-  beforeAll(() => {
-    platform.IS_DEV = true;
-  });
-
-  beforeEach(() => {
-    consoleWarnSpy.mockClear();
-  });
-
-  it('should log an error if `shouldWarn` is set to `true` and `__DEV__` is `true`', () => {
-    renderHook(() => useDeprecationWarning({ shouldWarn, message }));
-    expect(consoleWarnSpy).toHaveBeenCalledTimes(1);
-    expect(consoleWarnSpy).toHaveBeenCalledWith(message);
-  });
-
-  it('should not log an error if `shouldWarn` is set to `true` and `__DEV__` is `false`', () => {
-    const message = 'This component is deprecated, use X instead';
-
-    platform.IS_DEV = false;
-
-    renderHook(() => useDeprecationWarning({ shouldWarn, message }));
-    expect(consoleWarnSpy).toHaveBeenCalledTimes(0);
-    expect(consoleWarnSpy).not.toHaveBeenCalledWith(message);
-  });
-});

package/src/hooks/useDeviceOrientation/__tests__/useDeviceOrientation.spec.ts

@@ -1,89 +0,0 @@
-import { Dimensions, EventSubscription } from 'react-native';
-import { renderHook } from '@testing-library/react-hooks';
-import useDeviceOrientation, {
-  DeviceOrientation,
-} from '../useDeviceOrientation';
-
-const dimensions = {
-  landscape: { height: 100, width: 300 },
-  portrait: { height: 300, width: 100 },
-};
-
-describe('useDeviceOrientation', () => {
-  const subscription: Pick<EventSubscription, 'remove'> = { remove: jest.fn() };
-
-  let getSpy: jest.SpyInstance;
-  let addEventListenerSpy: jest.SpyInstance;
-  let removeEventListener: jest.SpyInstance;
-
-  beforeEach(() => {
-    jest.resetAllMocks();
-
-    getSpy = jest.spyOn(Dimensions, 'get');
-
-    addEventListenerSpy = jest.spyOn(Dimensions, 'addEventListener');
-
-    removeEventListener = jest.spyOn(Dimensions, 'removeEventListener');
-  });
-
-  /* eslint-disable no-console */
-  // turn off console errors during tests, can be safely removed once React Native v0.64 is no longer supported
-  const consoleWarn = console.warn;
-  console.warn = jest.fn();
-  afterAll(() => {
-    console.warn = consoleWarn;
-    /* eslint-enable no-console */
-  });
-
-  it('should handle unsubscribing for React Native versions < 0.65', () => {
-    getSpy.mockImplementation((_: string) => dimensions['portrait']);
-
-    // mock an `undefined` return to simulate React Native versions < 0.65
-    addEventListenerSpy.mockReturnValueOnce(undefined);
-
-    const { unmount } = renderHook(() => useDeviceOrientation());
-
-    expect(getSpy).toHaveBeenCalledTimes(1);
-    expect(getSpy).toHaveBeenCalledWith('screen');
-    expect(addEventListenerSpy).toHaveBeenCalledTimes(1);
-
-    unmount();
-
-    expect(removeEventListener).toHaveBeenCalledTimes(1);
-    expect(subscription.remove).not.toHaveBeenCalled();
-  });
-
-  it('should handle unsubscribing for React Native versions >= 0.65', () => {
-    getSpy.mockImplementation((_: string) => dimensions['landscape']);
-    addEventListenerSpy.mockReturnValue(subscription);
-
-    const { unmount } = renderHook(() => useDeviceOrientation());
-
-    expect(getSpy).toHaveBeenCalledTimes(1);
-    expect(getSpy).toHaveBeenCalledWith('screen');
-    expect(addEventListenerSpy).toHaveBeenCalledTimes(1);
-
-    unmount();
-
-    expect(subscription.remove).toHaveBeenCalledTimes(1);
-    expect(removeEventListener).not.toHaveBeenCalled();
-  });
-
-  it.each([
-    ['landscape', true, false],
-    ['portrait', false, true],
-  ])(
-    'returns the expected values when the device is in %s mode',
-    (deviceOrientation, isLandscapeMode, isPortraitMode) => {
-      getSpy.mockImplementation(
-        (_: string) => dimensions[deviceOrientation as DeviceOrientation]
-      );
-
-      const { result } = renderHook(() => useDeviceOrientation());
-
-      expect(result.current.deviceOrientation).toBe(deviceOrientation);
-      expect(result.current.isLandscapeMode).toBe(isLandscapeMode);
-      expect(result.current.isPortraitMode).toBe(isPortraitMode);
-    }
-  );
-});

package/src/hooks/usePressableContainerStyles/__tests__/usePressableContainerStyles.spec.ts

@@ -1,68 +0,0 @@
-import { renderHook } from '@testing-library/react-native';
-import { ViewStyle } from 'react-native';
-
-import {
-  UsePressableContainerStyleProps,
-  usePressableContainerStyles,
-} from '../usePressableContainerStyles';
-
-const style: ViewStyle = {
-  backgroundColor: 'red',
-};
-const themedStyle: ViewStyle = {
-  padding: 10,
-};
-const pressedStyle: ViewStyle = {
-  opacity: 70,
-};
-
-describe('usePressableContainerStyles', () => {
-  it('should apply styles correctly and return a style object', () => {
-    const props: UsePressableContainerStyleProps = {
-      overrideStyle: style,
-      containerStyle: themedStyle,
-      pressedStyle,
-    };
-
-    const { result } = renderHook(() => usePressableContainerStyles(props));
-
-    expect(result.current({ pressed: false })).toStrictEqual([
-      { ...themedStyle },
-      undefined, // no pressed styles
-      { ...style },
-    ]);
-  });
-
-  it('should apply pressed styles correctly and return a style object', () => {
-    const props: UsePressableContainerStyleProps = {
-      overrideStyle: style,
-      containerStyle: themedStyle,
-      pressedStyle,
-    };
-
-    const { result } = renderHook(() => usePressableContainerStyles(props));
-
-    expect(result.current({ pressed: true })).toStrictEqual([
-      { ...themedStyle },
-      { ...pressedStyle },
-      { ...style },
-    ]);
-  });
-
-  it('should apply style function correctly and return a style object', () => {
-    const props: UsePressableContainerStyleProps = {
-      overrideStyle: () => {
-        return style;
-      },
-      containerStyle: themedStyle,
-    };
-
-    const { result } = renderHook(() => usePressableContainerStyles(props));
-
-    expect(result.current({ pressed: false })).toStrictEqual([
-      { ...themedStyle },
-      undefined,
-      { ...style },
-    ]);
-  });
-});