Add `data-test-id` prop to `TextField` component (#13973)

The `data-test-id` prop has been added to `TextField`. This prop allows
selecting this component more easily from e2e and unit tests. This is
required for a subsequent PR that includes a text field that cannot be
selected for by placeholder or contents or label (any of which would
have been preferable).
feature/default_network_editable
Mark Stacey 3 years ago committed by GitHub
parent cd28e64539
commit c7fabbff87
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 8
      ui/components/ui/text-field/text-field.component.js
  2. 2
      ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap

@ -204,6 +204,7 @@ const themeToInputProps = {
}; };
const TextField = ({ const TextField = ({
'data-testid': dataTestId,
error, error,
classes, classes,
theme, theme,
@ -228,7 +229,7 @@ const TextField = ({
autoComplete, autoComplete,
}); });
if (onPaste) { if (onPaste || dataTestId) {
if (!inputProps.InputProps) { if (!inputProps.InputProps) {
inputProps.InputProps = {}; inputProps.InputProps = {};
} }
@ -236,6 +237,7 @@ const TextField = ({
inputProps.InputProps.inputProps = {}; inputProps.InputProps.inputProps = {};
} }
inputProps.InputProps.inputProps.onPaste = onPaste; inputProps.InputProps.inputProps.onPaste = onPaste;
inputProps.InputProps.inputProps['data-testid'] = dataTestId;
} }
return ( return (
@ -255,6 +257,10 @@ TextField.defaultProps = {
}; };
TextField.propTypes = { TextField.propTypes = {
/**
* A test ID that gets set on the input element
*/
'data-testid': PropTypes.string,
/** /**
* Show error message * Show error message
*/ */

@ -3,7 +3,6 @@
exports[`SearchableItemList renders the component with initial props 1`] = ` exports[`SearchableItemList renders the component with initial props 1`] = `
<div <div
class="MuiFormControl-root MuiTextField-root searchable-item-list__search MuiFormControl-fullWidth" class="MuiFormControl-root MuiTextField-root searchable-item-list__search MuiFormControl-fullWidth"
data-testid="search-list-items"
> >
<div <div
class="MuiInputBase-root MuiInput-root TextField-inputRoot-12 MuiInputBase-fullWidth MuiInput-fullWidth Mui-focused Mui-focused TextField-inputFocused-11 MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart" class="MuiInputBase-root MuiInput-root TextField-inputRoot-12 MuiInputBase-fullWidth MuiInput-fullWidth Mui-focused Mui-focused TextField-inputFocused-11 MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
@ -23,6 +22,7 @@ exports[`SearchableItemList renders the component with initial props 1`] = `
aria-invalid="false" aria-invalid="false"
autocomplete="off" autocomplete="off"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart" class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart"
data-testid="search-list-items"
dir="auto" dir="auto"
type="text" type="text"
value="" value=""

Loading…
Cancel
Save