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; };