@mui/x-date-pickers 6

ukrbublik · Jul 21, 2023 · 5e75210 · 5e75210
1 parent 7ed3589
commit 5e75210
Show file tree

Hide file tree

Showing 7 changed files with 148 additions and 112 deletions.
diff --git a/packages/examples/package.json b/packages/examples/package.json
@@ -35,10 +35,11 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@material-ui/pickers": "^3.3.10",
+    "@mui/base": "^5.0.0-beta.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.3",
     "@mui/system": "^5.12.3",
-    "@mui/x-date-pickers": "^5.0.20",
+    "@mui/x-date-pickers": "^6.3.1",
     "@popperjs/core": "^2.11.6",
     "@react-awesome-query-builder/antd": "workspace:^",
     "@react-awesome-query-builder/bootstrap": "workspace:^",

diff --git a/packages/mui/package.json b/packages/mui/package.json
@@ -66,10 +66,11 @@
     "@babel/runtime": "^7.14.5",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
+    "@mui/base": "^5.0.0-beta.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.3",
     "@mui/system": "^5.12.3",
-    "@mui/x-date-pickers": "^5.0.20",
+    "@mui/x-date-pickers": "^6.3.1",
     "@types/react": "^17.0.39",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

diff --git a/packages/sandbox/package.json b/packages/sandbox/package.json
@@ -36,10 +36,11 @@
     "@ant-design/icons": "^4.7.0",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
+    "@mui/base": "^5.0.0-beta.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.3",
     "@mui/system": "^5.12.3",
-    "@mui/x-date-pickers": "^5.0.20",
+    "@mui/x-date-pickers": "^6.3.1",
     "@react-awesome-query-builder/antd": "workspace:^",
     "@react-awesome-query-builder/mui": "workspace:^",
     "antd": "^5.1.2",

diff --git a/packages/sandbox_next/package.json b/packages/sandbox_next/package.json
@@ -35,10 +35,11 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
+    "@mui/base": "^5.0.0-beta.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.3",
     "@mui/system": "^5.12.3",
-    "@mui/x-date-pickers": "^5.0.20",
+    "@mui/x-date-pickers": "^6.3.1",
     "@react-awesome-query-builder/core": "workspace:^",
     "@react-awesome-query-builder/mui": "workspace:^",
     "lodash": "^4.17.21",

diff --git a/packages/tests/package.json b/packages/tests/package.json
@@ -34,10 +34,11 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@material-ui/pickers": "^3.3.10",
+    "@mui/base": "^5.0.0-beta.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.3",
     "@mui/system": "^5.12.3",
-    "@mui/x-date-pickers": "^5.0.20",
+    "@mui/x-date-pickers": "^6.3.1",
     "@popperjs/core": "^2.11.6",
     "@react-awesome-query-builder/antd": "workspace:^",
     "@react-awesome-query-builder/bootstrap": "workspace:^",

diff --git a/packages/tests/specs/WidgetsMui.test.ts b/packages/tests/specs/WidgetsMui.test.ts
@@ -41,12 +41,23 @@ describe("mui widgets interactions", () => {
       }
 
       // click on 3rd week, 2nd day of week (should be sunday, 10 day for default US locale)
-      const dayBtn = document.querySelector<HTMLElement>(
-        ".MuiCalendarPicker-root" 
-        + " .MuiDayPicker-monthContainer"
-        + " .MuiDayPicker-weekContainer:nth-child(3)" 
+      let dayBtn;
+      // v6
+      dayBtn = document.querySelector<HTMLElement>(
+        ".MuiDateCalendar-root" 
+        + " .MuiDayCalendar-monthContainer"
+        + " .MuiDayCalendar-weekContainer:nth-child(3)" 
         + " > .MuiPickersDay-root:nth-child(2)" 
       );
+      // v5
+      if (!dayBtn) {
+        dayBtn = document.querySelector<HTMLElement>(
+          ".MuiCalendarPicker-root" 
+          + " .MuiDayPicker-monthContainer"
+          + " .MuiDayPicker-weekContainer:nth-child(3)" 
+          + " > .MuiPickersDay-root:nth-child(2)" 
+        );
+      }
       expect(dayBtn, "dayBtn").to.exist;
       expect(dayBtn?.innerText, "dayBtn").to.eq("11");
       dayBtn?.click();
@@ -79,15 +90,54 @@ describe("mui widgets interactions", () => {
       expect(timeInput, "timeInput").to.have.length(1);
       timeInput.simulate("click");
       const clockPicker = document.querySelector<HTMLElement>(".MuiClockPicker-root");
+      const clockBtn = qb.find(".rule--widget--TIME .MuiInputAdornment-root .MuiButtonBase-root");
+      let changeIndex = 0;
       if (clockPicker) {
-        // mobile mode
+        // v5 mobile mode
         // should not happen, see `desktopModeMediaQuery`
         if (window?.matchMedia?.("(pointer:none)")?.matches) {
           throw new Error("Pointer media feature is neither coarse nor fine");
         }
         this.skip();
+      } else if (clockBtn.length) {
+        // v6 desktop mode
+        clockBtn.at(0).simulate("click");
+        const dclockPicker = document.querySelector<HTMLElement>(".MuiMultiSectionDigitalClock-root");
+        expect(dclockPicker, "dclockPicker").to.exist;
+
+        const hourBtn = document.querySelector<HTMLElement>(
+          ".MuiMultiSectionDigitalClock-root" 
+          + " > .MuiMultiSectionDigitalClock-root:nth-child(1)" 
+          + " > .MuiMenuItem-root:nth-child(11)" 
+        );
+        expect(hourBtn, "hourBtn").to.exist;
+        expect(hourBtn?.innerText, "hourBtn").to.eq("10");
+        hourBtn?.click();
+
+        const minBtn = document.querySelector<HTMLElement>(
+          ".MuiMultiSectionDigitalClock-root" 
+          + " > .MuiMultiSectionDigitalClock-root:nth-child(2)" 
+          + " > .MuiMenuItem-root:nth-child(7)" 
+        );
+        expect(minBtn, "minBtn").to.exist;
+        expect(minBtn?.innerText, "minBtn").to.eq("30");
+        minBtn?.click();
+
+        const okBtn = document.querySelector<HTMLElement>(
+          ".MuiPickersLayout-root"
+          + " .MuiDialogActions-root" 
+          + " .MuiButton-root" 
+        );
+        expect(okBtn, "okBtn").to.exist;
+        okBtn?.click();
+
+        const timeInputValue = timeInput.getDOMNode().getAttribute("value");
+        expect(timeInputValue, "timeInputValue").to.eq("10:30");
+
+        // for v6 onChange is fired 2 times: on hour change and on time change
+        changeIndex = 1;
       } else {
-        // desktop mode
+        // v5 desktop mode
         qb
           .find(".rule--widget--TIME .MuiInput-input")
           .at(1)
@@ -96,7 +146,7 @@ describe("mui widgets interactions", () => {
 
       expect_jlogic([null,
         { "and": [{ "==": [ { "var": "time" }, 60*60*10+60*30 ] }] }
-      ]);
+      ], changeIndex);
     }, {
       ignoreLog: ignoreLogDatePicker,
     });