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

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

@@ -1,92 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { fireEvent, render, renderHook } from '@testing-library/react-native';
-
-import { useTheme } from '../../../theme';
-import { getThemedStyles } from '../styles';
-import Button from '../Button';
-
-const labelText = 'A pressable button';
-const Title = () => <Text>{labelText}</Text>;
-
-describe('Button', () => {
-  it('renders as expected with a string passed as children', () => {
-    const { toJSON, getByRole, getByText } = render(
-      <Button>{labelText}</Button>
-    );
-
-    expect(getByRole('button')).toBeDefined();
-    expect(getByText(labelText)).toBeDefined();
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('renders as expected with a component passed as children', () => {
-    const { toJSON, getByRole, getByText } = render(
-      <Button>
-        <Title />
-      </Button>
-    );
-
-    expect(getByRole('button')).toBeDefined();
-    expect(getByText(labelText)).toBeDefined();
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('handles an onPress callback', () => {
-    const onPressMock = jest.fn();
-
-    const { getByRole } = render(
-      <Button onPress={onPressMock}>{labelText}</Button>
-    );
-
-    const button = getByRole('button');
-    fireEvent.press(button);
-    expect(onPressMock).toHaveBeenCalled();
-  });
-
-  it('handles disabled state', () => {
-    const onPressMock = jest.fn();
-
-    const { getByRole } = render(
-      <Button disabled onPress={onPressMock}>
-        {labelText}
-      </Button>
-    );
-
-    const button = getByRole('button');
-    fireEvent.press(button);
-    expect(onPressMock).not.toHaveBeenCalled();
-  });
-
-  it('applies accessibility role', () => {
-    const { queryByRole, getByRole } = render(
-      <Button accessibilityRole="none">{labelText}</Button>
-    );
-
-    expect(queryByRole('button')).toBe(null);
-    expect(getByRole('none')).toBeDefined();
-  });
-
-  it('applies theme and style props', () => {
-    const customStyle = { backgroundColor: 'blue' };
-    const customTextStyle = { color: 'red' };
-
-    const { toJSON, getByRole, getByText } = render(
-      <Button style={customStyle} textStyle={customTextStyle}>
-        {labelText}
-      </Button>
-    );
-
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current);
-
-    expect(getByRole('button').props.style).toContain(customStyle);
-    expect(getByText(labelText).props.style).toStrictEqual([
-      {
-        ...themedStyle.text,
-      },
-      customTextStyle,
-    ]);
-    expect(toJSON()).toMatchSnapshot();
-  });
-});

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

@@ -1,143 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button applies theme and style props 1`] = `
-<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,
-      Object {
-        "backgroundColor": "blue",
-      },
-    ]
-  }
->
-  <Text
-    style={
-      Array [
-        Object {
-          "color": "hsl(210, 50%, 10%)",
-          "fontSize": 16,
-          "fontWeight": "700",
-          "textAlign": "center",
-        },
-        Object {
-          "color": "red",
-        },
-      ]
-    }
-  >
-    A pressable button
-  </Text>
-</View>
-`;
-
-exports[`Button renders as expected with a component passed as children 1`] = `
-<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,
-      undefined,
-    ]
-  }
->
-  <Text>
-    A pressable button
-  </Text>
-</View>
-`;
-
-exports[`Button renders as expected with a string passed as children 1`] = `
-<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,
-      undefined,
-    ]
-  }
->
-  <Text
-    style={
-      Array [
-        Object {
-          "color": "hsl(210, 50%, 10%)",
-          "fontSize": 16,
-          "fontWeight": "700",
-          "textAlign": "center",
-        },
-        undefined,
-      ]
-    }
-  >
-    A pressable button
-  </Text>
-</View>
-`;

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

@@ -1,174 +0,0 @@
-import React from 'react';
-import {
-  Dimensions,
-  EmitterSubscription,
-  FlatList,
-  ListRenderItem,
-  Text,
-  ViewToken,
-} from 'react-native';
-import { act, render } from '@testing-library/react-native';
-
-import Carousel from '../Carousel';
-import { ReactTestInstance } from 'react-test-renderer';
-
-jest.mock('../CarouselPageIndicator', () => 'CarouselPageIndicator');
-
-type ItemProps = { str?: string };
-
-const Item = ({ str }: ItemProps) => <Text>{str}</Text>;
-const renderItem: ListRenderItem<ItemProps> = ({ item }) => (
-  <Item str={item.str} />
-);
-
-describe('Carousel', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  /* 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('renders with multiple items in the data', () => {
-    const data = [
-      { key: 1, str: 'foo' },
-      { key: 2, str: 'bar' },
-    ];
-    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' }];
-    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
-    const { toJSON } = render(
-      <Carousel data={null as any} renderItem={renderItem} />
-    );
-
-    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
-    const { toJSON } = render(<Carousel data={[]} renderItem={renderItem} />);
-
-    expect(toJSON()).toBeNull();
-  });
-
-  it('calls the orientation handler on orientation change', () => {
-    let orientationHandler: Function;
-    const data = [{ key: 1, str: 'qux' }];
-    const window = { width: 350 };
-    const addEventListenerSpy = jest.spyOn(Dimensions, 'addEventListener');
-    // Get a reference to the orientation handler by spying on the `addEventListener` call
-    addEventListenerSpy.mockImplementation(((_, handler) => {
-      orientationHandler = handler;
-    }) as Dimensions['addEventListener']);
-    const { container, toJSON } = render(
-      <Carousel data={data} renderItem={renderItem} />
-    );
-
-    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(flatList.props.snapToInterval).toBe(window.width);
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('cleans up the orientation change listener (React Native < v0.65)', () => {
-    // ensure that `addEventListener` returns `undefined`
-    jest
-      .spyOn(Dimensions, 'addEventListener')
-      .mockReturnValue(undefined as unknown as EmitterSubscription);
-
-    const removeEventListener = jest.spyOn(Dimensions, 'removeEventListener');
-
-    const { unmount } = render(<Carousel data={[]} renderItem={renderItem} />);
-
-    act(() => {
-      unmount();
-    });
-
-    expect(removeEventListener).toBeCalled();
-  });
-
-  it('cleans up the orientation change listener (React Native v0.65+)', () => {
-    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(() => {
-      unmount();
-    });
-    expect(mockSubscription.remove).toBeCalled();
-  });
-
-  it('sets the index when viewable items change', () => {
-    const data = [
-      { key: 1, str: 'foo' },
-      { key: 2, str: 'bar' },
-    ];
-    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(carouselPageIndicator.props.currentIndex).toBe(0);
-
-    act(() => {
-      const info = { viewableItems: [{ index: 1 } as ViewToken], changed: [] };
-      onViewableItemsChanged!(info);
-    });
-
-    expect(carouselPageIndicator.props.currentIndex).toBe(1);
-
-    // should not update the index if `viewableItems` is empty
-    act(() => {
-      const info = { viewableItems: [], changed: [] };
-      onViewableItemsChanged!(info);
-    });
-
-    expect(carouselPageIndicator.props.currentIndex).toBe(1);
-  });
-});

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

@@ -1,73 +0,0 @@
-import React from 'react';
-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', () => {
-  it('renders with multiple items', () => {
-    const { toJSON } = render(
-      <CarouselPageIndicator currentIndex={0} numberOfItems={3} />
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-
-    const { children } = toJSON() as ReactTestRendererJSON;
-    expect(children).toHaveLength(3);
-  });
-
-  it('renders with just one item', () => {
-    const { toJSON } = render(
-      <CarouselPageIndicator currentIndex={0} numberOfItems={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
-    const { toJSON } = render(
-      <CarouselPageIndicator currentIndex={0} numberOfItems={null as any} />
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('renders indicator styles based on current index', () => {
-    const { toJSON } = render(
-      <CarouselPageIndicator currentIndex={1} numberOfItems={3} />
-    );
-
-    const { children } = toJSON() as ReactTestRendererJSON;
-
-    expect(toJSON()).toMatchSnapshot();
-
-    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
-    const { toJSON } = render(
-      <CarouselPageIndicator currentIndex={null} numberOfItems={5} />
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});