From 64e41d08accf995204e5ab2c67f7020f7b82cbf5 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 6 Oct 2024 19:37:02 +0200 Subject: [PATCH 1/6] [test] Replace waitFor with act --- .../src/tests/pagination.DataGridPro.test.tsx | 2 -- .../src/tests/rows.DataGridPro.test.tsx | 4 +++- .../src/tests/rowSpanning.DataGrid.test.tsx | 10 +++++----- 3 files changed, 8 insertions(+), 8 deletions(-) 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/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/rowSpanning.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx index c2f1e8ec9179..29d754a07069 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(() => { + 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); }); }); From b575fa0402d431f8fae1fb75de6d6fb9a5c84011 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 6 Oct 2024 20:31:54 +0200 Subject: [PATCH 2/6] a few more --- .../src/tests/editComponents.DataGridPro.test.tsx | 10 ++++------ .../src/tests/rowPinning.DataGridPro.test.tsx | 6 ++---- 2 files changed, 6 insertions(+), 10 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..978edf89f49f 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 @@ -135,10 +135,9 @@ describe(' - Edit components', () => { const input = within(cell).getByRole('textbox'); fireEvent.change(input, { target: { value: 'Puma' } }); - await act(() => Promise.resolve()); - expect(onValueChange.callCount).to.equal(1); expect(onValueChange.lastCall.args[1]).to.equal('Puma'); + await act(() => Promise.resolve()); }); }); @@ -338,12 +337,12 @@ describe(' - Edit components', () => { const input = cell.querySelector('input')!; fireEvent.change(input, { target: { value: '2022-02-10' } }); - await act(() => Promise.resolve()); expect(onValueChange.callCount).to.equal(1); expect((onValueChange.lastCall.args[1]! as Date).toISOString()).to.equal( new Date(2022, 1, 10).toISOString(), ); + await act(() => Promise.resolve()); }); }); @@ -576,9 +575,8 @@ describe(' - Edit components', () => { const cell = getCell(0, 0); fireEvent.doubleClick(cell); fireUserEvent.mousePress(document.getElementById('outside-grid')!); - await act(() => Promise.resolve()); - expect(onCellEditStop.callCount).to.equal(1); + await act(() => Promise.resolve()); }); it('should not open the suggestions when Enter is pressed', async () => { @@ -642,7 +640,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/rowPinning.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx index c4ca6ea072b6..b84f10904d4c 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(() => 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'); }); }); From d0b16878edffe1b237432d7fdef6e7fc4df01f38 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 6 Oct 2024 20:38:42 +0200 Subject: [PATCH 3/6] more --- .../src/tests/rowSelection.DataGrid.test.tsx | 12 ++++-------- .../src/tests/sorting.DataGrid.test.tsx | 14 ++++---------- 2 files changed, 8 insertions(+), 18 deletions(-) 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/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', '', '']); From 9ac8dba67854798202997ea230cd3064eaddf5ce Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 6 Oct 2024 21:28:52 +0200 Subject: [PATCH 4/6] [test] Add missing async --- .../x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx | 4 ++-- packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) 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/src/tests/rowSpanning.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx index 29d754a07069..c3875d9b3889 100644 --- a/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx @@ -224,7 +224,7 @@ describe(' - Row spanning', () => { />, ); expect(Object.keys(apiRef.current.state.rowSpanning.spannedCells).length).to.equal(0); - await act(() => { + await act(async () => { apiRef.current.setPage(1); }); expect(Object.keys(apiRef.current.state.rowSpanning.spannedCells).length).to.equal(1); From b1f68d05d38c2f1a8cc5e115f02f61332b4c5005 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 7 Oct 2024 16:06:56 +0200 Subject: [PATCH 5/6] more cleanup --- .../tests/editComponents.DataGridPro.test.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 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 978edf89f49f..090685b3f68d 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 @@ -122,7 +122,7 @@ describe(' - Edit components', () => { }); }); - it('should call onValueChange if defined', async () => { + it('should call onValueChange if defined', () => { const onValueChange = spy(); defaultData.columns[0].renderEditCell = (params) => @@ -137,7 +137,6 @@ describe(' - Edit components', () => { fireEvent.change(input, { target: { value: 'Puma' } }); expect(onValueChange.callCount).to.equal(1); expect(onValueChange.lastCall.args[1]).to.equal('Puma'); - await act(() => Promise.resolve()); }); }); @@ -272,7 +271,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), @@ -324,7 +323,7 @@ describe(' - Edit components', () => { ); }); - it('should call onValueChange if defined', async () => { + it('should call onValueChange if defined', () => { const onValueChange = spy(); defaultData.columns[0].renderEditCell = (params) => @@ -342,7 +341,6 @@ describe(' - Edit components', () => { expect((onValueChange.lastCall.args[1]! as Date).toISOString()).to.equal( new Date(2022, 1, 10).toISOString(), ); - await act(() => Promise.resolve()); }); }); @@ -393,7 +391,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), @@ -541,7 +539,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(() => { + apiRef.current.setEditCellValue({ id: 0, field: 'brand', value: 'Adidas' }); + }); expect(cell.textContent!.replace(/[\W]+/, '')).to.equal('Adidas'); }); @@ -562,7 +562,7 @@ describe(' - Edit components', () => { expect(onValueChange.lastCall.args[1]).to.equal('Adidas'); }); - it('should call onCellEditStop', async () => { + it('should call onCellEditStop', () => { const onCellEditStop = spy(); render( @@ -576,7 +576,6 @@ describe(' - Edit components', () => { fireEvent.doubleClick(cell); fireUserEvent.mousePress(document.getElementById('outside-grid')!); expect(onCellEditStop.callCount).to.equal(1); - await act(() => Promise.resolve()); }); it('should not open the suggestions when Enter is pressed', async () => { From 191aa84ce55753b2785a2b611b4d9aaec2f1ee15 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 9 Oct 2024 02:17:05 +0200 Subject: [PATCH 6/6] fix ci --- .../src/tests/editComponents.DataGridPro.test.tsx | 13 +++++++++---- .../src/tests/rowPinning.DataGridPro.test.tsx | 2 +- 2 files changed, 10 insertions(+), 5 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 090685b3f68d..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 @@ -122,7 +122,7 @@ describe(' - Edit components', () => { }); }); - it('should call onValueChange if defined', () => { + it('should call onValueChange if defined', async () => { const onValueChange = spy(); defaultData.columns[0].renderEditCell = (params) => @@ -135,6 +135,8 @@ describe(' - Edit components', () => { const input = within(cell).getByRole('textbox'); fireEvent.change(input, { target: { value: 'Puma' } }); + await act(() => Promise.resolve()); + expect(onValueChange.callCount).to.equal(1); expect(onValueChange.lastCall.args[1]).to.equal('Puma'); }); @@ -323,7 +325,7 @@ describe(' - Edit components', () => { ); }); - it('should call onValueChange if defined', () => { + it('should call onValueChange if defined', async () => { const onValueChange = spy(); defaultData.columns[0].renderEditCell = (params) => @@ -336,6 +338,7 @@ describe(' - Edit components', () => { const input = cell.querySelector('input')!; fireEvent.change(input, { target: { value: '2022-02-10' } }); + await act(() => Promise.resolve()); expect(onValueChange.callCount).to.equal(1); expect((onValueChange.lastCall.args[1]! as Date).toISOString()).to.equal( @@ -539,7 +542,7 @@ describe(' - Edit components', () => { fireEvent.doubleClick(cell); expect(cell.textContent!.replace(/[\W]+/, '')).to.equal('Nike'); // We use .replace to remove ​ - await act(() => { + await act(async () => { apiRef.current.setEditCellValue({ id: 0, field: 'brand', value: 'Adidas' }); }); expect(cell.textContent!.replace(/[\W]+/, '')).to.equal('Adidas'); @@ -562,7 +565,7 @@ describe(' - Edit components', () => { expect(onValueChange.lastCall.args[1]).to.equal('Adidas'); }); - it('should call onCellEditStop', () => { + it('should call onCellEditStop', async () => { const onCellEditStop = spy(); render( @@ -575,6 +578,8 @@ describe(' - Edit components', () => { const cell = getCell(0, 0); fireEvent.doubleClick(cell); fireUserEvent.mousePress(document.getElementById('outside-grid')!); + await act(() => Promise.resolve()); + expect(onCellEditStop.callCount).to.equal(1); }); 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 b84f10904d4c..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,7 +872,7 @@ describe(' - Row pinning', () => { expect(getCell(0, 1).textContent).to.equal('Joe'); expect(getCell(4, 1).textContent).to.equal('Cory'); - await act(() => + await act(async () => apiRef.current.updateRows([ { id: 3, name: 'Marcus' }, { id: 4, name: 'Tom' },