@aws-amplify/ui-react-native 1.2.0 → 1.2.1

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import TestRenderer from 'react-test-renderer';
+import { fireEvent, render } from '@testing-library/react-native';
 
 import { IN_APP_MESSAGING_TEST_ID } from '../../../constants';
 import { useMessageImage } from '../../../hooks/useMessageImage';
@@ -27,9 +27,9 @@ describe('BannerMessage', () => {
       isImageFetching: false,
     });
 
-    const renderer = TestRenderer.create(<BannerMessage {...baseProps} />);
+    const { toJSON } = render(<BannerMessage {...baseProps} />);
 
-    expect(renderer.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it('renders a message as expected with an image', () => {
@@ -42,16 +42,14 @@ describe('BannerMessage', () => {
     const src = 'asset.png';
     const props = { ...baseProps, image: { src } };
 
-    const renderer = TestRenderer.create(<BannerMessage {...props} />);
+    const { toJSON, getByTestId } = render(<BannerMessage {...props} />);
 
-    const image = renderer.root.findByProps({
-      testID: IN_APP_MESSAGING_TEST_ID.IMAGE,
-    });
+    const image = getByTestId(IN_APP_MESSAGING_TEST_ID.IMAGE);
 
     expect(image.props).toEqual(
       expect.objectContaining({ source: { uri: src } })
     );
-    expect(renderer.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it('returns null while an image is fetching', () => {
@@ -61,9 +59,9 @@ describe('BannerMessage', () => {
       isImageFetching: true,
     });
 
-    const renderer = TestRenderer.create(<BannerMessage {...baseProps} />);
+    const { toJSON } = render(<BannerMessage {...baseProps} />);
 
-    expect(renderer.toJSON()).toBeNull();
+    expect(toJSON()).toBeNull();
   });
 
   it.each([
@@ -83,12 +81,30 @@ describe('BannerMessage', () => {
         expectedProps: { children: 'body content' },
       },
     ],
+  ])(
+    'correctly handles a %s prop',
+    (key, testID, { testProps, expectedProps }) => {
+      mockUseMessageImage.mockReturnValueOnce({
+        hasRenderableImage: false,
+        imageDimensions: { height: undefined, width: undefined },
+        isImageFetching: false,
+      });
+
+      const props = { ...baseProps, [key]: testProps };
+
+      const { getByTestId } = render(<BannerMessage {...props} />);
+      const testElement = getByTestId(testID);
+
+      expect(testElement.children).toContain(expectedProps.children);
+    }
+  );
+
+  it.each([
     [
       'primaryButton',
       IN_APP_MESSAGING_TEST_ID.PRIMARY_BUTTON,
       {
         testProps: { onAction, title: 'primary button' },
-        expectedProps: { children: 'primary button', onPress: onAction },
       },
     ],
     [
@@ -96,26 +112,27 @@ describe('BannerMessage', () => {
       IN_APP_MESSAGING_TEST_ID.SECONDARY_BUTTON,
       {
         testProps: { onAction, title: 'secondary button' },
-        expectedProps: { children: 'secondary button', onPress: onAction },
       },
     ],
-  ])(
-    'correctly handles a %s prop',
-    (key, testID, { testProps, expectedProps }) => {
-      mockUseMessageImage.mockReturnValueOnce({
-        hasRenderableImage: false,
-        imageDimensions: { height: undefined, width: undefined },
-        isImageFetching: false,
-      });
+  ])('correctly handles a %s button prop', (key, testID, { testProps }) => {
+    mockUseMessageImage.mockReturnValueOnce({
+      hasRenderableImage: false,
+      imageDimensions: { height: undefined, width: undefined },
+      isImageFetching: false,
+    });
 
-      const props = { ...baseProps, [key]: testProps };
+    const props = { ...baseProps, [key]: testProps };
+    const { toJSON, getByRole, getByTestId, getByText, queryAllByRole } =
+      render(<BannerMessage {...props} />);
 
-      const renderer = TestRenderer.create(<BannerMessage {...props} />);
-      const testElement = renderer.root.findByProps({ testID });
+    expect(toJSON()).toMatchSnapshot();
+    expect(queryAllByRole('button')).toHaveLength(2);
+    expect(getByTestId(testID)).toBeDefined();
+    expect(getByTestId(IN_APP_MESSAGING_TEST_ID.CLOSE_BUTTON)).toBeDefined();
 
-      expect(testElement.props).toEqual(expect.objectContaining(expectedProps));
-    }
-  );
+    expect(getByRole('image')).toBeDefined();
+    expect(getByText(testProps.title)).toBeDefined();
+  });
 
   it('calls onClose when the close button is pressed', () => {
     mockUseMessageImage.mockReturnValueOnce({
@@ -124,14 +141,10 @@ describe('BannerMessage', () => {
       isImageFetching: false,
     });
 
-    const renderer = TestRenderer.create(<BannerMessage {...baseProps} />);
-    const closeButton = renderer.root.findByProps({
-      testID: IN_APP_MESSAGING_TEST_ID.CLOSE_BUTTON,
-    });
+    const { getByTestId } = render(<BannerMessage {...baseProps} />);
+    const closeButton = getByTestId(IN_APP_MESSAGING_TEST_ID.CLOSE_BUTTON);
 
-    TestRenderer.act(() => {
-      (closeButton.props as { onPress: () => void }).onPress();
-    });
+    fireEvent.press(closeButton);
 
     expect(onClose).toHaveBeenCalledTimes(1);
   });

package/src/InAppMessaging/components/BannerMessage/__tests__/__snapshots__/BannerMessage.spec.tsx.snap

@@ -1,5 +1,377 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`BannerMessage correctly handles a primaryButton button prop 1`] = `
+<MessageWrapper
+  style={
+    Object {
+      "backgroundColor": "transparent",
+      "flex": 1,
+      "justifyContent": "flex-start",
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#fff",
+          "elevation": 3,
+          "margin": 16,
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 2,
+            "width": 2,
+          },
+          "shadowOpacity": 0.1,
+          "shadowRadius": 2,
+        },
+        Object {},
+        Object {},
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "padding": 12,
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "flex": 1,
+            "paddingHorizontal": 8,
+          }
+        }
+      />
+      <View
+        accessibilityRole="button"
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          Object {
+            "bottom": 10,
+            "left": 10,
+            "right": 10,
+            "top": 10,
+          }
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {},
+            undefined,
+            Array [
+              Object {
+                "alignSelf": "flex-start",
+                "marginLeft": "auto",
+              },
+              undefined,
+            ],
+          ]
+        }
+        testID="in-app-messaging--close-button"
+      >
+        <Image
+          accessibilityRole="image"
+          source={
+            Object {
+              "testUri": "../../../src/assets/icons/close.png",
+            }
+          }
+          style={
+            Array [
+              Object {
+                "height": 20,
+                "resizeMode": "contain",
+                "tintColor": undefined,
+                "width": 20,
+              },
+              undefined,
+            ]
+          }
+        />
+      </View>
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "padding": 4,
+        }
+      }
+    >
+      <View
+        accessibilityRole="button"
+        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 {},
+              Object {
+                "backgroundColor": "#e8e8e8",
+                "borderRadius": 4,
+                "flex": 1,
+                "margin": 8,
+                "padding": 12,
+              },
+              Object {},
+              Object {},
+            ],
+          ]
+        }
+        testID="in-app-messaging--primary-button"
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "fontSize": 16,
+                "fontWeight": "700",
+                "textAlign": "center",
+              },
+              Array [
+                Object {
+                  "fontSize": 16,
+                  "fontWeight": "400",
+                  "lineHeight": 24,
+                  "textAlign": "center",
+                },
+                Object {},
+                Object {},
+              ],
+            ]
+          }
+        >
+          primary button
+        </Text>
+      </View>
+    </View>
+  </View>
+</MessageWrapper>
+`;
+
+exports[`BannerMessage correctly handles a secondaryButton button prop 1`] = `
+<MessageWrapper
+  style={
+    Object {
+      "backgroundColor": "transparent",
+      "flex": 1,
+      "justifyContent": "flex-start",
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#fff",
+          "elevation": 3,
+          "margin": 16,
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 2,
+            "width": 2,
+          },
+          "shadowOpacity": 0.1,
+          "shadowRadius": 2,
+        },
+        Object {},
+        Object {},
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "padding": 12,
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "flex": 1,
+            "paddingHorizontal": 8,
+          }
+        }
+      />
+      <View
+        accessibilityRole="button"
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          Object {
+            "bottom": 10,
+            "left": 10,
+            "right": 10,
+            "top": 10,
+          }
+        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {},
+            undefined,
+            Array [
+              Object {
+                "alignSelf": "flex-start",
+                "marginLeft": "auto",
+              },
+              undefined,
+            ],
+          ]
+        }
+        testID="in-app-messaging--close-button"
+      >
+        <Image
+          accessibilityRole="image"
+          source={
+            Object {
+              "testUri": "../../../src/assets/icons/close.png",
+            }
+          }
+          style={
+            Array [
+              Object {
+                "height": 20,
+                "resizeMode": "contain",
+                "tintColor": undefined,
+                "width": 20,
+              },
+              undefined,
+            ]
+          }
+        />
+      </View>
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "padding": 4,
+        }
+      }
+    >
+      <View
+        accessibilityRole="button"
+        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 {},
+              Object {
+                "backgroundColor": "#e8e8e8",
+                "borderRadius": 4,
+                "flex": 1,
+                "margin": 8,
+                "padding": 12,
+              },
+              Object {},
+              Object {},
+            ],
+          ]
+        }
+        testID="in-app-messaging--secondary-button"
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "fontSize": 16,
+                "fontWeight": "700",
+                "textAlign": "center",
+              },
+              Array [
+                Object {
+                  "fontSize": 16,
+                  "fontWeight": "400",
+                  "lineHeight": 24,
+                  "textAlign": "center",
+                },
+                Object {},
+                Object {},
+              ],
+            ]
+          }
+        >
+          secondary button
+        </Text>
+      </View>
+    </View>
+  </View>
+</MessageWrapper>
+`;
+
 exports[`BannerMessage renders a message as expected with an image 1`] = `
 <MessageWrapper
   style={

package/src/InAppMessaging/components/CarouselMessage/CarouselMessage.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { MessageContentProps } from '@aws-amplify/ui-react-core';
 
 import { Carousel } from '../../../primitives';
+import { IN_APP_MESSAGING_TEST_ID } from '../../constants';
 
 import { MessageWrapper } from '../MessageWrapper';
 import CarouselMessageItem from './CarouselMessageItem';
@@ -36,6 +37,7 @@ export default function CarouselMessage(
         renderItem={renderItem}
         indicatorActiveStyle={indicatorStyle.active}
         indicatorInactiveStyle={indicatorStyle.inactive}
+        testID={IN_APP_MESSAGING_TEST_ID.CAROUSEL}
       />
     </MessageWrapper>
   );

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

@@ -1,25 +1,53 @@
 import React, { ReactElement } from 'react';
-import { act, create, ReactTestRenderer } from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 
-import { Carousel } from '../../../../primitives';
+import { IN_APP_MESSAGING_TEST_ID } from '../../../constants';
 import CarouselMessage from '../CarouselMessage';
+import { defaultStyle } from '../styles';
+import { ReactTestRendererJSON } from 'react-test-renderer';
 
 jest.mock('../../../../primitives', () => ({ Carousel: 'Carousel' }));
 jest.mock('../../MessageWrapper', () => ({ MessageWrapper: 'MessageWrapper' }));
 jest.mock('../CarouselMessageItem', () => 'CarouselMessageItem');
 
-const baseProps = { layout: 'CAROUSEL' as const, data: [] };
+const baseProps = {
+  layout: 'CAROUSEL' as const,
+  data: [],
+};
 
 describe('CarouselMessage', () => {
-  let carouselMessage: ReactTestRenderer;
-  let itemRenderer: ReactTestRenderer;
-
   it('renders as expected', () => {
-    act(() => {
-      carouselMessage = create(<CarouselMessage {...baseProps} />);
-    });
+    const { toJSON, getByTestId } = render(<CarouselMessage {...baseProps} />);
+
+    expect(toJSON()).toMatchSnapshot();
 
-    expect(carouselMessage.toJSON()).toMatchSnapshot();
+    const carousel = getByTestId(IN_APP_MESSAGING_TEST_ID.CAROUSEL);
+    expect(carousel).toBeDefined();
+    expect(carousel.props.data).toStrictEqual(baseProps.data);
+    expect(carousel.props.indicatorActiveStyle).toContain(
+      defaultStyle.pageIndicatorActive
+    );
+    expect(carousel.props.indicatorInactiveStyle).toContain(
+      defaultStyle.pageIndicatorInactive
+    );
+  });
+
+  it('renders as expected with minimal props', () => {
+    const { toJSON, getByTestId } = render(
+      <CarouselMessage layout={baseProps.layout} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+
+    const carousel = getByTestId(IN_APP_MESSAGING_TEST_ID.CAROUSEL);
+    expect(carousel).toBeDefined();
+    expect(carousel.props.data).toEqual([]);
+    expect(carousel.props.indicatorActiveStyle).toContain(
+      defaultStyle.pageIndicatorActive
+    );
+    expect(carousel.props.indicatorInactiveStyle).toContain(
+      defaultStyle.pageIndicatorInactive
+    );
   });
 
   it('allows style overrides', () => {
@@ -27,29 +55,38 @@ describe('CarouselMessage', () => {
       pageIndicatorActive: { backgroundColor: 'red' },
       pageIndicatorInactive: { backgroundColor: 'blue' },
     };
-    act(() => {
-      carouselMessage = create(
-        <CarouselMessage {...baseProps} style={overrides} />
-      );
-    });
+    const { toJSON, getByTestId } = render(
+      <CarouselMessage {...baseProps} style={overrides} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
 
-    expect(carouselMessage.toJSON()).toMatchSnapshot();
+    const carousel = getByTestId(IN_APP_MESSAGING_TEST_ID.CAROUSEL);
+    expect(carousel.props.indicatorActiveStyle).toContain(
+      overrides.pageIndicatorActive
+    );
+    expect(carousel.props.indicatorInactiveStyle).toContain(
+      overrides.pageIndicatorInactive
+    );
   });
 
   it('renders items', () => {
-    act(() => {
-      carouselMessage = create(<CarouselMessage {...baseProps} />);
-    });
-    const carousel = carouselMessage.root.findByType(Carousel);
+    const { getByTestId } = render(<CarouselMessage {...baseProps} />);
+
+    const carousel = getByTestId(IN_APP_MESSAGING_TEST_ID.CAROUSEL);
+    const image = { src: 'image-src' };
     const Item = () =>
-      (carousel.props as { renderItem: (data) => ReactElement }).renderItem({
-        item: { image: { src: 'image-src' } },
+      (
+        carousel.props as { renderItem: (data: any) => ReactElement }
+      ).renderItem({
+        item: { image },
       });
+    const { toJSON } = render(<Item />);
+    const carouselMessageItem = toJSON();
+    expect(carouselMessageItem).toMatchSnapshot();
 
-    act(() => {
-      itemRenderer = create(<Item />);
-    });
-
-    expect(itemRenderer.toJSON()).toMatchSnapshot();
+    const { props } = toJSON() as ReactTestRendererJSON;
+    expect(props.layout).toEqual(baseProps.layout);
+    expect(props.image).toEqual({ src: 'image-src' });
   });
 });

package/src/InAppMessaging/components/CarouselMessage/__tests__/CarouselMessageItem.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { act, create, ReactTestRenderer } from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 
 import { useDeviceOrientation } from '../../../../hooks';
 import { useMessageImage } from '../../../hooks/useMessageImage';
@@ -14,8 +14,6 @@ jest.mock('../../MessageWrapper', () => ({ MessageWrapper: 'MessageWrapper' }));
 const baseProps = { layout: 'CAROUSEL' as const };
 
 describe('CarouselMessageItem', () => {
-  let carouselMessageItem: ReactTestRenderer;
-
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -34,11 +32,9 @@ describe('CarouselMessageItem', () => {
       isImageFetching: false,
     });
 
-    act(() => {
-      carouselMessageItem = create(<CarouselMessageItem {...baseProps} />);
-    });
+    const { toJSON } = render(<CarouselMessageItem {...baseProps} />);
 
-    expect(carouselMessageItem.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it('returns null if message is not ready for rendering', () => {
@@ -47,10 +43,8 @@ describe('CarouselMessageItem', () => {
       imageDimensions: { height: null, width: null },
       isImageFetching: true,
     });
-    act(() => {
-      carouselMessageItem = create(<CarouselMessageItem {...baseProps} />);
-    });
+    const { toJSON } = render(<CarouselMessageItem {...baseProps} />);
 
-    expect(carouselMessageItem.toJSON()).toBeNull();
+    expect(toJSON()).toBeNull();
   });
 });