diff --git a/benchmark/package.json b/benchmark/package.json
index 88cec0fba4d6..a0c9a3bb6854 100644
--- a/benchmark/package.json
+++ b/benchmark/package.json
@@ -19,8 +19,8 @@
"html-webpack-plugin": "^5.5.0",
"mui-plus": "^0.0.15",
"playwright": "^1.21.1",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
"react-spring": "^9.2.4",
"react-virtualized": "^9.22.3",
"serve-handler": "^6.1.3",
diff --git a/docs/package.json b/docs/package.json
index 1b2806572c9a..f3a41eb10eee 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -65,11 +65,11 @@
"prismjs": "^1.28.0",
"prop-types": "^15.8.1",
"raw-loader": "^1.0.0",
- "react": "^17.0.2",
+ "react": "^18.2.0",
"react-docgen": "^5.4.3",
- "react-dom": "^17.0.2",
+ "react-dom": "^18.2.0",
"react-hook-form": "^7.33.1",
- "react-is": "^17.0.2",
+ "react-is": "^18.2.0",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-text-mask": "^5.4.3",
diff --git a/package.json b/package.json
index 4891d9b37fc8..0204c22d0ac1 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
"@emotion/cache": "^11.9.3",
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
- "@eps1lon/enzyme-adapter-react-17": "^0.1.0",
+ "@mnajdova/enzyme-adapter-react-18": "^0.2.0",
"@mui/icons-material": "^5.8.0",
"@mui/material": "^5.8.0",
"@mui/monorepo": "https://github.com/mui/material-ui.git#master",
@@ -87,7 +87,7 @@
"@octokit/plugin-retry": "^3.0.9",
"@octokit/rest": "^18.12.0",
"@playwright/test": "1.21.1",
- "@testing-library/react": "^12.1.5",
+ "@testing-library/react": "^13.3.0",
"@types/babel__core": "^7.1.19",
"@types/chai": "^4.3.1",
"@types/chai-dom": "^0.0.13",
@@ -150,8 +150,8 @@
"nyc": "^15.1.0",
"playwright": "^1.21.1",
"prettier": "^2.7.1",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
"serve": "^13.0.4",
"sinon": "^14.0.0",
"stream-browserify": "^3.0.0",
@@ -178,5 +178,8 @@
},
"dependencies": {
"html-webpack-plugin": "^5.5.0"
+ },
+ "resolutions": {
+ "**/react-is": "^18.2.0"
}
}
diff --git a/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx
index 20c022f69cce..9193bad13b7c 100644
--- a/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx
+++ b/packages/grid/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer, screen, userEvent, within } from '@mui/monorepo/test/utils';
+import { createRenderer, screen, userEvent, within, act } from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import { getColumnValues } from 'test/utils/helperFn';
import { SinonSpy, spy } from 'sinon';
@@ -282,7 +282,7 @@ describe(' - Aggregation', () => {
it('should render select on aggregable column', () => {
render();
- apiRef.current.showColumnMenu('id');
+ act(() => apiRef.current.showColumnMenu('id'));
clock.runToLast();
expect(screen.queryByLabelText('Aggregation')).not.to.equal(null);
@@ -293,7 +293,7 @@ describe(' - Aggregation', () => {
expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3', '4', '5']);
- apiRef.current.showColumnMenu('id');
+ act(() => apiRef.current.showColumnMenu('id'));
clock.runToLast();
userEvent.mousePress(screen.queryByLabelText('Aggregation'));
userEvent.mousePress(
@@ -430,7 +430,7 @@ describe(' - Aggregation', () => {
/>,
);
- apiRef.current.showColumnMenu('id');
+ act(() => apiRef.current.showColumnMenu('id'));
clock.runToLast();
expect(screen.queryAllByLabelText('Aggregation')).to.have.length(0);
@@ -469,9 +469,11 @@ describe(' - Aggregation', () => {
);
expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3', '4', '5']);
- apiRef.current.updateColumns([
- { field: 'id', availableAggregationFunctions: ['min', 'max'] },
- ]);
+ act(() =>
+ apiRef.current.updateColumns([
+ { field: 'id', availableAggregationFunctions: ['min', 'max'] },
+ ]),
+ );
expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3', '4', '5', '5' /* Agg */]);
});
});
diff --git a/packages/grid/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx
index eebfdb591b10..285a26f80dea 100644
--- a/packages/grid/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx
+++ b/packages/grid/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx
@@ -9,14 +9,14 @@ import {
GridActionsCellItem,
} from '@mui/x-data-grid-premium';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer, screen, fireEvent } from '@mui/monorepo/test/utils';
+import { createRenderer, screen, fireEvent, act } from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import Excel from 'exceljs';
const isJSDOM = /jsdom/.test(window.navigator.userAgent);
describe(' - Export Excel', () => {
- const { render } = createRenderer();
+ const { render } = createRenderer({ clock: 'fake' });
let apiRef: React.MutableRefObject;
@@ -51,9 +51,9 @@ describe(' - Export Excel', () => {
};
describe('export interface', () => {
- it('should generate a file', () => {
+ it('should generate a file', async () => {
render();
- expect(apiRef.current.getDataAsExcel()).not.to.equal(null);
+ expect(await act(() => apiRef.current.getDataAsExcel())).not.to.equal(null);
});
it('should display export option', () => {
@@ -98,7 +98,7 @@ describe(' - Export Excel', () => {
};
render();
- const workbook = await apiRef.current.getDataAsExcel();
+ const workbook = await act(() => apiRef.current.getDataAsExcel());
const worksheet = workbook!.worksheets[0];
expect(worksheet.getCell('A1').value).to.equal('str');
@@ -142,7 +142,7 @@ describe(' - Export Excel', () => {
};
render();
- const workbook = await apiRef.current.getDataAsExcel();
+ const workbook = await act(() => apiRef.current.getDataAsExcel());
const worksheet = workbook!.worksheets[0];
expect(worksheet.getCell('A1').value).to.equal('option');
@@ -180,7 +180,7 @@ describe(' - Export Excel', () => {
};
render();
- const workbook = await apiRef.current.getDataAsExcel();
+ const workbook = await act(() => apiRef.current.getDataAsExcel());
const worksheet = workbook!.worksheets[0];
expect(worksheet.getCell('A1').value).to.equal('str');
@@ -218,7 +218,7 @@ describe(' - Export Excel', () => {
};
render();
- const workbook = await apiRef.current.getDataAsExcel();
+ const workbook = await act(() => apiRef.current.getDataAsExcel());
const worksheet = workbook!.worksheets[0];
// 1-based index + 1 for column header row
diff --git a/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
index 3c1cb46ef54b..c752801253a9 100644
--- a/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
+++ b/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
@@ -494,7 +494,7 @@ describe(' - Row Grouping', () => {
expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'category1', 'category2']);
// No menu item on column menu to add / remove grouping criteria
- apiRef.current.showColumnMenu('category1');
+ act(() => apiRef.current.showColumnMenu('category1'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
const category1Menuitem = screen.queryByRole('menuitem', {
@@ -502,11 +502,11 @@ describe(' - Row Grouping', () => {
});
expect(category1Menuitem).to.equal(null);
- apiRef.current.hideColumnMenu();
+ act(() => apiRef.current.hideColumnMenu());
clock.runToLast();
expect(screen.queryByRole('menu')).to.equal(null);
- apiRef.current.showColumnMenu('category2');
+ act(() => apiRef.current.showColumnMenu('category2'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
const category2Menuitem = screen.queryByRole('menuitem', { name: 'Group by category2' });
@@ -715,16 +715,20 @@ describe(' - Row Grouping', () => {
);
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '200px' });
- apiRef.current.updateColumns([
- { field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, width: 100 },
- ]);
+ act(() =>
+ apiRef.current.updateColumns([
+ { field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, width: 100 },
+ ]),
+ );
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '100px' });
- apiRef.current.updateColumns([
- {
- field: 'id',
- headerName: 'New id',
- },
- ]);
+ act(() =>
+ apiRef.current.updateColumns([
+ {
+ field: 'id',
+ headerName: 'New id',
+ },
+ ]),
+ );
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '100px' });
});
@@ -1043,17 +1047,21 @@ describe(' - Row Grouping', () => {
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '200px' });
expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '300px' });
- apiRef.current.updateColumns([
- { field: getRowGroupingFieldFromGroupingCriteria('category1'), width: 100 },
- ]);
+ act(() =>
+ apiRef.current.updateColumns([
+ { field: getRowGroupingFieldFromGroupingCriteria('category1'), width: 100 },
+ ]),
+ );
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '100px' });
expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '300px' });
- apiRef.current.updateColumns([
- {
- field: 'id',
- headerName: 'New id',
- },
- ]);
+ act(() =>
+ apiRef.current.updateColumns([
+ {
+ field: 'id',
+ headerName: 'New id',
+ },
+ ]),
+ );
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '100px' });
expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '300px' });
});
@@ -1524,7 +1532,7 @@ describe(' - Row Grouping', () => {
]}
/>,
);
- apiRef.current.showColumnMenu('category1');
+ act(() => apiRef.current.showColumnMenu('category1'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
const menuItem = screen.queryByRole('menuitem', { name: 'Group by category1' });
@@ -1546,7 +1554,7 @@ describe(' - Row Grouping', () => {
]}
/>,
);
- apiRef.current.showColumnMenu('category1');
+ act(() => apiRef.current.showColumnMenu('category1'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
expect(screen.queryByRole('menuitem', { name: 'Group by category1' })).to.equal(null);
@@ -1570,7 +1578,7 @@ describe(' - Row Grouping', () => {
}}
/>,
);
- apiRef.current.showColumnMenu('category1');
+ act(() => apiRef.current.showColumnMenu('category1'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
const menuItem = screen.queryByRole('menuitem', { name: 'Stop grouping by category1' });
@@ -1601,7 +1609,7 @@ describe(' - Row Grouping', () => {
/>,
);
- apiRef.current.showColumnMenu('__row_group_by_columns_group_category1__');
+ act(() => apiRef.current.showColumnMenu('__row_group_by_columns_group_category1__'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
const menuItemCategory1 = screen.queryByRole('menuitem', {
@@ -1610,11 +1618,11 @@ describe(' - Row Grouping', () => {
fireEvent.click(menuItemCategory1);
expect(apiRef.current.state.rowGrouping.model).to.deep.equal(['category2']);
- apiRef.current.hideColumnMenu();
+ act(() => apiRef.current.hideColumnMenu());
clock.runToLast();
expect(screen.queryByRole('menu')).to.equal(null);
- apiRef.current.showColumnMenu('__row_group_by_columns_group_category2__');
+ act(() => apiRef.current.showColumnMenu('__row_group_by_columns_group_category2__'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
const menuItemCategory2 = screen.queryByRole('menuitem', {
@@ -1647,7 +1655,7 @@ describe(' - Row Grouping', () => {
/>,
);
- apiRef.current.showColumnMenu('__row_group_by_columns_group__');
+ act(() => apiRef.current.showColumnMenu('__row_group_by_columns_group__'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
const menuItemCategory1 = screen.queryByRole('menuitem', {
@@ -1676,7 +1684,7 @@ describe(' - Row Grouping', () => {
]}
/>,
);
- apiRef.current.showColumnMenu('category1');
+ act(() => apiRef.current.showColumnMenu('category1'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
expect(screen.queryByRole('menuitem', { name: 'Group by Category 1' })).not.to.equal(null);
@@ -1701,7 +1709,7 @@ describe(' - Row Grouping', () => {
}}
/>,
);
- apiRef.current.showColumnMenu('category1');
+ act(() => apiRef.current.showColumnMenu('category1'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
expect(screen.queryByRole('menuitem', { name: 'Stop grouping by Category 1' })).not.to.equal(
@@ -2270,13 +2278,13 @@ describe(' - Row Grouping', () => {
describe('apiRef: addRowGroupingCriteria', () => {
it('should add grouping criteria to model', () => {
render();
- apiRef.current.addRowGroupingCriteria('category2');
+ act(() => apiRef.current.addRowGroupingCriteria('category2'));
expect(apiRef.current.state.rowGrouping.model).to.deep.equal(['category1', 'category2']);
});
it('should add grouping criteria to model at the right position', () => {
render();
- apiRef.current.addRowGroupingCriteria('category2', 0);
+ act(() => apiRef.current.addRowGroupingCriteria('category2', 0));
expect(apiRef.current.state.rowGrouping.model).to.deep.equal(['category2', 'category1']);
});
});
@@ -2284,7 +2292,7 @@ describe(' - Row Grouping', () => {
describe('apiRef: removeRowGroupingCriteria', () => {
it('should remove field from model', () => {
render();
- apiRef.current.removeRowGroupingCriteria('category1');
+ act(() => apiRef.current.removeRowGroupingCriteria('category1'));
expect(apiRef.current.state.rowGrouping.model).to.deep.equal([]);
});
});
@@ -2292,7 +2300,7 @@ describe(' - Row Grouping', () => {
describe('apiRef: setRowGroupingCriteriaIndex', () => {
it('should change the grouping criteria order', () => {
render();
- apiRef.current.setRowGroupingCriteriaIndex('category1', 1);
+ act(() => apiRef.current.setRowGroupingCriteriaIndex('category1', 1));
expect(apiRef.current.state.rowGrouping.model).to.deep.equal(['category2', 'category1']);
});
});
diff --git a/packages/grid/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx
index 09ee8e78870e..1734bb0a5e9a 100644
--- a/packages/grid/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx
+++ b/packages/grid/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx
@@ -9,7 +9,7 @@ import {
useGridApiRef,
} from '@mui/x-data-grid-premium';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer } from '@mui/monorepo/test/utils';
+import { createRenderer, act } from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import { getColumnValues } from '../../../../../test/utils/helperFn';
@@ -96,10 +96,12 @@ describe(' - State Persistence', () => {
it('should export the current version of the exportable state', () => {
render();
- apiRef.current.setRowGroupingModel(['category']);
- apiRef.current.setAggregationModel({
- id: 'size',
- });
+ act(() => apiRef.current.setRowGroupingModel(['category']));
+ act(() =>
+ apiRef.current.setAggregationModel({
+ id: 'size',
+ }),
+ );
const exportedState = apiRef.current.exportState();
expect(exportedState.rowGrouping).to.deep.equal(FULL_INITIAL_STATE.rowGrouping);
@@ -108,10 +110,12 @@ describe(' - State Persistence', () => {
it('should export the current version of the exportable state when using exportOnlyDirtyModels', () => {
render();
- apiRef.current.setRowGroupingModel(['category']);
- apiRef.current.setAggregationModel({
- id: 'size',
- });
+ act(() => apiRef.current.setRowGroupingModel(['category']));
+ act(() =>
+ apiRef.current.setAggregationModel({
+ id: 'size',
+ }),
+ );
const exportedState = apiRef.current.exportState({ exportOnlyDirtyModels: true });
expect(exportedState.rowGrouping).to.deep.equal(FULL_INITIAL_STATE.rowGrouping);
@@ -153,7 +157,7 @@ describe(' - State Persistence', () => {
it('should restore the whole exportable state', () => {
render();
- apiRef.current.restoreState(FULL_INITIAL_STATE);
+ act(() => apiRef.current.restoreState(FULL_INITIAL_STATE));
expect(getColumnValues(0)).to.deep.equal([
'Cat A (3)',
'',
diff --git a/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.new.test.tsx b/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.new.test.tsx
index b3f97705ce5a..6e70e2df127a 100644
--- a/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.new.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.new.test.tsx
@@ -17,8 +17,6 @@ import { spy } from 'sinon';
import { getData } from 'storybook/src/data/data-service';
import { GridCellModes } from '@mui/x-data-grid';
-const nativeSetTimeout = setTimeout;
-
describe(' - Cell Editing', () => {
const { render, clock } = createRenderer({ clock: 'fake' });
@@ -110,7 +108,7 @@ describe(' - Cell Editing', () => {
expect(renderEditCell.lastCall.args[0].value).to.equal('usdgbp');
});
- it('should pass to renderEditCell the row with the value updated', () => {
+ it('should pass to renderEditCell the row with the value updated', async () => {
columnProps.valueSetter = ({ value, row }: GridValueSetterParams) => ({
...row,
currencyPair: value.trim(),
@@ -118,7 +116,9 @@ describe(' - Cell Editing', () => {
render();
act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
expect(renderEditCell.lastCall.args[0].row).to.deep.equal(defaultData.rows[0]);
- apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: ' usdgbp ' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: ' usdgbp ' }),
+ );
expect(renderEditCell.lastCall.args[0].row).to.deep.equal({
...defaultData.rows[0],
currencyPair: 'usdgbp',
@@ -141,7 +141,9 @@ describe(' - Cell Editing', () => {
render();
act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
expect(
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ ),
).to.equal(true);
});
@@ -151,13 +153,17 @@ describe(' - Cell Editing', () => {
);
render();
act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
- const promise = apiRef.current.setEditCellValue({
- id: 0,
- field: 'currencyPair',
- value: 'USD GBP',
+ let promise: Promise | null = null;
+ // We want to flush updates before preProcessEditCellProps resolves
+ act(() => {
+ promise = apiRef.current.setEditCellValue({
+ id: 0,
+ field: 'currencyPair',
+ value: 'USD GBP',
+ }) as Promise;
});
expect(renderEditCell.lastCall.args[0].isProcessingProps).to.equal(true);
- return promise;
+ return act(() => promise);
});
it('should call preProcessEditCellProps with the correct params', async () => {
@@ -166,7 +172,13 @@ describe(' - Cell Editing', () => {
);
render();
act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({
+ id: 0,
+ field: 'currencyPair',
+ value: 'USD GBP',
+ }),
+ );
const args = columnProps.preProcessEditCellProps.lastCall.args[0];
expect(args.id).to.equal(0);
expect(args.row).to.deep.equal(defaultData.rows[0]);
@@ -186,7 +198,9 @@ describe(' - Cell Editing', () => {
render();
act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
expect(renderEditCell.lastCall.args[0].foo).to.equal(undefined);
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
expect(renderEditCell.lastCall.args[0].foo).to.equal('bar');
});
@@ -198,7 +212,9 @@ describe(' - Cell Editing', () => {
render();
act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
expect(renderEditCell.lastCall.args[0].value).to.equal('USDGBP');
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
expect(renderEditCell.lastCall.args[0].value).to.equal('USD GBP');
});
@@ -206,15 +222,18 @@ describe(' - Cell Editing', () => {
columnProps.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => props;
render();
act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
- const promise = apiRef.current.setEditCellValue({
- id: 0,
- field: 'currencyPair',
- value: 'USD GBP',
- }) as Promise;
- expect(renderEditCell.lastCall.args[0].isProcessingProps).to.equal(true);
- return promise.then(() => {
- expect(renderEditCell.lastCall.args[0].isProcessingProps).to.equal(false);
+ let promise: Promise | null = null;
+ // We want to flush updates before preProcessEditCellProps resolves
+ act(() => {
+ promise = apiRef.current.setEditCellValue({
+ id: 0,
+ field: 'currencyPair',
+ value: 'USD GBP',
+ }) as Promise;
});
+ expect(renderEditCell.lastCall.args[0].isProcessingProps).to.equal(true);
+ await act(() => promise);
+ expect(renderEditCell.lastCall.args[0].isProcessingProps).to.equal(false);
});
it('should return false if preProcessEditCellProps sets an error', async () => {
@@ -225,36 +244,48 @@ describe(' - Cell Editing', () => {
render();
act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
expect(
- await apiRef.current.setEditCellValue({
- id: 0,
- field: 'currencyPair',
- value: 'USD GBP',
- }),
+ await act(() =>
+ apiRef.current.setEditCellValue({
+ id: 0,
+ field: 'currencyPair',
+ value: 'USD GBP',
+ }),
+ ),
).to.equal(false);
});
- it('should return false if the cell left the edit mode while calling preProcessEditCellProps', async () => {
+ it('should return false if the cell left the edit mode while calling preProcessEditCellProps', (done) => {
+ let resolveCallback: () => void;
columnProps.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
new Promise((resolve) => {
- // Simulates the user cancelling the editing while processing the props
- act(() =>
- apiRef.current.stopCellEditMode({
- id: 0,
- field: 'currencyPair',
- ignoreModifications: true,
- }),
- );
- resolve(props);
+ resolveCallback = () => resolve(props);
});
render();
act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
- expect(
- await apiRef.current.setEditCellValue({
+
+ let promise: Promise;
+ act(() => {
+ promise = apiRef.current.setEditCellValue({
id: 0,
field: 'currencyPair',
value: 'USD GBP',
+ }) as Promise;
+ });
+
+ promise!.then((result) => {
+ expect(result).to.equal(false);
+ done();
+ });
+
+ act(() =>
+ apiRef.current.stopCellEditMode({
+ id: 0,
+ field: 'currencyPair',
+ ignoreModifications: true,
}),
- ).to.equal(false);
+ );
+
+ resolveCallback!();
});
describe('with debounceMs > 0', () => {
@@ -305,7 +336,9 @@ describe(' - Cell Editing', () => {
it('should update the row with the new value stored', async () => {
render();
act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' }));
expect(getCell(0, 1).textContent).to.equal('USD GBP');
});
@@ -313,7 +346,9 @@ describe(' - Cell Editing', () => {
it('should not update the row if ignoreModifications=true', async () => {
render();
act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
act(() =>
apiRef.current.stopCellEditMode({
id: 0,
@@ -325,21 +360,30 @@ describe(' - Cell Editing', () => {
});
it('should do nothing if props are still being processed and ignoreModifications=false', async () => {
+ let resolveCallback: () => void;
columnProps.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
new Promise((resolve) => {
- // Simulates the user stopping the editing while processing the props
- act(() =>
- apiRef.current.stopCellEditMode({
- id: 0,
- field: 'currencyPair',
- }),
- );
- resolve(props);
+ resolveCallback = () => resolve(props);
});
render();
act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+
+ let promise: Promise;
+ act(() => {
+ promise = apiRef.current.setEditCellValue({
+ id: 0,
+ field: 'currencyPair',
+ value: 'USD GBP',
+ }) as Promise;
+ });
+
+ act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' }));
+
expect(getCell(0, 1).className).to.contain('MuiDataGrid-cell--editing');
+
+ resolveCallback!();
+
+ await act(() => promise); // Run all updates scheduled for when preProcessEditCellProps resolves
});
it('should do nothing if props contain error=true', async () => {
@@ -349,7 +393,9 @@ describe(' - Cell Editing', () => {
});
render();
act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' }));
expect(getCell(0, 1).className).to.contain('MuiDataGrid-cell--editing');
});
@@ -362,11 +408,15 @@ describe(' - Cell Editing', () => {
render();
act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: '' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: '' }),
+ );
act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' }));
expect(getCell(0, 1).className).to.contain('MuiDataGrid-cell--editing');
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' }));
expect(getCell(0, 1).className).not.to.contain('MuiDataGrid-cell--editing');
});
@@ -375,7 +425,9 @@ describe(' - Cell Editing', () => {
render();
act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
expect(getCell(0, 1).className).to.contain('MuiDataGrid-cell--editing');
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' }));
expect(getCell(0, 1).className).not.to.contain('MuiDataGrid-cell--editing');
});
@@ -384,9 +436,11 @@ describe(' - Cell Editing', () => {
const processRowUpdate = spy((row) => ({ ...row, currencyPair: 'USD-GBP' }));
render();
act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' }));
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ await act(() => Promise.resolve());
expect(processRowUpdate.callCount).to.equal(1);
expect(getCell(0, 1).textContent).to.equal('USD-GBP');
});
@@ -395,8 +449,11 @@ describe(' - Cell Editing', () => {
const processRowUpdate = spy((newRow, oldRow) => ({ ...oldRow, ...newRow }));
render();
act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' }));
+ await act(() => Promise.resolve());
expect(processRowUpdate.lastCall.args[0]).to.deep.equal({
...defaultData.rows[0],
currencyPair: 'USD GBP',
@@ -449,16 +506,18 @@ describe(' - Cell Editing', () => {
);
act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' }));
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ await act(() => Promise.resolve());
expect(onProcessRowUpdateError.lastCall.args[0]).to.equal(error);
});
it('should pass the new value through the value setter before calling processRowUpdate', async () => {
columnProps.valueSetter = spy(({ value, row }) => ({ ...row, _currencyPair: value }));
- const processRowUpdate = spy((newRow) => newRow);
+ const processRowUpdate = spy();
render();
act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' }));
expect(processRowUpdate.lastCall.args[0]).to.deep.equal({
...defaultData.rows[0],
@@ -538,15 +597,21 @@ describe(' - Cell Editing', () => {
});
it('should run all pending value mutations before calling processRowUpdate', async () => {
- const processRowUpdate = spy((newRow) => newRow);
+ const processRowUpdate = spy();
render();
act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
- apiRef.current.setEditCellValue({
- id: 0,
- field: 'currencyPair',
- value: 'USD GBP',
- debounceMs: 100,
- });
+ await act(
+ () =>
+ new Promise((resolve) => {
+ apiRef.current.setEditCellValue({
+ id: 0,
+ field: 'currencyPair',
+ value: 'USD GBP',
+ debounceMs: 100,
+ });
+ resolve();
+ }),
+ );
act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' }));
expect(renderEditCell.lastCall.args[0].value).to.equal('USD GBP');
expect(processRowUpdate.lastCall.args[0].currencyPair).to.equal('USD GBP');
@@ -846,13 +911,18 @@ describe(' - Cell Editing', () => {
});
});
- it('should call stopCellEditMode with ignoreModifications=true if the props are being processed', () => {
- columnProps.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
- new Promise((resolve) => resolve(props));
+ it('should call stopCellEditMode with ignoreModifications=true if the props are being processed', async () => {
+ columnProps.preProcessEditCellProps = () => new Promise(() => {});
render();
const spiedStopCellEditMode = spy(apiRef.current, 'stopCellEditMode');
fireEvent.doubleClick(getCell(0, 1));
- apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(
+ () =>
+ new Promise((resolve) => {
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ resolve();
+ }),
+ );
fireEvent.click(getCell(1, 1));
expect(spiedStopCellEditMode.callCount).to.equal(1);
expect(spiedStopCellEditMode.lastCall.args[0].ignoreModifications).to.equal(true);
@@ -864,11 +934,13 @@ describe(' - Cell Editing', () => {
render();
const spiedStopCellEditMode = spy(apiRef.current, 'stopCellEditMode');
fireEvent.doubleClick(getCell(0, 1));
- apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
fireEvent.click(getCell(1, 1));
- await Promise.resolve();
expect(spiedStopCellEditMode.callCount).to.equal(1);
expect(spiedStopCellEditMode.lastCall.args[0].ignoreModifications).to.equal(false);
+ await act(() => Promise.resolve());
});
});
@@ -935,16 +1007,21 @@ describe(' - Cell Editing', () => {
});
});
- it('should call stopCellEditMode with ignoreModifications=true if the props are being processed', () => {
- columnProps.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
- new Promise((resolve) => resolve(props));
+ it('should call stopCellEditMode with ignoreModifications=true if the props are being processed', async () => {
+ columnProps.preProcessEditCellProps = () => new Promise(() => {});
render();
const spiedStopCellEditMode = spy(apiRef.current, 'stopCellEditMode');
const cell = getCell(0, 1);
fireEvent.mouseUp(cell);
fireEvent.click(cell);
fireEvent.doubleClick(cell);
- apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(
+ () =>
+ new Promise((resolve) => {
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ resolve();
+ }),
+ );
fireEvent.keyDown(cell, { key: 'Enter' });
expect(spiedStopCellEditMode.callCount).to.equal(1);
expect(spiedStopCellEditMode.lastCall.args[0].ignoreModifications).to.equal(true);
@@ -982,16 +1059,21 @@ describe(' - Cell Editing', () => {
});
});
- it('should call stopCellEditMode with ignoreModifications=true if the props are being processed', () => {
- columnProps.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
- new Promise((resolve) => resolve(props));
+ it('should call stopCellEditMode with ignoreModifications=true if the props are being processed', async () => {
+ columnProps.preProcessEditCellProps = () => new Promise(() => {});
render();
const spiedStopCellEditMode = spy(apiRef.current, 'stopCellEditMode');
const cell = getCell(0, 1);
fireEvent.mouseUp(cell);
fireEvent.click(cell);
fireEvent.doubleClick(cell);
- apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(
+ () =>
+ new Promise((resolve) => {
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ resolve();
+ }),
+ );
fireEvent.keyDown(cell, { key: 'Tab' });
expect(spiedStopCellEditMode.callCount).to.equal(1);
expect(spiedStopCellEditMode.lastCall.args[0].ignoreModifications).to.equal(true);
@@ -1023,7 +1105,9 @@ describe(' - Cell Editing', () => {
const { setProps } = render(
,
);
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
setProps({
cellModesModel: {
0: { currencyPair: { mode: GridCellModes.View, ignoreModifications: true } },
@@ -1036,7 +1120,9 @@ describe(' - Cell Editing', () => {
const { setProps } = render(
,
);
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
setProps({
cellModesModel: {
0: { currencyPair: { mode: GridCellModes.View, cellToFocusAfter: 'below' } },
diff --git a/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.old.test.tsx b/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.old.test.tsx
index 09a1a94f730b..c2c9e0887577 100644
--- a/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.old.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.old.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { GridApi, DataGridProProps, useGridApiRef, DataGridPro } from '@mui/x-data-grid-pro';
import Portal from '@mui/base/Portal';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer, fireEvent, screen, waitFor } from '@mui/monorepo/test/utils';
+import { createRenderer, fireEvent, screen, waitFor, act } from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import { getActiveCell, getCell, getColumnHeaderCell } from 'test/utils/helperFn';
import { stub, spy } from 'sinon';
@@ -14,8 +14,6 @@ function fireClickEvent(cell: HTMLElement) {
fireEvent.click(cell);
}
-const nativeSetTimeout = setTimeout;
-
describe(' - Cell Editing', () => {
let baselineProps: Pick;
@@ -73,7 +71,7 @@ describe(' - Cell Editing', () => {
const cellAdidas = getCell(1, 0);
expect(cellAdidas).to.have.class('MuiDataGrid-cell--editable');
- apiRef.current.setCellMode(0, 'brand', 'edit');
+ act(() => apiRef.current.setCellMode(0, 'brand', 'edit'));
expect(cellNike).to.have.class('MuiDataGrid-cell--editing');
});
@@ -109,7 +107,7 @@ describe(' - Cell Editing', () => {
expect(input).not.to.have.attribute('aria-invalid');
fireEvent.change(input, { target: { value: 'n' } });
clock.runToLast();
- apiRef.current.setEditRowsModel({ 1: { brand: { error: true, value: 'n' } } });
+ act(() => apiRef.current.setEditRowsModel({ 1: { brand: { error: true, value: 'n' } } }));
fireEvent.keyDown(input, { key: 'Enter' });
await waitFor(() => {
expect(input).to.have.attribute('aria-invalid', 'true');
@@ -125,9 +123,11 @@ describe(' - Cell Editing', () => {
expect(input).not.to.have.attribute('aria-invalid');
fireEvent.change(input, { target: { value: 'n' } });
clock.runToLast();
- apiRef.current.setEditRowsModel({ 1: { brand: { error: true, value: 'n' } } });
- apiRef.current.commitCellChange({ id: 1, field: 'brand' });
- apiRef.current.setCellMode(1, 'brand', 'view');
+ act(() => {
+ apiRef.current.setEditRowsModel({ 1: { brand: { error: true, value: 'n' } } });
+ apiRef.current.commitCellChange({ id: 1, field: 'brand' });
+ apiRef.current.setCellMode(1, 'brand', 'view');
+ });
expect(cell).to.have.text('Adidas');
});
@@ -140,9 +140,11 @@ describe(' - Cell Editing', () => {
expect(input).not.to.have.attribute('aria-invalid');
fireEvent.change(input, { target: { value: 'n' } });
clock.runToLast();
- apiRef.current.setEditRowsModel({ 1: { brand: { error: true, value: 'n' } } });
- apiRef.current.commitCellChange({ id: 1, field: 'brand' });
- apiRef.current.setCellMode(1, 'brand', 'view');
+ act(() => {
+ apiRef.current.setEditRowsModel({ 1: { brand: { error: true, value: 'n' } } });
+ apiRef.current.commitCellChange({ id: 1, field: 'brand' });
+ apiRef.current.setCellMode(1, 'brand', 'view');
+ });
expect(onCellEditCommit.callCount).to.equal(0);
});
});
@@ -172,6 +174,7 @@ describe(' - Cell Editing', () => {
fireEvent.change(input, { target: { value: '1970' } });
clock.tick(500);
fireEvent.keyDown(input, { key: 'Enter' });
+ await act(() => Promise.resolve());
await waitFor(() => {
expect(cell.querySelector('input')).not.to.equal(null);
});
@@ -230,14 +233,14 @@ describe(' - Cell Editing', () => {
it('should allow to switch between cell mode', () => {
render();
- apiRef.current.setCellMode(1, 'brand', 'edit');
+ act(() => apiRef.current.setCellMode(1, 'brand', 'edit'));
const cell = getCell(1, 0);
expect(cell).to.have.class('MuiDataGrid-cell--editable');
expect(cell).to.have.class('MuiDataGrid-cell--editing');
expect(cell.querySelector('input')!.value).to.equal('Adidas');
- apiRef.current.setCellMode(1, 'brand', 'view');
+ act(() => apiRef.current.setCellMode(1, 'brand', 'view'));
expect(cell).to.have.class('MuiDataGrid-cell--editable');
expect(cell).not.to.have.class('MuiDataGrid-cell--editing');
expect(cell.querySelector('input')).to.equal(null);
@@ -331,16 +334,18 @@ describe(' - Cell Editing', () => {
const cell = getCell(1, 0);
fireClickEvent(cell);
expect(cell).to.have.text('Adidas');
- const params = apiRef.current.getCellParams(1, 'brand');
- apiRef.current.publishEvent('cellKeyDown', params, {
- key: 'a',
- code: 1,
- target: cell,
- currentTarget: cell,
- ctrlKey: false,
- metaKey: false,
- isPropagationStopped: () => false,
- } as any);
+ act(() => {
+ const params = apiRef.current.getCellParams(1, 'brand');
+ apiRef.current.publishEvent('cellKeyDown', params, {
+ key: 'a',
+ code: 1,
+ target: cell,
+ currentTarget: cell,
+ ctrlKey: false,
+ metaKey: false,
+ isPropagationStopped: () => false,
+ } as any);
+ });
// fireEvent.keyDown(cell, { key: 'a', code: 1, target: cell });
expect(cell).to.have.class('MuiDataGrid-cell--editable');
@@ -374,8 +379,8 @@ describe(' - Cell Editing', () => {
fireEvent.change(input, { target: { value: 'n' } });
expect(cell.querySelector('input')!.value).to.equal('n');
clock.tick(500);
-
fireEvent.keyDown(input, { key: 'Enter' });
+
await waitFor(() => {
expect(cell).to.have.class('MuiDataGrid-cell--editable');
expect(cell).not.to.have.class('MuiDataGrid-cell--editing');
@@ -394,8 +399,8 @@ describe(' - Cell Editing', () => {
fireEvent.change(input, { target: { value: 'n' } });
expect(cell.querySelector('input')!.value).to.equal('n');
clock.tick(500);
-
fireEvent.keyDown(input, { key: 'Tab' });
+
await waitFor(() => {
expect(cell).to.have.class('MuiDataGrid-cell--editable');
expect(cell).not.to.have.class('MuiDataGrid-cell--editing');
@@ -414,8 +419,8 @@ describe(' - Cell Editing', () => {
fireEvent.change(input, { target: { value: '1970' } });
clock.tick(500);
expect(cell.querySelector('input')!.value).to.equal('1970');
-
fireEvent.keyDown(input, { key: 'Tab', shiftKey: true });
+
await waitFor(() => {
expect(cell).to.have.class('MuiDataGrid-cell--editable');
expect(cell).not.to.have.class('MuiDataGrid-cell--editing');
@@ -436,9 +441,9 @@ describe(' - Cell Editing', () => {
fireEvent.change(input, { target: { value: '1970' } });
clock.tick(500);
expect(cell.querySelector('input')!.value).to.equal('1970');
-
const otherCell = getCell(2, 1);
fireClickEvent(otherCell);
+
await waitFor(() => {
expect(cell).not.to.have.class('MuiDataGrid-cell--editing');
expect(cell).to.have.text('1970');
@@ -458,9 +463,9 @@ describe(' - Cell Editing', () => {
fireEvent.change(input, { target: { value: '1970' } });
clock.tick(500);
expect(cell.querySelector('input')!.value).to.equal('1970');
-
const columnHeader = getColumnHeaderCell(0);
fireEvent.dragStart(columnHeader.firstChild);
+
await waitFor(() => {
expect(cell).not.to.have.class('MuiDataGrid-cell--editing');
expect(cell).to.have.text('1970');
@@ -479,8 +484,8 @@ describe(' - Cell Editing', () => {
fireEvent.change(input, { target: { value: '1970' } });
clock.tick(500);
expect(cell.querySelector('input')!.value).to.equal('1970');
-
fireEvent.focus(getColumnHeaderCell(1));
+
await waitFor(() => {
expect(cell).not.to.have.class('MuiDataGrid-cell--editing');
expect(cell).to.have.text('1970');
@@ -489,7 +494,7 @@ describe(' - Cell Editing', () => {
it('should work correctly when the cell editing was initiated programmatically', async () => {
render();
- apiRef.current.setCellMode(1, 'year', 'edit');
+ act(() => apiRef.current.setCellMode(1, 'year', 'edit'));
const cell = getCell(1, 1);
fireClickEvent(cell);
expect(getActiveCell()).to.equal('1-1');
@@ -499,7 +504,6 @@ describe(' - Cell Editing', () => {
fireEvent.change(input, { target: { value: '1970' } });
clock.tick(500);
expect(cell.querySelector('input')!.value).to.equal('1970');
-
const otherCell = getCell(2, 1);
fireClickEvent(otherCell);
@@ -513,16 +517,13 @@ describe(' - Cell Editing', () => {
it('should move the focus to the new field', async () => {
render();
// Turn first cell into edit mode
- apiRef.current.setCellMode(0, 'brand', 'edit');
-
- // Turn second cell into edit mode
- fireClickEvent(getCell(1, 0));
- apiRef.current.setCellMode(1, 'brand', 'edit');
+ act(() => apiRef.current.setCellMode(0, 'brand', 'edit'));
+ act(() => apiRef.current.setCellMode(1, 'brand', 'edit'));
expect(document.querySelectorAll('input').length).to.equal(2);
-
// Try to focus the first cell's input
const input0 = getCell(0, 0).querySelector('input');
fireClickEvent(input0!);
+
await waitFor(() => {
expect(document.activeElement).to.have.property('value', 'Nike');
});
@@ -549,11 +550,12 @@ describe(' - Cell Editing', () => {
fireEvent.change(input, { target: { value: '62' } });
clock.tick(500);
expect(cell.querySelector('input')!.value).to.equal('1962');
-
fireEvent.keyDown(input, { key: 'Enter' });
+
await waitFor(() => {
expect(cell).not.to.have.class('MuiDataGrid-cell--editing');
});
+
expect(cell).to.have.text('1962');
expect(valueParser.callCount).to.equal(1);
expect(valueParser.args[0][0]).to.equal('62');
@@ -656,8 +658,8 @@ describe(' - Cell Editing', () => {
fireEvent.change(input, { target: { value: 'n' } });
clock.tick(500);
expect(cell.querySelector('input')!.value).to.equal('n');
-
fireEvent.keyDown(input, { key: 'Enter' });
+
await waitFor(() => {
expect(cell).to.have.class('MuiDataGrid-cell--editable');
expect(cell).not.to.have.class('MuiDataGrid-cell--editing');
@@ -697,6 +699,7 @@ describe(' - Cell Editing', () => {
fireEvent.change(input, { target: { value: 'n' } });
clock.tick(500);
fireEvent.keyDown(input, { key: 'Enter' });
+
await waitFor(() => {
expect(onCellEditCommit.callCount).to.equal(1);
expect(onCellEditCommit.lastCall.args[0]).to.deep.equal({
@@ -730,6 +733,7 @@ describe(' - Cell Editing', () => {
fireEvent.change(input, { target: { value: 'Peter Smith' } });
clock.tick(500);
fireEvent.keyDown(input, { key: 'Enter' });
+
await waitFor(() => {
expect(apiRef.current.getRowModels().get(0)).to.deep.equal({
id: 0,
@@ -758,6 +762,7 @@ describe(' - Cell Editing', () => {
fireEvent.change(input, { target: { value: 'n' } });
clock.tick(500);
fireEvent.keyDown(input, { key: 'Enter' });
+
await waitFor(() => {
expect(preProcessEditCellProps.lastCall.args[0]).to.deep.equal({
id: baselineProps.rows[1].id,
@@ -786,6 +791,7 @@ describe(' - Cell Editing', () => {
fireEvent.change(input, { target: { value: 'n' } });
clock.tick(500);
fireEvent.keyDown(input, { key: 'Enter' });
+
await waitFor(() => {
expect(input).to.have.attribute('aria-invalid', 'true');
expect(cell).to.have.class('MuiDataGrid-cell--editing');
@@ -811,6 +817,7 @@ describe(' - Cell Editing', () => {
fireEvent.change(input, { target: { value: 'n' } });
clock.tick(500);
fireEvent.keyDown(input, { key: 'Enter' });
+
await waitFor(() => {
expect(input).to.have.attribute('aria-invalid', 'true');
expect(cell).to.have.class('MuiDataGrid-cell--editing');
@@ -843,7 +850,7 @@ describe(' - Cell Editing', () => {
clock.tick(500);
fireEvent.keyDown(input, { key: 'Enter' });
- await new Promise((resolve) => nativeSetTimeout(resolve)); // Wait for promise
+ await act(() => Promise.resolve());
expect(preProcessEditCellProps.callCount).to.equal(2);
expect(preProcessEditCellProps.args[0][0].props).to.deep.equal({ value: 'Adidas' });
@@ -875,7 +882,7 @@ describe(' - Cell Editing', () => {
clock.tick(500);
fireEvent.keyDown(input, { key: 'Enter' });
- await new Promise((resolve) => nativeSetTimeout(resolve)); // Wait for promise
+ await act(() => Promise.resolve());
expect(preProcessEditCellProps.callCount).to.equal(1);
expect(preProcessEditCellProps.lastCall.args[0].props).to.deep.equal({
@@ -905,12 +912,11 @@ describe(' - Cell Editing', () => {
);
const cell = getCell(0, 0);
fireEvent.doubleClick(cell);
-
const input = cell.querySelector('input')!;
fireEvent.change(input, { target: { value: 'Adidas' } });
clock.tick(500);
- await new Promise((resolve) => nativeSetTimeout(resolve)); // Wait for promise
+ await act(() => Promise.resolve());
expect(preProcessEditCellProps.callCount).to.equal(1);
expect(preProcessEditCellProps.lastCall.args[0].props).to.deep.equal({
@@ -927,7 +933,8 @@ describe(' - Cell Editing', () => {
fireEvent.change(input, { target: { value: 'Adidas' } });
expect(cell).to.have.class('MuiDataGrid-cell--editing');
fireClickEvent(getCell(1, 0));
- await new Promise((resolve) => nativeSetTimeout(resolve)); // Wait for promise
+
+ await act(() => Promise.resolve());
expect(cell).not.to.have.class('MuiDataGrid-cell--editing');
clock.runToLast();
expect(cell).not.to.have.class('MuiDataGrid-cell--editing');
@@ -941,7 +948,8 @@ describe(' - Cell Editing', () => {
const input = cell.querySelector('input')!;
fireEvent.change(input, { target: { value: 'Adidas' } });
fireClickEvent(getCell(1, 0));
- await new Promise((resolve) => nativeSetTimeout(resolve)); // Wait for promise
+
+ await act(() => Promise.resolve());
// We don't need to wait for debounce when commiting
expect(onCellEditCommit.lastCall.args[0].value).to.equal('Adidas');
});
diff --git a/packages/grid/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx
index a018264e91ad..2de18c29972e 100644
--- a/packages/grid/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { GridApi, useGridApiRef, DataGridPro, DataGridProProps } from '@mui/x-data-grid-pro';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer, fireEvent } from '@mui/monorepo/test/utils';
+import { createRenderer, fireEvent, act } from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import { stub, SinonStub } from 'sinon';
import { getCell } from 'test/utils/helperFn';
@@ -66,15 +66,15 @@ describe(' - Clipboard', () => {
it('should copy the selected rows to the clipboard', () => {
render();
- apiRef.current.selectRows([0, 1]);
- apiRef.current.unstable_copySelectedRowsToClipboard();
+ act(() => apiRef.current.selectRows([0, 1]));
+ act(() => apiRef.current.unstable_copySelectedRowsToClipboard());
expect(writeText.firstCall.args[0]).to.equal(['0\tNike', '1\tAdidas'].join('\r\n'));
});
it('should include the headers when includeHeaders=true', () => {
render();
- apiRef.current.selectRows([0, 1]);
- apiRef.current.unstable_copySelectedRowsToClipboard(true);
+ act(() => apiRef.current.selectRows([0, 1]));
+ act(() => apiRef.current.unstable_copySelectedRowsToClipboard(true));
expect(writeText.firstCall.args[0]).to.equal(
['id\tBrand', '0\tNike', '1\tAdidas'].join('\r\n'),
);
@@ -83,7 +83,7 @@ describe(' - Clipboard', () => {
['ctrlKey', 'metaKey'].forEach((key) => {
it(`should copy the selected rows to the clipboard when ${key} + C is pressed`, () => {
render();
- apiRef.current.selectRows([0, 1]);
+ act(() => apiRef.current.selectRows([0, 1]));
const cell = getCell(0, 0);
fireEvent.mouseUp(cell);
fireEvent.click(cell);
@@ -94,7 +94,7 @@ describe(' - Clipboard', () => {
it(`should copy the selected rows and headers to the clipboard when Alt + C is pressed`, () => {
render();
- apiRef.current.selectRows([0, 1]);
+ act(() => apiRef.current.selectRows([0, 1]));
const cell = getCell(0, 0);
fireEvent.mouseUp(cell);
fireEvent.click(cell);
diff --git a/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx
index 7547b2efbccf..7be34305d0e0 100644
--- a/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx
@@ -10,7 +10,7 @@ import {
import { spy } from 'sinon';
import { expect } from 'chai';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer, fireEvent, screen, createEvent } from '@mui/monorepo/test/utils';
+import { createRenderer, fireEvent, screen, createEvent, act } from '@mui/monorepo/test/utils';
import { getCell, getColumnHeaderCell, getColumnHeadersTextContent } from 'test/utils/helperFn';
import { useData } from 'storybook/src/hooks/useData';
@@ -51,7 +51,7 @@ describe(' - Column pinning', () => {
render();
const virtualScroller = document.querySelector(`.${gridClasses.virtualScroller}`)!;
virtualScroller.scrollLeft = 100;
- virtualScroller.dispatchEvent(new Event('scroll'));
+ act(() => virtualScroller.dispatchEvent(new Event('scroll')));
const cell = getCell(0, 2);
fireEvent.mouseUp(cell);
fireEvent.click(cell);
@@ -228,12 +228,12 @@ describe(' - Column pinning', () => {
it('should call when a column is pinned', () => {
const handlePinnedColumnsChange = spy();
render();
- apiRef.current.pinColumn('currencyPair', GridPinnedPosition.left);
+ act(() => apiRef.current.pinColumn('currencyPair', GridPinnedPosition.left));
expect(handlePinnedColumnsChange.lastCall.args[0]).to.deep.equal({
left: ['currencyPair'],
right: [],
});
- apiRef.current.pinColumn('price17M', GridPinnedPosition.right);
+ act(() => apiRef.current.pinColumn('price17M', GridPinnedPosition.right));
expect(handlePinnedColumnsChange.lastCall.args[0]).to.deep.equal({
left: ['currencyPair'],
right: ['price17M'],
@@ -251,7 +251,7 @@ describe(' - Column pinning', () => {
expect(
document.querySelectorAll(`.${gridClasses['pinnedColumns--left']} [role="cell"]`),
).to.have.length(1);
- apiRef.current.pinColumn('price17M', GridPinnedPosition.left);
+ act(() => apiRef.current.pinColumn('price17M', GridPinnedPosition.left));
expect(
document.querySelectorAll(`.${gridClasses['pinnedColumns--left']} [role="cell"]`),
).to.have.length(1);
@@ -278,7 +278,7 @@ describe(' - Column pinning', () => {
`.${gridClasses['pinnedColumns--left']} [data-field="currencyPair"]`,
),
).not.to.equal(null);
- apiRef.current.pinColumn('price17M', GridPinnedPosition.left);
+ act(() => apiRef.current.pinColumn('price17M', GridPinnedPosition.left));
expect(
document.querySelector(
`.${gridClasses['pinnedColumns--left']} [data-field="currencyPair"]`,
@@ -375,7 +375,7 @@ describe(' - Column pinning', () => {
`.${gridClasses.virtualScrollerRenderZone}`,
)!;
expect(renderZone.querySelector('[data-field="currencyPair"]')).not.to.equal(null);
- apiRef.current.pinColumn('currencyPair', GridPinnedPosition.left);
+ act(() => apiRef.current.pinColumn('currencyPair', GridPinnedPosition.left));
const leftColumns = document.querySelector(
`.${gridClasses['pinnedColumns--left']}`,
)!;
@@ -391,14 +391,14 @@ describe(' - Column pinning', () => {
expect(renderZone.querySelector('[data-field="currencyPair"]')).not.to.equal(null);
expect(renderZone.querySelector('[data-field="currencyPair"]')).not.to.equal(null);
- apiRef.current.pinColumn('currencyPair', GridPinnedPosition.left);
+ act(() => apiRef.current.pinColumn('currencyPair', GridPinnedPosition.left));
const leftColumns = document.querySelector(
`.${gridClasses['pinnedColumns--left']}`,
)!;
expect(leftColumns.querySelector('[data-field="currencyPair"]')).not.to.equal(null);
expect(renderZone.querySelector('[data-field="currencyPair"]')).to.equal(null);
- apiRef.current.pinColumn('currencyPair', GridPinnedPosition.right);
+ act(() => apiRef.current.pinColumn('currencyPair', GridPinnedPosition.right));
const rightColumns = document.querySelector(
`.${gridClasses['pinnedColumns--right']}`,
)!;
@@ -408,12 +408,12 @@ describe(' - Column pinning', () => {
it('should not change the columns when called on a pinned column with the same side ', () => {
render();
- apiRef.current.pinColumn('currencyPair', GridPinnedPosition.left);
+ act(() => apiRef.current.pinColumn('currencyPair', GridPinnedPosition.left));
const leftColumns = document.querySelector(
`.${gridClasses['pinnedColumns--left']}`,
)!;
expect(leftColumns.querySelector('[data-id="0"]')?.children).to.have.length(1);
- apiRef.current.pinColumn('currencyPair', GridPinnedPosition.left);
+ act(() => apiRef.current.pinColumn('currencyPair', GridPinnedPosition.left));
expect(leftColumns.querySelector('[data-id="0"]')?.children).to.have.length(1);
});
});
@@ -421,9 +421,9 @@ describe(' - Column pinning', () => {
describe('unpinColumn', () => {
it('should unpin the given column', () => {
render();
- apiRef.current.pinColumn('currencyPair', GridPinnedPosition.left);
+ act(() => apiRef.current.pinColumn('currencyPair', GridPinnedPosition.left));
expect(document.querySelector(`.${gridClasses['pinnedColumns--left']}`)).not.to.equal(null);
- apiRef.current.unpinColumn('currencyPair');
+ act(() => apiRef.current.unpinColumn('currencyPair'));
expect(document.querySelector(`.${gridClasses['pinnedColumns--left']}`)).to.equal(null);
const renderZone = document.querySelector(
`.${gridClasses.virtualScrollerRenderZone}`,
@@ -547,7 +547,7 @@ describe(' - Column pinning', () => {
expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'Currency Pair']);
setProps({ pinnedColumns: { left: ['currencyPair'] } });
expect(getColumnHeadersTextContent()).to.deep.equal(['Currency Pair', 'id']);
- apiRef.current.updateColumns([{ field: 'foo' }, { field: 'bar' }]);
+ act(() => apiRef.current.updateColumns([{ field: 'foo' }, { field: 'bar' }]));
expect(getColumnHeadersTextContent()).to.deep.equal(['Currency Pair', 'id', 'foo', 'bar']);
setProps({ pinnedColumns: { left: ['currencyPair', 'foo'] } });
expect(getColumnHeadersTextContent()).to.deep.equal(['Currency Pair', 'foo', 'id', 'bar']);
@@ -560,7 +560,7 @@ describe(' - Column pinning', () => {
,
);
expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'Currency Pair']);
- apiRef.current.updateColumns([{ field: 'foo' }, { field: 'bar' }]);
+ act(() => apiRef.current.updateColumns([{ field: 'foo' }, { field: 'bar' }]));
expect(getColumnHeadersTextContent()).to.deep.equal(['foo', 'id', 'Currency Pair', 'bar']);
setProps({ pinnedColumns: {} });
expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'Currency Pair', 'foo', 'bar']);
@@ -587,7 +587,7 @@ describe(' - Column pinning', () => {
expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'Currency Pair', '1M', '2M']); // price1M's index = 2
setProps({ pinnedColumns: { left: ['price1M'] } });
expect(getColumnHeadersTextContent()).to.deep.equal(['1M', 'id', 'Currency Pair', '2M']);
- apiRef.current.setColumnIndex('id', 2);
+ act(() => apiRef.current.setColumnIndex('id', 2));
expect(getColumnHeadersTextContent()).to.deep.equal(['1M', 'Currency Pair', 'id', '2M']);
setProps({ pinnedColumns: {} });
expect(getColumnHeadersTextContent()).to.deep.equal(['Currency Pair', 'id', '1M', '2M']); // price1M's index = 2
diff --git a/packages/grid/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx
index b888dc613b37..8e128217449e 100644
--- a/packages/grid/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx
@@ -67,9 +67,7 @@ describe(' - Columns reorder', () => {
const { setProps } = render();
expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'brand']);
- act(() => {
- apiRef.current.setColumnIndex('id', 1);
- });
+ act(() => apiRef.current.setColumnIndex('id', 1));
setProps({ width: 200 });
await raf();
expect(getColumnHeadersTextContent()).to.deep.equal(['brand', 'id']);
@@ -92,7 +90,7 @@ describe(' - Columns reorder', () => {
const { forceUpdate } = render();
expect(getColumnHeadersTextContent()).to.deep.equal(['brand', 'desc', 'type']);
- apiRef!.current.setColumnIndex('brand', 2);
+ act(() => apiRef.current.setColumnIndex('brand', 2));
expect(getColumnHeadersTextContent()).to.deep.equal(['desc', 'type', 'brand']);
forceUpdate(); // test stability
expect(getColumnHeadersTextContent()).to.deep.equal(['desc', 'type', 'brand']);
diff --git a/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx
index d3fd73dfdac4..131378e1b8f9 100644
--- a/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer, fireEvent } from '@mui/monorepo/test/utils';
+import { createRenderer, fireEvent, act } from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import { DataGridPro, GridApi, useGridApiRef, GridColDef, gridClasses } from '@mui/x-data-grid-pro';
import { getActiveCell, getCell, getColumnHeaderCell } from 'test/utils/helperFn';
@@ -106,7 +106,7 @@ describe(' - Column Spanning', () => {
render();
- apiRef!.current.setColumnIndex('price', 1);
+ act(() => apiRef!.current.setColumnIndex('price', 1));
fireClickEvent(getCell(1, 1));
fireEvent.keyDown(getCell(1, 1), { key: 'ArrowRight' });
@@ -139,7 +139,7 @@ describe(' - Column Spanning', () => {
render();
- apiRef!.current.setColumnIndex('brand', 1);
+ act(() => apiRef!.current.setColumnIndex('brand', 1));
// Nike row
expect(() => getCell(0, 0)).to.not.throw();
@@ -215,29 +215,31 @@ describe(' - Column Spanning', () => {
render();
- apiRef!.current.setRows([
- {
- id: 0,
- brand: 'Adidas',
- category: 'Shoes',
- price: '$100',
- rating: '4.5',
- },
- {
- id: 1,
- brand: 'Nike',
- category: 'Shoes',
- price: '$120',
- rating: '4.5',
- },
- {
- id: 2,
- brand: 'Reebok',
- category: 'Shoes',
- price: '$90',
- rating: '4.5',
- },
- ]);
+ act(() =>
+ apiRef!.current.setRows([
+ {
+ id: 0,
+ brand: 'Adidas',
+ category: 'Shoes',
+ price: '$100',
+ rating: '4.5',
+ },
+ {
+ id: 1,
+ brand: 'Nike',
+ category: 'Shoes',
+ price: '$120',
+ rating: '4.5',
+ },
+ {
+ id: 2,
+ brand: 'Reebok',
+ category: 'Shoes',
+ price: '$90',
+ rating: '4.5',
+ },
+ ]),
+ );
// Adidas row
expect(() => getCell(0, 0)).to.not.throw();
diff --git a/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
index 9114ba0901fc..48534dbbd957 100644
--- a/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer, fireEvent, screen, waitFor } from '@mui/monorepo/test/utils';
+import { createRenderer, fireEvent, screen, act } from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import { spy } from 'sinon';
import {
@@ -53,19 +53,18 @@ describe(' - Columns', () => {
it('should open the column menu', async () => {
render();
expect(screen.queryByRole('menu')).to.equal(null);
- apiRef.current.showColumnMenu('brand');
- await waitFor(() => expect(screen.queryByRole('menu')).not.to.equal(null));
+ act(() => apiRef.current.showColumnMenu('brand'));
+ expect(screen.queryByRole('menu')).not.to.equal(null);
});
it('should set the correct id and aria-labelledby', async () => {
render();
expect(screen.queryByRole('menu')).to.equal(null);
- apiRef.current.showColumnMenu('brand');
- await waitFor(() => {
- const menu = screen.queryByRole('menu');
- expect(menu.id).to.match(/^mui-[0-9]+/);
- expect(menu.getAttribute('aria-labelledby')).to.match(/^mui-[0-9]+/);
- });
+ act(() => apiRef.current.showColumnMenu('brand'));
+ clock.runToLast();
+ const menu = screen.queryByRole('menu');
+ expect(menu.id).to.match(/:r[0-9a-z]+:/);
+ expect(menu.getAttribute('aria-labelledby')).to.match(/:r[0-9a-z]+:/);
});
});
@@ -73,10 +72,10 @@ describe(' - Columns', () => {
it('should toggle the column menu', async () => {
render();
expect(screen.queryByRole('menu')).to.equal(null);
- apiRef.current.toggleColumnMenu('brand');
+ act(() => apiRef.current.toggleColumnMenu('brand'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
- apiRef.current.toggleColumnMenu('brand');
+ act(() => apiRef.current.toggleColumnMenu('brand'));
clock.runToLast();
expect(screen.queryByRole('menu')).to.equal(null);
});
@@ -169,7 +168,7 @@ describe(' - Columns', () => {
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '198px' });
expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' });
- apiRef.current.setColumnWidth('brand', 150);
+ act(() => apiRef.current.setColumnWidth('brand', 150));
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '148px' });
expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '150px' });
@@ -209,7 +208,7 @@ describe(' - Columns', () => {
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '198px' });
expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' });
- apiRef.current.setColumnWidth('brand', 150);
+ act(() => apiRef.current.setColumnWidth('brand', 150));
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '175px' });
expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '150px' });
@@ -226,7 +225,7 @@ describe(' - Columns', () => {
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '98px' });
expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '200px' });
- apiRef.current.setColumnWidth('brand', 150);
+ act(() => apiRef.current.setColumnWidth('brand', 150));
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '125px' });
expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '150px' });
@@ -289,7 +288,7 @@ describe(' - Columns', () => {
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '198px' });
expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' });
- apiRef.current.setColumnWidth('brand', 150);
+ act(() => apiRef.current.setColumnWidth('brand', 150));
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '148px' });
expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '150px' });
@@ -350,26 +349,26 @@ describe(' - Columns', () => {
describe('column pipe processing', () => {
it('should not loose column width when re-applying pipe processing', () => {
render();
- apiRef.current.setColumnWidth('brand', 300);
+ act(() => apiRef.current.setColumnWidth('brand', 300));
expect(gridColumnLookupSelector(apiRef).brand.computedWidth).to.equal(300);
- apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns');
+ act(() => apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns'));
expect(gridColumnLookupSelector(apiRef).brand.computedWidth).to.equal(300);
});
it('should not loose column index when re-applying pipe processing', () => {
render();
expect(gridColumnFieldsSelector(apiRef).indexOf('brand')).to.equal(2);
- apiRef.current.setColumnIndex('brand', 1);
+ act(() => apiRef.current.setColumnIndex('brand', 1));
expect(gridColumnFieldsSelector(apiRef).indexOf('brand')).to.equal(1);
- apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns');
+ act(() => apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns'));
expect(gridColumnFieldsSelector(apiRef).indexOf('brand')).to.equal(1);
});
it('should not loose imperatively added columns when re-applying pipe processing', () => {
render();
- apiRef.current.updateColumn({ field: 'id' });
+ act(() => apiRef.current.updateColumn({ field: 'id' }));
expect(gridColumnFieldsSelector(apiRef)).to.deep.equal(['__check__', 'brand', 'id']);
- apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns');
+ act(() => apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns'));
expect(gridColumnFieldsSelector(apiRef)).to.deep.equal(['__check__', 'brand', 'id']);
});
});
diff --git a/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx
index 1dab9fb398ad..b008353ddd66 100644
--- a/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { spy } from 'sinon';
import { expect } from 'chai';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer, fireEvent } from '@mui/monorepo/test/utils';
+import { createRenderer, fireEvent, act } from '@mui/monorepo/test/utils';
import {
DataGridPro,
DataGridProProps,
@@ -27,7 +27,7 @@ const columns: GridColumns = [{ field: 'id' }, { field: 'idBis' }];
* TODO v6: Remove deprecated tests
*/
describe(' - Columns Visibility', () => {
- const { render } = createRenderer();
+ const { render } = createRenderer({ clock: 'fake' });
let apiRef: React.MutableRefObject;
@@ -60,7 +60,7 @@ describe(' - Columns Visibility', () => {
/>,
);
- apiRef.current.updateColumns([{ field: 'id', width: 300 }]);
+ act(() => apiRef.current.updateColumns([{ field: 'id', width: 300 }]));
expect(onColumnVisibilityModelChange.callCount).to.equal(0);
});
@@ -73,7 +73,7 @@ describe(' - Columns Visibility', () => {
/>,
);
- apiRef.current.updateColumns([{ field: 'id', hide: true }]);
+ act(() => apiRef.current.updateColumns([{ field: 'id', hide: true }]));
expect(onColumnVisibilityModelChange.callCount).to.equal(1);
expect(onColumnVisibilityModelChange.lastCall.firstArg).to.deep.equal({
id: false,
@@ -90,14 +90,14 @@ describe(' - Columns Visibility', () => {
initialState={{ columns: { columnVisibilityModel: { idBis: false } } }}
/>,
);
- apiRef.current.setColumnVisibility('id', false);
+ act(() => apiRef.current.setColumnVisibility('id', false));
expect(gridColumnLookupSelector(apiRef).id.hide).to.equal(false);
expect(gridColumnVisibilityModelSelector(apiRef)).to.deep.equal({
id: false,
idBis: false,
});
- apiRef.current.setColumnVisibility('id', true);
+ act(() => apiRef.current.setColumnVisibility('id', true));
expect(gridColumnLookupSelector(apiRef).id.hide).to.equal(false);
expect(gridColumnVisibilityModelSelector(apiRef)).to.deep.equal({
id: true,
@@ -115,14 +115,14 @@ describe(' - Columns Visibility', () => {
/>,
);
- apiRef.current.setColumnVisibility('id', false);
+ act(() => apiRef.current.setColumnVisibility('id', false));
expect(onColumnVisibilityModelChange.callCount).to.equal(1);
expect(onColumnVisibilityModelChange.lastCall.firstArg).to.deep.equal({
id: false,
idBis: false,
});
- apiRef.current.setColumnVisibility('id', true);
+ act(() => apiRef.current.setColumnVisibility('id', true));
expect(onColumnVisibilityModelChange.callCount).to.equal(2);
expect(onColumnVisibilityModelChange.lastCall.firstArg).to.deep.equal({
idBis: false,
@@ -140,10 +140,10 @@ describe(' - Columns Visibility', () => {
/>,
);
- apiRef.current.setColumnVisibility('id', false);
+ act(() => apiRef.current.setColumnVisibility('id', false));
expect(onColumnVisibilityChange.callCount).to.equal(0);
- apiRef.current.setColumnVisibility('id', true);
+ act(() => apiRef.current.setColumnVisibility('id', true));
expect(onColumnVisibilityChange.callCount).to.equal(0);
});
});
@@ -152,14 +152,14 @@ describe(' - Columns Visibility', () => {
it('should update `columnVisibilityModel` and `GridColDef.hide` in state', () => {
render();
- apiRef.current.setColumnVisibility('id', false);
+ act(() => apiRef.current.setColumnVisibility('id', false));
expect(gridColumnLookupSelector(apiRef).id.hide).to.equal(true);
expect(gridColumnVisibilityModelSelector(apiRef)).to.deep.equal({
id: false,
idBis: true,
});
- apiRef.current.setColumnVisibility('id', true);
+ act(() => apiRef.current.setColumnVisibility('id', true));
expect(gridColumnLookupSelector(apiRef).id.hide).to.equal(false);
expect(gridColumnVisibilityModelSelector(apiRef)).to.deep.equal({
id: true,
@@ -172,14 +172,14 @@ describe(' - Columns Visibility', () => {
render();
- apiRef.current.setColumnVisibility('id', false);
+ act(() => apiRef.current.setColumnVisibility('id', false));
expect(onColumnVisibilityModelChange.callCount).to.equal(1);
expect(onColumnVisibilityModelChange.lastCall.firstArg).to.deep.equal({
id: false,
idBis: true,
});
- apiRef.current.setColumnVisibility('id', true);
+ act(() => apiRef.current.setColumnVisibility('id', true));
expect(onColumnVisibilityModelChange.callCount).to.equal(2);
expect(onColumnVisibilityModelChange.lastCall.firstArg).to.deep.equal({
id: true,
@@ -192,12 +192,12 @@ describe(' - Columns Visibility', () => {
render();
- apiRef.current.setColumnVisibility('id', false);
+ act(() => apiRef.current.setColumnVisibility('id', false));
expect(onColumnVisibilityChange.callCount).to.equal(1);
expect(onColumnVisibilityChange.lastCall.firstArg).to.have.property('isVisible', false);
expect(onColumnVisibilityChange.lastCall.firstArg).to.have.property('field', 'id');
- apiRef.current.setColumnVisibility('id', true);
+ act(() => apiRef.current.setColumnVisibility('id', true));
expect(onColumnVisibilityChange.callCount).to.equal(2);
expect(onColumnVisibilityChange.lastCall.firstArg).to.have.property('isVisible', true);
expect(onColumnVisibilityChange.lastCall.firstArg).to.have.property('field', 'id');
@@ -215,13 +215,13 @@ describe(' - Columns Visibility', () => {
onColumnVisibilityModelChange={onColumnVisibilityModelChange}
/>,
);
- apiRef.current.setColumnVisibilityModel({});
+ act(() => apiRef.current.setColumnVisibilityModel({}));
expect(onColumnVisibilityModelChange.callCount).to.equal(1);
expect(onColumnVisibilityModelChange.lastCall.firstArg).to.deep.equal({});
});
});
- it('should not hide column when resizing a column after hiding it and showing it again ', () => {
+ it('should not hide column when resizing a column after hiding it and showing it again', () => {
const { getByText } = render(
- Detail panel', () => {
expect(getColumnValues(1)[0]).to.equal('0');
const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!;
virtualScroller.scrollTop = 250; // 50 + 50 (detail panel) + 50 + 100 (detail panel * 2)
- virtualScroller.dispatchEvent(new Event('scroll'));
+ act(() => virtualScroller.dispatchEvent(new Event('scroll')));
expect(getColumnValues(1)[0]).to.equal('2'); // If there was no expanded row, the first rendered would be 5
});
@@ -565,9 +565,9 @@ describe(' - Detail panel', () => {
it('should toggle the panel of the given row id', () => {
render( Detail
} />);
expect(screen.queryByText('Detail')).to.equal(null);
- apiRef.current.toggleDetailPanel(0);
+ act(() => apiRef.current.toggleDetailPanel(0));
expect(screen.queryByText('Detail')).not.to.equal(null);
- apiRef.current.toggleDetailPanel(0);
+ act(() => apiRef.current.toggleDetailPanel(0));
expect(screen.queryByText('Detail')).to.equal(null);
});
@@ -578,7 +578,7 @@ describe(' - Detail panel', () => {
getDetailPanelContent={({ id }) => (id === 0 ? Detail
: null)}
/>,
);
- apiRef.current.toggleDetailPanel(1);
+ act(() => apiRef.current.toggleDetailPanel(1));
expect(document.querySelector('.MuiDataGrid-detailPanels')).to.equal(null);
expect(getRow(1)).not.toHaveComputedStyle({ marginBottom: '50px' });
});
@@ -596,7 +596,7 @@ describe(' - Detail panel', () => {
}}
/>,
);
- expect(apiRef.current.getExpandedDetailPanels()).to.deep.equal([0, 1]);
+ act(() => expect(apiRef.current.getExpandedDetailPanels()).to.deep.equal([0, 1]));
});
});
@@ -615,7 +615,7 @@ describe(' - Detail panel', () => {
expect(screen.queryByText('Row 0')).not.to.equal(null);
expect(screen.queryByText('Row 1')).to.equal(null);
expect(screen.queryByText('Row 2')).to.equal(null);
- apiRef.current.setExpandedDetailPanels([1, 2]);
+ act(() => apiRef.current.setExpandedDetailPanels([1, 2]));
expect(screen.queryByText('Row 0')).to.equal(null);
expect(screen.queryByText('Row 1')).not.to.equal(null);
expect(screen.queryByText('Row 2')).not.to.equal(null);
diff --git a/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.new.test.tsx b/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.new.test.tsx
index 7d1b4ef7e615..b033265dea36 100644
--- a/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.new.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.new.test.tsx
@@ -38,8 +38,6 @@ const generateDate = (
return rawDate.getTime();
};
-const nativeSetTimeout = setTimeout;
-
describe(' - Edit Components', () => {
const { render, clock } = createRenderer({ clock: 'fake' });
@@ -118,11 +116,11 @@ describe(' - Edit Components', () => {
expect(screen.queryByTestId('LoadIcon')).to.equal(null);
fireEvent.change(input, { target: { value: 'Puma' } });
- clock.tick(200);
+ act(() => clock.tick(200));
expect(screen.queryByTestId('LoadIcon')).not.to.equal(null);
clock.tick(500);
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ await act(() => Promise.resolve());
expect(screen.queryByTestId('LoadIcon')).to.equal(null);
});
@@ -139,7 +137,7 @@ describe(' - Edit Components', () => {
const input = cell.querySelector('input')!;
fireEvent.change(input, { target: { value: 'Puma' } });
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ await act(() => Promise.resolve());
expect(onValueChange.callCount).to.equal(1);
expect(onValueChange.lastCall.args[1]).to.equal('Puma');
@@ -199,9 +197,9 @@ describe(' - Edit Components', () => {
expect(input.value).to.equal('100');
fireEvent.change(input, { target: { value: '110' } });
- clock.tick(200);
+ act(() => clock.tick(200));
expect(preProcessEditCellPropsSpy.lastCall.args[0].props.value).to.equal(110);
- await new Promise((resolve) => nativeSetTimeout(resolve)); // To avoid mutating the state after unmount
+ await act(() => Promise.resolve()); // To avoid mutating the state after unmount
});
it('should display a indicator while processing the props', async () => {
@@ -223,7 +221,7 @@ describe(' - Edit Components', () => {
expect(screen.queryByTestId('LoadIcon')).not.to.equal(null);
clock.tick(500);
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ await act(() => Promise.resolve());
expect(screen.queryByTestId('LoadIcon')).to.equal(null);
});
});
@@ -340,7 +338,7 @@ describe(' - Edit Components', () => {
const input = cell.querySelector('input')!;
fireEvent.change(input, { target: { value: '2022-02-10' } });
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ await act(() => Promise.resolve());
expect(onValueChange.callCount).to.equal(1);
expect((onValueChange.lastCall.args[1]! as Date).toISOString()).to.equal(
@@ -548,14 +546,14 @@ describe(' - Edit Components', () => {
expect(screen.queryAllByRole('option')[1]).to.have.text('adidas');
});
- it('should pass the value prop to the select', () => {
+ it('should pass the value prop to the select', async () => {
render();
const cell = getCell(0, 0);
fireEvent.doubleClick(cell);
expect(cell.textContent!.replace(/[\W]+/, '')).to.equal('Nike'); // We use .replace to remove ​
- apiRef.current.setEditCellValue({ id: 0, field: 'brand', value: 'Adidas' });
+ await act(() => apiRef.current.setEditCellValue({ id: 0, field: 'brand', value: 'Adidas' }));
expect(cell.textContent!.replace(/[\W]+/, '')).to.equal('Adidas');
});
@@ -570,7 +568,7 @@ describe(' - Edit Components', () => {
const cell = getCell(0, 0);
fireEvent.doubleClick(cell);
fireEvent.click(screen.queryAllByRole('option')[1]);
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ await Promise.resolve();
expect(onValueChange.callCount).to.equal(1);
expect(onValueChange.lastCall.args[1]).to.equal('Adidas');
@@ -614,7 +612,7 @@ describe(' - Edit Components', () => {
const input = cell.querySelector('input')!;
fireEvent.click(input);
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ await act(() => Promise.resolve());
expect(onValueChange.callCount).to.equal(1);
expect(onValueChange.lastCall.args[1]).to.equal(true);
diff --git a/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.old.test.tsx b/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.old.test.tsx
index 4daf3dae83a4..70e86a63c80c 100644
--- a/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.old.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.old.test.tsx
@@ -43,8 +43,6 @@ const generateDate = (
return rawDate.getTime();
};
-const nativeSetTimeout = setTimeout;
-
describe(' - Edit Components', () => {
let baselineProps: Pick;
@@ -122,6 +120,8 @@ describe(' - Edit Components', () => {
fireEvent.doubleClick(cell);
fireEvent.click(screen.queryAllByRole('option')[1]);
+ await act(() => Promise.resolve());
+
await waitFor(() => {
expect(cell).not.to.have.class('MuiDataGrid-cell--editing');
expect(cell).to.have.text('Adidas');
@@ -170,6 +170,8 @@ describe(' - Edit Components', () => {
fireEvent.doubleClick(cell);
fireEvent.click(screen.queryAllByRole('option')[1]);
+ await act(() => Promise.resolve());
+
await waitFor(() => {
expect(cell).not.to.have.class('MuiDataGrid-cell--editing');
expect(cell).to.have.text('Italy');
@@ -203,6 +205,8 @@ describe(' - Edit Components', () => {
fireEvent.doubleClick(cell);
fireEvent.click(screen.queryAllByRole('option')[1]);
+ await act(() => Promise.resolve());
+
await waitFor(() => {
expect(cell).not.to.have.class('MuiDataGrid-cell--editing');
expect(cell).to.have.text('Adidas');
@@ -251,6 +255,8 @@ describe(' - Edit Components', () => {
fireEvent.doubleClick(cell);
fireEvent.click(screen.queryAllByRole('option')[1]);
+ await act(() => Promise.resolve());
+
await waitFor(() => {
expect(cell).not.to.have.class('MuiDataGrid-cell--editing');
expect(cell).to.have.text('Italy');
@@ -342,6 +348,9 @@ describe(' - Edit Components', () => {
fireEvent.keyDown(cell, { key: 'Enter' });
fireEvent.keyDown(screen.queryByRole('option', { name: 'Nike' }), { key: 'ArrowDown' });
fireEvent.keyDown(screen.queryByRole('option', { name: 'Adidas' }), { key: 'Enter' });
+
+ await act(() => Promise.resolve());
+
await waitFor(() => {
expect(getCell(1, 0)).toHaveFocus();
});
@@ -397,6 +406,7 @@ describe(' - Edit Components', () => {
expect(cell).to.have.class('MuiDataGrid-cell--editing');
const option = screen.queryAllByRole('option')[1];
fireClickEvent(option);
+
await waitFor(() => {
expect(cell.firstChild).to.have.class('Mui-error');
});
@@ -428,9 +438,10 @@ describe(' - Edit Components', () => {
const option = screen.queryByRole('option', { name: 'Adidas' });
fireEvent.mouseUp(option);
fireEvent.click(option);
+
clock.tick(500);
- await new Promise((resolve) => nativeSetTimeout(resolve)); // Wait for promise
+ await act(() => Promise.resolve());
expect(preProcessEditCellProps.callCount).to.equal(1);
expect(preProcessEditCellProps.lastCall.args[0].props).to.deep.equal({
@@ -465,11 +476,11 @@ describe(' - Edit Components', () => {
expect(input.value).to.equal('1941');
fireEvent.change(input, { target: { value: '1942' } });
clock.tick(500);
-
fireEvent.keyDown(input, { key: 'Enter' });
+
await waitFor(() => {
expect(cell).to.have.text('1,942');
- expect(apiRef.current.getRow(baselineProps.rows[0].id)!.year).to.equal(1942);
+ act(() => expect(apiRef.current.getRow(baselineProps.rows[0].id)!.year).to.equal(1942));
});
});
@@ -560,9 +571,7 @@ describe(' - Edit Components', () => {
fireEvent.mouseUp(cell);
fireEvent.doubleClick(cell);
const newValue = new Date(2021, 6, 4);
- act(() => {
- apiRef.current.setEditCellValue({ id: 0, field: 'date', value: newValue });
- });
+ act(() => apiRef.current.setEditCellValue({ id: 0, field: 'date', value: newValue }));
const input = cell.querySelector('input')!;
await waitFor(() => {
expect(input.value).to.equal('2021-07-04');
@@ -629,7 +638,7 @@ describe(' - Edit Components', () => {
clock.tick(500);
fireEvent.keyDown(input, { key: 'Enter' });
- await new Promise((resolve) => nativeSetTimeout(resolve)); // Wait for promise
+ await act(() => Promise.resolve());
expect(preProcessEditCellProps.callCount).to.equal(1);
expect(preProcessEditCellProps.lastCall.args[0].props.value.getTime()).to.equal(
@@ -702,9 +711,7 @@ describe(' - Edit Components', () => {
fireEvent.mouseUp(cell);
fireEvent.doubleClick(cell);
const newValue = new Date(2021, 6, 4, 17, 30);
- act(() => {
- apiRef.current.setEditCellValue({ id: 0, field: 'date', value: newValue });
- });
+ act(() => apiRef.current.setEditCellValue({ id: 0, field: 'date', value: newValue }));
const input = cell.querySelector('input')!;
await waitFor(() => {
expect(input.value).to.equal('2021-07-04T17:30');
@@ -798,7 +805,7 @@ describe(' - Edit Components', () => {
});
describe('column type: boolean', () => {
- it('should call onEditCellPropsChange with the correct params', () => {
+ it('should call onEditCellPropsChange with the correct params', async () => {
const onEditCellPropsChange = spy();
render(
- Edit Components', () => {
fireEvent.doubleClick(cell);
const input = cell.querySelector('input')!;
fireEvent.click(input);
+
expect(onEditCellPropsChange.args[0][0]).to.deep.equal({
id: 0,
field: 'isAdmin',
@@ -852,7 +860,7 @@ describe(' - Edit Components', () => {
fireEvent.click(input);
fireEvent.doubleClick(getCell(1, 0));
- await new Promise((resolve) => nativeSetTimeout(resolve)); // Wait for promise
+ await act(() => Promise.resolve());
expect(preProcessEditCellProps.callCount).to.equal(1);
expect(preProcessEditCellProps.lastCall.args[0].props).to.deep.equal({
diff --git a/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx
index 350e18764347..ca64e8fde7d3 100644
--- a/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer, fireEvent, screen, waitFor } from '@mui/monorepo/test/utils';
+import { createRenderer, fireEvent, screen, waitFor, act } from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import {
DataGridPro,
@@ -225,10 +225,13 @@ describe(' - Events Params', () => {
const cell = getCell(1, 1);
fireEvent.doubleClick(cell);
const input = cell.querySelector('input')!;
+
fireEvent.change(input, { target: { value: 'Lisa' } });
+
clock.tick(500);
expect(handleEditCellPropsChange.callCount).to.equal(1);
fireEvent.keyDown(input, { key: 'Enter' });
+
await waitFor(() => {
expect(cell).to.have.text('Jack');
});
@@ -329,7 +332,7 @@ describe(' - Events Params', () => {
it('publishing GRID_ROWS_SCROLL should call onRowsScrollEnd callback', () => {
const handleRowsScrollEnd = spy();
render();
- apiRef.current.publishEvent('rowsScroll', { left: 0, top: 3 * 52 });
+ act(() => apiRef.current.publishEvent('rowsScroll', { left: 0, top: 3 * 52 }));
expect(handleRowsScrollEnd.callCount).to.equal(1);
});
@@ -383,7 +386,7 @@ describe(' - Events Params', () => {
const { unmount } = render();
- apiRef.current.subscribeEvent('unmount', onUnmount);
+ act(() => apiRef.current.subscribeEvent('unmount', onUnmount));
unmount();
expect(onUnmount.calledOnce).to.equal(true);
});
diff --git a/packages/grid/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx
index a62da3cb5188..9541c5b15daa 100644
--- a/packages/grid/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx
@@ -1,6 +1,6 @@
import { GridColumns, useGridApiRef, DataGridPro, GridApi } from '@mui/x-data-grid-pro';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer } from '@mui/monorepo/test/utils';
+import { createRenderer, act } from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import * as React from 'react';
@@ -51,12 +51,14 @@ describe(' - Export', () => {
expect(apiRef.current.getDataAsCsv()).to.equal(
['id,Brand', '0,Nike', '1,Adidas', '2,Puma'].join('\r\n'),
);
- apiRef.current.updateRows([
- {
- id: 1,
- brand: 'Adidas,Reebok',
- },
- ]);
+ act(() =>
+ apiRef.current.updateRows([
+ {
+ id: 1,
+ brand: 'Adidas,Reebok',
+ },
+ ]),
+ );
expect(apiRef.current.getDataAsCsv()).to.equal(
['id,Brand', '0,Nike', '1,"Adidas,Reebok"', '2,Puma'].join('\r\n'),
);
diff --git a/packages/grid/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx
index e2b366084a58..7102ef025d61 100644
--- a/packages/grid/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx
@@ -8,7 +8,7 @@ import {
useGridApiRef,
} from '@mui/x-data-grid-pro';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer } from '@mui/monorepo/test/utils';
+import { createRenderer, act } from '@mui/monorepo/test/utils';
const isJSDOM = /jsdom/.test(window.navigator.userAgent);
@@ -35,7 +35,7 @@ describe(' - Filter panel', () => {
it('should add an id and operatorValue to the filter item created when opening the filter panel', () => {
render();
- apiRef.current.showFilterPanel('brand');
+ act(() => apiRef.current.showFilterPanel('brand'));
const model = gridFilterModelSelector(apiRef);
expect(model.items).to.have.length(1);
expect(model.items[0].id).to.not.equal(null);
diff --git a/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx
index cb0ece8e1ae2..c324e782d322 100644
--- a/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx
@@ -11,7 +11,7 @@ import {
DataGridPro,
} from '@mui/x-data-grid-pro';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer, fireEvent, screen } from '@mui/monorepo/test/utils';
+import { createRenderer, fireEvent, screen, act } from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import * as React from 'react';
import { spy } from 'sinon';
@@ -92,28 +92,30 @@ describe(' - Filter', () => {
brand: 'Hugo',
},
];
- apiRef.current.setRows(newRows);
+ act(() => apiRef.current.setRows(newRows));
expect(getColumnValues(0)).to.deep.equal(['Asics']);
});
it('should apply the filterModel prop correctly on GridApiRef update row data', () => {
render();
- apiRef.current.updateRows([{ id: 1, brand: 'Fila' }]);
- apiRef.current.updateRows([{ id: 0, brand: 'Patagonia' }]);
+ act(() => apiRef.current.updateRows([{ id: 1, brand: 'Fila' }]));
+ act(() => apiRef.current.updateRows([{ id: 0, brand: 'Patagonia' }]));
expect(getColumnValues(0)).to.deep.equal(['Patagonia', 'Fila', 'Puma']);
});
it('should allow apiRef to setFilterModel', () => {
render();
- apiRef.current.setFilterModel({
- items: [
- {
- columnField: 'brand',
- value: 'a',
- operatorValue: 'startsWith',
- },
- ],
- });
+ act(() =>
+ apiRef.current.setFilterModel({
+ items: [
+ {
+ columnField: 'brand',
+ value: 'a',
+ operatorValue: 'startsWith',
+ },
+ ],
+ }),
+ );
expect(getColumnValues(0)).to.deep.equal(['Adidas']);
});
@@ -156,7 +158,7 @@ describe(' - Filter', () => {
},
],
};
- apiRef.current.setFilterModel(newModel);
+ act(() => apiRef.current.setFilterModel(newModel));
expect(getColumnValues(0)).to.deep.equal(['Adidas']);
});
@@ -434,14 +436,14 @@ describe(' - Filter', () => {
screen.getByRole('grid').scrollIntoView();
const initialScrollPosition = window.scrollY;
expect(initialScrollPosition).not.to.equal(0);
- apiRef.current.hidePreferences();
+ act(() => apiRef.current.hidePreferences());
clock.tick(100);
- apiRef.current.showPreferences(GridPreferencePanelsValue.filters);
+ act(() => apiRef.current.showPreferences(GridPreferencePanelsValue.filters));
expect(window.scrollY).to.equal(initialScrollPosition);
});
describe('Server', () => {
- it('should refresh the filter panel when adding filters', () => {
+ it('should refresh the filter panel when adding filters', async () => {
function loadServerRows(commodityFilterValue: string | undefined) {
const serverRows = [
{ id: '1', commodity: 'rice' },
@@ -511,6 +513,8 @@ describe(' - Filter', () => {
}
render();
+ await act(() => Promise.resolve()); // Wait for the server to send rows
+
const addButton = screen.getByRole('button', { name: /Add Filter/i });
fireEvent.click(addButton);
const filterForms = document.querySelectorAll(`.MuiDataGrid-filterForm`);
diff --git a/packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx
index 6c2c146d02c1..0984bdaca585 100644
--- a/packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer, screen } from '@mui/monorepo/test/utils';
+import { createRenderer, screen, act } from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { GridApi, useGridApiRef, DataGridPro, ptBR, DataGridProProps } from '@mui/x-data-grid-pro';
@@ -127,7 +127,7 @@ describe(' - Layout', () => {
width: '198px', // because of the 2px border
});
- apiRef!.current.setColumnVisibility('age', true);
+ act(() => apiRef!.current.setColumnVisibility('age', true));
firstColumn = document.querySelector('[role="columnheader"][aria-colindex="1"]');
expect(firstColumn).toHaveInlineStyle({
width: '148px', // because of the 2px border
@@ -186,7 +186,7 @@ describe(' - Layout', () => {
width: '198px', // because of the 2px border
});
- apiRef!.current.setColumnVisibility('age', true);
+ act(() => apiRef!.current.setColumnVisibility('age', true));
firstColumn = document.querySelector('[role="columnheader"][aria-colindex="1"]');
expect(firstColumn).toHaveInlineStyle({
width: '148px', // because of the 2px border
diff --git a/packages/grid/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx b/packages/grid/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx
index 6fd5d5f6ce7f..60dd7acc05f0 100644
--- a/packages/grid/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx
@@ -7,13 +7,13 @@ import {
DataGridProProps,
} from '@mui/x-data-grid-pro';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer, screen, fireEvent } from '@mui/monorepo/test/utils';
+import { createRenderer, screen, fireEvent, act } from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import { spy } from 'sinon';
import { getData } from 'storybook/src/data/data-service';
describe(' - Print export', () => {
- const { render } = createRenderer();
+ const { render, clock } = createRenderer();
const NB_ROWS = 2;
const defaultData = getData(NB_ROWS, 2);
@@ -55,11 +55,12 @@ describe(' - Print export', () => {
];
describe('Export toolbar', () => {
+ clock.withFakeTimers();
+
it('should display print button by default', () => {
render();
fireEvent.click(screen.queryByRole('button', { name: 'Export' }));
expect(screen.queryByRole('menu')).not.to.equal(null);
-
expect(screen.queryByRole('menuitem', { name: 'Print' })).not.to.equal(null);
});
@@ -71,7 +72,6 @@ describe(' - Print export', () => {
/>,
);
fireEvent.click(screen.queryByRole('button', { name: 'Export' }));
-
expect(screen.queryByRole('menu')).not.to.equal(null);
expect(screen.queryByRole('menuitem', { name: 'Print' })).to.equal(null);
});
@@ -100,9 +100,11 @@ describe(' - Print export', () => {
expect(onColumnVisibilityModelChange.callCount).to.equal(0);
- await apiRef.current.exportDataAsPrint({
- fields: printVisible ? ['currencyPair', 'id'] : ['id'],
- });
+ await act(() =>
+ apiRef.current.exportDataAsPrint({
+ fields: printVisible ? ['currencyPair', 'id'] : ['id'],
+ }),
+ );
expect(onColumnVisibilityModelChange.callCount).to.equal(2);
// verify column visibility has been set
@@ -139,9 +141,11 @@ describe(' - Print export', () => {
expect(onColumnVisibilityModelChange.callCount).to.equal(0);
- await apiRef.current.exportDataAsPrint({
- fields: printVisible ? ['currencyPair', 'id'] : ['id'],
- });
+ await act(() =>
+ apiRef.current.exportDataAsPrint({
+ fields: printVisible ? ['currencyPair', 'id'] : ['id'],
+ }),
+ );
expect(onColumnVisibilityModelChange.callCount).to.equal(2);
@@ -168,7 +172,7 @@ describe(' - Print export', () => {
expect(onColumnVisibilityModelChange.callCount).to.equal(0);
- await apiRef.current.exportDataAsPrint({ fields: ['id'], allColumns: true });
+ await act(() => apiRef.current.exportDataAsPrint({ fields: ['id'], allColumns: true }));
expect(onColumnVisibilityModelChange.firstCall.firstArg).to.deep.equal({
currencyPair: false,
@@ -188,7 +192,7 @@ describe(' - Print export', () => {
expect(onColumnVisibilityModelChange.callCount).to.equal(0);
- await apiRef.current.exportDataAsPrint({ fields: ['id'], allColumns: true });
+ await act(() => apiRef.current.exportDataAsPrint({ fields: ['id'], allColumns: true }));
expect(onColumnVisibilityModelChange.firstCall.firstArg).to.deep.equal({
currencyPair: false,
@@ -208,7 +212,7 @@ describe(' - Print export', () => {
expect(onColumnVisibilityModelChange.callCount).to.equal(0);
- await apiRef.current.exportDataAsPrint({ allColumns: true });
+ await act(() => apiRef.current.exportDataAsPrint({ allColumns: true }));
expect(onColumnVisibilityModelChange.firstCall.firstArg).to.deep.equal({
currencyPair: true,
@@ -228,7 +232,7 @@ describe(' - Print export', () => {
expect(onColumnVisibilityModelChange.callCount).to.equal(0);
- await apiRef.current.exportDataAsPrint({ allColumns: true });
+ await act(() => apiRef.current.exportDataAsPrint({ allColumns: true }));
expect(onColumnVisibilityModelChange.firstCall.firstArg).to.deep.equal({
currencyPair: true,
diff --git a/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.new.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.new.test.tsx
index bbbd71612582..1a39ee8cc5fa 100644
--- a/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.new.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.new.test.tsx
@@ -16,8 +16,6 @@ import { getCell, getRow } from 'test/utils/helperFn';
import { spy } from 'sinon';
import { getData } from 'storybook/src/data/data-service';
-const nativeSetTimeout = setTimeout;
-
describe(' - Row Editing', () => {
const { render, clock } = createRenderer();
@@ -93,9 +91,9 @@ describe(' - Row Editing', () => {
it('should throw when the row is already in edit mode', () => {
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
- expect(() => {
- apiRef.current.startRowEditMode({ id: 0 });
- }).to.throw('MUI: The row with id=0 is not in view mode.');
+ expect(() => act(() => apiRef.current.startRowEditMode({ id: 0 }))).to.throw(
+ 'MUI: The row with id=0 is not in view mode.',
+ );
});
it('should update the CSS class of all editable cells', () => {
@@ -153,7 +151,9 @@ describe(' - Row Editing', () => {
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
expect(renderEditCell1.lastCall.args[0].value).to.equal('USDGBP');
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'usdgbp' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'usdgbp' }),
+ );
expect(renderEditCell1.lastCall.args[0].value).to.equal('usdgbp');
});
@@ -165,8 +165,10 @@ describe(' - Row Editing', () => {
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
expect(renderEditCell1.lastCall.args[0].row).to.deep.equal(defaultData.rows[0]);
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: ' usdgbp ' });
- await apiRef.current.setEditCellValue({ id: 0, field: 'price1M', value: 100 });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: ' usdgbp ' }),
+ );
+ await act(() => apiRef.current.setEditCellValue({ id: 0, field: 'price1M', value: 100 }));
expect(renderEditCell1.lastCall.args[0].row).to.deep.equal({
...defaultData.rows[0],
currencyPair: 'usdgbp',
@@ -179,7 +181,9 @@ describe(' - Row Editing', () => {
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
expect(column1Props.valueParser.callCount).to.equal(0);
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
expect(column1Props.valueParser.callCount).to.equal(1);
expect(renderEditCell1.lastCall.args[0].value).to.equal('usd gbp');
});
@@ -188,17 +192,23 @@ describe(' - Row Editing', () => {
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
expect(
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ ),
).to.equal(true);
});
it('should set isProcessingProps to true before calling preProcessEditCellProps', async () => {
- column1Props.preProcessEditCellProps = spy(
- ({ props }: GridPreProcessEditCellProps) => props,
- );
+ column1Props.preProcessEditCellProps = () => new Promise(() => {});
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
- apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(
+ () =>
+ new Promise((resolve) => {
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ resolve();
+ }),
+ );
expect(renderEditCell1.lastCall.args[0].isProcessingProps).to.equal(true);
});
@@ -211,7 +221,9 @@ describe(' - Row Editing', () => {
);
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
const args1 = column1Props.preProcessEditCellProps.lastCall.args[0];
expect(args1.id).to.equal(0);
@@ -242,7 +254,9 @@ describe(' - Row Editing', () => {
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
expect(renderEditCell1.lastCall.args[0].foo).to.equal(undefined);
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
expect(renderEditCell1.lastCall.args[0].foo).to.equal('bar');
});
@@ -254,26 +268,45 @@ describe(' - Row Editing', () => {
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
expect(renderEditCell1.lastCall.args[0].value).to.equal('USDGBP');
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
expect(renderEditCell1.lastCall.args[0].value).to.equal('USD GBP');
});
it('should set isProcessingProps to false after calling preProcessEditCellProps', async () => {
- column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => props;
- column2Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => props;
+ let resolve1: () => void;
+ let resolve2: () => void;
+ column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
+ new Promise((resolve) => {
+ resolve1 = () => resolve(props);
+ });
+ column2Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
+ new Promise((resolve) => {
+ resolve2 = () => resolve(props);
+ });
+
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
- const promise = apiRef.current.setEditCellValue({
- id: 0,
- field: 'currencyPair',
- value: 'USD GBP',
- }) as Promise;
+ let promise: Promise;
+ await act(
+ () =>
+ new Promise((resolve) => {
+ promise = apiRef.current.setEditCellValue({
+ id: 0,
+ field: 'currencyPair',
+ value: 'USD GBP',
+ }) as Promise;
+ resolve();
+ }),
+ );
expect(renderEditCell1.lastCall.args[0].isProcessingProps).to.equal(true);
expect(renderEditCell2.lastCall.args[0].isProcessingProps).to.equal(true);
- return promise.then(() => {
- expect(renderEditCell1.lastCall.args[0].isProcessingProps).to.equal(false);
- expect(renderEditCell2.lastCall.args[0].isProcessingProps).to.equal(false);
- });
+ resolve1!();
+ resolve2!();
+ await act(() => promise);
+ expect(renderEditCell1.lastCall.args[0].isProcessingProps).to.equal(false);
+ expect(renderEditCell2.lastCall.args[0].isProcessingProps).to.equal(false);
});
it('should return false if preProcessEditCellProps sets an error', async () => {
@@ -284,33 +317,47 @@ describe(' - Row Editing', () => {
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
expect(
- await apiRef.current.setEditCellValue({
- id: 0,
- field: 'currencyPair',
- value: 'USD GBP',
- }),
+ await act(() =>
+ apiRef.current.setEditCellValue({
+ id: 0,
+ field: 'currencyPair',
+ value: 'USD GBP',
+ }),
+ ),
).to.equal(false);
});
- it('should return false if the cell left the edit mode while calling preProcessEditCellProps', async () => {
+ it('should return false if the cell left the edit mode while calling preProcessEditCellProps', (done) => {
+ let resolveCallback: () => void;
column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
new Promise((resolve) => {
- // Simulates the user cancelling the editing while processing the props
- apiRef.current.stopRowEditMode({
- id: 0,
- ignoreModifications: true,
- });
- resolve(props);
+ resolveCallback = () => resolve(props);
});
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
- expect(
- await apiRef.current.setEditCellValue({
+
+ let promise: Promise;
+ act(() => {
+ promise = apiRef.current.setEditCellValue({
id: 0,
field: 'currencyPair',
value: 'USD GBP',
+ }) as Promise;
+ });
+
+ promise!.then((result) => {
+ expect(result).to.equal(false);
+ done();
+ });
+
+ act(() =>
+ apiRef.current.stopRowEditMode({
+ id: 0,
+ ignoreModifications: true,
}),
- ).to.equal(false);
+ );
+
+ resolveCallback!();
});
describe('with debounceMs > 0', () => {
@@ -321,18 +368,22 @@ describe(' - Row Editing', () => {
act(() => apiRef.current.startRowEditMode({ id: 0 }));
expect(renderEditCell1.lastCall.args[0].value).to.equal('USDGBP');
renderEditCell1.resetHistory();
- apiRef.current.setEditCellValue({
- id: 0,
- field: 'currencyPair',
- value: 'USD',
- debounceMs: 100,
+ act(() => {
+ apiRef.current.setEditCellValue({
+ id: 0,
+ field: 'currencyPair',
+ value: 'USD',
+ debounceMs: 100,
+ });
});
expect(renderEditCell1.callCount).to.equal(0);
- apiRef.current.setEditCellValue({
- id: 0,
- field: 'currencyPair',
- value: 'USD GBP',
- debounceMs: 100,
+ act(() => {
+ apiRef.current.setEditCellValue({
+ id: 0,
+ field: 'currencyPair',
+ value: 'USD GBP',
+ debounceMs: 100,
+ });
});
expect(renderEditCell1.callCount).to.equal(0);
clock.tick(100);
@@ -353,7 +404,9 @@ describe(' - Row Editing', () => {
it('should update the row with the new value stored', async () => {
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
act(() => apiRef.current.stopRowEditMode({ id: 0 }));
expect(getCell(0, 1).textContent).to.equal('USD GBP');
});
@@ -361,22 +414,40 @@ describe(' - Row Editing', () => {
it('should not update the row if ignoreModifications=true', async () => {
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
act(() => apiRef.current.stopRowEditMode({ id: 0, ignoreModifications: true }));
expect(getCell(0, 1).textContent).to.equal('USDGBP');
});
it('should do nothing if props are still being processed and ignoreModifications=false', async () => {
+ let resolveCallback: () => void;
column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
new Promise((resolve) => {
- // Simulates the user stopping the editing while processing the props
- act(() => apiRef.current.stopRowEditMode({ id: 0 }));
- resolve(props);
+ resolveCallback = () => resolve(props);
});
+
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+
+ let promise: Promise;
+ act(() => {
+ promise = apiRef.current.setEditCellValue({
+ id: 0,
+ field: 'currencyPair',
+ value: 'USD GBP',
+ }) as Promise;
+ });
+
+ // Simulates the user stopping the editing while processing the props
+ act(() => apiRef.current.stopRowEditMode({ id: 0 }));
+
expect(getCell(0, 1).className).to.contain('MuiDataGrid-cell--editing');
+
+ resolveCallback!();
+
+ await act(() => promise); // Run all updates scheduled for when preProcessEditCellProps resolves
});
it('should do nothing if props of any column contain error=true', async () => {
@@ -386,7 +457,9 @@ describe(' - Row Editing', () => {
});
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
act(() => apiRef.current.stopRowEditMode({ id: 0 }));
expect(getCell(0, 1).className).to.contain('MuiDataGrid-cell--editing');
});
@@ -399,11 +472,15 @@ describe(' - Row Editing', () => {
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: '' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: '' }),
+ );
act(() => apiRef.current.stopRowEditMode({ id: 0 }));
expect(getCell(0, 1).className).to.contain('MuiDataGrid-cell--editing');
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
act(() => apiRef.current.stopRowEditMode({ id: 0 }));
expect(getCell(0, 1).className).not.to.contain('MuiDataGrid-cell--editing');
});
@@ -412,7 +489,9 @@ describe(' - Row Editing', () => {
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
expect(getCell(0, 1).className).to.contain('MuiDataGrid-cell--editing');
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
act(() => apiRef.current.stopRowEditMode({ id: 0 }));
expect(getCell(0, 1).className).not.to.contain('MuiDataGrid-cell--editing');
});
@@ -421,9 +500,11 @@ describe(' - Row Editing', () => {
const processRowUpdate = spy((row) => ({ ...row, currencyPair: 'USD-GBP' }));
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
act(() => apiRef.current.stopRowEditMode({ id: 0 }));
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ await act(() => Promise.resolve());
expect(processRowUpdate.callCount).to.equal(1);
expect(getCell(0, 1).textContent).to.equal('USD-GBP');
});
@@ -432,8 +513,11 @@ describe(' - Row Editing', () => {
const processRowUpdate = spy((newRow, oldRow) => ({ ...oldRow, ...newRow }));
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
act(() => apiRef.current.stopRowEditMode({ id: 0 }));
+ await act(() => Promise.resolve());
expect(processRowUpdate.lastCall.args[0]).to.deep.equal({
...defaultData.rows[0],
currencyPair: 'USD GBP',
@@ -484,7 +568,7 @@ describe(' - Row Editing', () => {
);
act(() => apiRef.current.startRowEditMode({ id: 0 }));
act(() => apiRef.current.stopRowEditMode({ id: 0 }));
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ await Promise.resolve();
expect(onProcessRowUpdateError.lastCall.args[0]).to.equal(error);
});
@@ -494,8 +578,11 @@ describe(' - Row Editing', () => {
const processRowUpdate = spy((newRow) => newRow);
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
act(() => apiRef.current.stopRowEditMode({ id: 0 }));
+ await act(() => Promise.resolve());
expect(processRowUpdate.lastCall.args[0]).to.deep.equal({
...defaultData.rows[0],
currencyPair: 'USDGBP',
@@ -558,13 +645,16 @@ describe(' - Row Editing', () => {
const processRowUpdate = spy((newRow) => newRow);
render();
act(() => apiRef.current.startRowEditMode({ id: 0 }));
- apiRef.current.setEditCellValue({
- id: 0,
- field: 'currencyPair',
- value: 'USD GBP',
- debounceMs: 100,
+ await act(() => {
+ apiRef.current.setEditCellValue({
+ id: 0,
+ field: 'currencyPair',
+ value: 'USD GBP',
+ debounceMs: 100,
+ });
});
act(() => apiRef.current.stopRowEditMode({ id: 0 }));
+ await act(() => Promise.resolve());
expect(renderEditCell1.lastCall.args[0].value).to.equal('USD GBP');
expect(processRowUpdate.lastCall.args[0].currencyPair).to.equal('USD GBP');
});
@@ -815,13 +905,14 @@ describe(' - Row Editing', () => {
});
});
- it('should call stopRowEditMode with ignoreModifications=true if the props are being processed', () => {
- column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
- new Promise((resolve) => resolve(props));
+ it('should call stopRowEditMode with ignoreModifications=true if the props are being processed', async () => {
+ column1Props.preProcessEditCellProps = () => new Promise(() => {});
render();
const spiedStopRowEditMode = spy(apiRef.current, 'stopRowEditMode');
fireEvent.doubleClick(getCell(0, 1));
- apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ act(() => {
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ });
fireEvent.click(getCell(1, 1));
clock.runToLast();
expect(spiedStopRowEditMode.callCount).to.equal(1);
@@ -834,10 +925,12 @@ describe(' - Row Editing', () => {
render();
const spiedStopRowEditMode = spy(apiRef.current, 'stopRowEditMode');
fireEvent.doubleClick(getCell(0, 1));
- apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
fireEvent.click(getCell(1, 1));
clock.runToLast();
- await Promise.resolve();
+ await act(() => Promise.resolve());
expect(spiedStopRowEditMode.callCount).to.equal(1);
expect(spiedStopRowEditMode.lastCall.args[0].ignoreModifications).to.equal(false);
});
@@ -906,16 +999,17 @@ describe(' - Row Editing', () => {
});
});
- it('should call stopRowEditMode with ignoreModifications=true if the props are being processed', () => {
- column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
- new Promise((resolve) => resolve(props));
+ it('should call stopRowEditMode with ignoreModifications=true if the props are being processed', async () => {
+ column1Props.preProcessEditCellProps = () => new Promise(() => {});
render();
const spiedStopRowEditMode = spy(apiRef.current, 'stopRowEditMode');
const cell = getCell(0, 1);
fireEvent.mouseUp(cell);
fireEvent.click(cell);
fireEvent.doubleClick(cell);
- apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ act(() => {
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ });
fireEvent.keyDown(cell.querySelector('input'), { key: 'Enter' });
expect(spiedStopRowEditMode.callCount).to.equal(1);
expect(spiedStopRowEditMode.lastCall.args[0].ignoreModifications).to.equal(true);
@@ -983,16 +1077,17 @@ describe(' - Row Editing', () => {
});
});
- it('should call stopRowEditMode with ignoreModifications=true if the props are being processed', () => {
- column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
- new Promise((resolve) => resolve(props));
+ it('should call stopRowEditMode with ignoreModifications=true if the props are being processed', async () => {
+ column1Props.preProcessEditCellProps = () => new Promise(() => {});
render();
const spiedStopRowEditMode = spy(apiRef.current, 'stopRowEditMode');
const cell = getCell(0, 2);
fireEvent.mouseUp(cell);
fireEvent.click(cell);
fireEvent.doubleClick(cell);
- apiRef.current.setEditCellValue({ id: 0, field: 'price1M', value: 'USD GBP' });
+ await act(() => {
+ apiRef.current.setEditCellValue({ id: 0, field: 'price1M', value: 'USD GBP' });
+ });
fireEvent.keyDown(cell.querySelector('input'), { key: 'Tab' });
expect(spiedStopRowEditMode.callCount).to.equal(1);
expect(spiedStopRowEditMode.lastCall.args[0].ignoreModifications).to.equal(true);
@@ -1058,7 +1153,9 @@ describe(' - Row Editing', () => {
const { setProps } = render(
,
);
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
setProps({ rowModesModel: { 0: { mode: GridRowModes.View, ignoreModifications: true } } });
expect(getCell(0, 1).textContent).to.equal('USDGBP');
});
@@ -1067,7 +1164,9 @@ describe(' - Row Editing', () => {
const { setProps } = render(
,
);
- await apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' });
+ await act(() =>
+ apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
+ );
setProps({
rowModesModel: {
0: { mode: GridRowModes.View, cellToFocusAfter: 'below', field: 'currencyPair' },
@@ -1080,7 +1179,7 @@ describe(' - Row Editing', () => {
it(`should publish 'rowModesModelChange' when the model changes`, () => {
render();
const listener = spy();
- apiRef.current.subscribeEvent('rowModesModelChange', listener);
+ act(() => apiRef.current.subscribeEvent('rowModesModelChange', listener));
const cell = getCell(0, 1);
fireEvent.doubleClick(cell);
expect(listener.lastCall.args[0]).to.deep.equal({
@@ -1092,7 +1191,7 @@ describe(' - Row Editing', () => {
const { setProps } = render();
const listener = spy();
expect(listener.callCount).to.equal(0);
- apiRef.current.subscribeEvent('rowModesModelChange', listener);
+ act(() => apiRef.current.subscribeEvent('rowModesModelChange', listener));
setProps({ rowModesModel: { 0: { currencyPair: { mode: 'edit' } } } });
expect(listener.lastCall.args[0]).to.deep.equal({
0: { currencyPair: { mode: 'edit' } },
@@ -1102,7 +1201,7 @@ describe(' - Row Editing', () => {
it(`should not publish 'rowModesModelChange' when the model changes and rowModesModel is set`, () => {
render();
const listener = spy();
- apiRef.current.subscribeEvent('rowModesModelChange', listener);
+ act(() => apiRef.current.subscribeEvent('rowModesModelChange', listener));
const cell = getCell(0, 1);
fireEvent.doubleClick(cell);
expect(listener.callCount).to.equal(0);
diff --git a/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.old.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.old.test.tsx
index 1e80994d7cb4..68f8c8f71384 100644
--- a/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.old.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.old.test.tsx
@@ -7,7 +7,7 @@ import {
GridColDef,
} from '@mui/x-data-grid-pro';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer, fireEvent, waitFor } from '@mui/monorepo/test/utils';
+import { createRenderer, fireEvent, waitFor, act } from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import { getCell, getRow } from 'test/utils/helperFn';
import { spy } from 'sinon';
@@ -19,8 +19,6 @@ function fireClickEvent(cell: HTMLElement) {
fireEvent.click(cell);
}
-const nativeSetTimeout = setTimeout;
-
describe(' - Row Editing', () => {
let baselineProps: Pick<
DataGridProProps,
@@ -169,7 +167,7 @@ describe(' - Row Editing', () => {
expect(getCell(1, 0).querySelector('input')).toHaveFocus();
});
- it('should call the valueSetter on each column', () => {
+ it('should call the valueSetter on each column', async () => {
const valueSetter = spy(({ row }) => row);
render(
- Row Editing', () => {
fireEvent.change(input, { target: { value: 'Peter Smith' } });
clock.tick(500);
fireEvent.keyDown(input, { key: 'Enter' });
+ await act(() => Promise.resolve());
expect(valueSetter.callCount).to.equal(1);
expect(valueSetter.lastCall.args[0]).to.deep.equal({
row: { id: 0, firstName: 'John', lastName: 'Doe' },
@@ -282,11 +281,11 @@ describe(' - Row Editing', () => {
fireEvent.doubleClick(cell);
const input = cell.querySelector('input')!;
fireEvent.change(input, { target: { value: 'Adidas' } });
- clock.runToLast();
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ act(() => clock.runToLast());
+ await act(() => Promise.resolve());
expect(apiRef.current.getEditRowsModel()[0].brand.value).to.equal('Adidas');
fireEvent.keyDown(input, { key: 'Enter' });
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ await act(() => Promise.resolve());
expect(cell).not.to.have.class('MuiDataGrid-cell--editing');
expect(cell).to.have.text('Adidas');
});
@@ -323,9 +322,7 @@ describe(' - Row Editing', () => {
fireEvent.change(input, { target: { value: 'Adidas' } });
clock.tick(500);
fireEvent.keyDown(input, { key: 'Enter' });
-
- await new Promise((resolve) => nativeSetTimeout(resolve)); // Wait for promise
-
+ await act(() => Promise.resolve());
expect(brandPreProcessEditCellProps.callCount).to.equal(2);
expect(brandPreProcessEditCellProps.args[0][0].props).to.deep.equal({ value: 'Adidas' });
expect(brandPreProcessEditCellProps.args[1][0].props).to.deep.equal({ value: 'Nike' });
@@ -368,9 +365,7 @@ describe(' - Row Editing', () => {
fireEvent.change(input, { target: { value: 'Adidas' } });
clock.tick(500);
fireEvent.keyDown(input, { key: 'Enter' });
-
- await new Promise((resolve) => nativeSetTimeout(resolve)); // Wait for promise
-
+ await act(() => Promise.resolve());
expect(brandPreProcessEditCellProps.callCount).to.equal(1);
expect(brandPreProcessEditCellProps.lastCall.args[0].props).to.deep.equal({
value: 'Adidas',
@@ -410,9 +405,7 @@ describe(' - Row Editing', () => {
fireEvent.change(input, { target: { value: 'Adidas' } });
clock.tick(500);
fireEvent.keyDown(input, { key: 'Enter' });
-
- await new Promise((resolve) => nativeSetTimeout(resolve)); // Wait for promise
-
+ await act(() => Promise.resolve());
expect(preProcessEditCellProps.callCount).to.equal(1);
expect(preProcessEditCellProps.lastCall.args[0].props).to.deep.equal({
value: 'ADIDAS',
@@ -443,12 +436,11 @@ describe(' - Row Editing', () => {
const input = cell.querySelector('input')!;
fireEvent.change(input, { target: { value: 'Adidas' } });
fireEvent.keyDown(input, { key: 'Enter' });
- await new Promise((resolve) => nativeSetTimeout(resolve)); // Wait for promise
clock.runToLast();
expect(getRow(1)).not.to.have.class('MuiDataGrid-row--editing');
});
- it(`should ignore keydown event until the IME is confirmed`, () => {
+ it(`should ignore keydown event until the IME is confirmed`, async () => {
const valueSetter = spy(({ row }) => row);
render(
- Row Editing', () => {
fireEvent.keyDown(input, { key: 'Enter', keyCode: 229 });
expect(valueSetter.callCount).to.equal(0);
fireEvent.keyDown(input, { key: 'Enter', keyCode: 13 });
+ await act(() => Promise.resolve());
expect(valueSetter.callCount).to.equal(1);
expect(input!.value).to.equal('あ');
});
diff --git a/packages/grid/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx
index f9cb64b725e7..404c456a2fea 100644
--- a/packages/grid/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx
@@ -9,7 +9,7 @@ import {
} from '@mui/x-data-grid-pro';
import { expect } from 'chai';
// @ts-expect-error Remove once the test utils are typed
-import { createRenderer, waitFor, fireEvent, screen } from '@mui/monorepo/test/utils';
+import { createRenderer, waitFor, fireEvent, screen, act } from '@mui/monorepo/test/utils';
import { getData } from 'storybook/src/data/data-service';
import {
getActiveCell,
@@ -223,8 +223,8 @@ describe(' - Row pinning', () => {
let rows = data.rows.filter((row) => row.id !== 11 && row.id !== 3);
// should work when calling `setPinnedRows` before `setRows`
- apiRef.current.unstable_setPinnedRows(pinnedRows);
- apiRef.current.setRows(rows);
+ act(() => apiRef.current.unstable_setPinnedRows(pinnedRows));
+ act(() => apiRef.current.setRows(rows));
await waitFor(() => {
expect(isRowPinned(getRowById(0), 'top')).to.equal(false, '#0 pinned top');
@@ -238,8 +238,8 @@ describe(' - Row pinning', () => {
rows = data.rows.filter((row) => row.id !== 8 && row.id !== 5);
// should work when calling `setPinnedRows` after `setRows`
- apiRef.current.setRows(rows);
- apiRef.current.unstable_setPinnedRows(pinnedRows);
+ act(() => apiRef.current.setRows(rows));
+ act(() => apiRef.current.unstable_setPinnedRows(pinnedRows));
await waitFor(() => {
expect(isRowPinned(getRowById(11), 'top')).to.equal(false, '#11 pinned top');
diff --git a/packages/grid/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx
index 7bfc1c598258..d7a8b572de50 100644
--- a/packages/grid/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer, fireEvent } from '@mui/monorepo/test/utils';
+import { createRenderer, fireEvent, act } from '@mui/monorepo/test/utils';
import { spy } from 'sinon';
import { expect } from 'chai';
import {
@@ -79,13 +79,13 @@ describe(' - Rows', () => {
);
};
render();
- apiRef!.current.setCellMode('c2', 'first', 'edit');
+ act(() => apiRef!.current.setCellMode('c2', 'first', 'edit'));
const cell = getCell(1, 1);
expect(cell).to.have.class('MuiDataGrid-cell--editable');
expect(cell).to.have.class('MuiDataGrid-cell--editing');
expect(cell.querySelector('input')!.value).to.equal('Jack');
- apiRef!.current.setCellMode('c2', 'first', 'view');
+ act(() => apiRef!.current.setCellMode('c2', 'first', 'view'));
expect(cell).to.have.class('MuiDataGrid-cell--editable');
expect(cell).not.to.have.class('MuiDataGrid-cell--editing');
@@ -168,14 +168,14 @@ describe(' - Rows', () => {
it('should not throttle by default', () => {
render();
expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']);
- apiRef.current.updateRows([{ id: 1, brand: 'Fila' }]);
+ act(() => apiRef.current.updateRows([{ id: 1, brand: 'Fila' }]));
expect(getColumnValues(0)).to.deep.equal(['Nike', 'Fila', 'Puma']);
});
it('should allow to enable throttle', () => {
render();
expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']);
- apiRef.current.updateRows([{ id: 1, brand: 'Fila' }]);
+ act(() => apiRef.current.updateRows([{ id: 1, brand: 'Fila' }]));
clock.tick(50);
expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']);
clock.tick(50);
@@ -184,49 +184,53 @@ describe(' - Rows', () => {
it('should allow to update row data', () => {
render();
- apiRef.current.updateRows([{ id: 1, brand: 'Fila' }]);
- apiRef.current.updateRows([{ id: 0, brand: 'Pata' }]);
- apiRef.current.updateRows([{ id: 2, brand: 'Pum' }]);
+ act(() => apiRef.current.updateRows([{ id: 1, brand: 'Fila' }]));
+ act(() => apiRef.current.updateRows([{ id: 0, brand: 'Pata' }]));
+ act(() => apiRef.current.updateRows([{ id: 2, brand: 'Pum' }]));
expect(getColumnValues(0)).to.deep.equal(['Pata', 'Fila', 'Pum']);
});
it('update row data can also add rows', () => {
render();
- apiRef.current.updateRows([{ id: 1, brand: 'Fila' }]);
- apiRef.current.updateRows([{ id: 0, brand: 'Pata' }]);
- apiRef.current.updateRows([{ id: 2, brand: 'Pum' }]);
- apiRef.current.updateRows([{ id: 3, brand: 'Jordan' }]);
+ act(() => apiRef.current.updateRows([{ id: 1, brand: 'Fila' }]));
+ act(() => apiRef.current.updateRows([{ id: 0, brand: 'Pata' }]));
+ act(() => apiRef.current.updateRows([{ id: 2, brand: 'Pum' }]));
+ act(() => apiRef.current.updateRows([{ id: 3, brand: 'Jordan' }]));
expect(getColumnValues(0)).to.deep.equal(['Pata', 'Fila', 'Pum', 'Jordan']);
});
it('update row data can also add rows in bulk', () => {
render();
- apiRef.current.updateRows([
- { id: 1, brand: 'Fila' },
- { id: 0, brand: 'Pata' },
- { id: 2, brand: 'Pum' },
- { id: 3, brand: 'Jordan' },
- ]);
+ act(() =>
+ apiRef.current.updateRows([
+ { id: 1, brand: 'Fila' },
+ { id: 0, brand: 'Pata' },
+ { id: 2, brand: 'Pum' },
+ { id: 3, brand: 'Jordan' },
+ ]),
+ );
expect(getColumnValues(0)).to.deep.equal(['Pata', 'Fila', 'Pum', 'Jordan']);
});
it('update row data can also delete rows', () => {
render();
- apiRef.current.updateRows([{ id: 1, _action: 'delete' }]);
- apiRef.current.updateRows([{ id: 0, brand: 'Apple' }]);
- apiRef.current.updateRows([{ id: 2, _action: 'delete' }]);
- apiRef.current.updateRows([{ id: 5, brand: 'Atari' }]);
+ act(() => apiRef.current.updateRows([{ id: 1, _action: 'delete' }]));
+ act(() => apiRef.current.updateRows([{ id: 0, brand: 'Apple' }]));
+ act(() => apiRef.current.updateRows([{ id: 2, _action: 'delete' }]));
+ act(() => apiRef.current.updateRows([{ id: 5, brand: 'Atari' }]));
expect(getColumnValues(0)).to.deep.equal(['Apple', 'Atari']);
});
it('update row data can also delete rows in bulk', () => {
render();
- apiRef.current.updateRows([
- { id: 1, _action: 'delete' },
- { id: 0, brand: 'Apple' },
- { id: 2, _action: 'delete' },
- { id: 5, brand: 'Atari' },
- ]);
+ act(() =>
+ apiRef.current.updateRows([
+ { id: 1, _action: 'delete' },
+ { id: 0, brand: 'Apple' },
+ { id: 2, _action: 'delete' },
+ { id: 5, brand: 'Atari' },
+ ]),
+ );
expect(getColumnValues(0)).to.deep.equal(['Apple', 'Atari']);
});
@@ -248,12 +252,14 @@ describe(' - Rows', () => {
render();
expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']);
- apiRef.current.updateRows([
- { idField: 1, _action: 'delete' },
- { idField: 0, brand: 'Apple' },
- { idField: 2, _action: 'delete' },
- { idField: 5, brand: 'Atari' },
- ]);
+ act(() =>
+ apiRef.current.updateRows([
+ { idField: 1, _action: 'delete' },
+ { idField: 0, brand: 'Apple' },
+ { idField: 2, _action: 'delete' },
+ { idField: 5, brand: 'Atari' },
+ ]),
+ );
expect(getColumnValues(0)).to.deep.equal(['Apple', 'Atari']);
});
@@ -271,7 +277,7 @@ describe(' - Rows', () => {
expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']);
setProps({ loading: true });
- apiRef.current.updateRows([{ id: 0, brand: 'Nike 2' }]);
+ act(() => apiRef.current.updateRows([{ id: 0, brand: 'Nike 2' }]));
setProps({ loading: false });
expect(getColumnValues(0)).to.deep.equal(['Nike 2', 'Adidas', 'Puma']);
});
@@ -319,7 +325,7 @@ describe(' - Rows', () => {
brand: 'Asics',
},
];
- apiRef.current.setRows(newRows);
+ act(() => apiRef.current.setRows(newRows));
expect(getColumnValues(0)).to.deep.equal(['Asics']);
});
@@ -333,7 +339,7 @@ describe(' - Rows', () => {
brand: 'Asics',
},
];
- apiRef.current.setRows(newRows);
+ act(() => apiRef.current.setRows(newRows));
clock.tick(50);
expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']);
@@ -390,7 +396,7 @@ describe(' - Rows', () => {
'.MuiDataGrid-virtualScrollerRenderZone',
)!;
virtualScroller.scrollTop = 10e6; // scroll to the bottom
- virtualScroller.dispatchEvent(new Event('scroll'));
+ act(() => virtualScroller.dispatchEvent(new Event('scroll')));
const lastCell = document.querySelector('[role="row"]:last-child [role="cell"]:first-child')!;
expect(lastCell).to.have.text('995');
@@ -424,7 +430,7 @@ describe(' - Rows', () => {
expect(firstRow.children).to.have.length(Math.floor(width / columnWidth) + columnBuffer);
const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!;
virtualScroller.scrollLeft = 301;
- virtualScroller.dispatchEvent(new Event('scroll'));
+ act(() => virtualScroller.dispatchEvent(new Event('scroll')));
expect(firstRow.children).to.have.length(
columnBuffer + Math.floor(width / columnWidth) + columnBuffer,
);
@@ -441,7 +447,7 @@ describe(' - Rows', () => {
let firstRow = renderingZone.firstChild;
expect(firstRow).to.have.attr('data-rowindex', '0');
virtualScroller.scrollTop = rowThreshold * rowHeight;
- virtualScroller.dispatchEvent(new Event('scroll'));
+ act(() => virtualScroller.dispatchEvent(new Event('scroll')));
firstRow = renderingZone.firstChild;
expect(firstRow).to.have.attr('data-rowindex', '3');
});
@@ -458,7 +464,7 @@ describe(' - Rows', () => {
let firstColumn = firstRow.firstChild!;
expect(firstColumn).to.have.attr('data-colindex', '0');
virtualScroller.scrollLeft = columnThreshold * columnWidth;
- virtualScroller.dispatchEvent(new Event('scroll'));
+ act(() => virtualScroller.dispatchEvent(new Event('scroll')));
firstRow = renderingZone.querySelector('[role="row"]:first-child')!;
firstColumn = firstRow.firstChild!;
expect(firstColumn).to.have.attr('data-colindex', '3');
@@ -478,7 +484,7 @@ describe(' - Rows', () => {
);
const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!;
virtualScroller.scrollTop = 10e6; // scroll to the bottom
- virtualScroller.dispatchEvent(new Event('scroll'));
+ act(() => virtualScroller.dispatchEvent(new Event('scroll')));
const lastCell = document.querySelector(
'[role="row"]:last-child [role="cell"]:first-child',
@@ -549,7 +555,7 @@ describe(' - Rows', () => {
/>,
);
const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!;
- apiRef.current.scrollToIndexes({ rowIndex: 4, colIndex: 0 });
+ act(() => apiRef.current.scrollToIndexes({ rowIndex: 4, colIndex: 0 }));
expect(virtualScroller.scrollTop).to.equal(rowHeight - offset);
});
@@ -570,11 +576,11 @@ describe(' - Rows', () => {
const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!;
virtualScroller.scrollTop = offset;
virtualScroller.dispatchEvent(new Event('scroll')); // Simulate browser behavior
- apiRef.current.scrollToIndexes({ rowIndex: 2, colIndex: 0 });
+ act(() => apiRef.current.scrollToIndexes({ rowIndex: 2, colIndex: 0 }));
expect(virtualScroller.scrollTop).to.equal(offset);
- apiRef.current.scrollToIndexes({ rowIndex: 1, colIndex: 0 });
+ act(() => apiRef.current.scrollToIndexes({ rowIndex: 1, colIndex: 0 }));
expect(virtualScroller.scrollTop).to.equal(offset);
- apiRef.current.scrollToIndexes({ rowIndex: 0, colIndex: 0 });
+ act(() => apiRef.current.scrollToIndexes({ rowIndex: 0, colIndex: 0 }));
expect(virtualScroller.scrollTop).to.equal(0);
});
@@ -592,7 +598,7 @@ describe(' - Rows', () => {
render();
const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!;
expect(virtualScroller.scrollLeft).to.equal(0);
- apiRef.current.scrollToIndexes({ rowIndex: 0, colIndex: 2 });
+ act(() => apiRef.current.scrollToIndexes({ rowIndex: 0, colIndex: 2 }));
expect(virtualScroller.scrollLeft).to.equal(columnWidth * 3 - width);
});
@@ -610,10 +616,10 @@ describe(' - Rows', () => {
render();
const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!;
expect(virtualScroller.scrollLeft).to.equal(0);
- apiRef.current.scrollToIndexes({ rowIndex: 0, colIndex: 2 });
+ act(() => apiRef.current.scrollToIndexes({ rowIndex: 0, colIndex: 2 }));
virtualScroller.dispatchEvent(new Event('scroll')); // Simulate browser behavior
expect(virtualScroller.scrollLeft).to.equal(columnWidth * 3 - width);
- apiRef.current.scrollToIndexes({ rowIndex: 0, colIndex: 1 });
+ act(() => apiRef.current.scrollToIndexes({ rowIndex: 0, colIndex: 1 }));
expect(virtualScroller.scrollLeft).to.equal(columnWidth * 3 - width);
});
});
@@ -647,7 +653,7 @@ describe(' - Rows', () => {
it('should render the correct rows when changing pages', () => {
render();
expect(document.querySelectorAll('[role="row"][data-rowindex]')).to.have.length(6);
- apiRef.current.setPage(1);
+ act(() => apiRef.current.setPage(1));
expect(document.querySelectorAll('[role="row"][data-rowindex]')).to.have.length(4);
});
});
@@ -797,7 +803,7 @@ describe(' - Rows', () => {
render();
const cell = getCell(0, 0);
fireEvent.mouseEnter(cell);
- apiRef.current.updateRows([{ id: 1, _action: 'delete' }]);
+ act(() => apiRef.current.updateRows([{ id: 1, _action: 'delete' }]));
fireEvent.mouseLeave(cell);
}).not.to.throw();
});
@@ -850,7 +856,7 @@ describe(' - Rows', () => {
expect(getRow(1).clientHeight).to.equal(ROW_HEIGHT);
- apiRef.current.unstable_setRowHeight(resizedRowId, 100);
+ act(() => apiRef.current.unstable_setRowHeight(resizedRowId, 100));
expect(getRow(resizedRowId).clientHeight).to.equal(100);
});
@@ -863,7 +869,7 @@ describe(' - Rows', () => {
expect(row.clientHeight).to.equal(ROW_HEIGHT);
getRowHeight.resetHistory();
- apiRef.current.unstable_setRowHeight(resizedRowId, 100);
+ act(() => apiRef.current.unstable_setRowHeight(resizedRowId, 100));
expect(row.clientHeight).to.equal(100);
// sort
diff --git a/packages/grid/x-data-grid-pro/src/tests/selection.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/selection.DataGridPro.test.tsx
index c2688a60ebaa..1f442abfa88f 100644
--- a/packages/grid/x-data-grid-pro/src/tests/selection.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/selection.DataGridPro.test.tsx
@@ -3,7 +3,7 @@ import { expect } from 'chai';
import { spy } from 'sinon';
import { getCell, getColumnValues, getRows } from 'test/utils/helperFn';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer, fireEvent, screen } from '@mui/monorepo/test/utils';
+import { createRenderer, fireEvent, screen, act } from '@mui/monorepo/test/utils';
import {
GridApi,
useGridApiRef,
@@ -211,7 +211,7 @@ describe(' - Selection', () => {
/>,
);
expect(apiRef.current.getSelectedRows()).to.have.length(0);
- apiRef.current.selectRow(1);
+ act(() => apiRef.current.selectRow(1));
expect(apiRef.current.getSelectedRows().get(1)).to.deep.equal({
id: 1,
currencyPair: 'USDEUR',
@@ -241,15 +241,15 @@ describe(' - Selection', () => {
it('should call onSelectionModelChange with the ids selected', () => {
const handleSelectionModelChange = spy();
render();
- apiRef.current.selectRow(1);
+ act(() => apiRef.current.selectRow(1));
expect(handleSelectionModelChange.lastCall.args[0]).to.deep.equal([1]);
// Reset old selection
- apiRef.current.selectRow(2, true, true);
+ act(() => apiRef.current.selectRow(2, true, true));
expect(handleSelectionModelChange.lastCall.args[0]).to.deep.equal([2]);
// Keep old selection
- apiRef.current.selectRow(3);
+ act(() => apiRef.current.selectRow(3));
expect(handleSelectionModelChange.lastCall.args[0]).to.deep.equal([2, 3]);
- apiRef.current.selectRow(3, false);
+ act(() => apiRef.current.selectRow(3, false));
expect(handleSelectionModelChange.lastCall.args[0]).to.deep.equal([2]);
});
@@ -261,9 +261,9 @@ describe(' - Selection', () => {
onSelectionModelChange={handleSelectionModelChange}
/>,
);
- apiRef.current.selectRow(0);
+ act(() => apiRef.current.selectRow(0));
expect(handleSelectionModelChange.callCount).to.equal(0);
- apiRef.current.selectRow(1);
+ act(() => apiRef.current.selectRow(1));
expect(handleSelectionModelChange.callCount).to.equal(1);
});
});
@@ -273,17 +273,17 @@ describe(' - Selection', () => {
const handleSelectionModelChange = spy();
render();
- apiRef.current.selectRows([1, 2]);
+ act(() => apiRef.current.selectRows([1, 2]));
expect(handleSelectionModelChange.lastCall.args[0]).to.deep.equal([1, 2]);
- apiRef.current.selectRows([3]);
+ act(() => apiRef.current.selectRows([3]));
expect(handleSelectionModelChange.lastCall.args[0]).to.deep.equal([1, 2, 3]);
- apiRef.current.selectRows([1, 2], false);
+ act(() => apiRef.current.selectRows([1, 2], false));
expect(handleSelectionModelChange.lastCall.args[0]).to.deep.equal([3]);
// Deselect others
- apiRef.current.selectRows([4, 5], true, true);
+ act(() => apiRef.current.selectRows([4, 5], true, true));
expect(handleSelectionModelChange.lastCall.args[0]).to.deep.equal([4, 5]);
});
@@ -295,14 +295,14 @@ describe(' - Selection', () => {
onSelectionModelChange={handleSelectionModelChange}
/>,
);
- apiRef.current.selectRows([0, 1, 2]);
+ act(() => apiRef.current.selectRows([0, 1, 2]));
expect(handleSelectionModelChange.lastCall.args[0]).to.deep.equal([1, 2]);
});
it('should not select a range of several elements when disableMultipleSelection = true', () => {
render();
- apiRef.current.selectRows([0, 1, 2], true);
+ act(() => apiRef.current.selectRows([0, 1, 2], true));
expect(getSelectedRowIds()).to.deep.equal([]);
});
});
@@ -311,54 +311,60 @@ describe(' - Selection', () => {
it('should select all the rows in the range', () => {
render();
- apiRef.current.selectRowRange({ startId: 1, endId: 3 }, true);
+ act(() => apiRef.current.selectRowRange({ startId: 1, endId: 3 }, true));
expect(getSelectedRowIds()).to.deep.equal([1, 2, 3]);
});
it('should unselect all the rows in the range', () => {
render();
- apiRef.current.setSelectionModel([2, 3]);
+ act(() => apiRef.current.setSelectionModel([2, 3]));
expect(getSelectedRowIds()).to.deep.equal([2, 3]);
- apiRef.current.selectRowRange({ startId: 0, endId: 3 }, false);
+ act(() => apiRef.current.selectRowRange({ startId: 0, endId: 3 }, false));
expect(getSelectedRowIds()).to.deep.equal([]);
});
it('should not unselect the selected elements if the range is to be selected', () => {
render();
- apiRef.current.setSelectionModel([2]);
- apiRef.current.selectRowRange({ startId: 1, endId: 3 }, true);
+ act(() => {
+ apiRef.current.setSelectionModel([2]);
+ apiRef.current.selectRowRange({ startId: 1, endId: 3 }, true);
+ });
expect(getSelectedRowIds()).to.deep.equal([1, 2, 3]);
});
it('should not reset the other selections when resetSelection = false', () => {
render();
- apiRef.current.setSelectionModel([0]);
- apiRef.current.selectRowRange({ startId: 2, endId: 3 }, true, false);
+ act(() => {
+ apiRef.current.setSelectionModel([0]);
+ apiRef.current.selectRowRange({ startId: 2, endId: 3 }, true, false);
+ });
expect(getSelectedRowIds()).to.deep.equal([0, 2, 3]);
});
it('should reset the other selections when resetSelection = true', () => {
render();
- apiRef.current.setSelectionModel([0]);
- apiRef.current.selectRowRange({ startId: 2, endId: 3 }, true, true);
+ act(() => {
+ apiRef.current.setSelectionModel([0]);
+ apiRef.current.selectRowRange({ startId: 2, endId: 3 }, true, true);
+ });
expect(getSelectedRowIds()).to.deep.equal([2, 3]);
});
it('should not select unselectable rows inside the range', () => {
render( Number(params.id) % 2 === 1} />);
- apiRef.current.selectRowRange({ startId: 1, endId: 3 }, true);
+ act(() => apiRef.current.selectRowRange({ startId: 1, endId: 3 }, true));
expect(getSelectedRowIds()).to.deep.equal([1, 3]);
});
it('should not select a range of several elements when disableMultipleSelection = true', () => {
render();
- apiRef.current.selectRowRange({ startId: 1, endId: 3 }, true);
+ act(() => apiRef.current.selectRowRange({ startId: 1, endId: 3 }, true));
expect(getSelectedRowIds()).to.deep.equal([]);
});
@@ -368,7 +374,7 @@ describe(' - Selection', () => {
filterModel={{ items: [{ columnField: 'id', value: 1, operatorValue: '!=' }] }}
/>,
);
- apiRef.current.selectRowRange({ startId: 0, endId: 2 }, true);
+ act(() => apiRef.current.selectRowRange({ startId: 0, endId: 2 }, true));
expect(getSelectedRowIds()).to.deep.equal([0, 2]);
});
});
@@ -378,15 +384,17 @@ describe(' - Selection', () => {
const selectAll = screen.getByRole('checkbox', {
name: /select all rows/i,
});
- apiRef.current.setFilterModel({
- items: [
- {
- columnField: 'currencyPair',
- value: 'usd',
- operatorValue: 'startsWith',
- },
- ],
- });
+ act(() =>
+ apiRef.current.setFilterModel({
+ items: [
+ {
+ columnField: 'currencyPair',
+ value: 'usd',
+ operatorValue: 'startsWith',
+ },
+ ],
+ }),
+ );
expect(getColumnValues(1)).to.deep.equal(['0', '1']);
fireEvent.click(selectAll);
expect(getSelectedRowIds()).to.deep.equal([0, 1]);
diff --git a/packages/grid/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx
index 501a6268d2ac..06efe9145a60 100644
--- a/packages/grid/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx
@@ -8,7 +8,7 @@ import {
GridColumns,
} from '@mui/x-data-grid-pro';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer, fireEvent } from '@mui/monorepo/test/utils';
+import { createRenderer, fireEvent, act } from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import { spy } from 'sinon';
import { getColumnValues, getCell, getColumnHeaderCell } from 'test/utils/helperFn';
@@ -38,7 +38,7 @@ describe(' - Sorting', () => {
columns: [{ field: 'brand' }, { field: 'year', type: 'number' }],
};
- const { render } = createRenderer();
+ const { render } = createRenderer({ clock: 'fake' });
let apiRef: React.MutableRefObject;
@@ -84,21 +84,21 @@ describe(' - Sorting', () => {
brand: 'Hugo',
},
];
- apiRef.current.setRows(newRows);
+ act(() => apiRef.current.setRows(newRows));
expect(getColumnValues(0)).to.deep.equal(['Asics', 'Hugo', 'RedBull']);
});
it('should apply the sortModel prop correctly on GridApiRef update row data', () => {
renderBrandSortedAsc();
- apiRef.current.updateRows([{ id: 1, brand: 'Fila' }]);
- apiRef.current.updateRows([{ id: 0, brand: 'Patagonia' }]);
+ act(() => apiRef.current.updateRows([{ id: 1, brand: 'Fila' }]));
+ act(() => apiRef.current.updateRows([{ id: 0, brand: 'Patagonia' }]));
expect(getColumnValues(0)).to.deep.equal(['Fila', 'Patagonia', 'Puma']);
});
it('should allow apiRef to setSortModel', () => {
render();
- apiRef.current.setSortModel([{ field: 'brand', sort: 'desc' }]);
+ act(() => apiRef.current.setSortModel([{ field: 'brand', sort: 'desc' }]));
expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']);
});
@@ -119,7 +119,7 @@ describe(' - Sorting', () => {
{ field: 'brand', sort: 'asc' },
];
- apiRef.current.setSortModel(sortModel);
+ act(() => apiRef.current.setSortModel(sortModel));
expect(getColumnValues(0)).to.deep.equal(['Puma', 'Adidas', 'Nike']);
});
@@ -127,7 +127,7 @@ describe(' - Sorting', () => {
['shiftKey', 'metaKey', 'ctrlKey'].forEach((key) => {
it(`should do a multi-sorting when clicking the header cell while ${key} is pressed`, () => {
render();
- apiRef.current.setSortModel([{ field: 'year', sort: 'desc' }]);
+ act(() => apiRef.current.setSortModel([{ field: 'year', sort: 'desc' }]));
expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']);
fireEvent.click(getColumnHeaderCell(0), { [key]: true });
expect(getColumnValues(0)).to.deep.equal(['Puma', 'Adidas', 'Nike']);
@@ -137,9 +137,9 @@ describe(' - Sorting', () => {
['metaKey', 'ctrlKey'].forEach((key) => {
it(`should do nothing when pressing Enter while ${key} is pressed`, () => {
render();
- apiRef.current.setSortModel([{ field: 'year', sort: 'desc' }]);
+ act(() => apiRef.current.setSortModel([{ field: 'year', sort: 'desc' }]));
expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']);
- getColumnHeaderCell(1).focus();
+ act(() => getColumnHeaderCell(1).focus());
fireEvent.keyDown(getColumnHeaderCell(1), { key: 'Enter', [key]: true });
expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']);
});
@@ -147,16 +147,16 @@ describe(' - Sorting', () => {
it('should do a multi-sorting pressing Enter while shiftKey is pressed', () => {
render();
- apiRef.current.setSortModel([{ field: 'year', sort: 'desc' }]);
+ act(() => apiRef.current.setSortModel([{ field: 'year', sort: 'desc' }]));
expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']);
- getColumnHeaderCell(0).focus();
+ act(() => getColumnHeaderCell(0).focus());
fireEvent.keyDown(getColumnHeaderCell(0), { key: 'Enter', shiftKey: true });
expect(getColumnValues(0)).to.deep.equal(['Puma', 'Adidas', 'Nike']);
});
it(`should not do a multi-sorting if no multiple key is pressed`, () => {
render();
- apiRef.current.setSortModel([{ field: 'year', sort: 'desc' }]);
+ act(() => apiRef.current.setSortModel([{ field: 'year', sort: 'desc' }]));
expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']);
fireEvent.click(getColumnHeaderCell(0));
expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']);
@@ -164,7 +164,7 @@ describe(' - Sorting', () => {
it('should not do a multi-sorting if disableMultipleColumnsSorting is true', () => {
render();
- apiRef.current.setSortModel([{ field: 'year', sort: 'desc' }]);
+ act(() => apiRef.current.setSortModel([{ field: 'year', sort: 'desc' }]));
expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']);
fireEvent.click(getColumnHeaderCell(0), { shiftKey: true });
expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']);
diff --git a/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx
index 0e5cc193a243..e0829dbfaaea 100644
--- a/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx
@@ -11,7 +11,7 @@ import {
useGridApiRef,
} from '@mui/x-data-grid-pro';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer, screen } from '@mui/monorepo/test/utils';
+import { createRenderer, screen, act } from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import {
getColumnHeaderCell,
@@ -206,17 +206,19 @@ describe(' - State Persistence', () => {
it('should export the current version of the exportable state', () => {
render();
- apiRef.current.setPageSize(2);
- apiRef.current.setPage(1);
- apiRef.current.setPinnedColumns({ left: ['id'] });
- apiRef.current.showPreferences(GridPreferencePanelsValue.filters);
- apiRef.current.setSortModel([{ field: 'id', sort: 'desc' }]);
- apiRef.current.setFilterModel({
- items: [{ columnField: 'id', operatorValue: '<', value: '5' }],
+ act(() => {
+ apiRef.current.setPageSize(2);
+ apiRef.current.setPage(1);
+ apiRef.current.setPinnedColumns({ left: ['id'] });
+ apiRef.current.showPreferences(GridPreferencePanelsValue.filters);
+ apiRef.current.setSortModel([{ field: 'id', sort: 'desc' }]);
+ apiRef.current.setFilterModel({
+ items: [{ columnField: 'id', operatorValue: '<', value: '5' }],
+ });
+ apiRef.current.setColumnIndex('category', 1);
+ apiRef.current.setColumnWidth('category', 75);
+ apiRef.current.setColumnVisibilityModel({ idBis: false });
});
- apiRef.current.setColumnIndex('category', 1);
- apiRef.current.setColumnWidth('category', 75);
- apiRef.current.setColumnVisibilityModel({ idBis: false });
expect(apiRef.current.exportState()).to.deep.equal(FULL_INITIAL_STATE);
});
});
@@ -225,7 +227,7 @@ describe(' - State Persistence', () => {
it('should restore the whole exportable state', () => {
render();
- apiRef.current.restoreState(FULL_INITIAL_STATE);
+ act(() => apiRef.current.restoreState(FULL_INITIAL_STATE));
// Pinning, pagination, sorting and filtering
expect(getColumnValues(0)).to.deep.equal(['2', '1']);
@@ -243,12 +245,14 @@ describe(' - State Persistence', () => {
it('should restore partial exportable state', () => {
render();
- apiRef.current.restoreState({
- pagination: {
- page: 1,
- pageSize: 2,
- },
- });
+ act(() =>
+ apiRef.current.restoreState({
+ pagination: {
+ page: 1,
+ pageSize: 2,
+ },
+ }),
+ );
expect(getColumnValues(0)).to.deep.equal(['2', '3']);
});
@@ -268,12 +272,14 @@ describe(' - State Persistence', () => {
};
render();
- apiRef.current.restoreState({
- pagination: {
- page: 1,
- pageSize: 2,
- },
- });
+ act(() =>
+ apiRef.current.restoreState({
+ pagination: {
+ page: 1,
+ pageSize: 2,
+ },
+ }),
+ );
clock.runToLast();
expect(getColumnValues(0)).to.deep.equal(['2', '3']);
});
@@ -305,13 +311,15 @@ describe(' - State Persistence', () => {
render();
- apiRef.current.restoreState({
- columns: {
- columnVisibilityModel: {
- category: false,
+ act(() =>
+ apiRef.current.restoreState({
+ columns: {
+ columnVisibilityModel: {
+ category: false,
+ },
},
- },
- });
+ }),
+ );
expect(getColumnHeadersTextContent()).to.deep.equal(['category']);
});
diff --git a/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx
index aab2a3f38b78..a301a4359aa1 100644
--- a/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx
@@ -118,7 +118,7 @@ describe(' - Tree Data', () => {
'B.B.A.A',
'C',
]);
- apiRef.current.updateRows([{ name: 'A.A', _action: 'delete' }]);
+ act(() => apiRef.current.updateRows([{ name: 'A.A', _action: 'delete' }]));
expect(getColumnValues(0)).to.deep.equal([
'A',
'A.B',
@@ -171,7 +171,7 @@ describe(' - Tree Data', () => {
,
);
expect(getColumnValues(1)).to.deep.equal(['A']);
- apiRef.current.setRowChildrenExpansion('A', true);
+ act(() => apiRef.current.setRowChildrenExpansion('A', true));
clock.runToLast();
expect(getColumnValues(1)).to.deep.equal(['A', 'A.A']);
setProps({
@@ -276,9 +276,7 @@ describe(' - Tree Data', () => {
it('should not re-apply default expansion on rerender after expansion manually toggled', () => {
const { setProps } = render();
expect(getColumnValues(1)).to.deep.equal(['A', 'B', 'C']);
- act(() => {
- apiRef.current.setRowChildrenExpansion('B', true);
- });
+ act(() => apiRef.current.setRowChildrenExpansion('B', true));
expect(getColumnValues(1)).to.deep.equal(['A', 'B', 'B.A', 'B.B', 'C']);
setProps({ sortModel: [{ field: 'name', sort: 'desc' }] });
expect(getColumnValues(1)).to.deep.equal(['C', 'B', 'B.B', 'B.A', 'A']);
@@ -399,14 +397,18 @@ describe(' - Tree Data', () => {
it('should keep the grouping column width between generations', () => {
render();
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '200px' });
- apiRef.current.updateColumns([{ field: GRID_TREE_DATA_GROUPING_FIELD, width: 100 }]);
+ act(() =>
+ apiRef.current.updateColumns([{ field: GRID_TREE_DATA_GROUPING_FIELD, width: 100 }]),
+ );
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '100px' });
- apiRef.current.updateColumns([
- {
- field: 'name',
- headerName: 'New name',
- },
- ]);
+ act(() =>
+ apiRef.current.updateColumns([
+ {
+ field: 'name',
+ headerName: 'New name',
+ },
+ ]),
+ );
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '100px' });
});
});
diff --git a/packages/grid/x-data-grid/src/hooks/utils/useGridApiEventHandler.test.tsx b/packages/grid/x-data-grid/src/hooks/utils/useGridApiEventHandler.test.tsx
index ec9a5db9e36a..6a4ddc1d6789 100644
--- a/packages/grid/x-data-grid/src/hooks/utils/useGridApiEventHandler.test.tsx
+++ b/packages/grid/x-data-grid/src/hooks/utils/useGridApiEventHandler.test.tsx
@@ -48,14 +48,14 @@ describe('useGridApiEventHandler', () => {
// which makes 2 event listeners to be registered. Since the second render is never
// committed (to simulate a trashed render in React 18), the effects also don't run, so we're
// unable to unsubscribe the last listener using the cleanup function.
- expect(apiRef.current.subscribeEvent.callCount).to.equal(2);
+ expect(apiRef.current.subscribeEvent.callCount).to.equal(3);
unmount();
global.gc(); // Triggers garbage collector
await sleep(50);
// Ensure that both event listeners were unsubscribed
- expect(unsubscribe.callCount).to.equal(2);
+ expect(unsubscribe.callCount).to.equal(3);
});
});
@@ -80,13 +80,13 @@ describe('useGridApiEventHandler', () => {
// which makes 2 event listeners to be registered. Since the second render is never
// committed (to simulate a trashed render in React 18), the effects also don't run, so we're
// unable to unsubscribe the last listener using the cleanup function.
- expect(apiRef.current.subscribeEvent.callCount).to.equal(2);
+ expect(apiRef.current.subscribeEvent.callCount).to.equal(3);
unmount();
await sleep(60);
// Ensure that both event listeners were unsubscribed
- expect(unsubscribe.callCount).to.equal(2);
+ expect(unsubscribe.callCount).to.equal(3);
});
});
});
diff --git a/packages/grid/x-data-grid/src/tests/components.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/components.DataGrid.test.tsx
index b39369fd9652..a53915210b23 100644
--- a/packages/grid/x-data-grid/src/tests/components.DataGrid.test.tsx
+++ b/packages/grid/x-data-grid/src/tests/components.DataGrid.test.tsx
@@ -1,6 +1,11 @@
import * as React from 'react';
-// @ts-ignore Remove once the test utils are typed
-import { createRenderer, ErrorBoundary, fireEvent, screen } from '@mui/monorepo/test/utils';
+import {
+ createRenderer,
+ ErrorBoundary,
+ fireEvent,
+ screen,
+ // @ts-ignore Remove once the test utils are typed
+} from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import { spy } from 'sinon';
import { DataGrid, GridOverlay } from '@mui/x-data-grid';
@@ -149,6 +154,7 @@ describe(' - Components', () => {
,
);
}).toErrorDev([
+ 'MUI: useGridRootProps should only be used inside the DataGrid, DataGridPro or DataGridPremium component.',
'MUI: useGridRootProps should only be used inside the DataGrid, DataGridPro or DataGridPremium component.',
'The above error occurred in the component',
]);
diff --git a/packages/grid/x-data-grid-pro/src/tests/export.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/export.DataGrid.test.tsx
similarity index 99%
rename from packages/grid/x-data-grid-pro/src/tests/export.DataGrid.test.tsx
rename to packages/grid/x-data-grid/src/tests/export.DataGrid.test.tsx
index 1dd14d50ba0d..e76e9bdc9f88 100644
--- a/packages/grid/x-data-grid-pro/src/tests/export.DataGrid.test.tsx
+++ b/packages/grid/x-data-grid/src/tests/export.DataGrid.test.tsx
@@ -6,7 +6,7 @@ import { useData } from 'storybook/src/hooks/useData';
import { expect } from 'chai';
import { spy, SinonSpy } from 'sinon';
-describe(' - Export', () => {
+describe(' - Export', () => {
const { render, clock } = createRenderer({ clock: 'fake' });
const TestCase = (props: Omit) => {
diff --git a/packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx
index 367bde145303..96e92d88031a 100644
--- a/packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx
+++ b/packages/grid/x-data-grid/src/tests/filterPanel.DataGrid.test.tsx
@@ -9,7 +9,7 @@ import {
GridPreferencePanelsValue,
} from '@mui/x-data-grid';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer, fireEvent, screen, waitFor } from '@mui/monorepo/test/utils';
+import { createRenderer, fireEvent, screen } from '@mui/monorepo/test/utils';
import { getColumnHeaderCell, getColumnValues } from 'test/utils/helperFn';
function setColumnValue(columnValue: string) {
@@ -49,7 +49,7 @@ function CustomInputValue(props: GridFilterInputValueProps) {
const isJSDOM = /jsdom/.test(window.navigator.userAgent);
describe(' - Filter panel', () => {
- const { render } = createRenderer();
+ const { render, clock } = createRenderer({ clock: 'fake' });
const baselineProps: DataGridProps = {
autoHeight: isJSDOM,
@@ -471,9 +471,8 @@ describe(' - Filter panel', () => {
expect(onFilterModelChange.lastCall.args[0].items[0].value).to.equal(undefined);
deleteFilterForm();
- await waitFor(() => {
- expect(screen.queryAllByRole('tooltip').length).to.deep.equal(0);
- });
+ clock.tick(100);
+ expect(screen.queryAllByRole('tooltip').length).to.deep.equal(0);
});
// See https://github.com/mui/mui-x/issues/5402
diff --git a/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx
index c82db972638c..e70746770df5 100644
--- a/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx
+++ b/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer, fireEvent, screen } from '@mui/monorepo/test/utils';
+import { createRenderer, fireEvent, screen, act } from '@mui/monorepo/test/utils';
import Portal from '@mui/material/Portal';
import { spy } from 'sinon';
import { expect } from 'chai';
@@ -336,7 +336,7 @@ describe(' - Keyboard', () => {
it('should move to the first row when pressing "ArrowDown" on a column header on the 1st page', () => {
render();
- getColumnHeaderCell(1).focus();
+ act(() => getColumnHeaderCell(1).focus());
expect(getActiveColumnHeader()).to.equal('1');
fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' });
expect(getActiveCell()).to.equal('0-1');
@@ -344,7 +344,7 @@ describe(' - Keyboard', () => {
it('should move to the first row when pressing "ArrowDown" on a column header on the 2nd page', () => {
render();
- getColumnHeaderCell(1).focus();
+ act(() => getColumnHeaderCell(1).focus());
expect(getActiveColumnHeader()).to.equal('1');
fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' });
expect(getActiveCell()).to.equal('10-1');
@@ -352,7 +352,7 @@ describe(' - Keyboard', () => {
it('should move to the column header right when pressing "ArrowRight" on a column header', () => {
render();
- getColumnHeaderCell(1).focus();
+ act(() => getColumnHeaderCell(1).focus());
expect(getActiveColumnHeader()).to.equal('1');
fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' });
expect(getActiveColumnHeader()).to.equal('2');
@@ -362,7 +362,7 @@ describe(' - Keyboard', () => {
it('should move to the column header left when pressing "ArrowLeft" on a column header', () => {
render();
- getColumnHeaderCell(1).focus();
+ act(() => getColumnHeaderCell(1).focus());
expect(getActiveColumnHeader()).to.equal('1');
fireEvent.keyDown(document.activeElement!, { key: 'ArrowLeft' });
expect(getActiveColumnHeader()).to.equal('0');
@@ -514,7 +514,7 @@ describe(' - Keyboard', () => {
,
);
- getColumnHeaderCell(0).focus();
+ act(() => getColumnHeaderCell(0).focus());
expect(getActiveColumnHeader()).to.equal('0');
expect(getColumnValues(1)).to.deep.equal(['John', 'Doe']);
fireEvent.keyDown(getColumnHeaderCell(0), { key: 'Enter' });
diff --git a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx
index 55f6579e4aad..c67b29329943 100644
--- a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx
+++ b/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx
@@ -17,7 +17,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
import { getColumnHeaderCell, getColumnValues, getCell, getRow } from 'test/utils/helperFn';
describe(' - Layout & Warnings', () => {
- const { clock, render } = createRenderer({ clock: 'real' });
+ const { clock, render } = createRenderer();
const baselineProps = {
rows: [
@@ -987,6 +987,7 @@ describe(' - Layout & Warnings', () => {
,
);
}).toErrorDev([
+ 'The data grid component requires all rows to have a unique `id` property',
'The data grid component requires all rows to have a unique `id` property',
'The above error occurred in the component',
]);
diff --git a/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx
index 4d17cefcf6f4..0cb03f0101cc 100644
--- a/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx
+++ b/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx
@@ -1,6 +1,11 @@
import * as React from 'react';
-// @ts-ignore Remove once the test utils are typed
-import { createRenderer, fireEvent, screen, waitFor } from '@mui/monorepo/test/utils';
+import {
+ createRenderer,
+ fireEvent,
+ screen,
+ waitFor,
+ // @ts-ignore Remove once the test utils are typed
+} from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import {
DataGrid,
@@ -361,6 +366,7 @@ describe(' - Pagination', () => {
render();
}).toWarnDev([
`MUI: The page size \`${pageSize}\` is not preset in the \`rowsPerPageOptions\``,
+ `MUI: The page size \`${pageSize}\` is not preset in the \`rowsPerPageOptions\``,
]);
});
@@ -371,13 +377,17 @@ describe(' - Pagination', () => {
render();
}).toWarnDev([
`MUI: The page size \`${pageSize}\` is not preset in the \`rowsPerPageOptions\``,
+ `MUI: The page size \`${pageSize}\` is not preset in the \`rowsPerPageOptions\``,
]);
});
it('should display a warning if the default pageSize given as props is not in the prop rowsPerPageOptions', () => {
expect(() => {
render();
- }).toWarnDev([`MUI: The page size \`100\` is not preset in the \`rowsPerPageOptions\``]);
+ }).toWarnDev([
+ `MUI: The page size \`100\` is not preset in the \`rowsPerPageOptions\``,
+ `MUI: The page size \`100\` is not preset in the \`rowsPerPageOptions\``,
+ ]);
});
it('should update the pageCount state when updating the pageSize prop with a lower value', () => {
diff --git a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx
index f8eeb5acf46f..6b48bdd8246d 100644
--- a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx
+++ b/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx
@@ -1,6 +1,11 @@
import * as React from 'react';
-// @ts-ignore Remove once the test utils are typed
-import { createRenderer, fireEvent, screen } from '@mui/monorepo/test/utils';
+import {
+ createRenderer,
+ fireEvent,
+ screen,
+ act,
+ // @ts-ignore Remove once the test utils are typed
+} from '@mui/monorepo/test/utils';
import clsx from 'clsx';
import { expect } from 'chai';
import { spy, stub } from 'sinon';
@@ -183,6 +188,7 @@ describe(' - Rows', () => {
expect(() => {
render();
}).toErrorDev([
+ 'MUI: Missing the `getActions` property in the `GridColDef`.',
'MUI: Missing the `getActions` property in the `GridColDef`.',
'The above error occurred in the component',
'MUI: GridErrorHandler - An unexpected error occurred.',
@@ -561,7 +567,7 @@ describe(' - Rows', () => {
'.MuiDataGrid-virtualScrollerContent',
);
const expectedHeight = baselineProps.rows.length * (contentHeight + border);
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ await act(() => Promise.resolve());
clock.runToLast();
expect(virtualScrollerContent).toHaveInlineStyle({
width: 'auto',
@@ -590,7 +596,7 @@ describe(' - Rows', () => {
measuredRowHeight +
border + // Measured rows also include the border
(baselineProps.rows.length - 1) * defaultRowHeight;
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ await act(() => Promise.resolve());
clock.runToLast();
expect(virtualScrollerContent).toHaveInlineStyle({
width: 'auto',
@@ -619,7 +625,7 @@ describe(' - Rows', () => {
const firstRowHeight = measuredRowHeight + border; // Measured rows also include the border
const expectedHeight =
firstRowHeight + (baselineProps.rows.length - 1) * estimatedRowHeight;
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ await act(() => Promise.resolve());
clock.runToLast();
expect(virtualScrollerContent).toHaveInlineStyle({
width: 'auto',
@@ -639,14 +645,14 @@ describe(' - Rows', () => {
const virtualScrollerContent = document.querySelector(
'.MuiDataGrid-virtualScrollerContent',
);
- await new Promise((resolve) => nativeSetTimeout(resolve)); // Wait for ResizeObserver to send dimensions
+ await act(() => Promise.resolve()); // Wait for ResizeObserver to send dimensions
clock.runToLast();
expect(virtualScrollerContent).toHaveInlineStyle({
width: 'auto',
height: '101px',
});
setProps({ rows: [{ clientId: 'c1', expanded: true }] });
- await new Promise((resolve) => nativeSetTimeout(resolve)); // Wait for ResizeObserver to send dimensions
+ await act(() => Promise.resolve()); // Wait for ResizeObserver to send dimensions
clock.runToLast();
expect(virtualScrollerContent).toHaveInlineStyle({
width: 'auto',
@@ -695,17 +701,17 @@ describe(' - Rows', () => {
/>,
);
const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!;
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ await act(() => Promise.resolve());
clock.runToLast();
expect(virtualScroller.scrollHeight).to.equal(101 + 52 + 52);
virtualScroller.scrollTop = 101; // Scroll to measure the 2nd cell
virtualScroller.dispatchEvent(new Event('scroll'));
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ await act(() => Promise.resolve());
clock.runToLast();
expect(virtualScroller.scrollHeight).to.equal(101 + 101 + 52);
virtualScroller.scrollTop = 10e6; // Scroll to measure all cells
virtualScroller.dispatchEvent(new Event('scroll'));
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ await act(() => Promise.resolve());
clock.runToLast();
expect(virtualScroller.scrollHeight).to.equal(101 + 101 + 101); // Ensure that all rows before the last were measured
});
@@ -731,7 +737,7 @@ describe(' - Rows', () => {
const virtualScrollerContent = document.querySelector(
'.MuiDataGrid-virtualScrollerContent',
)!;
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ await act(() => Promise.resolve());
clock.runToLast();
expect(virtualScrollerContent).toHaveInlineStyle({
width: 'auto',
@@ -758,13 +764,13 @@ describe(' - Rows', () => {
const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!;
virtualScroller.scrollTop = 10e6; // Scroll to measure all cells
virtualScroller.dispatchEvent(new Event('scroll'));
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ await act(() => Promise.resolve());
clock.runToLast();
const virtualScrollerRenderZone = document.querySelector(
'.MuiDataGrid-virtualScrollerRenderZone',
)!;
fireEvent.click(screen.getByRole('button', { name: /next page/i }));
- await new Promise((resolve) => nativeSetTimeout(resolve));
+ await act(() => Promise.resolve());
clock.runToLast();
expect(virtualScrollerRenderZone).toHaveInlineStyle({
transform: 'translate3d(0px, 0px, 0px)',
diff --git a/packages/grid/x-data-grid/src/tests/selection.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/selection.DataGrid.test.tsx
index 1163cb8fff21..1cbd3ffb9e18 100644
--- a/packages/grid/x-data-grid/src/tests/selection.DataGrid.test.tsx
+++ b/packages/grid/x-data-grid/src/tests/selection.DataGrid.test.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
// @ts-expect-error Remove once the test utils are typed
-import { createRenderer, fireEvent, screen } from '@mui/monorepo/test/utils';
+import { createRenderer, fireEvent, screen, act } from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import { DataGrid, DataGridProps, GridInputSelectionModel, GridRowId } from '@mui/x-data-grid';
import {
@@ -456,7 +456,7 @@ describe(' - Selection', () => {
const selectAllCell = document.querySelector(
'[role="columnheader"][data-field="__check__"] input',
)!;
- selectAllCell.focus();
+ act(() => selectAllCell.focus());
fireEvent.keyDown(selectAllCell, {
key: ' ',
diff --git a/packages/grid/x-data-grid/src/tests/toolbar.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/toolbar.DataGrid.test.tsx
index 911f2f512edb..ebae45838daf 100644
--- a/packages/grid/x-data-grid/src/tests/toolbar.DataGrid.test.tsx
+++ b/packages/grid/x-data-grid/src/tests/toolbar.DataGrid.test.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
// @ts-ignore Remove once the test utils are typed
-import { createRenderer, fireEvent, screen } from '@mui/monorepo/test/utils';
+import { createRenderer, fireEvent, screen, act } from '@mui/monorepo/test/utils';
import { getColumnHeadersTextContent } from 'test/utils/helperFn';
import { expect } from 'chai';
import { DataGrid, DataGridProps, GridToolbar, gridClasses } from '@mui/x-data-grid';
@@ -12,7 +12,7 @@ import {
const isJSDOM = /jsdom/.test(window.navigator.userAgent);
describe(' - Toolbar', () => {
- const { render } = createRenderer();
+ const { render, clock } = createRenderer({ clock: 'fake' });
const baselineProps = {
autoHeight: isJSDOM,
@@ -56,6 +56,7 @@ describe(' - Toolbar', () => {
);
fireEvent.click(getByText('Density'));
+ clock.tick(100);
fireEvent.click(getByText('Compact'));
expect(screen.getAllByRole('row')[1]).toHaveInlineStyle({
@@ -259,11 +260,11 @@ describe(' - Toolbar', () => {
);
const button = screen.getByRole('button', { name: 'Select columns' });
- button.focus();
+ act(() => button.focus());
fireEvent.click(button);
const column: HTMLElement | null = document.querySelector('[role="tooltip"] [name="id"]');
- column!.focus();
+ act(() => column!.focus());
fireEvent.click(column);
expect(column).toHaveFocus();
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index cef7432a225e..c9f2cd8e25ce 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -25,8 +25,8 @@
"@mui/x-license-pro": "5.15.0",
"@storybook/builder-webpack5": "^6.5.9",
"@storybook/manager-webpack5": "^6.5.9",
- "react": "^17.0.2",
- "react-is": "^17.0.2",
+ "react": "^18.2.0",
+ "react-is": "^18.2.0",
"rxjs": "^7.5.6",
"webpack": "^5.73.0"
},
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 e446a2e937ab..18985b67acb2 100644
--- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx
+++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import { describeConformance, screen, fireEvent, userEvent } from '@mui/monorepo/test/utils';
+import { describeConformance, screen, fireEvent, userEvent, act } from '@mui/monorepo/test/utils';
import TextField from '@mui/material/TextField';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker';
@@ -424,7 +424,7 @@ describe('', () => {
render();
const startInput = screen.getAllByRole('textbox')[0];
- startInput.focus();
+ act(() => startInput.focus());
fireEvent.keyDown(startInput, { key });
expect(onOpen.callCount).to.equal(1);
@@ -439,7 +439,7 @@ describe('', () => {
render();
const endInput = screen.getAllByRole('textbox')[1];
- endInput.focus();
+ act(() => endInput.focus());
fireEvent.keyDown(endInput, { key });
expect(onOpen.callCount).to.equal(1);
diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.test.tsx
index 86bbb9b1cb8e..54dff8560526 100644
--- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.test.tsx
+++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.test.tsx
@@ -24,7 +24,7 @@ const WrappedMobileDateRangePicker = withPickerControls(MobileDateRangePicker)({
});
describe('', () => {
- const { render } = createPickerRenderer();
+ const { render } = createPickerRenderer({ clock: 'fake' });
describeConformance(