From 21ff825e9bddbe893a558be6edd8155ae45b281d Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Wed, 8 Jan 2025 12:55:50 +0100 Subject: [PATCH 01/15] Debounced rows fetch --- .../dataSource/useGridDataSourceBase.ts | 3 +++ .../useGridDataSourceLazyLoader.ts | 21 ++++++++++++------- .../src/tests/dataSource.DataGridPro.test.tsx | 15 +++++++++++++ .../dataSourceLazyLoader.DataGridPro.test.tsx | 14 +++++++++++++ 4 files changed, 46 insertions(+), 7 deletions(-) diff --git a/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBase.ts b/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBase.ts index a4c5414da3eb..9c0aa4684d19 100644 --- a/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBase.ts +++ b/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBase.ts @@ -16,6 +16,7 @@ import { GridDataSourceCache, runIf, } from '@mui/x-data-grid/internals'; +import { unstable_debounce as debounce } from '@mui/utils'; import { GridPrivateApiPro } from '../../../models/gridApiPro'; import { DataGridProProcessedProps } from '../../../models/dataGridProProps'; import { gridGetRowsParamsSelector, gridDataSourceErrorsSelector } from './gridDataSourceSelector'; @@ -323,6 +324,8 @@ export const useGridDataSourceBase = ( [apiRef], ); + const debouncedFetchRows = React.useMemo(() => debounce(fetchRows, 0), [fetchRows]); + const handleStrategyActivityChange = React.useCallback< GridEventListener<'strategyAvailabilityChange'> >(() => { diff --git a/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts b/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts index 8a995c9f4cea..c3d1436a1f1a 100644 --- a/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts +++ b/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts @@ -1,5 +1,6 @@ import * as React from 'react'; import { throttle } from '@mui/x-internals/throttle'; +import { unstable_debounce as debounce } from '@mui/utils'; import { useGridApiEventHandler, useGridSelector, @@ -420,6 +421,15 @@ export const useGridDataSourceLazyLoader = ( [props.unstable_lazyLoadingRequestThrottleMs, handleRenderedRowsIntervalChange], ); + const debouncedFetchRows = React.useCallback( + (params: Partial) => + debounce( + () => privateApiRef.current.unstable_dataSource.fetchRows(GRID_ROOT_GROUP_ID, params), + 0, + ), + [privateApiRef], + ); + const handleGridSortModelChange = React.useCallback>( (newSortModel) => { rowsStale.current = true; @@ -443,12 +453,9 @@ export const useGridDataSourceLazyLoader = ( }; privateApiRef.current.setLoading(true); - privateApiRef.current.unstable_dataSource.fetchRows( - GRID_ROOT_GROUP_ID, - adjustRowParams(getRowsParams), - ); + debouncedFetchRows(adjustRowParams(getRowsParams)); }, - [privateApiRef, filterModel, paginationModel.pageSize, adjustRowParams], + [privateApiRef, filterModel, paginationModel.pageSize, adjustRowParams, debouncedFetchRows], ); const handleGridFilterModelChange = React.useCallback>( @@ -463,9 +470,9 @@ export const useGridDataSourceLazyLoader = ( }; privateApiRef.current.setLoading(true); - privateApiRef.current.unstable_dataSource.fetchRows(GRID_ROOT_GROUP_ID, getRowsParams); + debouncedFetchRows(getRowsParams); }, - [privateApiRef, sortModel, paginationModel.pageSize], + [privateApiRef, sortModel, paginationModel.pageSize, debouncedFetchRows], ); const handleStrategyActivityChange = React.useCallback< diff --git a/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx index dba5820e8cc1..8e2ba8439fcd 100644 --- a/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx @@ -125,6 +125,21 @@ describeSkipIf(isJSDOM)(' - Data source', () => { }); }); + it('should re-fetch the data once if multiple models have changed', async () => { + const { setProps } = render(); + await waitFor(() => { + expect(fetchRowsSpy.callCount).to.equal(1); + }); + + setProps({ paginationModel: { page: 1, pageSize: 10 } }); + setProps({ sortModel: [{ field: 'name', sort: 'asc' }] }); + setProps({ filterModel: { items: [{ field: 'name', value: 'John', operator: 'contains' }] } }); + + await waitFor(() => { + expect(fetchRowsSpy.callCount).to.equal(2); + }); + }); + describe('Cache', () => { it('should cache the data using the default cache', async () => { render(); diff --git a/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx index 2ce40abef725..90200d66ec3c 100644 --- a/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx @@ -85,6 +85,20 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { }); }); + it('should re-fetch the data once if multiple models have changed', async () => { + const { setProps } = render(); + await waitFor(() => { + expect(fetchRowsSpy.callCount).to.equal(1); + }); + + setProps({ sortModel: [{ field: 'name', sort: 'asc' }] }); + setProps({ filterModel: { items: [{ field: 'name', value: 'John', operator: 'contains' }] } }); + + await waitFor(() => { + expect(fetchRowsSpy.callCount).to.equal(2); + }); + }); + describe('Viewport loading', () => { it('should render skeleton rows if rowCount is bigger than the number of rows', async () => { render(); From 6375a89c5aaa1cc53b9bd4ff834c7afa4f8f859d Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Wed, 8 Jan 2025 15:20:40 +0100 Subject: [PATCH 02/15] Fix test. Fix debounce in the lazy loader --- .../useGridDataSourceLazyLoader.ts | 12 ++++++------ .../src/tests/dataSource.DataGridPro.test.tsx | 8 +++++--- .../tests/dataSourceLazyLoader.DataGridPro.test.tsx | 6 ++++-- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts b/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts index c3d1436a1f1a..e761d83f5220 100644 --- a/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts +++ b/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts @@ -421,15 +421,15 @@ export const useGridDataSourceLazyLoader = ( [props.unstable_lazyLoadingRequestThrottleMs, handleRenderedRowsIntervalChange], ); - const debouncedFetchRows = React.useCallback( - (params: Partial) => - debounce( - () => privateApiRef.current.unstable_dataSource.fetchRows(GRID_ROOT_GROUP_ID, params), - 0, - ), + const fetchRows = React.useCallback( + (params: Partial) => { + privateApiRef.current.unstable_dataSource.fetchRows(GRID_ROOT_GROUP_ID, params); + }, [privateApiRef], ); + const debouncedFetchRows = React.useMemo(() => debounce(fetchRows, 0), [fetchRows]); + const handleGridSortModelChange = React.useCallback>( (newSortModel) => { rowsStale.current = true; diff --git a/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx index 8e2ba8439fcd..7b03004f2f82 100644 --- a/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx @@ -131,9 +131,11 @@ describeSkipIf(isJSDOM)(' - Data source', () => { expect(fetchRowsSpy.callCount).to.equal(1); }); - setProps({ paginationModel: { page: 1, pageSize: 10 } }); - setProps({ sortModel: [{ field: 'name', sort: 'asc' }] }); - setProps({ filterModel: { items: [{ field: 'name', value: 'John', operator: 'contains' }] } }); + setProps({ + paginationModel: { page: 1, pageSize: 10 }, + sortModel: [{ field: 'name', sort: 'asc' }], + filterModel: { items: [{ field: 'name', value: 'John', operator: 'contains' }] }, + }); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); diff --git a/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx index 90200d66ec3c..0b4a2a11dc28 100644 --- a/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx @@ -91,8 +91,10 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { expect(fetchRowsSpy.callCount).to.equal(1); }); - setProps({ sortModel: [{ field: 'name', sort: 'asc' }] }); - setProps({ filterModel: { items: [{ field: 'name', value: 'John', operator: 'contains' }] } }); + setProps({ + sortModel: [{ field: 'name', sort: 'asc' }], + filterModel: { items: [{ field: 'name', value: 'John', operator: 'contains' }] }, + }); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); From a29f93d35b1f36e10a2f3a2f72a5579a3a901fa3 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Thu, 9 Jan 2025 09:28:47 +0100 Subject: [PATCH 03/15] Prevent certain event while rows are stale --- .../useGridDataSourceLazyLoader.ts | 39 +++++++++---------- 1 file changed, 18 insertions(+), 21 deletions(-) diff --git a/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts b/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts index e761d83f5220..578609e57ab2 100644 --- a/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts +++ b/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts @@ -79,6 +79,15 @@ export const useGridDataSourceLazyLoader = ( const loadingTrigger = React.useRef(null); const rowsStale = React.useRef(false); + const fetchRows = React.useCallback( + (params: Partial) => { + privateApiRef.current.unstable_dataSource.fetchRows(GRID_ROOT_GROUP_ID, params); + }, + [privateApiRef], + ); + + const debouncedFetchRows = React.useMemo(() => debounce(fetchRows, 0), [fetchRows]); + // Adjust the render context range to fit the pagination model's page size // First row index should be decreased to the start of the page, end row index should be increased to the end of the page const adjustRowParams = React.useCallback( @@ -108,8 +117,8 @@ export const useGridDataSourceLazyLoader = ( filterModel, }; - privateApiRef.current.unstable_dataSource.fetchRows(GRID_ROOT_GROUP_ID, getRowsParams); - }, [privateApiRef, sortModel, filterModel, paginationModel.pageSize]); + fetchRows(getRowsParams); + }, [privateApiRef, sortModel, filterModel, paginationModel.pageSize, fetchRows]); const ensureValidRowCount = React.useCallback( (previousLoadingTrigger: LoadingTrigger, newLoadingTrigger: LoadingTrigger) => { @@ -303,7 +312,7 @@ export const useGridDataSourceLazyLoader = ( ); const handleRowCountChange = React.useCallback(() => { - if (loadingTrigger.current === null) { + if (rowsStale.current || loadingTrigger.current === null) { return; } @@ -316,6 +325,7 @@ export const useGridDataSourceLazyLoader = ( (newScrollPosition) => { const renderContext = gridRenderContextSelector(privateApiRef); if ( + rowsStale.current || loadingTrigger.current !== LoadingTrigger.SCROLL_END || previousLastRowIndex.current >= renderContext.lastRowIndex ) { @@ -336,10 +346,7 @@ export const useGridDataSourceLazyLoader = ( }; privateApiRef.current.setLoading(true); - privateApiRef.current.unstable_dataSource.fetchRows( - GRID_ROOT_GROUP_ID, - adjustRowParams(getRowsParams), - ); + fetchRows(adjustRowParams(getRowsParams)); } }, [ @@ -350,6 +357,7 @@ export const useGridDataSourceLazyLoader = ( dimensions, paginationModel.pageSize, adjustRowParams, + fetchRows, ], ); @@ -357,7 +365,7 @@ export const useGridDataSourceLazyLoader = ( GridEventListener<'renderedRowsIntervalChange'> >( (params) => { - if (loadingTrigger.current !== LoadingTrigger.VIEWPORT) { + if (rowsStale.current || loadingTrigger.current !== LoadingTrigger.VIEWPORT) { return; } @@ -401,10 +409,7 @@ export const useGridDataSourceLazyLoader = ( getRowsParams.start = skeletonRowsSection.firstRowIndex; getRowsParams.end = skeletonRowsSection.lastRowIndex; - privateApiRef.current.unstable_dataSource.fetchRows( - GRID_ROOT_GROUP_ID, - adjustRowParams(getRowsParams), - ); + fetchRows(adjustRowParams(getRowsParams)); }, [ privateApiRef, @@ -413,6 +418,7 @@ export const useGridDataSourceLazyLoader = ( sortModel, filterModel, adjustRowParams, + fetchRows, ], ); @@ -421,15 +427,6 @@ export const useGridDataSourceLazyLoader = ( [props.unstable_lazyLoadingRequestThrottleMs, handleRenderedRowsIntervalChange], ); - const fetchRows = React.useCallback( - (params: Partial) => { - privateApiRef.current.unstable_dataSource.fetchRows(GRID_ROOT_GROUP_ID, params); - }, - [privateApiRef], - ); - - const debouncedFetchRows = React.useMemo(() => debounce(fetchRows, 0), [fetchRows]); - const handleGridSortModelChange = React.useCallback>( (newSortModel) => { rowsStale.current = true; From 604e0f7a2eef0cd93cc5333b0226b0c9dc62352f Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Thu, 9 Jan 2025 13:33:05 +0100 Subject: [PATCH 04/15] Cleanup --- .../src/hooks/features/dataSource/useGridDataSourceBase.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBase.ts b/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBase.ts index 9c0aa4684d19..68ce7a24c1ef 100644 --- a/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBase.ts +++ b/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBase.ts @@ -64,9 +64,6 @@ export const useGridDataSourceBase = ( | 'unstable_dataSource' | 'unstable_dataSourceCache' | 'unstable_onDataSourceError' - | 'sortingMode' - | 'filterMode' - | 'paginationMode' | 'pageSizeOptions' | 'treeData' | 'unstable_lazyLoading' From f324203723583f685df14ddd26e60a6482c24dfa Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Thu, 9 Jan 2025 13:34:22 +0100 Subject: [PATCH 05/15] Performance improvement --- .../useGridDataSourceLazyLoader.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts b/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts index 578609e57ab2..15a4d67f41f1 100644 --- a/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts +++ b/packages/x-data-grid-pro/src/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.ts @@ -323,12 +323,12 @@ export const useGridDataSourceLazyLoader = ( const handleScrolling: GridEventListener<'scrollPositionChange'> = React.useCallback( (newScrollPosition) => { + if (rowsStale.current || loadingTrigger.current !== LoadingTrigger.SCROLL_END) { + return; + } + const renderContext = gridRenderContextSelector(privateApiRef); - if ( - rowsStale.current || - loadingTrigger.current !== LoadingTrigger.SCROLL_END || - previousLastRowIndex.current >= renderContext.lastRowIndex - ) { + if (previousLastRowIndex.current >= renderContext.lastRowIndex) { return; } From c891f08ab4235e26bcf91ad7e34a7e3f46b5dcf4 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Thu, 9 Jan 2025 13:34:32 +0100 Subject: [PATCH 06/15] Fix tests --- .../dataSourceLazyLoader.DataGridPro.test.tsx | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx index 0b4a2a11dc28..10ff9973da37 100644 --- a/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx @@ -228,6 +228,11 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { apiRef.current.scrollToIndexes({ rowIndex: 9 }); + // wait until the debounced fetch + await waitFor(() => { + expect(fetchRowsSpy.callCount).to.equal(2); + }); + // wait until the rows are rendered await waitFor(() => expect(getRow(10)).not.to.be.undefined); @@ -237,6 +242,10 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { apiRef.current.sortColumn(mockServer.columns[0].field, 'asc'); + await waitFor(() => { + expect(fetchRowsSpy.callCount).to.equal(3); + }); + const afterSortingSearchParams = new URL(fetchRowsSpy.lastCall.args[0]).searchParams; // last row is the end of the first page expect(afterSortingSearchParams.get('end')).to.equal('9'); @@ -249,6 +258,11 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { apiRef.current.scrollToIndexes({ rowIndex: 9 }); + // wait until the debounced fetch + await waitFor(() => { + expect(fetchRowsSpy.callCount).to.equal(2); + }); + // wait until the rows are rendered await waitFor(() => expect(getRow(10)).not.to.be.undefined); @@ -266,6 +280,10 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { ], }); + await waitFor(() => { + expect(fetchRowsSpy.callCount).to.equal(3); + }); + const afterFilteringSearchParams = new URL(fetchRowsSpy.lastCall.args[0]).searchParams; // last row is the end of the first page expect(afterFilteringSearchParams.get('end')).to.equal('9'); @@ -287,7 +305,9 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { setProps({ rowCount: 100 }); // The 11th row should be a skeleton - expect(getRow(10).dataset.id).to.equal('auto-generated-skeleton-row-root-10'); + await waitFor(() => + expect(getRow(10).dataset.id).to.equal('auto-generated-skeleton-row-root-10'), + ); }); it('should reset the grid if the rowCount becomes unknown', async () => { From afe568faf9c64d4733a78c81ecc60f4e260b48d4 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Thu, 9 Jan 2025 13:40:33 +0100 Subject: [PATCH 07/15] Use debounced fetch --- .../src/hooks/features/dataSource/useGridDataSourceBase.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBase.ts b/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBase.ts index 68ce7a24c1ef..c59f8593280a 100644 --- a/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBase.ts +++ b/packages/x-data-grid-pro/src/hooks/features/dataSource/useGridDataSourceBase.ts @@ -421,9 +421,9 @@ export const useGridDataSourceBase = ( }, events: { strategyAvailabilityChange: handleStrategyActivityChange, - sortModelChange: runIf(defaultRowsUpdateStrategyActive, () => fetchRows()), - filterModelChange: runIf(defaultRowsUpdateStrategyActive, () => fetchRows()), - paginationModelChange: runIf(defaultRowsUpdateStrategyActive, () => fetchRows()), + sortModelChange: runIf(defaultRowsUpdateStrategyActive, () => debouncedFetchRows()), + filterModelChange: runIf(defaultRowsUpdateStrategyActive, () => debouncedFetchRows()), + paginationModelChange: runIf(defaultRowsUpdateStrategyActive, () => debouncedFetchRows()), }, }; }; From 1f1a159f718412a412e15d0fa645bd826ac8528c Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Thu, 9 Jan 2025 21:16:32 +0100 Subject: [PATCH 08/15] Use apiRef to update filter model --- .../x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx | 4 +++- .../src/tests/dataSourceTreeData.DataGridPro.test.tsx | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx index 7b03004f2f82..ac36b4394425 100644 --- a/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx @@ -97,7 +97,9 @@ describeSkipIf(isJSDOM)(' - Data source', () => { await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(1); }); - setProps({ filterModel: { items: [{ field: 'name', value: 'John', operator: 'contains' }] } }); + apiRef.current.setFilterModel({ + items: [{ field: 'name', value: 'John', operator: 'contains' }], + }); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); }); diff --git a/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx index ee062c6272d0..9cb812fb5490 100644 --- a/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx @@ -94,7 +94,9 @@ describeSkipIf(isJSDOM)(' - Data source tree data', () => { await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(1); }); - setProps({ filterModel: { items: [{ field: 'name', value: 'John', operator: 'contains' }] } }); + apiRef.current.setFilterModel({ + items: [{ field: 'name', value: 'John', operator: 'contains' }], + }); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); }); From 56b8319e85f07f517b4fe28247d527ec7b0c04d2 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Thu, 9 Jan 2025 21:31:32 +0100 Subject: [PATCH 09/15] Lint --- .../x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx | 2 +- .../src/tests/dataSourceTreeData.DataGridPro.test.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx index ac36b4394425..3db777d3a044 100644 --- a/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx @@ -93,7 +93,7 @@ describeSkipIf(isJSDOM)(' - Data source', () => { }); it('should re-fetch the data on filter change', async () => { - const { setProps } = render(); + render(); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(1); }); diff --git a/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx index 9cb812fb5490..96c935260a8b 100644 --- a/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx @@ -90,7 +90,7 @@ describeSkipIf(isJSDOM)(' - Data source tree data', () => { }); it('should re-fetch the data on filter change', async () => { - const { setProps } = render(); + render(); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(1); }); From 8a48a85f262f419c418d64ab65a309273cf115f8 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Fri, 10 Jan 2025 10:29:26 +0100 Subject: [PATCH 10/15] Fix test --- .../src/tests/dataSourceTreeData.DataGridPro.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx index 96c935260a8b..960d73cd99a8 100644 --- a/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx @@ -103,11 +103,11 @@ describeSkipIf(isJSDOM)(' - Data source tree data', () => { }); it('should re-fetch the data on sort change', async () => { - const { setProps } = render(); + render(); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(1); }); - setProps({ sortModel: [{ field: 'name', sort: 'asc' }] }); + apiRef.current.sortColumn('name', 'asc'); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); }); From 20117361861c6fdfd143780981c40f8e20dfc745 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Fri, 10 Jan 2025 12:02:30 +0100 Subject: [PATCH 11/15] Avoid using setProps with debounce --- .../src/tests/dataSource.DataGridPro.test.tsx | 34 ++++++++----------- .../dataSourceLazyLoader.DataGridPro.test.tsx | 8 ++--- .../dataSourceTreeData.DataGridPro.test.tsx | 4 +-- 3 files changed, 21 insertions(+), 25 deletions(-) diff --git a/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx index 3db777d3a044..3ce7fc2e769b 100644 --- a/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx @@ -106,38 +106,32 @@ describeSkipIf(isJSDOM)(' - Data source', () => { }); it('should re-fetch the data on sort change', async () => { - const { setProps } = render(); - await waitFor(() => { - expect(fetchRowsSpy.callCount).to.equal(1); - }); - setProps({ sortModel: [{ field: 'name', sort: 'asc' }] }); + render(); + expect(fetchRowsSpy.callCount).to.equal(1); + apiRef.current.setSortModel([{ field: 'name', sort: 'asc' }]); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); }); }); it('should re-fetch the data on pagination change', async () => { - const { setProps } = render(); - await waitFor(() => { - expect(fetchRowsSpy.callCount).to.equal(1); - }); - setProps({ paginationModel: { page: 1, pageSize: 10 } }); + render(); + expect(fetchRowsSpy.callCount).to.equal(1); + apiRef.current.setPaginationModel({ page: 1, pageSize: 10 }); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); }); }); it('should re-fetch the data once if multiple models have changed', async () => { - const { setProps } = render(); - await waitFor(() => { - expect(fetchRowsSpy.callCount).to.equal(1); - }); + render(); + expect(fetchRowsSpy.callCount).to.equal(1); - setProps({ - paginationModel: { page: 1, pageSize: 10 }, - sortModel: [{ field: 'name', sort: 'asc' }], - filterModel: { items: [{ field: 'name', value: 'John', operator: 'contains' }] }, + apiRef.current.setFilterModel({ + items: [{ field: 'name', value: 'John', operator: 'contains' }], }); + apiRef.current.setSortModel([{ field: 'name', sort: 'asc' }]); + apiRef.current.setPaginationModel({ page: 1, pageSize: 10 }); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); @@ -217,7 +211,9 @@ describeSkipIf(isJSDOM)(' - Data source', () => { await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); }); - expect(cache.size).to.equal(2); + await waitFor(() => { + expect(cache.size).to.equal(2); + }); const dataRow2 = await screen.findByText( (_, el) => el?.getAttribute('data-rowindex') === '0' && el !== dataRow1, diff --git a/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx index 10ff9973da37..14f9f8ef7591 100644 --- a/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx @@ -86,15 +86,15 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { }); it('should re-fetch the data once if multiple models have changed', async () => { - const { setProps } = render(); + render(); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(1); }); - setProps({ - sortModel: [{ field: 'name', sort: 'asc' }], - filterModel: { items: [{ field: 'name', value: 'John', operator: 'contains' }] }, + apiRef.current.setFilterModel({ + items: [{ field: 'name', value: 'John', operator: 'contains' }], }); + apiRef.current.setSortModel([{ field: 'name', sort: 'asc' }]); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); diff --git a/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx index 960d73cd99a8..f3a34d4567b7 100644 --- a/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx @@ -114,11 +114,11 @@ describeSkipIf(isJSDOM)(' - Data source tree data', () => { }); it('should re-fetch the data on pagination change', async () => { - const { setProps } = render(); + render(); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(1); }); - setProps({ paginationModel: { page: 1, pageSize: 10 } }); + apiRef.current.setPaginationModel({ page: 1, pageSize: 10 }); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); }); From 969a6d86aa04a2efd00fa0f5dbb2daafa7048093 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Fri, 10 Jan 2025 12:30:13 +0100 Subject: [PATCH 12/15] Wait for the data to load --- .../src/tests/dataSourceAggregation.DataGridPremium.test.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx index 63f7c44bee3f..4056877924f5 100644 --- a/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx @@ -98,6 +98,9 @@ describe(' - Data source aggregation', () => { it('should show aggregation option in the column menu', async () => { const { user } = render(); + await waitFor(() => { + expect(getRowsSpy.callCount).to.be.greaterThan(0); + }); await user.click(within(getColumnHeaderCell(0)).getByLabelText('Menu')); expect(screen.queryByLabelText('Aggregation')).not.to.equal(null); }); From 25fd9446b5022f8cf2fa33bb4113baee3ba526d4 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Fri, 10 Jan 2025 13:54:27 +0100 Subject: [PATCH 13/15] Set page with different API --- .../x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx | 2 +- .../src/tests/dataSourceTreeData.DataGridPro.test.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx index 3ce7fc2e769b..6bf1d8024f55 100644 --- a/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx @@ -117,7 +117,7 @@ describeSkipIf(isJSDOM)(' - Data source', () => { it('should re-fetch the data on pagination change', async () => { render(); expect(fetchRowsSpy.callCount).to.equal(1); - apiRef.current.setPaginationModel({ page: 1, pageSize: 10 }); + apiRef.current.setPage(1); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); }); diff --git a/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx index f3a34d4567b7..8c33a0b099fb 100644 --- a/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx @@ -118,7 +118,7 @@ describeSkipIf(isJSDOM)(' - Data source tree data', () => { await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(1); }); - apiRef.current.setPaginationModel({ page: 1, pageSize: 10 }); + apiRef.current.setPage(1); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); }); From 7370a158502eb91a97197c35c0223bb563bf63ef Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Sat, 11 Jan 2025 00:34:58 +0100 Subject: [PATCH 14/15] avoid creating new spy on component rerender --- .../src/tests/dataSource.DataGridPro.test.tsx | 17 ++++++++++---- .../dataSourceLazyLoader.DataGridPro.test.tsx | 17 ++++++++++---- .../dataSourceTreeData.DataGridPro.test.tsx | 22 +++++++++++++++---- 3 files changed, 44 insertions(+), 12 deletions(-) diff --git a/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx index 6bf1d8024f55..518b30940c33 100644 --- a/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx @@ -12,8 +12,9 @@ import { GridGetRowsResponse, useGridApiRef, } from '@mui/x-data-grid-pro'; -import { SinonSpy, spy } from 'sinon'; +import { SinonStub, spy, stub } from 'sinon'; import { describeSkipIf, isJSDOM } from 'test/utils/skipIf'; +import useLazyRef from '@mui/utils/useLazyRef'; import { getKeyDefault } from '../hooks/features/dataSource/cache'; const cache = new Map(); @@ -29,7 +30,7 @@ describeSkipIf(isJSDOM)(' - Data source', () => { const { render } = createRenderer(); let apiRef: React.RefObject; - let fetchRowsSpy: SinonSpy; + let fetchRowsSpy: SinonStub; let mockServer: ReturnType; function TestDataSource(props: Partial & { shouldRequestsFail?: boolean }) { @@ -40,8 +41,15 @@ describeSkipIf(isJSDOM)(' - Data source', () => { { useCursorPagination: false, minDelay: 0, maxDelay: 0, verbose: false }, shouldRequestsFail, ); - fetchRowsSpy = spy(mockServer, 'fetchRows'); - const { fetchRows } = mockServer; + + // Reuse the same stub between rerenders to properly count the calls + fetchRowsSpy = useLazyRef(() => stub()).current; + + const originalFetchRows = mockServer.fetchRows; + const fetchRows = React.useMemo(() => { + fetchRowsSpy.callsFake(originalFetchRows); + return (...args) => fetchRowsSpy(...args); + }, [originalFetchRows]); const dataSource: GridDataSource = React.useMemo( () => ({ @@ -83,6 +91,7 @@ describeSkipIf(isJSDOM)(' - Data source', () => { // eslint-disable-next-line mocha/no-top-level-hooks beforeEach(() => { cache.clear(); + fetchRowsSpy?.reset(); }); it('should fetch the data on initial render', async () => { diff --git a/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx index 14f9f8ef7591..70d6a25bcfe4 100644 --- a/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx @@ -12,8 +12,9 @@ import { GridGetRowsResponse, useGridApiRef, } from '@mui/x-data-grid-pro'; -import { SinonSpy, spy } from 'sinon'; +import { SinonStub, stub } from 'sinon'; import { describeSkipIf, isJSDOM } from 'test/utils/skipIf'; +import useLazyRef from '@mui/utils/useLazyRef'; // Needs layout describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { @@ -22,7 +23,7 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { let transformGetRowsResponse: (response: GridGetRowsResponse) => GridGetRowsResponse; let apiRef: React.RefObject; - let fetchRowsSpy: SinonSpy; + let fetchRowsSpy: SinonStub; let mockServer: ReturnType; function TestDataSourceLazyLoader(props: Partial) { @@ -31,8 +32,15 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { { rowLength: 100, maxColumns: 1 }, { useCursorPagination: false, minDelay: 0, maxDelay: 0, verbose: false }, ); - fetchRowsSpy = spy(mockServer, 'fetchRows'); - const { fetchRows } = mockServer; + + // Reuse the same stub between rerenders to properly count the calls + fetchRowsSpy = useLazyRef(() => stub()).current; + + const originalFetchRows = mockServer.fetchRows; + const fetchRows = React.useMemo(() => { + fetchRowsSpy.callsFake(originalFetchRows); + return (...args) => fetchRowsSpy(...args); + }, [originalFetchRows]); const dataSource: GridDataSource = React.useMemo( () => ({ @@ -76,6 +84,7 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { // eslint-disable-next-line mocha/no-top-level-hooks beforeEach(() => { transformGetRowsResponse = defaultTransformGetRowsResponse; + fetchRowsSpy?.reset(); }); it('should load the first page initially', async () => { diff --git a/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx index 8c33a0b099fb..1aedf16de91e 100644 --- a/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx @@ -12,9 +12,10 @@ import { GridGroupNode, useGridApiRef, } from '@mui/x-data-grid-pro'; -import { SinonSpy, spy } from 'sinon'; +import { SinonStub, stub } from 'sinon'; import { getCell } from 'test/utils/helperFn'; import { describeSkipIf, isJSDOM } from 'test/utils/skipIf'; +import useLazyRef from '@mui/utils/useLazyRef'; const dataSetOptions = { dataSet: 'Employee' as const, @@ -31,14 +32,22 @@ describeSkipIf(isJSDOM)(' - Data source tree data', () => { const { render } = createRenderer(); let apiRef: React.RefObject; - let fetchRowsSpy: SinonSpy; + let fetchRowsSpy: SinonStub; let mockServer: ReturnType; function TestDataSource(props: Partial & { shouldRequestsFail?: boolean }) { apiRef = useGridApiRef(); mockServer = useMockServer(dataSetOptions, serverOptions, props.shouldRequestsFail ?? false); - fetchRowsSpy = spy(mockServer, 'fetchRows'); - const { fetchRows, columns } = mockServer; + const { columns } = mockServer; + + // Reuse the same stub between rerenders to properly count the calls + fetchRowsSpy = useLazyRef(() => stub()).current; + + const originalFetchRows = mockServer.fetchRows; + const fetchRows = React.useMemo(() => { + fetchRowsSpy.callsFake(originalFetchRows); + return (...args) => fetchRowsSpy(...args); + }, [originalFetchRows]); const dataSource: GridDataSource = React.useMemo( () => ({ @@ -82,6 +91,11 @@ describeSkipIf(isJSDOM)(' - Data source tree data', () => { ); } + // eslint-disable-next-line mocha/no-top-level-hooks + beforeEach(() => { + fetchRowsSpy?.reset(); + }); + it('should fetch the data on initial render', async () => { render(); await waitFor(() => { From a12dc93c15b9a50681fad4bf3f41af6a32fcf81e Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Sat, 11 Jan 2025 00:37:23 +0100 Subject: [PATCH 15/15] Revert "Avoid using setProps with debounce" This reverts commit 20117361861c6fdfd143780981c40f8e20dfc745. --- .../src/tests/dataSource.DataGridPro.test.tsx | 34 +++++++++++-------- .../dataSourceLazyLoader.DataGridPro.test.tsx | 8 ++--- .../dataSourceTreeData.DataGridPro.test.tsx | 4 +-- 3 files changed, 25 insertions(+), 21 deletions(-) diff --git a/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx index 518b30940c33..b6835025f9de 100644 --- a/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx @@ -115,32 +115,38 @@ describeSkipIf(isJSDOM)(' - Data source', () => { }); it('should re-fetch the data on sort change', async () => { - render(); - expect(fetchRowsSpy.callCount).to.equal(1); - apiRef.current.setSortModel([{ field: 'name', sort: 'asc' }]); + const { setProps } = render(); + await waitFor(() => { + expect(fetchRowsSpy.callCount).to.equal(1); + }); + setProps({ sortModel: [{ field: 'name', sort: 'asc' }] }); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); }); }); it('should re-fetch the data on pagination change', async () => { - render(); - expect(fetchRowsSpy.callCount).to.equal(1); - apiRef.current.setPage(1); + const { setProps } = render(); + await waitFor(() => { + expect(fetchRowsSpy.callCount).to.equal(1); + }); + setProps({ paginationModel: { page: 1, pageSize: 10 } }); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); }); }); it('should re-fetch the data once if multiple models have changed', async () => { - render(); - expect(fetchRowsSpy.callCount).to.equal(1); + const { setProps } = render(); + await waitFor(() => { + expect(fetchRowsSpy.callCount).to.equal(1); + }); - apiRef.current.setFilterModel({ - items: [{ field: 'name', value: 'John', operator: 'contains' }], + setProps({ + paginationModel: { page: 1, pageSize: 10 }, + sortModel: [{ field: 'name', sort: 'asc' }], + filterModel: { items: [{ field: 'name', value: 'John', operator: 'contains' }] }, }); - apiRef.current.setSortModel([{ field: 'name', sort: 'asc' }]); - apiRef.current.setPaginationModel({ page: 1, pageSize: 10 }); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); @@ -220,9 +226,7 @@ describeSkipIf(isJSDOM)(' - Data source', () => { await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); }); - await waitFor(() => { - expect(cache.size).to.equal(2); - }); + expect(cache.size).to.equal(2); const dataRow2 = await screen.findByText( (_, el) => el?.getAttribute('data-rowindex') === '0' && el !== dataRow1, diff --git a/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx index 70d6a25bcfe4..8fa5d520ba41 100644 --- a/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx @@ -95,15 +95,15 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { }); it('should re-fetch the data once if multiple models have changed', async () => { - render(); + const { setProps } = render(); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(1); }); - apiRef.current.setFilterModel({ - items: [{ field: 'name', value: 'John', operator: 'contains' }], + setProps({ + sortModel: [{ field: 'name', sort: 'asc' }], + filterModel: { items: [{ field: 'name', value: 'John', operator: 'contains' }] }, }); - apiRef.current.setSortModel([{ field: 'name', sort: 'asc' }]); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); diff --git a/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx index 1aedf16de91e..9c9744f6e531 100644 --- a/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx @@ -128,11 +128,11 @@ describeSkipIf(isJSDOM)(' - Data source tree data', () => { }); it('should re-fetch the data on pagination change', async () => { - render(); + const { setProps } = render(); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(1); }); - apiRef.current.setPage(1); + setProps({ paginationModel: { page: 1, pageSize: 10 } }); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); });