[core] Allows to run tests with different date adapters #5055

alexfauquette · 2022-05-31T08:14:19Z

Allows to test bugs such as #4890 locally for now

to run unit test with a specific adapter, use yarn test:unit --date-adapter moment (or luxon, day-js, date-fns)

mui-bot · 2022-05-31T08:22:30Z

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	261	717.8	363.1	407.46	162.172
Sort 100k rows	ms	519	837	784.5	730.76	113.194
Select 100k rows	ms	115.3	207.6	184.8	175.12	31.268
Deselect 100k rows	ms	107.1	260	192	181.54	50.133

Generated by 🚫 dangerJS against 236dc9b

alexfauquette · 2022-05-31T11:39:17Z

packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.test.tsx

@@ -22,7 +22,7 @@ const WrappedDesktopDateTimePicker = withPickerControls(DesktopDateTimePicker)({
 describe('<DesktopDateTimePicker />', () => {
  const { render } = createPickerRenderer({
    clock: 'fake',
-    clockConfig: adapterToUse.date('2018-01-01T00:00:00.000').getTime(),
+    clockConfig: new Date('2018-01-01T00:00:00.000'),


getTime is a date-fns method (note date-io), so this line was silently bugging when trying to run tests with another library

getTime is a method from Date: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime

Do you know which error you had when using it?

cherniavskii · 2022-06-02T12:15:02Z

test/utils/pickers-utils.tsx

+let adapter = 'date-fns';
+
+// Check if we are in unit tests
+if (typeof window === 'undefined') {


Suggested change

if (typeof window === 'undefined') {

if (/jsdom/.test(window.navigator.userAgent)) {

Should we check for jsdom instead?
When I run yarn test:unit locally, typeof window === 'undefined' returns false

Yes, I was looking for a way to distinguish karma and unit 👍

Actually, can we make it work with test:karma as well?
I guess we will have to pass an env variable in karma.conf.js and will complicate things a bit.
What do you think?

That would be nice, but for another PR Could be nice to make test pass with other libraries on master
And before that we should make unit test pass with the current code base which not the case

Yeah, it can be addressed in separate PR

And before that we should make unit test pass with the current code base which not the case

You mean to make unit tests pass with each of the adapters?

Yes. For example some tests do not pass because some libraries use uppercase AM/PM and others use am/pm

m4theushw · 2022-06-08T19:40:08Z

A few tests started to fail on master after the merge: https://app.circleci.com/pipelines/github/mui/mui-x/19557/workflows/adb35993-41aa-456f-b9d2-620f79d72cbd/jobs/113721

alexfauquette · 2022-06-08T21:05:53Z

Probably the clockConfig: new Date('2018-01-01T00:00:00.000') that provide different results in Safari

What about using new Date(2018, 0, 1)?

cherniavskii · 2022-06-09T10:02:47Z

@alexfauquette let me check it in Safari

cherniavskii · 2022-06-09T11:43:26Z

Ok, few observation from me:

I couldn't reproduce the issue locally in Safari 15 (in BrowserStack we use Safari 13). There's no way to install older version of Safari on MacOS, since Webkit is built into OS.

I've tried to run one test locally through BrowserStack Safari and log the start date that we pass to the picker:

diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx
index 0032283579..fcd8c96333 100644
--- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx
+++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx
@@ -104,14 +104,14 @@ describe('<DesktopDateRangePicker />', () => {
 
   // TODO: Move to DayPicker test file ?
   describe('selection behavior', () => {
-    it('should select the range from the next month', () => {
+    it.only('should select the range from the next month', () => {
       const handleChange = spy();
 
+      const startDate = adapterToUse.date('2019-01-01T00:00:00.000');
+      console.log('startDate', startDate);
+
       render(
-        <WrappedDesktopDateRangePicker
-          onChange={handleChange}
-          initialValue={[adapterToUse.date('2019-01-01T00:00:00.000'), null]}
-        />,
+        <WrappedDesktopDateRangePicker onChange={handleChange} initialValue={[startDate, null]} />,
       );

This resulted in the following output:

Safari 13.1.2 (Mac OS 10.15.6) WARN: 'including inaccessible elements by default'
  LOG: 'startDate', Tue Jan 01 2019 11:00:00 GMT+1100 (AEDT)
  Safari 13.1.2 (Mac OS 10.15.6) <DesktopDateRangePicker /> selection behavior should select the range from the next month FAILED
          expected '2018-12-31T13:00:00.000Z' to equal '2019-01-01T00:00:00.000Z'
          AssertionError
  
          assertEqual
          methodWrapper
          [native code]
          toEqualDateTime
          methodWrapper
          [native code]
  
  Safari 13.1.2 (Mac OS 10.15.6): Executed 1 of 1438 (1 FAILED) (1.338 secs / 1.308 secs)

Which shows that the timezone in Safari is AEDT.

I've tried to change timezone on my machine to AEDT and run the same test through BrowserStack Safari, but it resulted in the same output as in 2 above.

I'm not sure why it's failing, but I tend to think it's related to the timezone somehow (maybe related to this? karma-runner/karma-browserstack-launcher#187)
UPDATE: I've run same test on BrowserStack Safari 14(os_version: Big Sur) and tests passed:

Safari 14.1.2 (Mac OS 10.15.7) WARN: 'including inaccessible elements by default'
LOG: 'startDate', Tue Jan 01 2019 00:00:00 GMT+1100 (AEDT)
.
Safari 14.1.2 (Mac OS 10.15.7): Executed 1 of 1438 SUCCESS (1.814 secs / 1.717 secs)

cherniavskii · 2022-06-09T11:52:22Z

According to our browserslist we support Safari 14:

mui-x/.browserslistrc

Line 29 in b5be28e

safari 14

Same with Supported platforms on MUI website: https://mui.com/material-ui/getting-started/supported-platforms/#browser

So I think it's safe to update Safari version in BrowserStack.

cherniavskii · 2022-06-09T11:58:46Z

I've run all test in Safari 14 and some Data Grid tests fail:

Safari 14.1.2 (Mac OS 10.15.7) WARN: 'including inaccessible elements by default'
................................................................................
................................................................................
................................................................................
................................................................................
.........................................
Safari 14.1.2 (Mac OS 10.15.7) <DataGridPro /> - Edit Components column type: date should call setEditCellValue with the value converted to Date FAILED
        null is not an object (evaluating 'spiedSetEditCellValue.lastCall.args')
Safari 14.1.2 (Mac OS 10.15.7) <DataGridPro /> - Edit Components column type: date should call setEditCellValue with null when entered an empty value FAILED
        null is not an object (evaluating 'spiedSetEditCellValue.lastCall.args')
.
Safari 14.1.2 (Mac OS 10.15.7) <DataGridPro /> - Edit Components column type: date should handle correctly dates with partial years FAILED
        null is not an object (evaluating 'spiedSetEditCellValue.lastCall.args')
Safari 14.1.2 (Mac OS 10.15.7) <DataGridPro /> - Edit Components column type: date should call onValueChange if defined FAILED
        expected +0 to equal 1
        AssertionError

        assertEqual
        methodWrapper
        [native code]

        asyncFunctionResume@[native code]
        [native code]
        promiseReactionJobWithoutPromise@[native code]
        promiseReactionJob@[native code]
Safari 14.1.2 (Mac OS 10.15.7) <DataGridPro /> - Edit Components column type: dateTime should call setEditCellValue with the value converted to Date FAILED
        null is not an object (evaluating 'spiedSetEditCellValue.lastCall.args')
Safari 14.1.2 (Mac OS 10.15.7) <DataGridPro /> - Edit Components column type: dateTime should call setEditCellValue with null when entered an empty value FAILED
        null is not an object (evaluating 'spiedSetEditCellValue.lastCall.args')
.
Safari 14.1.2 (Mac OS 10.15.7) <DataGridPro /> - Edit Components column type: dateTime should handle correctly dates with partial years FAILED
        null is not an object (evaluating 'spiedSetEditCellValue.lastCall.args')
....................
Safari 14.1.2 (Mac OS 10.15.7) <DataGridPro /> - Edit Components column type: date should call onEditCellPropsChange with the value entered as a Date FAILED
        undefined is not an object (evaluating 'onEditCellPropsChange.args[0][0]')
Safari 14.1.2 (Mac OS 10.15.7) <DataGridPro /> - Edit Components column type: date should call onEditCellPropsChange with null when entered an empty value FAILED
        undefined is not an object (evaluating 'onEditCellPropsChange.args[0][0]')
..
Safari 14.1.2 (Mac OS 10.15.7) <DataGridPro /> - Edit Components column type: date should handle all the intermediate dates while editing the value FAILED
        null is not an object (evaluating 'onEditCellPropsChange.lastCall.args')
Safari 14.1.2 (Mac OS 10.15.7) <DataGridPro /> - Edit Components column type: date should call preProcessEditCellProps once if it resolves with an error and preventCommitWhileValidating=true FAILED
        expected 1625407200000 to equal 1641906000000
        AssertionError

        assertEqual
        methodWrapper
        [native code]

        asyncFunctionResume@[native code]
        [native code]
        promiseReactionJobWithoutPromise@[native code]
        promiseReactionJob@[native code]
Safari 14.1.2 (Mac OS 10.15.7) <DataGridPro /> - Edit Components column type: dateTime should call onEditCellPropsChange with the value entered as a Date FAILED
        undefined is not an object (evaluating 'onEditCellPropsChange.args[0][0]')
Safari 14.1.2 (Mac OS 10.15.7) <DataGridPro /> - Edit Components column type: dateTime should call onEditCellPropsChange with null when entered an empty value FAILED
        undefined is not an object (evaluating 'onEditCellPropsChange.args[0][0]')
..
Safari 14.1.2 (Mac OS 10.15.7) <DataGridPro /> - Edit Components column type: dateTime should handle all the intermediate dates while editing the value FAILED
        null is not an object (evaluating 'onEditCellPropsChange.lastCall.args')
................................................................................
................................................................................
................................................................................
................................................................................
................................................................................
................................................................................
................................................................................
................................................................................
................................................................................
................................................................................
................................................................................
................................................................................
..........................................
Safari 14.1.2 (Mac OS 10.15.7): Executed 1403 of 1438 (14 FAILED) (skipped 35) (3 mins 30.967 secs / 3 mins 8.414 secs)

m4theushw · 2022-06-09T14:10:23Z

We had some problems in the past with BrowserStack using a different locale on Edge: #1665 (comment)

It might be a similar reason here. The date passed to adapterToUse.date doesn't have the timezone. Does it assume GMT?

cherniavskii · 2022-06-10T11:50:48Z

We had some problems in the past with BrowserStack using a different locale on Edge: #1665 (comment)

It might be a similar reason here

It looks like it was a Safari issue, since tests that failed in Safari 13 passed in Safari 14 (but other tests started to fail in Safari 14 😀)

remove fixed workaround

6414283

alexfauquette added 2 commits May 31, 2022 13:34

allows to choose library to run tests

3ea0cf7

test all default masks

859887a

alexfauquette force-pushed the testing-libraries branch from 8bd046f to 62f56ea Compare May 31, 2022 11:35

alexfauquette commented May 31, 2022

View reviewed changes

alexfauquette force-pushed the testing-libraries branch from 62f56ea to 859887a Compare May 31, 2022 12:23

alexfauquette added 2 commits May 31, 2022 15:02

replace yargs to allow using karma

7e21abd

fix types

d751857

alexfauquette marked this pull request as ready for review May 31, 2022 14:12

alexfauquette requested review from flaviendelangle, cherniavskii and m4theushw May 31, 2022 14:12

cherniavskii reviewed Jun 2, 2022

View reviewed changes

alexfauquette mentioned this pull request Jun 7, 2022

[pickers] Infer mask from inputFormat #5060

Merged

flaviendelangle approved these changes Jun 8, 2022

View reviewed changes

Andrew feedback

236dc9b

alexfauquette merged commit 8623b45 into mui:master Jun 8, 2022

alexfauquette deleted the testing-libraries branch June 8, 2022 09:12

joserodolfofreitas pushed a commit to joserodolfofreitas/mui-x that referenced this pull request Jun 13, 2022

[core] Allows to run tests with different date adapters (mui#5055)

0c57145

m4theushw mentioned this pull request Jun 17, 2022

[test] Fix date assertion in Safari 13 #5221

Merged

cherniavskii mentioned this pull request Jun 22, 2022

[test] Throw if date adapter is not found #5289

Merged

alexfauquette added a commit to alexfauquette/mui-x that referenced this pull request Aug 26, 2022

[core] Allows to run tests with different date adapters (mui#5055)

3423f49

zannager added core Infrastructure work going on behind the scenes component: pickers This is the name of the generic UI component, not the React module! labels Jan 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[core] Allows to run tests with different date adapters #5055

[core] Allows to run tests with different date adapters #5055

alexfauquette commented May 31, 2022 •

edited

Loading

mui-bot commented May 31, 2022 •

edited

Loading

alexfauquette May 31, 2022

m4theushw Jun 16, 2022 •

edited

Loading

cherniavskii Jun 2, 2022

alexfauquette Jun 2, 2022

cherniavskii Jun 2, 2022

alexfauquette Jun 2, 2022

cherniavskii Jun 2, 2022

alexfauquette Jun 3, 2022

m4theushw commented Jun 8, 2022 •

edited

Loading

alexfauquette commented Jun 8, 2022

cherniavskii commented Jun 9, 2022

cherniavskii commented Jun 9, 2022 •

edited

Loading

cherniavskii commented Jun 9, 2022

cherniavskii commented Jun 9, 2022

m4theushw commented Jun 9, 2022

cherniavskii commented Jun 10, 2022

	if (typeof window === 'undefined') {
	if (/jsdom/.test(window.navigator.userAgent)) {

[core] Allows to run tests with different date adapters #5055

[core] Allows to run tests with different date adapters #5055

Conversation

alexfauquette commented May 31, 2022 • edited Loading

mui-bot commented May 31, 2022 • edited Loading

alexfauquette May 31, 2022

Choose a reason for hiding this comment

m4theushw Jun 16, 2022 • edited Loading

Choose a reason for hiding this comment

cherniavskii Jun 2, 2022

Choose a reason for hiding this comment

alexfauquette Jun 2, 2022

Choose a reason for hiding this comment

cherniavskii Jun 2, 2022

Choose a reason for hiding this comment

alexfauquette Jun 2, 2022

Choose a reason for hiding this comment

cherniavskii Jun 2, 2022

Choose a reason for hiding this comment

alexfauquette Jun 3, 2022

Choose a reason for hiding this comment

m4theushw commented Jun 8, 2022 • edited Loading

alexfauquette commented Jun 8, 2022

cherniavskii commented Jun 9, 2022

cherniavskii commented Jun 9, 2022 • edited Loading

cherniavskii commented Jun 9, 2022

cherniavskii commented Jun 9, 2022

m4theushw commented Jun 9, 2022

cherniavskii commented Jun 10, 2022

alexfauquette commented May 31, 2022 •

edited

Loading

mui-bot commented May 31, 2022 •

edited

Loading

m4theushw Jun 16, 2022 •

edited

Loading

m4theushw commented Jun 8, 2022 •

edited

Loading

cherniavskii commented Jun 9, 2022 •

edited

Loading