From d771bcfd9e0e96602cfa7c1a6ce90e6b29599355 Mon Sep 17 00:00:00 2001
From: Bilal Shafi <bilalshafidev@gmail.com>
Date: Tue, 24 Sep 2024 15:34:07 +0500
Subject: [PATCH] [DataGrid] Fix error when initializing aggregation with row
 spanning (#14710)

---
 .../aggregation/wrapColumnWithAggregation.tsx |   4 +-
 .../rowSpanning.DataGridPremium.test.tsx      | 131 ++++++++++++++++++
 2 files changed, 133 insertions(+), 2 deletions(-)
 create mode 100644 packages/x-data-grid-premium/src/tests/rowSpanning.DataGridPremium.test.tsx

diff --git a/packages/x-data-grid-premium/src/hooks/features/aggregation/wrapColumnWithAggregation.tsx b/packages/x-data-grid-premium/src/hooks/features/aggregation/wrapColumnWithAggregation.tsx
index f0fba4cf79dc3..e025f256f5b4c 100644
--- a/packages/x-data-grid-premium/src/hooks/features/aggregation/wrapColumnWithAggregation.tsx
+++ b/packages/x-data-grid-premium/src/hooks/features/aggregation/wrapColumnWithAggregation.tsx
@@ -46,8 +46,8 @@ const getAggregationValueWrappedValueGetter: ColumnPropertyWrapper<'valueGetter'
   getCellAggregationResult,
 }) => {
   const wrappedValueGetter: GridBaseColDef['valueGetter'] = (value, row, column, apiRef) => {
-    const rowId = apiRef.current.getRowId(row);
-    const cellAggregationResult = getCellAggregationResult(rowId, column.field);
+    const rowId = apiRef.current.getRowId?.(row);
+    const cellAggregationResult = rowId ? getCellAggregationResult(rowId, column.field) : null;
     if (cellAggregationResult != null) {
       return cellAggregationResult?.value ?? null;
     }
diff --git a/packages/x-data-grid-premium/src/tests/rowSpanning.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/rowSpanning.DataGridPremium.test.tsx
new file mode 100644
index 0000000000000..13b9eb8409460
--- /dev/null
+++ b/packages/x-data-grid-premium/src/tests/rowSpanning.DataGridPremium.test.tsx
@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { createRenderer } from '@mui/internal-test-utils';
+import { expect } from 'chai';
+import { DataGridPremium, DataGridPremiumProps } from '@mui/x-data-grid-premium';
+
+const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+
+describe('<DataGridPremium /> - Row spanning', () => {
+  const { render } = createRenderer();
+
+  const baselineProps: DataGridPremiumProps = {
+    unstable_rowSpanning: true,
+    columns: [
+      {
+        field: 'code',
+        headerName: 'Item Code',
+        width: 85,
+        cellClassName: ({ row }) => (row.summaryRow ? 'bold' : ''),
+      },
+      {
+        field: 'description',
+        headerName: 'Description',
+        width: 170,
+      },
+      {
+        field: 'quantity',
+        headerName: 'Quantity',
+        width: 80,
+        // Do not span the values
+        rowSpanValueGetter: () => null,
+        type: 'number',
+      },
+      {
+        field: 'unitPrice',
+        headerName: 'Unit Price',
+        type: 'number',
+        valueFormatter: (value) => (value ? `$${value}.00` : ''),
+      },
+      {
+        field: 'totalPrice',
+        headerName: 'Total Price',
+        type: 'number',
+        valueGetter: (value, row) => value ?? row?.unitPrice,
+        valueFormatter: (value) => `$${value}.00`,
+      },
+    ],
+    rows: [
+      {
+        id: 1,
+        code: 'A101',
+        description: 'Wireless Mouse',
+        quantity: 2,
+        unitPrice: 50,
+        totalPrice: 100,
+      },
+      {
+        id: 2,
+        code: 'A102',
+        description: 'Mechanical Keyboard',
+        quantity: 1,
+        unitPrice: 75,
+      },
+      {
+        id: 3,
+        code: 'A103',
+        description: 'USB Dock Station',
+        quantity: 1,
+        unitPrice: 400,
+      },
+      {
+        id: 4,
+        code: 'A104',
+        description: 'Laptop',
+        quantity: 1,
+        unitPrice: 1800,
+        totalPrice: 2050,
+      },
+      {
+        id: 5,
+        code: 'A104',
+        description: '- 16GB RAM Upgrade',
+        quantity: 1,
+        unitPrice: 100,
+        totalPrice: 2050,
+      },
+      {
+        id: 6,
+        code: 'A104',
+        description: '- 512GB SSD Upgrade',
+        quantity: 1,
+        unitPrice: 150,
+        totalPrice: 2050,
+      },
+      {
+        id: 7,
+        code: 'TOTAL',
+        totalPrice: 2625,
+        summaryRow: true,
+      },
+    ],
+  };
+
+  function TestDataGrid(props: Partial<DataGridPremiumProps>) {
+    return (
+      <div style={{ width: 500, height: 300 }}>
+        <DataGridPremium {...baselineProps} {...props} disableVirtualization={isJSDOM} />
+      </div>
+    );
+  }
+
+  // See https://github.com/mui/mui-x/issues/14691
+  it('should not throw when initializing an aggregation model', function test() {
+    if (isJSDOM) {
+      this.skip();
+    }
+    expect(() =>
+      render(
+        <TestDataGrid
+          initialState={{
+            aggregation: {
+              model: {
+                quantity: 'sum',
+                unitPrice: 'sum',
+              },
+            },
+          }}
+        />,
+      ),
+    ).not.toErrorDev();
+  });
+});