Skip to content

[code-infra] Update some date-pickers tests for vitest #17083

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

Merged
merged 10 commits into from
Mar 24, 2025
Merged

[code-infra] Update some date-pickers tests for vitest #17083

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7557e3d
remove clock from buildFieldInteractions
JCQuintas Mar 21, 2025
981218e
picker renderer
JCQuintas Mar 22, 2025
89716fe
proper user events
JCQuintas Mar 22, 2025
3fd76b3
use clockconfig
JCQuintas Mar 22, 2025
3f35252
revert tricky change
JCQuintas Mar 22, 2025
73da26f
async
JCQuintas Mar 22, 2025
2c7bb1b
changes
JCQuintas Mar 22, 2025
d171398
revert unncessary changes
JCQuintas Mar 22, 2025
3d337b8
revert problematic change
JCQuintas Mar 23, 2025
2a04d78
remove async
JCQuintas Mar 24, 2025
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
21 changes: 11 additions & 10 deletions packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,47 +10,48 @@ import {
import { pickerPopperClasses } from '@mui/x-date-pickers/internals/components/PickerPopper';

describe('<DateRangePicker />', () => {
const { render, clock } = createPickerRenderer({
clock: 'fake',
clockConfig: new Date(2018, 0, 1, 0, 0, 0, 0),
});
const { render } = createPickerRenderer();

const { renderWithProps } = buildFieldInteractions({
render,
clock,
Component: DateRangePicker,
});

const originalMatchMedia = window.matchMedia;

afterEach(() => {
window.matchMedia = originalMatchMedia;
});

it('should not use the mobile picker by default', () => {
// Test with accessible DOM structure
window.matchMedia = stubMatchMedia(true);
Copy link
Member

@Janpot Janpot Mar 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

edit: nvm, we're still in mocha land, to keep in mind for when we switch to vitest

Suggestion: Create a stubMatchMedia helper that cleans up after itself automatically

import { onTestFinished } from 'vitest'

function stubMatchMedia(matches) {
  const original = window.matchMedia
  window.matchMedia = ...
  onTestFinished(() => {
    window.matchMedia = original
  })
}

The hook is called in reverse order, so it should be safe to call stubMatchMedia multiple times.

const { unmount } = renderWithProps({ enableAccessibleFieldDOMStructure: true });
openPicker({ type: 'date-range', initialFocus: 'start', fieldType: 'single-input' });
expect(screen.queryByRole('dialog')).to.have.class(pickerPopperClasses.root);

unmount();

// Test with non-accessible DOM structure
window.matchMedia = stubMatchMedia(true);
renderWithProps({ enableAccessibleFieldDOMStructure: false });
openPicker({ type: 'date-range', initialFocus: 'start', fieldType: 'single-input' });
expect(screen.queryByRole('dialog')).to.have.class(pickerPopperClasses.root);
});

it('should use the mobile picker when `useMediaQuery` returns `false`', () => {
const originalMatchMedia = window.matchMedia;
window.matchMedia = stubMatchMedia(false);

// Test with accessible DOM structure
window.matchMedia = stubMatchMedia(false);
const { unmount } = renderWithProps({ enableAccessibleFieldDOMStructure: true });
openPicker({ type: 'date-range', initialFocus: 'start', fieldType: 'single-input' });
expect(screen.queryByRole('dialog')).not.to.have.class(pickerPopperClasses.root);

unmount();

// Test with non-accessible DOM structure
window.matchMedia = stubMatchMedia(false);
renderWithProps({ enableAccessibleFieldDOMStructure: false });
openPicker({ type: 'date-range', initialFocus: 'start', fieldType: 'single-input' });
expect(screen.queryByRole('dialog')).not.to.have.class(pickerPopperClasses.root);

window.matchMedia = originalMatchMedia;
});
});
1 change: 0 additions & 1 deletion ...kers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
describe('<SingleInputDateRangeField /> - Selection', () => {
const { render, clock } = createPickerRenderer({ clock: 'fake' });
const { renderWithProps } = buildFieldInteractions({
clock,
render,
Component: SingleInputDateRangeField,
});
Expand Down
4 changes: 1 addition & 3 deletions packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,15 +103,13 @@ describe('<AdapterDateFns />', () => {
const localeObject = localeKey === 'undefined' ? undefined : { fr, de }[localeKey];

describe(`test with the ${localeName} locale`, () => {
const { render, clock, adapter } = createPickerRenderer({
clock: 'fake',
const { render, adapter } = createPickerRenderer({
adapterName: 'date-fns',
locale: localeObject,
});

const { renderWithProps } = buildFieldInteractions({
render,
clock,
Component: DateTimeField,
});

Expand Down
4 changes: 1 addition & 3 deletions packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,15 +57,13 @@ describe('<AdapterDateFnsJalali />', () => {
}[localeKey];

describe(`test with the "${localeKey}" locale`, () => {
const { render, adapter, clock } = createPickerRenderer({
clock: 'fake',
const { render, adapter } = createPickerRenderer({
adapterName: 'date-fns-jalali',
locale: localeObject,
});

const { renderWithProps } = buildFieldInteractions({
render,
clock,
Component: DateTimeField,
});

Expand Down
4 changes: 1 addition & 3 deletions packages/x-date-pickers/src/AdapterDateFnsJalaliV2/AdapterDateFnsJalaliV2.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,15 +50,13 @@ describe('<AdapterDateFnsJalaliV2 />', () => {
}[localeKey];

describe(`test with the "${localeKey}" locale`, () => {
const { render, adapter, clock } = createPickerRenderer({
clock: 'fake',
const { render, adapter } = createPickerRenderer({
adapterName: 'date-fns-jalali',
locale: localeObject,
});

const { renderWithProps } = buildFieldInteractions({
render,
clock,
Component: DateTimeField,
});

Expand Down
4 changes: 1 addition & 3 deletions packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,15 +134,13 @@ describe('<AdapterDayjs />', () => {
const localeObject = localeKey === 'undefined' ? undefined : { code: localeKey };

describe(`test with the ${localeName} locale`, () => {
const { render, clock, adapter } = createPickerRenderer({
clock: 'fake',
const { render, adapter } = createPickerRenderer({
adapterName: 'dayjs',
locale: localeObject,
});

const { renderWithProps } = buildFieldInteractions({
render,
clock,
Component: DateTimeField,
});

Expand Down
8 changes: 2 additions & 6 deletions packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,15 +93,13 @@ describe('<AdapterLuxon />', () => {
const localeObject = localeKey === 'undefined' ? undefined : { code: localeKey };

describe(`test with the ${localeName} locale`, () => {
const { render, clock, adapter } = createPickerRenderer({
clock: 'fake',
const { render, adapter } = createPickerRenderer({
adapterName: 'luxon',
locale: localeObject,
});

const { renderWithProps } = buildFieldInteractions({
render,
clock,
Component: DateTimeField,
});

Expand Down Expand Up @@ -149,15 +147,13 @@ describe('<AdapterLuxon />', () => {
const localeObject = localeKey === 'undefined' ? undefined : { code: localeKey };

describe(`test with the ${localeName} locale`, () => {
const { render, adapter, clock } = createPickerRenderer({
clock: 'fake',
const { render, adapter } = createPickerRenderer({
adapterName: 'luxon',
locale: localeObject,
});

const { renderWithProps } = buildFieldInteractions({
render,
clock,
Component: DateTimeField,
});

Expand Down
9 changes: 6 additions & 3 deletions packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
import 'moment/locale/de';
import 'moment/locale/fr';
import 'moment/locale/ko';
import 'moment/locale/ru';

describe('<AdapterMoment />', () => {
const commonParams = {
Expand All @@ -25,8 +26,12 @@ describe('<AdapterMoment />', () => {
frenchLocale: 'fr',
};

moment.locale('en');

describeGregorianAdapter(AdapterMoment, commonParams);

moment.locale('en');

// Makes sure that all the tests that do not use timezones works fine when dayjs do not support UTC / timezone.
describeGregorianAdapter(AdapterMoment, {
...commonParams,
Expand Down Expand Up @@ -147,15 +152,13 @@ describe('<AdapterMoment />', () => {
const localeObject = { code: localeKey };

describe(`test with the locale "${localeKey}"`, () => {
const { render, clock, adapter } = createPickerRenderer({
clock: 'fake',
const { render, adapter } = createPickerRenderer({
adapterName: 'moment',
locale: localeObject,
});

const { renderWithProps } = buildFieldInteractions({
render,
clock,
Component: DateTimeField,
});

Expand Down
4 changes: 1 addition & 3 deletions packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,15 +62,13 @@ describe('<AdapterMomentHijri />', () => {
const localeObject = { code: localeKey };

describe(`test with the locale "${localeKey}"`, () => {
const { render, clock, adapter } = createPickerRenderer({
clock: 'fake',
const { render, adapter } = createPickerRenderer({
adapterName: 'moment-hijri',
locale: localeObject,
});

const { renderWithProps } = buildFieldInteractions({
render,
clock,
Component: DateTimeField,
});

Expand Down
4 changes: 1 addition & 3 deletions packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,15 +68,13 @@ describe('<AdapterMomentJalaali />', () => {
const localeObject = { code: localeKey };

describe(`test with the locale "${localeKey}"`, () => {
const { render, clock, adapter } = createPickerRenderer({
clock: 'fake',
const { render, adapter } = createPickerRenderer({
adapterName: 'moment-jalaali',
locale: localeObject,
});

const { renderWithProps } = buildFieldInteractions({
render,
clock,
Component: DateTimeField,
});

Expand Down
2 changes: 1 addition & 1 deletion packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {

describe('<DateField /> - Selection', () => {
const { render, clock } = createPickerRenderer({ clock: 'fake' });
const { renderWithProps } = buildFieldInteractions({ clock, render, Component: DateField });
const { renderWithProps } = buildFieldInteractions({ render, Component: DateField });

describe('Focus', () => {
it('should select 1st section (v7) / all sections (v6) on mount focus (`autoFocus = true`)', () => {
Expand Down
4 changes: 1 addition & 3 deletions packages/x-date-pickers/src/DateTimeField/tests/editing.DateTimeField.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,11 @@ import {
} from 'test/utils/pickers';

describe('<DateTimeField /> - Editing', () => {
const { render, clock } = createPickerRenderer({
clock: 'fake',
const { render } = createPickerRenderer({
clockConfig: new Date(2012, 4, 3, 14, 30, 15, 743),
});

const { renderWithProps } = buildFieldInteractions({
clock,
render,
Component: DateTimeField,
});
Expand Down
4 changes: 1 addition & 3 deletions packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,12 +118,10 @@ describe('<DateTimeField /> - Timezone', () => {
});

describe('Value timezone modification - Luxon', () => {
const { render, adapter, clock } = createPickerRenderer({
clock: 'fake',
const { render, adapter } = createPickerRenderer({
adapterName: 'luxon',
});
const { renderWithProps } = buildFieldInteractions({
clock,
render,
Component: DateTimeField,
});
Expand Down
27 changes: 10 additions & 17 deletions packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { fireEvent } from '@mui/internal-test-utils';
import { DesktopDatePicker, DesktopDatePickerProps } from '@mui/x-date-pickers/DesktopDatePicker';
import {
createPickerRenderer,
Expand All @@ -13,17 +12,15 @@ import {

describe('<DesktopDatePicker /> - Field', () => {
describe('Basic behaviors', () => {
const { render, clock } = createPickerRenderer({
clock: 'fake',
const { render } = createPickerRenderer({
clockConfig: new Date('2018-01-01T10:05:05.000'),
});
const { renderWithProps } = buildFieldInteractions({
clock,
render,
Component: DesktopDatePicker,
});

it('should be able to reset a single section', () => {
it('should be able to reset a single section', async () => {
// Test with accessible DOM structure
let view = renderWithProps(
{
Expand All @@ -36,13 +33,13 @@ describe('<DesktopDatePicker /> - Field', () => {
view.selectSection('month');
expectFieldValueV7(view.getSectionsContainer(), 'MMMM DD');

view.pressKey(0, 'N');
await view.user.keyboard('N');
expectFieldValueV7(view.getSectionsContainer(), 'November DD');

view.pressKey(1, '4');
await view.user.keyboard('4');
expectFieldValueV7(view.getSectionsContainer(), 'November 04');

view.pressKey(1, '');
await view.user.keyboard('[Backspace]');
expectFieldValueV7(view.getSectionsContainer(), 'November DD');

view.unmount();
Expand All @@ -60,13 +57,13 @@ describe('<DesktopDatePicker /> - Field', () => {
view.selectSection('month');
expectFieldPlaceholderV6(input, 'MMMM DD');

fireEvent.change(input, { target: { value: 'N DD' } }); // Press "N"
await view.user.keyboard('N');
expectFieldValueV6(input, 'November DD');

fireEvent.change(input, { target: { value: 'November 4' } }); // Press "4"
await view.user.keyboard('4');
expectFieldValueV6(input, 'November 04');

fireEvent.change(input, { target: { value: 'November ' } });
await view.user.keyboard('[Backspace]');
expectFieldValueV6(input, 'November DD');
});

Expand Down Expand Up @@ -101,12 +98,10 @@ describe('<DesktopDatePicker /> - Field', () => {
});

describe('slots: field', () => {
const { render, clock } = createPickerRenderer({
clock: 'fake',
const { render } = createPickerRenderer({
clockConfig: new Date('2018-01-01T10:05:05.000'),
});
const { renderWithProps } = buildFieldInteractions({
clock,
render,
Component: DesktopDatePicker,
});
Expand All @@ -128,12 +123,10 @@ describe('<DesktopDatePicker /> - Field', () => {
});

describe('slots: textField', () => {
const { render, clock } = createPickerRenderer({
clock: 'fake',
const { render } = createPickerRenderer({
clockConfig: new Date('2018-01-01T10:05:05.000'),
});
const { renderWithProps } = buildFieldInteractions({
clock,
render,
Component: DesktopDatePicker,
});
Expand Down
3 changes: 1 addition & 2 deletions packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,8 @@ import {
} from '@mui/x-date-pickers/DesktopDateTimePicker';

describe('<DesktopDateTimePicker /> - Field', () => {
const { render, clock } = createPickerRenderer();
const { render } = createPickerRenderer();
const { renderWithProps } = buildFieldInteractions({
clock,
render,
Component: DesktopDateTimePicker,
});
Expand Down
3 changes: 1 addition & 2 deletions packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,8 @@ import {
import { DesktopTimePicker, DesktopTimePickerProps } from '@mui/x-date-pickers/DesktopTimePicker';

describe('<DesktopTimePicker /> - Field', () => {
const { render, clock } = createPickerRenderer();
const { render } = createPickerRenderer();
const { renderWithProps } = buildFieldInteractions({
clock,
render,
Component: DesktopTimePicker,
});
Expand Down
Loading