From 1af92c96cc02904738788e424e9c2f1a22f60b1f Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Thu, 20 Apr 2023 18:40:14 +0200 Subject: [PATCH 1/2] fix infinite loop when updating grouped rows with > 1 grouping columns --- .../x-data-grid-pro/src/utils/tree/removeDataRowFromTree.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid-pro/src/utils/tree/removeDataRowFromTree.ts b/packages/grid/x-data-grid-pro/src/utils/tree/removeDataRowFromTree.ts index 98ed93cf639f2..1affa092e6d78 100644 --- a/packages/grid/x-data-grid-pro/src/utils/tree/removeDataRowFromTree.ts +++ b/packages/grid/x-data-grid-pro/src/utils/tree/removeDataRowFromTree.ts @@ -76,7 +76,7 @@ const removeNodeAndCleanParent = ({ parentNode.id !== GRID_ROOT_GROUP_ID && parentNode.children.length === 0; if (shouldDeleteGroup) { if (parentNode.isAutoGenerated) { - removeNodeAndCleanParent({ node, tree, treeDepths }); + removeNodeAndCleanParent({ node: parentNode, tree, treeDepths }); } else { tree[parentNode.id] = { type: 'leaf', From 1b7462e9a0dab4ee2aff7eb53c4bf5a9b424e204 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Thu, 20 Apr 2023 20:04:53 +0200 Subject: [PATCH 2/2] add unit test --- .../rowGrouping.DataGridPremium.test.tsx | 55 ++++++++++++++++++- 1 file changed, 53 insertions(+), 2 deletions(-) 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 18aa8312b182b..ee3463d14c6b5 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 @@ -1,5 +1,12 @@ import * as React from 'react'; -import { createRenderer, fireEvent, screen, act, userEvent } from '@mui/monorepo/test/utils'; +import { + createRenderer, + fireEvent, + screen, + act, + userEvent, + waitFor, +} from '@mui/monorepo/test/utils'; import { getColumnHeaderCell, getColumnHeadersTextContent, @@ -62,7 +69,7 @@ const baselineProps: DataGridPremiumProps = { }; describe(' - Row Grouping', () => { - const { render, clock } = createRenderer({ clock: 'fake' }); + const { render, clock } = createRenderer(); let apiRef: React.MutableRefObject; @@ -77,6 +84,8 @@ describe(' - Row Grouping', () => { } describe('Setting grouping criteria', () => { + clock.withFakeTimers(); + describe('initialState: rowGrouping.model', () => { it('should allow to initialize the row grouping', () => { render( @@ -199,6 +208,8 @@ describe(' - Row Grouping', () => { }); describe('prop: rowGroupingColumnMode', () => { + clock.withFakeTimers(); + it('should gather all the grouping criteria into a single column when rowGroupingColumnMode is not defined', () => { render( - Row Grouping', () => { }); describe('prop: disableRowGrouping', () => { + clock.withFakeTimers(); + it('should disable the row grouping when `prop.disableRowGrouping = true`', () => { render( - Row Grouping', () => { }); describe('prop: defaultGroupingExpansionDepth', () => { + clock.withFakeTimers(); + it('should not expand any row if defaultGroupingExpansionDepth = 0', () => { render( - Row Grouping', () => { }); describe('prop: isGroupExpandedByDefault', () => { + clock.withFakeTimers(); + it('should expand groups according to isGroupExpandedByDefault when defined', () => { const isGroupExpandedByDefault = spy( (node: GridGroupNode) => node.groupingKey === 'Cat A' && node.groupingField === 'category1', @@ -659,6 +676,8 @@ describe(' - Row Grouping', () => { }); describe('prop: groupingColDef when groupingColumnMode = "single"', () => { + clock.withFakeTimers(); + it('should not allow to override the field', () => { render( - Row Grouping', () => { }); describe('prop: groupingColDef when groupingColumnMode = "multiple"', () => { + clock.withFakeTimers(); + it('should not allow to override the field', () => { render( - Row Grouping', () => { }); describe('colDef: groupingValueGetter & valueGetter', () => { + clock.withFakeTimers(); + it('should use groupingValueGetter to group rows when defined', () => { render( - Row Grouping', () => { }); describe('column menu', () => { + clock.withFakeTimers(); + it('should add a "Group by {field}" menu item on ungrouped columns when coLDef.groupable is not defined', () => { render( - Row Grouping', () => { }); describe('sorting', () => { + clock.withFakeTimers(); + describe('prop: rowGroupingColumnMode = "single"', () => { it('should use the top level grouping criteria for sorting if mainGroupingCriteria and leafField are not defined', () => { render( @@ -2435,6 +2462,8 @@ describe(' - Row Grouping', () => { }); describe('apiRef: addRowGroupingCriteria', () => { + clock.withFakeTimers(); + it('should add grouping criteria to model', () => { render(); act(() => apiRef.current.addRowGroupingCriteria('category2')); @@ -2449,6 +2478,8 @@ describe(' - Row Grouping', () => { }); describe('apiRef: removeRowGroupingCriteria', () => { + clock.withFakeTimers(); + it('should remove field from model', () => { render(); act(() => apiRef.current.removeRowGroupingCriteria('category1')); @@ -2457,6 +2488,8 @@ describe(' - Row Grouping', () => { }); describe('apiRef: setRowGroupingCriteriaIndex', () => { + clock.withFakeTimers(); + it('should change the grouping criteria order', () => { render(); act(() => apiRef.current.setRowGroupingCriteriaIndex('category1', 1)); @@ -2465,6 +2498,8 @@ describe(' - Row Grouping', () => { }); describe('apiRef: getRowGroupChildren', () => { + clock.withFakeTimers(); + it('should return the rows in group of depth 0 of length 1 from tree of depth 1', () => { render( - Row Grouping', () => { ]); }); }); + + // See https://github.com/mui/mui-x/issues/8626 + it('should properly update the rows when they change', async () => { + render( + , + ); + + act(() => apiRef.current.updateRows([{ id: 1, group: 'A', username: 'username 2' }])); + + await waitFor(() => expect(getCell(1, 3).textContent).to.equal('username 2')); + }); });