From b178b7f4463d1ebc1dc60e5c9448db6bd79805b1 Mon Sep 17 00:00:00 2001 From: Lauri Date: Fri, 31 Jan 2025 23:27:52 +0100 Subject: [PATCH] [test] Disable `react-transition-group` transitions in unit testing (#16288) Signed-off-by: Lukas Tyla Co-authored-by: Lukas Co-authored-by: Jan Potoms <2109932+Janpot@users.noreply.github.com> --- packages/x-data-grid-premium/package.json | 2 + .../src/tests/DataGridPremium.test.tsx | 4 +- ...SourceAggregation.DataGridPremium.test.tsx | 2 +- .../tests/license.DataGridPremium.test.tsx | 8 +- .../rowGrouping.DataGridPremium.test.tsx | 45 +++++---- packages/x-data-grid-pro/package.json | 2 + .../tests/cellEditing.DataGridPro.test.tsx | 12 +-- .../tests/columnHeaders.DataGridPro.test.tsx | 8 ++ .../tests/detailPanel.DataGridPro.test.tsx | 14 +-- .../tests/editComponents.DataGridPro.test.tsx | 4 +- .../src/tests/license.DataGridPro.test.tsx | 8 +- .../src/tests/rowEditing.DataGridPro.test.tsx | 12 +-- .../src/tests/rowPinning.DataGridPro.test.tsx | 32 +++--- .../src/tests/columnHeaders.DataGrid.test.tsx | 6 +- .../src/tests/keyboard.DataGrid.test.tsx | 30 +++--- .../src/tests/layout.DataGrid.test.tsx | 12 +-- .../src/tests/rowSelection.DataGrid.test.tsx | 2 +- .../src/tests/rows.DataGrid.test.tsx | 99 +++++++++---------- pnpm-lock.yaml | 15 +++ test/package.json | 1 + test/utils/mochaHooks.js | 13 ++- 21 files changed, 176 insertions(+), 155 deletions(-) diff --git a/packages/x-data-grid-premium/package.json b/packages/x-data-grid-premium/package.json index bb0acb591542f..eba80dc3aa313 100644 --- a/packages/x-data-grid-premium/package.json +++ b/packages/x-data-grid-premium/package.json @@ -76,9 +76,11 @@ "@mui/material": "^5.16.14", "@mui/system": "^5.16.14", "@types/prop-types": "^15.7.14", + "@types/react-transition-group": "^4.4.12", "date-fns": "^4.1.0", "react": "^19.0.0", "react-dom": "^19.0.0", + "react-transition-group": "^4.4.5", "rimraf": "^6.0.1" }, "engines": { diff --git a/packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx index 512fa6ad52be8..49dd2f6a182e9 100644 --- a/packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { RefObject } from '@mui/x-internals/types'; -import { createRenderer, act, waitFor } from '@mui/internal-test-utils'; +import { createRenderer, act } from '@mui/internal-test-utils'; import { expect } from 'chai'; import { DataGridPremium as DataGrid, @@ -104,6 +104,6 @@ describe(' - Quick filter', () => { }, }); - await waitFor(() => expect(getColumnValues(0)).to.deep.equal(['20th Century Fox (1)', ''])); + expect(getColumnValues(0)).to.deep.equal(['20th Century Fox (1)', '']); }); }); diff --git a/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx index a46c1cd88128d..c96c589ce3ad2 100644 --- a/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx @@ -114,7 +114,7 @@ describe(' - Data source aggregation', () => { expect(fetchRowsSpy.callCount).to.be.greaterThan(0); }); await user.click(within(getColumnHeaderCell(0)).getByLabelText('Menu')); - expect(screen.queryByLabelText('Aggregation')).not.to.equal(null); + expect(await screen.findByLabelText('Aggregation')).not.to.equal(null); }); it('should not show aggregation option in the column menu when no aggregation function is defined', async () => { diff --git a/packages/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx index 9a230483cda99..873a63be4beeb 100644 --- a/packages/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { addYears } from 'date-fns/addYears'; import { expect } from 'chai'; -import { createRenderer, screen, waitFor } from '@mui/internal-test-utils'; +import { createRenderer, screen } from '@mui/internal-test-utils'; import { DataGridPremium } from '@mui/x-data-grid-premium'; import { generateLicense, LicenseInfo } from '@mui/x-license'; @@ -23,15 +23,13 @@ describe(' - License', () => { ]); }); - it('should render watermark when the license is missing', async () => { + it('should render watermark when the license is missing', () => { LicenseInfo.setLicenseKey(''); expect(() => render()).toErrorDev([ 'MUI X: Missing license key.', ]); - await waitFor(() => { - expect(screen.getByText('MUI X Missing license key')).not.to.equal(null); - }); + expect(screen.getByText('MUI X Missing license key')).not.to.equal(null); }); }); diff --git a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx index 79e7b2ced4eb1..e3249649030a6 100644 --- a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx @@ -1,13 +1,7 @@ import * as React from 'react'; +import { config } from 'react-transition-group'; import { RefObject } from '@mui/x-internals/types'; -import { - createRenderer, - fireEvent, - screen, - act, - waitFor, - reactMajor, -} from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, screen, act, reactMajor } from '@mui/internal-test-utils'; import { microtasks, getColumnHeaderCell, @@ -1792,6 +1786,10 @@ describe(' - Row grouping', () => { }); it('should add a "Stop grouping {field}" menu item for each grouping criteria on the grouping column when prop.rowGroupingColumnMode = "single"', () => { + const restoreDisabledConfig = config.disabled; + // enable `react-transition-group` transitions for this test + config.disabled = false; + render( - Row grouping', () => { }); fireEvent.click(menuItemCategory2); expect(apiRef.current?.state.rowGrouping.model).to.deep.equal([]); + + // restore previous config + config.disabled = restoreDisabledConfig; }); it('should add a "Stop grouping {field}" menu item for each grouping criteria with colDef.groupable = false but it should be disabled', () => { @@ -2891,14 +2892,16 @@ describe(' - Row grouping', () => { />, ); - act(() => apiRef.current?.updateRows([{ id: 1, group: 'A', username: 'username 2' }])); + await act(async () => { + apiRef.current?.updateRows([{ id: 1, group: 'A', username: 'username 2' }]); + }); - await waitFor(() => expect(getCell(1, 3).textContent).to.equal('username 2')); + expect(getCell(1, 3).textContent).to.equal('username 2'); }); // See https://github.com/mui/mui-x/issues/8580 it('should not collapse expanded groups after `updateRows`', async () => { - render( + const { user } = render( - Row grouping', () => { />, ); - fireEvent.click(screen.getByRole('button', { name: 'see children' })); + await user.click(screen.getByRole('button', { name: 'see children' })); - act(() => apiRef.current?.updateRows([{ id: 1, group: 'A', username: 'username 2' }])); - - await waitFor(() => { - expect(screen.getByRole('button', { name: 'hide children' })).toBeVisible(); + await act(async () => { + apiRef.current?.updateRows([{ id: 1, group: 'A', username: 'username 2' }]); }); - await waitFor(() => expect(getCell(1, 3).textContent).to.equal('username 2')); + + expect(screen.getByRole('button', { name: 'hide children' })).toBeVisible(); + expect(getCell(1, 3).textContent).to.equal('username 2'); }); // See https://github.com/mui/mui-x/issues/8853 @@ -2933,10 +2936,10 @@ describe(' - Row grouping', () => { expect(getColumnValues(3)).to.deep.equal(['', 'username1', 'username2']); // trigger row update without any changes in row data - act(() => apiRef.current?.updateRows([{ id: 1 }])); - - await waitFor(() => { - expect(getColumnValues(3)).to.deep.equal(['', 'username1', 'username2']); + await act(async () => { + apiRef.current?.updateRows([{ id: 1 }]); }); + + expect(getColumnValues(3)).to.deep.equal(['', 'username1', 'username2']); }); }); diff --git a/packages/x-data-grid-pro/package.json b/packages/x-data-grid-pro/package.json index 75cb7cd2fc9bc..3f97a4284f95d 100644 --- a/packages/x-data-grid-pro/package.json +++ b/packages/x-data-grid-pro/package.json @@ -74,8 +74,10 @@ "@mui/material": "^5.16.14", "@mui/system": "^5.16.14", "@types/prop-types": "^15.7.14", + "@types/react-transition-group": "^4.4.12", "react": "^19.0.0", "react-dom": "^19.0.0", + "react-transition-group": "^4.4.5", "rimraf": "^6.0.1" }, "engines": { 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 index 4e4d5624dab66..6a9f263ae738e 100644 --- a/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx @@ -14,7 +14,7 @@ import { GridColDef, } from '@mui/x-data-grid-pro'; import { getBasicGridData } from '@mui/x-data-grid-generator'; -import { createRenderer, fireEvent, act, waitFor } from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, act } from '@mui/internal-test-utils'; import { getCell, spyApi } from 'test/utils/helperFn'; import { fireUserEvent } from 'test/utils/fireUserEvent'; @@ -906,15 +906,13 @@ describe(' - Cell editing', () => { it('should call preProcessEditCellProps', async () => { const preProcessEditCellProps = spy(({ props }: GridPreProcessEditCellProps) => props); - render(); + const { user } = render(); const cell = getCell(0, 1); - fireUserEvent.mousePress(cell); - fireEvent.keyDown(cell, { key: 'Delete' }); + await user.click(cell); + await user.keyboard('{Delete}'); - await waitFor(() => { - expect(preProcessEditCellProps.callCount).to.equal(1); - }); + expect(preProcessEditCellProps.callCount).to.equal(1); expect(preProcessEditCellProps.lastCall.args[0].props).to.deep.equal({ value: '', diff --git a/packages/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx index 941db99c7893d..c8c5a7105eae7 100644 --- a/packages/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { config } from 'react-transition-group'; import { createRenderer, fireEvent, screen } from '@mui/internal-test-utils'; import { expect } from 'chai'; import { gridClasses, DataGridPro, DataGridProProps } from '@mui/x-data-grid-pro'; @@ -198,6 +199,10 @@ describe(' - Column headers', () => { }); it('should remove the MuiDataGrid-menuOpen CSS class only after the transition has ended', () => { + const restoreDisabledConfig = config.disabled; + // enable `react-transition-group` transitions for this test + config.disabled = false; + render(
@@ -212,6 +217,9 @@ describe(' - Column headers', () => { expect(menuIconButton?.parentElement).to.have.class(gridClasses.menuOpen); clock.runToLast(); // Wait for the transition to run expect(menuIconButton?.parentElement).not.to.have.class(gridClasses.menuOpen); + + // restore previous config + config.disabled = restoreDisabledConfig; }); it('should restore focus to the column header when dismissing the menu by selecting any item', () => { diff --git a/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx index d148b7092aa52..b674feba8ef9e 100644 --- a/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx @@ -122,7 +122,7 @@ describe(' - Detail panel', () => { ); } const rowHeight = 50; - render( + const { user } = render( - Detail panel', () => { />, ); const virtualScrollerContent = grid('virtualScrollerContent')!; - fireEvent.click(screen.getByRole('button', { name: 'Expand' })); + await user.click(screen.getByRole('button', { name: 'Expand' })); - await waitFor(() => { - expect(getRow(0).className).to.include(gridClasses['row--detailPanelExpanded']); - }); + expect(getRow(0).className).to.include(gridClasses['row--detailPanelExpanded']); - await waitFor(() => { - expect(virtualScrollerContent).toHaveComputedStyle({ height: `${rowHeight + 100}px` }); - }); + expect(virtualScrollerContent).toHaveComputedStyle({ height: `${rowHeight + 100}px` }); expect(virtualScrollerContent).toHaveInlineStyle({ width: 'auto' }); const detailPanels = $$('.MuiDataGrid-detailPanel'); @@ -147,7 +143,7 @@ describe(' - Detail panel', () => { height: `100px`, }); - fireEvent.click(screen.getByRole('button', { name: 'Increase' })); + await user.click(screen.getByRole('button', { name: 'Increase' })); await waitFor(() => { expect(virtualScrollerContent).toHaveComputedStyle({ height: `${rowHeight + 200}px` }); diff --git a/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx index 0be5f09ce15e2..cd53cd71d0bfe 100644 --- a/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx @@ -598,8 +598,8 @@ describe(' - Edit components', () => { const cell = getCell(0, 0); await user.dblClick(cell); await user.click(screen.queryAllByRole('option')[1]); - await waitFor(() => expect(screen.queryByRole('listbox')).to.equal(null)); - await act(() => { + expect(screen.queryByRole('listbox')).to.equal(null); + await act(async () => { screen.getByRole('combobox').focus(); }); await user.keyboard('{Enter}'); diff --git a/packages/x-data-grid-pro/src/tests/license.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/license.DataGridPro.test.tsx index e65d7ff55bf09..be77d8d2634fa 100644 --- a/packages/x-data-grid-pro/src/tests/license.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/license.DataGridPro.test.tsx @@ -1,21 +1,19 @@ import * as React from 'react'; import { expect } from 'chai'; -import { createRenderer, screen, waitFor } from '@mui/internal-test-utils'; +import { createRenderer, screen } from '@mui/internal-test-utils'; import { DataGridPro } from '@mui/x-data-grid-pro'; import { LicenseInfo } from '@mui/x-license'; describe(' - License', () => { const { render } = createRenderer(); - it('should render watermark when the license is missing', async () => { + it('should render watermark when the license is missing', () => { LicenseInfo.setLicenseKey(''); expect(() => render()).toErrorDev([ 'MUI X: Missing license key.', ]); - await waitFor(() => { - expect(screen.getByText('MUI X Missing license key')).not.to.equal(null); - }); + expect(screen.getByText('MUI X Missing license key')).not.to.equal(null); }); }); diff --git a/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx index 0fbc5d8c13761..869273b9c5806 100644 --- a/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx @@ -14,7 +14,7 @@ import { } from '@mui/x-data-grid-pro'; import Portal from '@mui/material/Portal'; import { getBasicGridData } from '@mui/x-data-grid-generator'; -import { createRenderer, fireEvent, act, screen, waitFor } from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, act, screen } from '@mui/internal-test-utils'; import { getCell, getRow, spyApi } from 'test/utils/helperFn'; import { fireUserEvent } from 'test/utils/fireUserEvent'; @@ -910,15 +910,13 @@ describe(' - Row editing', () => { it('should call preProcessEditCellProps', async () => { const preProcessEditCellProps = spy(({ props }: GridPreProcessEditCellProps) => props); - render(); + const { user } = render(); const cell = getCell(0, 1); - fireUserEvent.mousePress(cell); - fireEvent.keyDown(cell, { key: 'Delete' }); + await user.click(cell); + await user.keyboard('{Delete}'); - await waitFor(() => { - expect(preProcessEditCellProps.callCount).to.equal(1); - }); + expect(preProcessEditCellProps.callCount).to.equal(1); expect(preProcessEditCellProps.lastCall.args[0].props).to.deep.equal({ value: '', diff --git a/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx index 01edc569998e0..5dcd741ed28fa 100644 --- a/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx @@ -12,7 +12,7 @@ import { GridColDef, } from '@mui/x-data-grid-pro'; import { getBasicGridData } from '@mui/x-data-grid-generator'; -import { createRenderer, fireEvent, screen, act, waitFor } from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, screen, act } from '@mui/internal-test-utils'; import { $, grid, @@ -733,7 +733,7 @@ describe(' - Row pinning', () => { testSkipIf(isJSDOM)('should support cell editing', async () => { const processRowUpdate = spy((row) => ({ ...row, currencyPair: 'USD-GBP' })); const columns: GridColDef[] = [{ field: 'id' }, { field: 'name', editable: true }]; - render( + const { user } = render(
- Row pinning', () => { ); const cell = getCell(0, 1); - fireEvent.doubleClick(cell); + await user.dblClick(cell); const input = cell.querySelector('input')!; - fireEvent.change(input, { target: { value: 'Marcus' } }); - fireEvent.keyDown(input, { key: 'Enter' }); + // remove the previous value before typing in the new one + // was "fireEvent.change(input, { target: { value: 'Marcus' } })" + await user.clear(input); + await user.type(input, 'Marcus'); + await user.keyboard('{Enter}'); - await waitFor(() => { - expect(cell.textContent).to.equal('Marcus'); - }); + expect(cell.textContent).to.equal('Marcus'); expect(processRowUpdate.callCount).to.equal(1); expect(processRowUpdate.lastCall.args[0]).to.deep.equal({ id: 3, name: 'Marcus' }); }); @@ -769,7 +770,7 @@ describe(' - Row pinning', () => { testSkipIf(isJSDOM)('should support row editing', async () => { const processRowUpdate = spy((row) => ({ ...row, currencyPair: 'USD-GBP' })); const columns: GridColDef[] = [{ field: 'id' }, { field: 'name', editable: true }]; - render( + const { user } = render(
- Row pinning', () => { ); const cell = getCell(0, 1); - fireEvent.doubleClick(cell); + await user.dblClick(cell); const input = cell.querySelector('input')!; - fireEvent.change(input, { target: { value: 'Marcus' } }); - fireEvent.keyDown(input, { key: 'Enter' }); + // remove the previous value before typing in the new one + // was "fireEvent.change(input, { target: { value: 'Marcus' } })" + await user.clear(input); + await user.type(input, 'Marcus'); + await user.keyboard('{Enter}'); - await waitFor(() => { - expect(cell.textContent).to.equal('Marcus'); - }); + expect(cell.textContent).to.equal('Marcus'); expect(processRowUpdate.callCount).to.equal(1); expect(processRowUpdate.lastCall.args[0]).to.deep.equal({ id: 3, name: 'Marcus' }); }); diff --git a/packages/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx b/packages/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx index d2fe4adf98538..8eb345f24470b 100644 --- a/packages/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, screen, waitFor, within } from '@mui/internal-test-utils'; +import { createRenderer, screen, within } from '@mui/internal-test-utils'; import { expect } from 'chai'; import { DataGrid } from '@mui/x-data-grid'; import { getColumnHeaderCell, getColumnHeadersTextContent } from 'test/utils/helperFn'; @@ -128,9 +128,7 @@ describe(' - Column headers', () => { expect(screen.queryByRole('menu')).not.to.equal(null); await user.click(within(getColumnHeaderCell(0)).getByLabelText('Menu')); - await waitFor(() => { - expect(screen.queryByRole('menu')).to.equal(null); - }); + expect(screen.queryByRole('menu')).to.equal(null); }); }); diff --git a/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx b/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx index 826c9a19f04bc..fc523981c77f8 100644 --- a/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx @@ -622,24 +622,23 @@ describe(' - Keyboard', () => { }); }); - it('should call preventDefault when using keyboard navigation', () => { + it('should call preventDefault when using keyboard navigation', async () => { const handleKeyDown = spy((event) => event.defaultPrevented); const columns = [{ field: 'id' }, { field: 'name' }]; const rows = [{ id: 1, name: 'John' }]; - render( + const { user } = render(
, ); - const firstCell = getCell(0, 0); - fireUserEvent.mousePress(firstCell); - fireEvent.keyDown(firstCell, { key: 'ArrowRight' }); + await user.click(getCell(0, 0)); + await user.keyboard('{ArrowRight}'); expect(handleKeyDown.returnValues).to.deep.equal([true]); }); - it('should sort column when pressing enter and column header is selected', () => { + it('should sort column when pressing enter and column header is selected', async () => { const columns = [ { field: 'id', @@ -660,17 +659,19 @@ describe(' - Keyboard', () => { }, ]; - render( + const { user } = render(
, ); - act(() => getColumnHeaderCell(0).focus()); + await act(async () => { + getColumnHeaderCell(0).focus(); + }); expect(getActiveColumnHeader()).to.equal('0'); expect(getColumnValues(1)).to.deep.equal(['John', 'Doe']); - fireEvent.keyDown(getColumnHeaderCell(0), { key: 'Enter' }); - fireEvent.keyDown(getColumnHeaderCell(0), { key: 'Enter' }); + await user.keyboard('{Enter}'); + await user.keyboard('{Enter}'); expect(getColumnValues(1)).to.deep.equal(['Doe', 'John']); }); @@ -702,25 +703,24 @@ describe(' - Keyboard', () => { expect(renderCell.callCount).to.equal(4); }); - it('should not scroll horizontally when cell is wider than viewport', () => { + it('should not scroll horizontally when cell is wider than viewport', async () => { const columns = [{ field: 'id', width: 400 }, { field: 'name' }]; const rows = [ { id: 1, name: 'John' }, { id: 2, name: 'Doe' }, ]; - render( + const { user } = render(
, ); const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; - const firstCell = getCell(0, 0); - fireUserEvent.mousePress(firstCell); + await user.click(getCell(0, 0)); expect(virtualScroller.scrollLeft).to.equal(0); - fireEvent.keyDown(firstCell, { key: 'ArrowDown' }); + await user.keyboard('{ArrowDown}'); expect(virtualScroller.scrollLeft).to.equal(0); }); diff --git a/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx b/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx index f6e9afc4cc832..660c9cf7431d3 100644 --- a/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx @@ -1157,7 +1157,7 @@ describe(' - Layout & warnings', () => { { field: 'username', width: 300 }, ]; - it('grid container', async () => { + it('grid container', () => { render(
@@ -1166,12 +1166,10 @@ describe(' - Layout & warnings', () => {
, ); - await waitFor(() => { - expect(grid('root')).toHaveComputedStyle({ width: '400px' }); - }); + expect(grid('root')).toHaveComputedStyle({ width: '400px' }); }); - it('flex container', async () => { + it('flex container', () => { render(
@@ -1180,9 +1178,7 @@ describe(' - Layout & warnings', () => {
, ); - await waitFor(() => { - expect(grid('root')).toHaveComputedStyle({ width: '400px' }); - }); + expect(grid('root')).toHaveComputedStyle({ width: '400px' }); }); }); 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 ee7dabec480fa..b39198bfbf85a 100644 --- a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx @@ -251,7 +251,7 @@ describe(' - Row selection', () => { await user.click(checkboxInput!); - await waitFor(() => expect(getActiveCell()).to.equal('0-0')); + expect(getActiveCell()).to.equal('0-0'); }); it('should select all visible rows regardless of pagination', async () => { diff --git a/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx index 17782cdf77f68..3ca41334cdf20 100644 --- a/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx @@ -6,8 +6,8 @@ import { screen, act, ErrorBoundary, - waitFor, reactMajor, + waitFor, } from '@mui/internal-test-utils'; import clsx from 'clsx'; import { expect } from 'chai'; @@ -33,7 +33,6 @@ import { getRow, getActiveCell, getCell, - microtasks, $$, } from 'test/utils/helperFn'; import { fireUserEvent } from 'test/utils/fireUserEvent'; @@ -278,54 +277,48 @@ describe(' - Rows', () => { }); it('should show in a menu the actions marked as showInMenu', async () => { - render( []} />); + const { user } = render( + []} />, + ); expect(screen.queryByText('print')).to.equal(null); - fireEvent.click(screen.getByRole('menuitem', { name: 'more' })); - await waitFor(() => { - expect(screen.queryByText('print')).not.to.equal(null); - }); + await user.click(screen.getByRole('menuitem', { name: 'more' })); + expect(screen.queryByText('print')).not.to.equal(null); }); - it('should not select the row when clicking in an action', async () => { + it('should not select the row when clicking in an action', () => { render( [} label="print" />]} />, ); expect(getRow(0)).not.to.have.class('Mui-selected'); fireEvent.click(screen.getByRole('menuitem', { name: 'print' })); - - await waitFor(() => expect(getRow(0)).not.to.have.class('Mui-selected')); + expect(getRow(0)).not.to.have.class('Mui-selected'); }); it('should not select the row when clicking in a menu action', async () => { - render( + const { user } = render( [} label="print" showInMenu />]} />, ); expect(getRow(0)).not.to.have.class('Mui-selected'); - fireEvent.click(screen.getByRole('menuitem', { name: 'more' })); - await waitFor(() => { - expect(screen.queryByText('print')).not.to.equal(null); - }); + await user.click(screen.getByRole('menuitem', { name: 'more' })); + expect(screen.queryByText('print')).not.to.equal(null); - fireEvent.click(screen.getByText('print')); - await waitFor(() => { - expect(getRow(0)).not.to.have.class('Mui-selected'); - }); - await microtasks(); + await user.click(screen.getByText('print')); + expect(getRow(0)).not.to.have.class('Mui-selected'); }); it('should not select the row when opening the menu', async () => { - render( []} />); + const { user } = render( + []} />, + ); + expect(getRow(0)).not.to.have.class('Mui-selected'); + await user.click(screen.getByRole('menuitem', { name: 'more' })); expect(getRow(0)).not.to.have.class('Mui-selected'); - fireEvent.click(screen.getByRole('menuitem', { name: 'more' })); - await waitFor(() => { - expect(getRow(0)).not.to.have.class('Mui-selected'); - }); }); it('should close other menus before opening a new one', async () => { - render( + const { user } = render( []} @@ -334,15 +327,11 @@ describe(' - Rows', () => { expect(screen.queryAllByRole('menu')).to.have.length(2); const more1 = screen.getAllByRole('menuitem', { name: 'more' })[0]; - fireEvent.mouseDown(more1); - fireEvent.click(more1); - await waitFor(() => { - expect(screen.queryAllByRole('menu')).to.have.length(2 + 1); - }); + await user.click(more1); + expect(screen.queryAllByRole('menu')).to.have.length(2 + 1); const more2 = screen.getAllByRole('menuitem', { name: 'more' })[1]; - fireEvent.mouseDown(more2); - fireEvent.click(more2); + await user.click(more2); await waitFor(() => { expect(screen.queryAllByRole('menu')).to.have.length(2 + 1); }); @@ -365,7 +354,7 @@ describe(' - Rows', () => { }); it('should focus the first item when opening the menu', async () => { - render( + const { user } = render( [ } label="print" showInMenu />, @@ -374,12 +363,10 @@ describe(' - Rows', () => { />, ); const moreButton = screen.getByRole('menuitem', { name: 'more' }); - fireUserEvent.mousePress(moreButton); + await user.click(moreButton); - await waitFor(() => { - const printButton = screen.queryByRole('menuitem', { name: 'print' }); - expect(printButton).toHaveFocus(); - }); + const printButton = screen.queryByRole('menuitem', { name: 'print' }); + expect(printButton).toHaveFocus(); }); it('should allow to navigate between actions using the arrow keys', () => { @@ -643,9 +630,11 @@ describe(' - Rows', () => { '.MuiDataGrid-virtualScrollerContent', ); const expectedHeight = baselineProps.rows.length * (contentHeight + border); + await waitFor(() => { expect(virtualScrollerContent).toHaveComputedStyle({ height: `${expectedHeight}px` }); }); + expect(virtualScrollerContent).toHaveInlineStyle({ width: 'auto' }); }); @@ -670,9 +659,11 @@ describe(' - Rows', () => { measuredRowHeight + border + // Measured rows also include the border (baselineProps.rows.length - 1) * defaultRowHeight; + await waitFor(() => { expect(virtualScrollerContent).toHaveComputedStyle({ height: `${expectedHeight}px` }); }); + expect(virtualScrollerContent).toHaveInlineStyle({ width: 'auto' }); }); @@ -697,9 +688,11 @@ describe(' - Rows', () => { const firstRowHeight = measuredRowHeight + border; // Measured rows also include the border const expectedHeight = firstRowHeight + (baselineProps.rows.length - 1) * estimatedRowHeight; + await waitFor(() => { expect(virtualScrollerContent).toHaveComputedStyle({ height: `${expectedHeight}px` }); }); + expect(virtualScrollerContent).toHaveInlineStyle({ width: 'auto' }); }); @@ -715,14 +708,17 @@ describe(' - Rows', () => { const virtualScrollerContent = document.querySelector( '.MuiDataGrid-virtualScrollerContent', ); + await waitFor(() => { expect(virtualScrollerContent).toHaveComputedStyle({ height: '101px' }); }); expect(virtualScrollerContent).toHaveInlineStyle({ width: 'auto' }); setProps({ rows: [{ clientId: 'c1', expanded: true }] }); + await waitFor(() => { expect(virtualScrollerContent).toHaveComputedStyle({ height: '201px' }); }); + expect(virtualScrollerContent).toHaveInlineStyle({ width: 'auto' }); }); @@ -765,20 +761,22 @@ describe(' - Rows', () => { />, ); const virtualScroller = grid('virtualScroller')!; - await waitFor(() => - expect(virtualScroller.scrollHeight).to.equal(columnHeaderHeight + 101 + 52 + 52), - ); + + await waitFor(() => { + expect(virtualScroller.scrollHeight).to.equal(columnHeaderHeight + 101 + 52 + 52); + }); virtualScroller.scrollTop = 101; // Scroll to measure the 2nd cell virtualScroller.dispatchEvent(new Event('scroll')); - await waitFor(() => - expect(virtualScroller.scrollHeight).to.equal(columnHeaderHeight + 101 + 101 + 52), - ); + await waitFor(() => { + expect(virtualScroller.scrollHeight).to.equal(columnHeaderHeight + 101 + 101 + 52); + }); virtualScroller.scrollTop = 10e6; // Scroll to measure all cells virtualScroller.dispatchEvent(new Event('scroll')); - await waitFor(() => - expect(virtualScroller.scrollHeight).to.equal(columnHeaderHeight + 101 + 101 + 101), - ); + + await waitFor(() => { + expect(virtualScroller.scrollHeight).to.equal(columnHeaderHeight + 101 + 101 + 101); + }); }); it('should allow to mix rows with dynamic row height and default row height', async () => { @@ -801,6 +799,7 @@ describe(' - Rows', () => { const virtualScrollerContent = document.querySelector( '.MuiDataGrid-virtualScrollerContent', )!; + await waitFor(() => { expect(virtualScrollerContent).toHaveComputedStyle({ height: `${Math.floor(expectedHeight)}px`, @@ -840,7 +839,7 @@ describe(' - Rows', () => { }, ); - it('should position correctly the render zone when changing pageSize to a lower value', async () => { + it('should position correctly the render zone when changing pageSize to a lower value', () => { const data = getBasicGridData(120, 3); const columnHeaderHeight = 50; const measuredRowHeight = 100; @@ -1112,7 +1111,7 @@ describe(' - Rows', () => { // needs virtualization testSkipIf(isJSDOM)( 'should set proper `data-rowindex` and `aria-rowindex` when focused row is out of the viewport', - async () => { + () => { render(