Skip to content

Commit

Permalink
[test] Revert to using fireEvent instead of userEvent (#14927)
Browse files Browse the repository at this point in the history 
Co-authored-by: Andrew Cherniavskyi <[email protected]>
  • Loading branch information
@LukasTy @cherniavskii
LukasTy and cherniavskii authored Oct 17, 2024
1 parent c54b77c commit 6a5545e
Show file tree
Hide file tree
Showing 9 changed files with 215 additions and 261 deletions.
5 changes: 2 additions & 3 deletions packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,16 +228,15 @@ describe('<DataGrid /> - Row selection', () => {
expect(getRow(0).querySelector('input')).to.have.property('checked', false);
});

it('should set focus on the cell when clicking the checkbox', () => {
it('should set focus on the cell when clicking the checkbox', async () => {
render(<TestDataGridSelection checkboxSelection />);
expect(getActiveCell()).to.equal(null);

// simulate click
const checkboxInput = getCell(0, 0).querySelector('input');

fireUserEvent.mousePress(checkboxInput!);

expect(getActiveCell()).to.equal('0-0');
await waitFor(() => expect(getActiveCell()).to.equal('0-0'));
});

it('should select all visible rows regardless of pagination', () => {
Expand Down
125 changes: 38 additions & 87 deletions packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { DateRange } from '@mui/x-date-pickers-pro/models';
import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';

describe('<MobileDateRangePicker />', () => {
const { render } = createPickerRenderer();
const { render } = createPickerRenderer({ clock: 'fake' });

describe('Field slot: SingleInputDateRangeField', () => {
it('should render the input with a given `name` when `SingleInputDateRangeField` is used', () => {
Expand All @@ -36,43 +36,29 @@ describe('<MobileDateRangePicker />', () => {
});

describe('picker state', () => {
it('should open when focusing the start input', async () => {
it('should open when focusing the start input', () => {
const onOpen = spy();

const { user } = render(
<MobileDateRangePicker enableAccessibleFieldDOMStructure onOpen={onOpen} />,
);
render(<MobileDateRangePicker enableAccessibleFieldDOMStructure onOpen={onOpen} />);

await openPicker({
type: 'date-range',
variant: 'mobile',
initialFocus: 'start',
click: user.click,
});
openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' });

expect(onOpen.callCount).to.equal(1);
expect(screen.queryByRole('dialog')).toBeVisible();
});

it('should open when focusing the end input', async () => {
it('should open when focusing the end input', () => {
const onOpen = spy();

const { user } = render(
<MobileDateRangePicker enableAccessibleFieldDOMStructure onOpen={onOpen} />,
);
render(<MobileDateRangePicker enableAccessibleFieldDOMStructure onOpen={onOpen} />);

await openPicker({
type: 'date-range',
variant: 'mobile',
initialFocus: 'end',
click: user.click,
});
openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'end' });

expect(onOpen.callCount).to.equal(1);
expect(screen.queryByRole('dialog')).toBeVisible();
});

it('should call onChange with updated start date then call onChange with updated end date when opening from start input', async () => {
it('should call onChange with updated start date then call onChange with updated end date when opening from start input', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
Expand All @@ -81,7 +67,7 @@ describe('<MobileDateRangePicker />', () => {
adapterToUse.date('2018-01-06'),
];

const { user } = render(
render(
<MobileDateRangePicker
enableAccessibleFieldDOMStructure
onChange={onChange}
Expand All @@ -92,24 +78,19 @@ describe('<MobileDateRangePicker />', () => {
);

// Open the picker
await openPicker({
type: 'date-range',
variant: 'mobile',
initialFocus: 'start',
click: user.click,
});
openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' });
expect(onChange.callCount).to.equal(0);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);

// Change the start date
await user.click(screen.getByRole('gridcell', { name: '3' }));
fireEvent.click(screen.getByRole('gridcell', { name: '3' }));
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.args[0][0]).toEqualDateTime(new Date(2018, 0, 3));
expect(onChange.lastCall.args[0][1]).toEqualDateTime(defaultValue[1]);

// Change the end date
await user.click(screen.getByRole('gridcell', { name: '5' }));
fireEvent.click(screen.getByRole('gridcell', { name: '5' }));
expect(onChange.callCount).to.equal(2);
expect(onChange.lastCall.args[0][0]).toEqualDateTime(new Date(2018, 0, 3));
expect(onChange.lastCall.args[0][1]).toEqualDateTime(new Date(2018, 0, 5));
Expand All @@ -118,7 +99,7 @@ describe('<MobileDateRangePicker />', () => {
expect(onClose.callCount).to.equal(0);
});

it('should call onChange with updated end date when opening from end input', async () => {
it('should call onChange with updated end date when opening from end input', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
Expand All @@ -127,7 +108,7 @@ describe('<MobileDateRangePicker />', () => {
adapterToUse.date('2018-01-06'),
];

const { user } = render(
render(
<MobileDateRangePicker
enableAccessibleFieldDOMStructure
onChange={onChange}
Expand All @@ -138,34 +119,29 @@ describe('<MobileDateRangePicker />', () => {
);

// Open the picker
await openPicker({
type: 'date-range',
variant: 'mobile',
initialFocus: 'end',
click: user.click,
});
openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'end' });
expect(onChange.callCount).to.equal(0);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);

// Change the end date
await user.click(screen.getByRole('gridcell', { name: '3' }));
fireEvent.click(screen.getByRole('gridcell', { name: '3' }));
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.args[0][0]).toEqualDateTime(defaultValue[0]);
expect(onChange.lastCall.args[0][1]).toEqualDateTime(new Date(2018, 0, 3));
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);
});

it('should call onClose and onAccept when selecting the end date if props.closeOnSelect = true', async () => {
it('should call onClose and onAccept when selecting the end date if props.closeOnSelect = true', () => {
const onAccept = spy();
const onClose = spy();
const defaultValue: DateRange<any> = [
adapterToUse.date('2018-01-01'),
adapterToUse.date('2018-01-06'),
];

const { user } = render(
render(
<MobileDateRangePicker
enableAccessibleFieldDOMStructure
onAccept={onAccept}
Expand All @@ -175,23 +151,18 @@ describe('<MobileDateRangePicker />', () => {
/>,
);

await openPicker({
type: 'date-range',
variant: 'mobile',
initialFocus: 'end',
click: user.click,
});
openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'end' });

// Change the end date
await user.click(screen.getByRole('gridcell', { name: '3' }));
fireEvent.click(screen.getByRole('gridcell', { name: '3' }));

expect(onAccept.callCount).to.equal(1);
expect(onAccept.lastCall.args[0][0]).toEqualDateTime(defaultValue[0]);
expect(onAccept.lastCall.args[0][1]).toEqualDateTime(new Date(2018, 0, 3));
expect(onClose.callCount).to.equal(1);
});

it('should call onClose and onChange with the initial value when clicking "Cancel" button', async () => {
it('should call onClose and onChange with the initial value when clicking "Cancel" button', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
Expand All @@ -200,7 +171,7 @@ describe('<MobileDateRangePicker />', () => {
adapterToUse.date('2018-01-06'),
];

const { user } = render(
render(
<MobileDateRangePicker
enableAccessibleFieldDOMStructure
onChange={onChange}
Expand All @@ -211,26 +182,21 @@ describe('<MobileDateRangePicker />', () => {
/>,
);

await openPicker({
type: 'date-range',
variant: 'mobile',
initialFocus: 'start',
click: user.click,
});
openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' });

// Change the start date (already tested)
await user.click(screen.getByRole('gridcell', { name: '3' }));
fireEvent.click(screen.getByRole('gridcell', { name: '3' }));

// Cancel the modifications
await user.click(screen.getByText(/cancel/i));
fireEvent.click(screen.getByText(/cancel/i));
expect(onChange.callCount).to.equal(2); // Start date change + reset
expect(onChange.lastCall.args[0][0]).toEqualDateTime(defaultValue[0]);
expect(onChange.lastCall.args[0][1]).toEqualDateTime(defaultValue[1]);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(1);
});

it('should call onClose and onAccept with the live value and onAccept with the live value when clicking the "OK"', async () => {
it('should call onClose and onAccept with the live value and onAccept with the live value when clicking the "OK"', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
Expand All @@ -239,7 +205,7 @@ describe('<MobileDateRangePicker />', () => {
adapterToUse.date('2018-01-06'),
];

const { user } = render(
render(
<MobileDateRangePicker
enableAccessibleFieldDOMStructure
onChange={onChange}
Expand All @@ -249,26 +215,21 @@ describe('<MobileDateRangePicker />', () => {
/>,
);

await openPicker({
type: 'date-range',
variant: 'mobile',
initialFocus: 'start',
click: user.click,
});
openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' });

// Change the start date (already tested)
await user.click(screen.getByRole('gridcell', { name: '3' }));
fireEvent.click(screen.getByRole('gridcell', { name: '3' }));

// Accept the modifications
await user.click(screen.getByText(/ok/i));
fireEvent.click(screen.getByText(/ok/i));
expect(onChange.callCount).to.equal(1); // Start date change
expect(onAccept.callCount).to.equal(1);
expect(onAccept.lastCall.args[0][0]).toEqualDateTime(new Date(2018, 0, 3));
expect(onAccept.lastCall.args[0][1]).toEqualDateTime(defaultValue[1]);
expect(onClose.callCount).to.equal(1);
});

it('should call onClose, onChange with empty value and onAccept with empty value when pressing the "Clear" button', async () => {
it('should call onClose, onChange with empty value and onAccept with empty value when pressing the "Clear" button', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
Expand All @@ -277,7 +238,7 @@ describe('<MobileDateRangePicker />', () => {
adapterToUse.date('2018-01-06'),
];

const { user } = render(
render(
<MobileDateRangePicker
enableAccessibleFieldDOMStructure
onChange={onChange}
Expand All @@ -288,28 +249,23 @@ describe('<MobileDateRangePicker />', () => {
/>,
);

await openPicker({
type: 'date-range',
variant: 'mobile',
initialFocus: 'start',
click: user.click,
});
openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' });

// Clear the date
await user.click(screen.getByText(/clear/i));
fireEvent.click(screen.getByText(/clear/i));
expect(onChange.callCount).to.equal(1); // Start date change
expect(onChange.lastCall.args[0]).to.deep.equal([null, null]);
expect(onAccept.callCount).to.equal(1);
expect(onAccept.lastCall.args[0]).to.deep.equal([null, null]);
expect(onClose.callCount).to.equal(1);
});

it('should not call onChange or onAccept when pressing "Clear" button with an already null value', async () => {
it('should not call onChange or onAccept when pressing "Clear" button with an already null value', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();

const { user } = render(
render(
<MobileDateRangePicker
enableAccessibleFieldDOMStructure
onChange={onChange}
Expand All @@ -320,15 +276,10 @@ describe('<MobileDateRangePicker />', () => {
/>,
);

await openPicker({
type: 'date-range',
variant: 'mobile',
initialFocus: 'start',
click: user.click,
});
openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' });

// Clear the date
await user.click(screen.getByText(/clear/i));
fireEvent.click(screen.getByText(/clear/i));
expect(onChange.callCount).to.equal(0);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(1);
Expand Down
Loading

0 comments on commit 6a5545e

Please sign in to comment.