diff --git a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
index 8a19bf501a4c..4ad235c405e8 100644
--- a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
@@ -228,16 +228,15 @@ describe(' - 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();
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', () => {
diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx
index 3d4a95698bb5..6950312c18be 100644
--- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx
+++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx
@@ -13,7 +13,7 @@ import { DateRange } from '@mui/x-date-pickers-pro/models';
import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
describe('', () => {
- 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', () => {
@@ -36,43 +36,29 @@ describe('', () => {
});
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(
- ,
- );
+ render();
- 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(
- ,
- );
+ render();
- 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();
@@ -81,7 +67,7 @@ describe('', () => {
adapterToUse.date('2018-01-06'),
];
- const { user } = render(
+ render(
', () => {
);
// 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));
@@ -118,7 +99,7 @@ describe('', () => {
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();
@@ -127,7 +108,7 @@ describe('', () => {
adapterToUse.date('2018-01-06'),
];
- const { user } = render(
+ render(
', () => {
);
// 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));
@@ -157,7 +133,7 @@ describe('', () => {
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 = [
@@ -165,7 +141,7 @@ describe('', () => {
adapterToUse.date('2018-01-06'),
];
- const { user } = render(
+ render(
', () => {
/>,
);
- 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]);
@@ -191,7 +162,7 @@ describe('', () => {
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();
@@ -200,7 +171,7 @@ describe('', () => {
adapterToUse.date('2018-01-06'),
];
- const { user } = render(
+ render(
', () => {
/>,
);
- 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]);
@@ -230,7 +196,7 @@ describe('', () => {
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();
@@ -239,7 +205,7 @@ describe('', () => {
adapterToUse.date('2018-01-06'),
];
- const { user } = render(
+ render(
', () => {
/>,
);
- 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));
@@ -268,7 +229,7 @@ describe('', () => {
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();
@@ -277,7 +238,7 @@ describe('', () => {
adapterToUse.date('2018-01-06'),
];
- const { user } = render(
+ render(
', () => {
/>,
);
- 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);
@@ -304,12 +260,12 @@ describe('', () => {
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(
', () => {
/>,
);
- 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);
diff --git a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx
index caced1d4fc4e..aafc00857bd5 100644
--- a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx
+++ b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import { fireEvent, screen, waitFor } from '@mui/internal-test-utils';
+import { fireEvent, screen } from '@mui/internal-test-utils';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import { PickersDay } from '@mui/x-date-pickers/PickersDay';
import { createPickerRenderer, adapterToUse } from 'test/utils/pickers';
@@ -9,28 +9,31 @@ import { createPickerRenderer, adapterToUse } from 'test/utils/pickers';
const isJSDOM = /jsdom/.test(window.navigator.userAgent);
describe('', () => {
- const { render, clock } = createPickerRenderer({ clockConfig: new Date(2019, 0, 2) });
+ const { render, clock } = createPickerRenderer({
+ clock: 'fake',
+ clockConfig: new Date('2019-01-02'),
+ });
- it('switches between views uncontrolled', async () => {
+ it('switches between views uncontrolled', () => {
const handleViewChange = spy();
- const { user } = render(
+ render(
,
);
- await user.click(screen.getByLabelText(/switch to year view/i));
+ fireEvent.click(screen.getByLabelText(/switch to year view/i));
expect(handleViewChange.callCount).to.equal(1);
expect(screen.queryByLabelText(/switch to year view/i)).to.equal(null);
expect(screen.getByLabelText('year view is open, switch to calendar view')).toBeVisible();
});
- it('should allow month and view changing, but not selection when readOnly prop is passed', async () => {
+ it('should allow month and view changing, but not selection when readOnly prop is passed', () => {
const onChangeMock = spy();
const onMonthChangeMock = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByTitle('Previous month'));
+ fireEvent.click(screen.getByTitle('Previous month'));
expect(onMonthChangeMock.callCount).to.equal(1);
- await user.click(screen.getByTitle('Next month'));
+ fireEvent.click(screen.getByTitle('Next month'));
expect(onMonthChangeMock.callCount).to.equal(2);
- await waitFor(() => expect(screen.getAllByRole('rowgroup').length).to.equal(1));
+ clock.runToLast();
- await user.click(screen.getByRole('gridcell', { name: '5' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '5' }));
expect(onChangeMock.callCount).to.equal(0);
- await user.click(screen.getByText('January 2019'));
+ fireEvent.click(screen.getByText('January 2019'));
expect(screen.queryByLabelText('year view is open, switch to calendar view')).toBeVisible();
});
- it('should not allow interaction when disabled prop is passed', async () => {
+ it('should not allow interaction when disabled prop is passed', () => {
const onChangeMock = spy();
const onMonthChangeMock = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByText('January 2019'));
+ fireEvent.click(screen.getByText('January 2019'));
expect(screen.queryByText('January 2019')).toBeVisible();
expect(screen.queryByLabelText('year view is open, switch to calendar view')).to.equal(null);
- await user.setup({ pointerEventsCheck: 0 }).click(screen.getByTitle('Previous month'));
+ fireEvent.click(screen.getByTitle('Previous month'));
expect(onMonthChangeMock.callCount).to.equal(0);
- await user.setup({ pointerEventsCheck: 0 }).click(screen.getByTitle('Next month'));
+ fireEvent.click(screen.getByTitle('Next month'));
expect(onMonthChangeMock.callCount).to.equal(0);
- await user.setup({ pointerEventsCheck: 0 }).click(screen.getByRole('gridcell', { name: '5' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '5' }));
expect(onChangeMock.callCount).to.equal(0);
});
@@ -181,10 +184,10 @@ describe('', () => {
).to.have.text('1');
});
- it('should use `referenceDate` when no value defined', async () => {
+ it('should use `referenceDate` when no value defined', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
// should make the reference day firstly focusable
expect(screen.getByRole('gridcell', { name: '17' })).to.have.attribute('tabindex', '0');
- await user.click(screen.getByRole('gridcell', { name: '2' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '2' }));
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2022, 3, 2, 12, 30));
});
- it('should not use `referenceDate` when a value is defined', async () => {
+ it('should not use `referenceDate` when a value is defined', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByRole('gridcell', { name: '2' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '2' }));
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2019, 0, 2, 12, 20));
});
- it('should not use `referenceDate` when a defaultValue is defined', async () => {
+ it('should not use `referenceDate` when a defaultValue is defined', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByRole('gridcell', { name: '2' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '2' }));
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2019, 0, 2, 12, 20));
});
- it('should keep the time of the currently provided date', async () => {
+ it('should keep the time of the currently provided date', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByRole('gridcell', { name: '2' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '2' }));
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(
adapterToUse.date('2018-01-02T11:11:11.111'),
@@ -289,10 +292,10 @@ describe('', () => {
});
describe('view: month', () => {
- it('should select the closest enabled date in the month if the current date is disabled', async () => {
+ it('should select the closest enabled date in the month if the current date is disabled', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const april = screen.getByText('Apr', { selector: 'button' });
- await user.click(april);
+ fireEvent.click(april);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2019, 3, 6));
});
- it('should respect minDate when selecting closest enabled date', async () => {
+ it('should respect minDate when selecting closest enabled date', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const april = screen.getByText('Apr', { selector: 'button' });
- await user.click(april);
+ fireEvent.click(april);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2019, 3, 7));
});
- it('should respect maxDate when selecting closest enabled date', async () => {
+ it('should respect maxDate when selecting closest enabled date', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const april = screen.getByText('Apr', { selector: 'button' });
- await user.click(april);
+ fireEvent.click(april);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2019, 3, 22));
});
- it('should go to next view without changing the date when no date of the new month is enabled', async () => {
+ it('should go to next view without changing the date when no date of the new month is enabled', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const april = screen.getByText('Apr', { selector: 'button' });
- await user.click(april);
+ fireEvent.click(april);
+ clock.runToLast();
expect(onChange.callCount).to.equal(0);
expect(screen.getByTestId('calendar-month-and-year-text')).to.have.text('April 2019');
});
- it('should use `referenceDate` when no value defined', async () => {
+ it('should use `referenceDate` when no value defined', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const april = screen.getByText('Apr', { selector: 'button' });
- await user.click(april);
+ fireEvent.click(april);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2018, 3, 1, 12, 30));
});
- it('should not use `referenceDate` when a value is defined', async () => {
+ it('should not use `referenceDate` when a value is defined', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const april = screen.getByText('Apr', { selector: 'button' });
- await user.click(april);
+ fireEvent.click(april);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2019, 3, 1, 12, 20));
});
- it('should not use `referenceDate` when a defaultValue is defined', async () => {
+ it('should not use `referenceDate` when a defaultValue is defined', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const april = screen.getByText('Apr', { selector: 'button' });
- await user.click(april);
+ fireEvent.click(april);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2019, 3, 1, 12, 20));
@@ -438,10 +442,10 @@ describe('', () => {
expect(screen.getAllByTestId('year')).to.have.length(200);
});
- it('should select the closest enabled date in the month if the current date is disabled', async () => {
+ it('should select the closest enabled date in the month if the current date is disabled', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const year2022 = screen.getByText('2022', { selector: 'button' });
- await user.click(year2022);
+ fireEvent.click(year2022);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2022, 4, 1));
});
- it('should respect minDate when selecting closest enabled date', async () => {
+ it('should respect minDate when selecting closest enabled date', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const year2017 = screen.getByText('2017', { selector: 'button' });
- await user.click(year2017);
+ fireEvent.click(year2017);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2017, 4, 12));
});
- it('should respect maxDate when selecting closest enabled date', async () => {
+ it('should respect maxDate when selecting closest enabled date', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const year2022 = screen.getByText('2022', { selector: 'button' });
- await user.click(year2022);
+ fireEvent.click(year2022);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2022, 2, 31));
});
- it('should go to next view without changing the date when no date of the new year is enabled', async () => {
+ it('should go to next view without changing the date when no date of the new year is enabled', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const year2022 = screen.getByText('2022', { selector: 'button' });
- await user.click(year2022);
+ fireEvent.click(year2022);
+ clock.runToLast();
expect(onChange.callCount).to.equal(0);
expect(screen.getByTestId('calendar-month-and-year-text')).to.have.text('January 2022');
@@ -545,10 +550,10 @@ describe('', () => {
expect(parentBoundingBox.bottom).not.to.lessThan(buttonBoundingBox.bottom);
});
- it('should use `referenceDate` when no value defined', async () => {
+ it('should use `referenceDate` when no value defined', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const year2022 = screen.getByText('2022', { selector: 'button' });
- await user.click(year2022);
+ fireEvent.click(year2022);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2022, 0, 1, 12, 30));
});
- it('should not use `referenceDate` when a value is defined', async () => {
+ it('should not use `referenceDate` when a value is defined', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const year2022 = screen.getByText('2022', { selector: 'button' });
- await user.click(year2022);
+ fireEvent.click(year2022);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2022, 0, 1, 12, 20));
});
- it('should not use `referenceDate` when a defaultValue is defined', async () => {
+ it('should not use `referenceDate` when a defaultValue is defined', () => {
const onChange = spy();
- const { user } = render(
+ render(
', () => {
);
const year2022 = screen.getByText('2022', { selector: 'button' });
- await user.click(year2022);
+ fireEvent.click(year2022);
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2022, 0, 1, 12, 20));
diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx
index c298769075bb..ea815c570641 100644
--- a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx
@@ -1,31 +1,31 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import { screen } from '@mui/internal-test-utils';
+import { fireEvent, screen } from '@mui/internal-test-utils';
import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker';
import { adapterToUse, createPickerRenderer, openPicker } from 'test/utils/pickers';
describe('', () => {
- const { render } = createPickerRenderer();
+ const { render } = createPickerRenderer({ clock: 'fake' });
describe('picker state', () => {
- it('should open when clicking "Choose date"', async () => {
+ it('should open when clicking "Choose date"', () => {
const onOpen = spy();
- const { user } = render();
+ render();
- await user.click(screen.getByLabelText(/Choose date/));
+ fireEvent.click(screen.getByLabelText(/Choose date/));
expect(onOpen.callCount).to.equal(1);
expect(screen.queryByRole('dialog')).toBeVisible();
});
- it('should call onAccept when selecting the same date and time after changing the year', async () => {
+ it('should call onAccept when selecting the same date and time after changing the year', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await openPicker({ type: 'date-time', variant: 'desktop', click: user.click });
+ openPicker({ type: 'date-time', variant: 'desktop' });
// Select year
- await user.click(screen.getByRole('radio', { name: '2025' }));
+ fireEvent.click(screen.getByRole('radio', { name: '2025' }));
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2025, 0, 1, 11, 55));
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);
// Change the date (same value)
- await user.click(screen.getByRole('gridcell', { name: '1' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '1' }));
expect(onChange.callCount).to.equal(1); // Don't call onChange again since the value did not change
// Change the hours (same value)
- await user.click(screen.getByRole('option', { name: '11 hours' }));
+ fireEvent.click(screen.getByRole('option', { name: '11 hours' }));
expect(onChange.callCount).to.equal(1); // Don't call onChange again since the value did not change
// Change the minutes (same value)
- await user.click(screen.getByRole('option', { name: '55 minutes' }));
+ fireEvent.click(screen.getByRole('option', { name: '55 minutes' }));
expect(onChange.callCount).to.equal(1); // Don't call onChange again since the value did not change
// Change the meridiem (same value)
- await user.click(screen.getByRole('option', { name: 'AM' }));
+ fireEvent.click(screen.getByRole('option', { name: 'AM' }));
expect(onChange.callCount).to.equal(1); // Don't call onChange again since the value did not change
expect(onAccept.callCount).to.equal(1);
expect(onClose.callCount).to.equal(1);
});
});
- it('should allow selecting same view multiple times', async () => {
+ it('should allow selecting same view multiple times', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await openPicker({ type: 'date-time', variant: 'desktop', click: user.click });
+ openPicker({ type: 'date-time', variant: 'desktop' });
// Change the date multiple times to check that picker doesn't close after cycling through all views internally
- await user.click(screen.getByRole('gridcell', { name: '2' }));
- await user.click(screen.getByRole('gridcell', { name: '3' }));
- await user.click(screen.getByRole('gridcell', { name: '4' }));
- await user.click(screen.getByRole('gridcell', { name: '5' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '2' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '3' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '4' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '5' }));
expect(onChange.callCount).to.equal(4);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);
// Change the hours
- await user.click(screen.getByRole('option', { name: '10 hours' }));
- await user.click(screen.getByRole('option', { name: '9 hours' }));
+ fireEvent.click(screen.getByRole('option', { name: '10 hours' }));
+ fireEvent.click(screen.getByRole('option', { name: '9 hours' }));
expect(onChange.callCount).to.equal(6);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);
// Change the minutes
- await user.click(screen.getByRole('option', { name: '50 minutes' }));
+ fireEvent.click(screen.getByRole('option', { name: '50 minutes' }));
expect(onChange.callCount).to.equal(7);
// Change the meridiem
- await user.click(screen.getByRole('option', { name: 'PM' }));
+ fireEvent.click(screen.getByRole('option', { name: 'PM' }));
expect(onChange.callCount).to.equal(8);
expect(onAccept.callCount).to.equal(1);
expect(onClose.callCount).to.equal(1);
});
describe('prop: timeSteps', () => {
- it('should use "DigitalClock" view renderer, when "timeSteps.minutes" = 60', async () => {
+ it('should use "DigitalClock" view renderer, when "timeSteps.minutes" = 60', () => {
const onChange = spy();
const onAccept = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByLabelText(/Choose date/));
+ fireEvent.click(screen.getByLabelText(/Choose date/));
- await user.click(screen.getByRole('gridcell', { name: '2' }));
- await user.click(screen.getByRole('option', { name: '03:00 AM' }));
+ fireEvent.click(screen.getByRole('gridcell', { name: '2' }));
+ fireEvent.click(screen.getByRole('option', { name: '03:00 AM' }));
expect(onChange.callCount).to.equal(2);
expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 2, 3, 0, 0));
expect(onAccept.callCount).to.equal(1);
});
- it('should accept value and close picker when selecting time on "DigitalClock" view renderer', async () => {
+ it('should accept value and close picker when selecting time on "DigitalClock" view renderer', () => {
const onChange = spy();
const onAccept = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByLabelText(/Choose date/));
+ fireEvent.click(screen.getByLabelText(/Choose date/));
- await user.click(screen.getByRole('option', { name: '03:00 AM' }));
+ fireEvent.click(screen.getByRole('option', { name: '03:00 AM' }));
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 3, 0, 0));
diff --git a/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx
index 28663c2a7557..f6d1314d7694 100644
--- a/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx
@@ -1,17 +1,17 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import { screen } from '@mui/internal-test-utils';
+import { fireEvent, screen } from '@mui/internal-test-utils';
import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
import { adapterToUse, createPickerRenderer, openPicker } from 'test/utils/pickers';
describe('', () => {
- describe('rendering behavior', () => {
- const { render } = createPickerRenderer({
- clock: 'fake',
- clockConfig: new Date('2018-01-01T10:05:05.000'),
- });
+ const { render } = createPickerRenderer({
+ clock: 'fake',
+ clockConfig: new Date('2018-01-01T10:05:05.000'),
+ });
+ describe('rendering behavior', () => {
it('should render "accept" action and 3 time sections by default', () => {
render();
@@ -60,14 +60,12 @@ describe('', () => {
});
describe('selecting behavior', () => {
- const { render } = createPickerRenderer();
-
- it('should call "onAccept", "onChange", and "onClose" when selecting a single option', async () => {
+ it('should call "onAccept", "onChange", and "onClose" when selecting a single option', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await openPicker({ type: 'time', variant: 'desktop', click: user.click });
+ openPicker({ type: 'time', variant: 'desktop' });
- await user.click(screen.getByRole('option', { name: '09:00 AM' }));
+ fireEvent.click(screen.getByRole('option', { name: '09:00 AM' }));
expect(onChange.callCount).to.equal(1);
expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 9, 0));
expect(onAccept.callCount).to.equal(1);
@@ -87,12 +85,12 @@ describe('', () => {
expect(onClose.callCount).to.equal(1);
});
- it('should call "onAccept", "onChange", and "onClose" when selecting all section', async () => {
+ it('should call "onAccept", "onChange", and "onClose" when selecting all section', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await openPicker({ type: 'time', variant: 'desktop', click: user.click });
+ openPicker({ type: 'time', variant: 'desktop' });
- await user.click(screen.getByRole('option', { name: '2 hours' }));
+ fireEvent.click(screen.getByRole('option', { name: '2 hours' }));
expect(onChange.callCount).to.equal(1);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);
- await user.click(screen.getByRole('option', { name: '15 minutes' }));
+ fireEvent.click(screen.getByRole('option', { name: '15 minutes' }));
expect(onChange.callCount).to.equal(2);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);
- await user.click(screen.getByRole('option', { name: 'PM' }));
+ fireEvent.click(screen.getByRole('option', { name: 'PM' }));
expect(onChange.callCount).to.equal(3);
expect(onAccept.callCount).to.equal(1);
expect(onAccept.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 14, 15));
expect(onClose.callCount).to.equal(1);
});
- it('should allow out of order section selection', async () => {
+ it('should allow out of order section selection', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await openPicker({ type: 'time', variant: 'desktop', click: user.click });
+ openPicker({ type: 'time', variant: 'desktop' });
- await user.click(screen.getByRole('option', { name: '15 minutes' }));
+ fireEvent.click(screen.getByRole('option', { name: '15 minutes' }));
expect(onChange.callCount).to.equal(1);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);
- await user.click(screen.getByRole('option', { name: '2 hours' }));
+ fireEvent.click(screen.getByRole('option', { name: '2 hours' }));
expect(onChange.callCount).to.equal(2);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);
- await user.click(screen.getByRole('option', { name: '25 minutes' }));
+ fireEvent.click(screen.getByRole('option', { name: '25 minutes' }));
expect(onChange.callCount).to.equal(3);
expect(onAccept.callCount).to.equal(0);
expect(onClose.callCount).to.equal(0);
- await user.click(screen.getByRole('option', { name: 'PM' }));
+ fireEvent.click(screen.getByRole('option', { name: 'PM' }));
expect(onChange.callCount).to.equal(4);
expect(onAccept.callCount).to.equal(1);
expect(onAccept.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 14, 25));
expect(onClose.callCount).to.equal(1);
});
- it('should finish selection when selecting only the last section', async () => {
+ it('should finish selection when selecting only the last section', () => {
const onChange = spy();
const onAccept = spy();
const onClose = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await openPicker({ type: 'time', variant: 'desktop', click: user.click });
+ openPicker({ type: 'time', variant: 'desktop' });
- await user.click(screen.getByRole('option', { name: 'PM' }));
+ fireEvent.click(screen.getByRole('option', { name: 'PM' }));
expect(onChange.callCount).to.equal(1);
expect(onAccept.callCount).to.equal(1);
expect(onAccept.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 12, 0));
diff --git a/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx b/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx
index d837030ef329..416c5e80c0ed 100644
--- a/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx
+++ b/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { spy } from 'sinon';
import { expect } from 'chai';
-import { fireTouchChangedEvent, screen } from '@mui/internal-test-utils';
+import { fireEvent, fireTouchChangedEvent, screen } from '@mui/internal-test-utils';
import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
import {
createPickerRenderer,
@@ -12,25 +12,23 @@ import {
} from 'test/utils/pickers';
describe('', () => {
- const { render } = createPickerRenderer();
+ const { render } = createPickerRenderer({ clock: 'fake' });
describe('picker state', () => {
- it('should open when clicking the input', async () => {
+ it('should open when clicking the input', () => {
const onOpen = spy();
- const { user } = render(
- ,
- );
+ render();
- await user.click(getFieldSectionsContainer());
+ fireEvent.click(getFieldSectionsContainer());
expect(onOpen.callCount).to.equal(1);
expect(screen.queryByRole('dialog')).toBeVisible();
});
- it('should fire a change event when meridiem changes', async () => {
+ it('should fire a change event when meridiem changes', () => {
const handleChange = spy();
- const { user } = render(
+ render(
', () => {
);
const buttonPM = screen.getByRole('button', { name: 'PM' });
- await user.click(buttonPM);
+ fireEvent.click(buttonPM);
expect(handleChange.callCount).to.equal(1);
expect(handleChange.firstCall.args[0]).toEqualDateTime(new Date(2019, 0, 1, 16, 20));
});
- it('should call onChange when selecting each view', async function test() {
+ it('should call onChange when selecting each view', function test() {
if (typeof window.Touch === 'undefined' || typeof window.TouchEvent === 'undefined') {
this.skip();
}
@@ -58,7 +56,7 @@ describe('', () => {
const onClose = spy();
const defaultValue = adapterToUse.date('2018-01-01');
- const { user } = render(
+ render(
', () => {
/>,
);
- await openPicker({ type: 'time', variant: 'mobile', click: user.click });
+ openPicker({ type: 'time', variant: 'mobile' });
// Change the hours
const hourClockEvent = getClockTouchEvent(11, '12hours');
diff --git a/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.test.tsx b/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.test.tsx
index 58d3b35893ac..28d7e3026784 100644
--- a/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.test.tsx
+++ b/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.test.tsx
@@ -1,12 +1,12 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import { screen } from '@mui/internal-test-utils';
+import { fireEvent, screen } from '@mui/internal-test-utils';
import { PickersActionBar } from '@mui/x-date-pickers/PickersActionBar';
import { createPickerRenderer } from 'test/utils/pickers';
describe('', () => {
- const { render } = createPickerRenderer();
+ const { render } = createPickerRenderer({ clock: 'fake' });
it('should not render buttons if actions array is empty', () => {
const onAccept = () => {};
@@ -26,13 +26,13 @@ describe('', () => {
expect(screen.queryByRole('button')).to.equal(null);
});
- it('should render button for "clear" action calling the associated callback', async () => {
+ it('should render button for "clear" action calling the associated callback', () => {
const onAccept = spy();
const onClear = spy();
const onCancel = spy();
const onSetToday = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByText(/clear/i));
+ fireEvent.click(screen.getByText(/clear/i));
expect(onClear.callCount).to.equal(1);
});
- it('should render button for "cancel" action calling the associated callback', async () => {
+ it('should render button for "cancel" action calling the associated callback', () => {
const onAccept = spy();
const onClear = spy();
const onCancel = spy();
const onSetToday = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByText(/cancel/i));
+ fireEvent.click(screen.getByText(/cancel/i));
expect(onCancel.callCount).to.equal(1);
});
- it('should render button for "accept" action calling the associated callback', async () => {
+ it('should render button for "accept" action calling the associated callback', () => {
const onAccept = spy();
const onClear = spy();
const onCancel = spy();
const onSetToday = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByText(/ok/i));
+ fireEvent.click(screen.getByText(/ok/i));
expect(onAccept.callCount).to.equal(1);
});
- it('should render button for "today" action calling the associated callback', async () => {
+ it('should render button for "today" action calling the associated callback', () => {
const onAccept = spy();
const onClear = spy();
const onCancel = spy();
const onSetToday = spy();
- const { user } = render(
+ render(
', () => {
/>,
);
- await user.click(screen.getByText(/today/i));
+ fireEvent.click(screen.getByText(/today/i));
expect(onSetToday.callCount).to.equal(1);
});
diff --git a/scripts/useMaterialUIv6.mjs b/scripts/useMaterialUIv6.mjs
index d6d0c4b4966a..07f2aed4e3ab 100644
--- a/scripts/useMaterialUIv6.mjs
+++ b/scripts/useMaterialUIv6.mjs
@@ -2,7 +2,14 @@ import childProcess from 'child_process';
const pnpmUpdate = childProcess.spawnSync(
'pnpm',
- ['update', '-r', '@mui/material@6.x', '@mui/system@6.x', '@mui/icons-material@6.x'],
+ [
+ 'update',
+ '-r',
+ '@mui/material@6.x',
+ '@mui/system@6.x',
+ '@mui/icons-material@6.x',
+ '@mui/utils@6.x',
+ ],
{
shell: true,
stdio: ['inherit', 'inherit', 'inherit'],
diff --git a/test/utils/pickers/openPicker.ts b/test/utils/pickers/openPicker.ts
index 229510842e61..b34715ce5f8b 100644
--- a/test/utils/pickers/openPicker.ts
+++ b/test/utils/pickers/openPicker.ts
@@ -6,7 +6,6 @@ export type OpenPickerParams =
| {
type: 'date' | 'date-time' | 'time';
variant: 'mobile' | 'desktop';
- click?: (element: Element) => Promise;
}
| {
type: 'date-range' | 'date-time-range';
@@ -16,32 +15,29 @@ export type OpenPickerParams =
* @default false
*/
isSingleInput?: boolean;
- click?: (element: Element) => Promise;
};
-export const openPicker = async (params: OpenPickerParams) => {
+export const openPicker = (params: OpenPickerParams) => {
const isRangeType = params.type === 'date-range' || params.type === 'date-time-range';
const fieldSectionsContainer = getFieldSectionsContainer(
isRangeType && !params.isSingleInput && params.initialFocus === 'end' ? 1 : 0,
);
- const { click = fireEvent.click } = params;
-
if (isRangeType) {
- await click(fieldSectionsContainer);
+ fireEvent.click(fieldSectionsContainer);
if (params.isSingleInput && params.initialFocus === 'end') {
const sections = fieldSectionsContainer.querySelectorAll(
`.${pickersInputBaseClasses.sectionsContainer}`,
);
- await click(sections[sections.length - 1]);
+ fireEvent.click(sections[sections.length - 1]);
}
return true;
}
if (params.variant === 'mobile') {
- await click(fieldSectionsContainer);
+ fireEvent.click(fieldSectionsContainer);
return true;
}
@@ -51,6 +47,6 @@ export const openPicker = async (params: OpenPickerParams) => {
? screen.getByLabelText(/choose time/i)
: screen.getByLabelText(/choose date/i);
- await click(target);
+ fireEvent.click(target);
return true;
};