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

package/src/InAppMessaging/components/withInAppMessaging/__tests__/withInAppMessaging.spec.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react-native';
-
-import withInAppMessaging from '../withInAppMessaging';
-
-const TestComponent = ({ title }: { title: string }) => <>{title}</>;
-
-describe('withInAppMessaging', () => {
-  it('renders as expected', () => {
-    const WrappedComponent = withInAppMessaging(TestComponent);
-    const { toJSON } = render(<WrappedComponent title="example" />);
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});

package/src/InAppMessaging/hooks/useMessageImage/__tests__/useMessageImage.spec.ts

@@ -1,141 +0,0 @@
-import { Image } from 'react-native';
-import { renderHook } from '@testing-library/react-hooks';
-import { ConsoleLogger as Logger } from '@aws-amplify/core';
-import { MessageImage } from '@aws-amplify/ui-react-core-notifications';
-
-import { getLayoutImageDimensions, prefetchNetworkImage } from '../utils';
-import useMessageImage from '../useMessageImage';
-
-jest.mock('react-native', () => ({
-  Dimensions: { get: jest.fn(() => ({ height: 844, width: 400 })) },
-  Image: { getSize: jest.fn() },
-}));
-jest.mock('../utils');
-
-// use empty mockImplementation to turn off console output
-const errorSpy = jest.spyOn(Logger.prototype, 'error').mockImplementation();
-
-const src = 'https://test.jpeg';
-const image = { src };
-
-describe('useMessageImage', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('behaves as expected in the happy path', async () => {
-    const imageDimensions = { height: 100, width: 100 };
-    (prefetchNetworkImage as jest.Mock).mockResolvedValue('loaded');
-    (getLayoutImageDimensions as jest.Mock).mockReturnValueOnce(
-      imageDimensions
-    );
-    (Image.getSize as jest.Mock).mockImplementationOnce(
-      (_, onSuccess: () => void) => {
-        onSuccess();
-      }
-    );
-
-    const { result, waitForNextUpdate } = renderHook(() =>
-      useMessageImage(image, 'TOP_BANNER')
-    );
-
-    // first render
-    expect(result.current).toStrictEqual({
-      hasRenderableImage: false,
-      imageDimensions: { height: undefined, width: undefined },
-      isImageFetching: true,
-    });
-
-    await waitForNextUpdate();
-
-    expect(result.current).toStrictEqual({
-      hasRenderableImage: true,
-      imageDimensions,
-      isImageFetching: false,
-    });
-  });
-
-  it('handles size retrieval errors as expected', async () => {
-    const error = 'ERROR';
-
-    (prefetchNetworkImage as jest.Mock).mockResolvedValue('loaded');
-    (Image.getSize as jest.Mock).mockImplementationOnce(
-      (_, __, onError: (error: string) => void) => {
-        onError(error);
-      }
-    );
-
-    const { result, waitForNextUpdate } = renderHook(() =>
-      useMessageImage(image, 'TOP_BANNER')
-    );
-
-    // first render
-    expect(result.current).toStrictEqual({
-      hasRenderableImage: false,
-      imageDimensions: { height: undefined, width: undefined },
-      isImageFetching: true,
-    });
-
-    await waitForNextUpdate();
-
-    expect(errorSpy).toHaveBeenCalledWith(
-      `Unable to retrieve size for image: ${error}`
-    );
-    expect(errorSpy).toHaveBeenCalledTimes(1);
-
-    expect(result.current).toStrictEqual({
-      hasRenderableImage: false,
-      imageDimensions: { height: undefined, width: undefined },
-      isImageFetching: false,
-    });
-  });
-
-  it('handles prefetching errors as expected', async () => {
-    (prefetchNetworkImage as jest.Mock).mockResolvedValue('failed');
-
-    const { result, waitForNextUpdate } = renderHook(() =>
-      useMessageImage(image, 'TOP_BANNER')
-    );
-
-    // first render
-    expect(result.current).toStrictEqual({
-      hasRenderableImage: false,
-      imageDimensions: { height: undefined, width: undefined },
-      isImageFetching: true,
-    });
-
-    await waitForNextUpdate();
-
-    expect(errorSpy).not.toHaveBeenCalled();
-
-    expect(result.current).toStrictEqual({
-      hasRenderableImage: false,
-      imageDimensions: { height: undefined, width: undefined },
-      isImageFetching: false,
-    });
-  });
-
-  it('returns the expected values when the image argument is an empty object', () => {
-    const { result } = renderHook(() =>
-      useMessageImage({} as MessageImage, 'TOP_BANNER')
-    );
-
-    expect(result.current).toStrictEqual({
-      hasRenderableImage: false,
-      imageDimensions: { height: undefined, width: undefined },
-      isImageFetching: false,
-    });
-  });
-
-  it('returns the expected values when the image argument is undefined', () => {
-    const { result } = renderHook(() =>
-      useMessageImage(undefined, 'TOP_BANNER')
-    );
-
-    expect(result.current).toStrictEqual({
-      hasRenderableImage: false,
-      imageDimensions: { height: undefined, width: undefined },
-      isImageFetching: false,
-    });
-  });
-});

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

@@ -1,107 +0,0 @@
-import { Image } from 'react-native';
-import { ConsoleLogger as Logger } from '@aws-amplify/core';
-
-import {
-  BANNER_IMAGE_SCREEN_MULTIPLIER,
-  BANNER_IMAGE_SCREEN_SIZE,
-} from '../constants';
-import { getLayoutImageDimensions, prefetchNetworkImage } from '../utils';
-
-jest.mock('react-native', () => ({
-  Dimensions: { get: jest.fn(() => ({ height: 844, width: 400 })) },
-  Image: { prefetch: jest.fn() },
-}));
-
-// use empty mockImplementation to turn off console output
-const errorSpy = jest.spyOn(Logger.prototype, 'error').mockImplementation();
-
-const url = 'https://test.jpeg';
-
-describe('prefetchNetworkImage', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('behaves as expected in the happy path', async () => {
-    (Image.prefetch as jest.Mock).mockResolvedValueOnce(true);
-
-    const output = await prefetchNetworkImage(url);
-
-    expect(output).toBe('loaded');
-  });
-
-  it('handles a false response from Image.prefetch as expected', async () => {
-    (Image.prefetch as jest.Mock).mockResolvedValueOnce(false);
-
-    const output = await prefetchNetworkImage(url);
-
-    expect(errorSpy).toHaveBeenLastCalledWith(`Image failed to load: ${url}`);
-    expect(errorSpy).toHaveBeenCalledTimes(1);
-
-    expect(output).toBe('failed');
-  });
-
-  it('handles an error from Imaage.prefetch as expected', async () => {
-    const error = 'ERROR';
-    (Image.prefetch as jest.Mock).mockRejectedValueOnce(new Error(error));
-
-    const output = await prefetchNetworkImage(url);
-
-    expect(errorSpy).toHaveBeenLastCalledWith(
-      `Image.prefetch failed: Error: ${error}`
-    );
-    expect(errorSpy).toHaveBeenCalledTimes(1);
-
-    expect(output).toBe('failed');
-  });
-});
-
-describe('getLayoutImageDimensions', () => {
-  it('returns the expected values for a square image', () => {
-    const imageHeight = 100;
-    const imageWidth = 100;
-
-    const output = getLayoutImageDimensions(
-      imageHeight,
-      imageWidth,
-      'TOP_BANNER'
-    );
-
-    expect(output).toStrictEqual({
-      height: BANNER_IMAGE_SCREEN_SIZE,
-      width: BANNER_IMAGE_SCREEN_SIZE,
-    });
-  });
-
-  it('returns the expected values for a portrait image', () => {
-    const imageHeight = 200;
-    const imageWidth = 100;
-
-    const output = getLayoutImageDimensions(
-      imageHeight,
-      imageWidth,
-      'TOP_BANNER'
-    );
-
-    expect(output).toStrictEqual({
-      height: BANNER_IMAGE_SCREEN_SIZE,
-      width: imageHeight * BANNER_IMAGE_SCREEN_MULTIPLIER,
-    });
-  });
-
-  it('returns the expected values for a landscape image', () => {
-    const imageHeight = 100;
-    const imageWidth = 200;
-
-    const output = getLayoutImageDimensions(
-      imageHeight,
-      imageWidth,
-      'TOP_BANNER'
-    );
-
-    expect(output).toStrictEqual({
-      height: imageWidth * BANNER_IMAGE_SCREEN_MULTIPLIER,
-      width: BANNER_IMAGE_SCREEN_SIZE,
-    });
-  });
-});

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

@@ -1,223 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`getMessageStyles adds a bottom padding for carousel page indicators 1`] = `
-Object {
-  "body": Array [
-    Object {
-      "color": "fuschia",
-    },
-    undefined,
-    undefined,
-  ],
-  "buttonsContainer": Object {
-    "backgroundColor": "teal",
-  },
-  "container": Array [
-    Array [
-      Object {
-        "borderRadius": 1,
-      },
-      Object {},
-      Object {},
-    ],
-    Object {
-      "paddingBottom": 36,
-    },
-  ],
-  "contentContainer": Object {
-    "backgroundColor": "lightblue",
-  },
-  "header": Array [
-    Object {
-      "backgroundColor": "purple",
-    },
-    undefined,
-    undefined,
-  ],
-  "iconButton": Object {
-    "container": Array [
-      Object {
-        "backgroundColor": "blue",
-      },
-      undefined,
-    ],
-    "iconColor": undefined,
-  },
-  "image": Array [
-    Object {
-      "backgroundColor": "yellow",
-    },
-    undefined,
-  ],
-  "imageContainer": Object {
-    "backgroundColor": "green",
-  },
-  "primaryButton": Object {
-    "container": [Function],
-    "text": Array [
-      Object {
-        "color": "pink",
-      },
-      Object {},
-      Object {},
-    ],
-  },
-  "secondaryButton": Object {
-    "container": [Function],
-    "text": Array [
-      Object {
-        "color": "pink",
-      },
-      Object {},
-      Object {},
-    ],
-  },
-  "textContainer": Object {
-    "backgroundColor": "antiquewhite",
-  },
-  "wrapper": Array [
-    Object {
-      "backgroundColor": "gray",
-    },
-    Object {
-      "backgroundColor": "red",
-    },
-    Object {},
-    Object {},
-  ],
-}
-`;
-
-exports[`getMessageStyles returns the expected output in the happy path 1`] = `
-Object {
-  "body": Array [
-    Object {
-      "color": "fuschia",
-    },
-    Object {
-      "textAlign": "left",
-    },
-    Object {
-      "color": "white",
-    },
-  ],
-  "buttonsContainer": Object {
-    "backgroundColor": "teal",
-  },
-  "container": Array [
-    Object {
-      "borderRadius": 1,
-    },
-    Object {
-      "borderRadius": 2,
-    },
-    Object {
-      "borderRadius": 3,
-    },
-  ],
-  "contentContainer": Object {
-    "backgroundColor": "lightblue",
-  },
-  "header": Array [
-    Object {
-      "backgroundColor": "purple",
-    },
-    Object {
-      "textAlign": "center",
-    },
-    Object {
-      "backgroundColor": "lightpink",
-    },
-  ],
-  "iconButton": Object {
-    "container": Array [
-      Object {
-        "backgroundColor": "blue",
-      },
-      Object {
-        "backgroundColor": "turquoise",
-      },
-    ],
-    "iconColor": "darkcyan",
-  },
-  "image": Array [
-    Object {
-      "backgroundColor": "yellow",
-    },
-    Object {
-      "backgroundColor": "royalblue",
-    },
-  ],
-  "imageContainer": Object {
-    "backgroundColor": "green",
-  },
-  "primaryButton": Object {
-    "container": [Function],
-    "text": Array [
-      Object {
-        "color": "pink",
-      },
-      Object {
-        "color": "olive",
-      },
-      Object {
-        "color": "black",
-      },
-    ],
-  },
-  "secondaryButton": Object {
-    "container": [Function],
-    "text": Array [
-      Object {
-        "color": "pink",
-      },
-      Object {
-        "color": "peru",
-      },
-      Object {
-        "color": "orchid",
-      },
-    ],
-  },
-  "textContainer": Object {
-    "backgroundColor": "antiquewhite",
-  },
-  "wrapper": Array [
-    Object {
-      "backgroundColor": "gray",
-    },
-    Object {
-      "backgroundColor": "red",
-    },
-    Object {
-      "backgroundColor": "lightgray",
-    },
-    Object {
-      "backgroundColor": "lawngreen",
-    },
-  ],
-}
-`;
-
-exports[`getPayloadStyle returns the expected output in the happy path 1`] = `
-Object {
-  "body": Object {
-    "textAlign": "left",
-  },
-  "container": Object {
-    "backgroundColor": "lightgray",
-    "borderRadius": 2,
-  },
-  "header": Object {
-    "textAlign": "center",
-  },
-  "primaryButton": Object {
-    "backgroundColor": "salmon",
-    "color": "olive",
-  },
-  "secondaryButton": Object {
-    "backgroundColor": "sand",
-    "color": "peru",
-  },
-}
-`;

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

@@ -1,162 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks';
-import {
-  MessageButtonProps,
-  MessageComponentBaseProps,
-} from '@aws-amplify/ui-react-core-notifications';
-
-import { useMessageImage } from '../../useMessageImage';
-import { MessageOverrideStyle } from '../types';
-import useMessageProps from '../useMessageProps';
-
-jest.mock('../../useMessageImage');
-jest.mock('../../../../hooks/useDeviceOrientation');
-
-type TestComponentProps = MessageComponentBaseProps<MessageOverrideStyle>;
-
-const mockUseMessageImage = useMessageImage as jest.Mock;
-
-const onDisplay = jest.fn();
-const getDefaultStyle = jest.fn();
-
-describe('useMessageProps', () => {
-  beforeEach(() => {
-    mockUseMessageImage.mockReturnValue({
-      hasRenderableImage: false,
-      imageDimensions: null,
-      isImageFetching: false,
-    });
-    onDisplay.mockClear();
-  });
-
-  it('behaves as expected in the happy path', () => {
-    const props: TestComponentProps = {
-      layout: 'MIDDLE_BANNER',
-      onDisplay,
-    };
-
-    const { result } = renderHook(() =>
-      useMessageProps(props, getDefaultStyle)
-    );
-
-    expect(onDisplay).toHaveBeenCalledTimes(1);
-    expect(result.current).toEqual({
-      hasButtons: false,
-      hasPrimaryButton: false,
-      hasRenderableImage: false,
-      hasSecondaryButton: false,
-      shouldRenderMessage: true,
-      styles: expect.any(Object) as MessageOverrideStyle,
-    });
-  });
-
-  it('behaves as expected when props includes an image', () => {
-    mockUseMessageImage.mockReturnValue({
-      hasRenderableImage: false,
-      imageDimensions: null,
-      isImageFetching: true,
-    });
-
-    const props: TestComponentProps = {
-      image: { src: 'https://test.png' },
-      layout: 'MIDDLE_BANNER',
-      onDisplay,
-    };
-
-    const { result, rerender } = renderHook(() =>
-      useMessageProps(props, getDefaultStyle)
-    );
-
-    // first render
-    expect(onDisplay).not.toHaveBeenCalled();
-    expect(result.current).toEqual({
-      hasButtons: false,
-      hasPrimaryButton: false,
-      hasRenderableImage: false,
-      hasSecondaryButton: false,
-      shouldRenderMessage: false,
-      styles: null,
-    });
-
-    mockUseMessageImage.mockReturnValue({
-      hasRenderableImage: true,
-      imageDimensions: { height: 12, width: 12 },
-      isImageFetching: false,
-    });
-
-    rerender();
-
-    expect(onDisplay).toHaveBeenCalledTimes(1);
-    expect(result.current).toEqual({
-      hasButtons: false,
-      hasPrimaryButton: false,
-      hasRenderableImage: true,
-      hasSecondaryButton: false,
-      shouldRenderMessage: true,
-      styles: expect.any(Object) as MessageOverrideStyle,
-    });
-  });
-
-  it('returns the expected values when props includes buttons', () => {
-    const props: TestComponentProps = {
-      layout: 'MIDDLE_BANNER',
-
-      primaryButton: { title: 'primary', onAction: jest.fn() },
-      secondaryButton: { title: 'secondary', onAction: jest.fn() },
-    };
-
-    const { result } = renderHook(() =>
-      useMessageProps(props, getDefaultStyle)
-    );
-
-    expect(result.current.hasButtons).toBe(true);
-    expect(result.current.hasPrimaryButton).toBe(true);
-    expect(result.current.hasSecondaryButton).toBe(true);
-  });
-
-  it('returns the expected values when props includes empty buttons', () => {
-    const props: TestComponentProps = {
-      layout: 'MIDDLE_BANNER',
-
-      primaryButton: {} as MessageButtonProps,
-      secondaryButton: {} as MessageButtonProps,
-    };
-
-    const { result } = renderHook(() =>
-      useMessageProps(props, getDefaultStyle)
-    );
-
-    expect(result.current.hasButtons).toBe(false);
-    expect(result.current.hasPrimaryButton).toBe(false);
-    expect(result.current.hasSecondaryButton).toBe(false);
-  });
-
-  it('returns the expected values when props includes only a primary button', () => {
-    const props: TestComponentProps = {
-      layout: 'MIDDLE_BANNER',
-      primaryButton: { title: 'primary', onAction: jest.fn() },
-    };
-
-    const { result } = renderHook(() =>
-      useMessageProps(props, getDefaultStyle)
-    );
-
-    expect(result.current.hasButtons).toBe(true);
-    expect(result.current.hasPrimaryButton).toBe(true);
-    expect(result.current.hasSecondaryButton).toBe(false);
-  });
-
-  it('returns the expected values when props includes only a secondary button', () => {
-    const props: TestComponentProps = {
-      layout: 'MIDDLE_BANNER',
-      secondaryButton: { title: 'primary', onAction: jest.fn() },
-    };
-
-    const { result } = renderHook(() =>
-      useMessageProps(props, getDefaultStyle)
-    );
-
-    expect(result.current.hasButtons).toBe(true);
-    expect(result.current.hasPrimaryButton).toBe(false);
-    expect(result.current.hasSecondaryButton).toBe(true);
-  });
-});