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

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

@@ -1,202 +0,0 @@
-import React from 'react';
-import { fireEvent, render, renderHook } from '@testing-library/react-native';
-
-import { useTheme } from '../../../theme';
-import { getThemedStyles } from '../styles';
-import TextField, {
-  INPUT_CONTAINER_TEST_ID,
-  TEXTFIELD_CONTAINER_TEST_ID,
-} from '../TextField';
-
-const placeHolderText = 'Placeholder';
-const labelText = 'Label';
-const testID = 'textInput';
-const defaultProps = {
-  testID: testID,
-  label: labelText,
-  placeholder: placeHolderText,
-};
-
-const onChangeText = jest.fn();
-
-describe('TextField', () => {
-  it('renders as expected', async () => {
-    const { toJSON, findAllByRole, getByTestId, getByText } = render(
-      <TextField {...defaultProps} />
-    );
-    expect(toJSON()).toMatchSnapshot();
-
-    expect(await findAllByRole('text')).toHaveLength(1);
-    const textInput = getByTestId(testID);
-    expect(textInput.props.editable).toBe(true);
-    expect(textInput.props.secureTextEntry).toBeUndefined();
-    expect(textInput.props.accessible).toBe(true);
-    expect(textInput.props.autoCapitalize).toBe('none');
-    const label = getByText(labelText);
-    expect(label).not.toBeNull();
-  });
-
-  it('renders as expected when disabled', () => {
-    const { toJSON, getByTestId } = render(
-      <TextField {...defaultProps} disabled />
-    );
-    expect(toJSON()).toMatchSnapshot();
-    const textInput = getByTestId(testID);
-    expect(textInput.props.accessibilityState).toHaveProperty('disabled', true);
-
-    expect(textInput.props.editable).toBe(false);
-  });
-
-  it('renders as expected with error message', async () => {
-    const message = 'Error message';
-    const { toJSON, findAllByRole, getByText } = render(
-      <TextField {...defaultProps} error errorMessage={message} />
-    );
-    expect(toJSON()).toMatchSnapshot();
-
-    expect(await findAllByRole('text')).toHaveLength(2);
-    expect(getByText(message)).not.toBeNull();
-  });
-
-  it(`doesn't render the errorMessage if error prop is false`, () => {
-    const message = 'Error message';
-    const { toJSON, queryByText } = render(
-      <TextField {...defaultProps} errorMessage={message} />
-    );
-    expect(toJSON()).toMatchSnapshot();
-    expect(queryByText(message)).toBeNull();
-  });
-
-  it(`shows error style, but doesn't render the errorMessage if errorMessage prop is undefined`, () => {
-    const message = 'Error message';
-    const { toJSON, queryByText } = render(
-      <TextField {...defaultProps} error />
-    );
-    expect(toJSON()).toMatchSnapshot();
-    expect(queryByText(message)).toBeNull();
-  });
-
-  it('renders as expected as password field', async () => {
-    const { toJSON, findAllByRole, getByTestId } = render(
-      <TextField {...defaultProps} secureTextEntry />
-    );
-    expect(toJSON()).toMatchSnapshot();
-
-    expect(await findAllByRole('text')).toHaveLength(1);
-    const textInput = getByTestId(testID);
-    expect(textInput.props.secureTextEntry).toBe(true);
-  });
-
-  it('renders disabled state correctly', () => {
-    const { getByTestId } = render(
-      <TextField
-        {...defaultProps}
-        disabled
-        onChangeText={onChangeText}
-        accessibilityRole="none"
-      />
-    );
-    const textInput = getByTestId(testID);
-    fireEvent.press(textInput);
-    expect(onChangeText).not.toHaveBeenCalled();
-
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current);
-
-    const inputContainer = getByTestId(INPUT_CONTAINER_TEST_ID);
-    expect(inputContainer.props.style).toStrictEqual({
-      ...themedStyle.fieldContainer,
-      ...themedStyle.disabled,
-    });
-  });
-
-  it('applies theme and style props', () => {
-    const customFieldStyle = { color: 'orange' };
-    const customLabelStyle = { color: 'blue' };
-    const customStyle = { backgroundColor: 'purple' };
-
-    const { getByTestId } = render(
-      <TextField
-        {...defaultProps}
-        fieldStyle={customFieldStyle}
-        labelStyle={customLabelStyle}
-        style={customStyle}
-      />
-    );
-
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current);
-
-    const container = getByTestId(TEXTFIELD_CONTAINER_TEST_ID);
-    const inputContainer = getByTestId(INPUT_CONTAINER_TEST_ID);
-    const input = getByTestId(testID);
-
-    expect(container.props.style).toStrictEqual([
-      themedStyle.container,
-      customStyle,
-    ]);
-    expect(inputContainer.props.style).toStrictEqual(
-      themedStyle.fieldContainer
-    );
-    expect(input.props.style).toStrictEqual([
-      themedStyle.field,
-      customFieldStyle,
-    ]);
-  });
-
-  it('applies theme and style props with error', () => {
-    const errorMessageText = 'Error!';
-    const customErrorMessageStyle = { color: 'red' };
-    const customStyle = { backgroundColor: 'purple' };
-
-    const { getByTestId, getByText } = render(
-      <TextField
-        {...defaultProps}
-        style={customStyle}
-        error
-        errorMessage={errorMessageText}
-        errorMessageStyle={customErrorMessageStyle}
-      />
-    );
-
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current);
-
-    const container = getByTestId(TEXTFIELD_CONTAINER_TEST_ID);
-    const inputContainer = getByTestId(INPUT_CONTAINER_TEST_ID);
-    const errorMessage = getByText(errorMessageText);
-
-    expect(container.props.style).toStrictEqual([
-      themedStyle.container,
-      customStyle,
-    ]);
-    expect(inputContainer.props.style).toStrictEqual({
-      ...themedStyle.fieldContainer,
-      ...themedStyle.error,
-    });
-    expect(errorMessage.props.style).toContain(customErrorMessageStyle);
-  });
-
-  it('applies theme and style props for disabled', () => {
-    const customStyle = { backgroundColor: 'purple' };
-
-    const { getByTestId } = render(
-      <TextField {...defaultProps} style={customStyle} disabled />
-    );
-
-    const { result } = renderHook(() => useTheme());
-    const themedStyle = getThemedStyles(result.current);
-
-    const container = getByTestId(TEXTFIELD_CONTAINER_TEST_ID);
-    const inputContainer = getByTestId(INPUT_CONTAINER_TEST_ID);
-
-    expect(container.props.style).toStrictEqual([
-      themedStyle.container,
-      customStyle,
-    ]);
-    expect(inputContainer.props.style).toStrictEqual({
-      ...themedStyle.fieldContainer,
-      ...themedStyle.disabled,
-    });
-  });
-});

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

@@ -1,507 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TextField doesn't render the errorMessage if error prop is false 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "alignItems": "flex-start",
-        "marginBottom": 8,
-      },
-      undefined,
-    ]
-  }
-  testID="amplify__text-field-container"
->
-  <Text
-    accessibilityLabel="Label"
-    accessibilityRole="text"
-    style={
-      Array [
-        Object {
-          "fontSize": 16,
-          "fontWeight": "400",
-          "lineHeight": 24,
-        },
-        Object {
-          "color": "hsl(210, 50%, 10%)",
-        },
-        Array [
-          Object {
-            "color": "hsl(210, 25%, 25%)",
-            "paddingVertical": 8,
-          },
-          undefined,
-        ],
-      ]
-    }
-  >
-    Label
-  </Text>
-  <View
-    accessible={true}
-    style={
-      Object {
-        "alignItems": "center",
-        "borderColor": "hsl(210, 10%, 58%)",
-        "borderRadius": 4,
-        "borderWidth": 1,
-        "flexDirection": "row",
-        "paddingHorizontal": 8,
-      }
-    }
-    testID="amplify__text-field__input-container"
-  >
-    <TextInput
-      accessibilityState={
-        Object {
-          "disabled": undefined,
-        }
-      }
-      accessible={true}
-      autoCapitalize="none"
-      editable={true}
-      placeholder="Placeholder"
-      placeholderTextColor="hsl(210, 10%, 40%)"
-      style={
-        Array [
-          Object {
-            "color": "hsl(210, 50%, 10%)",
-            "flexGrow": 1,
-            "fontSize": 16,
-            "paddingHorizontal": 4,
-            "paddingVertical": 12,
-          },
-          undefined,
-        ]
-      }
-      testID="textInput"
-    />
-  </View>
-</View>
-`;
-
-exports[`TextField renders as expected 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "alignItems": "flex-start",
-        "marginBottom": 8,
-      },
-      undefined,
-    ]
-  }
-  testID="amplify__text-field-container"
->
-  <Text
-    accessibilityLabel="Label"
-    accessibilityRole="text"
-    style={
-      Array [
-        Object {
-          "fontSize": 16,
-          "fontWeight": "400",
-          "lineHeight": 24,
-        },
-        Object {
-          "color": "hsl(210, 50%, 10%)",
-        },
-        Array [
-          Object {
-            "color": "hsl(210, 25%, 25%)",
-            "paddingVertical": 8,
-          },
-          undefined,
-        ],
-      ]
-    }
-  >
-    Label
-  </Text>
-  <View
-    accessible={true}
-    style={
-      Object {
-        "alignItems": "center",
-        "borderColor": "hsl(210, 10%, 58%)",
-        "borderRadius": 4,
-        "borderWidth": 1,
-        "flexDirection": "row",
-        "paddingHorizontal": 8,
-      }
-    }
-    testID="amplify__text-field__input-container"
-  >
-    <TextInput
-      accessibilityState={
-        Object {
-          "disabled": undefined,
-        }
-      }
-      accessible={true}
-      autoCapitalize="none"
-      editable={true}
-      placeholder="Placeholder"
-      placeholderTextColor="hsl(210, 10%, 40%)"
-      style={
-        Array [
-          Object {
-            "color": "hsl(210, 50%, 10%)",
-            "flexGrow": 1,
-            "fontSize": 16,
-            "paddingHorizontal": 4,
-            "paddingVertical": 12,
-          },
-          undefined,
-        ]
-      }
-      testID="textInput"
-    />
-  </View>
-</View>
-`;
-
-exports[`TextField renders as expected as password field 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "alignItems": "flex-start",
-        "marginBottom": 8,
-      },
-      undefined,
-    ]
-  }
-  testID="amplify__text-field-container"
->
-  <Text
-    accessibilityLabel="Label"
-    accessibilityRole="text"
-    style={
-      Array [
-        Object {
-          "fontSize": 16,
-          "fontWeight": "400",
-          "lineHeight": 24,
-        },
-        Object {
-          "color": "hsl(210, 50%, 10%)",
-        },
-        Array [
-          Object {
-            "color": "hsl(210, 25%, 25%)",
-            "paddingVertical": 8,
-          },
-          undefined,
-        ],
-      ]
-    }
-  >
-    Label
-  </Text>
-  <View
-    accessible={true}
-    style={
-      Object {
-        "alignItems": "center",
-        "borderColor": "hsl(210, 10%, 58%)",
-        "borderRadius": 4,
-        "borderWidth": 1,
-        "flexDirection": "row",
-        "paddingHorizontal": 8,
-      }
-    }
-    testID="amplify__text-field__input-container"
-  >
-    <TextInput
-      accessibilityState={
-        Object {
-          "disabled": undefined,
-        }
-      }
-      accessible={true}
-      autoCapitalize="none"
-      editable={true}
-      placeholder="Placeholder"
-      placeholderTextColor="hsl(210, 10%, 40%)"
-      secureTextEntry={true}
-      style={
-        Array [
-          Object {
-            "color": "hsl(210, 50%, 10%)",
-            "flexGrow": 1,
-            "fontSize": 16,
-            "paddingHorizontal": 4,
-            "paddingVertical": 12,
-          },
-          undefined,
-        ]
-      }
-      testID="textInput"
-    />
-  </View>
-</View>
-`;
-
-exports[`TextField renders as expected when disabled 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "alignItems": "flex-start",
-        "marginBottom": 8,
-      },
-      undefined,
-    ]
-  }
-  testID="amplify__text-field-container"
->
-  <Text
-    accessibilityLabel="Label"
-    accessibilityRole="text"
-    style={
-      Array [
-        Object {
-          "fontSize": 16,
-          "fontWeight": "400",
-          "lineHeight": 24,
-        },
-        Object {
-          "color": "hsl(210, 50%, 10%)",
-        },
-        Array [
-          Object {
-            "color": "hsl(210, 25%, 25%)",
-            "paddingVertical": 8,
-          },
-          undefined,
-        ],
-      ]
-    }
-  >
-    Label
-  </Text>
-  <View
-    accessible={true}
-    style={
-      Object {
-        "alignItems": "center",
-        "borderColor": "hsl(210, 10%, 58%)",
-        "borderRadius": 4,
-        "borderWidth": 1,
-        "flexDirection": "row",
-        "opacity": 0.6,
-        "paddingHorizontal": 8,
-      }
-    }
-    testID="amplify__text-field__input-container"
-  >
-    <TextInput
-      accessibilityState={
-        Object {
-          "disabled": true,
-        }
-      }
-      accessible={true}
-      autoCapitalize="none"
-      editable={false}
-      placeholder="Placeholder"
-      placeholderTextColor="hsl(210, 10%, 40%)"
-      style={
-        Array [
-          Object {
-            "color": "hsl(210, 50%, 10%)",
-            "flexGrow": 1,
-            "fontSize": 16,
-            "paddingHorizontal": 4,
-            "paddingVertical": 12,
-          },
-          undefined,
-        ]
-      }
-      testID="textInput"
-    />
-  </View>
-</View>
-`;
-
-exports[`TextField renders as expected with error message 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "alignItems": "flex-start",
-        "marginBottom": 8,
-      },
-      undefined,
-    ]
-  }
-  testID="amplify__text-field-container"
->
-  <Text
-    accessibilityLabel="Label"
-    accessibilityRole="text"
-    style={
-      Array [
-        Object {
-          "fontSize": 16,
-          "fontWeight": "400",
-          "lineHeight": 24,
-        },
-        Object {
-          "color": "hsl(210, 50%, 10%)",
-        },
-        Array [
-          Object {
-            "color": "hsl(210, 25%, 25%)",
-            "paddingVertical": 8,
-          },
-          undefined,
-        ],
-      ]
-    }
-  >
-    Label
-  </Text>
-  <View
-    accessible={true}
-    style={
-      Object {
-        "alignItems": "center",
-        "borderColor": "hsl(0, 95%, 30%)",
-        "borderRadius": 4,
-        "borderWidth": 1,
-        "flexDirection": "row",
-        "paddingHorizontal": 8,
-      }
-    }
-    testID="amplify__text-field__input-container"
-  >
-    <TextInput
-      accessibilityState={
-        Object {
-          "disabled": undefined,
-        }
-      }
-      accessible={true}
-      autoCapitalize="none"
-      editable={true}
-      placeholder="Placeholder"
-      placeholderTextColor="hsl(210, 10%, 40%)"
-      style={
-        Array [
-          Object {
-            "color": "hsl(210, 50%, 10%)",
-            "flexGrow": 1,
-            "fontSize": 16,
-            "paddingHorizontal": 4,
-            "paddingVertical": 12,
-          },
-          undefined,
-        ]
-      }
-      testID="textInput"
-    />
-  </View>
-  <Text
-    accessibilityRole="text"
-    style={
-      Array [
-        Object {
-          "fontSize": 16,
-          "fontWeight": "400",
-          "lineHeight": 24,
-        },
-        Object {
-          "color": "hsl(210, 50%, 10%)",
-        },
-        undefined,
-      ]
-    }
-  >
-    Error message
-  </Text>
-</View>
-`;
-
-exports[`TextField shows error style, but doesn't render the errorMessage if errorMessage prop is undefined 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "alignItems": "flex-start",
-        "marginBottom": 8,
-      },
-      undefined,
-    ]
-  }
-  testID="amplify__text-field-container"
->
-  <Text
-    accessibilityLabel="Label"
-    accessibilityRole="text"
-    style={
-      Array [
-        Object {
-          "fontSize": 16,
-          "fontWeight": "400",
-          "lineHeight": 24,
-        },
-        Object {
-          "color": "hsl(210, 50%, 10%)",
-        },
-        Array [
-          Object {
-            "color": "hsl(210, 25%, 25%)",
-            "paddingVertical": 8,
-          },
-          undefined,
-        ],
-      ]
-    }
-  >
-    Label
-  </Text>
-  <View
-    accessible={true}
-    style={
-      Object {
-        "alignItems": "center",
-        "borderColor": "hsl(0, 95%, 30%)",
-        "borderRadius": 4,
-        "borderWidth": 1,
-        "flexDirection": "row",
-        "paddingHorizontal": 8,
-      }
-    }
-    testID="amplify__text-field__input-container"
-  >
-    <TextInput
-      accessibilityState={
-        Object {
-          "disabled": undefined,
-        }
-      }
-      accessible={true}
-      autoCapitalize="none"
-      editable={true}
-      placeholder="Placeholder"
-      placeholderTextColor="hsl(210, 10%, 40%)"
-      style={
-        Array [
-          Object {
-            "color": "hsl(210, 50%, 10%)",
-            "flexGrow": 1,
-            "fontSize": 16,
-            "paddingHorizontal": 4,
-            "paddingVertical": 12,
-          },
-          undefined,
-        ]
-      }
-      testID="textInput"
-    />
-  </View>
-</View>
-`;