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

Jump to bottom

[test] Revert to using fireEvent instead of userEvent #14927

Merged
merged 7 commits into from
Oct 17, 2024
Merged

[test] Revert to using fireEvent instead of userEvent #14927

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5575746
[test] Revert to using `fireEvent` instead of `userEvent`
LukasTy Oct 11, 2024
583d17c
Prefer `fireEvent.click` over `fireUserEvent.mouseClick`
LukasTy Oct 11, 2024
2636d96
Revert "Prefer `fireEvent.click` over `fireUserEvent.mouseClick`"
LukasTy Oct 14, 2024
7a66b0e
Fix test to work with lazy ripple on material v6
LukasTy Oct 16, 2024
7e74f5a
Include `@mui/utils` in material v6 bump
LukasTy Oct 16, 2024
7365599
Merge remote-tracking branch 'upstream/master' into revert-usage-of-u…
LukasTy Oct 16, 2024
8350551
Merge branch 'master' into revert-usage-of-user-event
cherniavskii Oct 17, 2024
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
5 changes: 2 additions & 3 deletions packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
View file
Open in desktop
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
Open in desktop
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