Skip to content

Commit

Permalink
Use userEvent instead of fireEvent
Browse files Browse the repository at this point in the history
  • Loading branch information
@aarongarciah
aarongarciah committed Jul 11, 2024
1 parent 418afe0 commit 5adc07f
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 66 deletions.
56 changes: 25 additions & 31 deletions packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1889,27 +1889,28 @@ describe('Joy <Autocomplete />', () => {
});

describe('prop: onInputChange', () => {
it('provides a reason on input change', () => {
it('provides a reason on input change', async () => {
const handleInputChange = spy();
const options = [{ name: 'foo' }];
render(
const { user } = render(
<Autocomplete
onInputChange={handleInputChange}
options={options}
getOptionLabel={(option) => option.name}
autoFocus
/>,
);
fireEvent.change(document.activeElement as HTMLInputElement, { target: { value: 'a' } });

await user.type(document.activeElement as HTMLInputElement, 'a');

expect(handleInputChange.callCount).to.equal(1);
expect(handleInputChange.args[0][1]).to.equal('a');
expect(handleInputChange.args[0][2]).to.equal('input');
});

it('provides a reason on select reset', () => {
it('provides a reason on select reset', async () => {
const handleInputChange = spy();
const options = [{ name: 'foo' }, { name: 'bar' }];

function MyComponent() {
const [value, setValue] = React.useState(options[0]);
return (
Expand All @@ -1925,21 +1926,19 @@ describe('Joy <Autocomplete />', () => {
</React.Fragment>
);
}
render(<MyComponent />);
const resetBtn = screen.getByText('Reset');
const { user } = render(<MyComponent />);

fireEvent.click(resetBtn);
await user.click(screen.getByText('Reset'));

expect(handleInputChange.callCount).to.equal(4);
expect(handleInputChange.args[3][1]).to.equal(options[1].name);
expect(handleInputChange.args[3][2]).to.equal('reset');
});

it('provides a reason on clear', () => {
it('provides a reason on clear', async () => {
const handleInputChange = spy();
const options = [{ name: 'foo' }];

render(
const { user } = render(
<Autocomplete
onInputChange={handleInputChange}
options={options}
Expand All @@ -1948,17 +1947,17 @@ describe('Joy <Autocomplete />', () => {
autoFocus
/>,
);
fireEvent.click(screen.getByLabelText('Clear'));

await user.click(screen.getByLabelText('Clear'));

expect(handleInputChange.lastCall.args[1]).to.equal('');
expect(handleInputChange.lastCall.args[2]).to.equal('clear');
});

it('provides a reason on blur', () => {
it('provides a reason on blur', async () => {
const handleInputChange = spy();
const options = [{ name: 'foo' }];

render(
const { user } = render(
<Autocomplete
onInputChange={handleInputChange}
options={options}
Expand All @@ -1967,38 +1966,36 @@ describe('Joy <Autocomplete />', () => {
clearOnBlur
/>,
);
const textbox = screen.getByRole('combobox');
fireEvent.change(textbox, { target: { value: options[0].name } });
fireEvent.blur(textbox);
await user.type(screen.getByRole('combobox'), options[0].name);
await user.tab();

expect(handleInputChange.lastCall.args[1]).to.equal('');
expect(handleInputChange.lastCall.args[2]).to.equal('blur');
});

it('provides a reason on select option', () => {
it('provides a reason on select option', async () => {
const handleInputChange = spy();
const options = [{ name: 'foo' }];

render(
const { user } = render(
<Autocomplete
onInputChange={handleInputChange}
options={options}
getOptionLabel={(option) => option.name}
autoFocus
/>,
);
fireEvent.click(screen.getByLabelText('Open'));
fireEvent.click(screen.getByRole('option', { name: options[0].name }));

await user.click(screen.getByLabelText('Open'));
await user.click(screen.getByRole('option', { name: options[0].name }));

expect(handleInputChange.lastCall.args[1]).to.equal(options[0].name);
expect(handleInputChange.lastCall.args[2]).to.equal('selectOption');
});

it('provides a reason on remove option', () => {
it('provides a reason on remove option', async () => {
const handleInputChange = spy();
const options = [{ name: 'foo' }];

render(
const { user } = render(
<Autocomplete
onInputChange={handleInputChange}
options={options}
Expand All @@ -2008,11 +2005,8 @@ describe('Joy <Autocomplete />', () => {
multiple
/>,
);
const textbox = screen.getByRole('combobox');
fireEvent.change(textbox, { target: { value: options[0].name } });
fireEvent.keyDown(textbox, { key: 'ArrowDown' });
fireEvent.keyDown(textbox, { key: 'ArrowDown' });
fireEvent.keyDown(textbox, { key: 'Enter' });

await user.type(screen.getByRole('combobox'), `${options[0].name}{Enter}`);

expect(handleInputChange.lastCall.args[1]).to.equal('');
expect(handleInputChange.lastCall.args[2]).to.equal('removeOption');
Expand Down
66 changes: 31 additions & 35 deletions packages/mui-material/src/Autocomplete/Autocomplete.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2525,27 +2525,28 @@ describe('<Autocomplete />', () => {
});

describe('prop: onInputChange', () => {
it('provides a reason on input change', () => {
it('provides a reason on input change', async () => {
const handleInputChange = spy();
const options = [{ name: 'foo' }];
render(
const { user } = render(
<Autocomplete
onInputChange={handleInputChange}
options={options}
getOptionLabel={(option) => option.name}
renderInput={(params) => <TextField {...params} autoFocus />}
/>,
);
fireEvent.change(document.activeElement, { target: { value: 'a' } });

await user.type(document.activeElement, 'a');

expect(handleInputChange.callCount).to.equal(1);
expect(handleInputChange.args[0][1]).to.equal('a');
expect(handleInputChange.args[0][2]).to.equal('input');
});

it('provides a reason on select reset', () => {
it('provides a reason on select reset', async () => {
const handleInputChange = spy();
const options = [{ name: 'foo' }, { name: 'bar' }];

function MyComponent() {
const [value, setValue] = React.useState(options[0]);
return (
Expand All @@ -2558,25 +2559,24 @@ describe('<Autocomplete />', () => {
renderInput={(params) => <TextField {...params} autoFocus />}
value={value}
/>
<button onClick={() => setValue(options[1])}>Reset</button>
<button onClick={() => setValue(options[1])} type="button">
Reset
</button>
</React.Fragment>
);
}
render(<MyComponent />);
const resetBtn = screen.getByText('Reset');
const { user } = render(<MyComponent />);

fireEvent.click(resetBtn);
await user.click(screen.getByText('Reset'));

expect(handleInputChange.callCount).to.equal(3);
expect(handleInputChange.args[2][1]).to.equal(options[1].name);
expect(handleInputChange.args[2][2]).to.equal('reset');
expect(handleInputChange.lastCall.args[1]).to.equal(options[1].name);
expect(handleInputChange.lastCall.args[2]).to.equal('reset');
});

it('provides a reason on clear', () => {
it('provides a reason on clear', async () => {
const handleInputChange = spy();
const options = [{ name: 'foo' }];

render(
const { user } = render(
<Autocomplete
onInputChange={handleInputChange}
options={options}
Expand All @@ -2585,17 +2585,17 @@ describe('<Autocomplete />', () => {
defaultValue={options[0]}
/>,
);
fireEvent.click(screen.getByLabelText('Clear'));

await user.click(screen.getByLabelText('Clear'));

expect(handleInputChange.lastCall.args[1]).to.equal('');
expect(handleInputChange.lastCall.args[2]).to.equal('clear');
});

it('provides a reason on blur', () => {
it('provides a reason on blur', async () => {
const handleInputChange = spy();
const options = [{ name: 'foo' }];

render(
const { user } = render(
<Autocomplete
onInputChange={handleInputChange}
options={options}
Expand All @@ -2604,38 +2604,37 @@ describe('<Autocomplete />', () => {
clearOnBlur
/>,
);
const textbox = screen.getByRole('combobox');
fireEvent.change(textbox, { target: { value: options[0].name } });
fireEvent.blur(textbox);

await user.type(screen.getByRole('combobox'), options[0].name);
await user.tab();

expect(handleInputChange.lastCall.args[1]).to.equal('');
expect(handleInputChange.lastCall.args[2]).to.equal('blur');
});

it('provides a reason on select option', () => {
it('provides a reason on select option', async () => {
const handleInputChange = spy();
const options = [{ name: 'foo' }];

render(
const { user } = render(
<Autocomplete
onInputChange={handleInputChange}
options={options}
getOptionLabel={(option) => option.name}
renderInput={(params) => <TextField {...params} autoFocus />}
/>,
);
fireEvent.click(screen.getByLabelText('Open'));
fireEvent.click(screen.getByRole('option', { name: options[0].name }));

await user.click(screen.getByLabelText('Open'));
await user.click(screen.getByRole('option', { name: options[0].name }));

expect(handleInputChange.lastCall.args[1]).to.equal(options[0].name);
expect(handleInputChange.lastCall.args[2]).to.equal('selectOption');
});

it('provides a reason on remove option', () => {
it('provides a reason on remove option', async () => {
const handleInputChange = spy();
const options = [{ name: 'foo' }];

render(
const { user } = render(
<Autocomplete
onInputChange={handleInputChange}
options={options}
Expand All @@ -2645,11 +2644,8 @@ describe('<Autocomplete />', () => {
multiple
/>,
);
const textbox = screen.getByRole('combobox');
fireEvent.change(textbox, { target: { value: options[0].name } });
fireEvent.keyDown(textbox, { key: 'ArrowDown' });
fireEvent.keyDown(textbox, { key: 'ArrowDown' });
fireEvent.keyDown(textbox, { key: 'Enter' });

await user.type(screen.getByRole('combobox'), `${options[0].name}{Enter}`);

expect(handleInputChange.lastCall.args[1]).to.equal('');
expect(handleInputChange.lastCall.args[2]).to.equal('removeOption');
Expand Down

0 comments on commit 5adc07f

Please sign in to comment.