From 756d97560c804bd64f63a01f100d47ba944befed Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 9 Oct 2024 02:38:29 +0200 Subject: [PATCH] [test] Replace waitFor() with act() (#14851) --- .../src/tests/editComponents.DataGridPro.test.tsx | 10 ++++++---- .../src/tests/pagination.DataGridPro.test.tsx | 2 -- .../src/tests/rowEditing.DataGridPro.test.tsx | 4 ++-- .../src/tests/rowPinning.DataGridPro.test.tsx | 6 ++---- .../src/tests/rows.DataGridPro.test.tsx | 4 +++- .../src/tests/rowSelection.DataGrid.test.tsx | 12 ++++-------- .../src/tests/rowSpanning.DataGrid.test.tsx | 10 +++++----- .../src/tests/sorting.DataGrid.test.tsx | 14 ++++---------- 8 files changed, 26 insertions(+), 36 deletions(-) diff --git a/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx index 9ae74b6bd1c0..cf60cc02141c 100644 --- a/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx @@ -273,7 +273,7 @@ describe(' - Edit components', () => { const input = cell.querySelector('input')!; expect(input.value).to.equal('2022-02-18'); await act(async () => { - await apiRef.current.setEditCellValue({ + apiRef.current.setEditCellValue({ id: 0, field: 'createdAt', value: new Date(2022, 1, 10), @@ -394,7 +394,7 @@ describe(' - Edit components', () => { const input = cell.querySelector('input')!; expect(input.value).to.equal('2022-02-18T14:30'); await act(async () => { - await apiRef.current.setEditCellValue({ + apiRef.current.setEditCellValue({ id: 0, field: 'createdAt', value: new Date(2022, 1, 10, 15, 10, 0), @@ -542,7 +542,9 @@ describe(' - Edit components', () => { fireEvent.doubleClick(cell); expect(cell.textContent!.replace(/[\W]+/, '')).to.equal('Nike'); // We use .replace to remove ​ - await act(() => apiRef.current.setEditCellValue({ id: 0, field: 'brand', value: 'Adidas' })); + await act(async () => { + apiRef.current.setEditCellValue({ id: 0, field: 'brand', value: 'Adidas' }); + }); expect(cell.textContent!.replace(/[\W]+/, '')).to.equal('Adidas'); }); @@ -642,7 +644,7 @@ describe(' - Edit components', () => { const input = within(cell).getByRole('checkbox'); await user.click(input); - await waitFor(() => expect(onValueChange.callCount).to.equal(1)); + expect(onValueChange.callCount).to.equal(1); expect(onValueChange.lastCall.args[1]).to.equal(true); }); }); diff --git a/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx index 5561eb1afc5e..1b4b0ee4f104 100644 --- a/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx @@ -36,7 +36,6 @@ describe(' - Pagination', () => { act(() => { apiRef.current.setPage(1); }); - expect(getColumnValues(0)).to.deep.equal(['1']); }); @@ -65,7 +64,6 @@ describe(' - Pagination', () => { act(() => { apiRef.current.setPage(50); }); - expect(getColumnValues(0)).to.deep.equal(['19']); }); }); diff --git a/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx index d469b0bb87a2..fa95887bf430 100644 --- a/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx @@ -729,7 +729,7 @@ describe(' - Row editing', () => { const processRowUpdate = spy((newRow) => newRow); render(); act(() => apiRef.current.startRowEditMode({ id: 0 })); - await act(() => { + await act(async () => { apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', @@ -1199,7 +1199,7 @@ describe(' - Row editing', () => { const cell = getCell(0, 2); fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); - await act(() => { + await act(async () => { apiRef.current.setEditCellValue({ id: 0, field: 'price1M', value: 'USD GBP' }); }); fireEvent.keyDown(cell.querySelector('input')!, { key: 'Tab' }); diff --git a/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx index c4ca6ea072b6..15f787bfdc45 100644 --- a/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx @@ -872,16 +872,14 @@ describe(' - Row pinning', () => { expect(getCell(0, 1).textContent).to.equal('Joe'); expect(getCell(4, 1).textContent).to.equal('Cory'); - act(() => + await act(async () => apiRef.current.updateRows([ { id: 3, name: 'Marcus' }, { id: 4, name: 'Tom' }, ]), ); - await waitFor(() => { - expect(getCell(0, 1).textContent).to.equal('Marcus'); - }); + expect(getCell(0, 1).textContent).to.equal('Marcus'); expect(getCell(4, 1).textContent).to.equal('Tom'); }); }); diff --git a/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx index 3fa3aec057dd..3acb545b4ed5 100644 --- a/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx @@ -719,7 +719,9 @@ describe(' - Rows', () => { />, ); expect(document.querySelectorAll('[role="row"][data-rowindex]')).to.have.length(6); - act(() => apiRef.current.setPage(1)); + act(() => { + apiRef.current.setPage(1); + }); expect(document.querySelectorAll('[role="row"][data-rowindex]')).to.have.length(4); }); }); diff --git a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx index 67f6e8350ca2..78d613915b14 100644 --- a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx @@ -228,7 +228,7 @@ describe(' - Row selection', () => { expect(getRow(0).querySelector('input')).to.have.property('checked', false); }); - it('should set focus on the cell when clicking the checkbox', async () => { + it('should set focus on the cell when clicking the checkbox', () => { render(); expect(getActiveCell()).to.equal(null); @@ -237,9 +237,7 @@ describe(' - Row selection', () => { fireUserEvent.mousePress(checkboxInput!); - await waitFor(() => { - expect(getActiveCell()).to.equal('0-0'); - }); + expect(getActiveCell()).to.equal('0-0'); }); it('should select all visible rows regardless of pagination', () => { @@ -384,9 +382,7 @@ describe(' - Row selection', () => { ); const selectAllCheckbox = screen.getByRole('checkbox', { name: 'Select all rows' }); fireEvent.click(selectAllCheckbox); - await act(() => { - expect(getSelectedRowIds()).to.deep.equal([0, 1, 2, 3]); - }); + expect(getSelectedRowIds()).to.deep.equal([0, 1, 2, 3]); expect(grid('selectedRowCount')?.textContent).to.equal('4 rows selected'); fireEvent.change(screen.getByRole('spinbutton', { name: 'Value' }), { @@ -607,7 +603,7 @@ describe(' - Row selection', () => { }); describe('prop: isRowSelectable', () => { - it('should update the selected rows when the isRowSelectable prop changes', async () => { + it('should update the selected rows when the isRowSelectable prop changes', () => { const { setProps } = render( true} checkboxSelection />, ); diff --git a/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx index c2f1e8ec9179..c3875d9b3889 100644 --- a/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, waitFor, fireEvent, act } from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, act } from '@mui/internal-test-utils'; import { expect } from 'chai'; import { DataGrid, useGridApiRef, DataGridProps, GridApi } from '@mui/x-data-grid'; import { getCell, getActiveCell } from 'test/utils/helperFn'; @@ -224,10 +224,10 @@ describe(' - Row spanning', () => { />, ); expect(Object.keys(apiRef.current.state.rowSpanning.spannedCells).length).to.equal(0); - apiRef.current.setPage(1); - await waitFor(() => - expect(Object.keys(apiRef.current.state.rowSpanning.spannedCells).length).to.equal(1), - ); + await act(async () => { + apiRef.current.setPage(1); + }); + expect(Object.keys(apiRef.current.state.rowSpanning.spannedCells).length).to.equal(1); expect(Object.keys(apiRef.current.state.rowSpanning.hiddenCells).length).to.equal(1); }); }); diff --git a/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx b/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx index 59bd49145729..c57d2ec690c4 100644 --- a/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, fireEvent, screen, act, waitFor } from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, screen, act } from '@mui/internal-test-utils'; import { expect } from 'chai'; import { DataGrid, @@ -712,9 +712,7 @@ describe(' - Sorting', () => { expect(getColumnValues(1)).to.deep.equal(['Adidas', 'Nike', 'Puma']); setProps({ columns: [{ field: 'id' }] }); - await waitFor(() => { - expect(getColumnValues(0)).to.deep.equal(['0', '1', '2']); - }); + expect(getColumnValues(0)).to.deep.equal(['0', '1', '2']); expect(onSortModelChange.callCount).to.equal(1); expect(onSortModelChange.lastCall.firstArg).to.deep.equal([]); }); @@ -747,9 +745,7 @@ describe(' - Sorting', () => { expect(getColumnValues(1)).to.deep.equal(['Adidas', 'Nike', 'Puma']); setProps({ columns: [{ field: 'id' }], sortModel: [{ field: 'id', sort: 'desc' }] }); - await waitFor(() => { - expect(getColumnValues(0)).to.deep.equal(['2', '1', '0']); - }); + expect(getColumnValues(0)).to.deep.equal(['2', '1', '0']); expect(onSortModelChange.callCount).to.equal(0); }); @@ -790,9 +786,7 @@ describe(' - Sorting', () => { const header = getColumnHeaderCell(0); fireEvent.click(header); - await waitFor(() => { - expect(getColumnValues(0)).to.deep.equal(['a', 'b', '', '']); - }); + expect(getColumnValues(0)).to.deep.equal(['a', 'b', '', '']); fireEvent.click(header); expect(getColumnValues(0)).to.deep.equal(['b', 'a', '', '']);