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

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

@@ -1,139 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Icon renders an animated icon 1`] = `
-<Image
-  accessibilityRole="image"
-  collapsable={false}
-  source={
-    Object {
-      "uri": "mock.png",
-    }
-  }
-  style={
-    Object {
-      "height": 24,
-      "resizeMode": "contain",
-      "tintColor": undefined,
-      "width": 24,
-    }
-  }
-  testID="iconTestID"
-/>
-`;
-
-exports[`Icon renders as expected 1`] = `
-<Image
-  accessibilityRole="image"
-  source={
-    Object {
-      "uri": "mock.png",
-    }
-  }
-  style={
-    Array [
-      Object {
-        "height": 24,
-        "resizeMode": "contain",
-        "tintColor": undefined,
-        "width": 24,
-      },
-      undefined,
-    ]
-  }
-  testID="iconTestID"
-/>
-`;
-
-exports[`Icon renders as expected with custom styles 1`] = `
-<Image
-  accessibilityRole="image"
-  source={
-    Object {
-      "uri": "mock.png",
-    }
-  }
-  style={
-    Array [
-      Object {
-        "height": 24,
-        "resizeMode": "contain",
-        "tintColor": undefined,
-        "width": 24,
-      },
-      Object {
-        "tintColor": "red",
-      },
-    ]
-  }
-  testID="iconTestID"
-/>
-`;
-
-exports[`Icon should override size as number 1`] = `
-<Image
-  accessibilityRole="image"
-  source={
-    Object {
-      "uri": "mock.png",
-    }
-  }
-  style={
-    Array [
-      Object {
-        "height": 22,
-        "resizeMode": "contain",
-        "tintColor": undefined,
-        "width": 22,
-      },
-      undefined,
-    ]
-  }
-  testID="iconTestID"
-/>
-`;
-
-exports[`Icon should override size as string 1`] = `
-<Image
-  accessibilityRole="image"
-  source={
-    Object {
-      "uri": "mock.png",
-    }
-  }
-  style={
-    Array [
-      Object {
-        "height": 32,
-        "resizeMode": "contain",
-        "tintColor": undefined,
-        "width": 32,
-      },
-      undefined,
-    ]
-  }
-  testID="iconTestID"
-/>
-`;
-
-exports[`Icon throws an error for invalid size type 1`] = `
-<Image
-  accessibilityRole="image"
-  source={
-    Object {
-      "uri": "mock.png",
-    }
-  }
-  style={
-    Array [
-      Object {
-        "height": 24,
-        "resizeMode": "contain",
-        "tintColor": undefined,
-        "width": 24,
-      },
-      undefined,
-    ]
-  }
-  testID="iconTestID"
-/>
-`;

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

@@ -1,71 +0,0 @@
-import React from 'react';
-import { fireEvent, render, renderHook } from '@testing-library/react-native';
-
-import { useTheme } from '../../../theme';
-import IconButton from '../IconButton';
-import { getThemedStyles } from '../styles';
-
-const source = { uri: 'icon.png' };
-
-describe('IconButton', () => {
-  it('renders as expected', () => {
-    const { toJSON, getByRole } = render(<IconButton source={source} />);
-
-    expect(getByRole('button')).toBeDefined();
-    expect(getByRole('image')).toBeDefined();
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('handles disabled state', () => {
-    const onPressMock = jest.fn();
-
-    const { toJSON, getByRole } = render(
-      <IconButton disabled source={source} />
-    );
-
-    const button = getByRole('button');
-    fireEvent.press(button);
-    expect(onPressMock).not.toHaveBeenCalled();
-
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current);
-
-    expect(button.props.style).toStrictEqual([
-      { ...themedStyle.container, ...themedStyle.disabled },
-      undefined,
-      undefined,
-    ]);
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('renders as expected with custom icon style', () => {
-    const customIconStyle = { backgroundColor: 'antiquewhite' };
-    const { toJSON, getByRole } = render(
-      <IconButton iconStyle={customIconStyle} source={source} />
-    );
-
-    const icon = getByRole('image');
-    expect(icon.props.style).toContain(customIconStyle);
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('applies theme and style props', () => {
-    const customStyle = { backgroundColor: 'blue' };
-
-    const { toJSON, getByRole } = render(
-      <IconButton source={source} style={customStyle} />
-    );
-
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current);
-
-    expect(getByRole('button').props.style).toStrictEqual([
-      {
-        ...themedStyle.container,
-      },
-      undefined,
-      customStyle,
-    ]);
-    expect(toJSON()).toMatchSnapshot();
-  });
-});

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

@@ -1,192 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`IconButton 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 {},
-      undefined,
-      Object {
-        "backgroundColor": "blue",
-      },
-    ]
-  }
->
-  <Image
-    accessibilityRole="image"
-    source={
-      Object {
-        "uri": "icon.png",
-      }
-    }
-    style={
-      Array [
-        Object {
-          "height": 24,
-          "resizeMode": "contain",
-          "tintColor": undefined,
-          "width": 24,
-        },
-        undefined,
-      ]
-    }
-  />
-</View>
-`;
-
-exports[`IconButton handles disabled state 1`] = `
-<View
-  accessibilityRole="button"
-  accessibilityState={
-    Object {
-      "disabled": true,
-    }
-  }
-  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 {
-        "opacity": 0.6,
-      },
-      undefined,
-      undefined,
-    ]
-  }
->
-  <Image
-    accessibilityRole="image"
-    source={
-      Object {
-        "uri": "icon.png",
-      }
-    }
-    style={
-      Array [
-        Object {
-          "height": 24,
-          "resizeMode": "contain",
-          "tintColor": undefined,
-          "width": 24,
-        },
-        undefined,
-      ]
-    }
-  />
-</View>
-`;
-
-exports[`IconButton renders as expected 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 {},
-      undefined,
-      undefined,
-    ]
-  }
->
-  <Image
-    accessibilityRole="image"
-    source={
-      Object {
-        "uri": "icon.png",
-      }
-    }
-    style={
-      Array [
-        Object {
-          "height": 24,
-          "resizeMode": "contain",
-          "tintColor": undefined,
-          "width": 24,
-        },
-        undefined,
-      ]
-    }
-  />
-</View>
-`;
-
-exports[`IconButton renders as expected with custom icon style 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 {},
-      undefined,
-      undefined,
-    ]
-  }
->
-  <Image
-    accessibilityRole="image"
-    source={
-      Object {
-        "uri": "icon.png",
-      }
-    }
-    style={
-      Array [
-        Object {
-          "height": 24,
-          "resizeMode": "contain",
-          "tintColor": undefined,
-          "width": 24,
-        },
-        Object {
-          "backgroundColor": "antiquewhite",
-        },
-      ]
-    }
-  />
-</View>
-`;

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

@@ -1,75 +0,0 @@
-import React from 'react';
-import { render, renderHook } from '@testing-library/react-native';
-
-import { useTheme } from '../../../theme';
-import { getThemedStyles } from '../styles';
-import Label from '../Label';
-
-const text = 'Default Label';
-const testID = 'labelID';
-const props = {
-  testID,
-};
-
-describe('Label', () => {
-  it('renders a default Label', () => {
-    const { toJSON, getByText, getByRole } = render(
-      <Label {...props}>{text}</Label>
-    );
-    expect(toJSON()).toMatchSnapshot();
-
-    expect(getByText(text)).toBeDefined();
-    expect(getByRole('text')).toBeDefined();
-  });
-
-  it('applies accessibility role', () => {
-    const { toJSON, queryByRole, getByRole } = render(
-      <Label {...props} accessibilityRole="none">
-        {text}
-      </Label>
-    );
-    expect(toJSON()).toMatchSnapshot();
-
-    expect(queryByRole('text')).toBe(null);
-    expect(getByRole('none')).toBeDefined();
-  });
-
-  it('should apply theme and style props', () => {
-    const customStyle = { color: 'red' };
-
-    const { toJSON, getByTestId } = render(
-      <Label {...props} style={customStyle}>
-        Red Label
-      </Label>
-    );
-
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current);
-
-    expect(toJSON()).toMatchSnapshot();
-    expect(getByTestId(testID).props.style).toStrictEqual([
-      themedStyle.text,
-      themedStyle['primary'],
-      customStyle,
-    ]);
-  });
-
-  it('should apply variant styles', () => {
-    const variant = 'success';
-
-    const { toJSON, getByTestId } = render(
-      <Label {...props} variant={variant}>
-        Label
-      </Label>
-    );
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current);
-
-    expect(toJSON()).toMatchSnapshot();
-    expect(getByTestId(testID).props.style).toStrictEqual([
-      themedStyle.text,
-      themedStyle[variant],
-      undefined, // no custom styles
-    ]);
-  });
-});

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

@@ -1,91 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Label applies accessibility role 1`] = `
-<Text
-  accessibilityRole="none"
-  style={
-    Array [
-      Object {
-        "fontSize": 16,
-        "fontWeight": "400",
-        "lineHeight": 24,
-      },
-      Object {
-        "color": "hsl(210, 50%, 10%)",
-      },
-      undefined,
-    ]
-  }
-  testID="labelID"
->
-  Default Label
-</Text>
-`;
-
-exports[`Label renders a default Label 1`] = `
-<Text
-  accessibilityRole="text"
-  style={
-    Array [
-      Object {
-        "fontSize": 16,
-        "fontWeight": "400",
-        "lineHeight": 24,
-      },
-      Object {
-        "color": "hsl(210, 50%, 10%)",
-      },
-      undefined,
-    ]
-  }
-  testID="labelID"
->
-  Default Label
-</Text>
-`;
-
-exports[`Label should apply theme and style props 1`] = `
-<Text
-  accessibilityRole="text"
-  style={
-    Array [
-      Object {
-        "fontSize": 16,
-        "fontWeight": "400",
-        "lineHeight": 24,
-      },
-      Object {
-        "color": "hsl(210, 50%, 10%)",
-      },
-      Object {
-        "color": "red",
-      },
-    ]
-  }
-  testID="labelID"
->
-  Red Label
-</Text>
-`;
-
-exports[`Label should apply variant styles 1`] = `
-<Text
-  accessibilityRole="text"
-  style={
-    Array [
-      Object {
-        "fontSize": 16,
-        "fontWeight": "400",
-        "lineHeight": 24,
-      },
-      Object {
-        "color": "hsl(130, 27%, 29%)",
-      },
-      undefined,
-    ]
-  }
-  testID="labelID"
->
-  Label
-</Text>
-`;

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

@@ -1,110 +0,0 @@
-import React from 'react';
-import { fireEvent, render, renderHook } from '@testing-library/react-native';
-
-import { icons } from '../../../assets';
-import { useTheme } from '../../../theme';
-import PasswordField from '../PasswordField';
-import { getThemedStyles } from '../styles';
-import { TEXTFIELD_CONTAINER_TEST_ID } from '../../TextField/TextField';
-
-const labelText = 'Label';
-const testID = 'passwordInput';
-const defaultProps = {
-  testID,
-  label: labelText,
-};
-
-describe('PasswordField', () => {
-  it('renders as expected', async () => {
-    const { toJSON, findAllByRole, getByTestId, getByText, getByRole } = render(
-      <PasswordField {...defaultProps} />
-    );
-    expect(toJSON()).toMatchSnapshot();
-
-    expect(await findAllByRole('text')).toHaveLength(1);
-    const textInput = getByTestId(testID);
-    expect(textInput.props.editable).toBe(true);
-    expect(textInput.props.secureTextEntry).toBe(true);
-    expect(textInput.props.accessible).toBe(true);
-    const image = getByRole('image');
-    expect(image.props.source).toBe(icons.visibilityOff);
-    const label = getByText(labelText);
-    expect(label).not.toBeNull();
-  });
-
-  it('toggles visibility', () => {
-    const { getByRole, getByTestId } = render(
-      <PasswordField {...defaultProps} />
-    );
-
-    const icon = getByRole('image');
-    const textInput = getByTestId(testID);
-
-    expect(icon.props.source).toBe(icons.visibilityOff);
-    expect(textInput.props.secureTextEntry).toBe(true);
-    fireEvent.press(icon);
-    expect(icon.props.source).toBe(icons.visibilityOn);
-    expect(textInput.props.secureTextEntry).toBe(false);
-  });
-
-  it('should be able to hide show password icon', () => {
-    const { toJSON, queryByRole } = render(
-      <PasswordField {...defaultProps} showPasswordButton={false} />
-    );
-    expect(toJSON()).toMatchSnapshot();
-    const icon = queryByRole('button');
-    expect(icon).toBe(null);
-  });
-
-  it('should be able to obscure text programmatically', () => {
-    const { toJSON, getByTestId } = render(
-      <PasswordField {...defaultProps} secureTextEntry={false} />
-    );
-    expect(toJSON()).toMatchSnapshot();
-
-    const textInput = getByTestId(testID);
-    expect(textInput.props.secureTextEntry).toBe(false);
-  });
-
-  it('renders as expected when disabled', () => {
-    const { toJSON, getByTestId, getByRole } = render(
-      <PasswordField {...defaultProps} disabled />
-    );
-    expect(toJSON()).toMatchSnapshot();
-    const textInput = getByTestId(testID);
-    expect(textInput.props.editable).toBe(false);
-    const icon = getByRole('button');
-    expect(icon.props.accessibilityState).toHaveProperty('disabled', true);
-  });
-
-  it('applies theme and style props', () => {
-    const customStyle = { backgroundColor: 'red' };
-    const customIconStyle = { backgroundColor: 'blue' };
-
-    const { toJSON, getByRole, getByTestId } = render(
-      <PasswordField
-        {...defaultProps}
-        iconStyle={customIconStyle}
-        style={customStyle}
-      />
-    );
-
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current);
-
-    const container = getByTestId(TEXTFIELD_CONTAINER_TEST_ID);
-    const icon = getByRole('image');
-
-    expect(container.props.style).toContainEqual([
-      themedStyle.container,
-      customStyle,
-    ]);
-
-    expect(icon.props.style).toContainEqual([
-      themedStyle.icon,
-      customIconStyle,
-    ]);
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});