[test] Replace waitFor() with act() (#14851)

mui · Oct 9, 2024 · 756d975 · 756d975
1 parent 3d7acb1
commit 756d975
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 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
@@ -273,7 +273,7 @@ describe('<DataGridPro /> - 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('<DataGridPro /> - 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('<DataGridPro /> - Edit components', () => {
       fireEvent.doubleClick(cell);
 
       expect(cell.textContent!.replace(/[\W]+/, '')).to.equal('Nike'); // We use .replace to remove &ZeroWidthSpace;
-      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('<DataGridPro /> - Edit components', () => {
       const input = within(cell).getByRole<HTMLInputElement>('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
@@ -36,7 +36,6 @@ describe('<DataGridPro /> - Pagination', () => {
       act(() => {
         apiRef.current.setPage(1);
       });
-
       expect(getColumnValues(0)).to.deep.equal(['1']);
     });
 
@@ -65,7 +64,6 @@ describe('<DataGridPro /> - 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
@@ -729,7 +729,7 @@ describe('<DataGridPro /> - Row editing', () => {
           const processRowUpdate = spy((newRow) => newRow);
           render(<TestCase processRowUpdate={processRowUpdate} />);
           act(() => apiRef.current.startRowEditMode({ id: 0 }));
-          await act(() => {
+          await act(async () => {
             apiRef.current.setEditCellValue({
               id: 0,
               field: 'currencyPair',
@@ -1199,7 +1199,7 @@ describe('<DataGridPro /> - 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
@@ -872,16 +872,14 @@ describe('<DataGridPro /> - 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
@@ -719,7 +719,9 @@ describe('<DataGridPro /> - 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
@@ -228,7 +228,7 @@ describe('<DataGrid /> - 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(<TestDataGridSelection checkboxSelection />);
       expect(getActiveCell()).to.equal(null);
 
@@ -237,9 +237,7 @@ describe('<DataGrid /> - 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('<DataGrid /> - 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('<DataGrid /> - 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(
         <TestDataGridSelection isRowSelectable={() => 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
@@ -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('<DataGrid /> - 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
@@ -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('<DataGrid /> - 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('<DataGrid /> - 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('<DataGrid /> - 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', '', '']);