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

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

@@ -35,6 +35,7 @@ exports[`CarouselMessage allows style overrides 1`] = `
       ]
     }
     renderItem={[Function]}
+    testID="in-app-messaging--carousel"
   />
 </MessageWrapper>
 `;
@@ -70,6 +71,43 @@ exports[`CarouselMessage renders as expected 1`] = `
       ]
     }
     renderItem={[Function]}
+    testID="in-app-messaging--carousel"
+  />
+</MessageWrapper>
+`;
+
+exports[`CarouselMessage renders as expected with minimal props 1`] = `
+<MessageWrapper
+  disableSafeAreaView={true}
+>
+  <Carousel
+    data={Array []}
+    indicatorActiveStyle={
+      Array [
+        Object {
+          "backgroundColor": "#a1a1a1",
+          "borderRadius": 6,
+          "height": 12,
+          "margin": 4,
+          "width": 12,
+        },
+        undefined,
+      ]
+    }
+    indicatorInactiveStyle={
+      Array [
+        Object {
+          "backgroundColor": "#d8d8d8",
+          "borderRadius": 6,
+          "height": 12,
+          "margin": 4,
+          "width": 12,
+        },
+        undefined,
+      ]
+    }
+    renderItem={[Function]}
+    testID="in-app-messaging--carousel"
   />
 </MessageWrapper>
 `;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import TestRenderer from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 
 import { useDeviceOrientation } from '../../../../hooks';
 import { useMessageImage } from '../../../hooks';
@@ -34,9 +34,9 @@ describe('FullScreenMessage', () => {
       isImageFetching: false,
     });
 
-    const renderer = TestRenderer.create(<FullScreenMessage {...baseProps} />);
+    const { toJSON } = render(<FullScreenMessage {...baseProps} />);
 
-    expect(renderer.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it('returns null while an image is fetching', () => {
@@ -46,8 +46,8 @@ describe('FullScreenMessage', () => {
       isImageFetching: true,
     });
 
-    const renderer = TestRenderer.create(<FullScreenMessage {...baseProps} />);
+    const { toJSON } = render(<FullScreenMessage {...baseProps} />);
 
-    expect(renderer.toJSON()).toBeNull();
+    expect(toJSON()).toBeNull();
   });
 });

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text, View } from 'react-native';
-import TestRenderer from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 import { useMessage } from '@aws-amplify/ui-react-core';
 
 import InAppMessageDisplay from '../InAppMessageDisplay';
@@ -24,8 +24,8 @@ describe('InAppMessageDisplay', () => {
 
     mockUseMessage.mockReturnValueOnce({ Component, props });
 
-    const inAppMessageDisplay = TestRenderer.create(<InAppMessageDisplay />);
+    const { toJSON } = render(<InAppMessageDisplay />);
 
-    expect(inAppMessageDisplay.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import TestRenderer from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 import { Text } from 'react-native';
 
 import MessageWrapper from '../MessageWrapper';
@@ -8,12 +8,12 @@ const Children = () => <Text>Children</Text>;
 
 describe('MessageWrapper', () => {
   it('renders as expected', () => {
-    const renderer = TestRenderer.create(
+    const { toJSON } = render(
       <MessageWrapper>
         <Children />
       </MessageWrapper>
     );
 
-    expect(renderer.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/src/InAppMessaging/components/ModalMessage/__tests__/ModalMessage.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 { useDeviceOrientation } from '../../../../hooks';
@@ -36,9 +36,9 @@ describe('ModalMessage', () => {
       isImageFetching: false,
     });
 
-    const renderer = TestRenderer.create(<ModalMessage {...baseProps} />);
+    const { toJSON } = render(<ModalMessage {...baseProps} />);
 
-    expect(renderer.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it('renders a message as expected with an image', () => {
@@ -55,16 +55,14 @@ describe('ModalMessage', () => {
     const src = 'asset.png';
     const props = { ...baseProps, image: { src } };
 
-    const renderer = TestRenderer.create(<ModalMessage {...props} />);
+    const { toJSON, getByTestId } = render(<ModalMessage {...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', () => {
@@ -78,9 +76,9 @@ describe('ModalMessage', () => {
       isImageFetching: true,
     });
 
-    const renderer = TestRenderer.create(<ModalMessage {...baseProps} />);
+    const { toJSON } = render(<ModalMessage {...baseProps} />);
 
-    expect(renderer.toJSON()).toBeNull();
+    expect(toJSON()).toBeNull();
   });
 
   it.each([
@@ -100,12 +98,32 @@ describe('ModalMessage', () => {
         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(<ModalMessage {...props} />);
+      const testElement = getByTestId(testID);
+
+      for (const [key, value] of Object.entries(expectedProps)) {
+        expect(testElement.props[key]).toEqual(value);
+      }
+    }
+  );
+
+  it.each([
     [
       'primaryButton',
       IN_APP_MESSAGING_TEST_ID.PRIMARY_BUTTON,
       {
         testProps: { onAction, title: 'primary button' },
-        expectedProps: { children: 'primary button', onPress: onAction },
       },
     ],
     [
@@ -113,26 +131,27 @@ describe('ModalMessage', () => {
       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: null, width: null },
-        isImageFetching: false,
-      });
+  ])('correctly handles a %s 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(<ModalMessage {...props} />);
 
-      const renderer = TestRenderer.create(<ModalMessage {...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({
@@ -141,15 +160,10 @@ describe('ModalMessage', () => {
       isImageFetching: false,
     });
 
-    const renderer = TestRenderer.create(<ModalMessage {...baseProps} />);
-    const closeButton = renderer.root.findByProps({
-      testID: IN_APP_MESSAGING_TEST_ID.CLOSE_BUTTON,
-    });
-
-    TestRenderer.act(() => {
-      (closeButton.props as { onPress: () => void }).onPress();
-    });
+    const { getByTestId } = render(<ModalMessage {...baseProps} />);
+    const closeButton = getByTestId(IN_APP_MESSAGING_TEST_ID.CLOSE_BUTTON);
 
+    fireEvent.press(closeButton);
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -1,5 +1,377 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ModalMessage correctly handles a primaryButton prop 1`] = `
+<MessageWrapper
+  style={
+    Object {
+      "flex": 1,
+      "justifyContent": "center",
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#fff",
+          "elevation": 3,
+          "margin": 16,
+          "minHeight": "40%",
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 2,
+            "width": 2,
+          },
+          "shadowOpacity": 0.1,
+          "shadowRadius": 2,
+        },
+        Object {},
+        Object {},
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "padding": 12,
+        }
+      }
+    >
+      <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
+        style={
+          Object {
+            "marginTop": 12,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "marginTop": "auto",
+          "paddingBottom": 4,
+          "paddingHorizontal": 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[`ModalMessage correctly handles a secondaryButton prop 1`] = `
+<MessageWrapper
+  style={
+    Object {
+      "flex": 1,
+      "justifyContent": "center",
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#fff",
+          "elevation": 3,
+          "margin": 16,
+          "minHeight": "40%",
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 2,
+            "width": 2,
+          },
+          "shadowOpacity": 0.1,
+          "shadowRadius": 2,
+        },
+        Object {},
+        Object {},
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "padding": 12,
+        }
+      }
+    >
+      <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
+        style={
+          Object {
+            "marginTop": 12,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "marginTop": "auto",
+          "paddingBottom": 4,
+          "paddingHorizontal": 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[`ModalMessage renders a message as expected with an image 1`] = `
 <MessageWrapper
   style={

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

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

package/src/InAppMessaging/constants.ts

@@ -54,4 +54,5 @@ export const IN_APP_MESSAGING_TEST_ID = {
   IMAGE: 'in-app-messaging--image',
   PRIMARY_BUTTON: 'in-app-messaging--primary-button',
   SECONDARY_BUTTON: 'in-app-messaging--secondary-button',
+  CAROUSEL: 'in-app-messaging--carousel',
 };