Merge branch 'master' into clean-validation-api

mui · Sep 5, 2024 · d47cf7a · d47cf7a
2 parents d2405b3 + 2ccdaa3
commit d47cf7a
Show file tree

Hide file tree

Showing 17 changed files with 206 additions and 205 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -27,7 +27,7 @@
     "@emotion/react": "^11.13.3",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.13.0",
-    "@mui/docs": "6.0.1",
+    "@mui/docs": "6.0.2",
     "@mui/icons-material": "^5.16.7",
     "@mui/joy": "^5.0.0-beta.48",
     "@mui/lab": "^5.0.0-alpha.173",
@@ -102,7 +102,7 @@
     "@babel/plugin-transform-react-constant-elements": "^7.25.1",
     "@babel/preset-typescript": "^7.24.7",
     "@mui/internal-docs-utils": "^1.0.12",
-    "@mui/internal-scripts": "^1.0.18",
+    "@mui/internal-scripts": "^1.0.19",
     "@types/chance": "^1.1.6",
     "@types/d3-scale": "^4.0.8",
     "@types/d3-scale-chromatic": "^3.0.3",

diff --git a/package.json b/package.json
@@ -91,8 +91,8 @@
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^5.16.7",
     "@mui/internal-babel-plugin-resolve-imports": "1.0.17",
-    "@mui/internal-markdown": "^1.0.11",
-    "@mui/internal-test-utils": "^1.0.11",
+    "@mui/internal-markdown": "^1.0.12",
+    "@mui/internal-test-utils": "^1.0.12",
     "@mui/material": "^5.16.7",
     "@mui/monorepo": "github:mui/material-ui#f8b2251c5bdfe4d81f56017e0423d265b242617d",
     "@mui/utils": "^5.16.6",
@@ -183,7 +183,7 @@
     "remark": "^13.0.0",
     "rimraf": "^5.0.10",
     "serve": "^14.2.3",
-    "sinon": "^16.1.3",
+    "sinon": "^18.0.0",
     "stream-browserify": "^3.0.0",
     "string-replace-loader": "^3.1.0",
     "terser-webpack-plugin": "^5.3.10",

diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json
@@ -65,7 +65,7 @@
     }
   },
   "devDependencies": {
-    "@mui/internal-test-utils": "^1.0.11",
+    "@mui/internal-test-utils": "^1.0.12",
     "@mui/material": "^5.16.7",
     "@mui/system": "^5.16.7",
     "@react-spring/core": "^9.7.4",

diff --git a/packages/x-data-grid-premium/package.json b/packages/x-data-grid-premium/package.json
@@ -72,7 +72,7 @@
     }
   },
   "devDependencies": {
-    "@mui/internal-test-utils": "^1.0.11",
+    "@mui/internal-test-utils": "^1.0.12",
     "@mui/material": "^5.16.7",
     "@mui/system": "^5.16.7",
     "@types/prop-types": "^15.7.12",

diff --git a/packages/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx
@@ -8,7 +8,7 @@ import {
   DataGridPremiumProps,
   GridActionsCellItem,
 } from '@mui/x-data-grid-premium';
-import { createRenderer, screen, fireEvent, act } from '@mui/internal-test-utils';
+import { createRenderer, screen, act } from '@mui/internal-test-utils';
 import { spy, SinonSpy } from 'sinon';
 import { expect } from 'chai';
 import Excel from 'exceljs';
@@ -17,7 +17,7 @@ import { spyApi } from 'test/utils/helperFn';
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
 describe('<DataGridPremium /> - Export Excel', () => {
-  const { render } = createRenderer({ clock: 'fake' });
+  const { render } = createRenderer();
 
   let apiRef: React.MutableRefObject<GridApi>;
 
@@ -57,10 +57,10 @@ describe('<DataGridPremium /> - Export Excel', () => {
       expect(await act(() => apiRef.current.getDataAsExcel())).not.to.equal(null);
     });
 
-    it('should display export option', () => {
-      render(<TestCaseExcelExport slots={{ toolbar: GridToolbar }} />);
+    it('should display export option', async () => {
+      const { user } = render(<TestCaseExcelExport slots={{ toolbar: GridToolbar }} />);
 
-      fireEvent.click(screen.getByRole('button', { name: 'Export' }));
+      await user.click(screen.getByRole('button', { name: 'Export' }));
       expect(screen.queryByRole('menu')).not.to.equal(null);
       expect(screen.queryByRole('menuitem', { name: 'Download as Excel' })).not.to.equal(null);
     });

diff --git a/packages/x-data-grid-pro/package.json b/packages/x-data-grid-pro/package.json
@@ -70,7 +70,7 @@
     }
   },
   "devDependencies": {
-    "@mui/internal-test-utils": "^1.0.11",
+    "@mui/internal-test-utils": "^1.0.12",
     "@mui/material": "^5.16.7",
     "@mui/system": "^5.16.7",
     "@types/prop-types": "^15.7.12",

diff --git a/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx
@@ -18,7 +18,7 @@ import { getCell, spyApi } from 'test/utils/helperFn';
 import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<DataGridPro /> - Cell editing', () => {
-  const { render, clock } = createRenderer({ clock: 'fake' });
+  const { render, clock } = createRenderer();
 
   let apiRef: React.MutableRefObject<GridApi>;
 
@@ -315,6 +315,8 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       describe('with debounceMs > 0', () => {
+        clock.withFakeTimers();
+
         it('should debounce multiple changes if debounceMs > 0', () => {
           render(<TestCase />);
           act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));

diff --git a/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx
@@ -39,7 +39,7 @@ function createDragOverEvent(target: ChildNode) {
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
 describe('<DataGridPro /> - Column pinning', () => {
-  const { render, clock } = createRenderer({ clock: 'fake' });
+  const { render, clock } = createRenderer();
 
   let apiRef: React.MutableRefObject<GridApi>;
 
@@ -328,11 +328,12 @@ describe('<DataGridPro /> - Column pinning', () => {
   });
 
   describe('prop: disableColumnPinning', () => {
-    it('should not add any button to the column menu', () => {
-      render(<TestCase disableColumnPinning />);
+    it('should not add any button to the column menu', async () => {
+      const { user } = render(<TestCase disableColumnPinning />);
       const columnCell = document.querySelector('[role="columnheader"][data-field="id"]')!;
       const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!;
-      fireEvent.click(menuIconButton);
+
+      await user.click(menuIconButton);
       expect(screen.queryByRole('menuitem', { name: 'Pin to left' })).to.equal(null);
       expect(screen.queryByRole('menuitem', { name: 'Pin to right' })).to.equal(null);
     });
@@ -460,76 +461,80 @@ describe('<DataGridPro /> - Column pinning', () => {
   });
 
   describe('column menu', () => {
-    it('should pin the column to the left when clicking the "Pin to left" pinning button', () => {
-      render(<TestCase />);
+    it('should pin the column to the left when clicking the "Pin to left" pinning button', async () => {
+      const { user } = render(<TestCase />);
       const columnCell = $('[role="columnheader"][data-field="id"]')!;
       const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!;
-      fireEvent.click(menuIconButton);
-      fireEvent.click(screen.getByRole('menuitem', { name: 'Pin to left' }));
+      await user.click(menuIconButton);
+      await user.click(screen.getByRole('menuitem', { name: 'Pin to left' }));
       expect($(`.${gridClasses['cell--pinnedLeft']}[data-field="id"]`)).not.to.equal(null);
     });
 
-    it('should pin the column to the right when clicking the "Pin to right" pinning button', () => {
-      render(<TestCase />);
+    it('should pin the column to the right when clicking the "Pin to right" pinning button', async () => {
+      const { user } = render(<TestCase />);
       const columnCell = $('[role="columnheader"][data-field="id"]')!;
       const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!;
-      fireEvent.click(menuIconButton);
-      fireEvent.click(screen.getByRole('menuitem', { name: 'Pin to right' }));
+      await user.click(menuIconButton);
+      await user.click(screen.getByRole('menuitem', { name: 'Pin to right' }));
       expect($(`.${gridClasses['cell--pinnedRight']}[data-field="id"]`)).not.to.equal(null);
     });
 
-    it('should allow to invert the side when clicking on "Pin to right" pinning button on a left pinned column', () => {
-      render(<TestCase initialState={{ pinnedColumns: { left: ['id'] } }} />);
+    it('should allow to invert the side when clicking on "Pin to right" pinning button on a left pinned column', async () => {
+      const { user } = render(<TestCase initialState={{ pinnedColumns: { left: ['id'] } }} />);
       const columnCell = $('[role="columnheader"][data-field="id"]')!;
       const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!;
-      fireEvent.click(menuIconButton);
-      fireEvent.click(screen.getByRole('menuitem', { name: 'Pin to right' }));
+      await user.click(menuIconButton);
+      await user.click(screen.getByRole('menuitem', { name: 'Pin to right' }));
       expect($(`.${gridClasses['cell--pinnedLeft']}[data-field="id"]`)).to.equal(null);
       expect($(`.${gridClasses['cell--pinnedRight']}[data-field="id"]`)).not.to.equal(null);
     });
 
-    it('should allow to invert the side when clicking on "Pin to left" pinning button on a right pinned column', () => {
-      render(<TestCase initialState={{ pinnedColumns: { right: ['id'] } }} />);
+    it('should allow to invert the side when clicking on "Pin to left" pinning button on a right pinned column', async () => {
+      const { user } = render(<TestCase initialState={{ pinnedColumns: { right: ['id'] } }} />);
       const columnCell = $('[role="columnheader"][data-field="id"]')!;
       const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!;
-      fireEvent.click(menuIconButton);
-      fireEvent.click(screen.getByRole('menuitem', { name: 'Pin to left' }));
+      await user.click(menuIconButton);
+      await user.click(screen.getByRole('menuitem', { name: 'Pin to left' }));
       expect($(`.${gridClasses['cell--pinnedRight']}[data-field="id"]`)).to.equal(null);
       expect($(`.${gridClasses['cell--pinnedLeft']}[data-field="id"]`)).not.to.equal(null);
     });
 
-    it('should allow to unpin a pinned left column when clicking "Unpin" pinning button', () => {
-      render(<TestCase initialState={{ pinnedColumns: { left: ['id'] } }} />);
+    it('should allow to unpin a pinned left column when clicking "Unpin" pinning button', async () => {
+      const { user } = render(<TestCase initialState={{ pinnedColumns: { left: ['id'] } }} />);
       const columnCell = $('[role="columnheader"][data-field="id"]')!;
       const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]')!;
-      fireEvent.click(menuIconButton);
-      fireEvent.click(screen.getByRole('menuitem', { name: 'Unpin' }));
+      await user.click(menuIconButton);
+      await user.click(screen.getByRole('menuitem', { name: 'Unpin' }));
       expect($(`.${gridClasses['cell--pinnedLeft']}[data-field="id"]`)).to.equal(null);
     });
 
-    it('should not render menu items if the column has `pinnable` equals to false', () => {
-      render(
-        <TestCase
-          columns={[
-            { field: 'brand', pinnable: true },
-            { field: 'year', pinnable: false },
-          ]}
-          rows={[{ id: 0, brand: 'Nike', year: 1941 }]}
-        />,
-      );
+    describe('with fake timers', () => {
+      clock.withFakeTimers();
 
-      const brandHeader = document.querySelector('[role="columnheader"][data-field="brand"]')!;
-      fireEvent.click(brandHeader.querySelector('button[aria-label="Menu"]')!);
-      expect(screen.queryByRole('menuitem', { name: 'Pin to left' })).not.to.equal(null);
-      fireEvent.keyDown(screen.getByRole('menu'), { key: 'Escape' });
+      it('should not render menu items if the column has `pinnable` equals to false', () => {
+        render(
+          <TestCase
+            columns={[
+              { field: 'brand', pinnable: true },
+              { field: 'year', pinnable: false },
+            ]}
+            rows={[{ id: 0, brand: 'Nike', year: 1941 }]}
+          />,
+        );
 
-      clock.runToLast();
-      // Ensure that the first menu was closed
-      expect(screen.queryByRole('menuitem', { name: 'Pin to left' })).to.equal(null);
+        const brandHeader = document.querySelector('[role="columnheader"][data-field="brand"]')!;
+        fireEvent.click(brandHeader.querySelector('button[aria-label="Menu"]')!);
+        expect(screen.queryByRole('menuitem', { name: 'Pin to left' })).not.to.equal(null);
+        fireEvent.keyDown(screen.getByRole('menu'), { key: 'Escape' });
 
-      const yearHeader = document.querySelector('[role="columnheader"][data-field="year"]')!;
-      fireEvent.click(yearHeader.querySelector('button[aria-label="Menu"]')!);
-      expect(screen.queryByRole('menuitem', { name: 'Pin to left' })).to.equal(null);
+        clock.runToLast();
+        // Ensure that the first menu was closed
+        expect(screen.queryByRole('menuitem', { name: 'Pin to left' })).to.equal(null);
+
+        const yearHeader = document.querySelector('[role="columnheader"][data-field="year"]')!;
+        fireEvent.click(yearHeader.querySelector('button[aria-label="Menu"]')!);
+        expect(screen.queryByRole('menuitem', { name: 'Pin to left' })).to.equal(null);
+      });
     });
   });