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

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

@@ -7,10 +7,10 @@ import {
   Text,
   ViewToken,
 } from 'react-native';
-import { act, create, ReactTestRenderer } from 'react-test-renderer';
+import { act, render } from '@testing-library/react-native';
 
 import Carousel from '../Carousel';
-import CarouselPageIndicator from '../CarouselPageIndicator';
+import { ReactTestInstance } from 'react-test-renderer';
 
 jest.mock('../CarouselPageIndicator', () => 'CarouselPageIndicator');
 
@@ -22,8 +22,6 @@ const renderItem: ListRenderItem<ItemProps> = ({ item }) => (
 );
 
 describe('Carousel', () => {
-  let carousel: ReactTestRenderer;
-
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -42,50 +40,49 @@ describe('Carousel', () => {
       { key: 1, str: 'foo' },
       { key: 2, str: 'bar' },
     ];
-    act(() => {
-      carousel = create(<Carousel data={data} renderItem={renderItem} />);
-    });
-    const instance = carousel.root;
-
-    expect(carousel.toJSON()).toMatchSnapshot();
-    expect(instance.findAllByType(Text)).toHaveLength(2);
-    expect(instance.findByType(CarouselPageIndicator).props.numberOfItems).toBe(
-      2
+    const { container, getByText, toJSON } = render(
+      <Carousel data={data} renderItem={renderItem} />
     );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText(data[0].str)).toBeDefined();
+    expect(getByText(data[1].str)).toBeDefined();
+
+    const carouselPageIndicator = container.children[1] as ReactTestInstance;
+    expect(carouselPageIndicator.type).toBe('CarouselPageIndicator');
+    expect(carouselPageIndicator.props.numberOfItems).toBe(2);
   });
 
   it('renders with just one item in the data', () => {
     const data = [{ key: 1, str: 'qux' }];
-    act(() => {
-      carousel = create(<Carousel data={data} renderItem={renderItem} />);
-    });
-    const instance = carousel.root;
-
-    expect(carousel.toJSON()).toMatchSnapshot();
-    expect(instance.findAllByType(Text)).toHaveLength(1);
-    expect(instance.findByType(CarouselPageIndicator).props.numberOfItems).toBe(
-      1
+    const { container, toJSON, getByText } = render(
+      <Carousel data={data} renderItem={renderItem} />
     );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText(data[0].str)).toBeDefined();
+    const flatList = container.children[0] as ReactTestInstance;
+    expect(flatList.props.data).toStrictEqual(data);
+
+    const carouselPageIndicator = container.children[1] as ReactTestInstance;
+    expect(carouselPageIndicator.type).toBe('CarouselPageIndicator');
+    expect(carouselPageIndicator.props.numberOfItems).toBe(1);
   });
 
   it('returns null if data is null', () => {
     // Ideally, this should not happen but, if it does, we should be able to handle gracefully
-    act(() => {
-      carousel = create(
-        <Carousel data={null as any} renderItem={renderItem} />
-      );
-    });
+    const { toJSON } = render(
+      <Carousel data={null as any} renderItem={renderItem} />
+    );
 
-    expect(carousel.toJSON()).toBeNull();
+    expect(toJSON()).toBeNull();
   });
 
   it('returns null if there are no items in the data', () => {
     // Ideally, this should not happen but, if it does, we should be able to handle gracefully
-    act(() => {
-      carousel = create(<Carousel data={[]} renderItem={renderItem} />);
-    });
+    const { toJSON } = render(<Carousel data={[]} renderItem={renderItem} />);
 
-    expect(carousel.toJSON()).toBeNull();
+    expect(toJSON()).toBeNull();
   });
 
   it('calls the orientation handler on orientation change', () => {
@@ -97,23 +94,21 @@ describe('Carousel', () => {
     addEventListenerSpy.mockImplementation(((_, handler) => {
       orientationHandler = handler;
     }) as Dimensions['addEventListener']);
-    act(() => {
-      carousel = create(<Carousel data={data} renderItem={renderItem} />);
-    });
-    const instance = carousel.root;
+    const { container, toJSON } = render(
+      <Carousel data={data} renderItem={renderItem} />
+    );
 
-    expect(
-      instance.findByType(Text).parent!.parent!.props.style
-    ).not.toStrictEqual(window);
+    const flatList = container.children[0] as ReactTestInstance;
+    expect(flatList.props.snapToInterval).not.toBe(window.width);
 
     // Call the orientation handler with an arbitrary `ScaledSize`
     act(() => {
       orientationHandler({ window });
     });
 
-    expect(instance.findByType(Text).parent!.parent!.props.style).toStrictEqual(
-      window
-    );
+    expect(flatList.props.snapToInterval).toBe(window.width);
+
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it('cleans up the orientation change listener (React Native < v0.65)', () => {
@@ -124,11 +119,10 @@ describe('Carousel', () => {
 
     const removeEventListener = jest.spyOn(Dimensions, 'removeEventListener');
 
+    const { unmount } = render(<Carousel data={[]} renderItem={renderItem} />);
+
     act(() => {
-      carousel = create(<Carousel data={[]} renderItem={renderItem} />);
-    });
-    act(() => {
-      carousel.unmount();
+      unmount();
     });
 
     expect(removeEventListener).toBeCalled();
@@ -138,11 +132,10 @@ describe('Carousel', () => {
     const mockSubscription = { remove: jest.fn() };
     const addEventListenerSpy = jest.spyOn(Dimensions, 'addEventListener');
     (addEventListenerSpy as jest.Mock).mockReturnValue(mockSubscription);
+    const { unmount } = render(<Carousel data={[]} renderItem={renderItem} />);
+
     act(() => {
-      carousel = create(<Carousel data={[]} renderItem={renderItem} />);
-    });
-    act(() => {
-      carousel.unmount();
+      unmount();
     });
     expect(mockSubscription.remove).toBeCalled();
   });
@@ -152,25 +145,23 @@ describe('Carousel', () => {
       { key: 1, str: 'foo' },
       { key: 2, str: 'bar' },
     ];
-    act(() => {
-      carousel = create(<Carousel data={data} renderItem={renderItem} />);
-    });
-    const instance = carousel.root;
-    const flatList = instance.findByType(FlatList);
+    const { container } = render(
+      <Carousel data={data} renderItem={renderItem} />
+    );
+
+    const flatList = container.children[0] as ReactTestInstance;
+    const carouselPageIndicator = container.children[1] as ReactTestInstance;
+
     const { onViewableItemsChanged } = flatList.props as FlatList['props'];
 
-    expect(instance.findByType(CarouselPageIndicator).props.currentIndex).toBe(
-      0
-    );
+    expect(carouselPageIndicator.props.currentIndex).toBe(0);
 
     act(() => {
       const info = { viewableItems: [{ index: 1 } as ViewToken], changed: [] };
       onViewableItemsChanged!(info);
     });
 
-    expect(instance.findByType(CarouselPageIndicator).props.currentIndex).toBe(
-      1
-    );
+    expect(carouselPageIndicator.props.currentIndex).toBe(1);
 
     // should not update the index if `viewableItems` is empty
     act(() => {
@@ -178,8 +169,6 @@ describe('Carousel', () => {
       onViewableItemsChanged!(info);
     });
 
-    expect(instance.findByType(CarouselPageIndicator).props.currentIndex).toBe(
-      1
-    );
+    expect(carouselPageIndicator.props.currentIndex).toBe(1);
   });
 });

package/src/primitives/Carousel/__tests__/CarouselPageIndicator.spec.tsx

@@ -1,71 +1,73 @@
 import React from 'react';
-import { View } from 'react-native';
-import { act, create, ReactTestRenderer } from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
 
 import CarouselPageIndicator from '../CarouselPageIndicator';
+import { ReactTestRendererJSON } from 'react-test-renderer';
+import {
+  DEFAULT_CAROUSEL_INDICATOR_ACTIVE_STYLE,
+  DEFAULT_CAROUSEL_INDICATOR_INACTIVE_STYLE,
+} from '../constants';
 
 describe('CarouselPageIndicator', () => {
-  let carouselPageIndicator: ReactTestRenderer;
-
   it('renders with multiple items', () => {
-    act(() => {
-      carouselPageIndicator = create(
-        <CarouselPageIndicator currentIndex={0} numberOfItems={3} />
-      );
-    });
-    const instance = carouselPageIndicator.root;
+    const { toJSON } = render(
+      <CarouselPageIndicator currentIndex={0} numberOfItems={3} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
 
-    expect(carouselPageIndicator.toJSON()).toMatchSnapshot();
-    expect(instance.findAllByType(View)).toHaveLength(3);
+    const { children } = toJSON() as ReactTestRendererJSON;
+    expect(children).toHaveLength(3);
   });
 
   it('renders with just one item', () => {
-    act(() => {
-      carouselPageIndicator = create(
-        <CarouselPageIndicator currentIndex={0} numberOfItems={1} />
-      );
-    });
-    const instance = carouselPageIndicator.root;
+    const { toJSON } = render(
+      <CarouselPageIndicator currentIndex={0} numberOfItems={1} />
+    );
 
-    expect(carouselPageIndicator.toJSON()).toMatchSnapshot();
-    expect(instance.findAllByType(View)).toHaveLength(1);
+    expect(toJSON()).toMatchSnapshot();
+    const { children } = toJSON() as ReactTestRendererJSON;
+    expect(children).toHaveLength(1);
   });
 
   it('handles null numberOfItems value', () => {
     // Ideally, this should not happen but, if it does, we should be able to handle gracefully
-    act(() => {
-      carouselPageIndicator = create(
-        <CarouselPageIndicator currentIndex={0} numberOfItems={null as any} />
-      );
-    });
+    const { toJSON } = render(
+      <CarouselPageIndicator currentIndex={0} numberOfItems={null as any} />
+    );
 
-    expect(carouselPageIndicator.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it('renders indicator styles based on current index', () => {
-    act(() => {
-      carouselPageIndicator = create(
-        <CarouselPageIndicator currentIndex={1} numberOfItems={3} />
-      );
-    });
-    const instance = carouselPageIndicator.root;
-    const indicators = instance.findAllByType(View);
-    const activeIndicator = indicators[1];
+    const { toJSON } = render(
+      <CarouselPageIndicator currentIndex={1} numberOfItems={3} />
+    );
+
+    const { children } = toJSON() as ReactTestRendererJSON;
+
+    expect(toJSON()).toMatchSnapshot();
 
-    expect(carouselPageIndicator.toJSON()).toMatchSnapshot();
-    expect(indicators[0].props).toStrictEqual(indicators[2].props);
-    expect(indicators[0].props).not.toStrictEqual(activeIndicator.props);
-    expect(indicators[2].props).not.toStrictEqual(activeIndicator.props);
+    expect((children?.[0] as ReactTestRendererJSON).props.style).toStrictEqual([
+      DEFAULT_CAROUSEL_INDICATOR_INACTIVE_STYLE,
+      undefined,
+    ]);
+    expect((children?.[1] as ReactTestRendererJSON).props.style).toStrictEqual([
+      DEFAULT_CAROUSEL_INDICATOR_ACTIVE_STYLE,
+      undefined,
+    ]);
+    expect((children?.[2] as ReactTestRendererJSON).props.style).toStrictEqual([
+      DEFAULT_CAROUSEL_INDICATOR_INACTIVE_STYLE,
+      undefined,
+    ]);
   });
 
   it('handles null index value', () => {
     // Ideally, this should not happen but, if it does, we should be able to handle gracefully
-    act(() => {
-      carouselPageIndicator = create(
-        <CarouselPageIndicator currentIndex={null} numberOfItems={5} />
-      );
-    });
+    const { toJSON } = render(
+      <CarouselPageIndicator currentIndex={null} numberOfItems={5} />
+    );
 
-    expect(carouselPageIndicator.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });

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

@@ -1,5 +1,99 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Carousel calls the orientation handler on orientation change 1`] = `
+Array [
+  <RCTScrollView
+    bounces={false}
+    data={
+      Array [
+        Object {
+          "key": 1,
+          "str": "qux",
+        },
+      ]
+    }
+    decelerationRate="fast"
+    disableIntervalMomentum={true}
+    getItem={[Function]}
+    getItemCount={[Function]}
+    horizontal={true}
+    keyExtractor={[Function]}
+    onContentSizeChange={[Function]}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    onViewableItemsChanged={[Function]}
+    removeClippedSubviews={false}
+    renderItem={[Function]}
+    renderToHardwareTextureAndroid={true}
+    scrollEventThrottle={50}
+    showsHorizontalScrollIndicator={false}
+    showsVerticalScrollIndicator={false}
+    snapToAlignment="start"
+    snapToInterval={350}
+    stickyHeaderIndices={Array []}
+    viewabilityConfig={
+      Object {
+        "itemVisiblePercentThreshold": 60,
+      }
+    }
+    viewabilityConfigCallbackPairs={
+      Array [
+        Object {
+          "onViewableItemsChanged": [Function],
+          "viewabilityConfig": Object {
+            "itemVisiblePercentThreshold": 60,
+          },
+        },
+      ]
+    }
+  >
+    <View>
+      <View
+        onLayout={[Function]}
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+            },
+            null,
+          ]
+        }
+      >
+        <View
+          style={
+            Object {
+              "width": 350,
+            }
+          }
+        >
+          <Text>
+            qux
+          </Text>
+        </View>
+      </View>
+    </View>
+  </RCTScrollView>,
+  <CarouselPageIndicator
+    currentIndex={0}
+    numberOfItems={1}
+    style={
+      Object {
+        "bottom": 0,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+      }
+    }
+  />,
+]
+`;
+
 exports[`Carousel renders with just one item in the data 1`] = `
 Array [
   <RCTScrollView

package/src/primitives/Carousel/types.ts

@@ -7,6 +7,7 @@ export interface CarouselProps<T> {
   onClose?: () => void;
   renderItem: ListRenderItem<T>;
   style?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
 export interface CarouselPageIndicatorProps {

package/src/version.ts

@@ -0,0 +1 @@
+export const VERSION = '1.2.1';