Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[]DS-979] refactor: make data-testid configurable in Input #861

Merged
merged 5 commits into from
Jan 17, 2025
Merged

[]DS-979] refactor: make data-testid configurable in Input #861

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e6aaf5a
refactor: make data-testid configurable in Input
matheus-wh Jan 13, 2025
8b79b95
refactor: make data-testid configurable in Snackbar
matheus-wh Jan 13, 2025
cb484fb
Update testID on native input component
matheus-wh Jan 16, 2025
252e223
Update data-testid on web input component
matheus-wh Jan 16, 2025
b114938
Update snapshots
matheus-wh Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions packages/yoga/src/AutoComplete/web/__snapshots__/AutoComplete.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,6 @@ exports[`<AutoComplete /> Snapshots should match with a full width component 1`]
aria-labelledby="downshift-1-label"
autocomplete="off"
class="c3"
data-testid="input"
id="downshift-1-input"
value=""
/>
Expand Down Expand Up @@ -426,7 +425,6 @@ exports[`<AutoComplete /> Snapshots should match with default component 1`] = `
aria-labelledby="downshift-0-label"
autocomplete="off"
class="c3"
data-testid="input"
id="downshift-0-input"
value=""
/>
Expand Down Expand Up @@ -762,7 +760,6 @@ exports[`<AutoComplete /> Snapshots should match with full width options list 1`
aria-labelledby="downshift-3-label"
autocomplete="off"
class="c3"
data-testid="input"
id="downshift-3-input"
value="s"
/>
Expand Down Expand Up @@ -1143,7 +1140,6 @@ exports[`<AutoComplete /> Snapshots should match with options list 1`] = `
aria-labelledby="downshift-2-label"
autocomplete="off"
class="c3"
data-testid="input"
id="downshift-2-input"
value="s"
/>
Expand Down
5 changes: 0 additions & 5 deletions packages/yoga/src/Dropdown/web/__snapshots__/Dropdown.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,6 @@ exports[`<Dropdown /> should match snapshot 1`] = `
aria-labelledby="downshift-0-label"
autocomplete="off"
class="c4 c5"
data-testid="input"
id="downshift-0-input"
label="Find an activity to love"
readonly=""
Expand Down Expand Up @@ -552,7 +551,6 @@ exports[`<Dropdown /> should match snapshot when disabled 1`] = `
aria-labelledby="downshift-1-label"
autocomplete="off"
class="c3 c4"
data-testid="input"
disabled=""
id="downshift-1-input"
label="Find an activity to love"
Expand Down Expand Up @@ -852,7 +850,6 @@ exports[`<Dropdown /> should match snapshot when full 1`] = `
aria-labelledby="downshift-2-label"
autocomplete="off"
class="c4 c5"
data-testid="input"
id="downshift-2-input"
label="Find an activity to love"
readonly=""
Expand Down Expand Up @@ -1171,7 +1168,6 @@ exports[`<Dropdown /> should match snapshot when has a selected value 1`] = `
aria-labelledby="downshift-3-label"
autocomplete="off"
class="c3 c4"
data-testid="input"
disabled=""
id="downshift-3-input"
label="Find an activity to love"
Expand Down Expand Up @@ -1539,7 +1535,6 @@ exports[`<Dropdown /> should match snapshot with error 1`] = `
aria-labelledby="downshift-4-label"
autocomplete="off"
class="c4 c5"
data-testid="input"
id="downshift-4-input"
label="Find an activity to love"
readonly=""
Expand Down
28 changes: 16 additions & 12 deletions packages/yoga/src/Input/native/Input.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,11 @@ describe('<Input />', () => {
it('should match when input is focused', () => {
const { toJSON, getByTestId } = render(
<ThemeProvider>
<Input label="Input" testID="input" />
<Input label="Input" testID="input-test" />
</ThemeProvider>,
);

fireEvent(getByTestId('input'), 'focus');
fireEvent(getByTestId('input-test'), 'focus');

expect(toJSON()).toMatchSnapshot();
});
Expand Down Expand Up @@ -93,11 +93,15 @@ describe('<Input />', () => {
const onChangeTextMock = jest.fn();
const { getByTestId } = render(
<ThemeProvider>
<Input label="Input" testID="input" onChangeText={onChangeTextMock} />
<Input
label="Input"
testID="input-test"
onChangeText={onChangeTextMock}
/>
</ThemeProvider>,
);

fireEvent.changeText(getByTestId('input'), 'foo');
fireEvent.changeText(getByTestId('input-test'), 'foo');

expect(onChangeTextMock).toHaveBeenCalled();
});
Expand All @@ -108,14 +112,14 @@ describe('<Input />', () => {
<ThemeProvider>
<Input
label="Input"
testID="input"
testID="input-test"
onChangeText={onChangeTextMock}
disabled
/>
</ThemeProvider>,
);

fireEvent(getByTestId('input'), 'focus');
fireEvent(getByTestId('input-test'), 'focus');

expect(onChangeTextMock).not.toHaveBeenCalled();
});
Expand All @@ -124,11 +128,11 @@ describe('<Input />', () => {
const onFocusMock = jest.fn();
const { getByTestId } = render(
<ThemeProvider>
<Input label="Input" testID="input" onFocus={onFocusMock} />
<Input label="Input" testID="input-test" onFocus={onFocusMock} />
</ThemeProvider>,
);

fireEvent(getByTestId('input'), 'focus');
fireEvent(getByTestId('input-test'), 'focus');

expect(onFocusMock).toHaveBeenCalled();
});
Expand All @@ -138,12 +142,12 @@ describe('<Input />', () => {

const { getByTestId } = render(
<ThemeProvider>
<Input label="Input" testID="input" onBlur={onBlurMock} />
<Input label="Input" testID="input-test" onBlur={onBlurMock} />
</ThemeProvider>,
);

fireEvent(getByTestId('input'), 'focus');
fireEvent(getByTestId('input'), 'blur');
fireEvent(getByTestId('input-test'), 'focus');
fireEvent(getByTestId('input-test'), 'blur');

expect(onBlurMock).toHaveBeenCalled();
});
Expand All @@ -153,7 +157,7 @@ describe('<Input />', () => {
it('should update maxLength counter when add character', () => {
const { getByText, rerender } = render(
<ThemeProvider>
<Input label="Input" testID="input" maxLength={10} />
<Input label="Input" maxLength={10} />
</ThemeProvider>,
);

Expand Down
2 changes: 1 addition & 1 deletion packages/yoga/src/Input/native/__snapshots__/Input.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ exports[`<Input /> Snapshots should match when input is focused 1`] = `
},
]
}
testID="input"
testID="input-test"
typed={false}
value=""
/>
Expand Down
1 change: 0 additions & 1 deletion packages/yoga/src/Input/web/Input.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,6 @@ const Input = React.forwardRef(
maxLength,
}}
ref={inputRef}
data-testid="input"
value={value}
onChange={onChange}
{...a11yFieldProps}
Expand Down
37 changes: 28 additions & 9 deletions packages/yoga/src/Input/web/Input.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,16 @@ describe('<Input />', () => {

expect(container).toMatchSnapshot();
});

it('should render with custom dataTestId', () => {
render(
<ThemeProvider>
<Input label="Input" data-testid="custom-input" />
</ThemeProvider>,
);

expect(screen.getByTestId('custom-input')).toBeInTheDocument();
});
});

describe('Events', () => {
Expand All @@ -112,11 +122,15 @@ describe('<Input />', () => {

render(
<ThemeProvider>
<Input label="Input" onChange={onChangeMock} data-testid="input" />
<Input
label="Input"
onChange={onChangeMock}
data-testid="input-test"
/>
</ThemeProvider>,
);

fireEvent.change(screen.getByTestId('input'), {
fireEvent.change(screen.getByTestId('input-test'), {
target: { value: 'foo' },
});

Expand All @@ -142,12 +156,12 @@ describe('<Input />', () => {

render(
<ThemeProvider>
<Input label="Input" data-testid="input" onBlur={onBlurMock} />
<Input label="Input" data-testid="input-test" onBlur={onBlurMock} />
</ThemeProvider>,
);

fireEvent.focus(screen.getByTestId('input'));
fireEvent.blur(screen.getByTestId('input'));
fireEvent.focus(screen.getByTestId('input-test'));
fireEvent.blur(screen.getByTestId('input-test'));

expect(onBlurMock).toHaveBeenCalled();
});
Expand Down Expand Up @@ -211,11 +225,16 @@ describe('<Input />', () => {
const value = 'aria label value';
const { getByTestId } = render(
<ThemeProvider>
<Input label="Input" value="foo" ariaLabel={value} />
<Input
label="Input"
value="foo"
ariaLabel={value}
data-testid="input-test"
/>
</ThemeProvider>,
);

const inputElement = getByTestId('input');
const inputElement = getByTestId('input-test');

expect(inputElement).toBeInTheDocument();

Expand All @@ -225,11 +244,11 @@ describe('<Input />', () => {
const value = 'label value';
const { getByTestId } = render(
<ThemeProvider>
<Input label={value} value="foo" />
<Input label={value} value="foo" data-testid="input-test" />
</ThemeProvider>,
);

const inputElement = getByTestId('input');
const inputElement = getByTestId('input-test');

expect(inputElement).toBeInTheDocument();

Expand Down
1 change: 0 additions & 1 deletion packages/yoga/src/Input/web/__snapshots__/Email.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,6 @@ exports[`<Input.Email /> Snapshots should match with default input 1`] = `
<input
aria-invalid="false"
class="c2"
data-testid="input"
type="email"
value=""
/>
Expand Down
10 changes: 0 additions & 10 deletions packages/yoga/src/Input/web/__snapshots__/Input.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,6 @@ exports[`<Input /> Snapshots should match with a11yId 1`] = `
aria-invalid="false"
aria-labelledby="id-label"
class="c2"
data-testid="input"
label="Label"
value=""
/>
Expand Down Expand Up @@ -436,7 +435,6 @@ exports[`<Input /> Snapshots should match with a11yId and error 1`] = `
aria-invalid="true"
aria-labelledby="id-label"
class="c2"
data-testid="input"
label="Label"
value=""
/>
Expand Down Expand Up @@ -636,7 +634,6 @@ exports[`<Input /> Snapshots should match with default input 1`] = `
<input
aria-invalid="false"
class="c2"
data-testid="input"
value=""
/>
<label
Expand Down Expand Up @@ -815,7 +812,6 @@ exports[`<Input /> Snapshots should match with disabled input 1`] = `
<input
aria-invalid="false"
class="c2"
data-testid="input"
disabled=""
value=""
/>
Expand Down Expand Up @@ -1018,7 +1014,6 @@ exports[`<Input /> Snapshots should match with error 1`] = `
<input
aria-invalid="true"
class="c2"
data-testid="input"
value=""
/>
<label
Expand Down Expand Up @@ -1232,7 +1227,6 @@ exports[`<Input /> Snapshots should match with full width 1`] = `
aria-invalid="false"
aria-label="Label"
class="c2"
data-testid="input"
label="Label"
value=""
/>
Expand Down Expand Up @@ -1445,7 +1439,6 @@ exports[`<Input /> Snapshots should match with helper text and max length 1`] =
<input
aria-invalid="false"
class="c2"
data-testid="input"
maxlength="20"
value=""
/>
Expand Down Expand Up @@ -1665,7 +1658,6 @@ exports[`<Input /> Snapshots should match with helper text, max length and hideM
<input
aria-invalid="false"
class="c2"
data-testid="input"
maxlength="20"
value=""
/>
Expand Down Expand Up @@ -1878,7 +1870,6 @@ exports[`<Input /> Snapshots should match with includeAriaAttributes set to fals
>
<input
class="c2"
data-testid="input"
label="Label"
value=""
/>
Expand Down Expand Up @@ -2094,7 +2085,6 @@ exports[`<Input /> Snapshots should match with label 1`] = `
aria-invalid="false"
aria-label="Input"
class="c2"
data-testid="input"
label="Input"
value=""
/>
Expand Down
1 change: 0 additions & 1 deletion packages/yoga/src/Input/web/__snapshots__/Number.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,6 @@ exports[`<Input.Number /> Snapshots should match with default input 1`] = `
<input
aria-invalid="false"
class="c2"
data-testid="input"
type="number"
value=""
/>
Expand Down
3 changes: 0 additions & 3 deletions packages/yoga/src/Input/web/__snapshots__/Password.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,6 @@ exports[`<Input.Password /> Snapshots should match with default input 1`] = `
<input
aria-invalid="false"
class="c3 c4"
data-testid="input"
type="password"
value=""
/>
Expand Down Expand Up @@ -428,7 +427,6 @@ exports[`<Input.Password /> Snapshots should match with disabled input 1`] = `
<input
aria-invalid="false"
class="c3 c4"
data-testid="input"
disabled=""
type="password"
value=""
Expand Down Expand Up @@ -681,7 +679,6 @@ exports[`<Input.Password /> Snapshots should match with full width 1`] = `
aria-invalid="false"
aria-label="Label"
class="c3 c4"
data-testid="input"
label="Label"
type="password"
value=""
Expand Down
Loading
Loading