From 722db52e9fb59d7f55694611f898ed6a5c75c54d Mon Sep 17 00:00:00 2001
From: Jose Quintas <juniorquintas@gmail.com>
Date: Fri, 11 Oct 2024 16:48:48 +0200
Subject: [PATCH 1/5] refactor row editing

---
 .../src/tests/rowEditing.DataGridPro.test.tsx | 278 +++++++++++-------
 1 file changed, 170 insertions(+), 108 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 fa95887bf430..599de9fe4af4 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
@@ -34,19 +34,13 @@ describe('<DataGridPro /> - Row editing', () => {
     return <input ref={ref} />;
   }
 
-  const renderEditCell1 = spy((props: GridRenderEditCellParams) => (
+  const defaultRenderEditCell = (props: GridRenderEditCellParams) => (
     <CustomEditComponent {...props} />
-  ));
+  );
 
-  const renderEditCell2 = spy((props: GridRenderEditCellParams) => (
-    <CustomEditComponent {...props} />
-  ));
-
-  let column1Props: any = {};
-  let column2Props: any = {};
-
-  function TestCase(props: Partial<DataGridProProps>) {
+  function TestCase(props: Partial<DataGridProProps> & { column1Props?: any; column2Props?: any }) {
     apiRef = useGridApiRef();
+    const { column1Props = {}, column2Props = {}, ...rest } = props;
     return (
       <div style={{ width: 300, height: 300 }}>
         <DataGridPro
@@ -58,7 +52,7 @@ describe('<DataGridPro /> - Row editing', () => {
             if (column.field === 'currencyPair') {
               return {
                 ...column,
-                renderEditCell: renderEditCell1,
+                renderEditCell: defaultRenderEditCell,
                 editable: true,
                 ...column1Props,
               };
@@ -66,26 +60,19 @@ describe('<DataGridPro /> - Row editing', () => {
             if (column.field === 'price1M') {
               return {
                 ...column,
-                renderEditCell: renderEditCell2,
+                renderEditCell: defaultRenderEditCell,
                 editable: true,
                 ...column2Props,
               };
             }
             return column;
           })}
-          {...props}
+          {...rest}
         />
       </div>
     );
   }
 
-  afterEach(() => {
-    renderEditCell1.resetHistory();
-    renderEditCell2.resetHistory();
-    column1Props = {};
-    column2Props = {};
-  });
-
   describe('apiRef', () => {
     describe('startRowEditMode', () => {
       it('should throw when the row is already in edit mode', () => {
@@ -113,7 +100,15 @@ describe('<DataGridPro /> - Row editing', () => {
       });
 
       it('should render the components given in renderEditCell', () => {
-        render(<TestCase />);
+        const renderEditCell1 = spy(defaultRenderEditCell);
+        const renderEditCell2 = spy(defaultRenderEditCell);
+
+        render(
+          <TestCase
+            column1Props={{ renderEditCell: renderEditCell1 }}
+            column2Props={{ renderEditCell: renderEditCell2 }}
+          />,
+        );
         expect(renderEditCell1.callCount).to.equal(0);
         expect(renderEditCell2.callCount).to.equal(0);
         act(() => apiRef.current.startRowEditMode({ id: 0 }));
@@ -122,7 +117,15 @@ describe('<DataGridPro /> - Row editing', () => {
       });
 
       it('should pass props to renderEditCell', () => {
-        render(<TestCase />);
+        const renderEditCell1 = spy(defaultRenderEditCell);
+        const renderEditCell2 = spy(defaultRenderEditCell);
+
+        render(
+          <TestCase
+            column1Props={{ renderEditCell: renderEditCell1 }}
+            column2Props={{ renderEditCell: renderEditCell2 }}
+          />,
+        );
         act(() => apiRef.current.startRowEditMode({ id: 0 }));
         expect(renderEditCell1.lastCall.args[0].value).to.equal('USDGBP');
         expect(renderEditCell1.lastCall.args[0].error).to.equal(false);
@@ -133,7 +136,16 @@ describe('<DataGridPro /> - Row editing', () => {
       });
 
       it('should empty the value if deleteValue is true', () => {
-        render(<TestCase />);
+        const renderEditCell1 = spy(defaultRenderEditCell);
+        const renderEditCell2 = spy(defaultRenderEditCell);
+
+        render(
+          <TestCase
+            column1Props={{ renderEditCell: renderEditCell1 }}
+            column2Props={{ renderEditCell: renderEditCell2 }}
+          />,
+        );
+
         act(() =>
           apiRef.current.startRowEditMode({
             id: 0,
@@ -148,7 +160,16 @@ describe('<DataGridPro /> - Row editing', () => {
 
     describe('setEditCellValue', () => {
       it('should update the value prop given to renderEditCell', async () => {
-        render(<TestCase />);
+        const renderEditCell1 = spy(defaultRenderEditCell);
+        const renderEditCell2 = spy(defaultRenderEditCell);
+
+        render(
+          <TestCase
+            column1Props={{ renderEditCell: renderEditCell1 }}
+            column2Props={{ renderEditCell: renderEditCell2 }}
+          />,
+        );
+
         act(() => apiRef.current.startRowEditMode({ id: 0 }));
         expect(renderEditCell1.lastCall.args[0].value).to.equal('USDGBP');
         await act(() =>
@@ -162,8 +183,15 @@ describe('<DataGridPro /> - Row editing', () => {
           ...row,
           currencyPair: value.trim(),
         });
-        column1Props.valueSetter = valueSetter;
-        render(<TestCase />);
+        const renderEditCell1 = spy(defaultRenderEditCell);
+        const renderEditCell2 = spy(defaultRenderEditCell);
+
+        render(
+          <TestCase
+            column1Props={{ renderEditCell: renderEditCell1, valueSetter }}
+            column2Props={{ renderEditCell: renderEditCell2 }}
+          />,
+        );
         act(() => apiRef.current.startRowEditMode({ id: 0 }));
         expect(renderEditCell1.lastCall.args[0].row).to.deep.equal(defaultData.rows[0]);
         await act(() =>
@@ -178,15 +206,17 @@ describe('<DataGridPro /> - Row editing', () => {
       });
 
       it('should pass the new value through the value parser if defined', async () => {
-        column1Props.valueParser = spy((value) => value.toLowerCase());
-        render(<TestCase />);
+        const valueParser = spy((value) => value.toLowerCase());
+        const renderEditCell = spy(defaultRenderEditCell);
+
+        render(<TestCase column1Props={{ renderEditCell, valueParser }} />);
         act(() => apiRef.current.startRowEditMode({ id: 0 }));
-        expect(column1Props.valueParser.callCount).to.equal(0);
+        expect(valueParser.callCount).to.equal(0);
         await act(() =>
           apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
         );
-        expect(column1Props.valueParser.callCount).to.equal(1);
-        expect(renderEditCell1.lastCall.args[0].value).to.equal('usd gbp');
+        expect(valueParser.callCount).to.equal(1);
+        expect(renderEditCell.lastCall.args[0].value).to.equal('usd gbp');
       });
 
       it('should return true if no preProcessEditCellProps is defined', async () => {
@@ -200,8 +230,9 @@ describe('<DataGridPro /> - Row editing', () => {
       });
 
       it('should set isProcessingProps to true before calling preProcessEditCellProps', async () => {
-        column1Props.preProcessEditCellProps = () => new Promise(() => {});
-        render(<TestCase />);
+        const preProcessEditCellProps = () => new Promise(() => {});
+        const renderEditCell = spy(defaultRenderEditCell);
+        render(<TestCase column1Props={{ preProcessEditCellProps, renderEditCell }} />);
         act(() => apiRef.current.startRowEditMode({ id: 0 }));
         await act(
           () =>
@@ -210,23 +241,24 @@ describe('<DataGridPro /> - Row editing', () => {
               resolve();
             }),
         );
-        expect(renderEditCell1.lastCall.args[0].isProcessingProps).to.equal(true);
+        expect(renderEditCell.lastCall.args[0].isProcessingProps).to.equal(true);
       });
 
       it('should call all preProcessEditCellProps with the correct params', async () => {
-        column1Props.preProcessEditCellProps = spy(
-          ({ props }: GridPreProcessEditCellProps) => props,
-        );
-        column2Props.preProcessEditCellProps = spy(
-          ({ props }: GridPreProcessEditCellProps) => props,
+        const preProcessEditCellProps1 = spy(({ props }: GridPreProcessEditCellProps) => props);
+        const preProcessEditCellProps2 = spy(({ props }: GridPreProcessEditCellProps) => props);
+        render(
+          <TestCase
+            column1Props={{ preProcessEditCellProps: preProcessEditCellProps1 }}
+            column2Props={{ preProcessEditCellProps: preProcessEditCellProps2 }}
+          />,
         );
-        render(<TestCase />);
         act(() => apiRef.current.startRowEditMode({ id: 0 }));
         await act(() =>
           apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
         );
 
-        const args1 = column1Props.preProcessEditCellProps.lastCall.args[0];
+        const args1 = preProcessEditCellProps1.lastCall.args[0];
         expect(args1.id).to.equal(0);
         expect(args1.row).to.deep.equal(defaultData.rows[0]);
         expect(args1.hasChanged).to.equal(true);
@@ -237,7 +269,7 @@ describe('<DataGridPro /> - Row editing', () => {
           changeReason: 'setEditCellValue',
         });
 
-        const args2 = column2Props.preProcessEditCellProps.lastCall.args[0];
+        const args2 = preProcessEditCellProps2.lastCall.args[0];
         expect(args2.id).to.equal(0);
         expect(args2.row).to.deep.equal(defaultData.rows[0]);
         expect(args2.hasChanged).to.equal(false);
@@ -249,46 +281,62 @@ describe('<DataGridPro /> - Row editing', () => {
       });
 
       it('should pass to renderEditCell the props returned by preProcessEditCellProps', async () => {
-        column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
+        const renderEditCell = spy(defaultRenderEditCell);
+        const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
           ...props,
           foo: 'bar',
         });
-        render(<TestCase />);
+        render(<TestCase column1Props={{ preProcessEditCellProps, renderEditCell }} />);
         act(() => apiRef.current.startRowEditMode({ id: 0 }));
-        expect(renderEditCell1.lastCall.args[0].foo).to.equal(undefined);
+        expect(renderEditCell.lastCall.args[0].foo).to.equal(undefined);
         await act(() =>
           apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
         );
-        expect(renderEditCell1.lastCall.args[0].foo).to.equal('bar');
+        expect(renderEditCell.lastCall.args[0].foo).to.equal('bar');
       });
 
       it('should not pass to renderEditCell the value returned by preProcessEditCellProps', async () => {
-        column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
+        const renderEditCell = spy(defaultRenderEditCell);
+        const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
           ...props,
           value: 'foobar',
         });
-        render(<TestCase />);
+        render(<TestCase column1Props={{ preProcessEditCellProps, renderEditCell }} />);
         act(() => apiRef.current.startRowEditMode({ id: 0 }));
-        expect(renderEditCell1.lastCall.args[0].value).to.equal('USDGBP');
+        expect(renderEditCell.lastCall.args[0].value).to.equal('USDGBP');
         await act(() =>
           apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
         );
-        expect(renderEditCell1.lastCall.args[0].value).to.equal('USD GBP');
+        expect(renderEditCell.lastCall.args[0].value).to.equal('USD GBP');
       });
 
       it('should set isProcessingProps to false after calling preProcessEditCellProps', async () => {
         let resolve1: () => void;
         let resolve2: () => void;
-        column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
+        const renderEditCell1 = spy(defaultRenderEditCell);
+        const renderEditCell2 = spy(defaultRenderEditCell);
+
+        const preProcessEditCellProps1 = ({ props }: GridPreProcessEditCellProps) =>
           new Promise((resolve) => {
             resolve1 = () => resolve(props);
           });
-        column2Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
+        const preProcessEditCellProps2 = ({ props }: GridPreProcessEditCellProps) =>
           new Promise((resolve) => {
             resolve2 = () => resolve(props);
           });
 
-        render(<TestCase />);
+        render(
+          <TestCase
+            column1Props={{
+              preProcessEditCellProps: preProcessEditCellProps1,
+              renderEditCell: renderEditCell1,
+            }}
+            column2Props={{
+              preProcessEditCellProps: preProcessEditCellProps2,
+              renderEditCell: renderEditCell2,
+            }}
+          />,
+        );
         act(() => apiRef.current.startRowEditMode({ id: 0 }));
         let promise: Promise<boolean>;
         await act(
@@ -312,11 +360,11 @@ describe('<DataGridPro /> - Row editing', () => {
       });
 
       it('should return false if preProcessEditCellProps sets an error', async () => {
-        column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
+        const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
           ...props,
           error: true,
         });
-        render(<TestCase />);
+        render(<TestCase column1Props={{ preProcessEditCellProps }} />);
         act(() => apiRef.current.startRowEditMode({ id: 0 }));
         expect(
           await act(() =>
@@ -329,13 +377,13 @@ describe('<DataGridPro /> - Row editing', () => {
         ).to.equal(false);
       });
 
-      it('should return false if the cell left the edit mode while calling preProcessEditCellProps', (done) => {
+      it('should return false if the cell left the edit mode while calling preProcessEditCellProps', async () => {
         let resolveCallback: () => void;
-        column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
+        const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
           new Promise((resolve) => {
             resolveCallback = () => resolve(props);
           });
-        render(<TestCase />);
+        render(<TestCase column1Props={{ preProcessEditCellProps }} />);
         act(() => apiRef.current.startRowEditMode({ id: 0 }));
 
         let promise: Promise<boolean>;
@@ -347,11 +395,6 @@ describe('<DataGridPro /> - Row editing', () => {
           }) as Promise<boolean>;
         });
 
-        promise!.then((result) => {
-          expect(result).to.equal(false);
-          done();
-        });
-
         act(() =>
           apiRef.current.stopRowEditMode({
             id: 0,
@@ -360,16 +403,20 @@ describe('<DataGridPro /> - Row editing', () => {
         );
 
         resolveCallback!();
+
+        expect(await act(async () => promise)).to.equal(false);
       });
 
       describe('with debounceMs > 0', () => {
         clock.withFakeTimers();
 
         it('should debounce multiple changes if debounceMs > 0', () => {
-          render(<TestCase />);
+          const renderEditCell = spy(defaultRenderEditCell);
+
+          render(<TestCase column1Props={{ renderEditCell }} />);
           act(() => apiRef.current.startRowEditMode({ id: 0 }));
-          expect(renderEditCell1.lastCall.args[0].value).to.equal('USDGBP');
-          renderEditCell1.resetHistory();
+          expect(renderEditCell.lastCall.args[0].value).to.equal('USDGBP');
+          renderEditCell.resetHistory();
           act(() => {
             apiRef.current.setEditCellValue({
               id: 0,
@@ -378,7 +425,7 @@ describe('<DataGridPro /> - Row editing', () => {
               debounceMs: 100,
             });
           });
-          expect(renderEditCell1.callCount).to.equal(0);
+          expect(renderEditCell.callCount).to.equal(0);
           act(() => {
             apiRef.current.setEditCellValue({
               id: 0,
@@ -387,10 +434,10 @@ describe('<DataGridPro /> - Row editing', () => {
               debounceMs: 100,
             });
           });
-          expect(renderEditCell1.callCount).to.equal(0);
+          expect(renderEditCell.callCount).to.equal(0);
           clock.tick(100);
-          expect(renderEditCell1.callCount).not.to.equal(0);
-          expect(renderEditCell1.lastCall.args[0].value).to.equal('USD GBP');
+          expect(renderEditCell.callCount).not.to.equal(0);
+          expect(renderEditCell.lastCall.args[0].value).to.equal('USD GBP');
         });
       });
     });
@@ -405,11 +452,11 @@ describe('<DataGridPro /> - Row editing', () => {
 
       it('should update the row with the new value stored', async () => {
         render(<TestCase />);
-        act(() => apiRef.current.startRowEditMode({ id: 0 }));
-        await act(() =>
+        await act(async () => apiRef.current.startRowEditMode({ id: 0 }));
+        await act(async () =>
           apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
         );
-        act(() => apiRef.current.stopRowEditMode({ id: 0 }));
+        await act(async () => apiRef.current.stopRowEditMode({ id: 0 }));
         expect(getCell(0, 1).textContent).to.equal('USD GBP');
       });
 
@@ -425,12 +472,12 @@ describe('<DataGridPro /> - Row editing', () => {
 
       it('should do nothing if props are still being processed and ignoreModifications=false', async () => {
         let resolveCallback: () => void;
-        column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
+        const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
           new Promise((resolve) => {
             resolveCallback = () => resolve(props);
           });
 
-        render(<TestCase />);
+        render(<TestCase column1Props={{ preProcessEditCellProps }} />);
         act(() => apiRef.current.startRowEditMode({ id: 0 }));
 
         let promise: Promise<boolean>;
@@ -453,11 +500,11 @@ describe('<DataGridPro /> - Row editing', () => {
       });
 
       it('should do nothing if props of any column contains error=true', async () => {
-        column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
+        const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
           ...props,
           error: true,
         });
-        render(<TestCase />);
+        render(<TestCase column1Props={{ preProcessEditCellProps }} />);
         act(() => apiRef.current.startRowEditMode({ id: 0 }));
         await act(() =>
           apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
@@ -467,12 +514,17 @@ describe('<DataGridPro /> - Row editing', () => {
       });
 
       it('should keep mode=edit if props of any column contains error=true', async () => {
-        column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
+        const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
           ...props,
           error: true,
         });
         const onRowModesModelChange = spy();
-        render(<TestCase onRowModesModelChange={onRowModesModelChange} />);
+        render(
+          <TestCase
+            onRowModesModelChange={onRowModesModelChange}
+            column1Props={{ preProcessEditCellProps }}
+          />,
+        );
         act(() => apiRef.current.startRowEditMode({ id: 0 }));
         await act(() =>
           apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
@@ -482,11 +534,11 @@ describe('<DataGridPro /> - Row editing', () => {
       });
 
       it('should allow a 2nd call if the first call was when error=true', async () => {
-        column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
+        const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
           ...props,
           error: props.value.length === 0,
         });
-        render(<TestCase />);
+        render(<TestCase column1Props={{ preProcessEditCellProps }} />);
         act(() => apiRef.current.startRowEditMode({ id: 0 }));
 
         await act(() =>
@@ -612,16 +664,22 @@ describe('<DataGridPro /> - Row editing', () => {
       });
 
       it('should pass the new value through all value setters before calling processRowUpdate', async () => {
-        column1Props.valueSetter = spy<GridValueSetter>((value, row) => ({
+        const valueSetter1 = spy<GridValueSetter>((value, row) => ({
           ...row,
           _currencyPair: value,
         }));
-        column2Props.valueSetter = spy<GridValueSetter>((value, row) => ({
+        const valueSetter2 = spy<GridValueSetter>((value, row) => ({
           ...row,
           _price1M: value,
         }));
         const processRowUpdate = spy((newRow) => newRow);
-        render(<TestCase processRowUpdate={processRowUpdate} />);
+        render(
+          <TestCase
+            processRowUpdate={processRowUpdate}
+            column1Props={{ valueSetter: valueSetter1 }}
+            column2Props={{ valueSetter: valueSetter2 }}
+          />,
+        );
         act(() => apiRef.current.startRowEditMode({ id: 0 }));
         await act(() =>
           apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
@@ -635,11 +693,11 @@ describe('<DataGridPro /> - Row editing', () => {
           price1M: 1,
           _price1M: 1,
         });
-        expect(column1Props.valueSetter.lastCall.args[0]).to.equal('USD GBP');
-        expect(column1Props.valueSetter.lastCall.args[1]).to.deep.equal(defaultData.rows[0]);
+        expect(valueSetter1.lastCall.args[0]).to.equal('USD GBP');
+        expect(valueSetter1.lastCall.args[1]).to.deep.equal(defaultData.rows[0]);
 
-        expect(column2Props.valueSetter.lastCall.args[0]).to.equal(1);
-        expect(column2Props.valueSetter.lastCall.args[1]).to.deep.equal({
+        expect(valueSetter2.lastCall.args[0]).to.equal(1);
+        expect(valueSetter2.lastCall.args[1]).to.deep.equal({
           // Ensure that the row contains the values from the previous setter);
           ...defaultData.rows[0],
           currencyPair: 'USDGBP',
@@ -727,7 +785,11 @@ describe('<DataGridPro /> - Row editing', () => {
 
         it('should run all pending value mutations before calling processRowUpdate', async () => {
           const processRowUpdate = spy((newRow) => newRow);
-          render(<TestCase processRowUpdate={processRowUpdate} />);
+          const renderEditCell = spy(defaultRenderEditCell);
+
+          render(
+            <TestCase processRowUpdate={processRowUpdate} column1Props={{ renderEditCell }} />,
+          );
           act(() => apiRef.current.startRowEditMode({ id: 0 }));
           await act(async () => {
             apiRef.current.setEditCellValue({
@@ -739,7 +801,7 @@ describe('<DataGridPro /> - Row editing', () => {
           });
           act(() => apiRef.current.stopRowEditMode({ id: 0 }));
           await act(() => Promise.resolve());
-          expect(renderEditCell1.lastCall.args[0].value).to.equal('USD GBP');
+          expect(renderEditCell.lastCall.args[0].value).to.equal('USD GBP');
           expect(processRowUpdate.lastCall.args[0].currencyPair).to.equal('USD GBP');
         });
       });
@@ -973,11 +1035,11 @@ describe('<DataGridPro /> - Row editing', () => {
       });
 
       it(`should not publish 'rowEditStop' if field has error`, async () => {
-        column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
+        const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
           ...props,
           error: true,
         });
-        render(<TestCase />);
+        render(<TestCase column1Props={{ preProcessEditCellProps }} />);
         const listener = spy();
         apiRef.current.subscribeEvent('rowEditStop', listener);
         const cell = getCell(0, 1);
@@ -1008,8 +1070,8 @@ describe('<DataGridPro /> - Row editing', () => {
       });
 
       it('should call stopRowEditMode with ignoreModifications=false if the props are being processed', async () => {
-        column1Props.preProcessEditCellProps = () => new Promise(() => {});
-        render(<TestCase />);
+        const preProcessEditCellProps = () => new Promise(() => {});
+        render(<TestCase column1Props={{ preProcessEditCellProps }} />);
         const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode');
         fireEvent.doubleClick(getCell(0, 1));
         act(() => {
@@ -1036,11 +1098,11 @@ describe('<DataGridPro /> - Row editing', () => {
       });
 
       it(`should publish 'rowEditStop' even if field has error`, async () => {
-        column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
+        const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
           ...props,
           error: true,
         });
-        render(<TestCase />);
+        render(<TestCase column1Props={{ preProcessEditCellProps }} />);
         const listener = spy();
         apiRef.current.subscribeEvent('rowEditStop', listener);
         const cell = getCell(0, 1);
@@ -1085,11 +1147,11 @@ describe('<DataGridPro /> - Row editing', () => {
       });
 
       it(`should not publish 'rowEditStop' if field has error`, async () => {
-        column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
+        const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
           ...props,
           error: true,
         });
-        render(<TestCase />);
+        render(<TestCase column1Props={{ preProcessEditCellProps }} />);
         const listener = spy();
         apiRef.current.subscribeEvent('rowEditStop', listener);
         const cell = getCell(0, 1);
@@ -1120,8 +1182,8 @@ describe('<DataGridPro /> - Row editing', () => {
       });
 
       it('should call stopRowEditMode with ignoreModifications=false if the props are being processed', async () => {
-        column1Props.preProcessEditCellProps = () => new Promise(() => {});
-        render(<TestCase />);
+        const preProcessEditCellProps = () => new Promise(() => {});
+        render(<TestCase column1Props={{ preProcessEditCellProps }} />);
         const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode');
         const cell = getCell(0, 1);
         fireUserEvent.mousePress(cell);
@@ -1193,8 +1255,8 @@ describe('<DataGridPro /> - Row editing', () => {
       });
 
       it('should call stopRowEditMode with ignoreModifications=false if the props are being processed', async () => {
-        column1Props.preProcessEditCellProps = () => new Promise(() => {});
-        render(<TestCase />);
+        const preProcessEditCellProps = () => new Promise(() => {});
+        render(<TestCase column1Props={{ preProcessEditCellProps }} />);
         const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode');
         const cell = getCell(0, 2);
         fireUserEvent.mousePress(cell);
@@ -1329,11 +1391,11 @@ describe('<DataGridPro /> - Row editing', () => {
     });
 
     it('should not mutate the rowModesModel prop if props of any column contains error=true', async () => {
-      column1Props.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
+      const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
         ...props,
         error: true,
       });
-      const { setProps } = render(<TestCase />);
+      const { setProps } = render(<TestCase column1Props={{ preProcessEditCellProps }} />);
       const cell = getCell(0, 1);
       fireEvent.mouseUp(cell);
       fireEvent.click(cell);
@@ -1398,10 +1460,10 @@ describe('<DataGridPro /> - Row editing', () => {
         </Portal>
       );
     }
-    column1Props.renderEditCell = (props: GridRenderEditCellParams) => (
+    const renderEditCell = (props: GridRenderEditCellParams) => (
       <PortaledEditComponent {...props} />
     );
-    render(<TestCase />);
+    render(<TestCase column1Props={{ renderEditCell }} />);
     fireEvent.doubleClick(getCell(0, 1));
     const input = screen.getByTestId('input');
     expect(input).toHaveFocus();
@@ -1423,10 +1485,10 @@ describe('<DataGridPro /> - Row editing', () => {
         </Portal>
       );
     }
-    column2Props.renderEditCell = (props: GridRenderEditCellParams) => (
+    const renderEditCell = (props: GridRenderEditCellParams) => (
       <PortaledEditComponent {...props} />
     );
-    render(<TestCase />);
+    render(<TestCase column2Props={{ renderEditCell }} />);
     fireEvent.doubleClick(getCell(0, 2));
     const input = screen.getByTestId('input');
     expect(input).toHaveFocus();

From 5962959e19c7d3b5d0244511b8431cd9b2f674e3 Mon Sep 17 00:00:00 2001
From: Jose Quintas <juniorquintas@gmail.com>
Date: Fri, 11 Oct 2024 14:37:58 +0200
Subject: [PATCH 2/5] Fix weird prop logic

---
 .../tests/cellEditing.DataGridPro.test.tsx    | 131 +++++++++---------
 1 file changed, 66 insertions(+), 65 deletions(-)

diff --git a/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx
index 61eb25906561..bd1f453e8ee6 100644
--- a/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx
@@ -28,9 +28,7 @@ describe('<DataGridPro /> - Cell editing', () => {
     props: GridRenderEditCellParams,
   ) => React.ReactNode);
 
-  let columnProps: any = {};
-
-  function TestCase(props: Partial<DataGridProProps>) {
+  function TestCase(props: Partial<DataGridProProps> & { columnProps?: Record<string, any> }) {
     apiRef = useGridApiRef();
     return (
       <div style={{ width: 300, height: 300 }}>
@@ -39,7 +37,7 @@ describe('<DataGridPro /> - Cell editing', () => {
           {...defaultData}
           columns={defaultData.columns.map((column) =>
             column.field === 'currencyPair'
-              ? { ...column, renderEditCell, editable: true, ...columnProps }
+              ? { ...column, renderEditCell, editable: true, ...(props.columnProps ?? {}) }
               : column,
           )}
           {...props}
@@ -50,7 +48,6 @@ describe('<DataGridPro /> - Cell editing', () => {
 
   afterEach(() => {
     renderEditCell.resetHistory();
-    columnProps = {};
   });
 
   describe('apiRef', () => {
@@ -112,8 +109,7 @@ describe('<DataGridPro /> - Cell editing', () => {
           ...row,
           currencyPair: value.trim(),
         });
-        columnProps.valueSetter = valueSetter;
-        render(<TestCase />);
+        render(<TestCase columnProps={{ valueSetter }} />);
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         expect(renderEditCell.lastCall.args[0].row).to.deep.equal(defaultData.rows[0]);
         await act(() =>
@@ -126,14 +122,14 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should pass the new value through the value parser if defined', async () => {
-        columnProps.valueParser = spy((value) => value.toLowerCase());
-        render(<TestCase />);
+        const valueParser = spy((value) => value.toLowerCase());
+        render(<TestCase columnProps={{ valueParser }} />);
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
-        expect(columnProps.valueParser.callCount).to.equal(0);
+        expect(valueParser.callCount).to.equal(0);
         await act(() =>
           apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
         );
-        expect(columnProps.valueParser.callCount).to.equal(1);
+        expect(valueParser.callCount).to.equal(1);
         expect(renderEditCell.lastCall.args[0].value).to.equal('usd gbp');
       });
 
@@ -148,10 +144,8 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should set isProcessingProps to true before calling preProcessEditCellProps', async () => {
-        columnProps.preProcessEditCellProps = spy(
-          ({ props }: GridPreProcessEditCellProps) => props,
-        );
-        render(<TestCase />);
+        const preProcessEditCellProps = spy(({ props }: GridPreProcessEditCellProps) => props);
+        render(<TestCase columnProps={{ preProcessEditCellProps }} />);
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         let promise: Promise<boolean> | null = null;
         // We want to flush updates before preProcessEditCellProps resolves
@@ -167,10 +161,8 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should call preProcessEditCellProps with the correct params', async () => {
-        columnProps.preProcessEditCellProps = spy(
-          ({ props }: GridPreProcessEditCellProps) => props,
-        );
-        render(<TestCase />);
+        const preProcessEditCellProps = spy(({ props }: GridPreProcessEditCellProps) => props);
+        render(<TestCase columnProps={{ preProcessEditCellProps }} />);
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         await act(() =>
           apiRef.current.setEditCellValue({
@@ -179,7 +171,7 @@ describe('<DataGridPro /> - Cell editing', () => {
             value: 'USD GBP',
           }),
         );
-        const args = columnProps.preProcessEditCellProps.lastCall.args[0];
+        const args = preProcessEditCellProps.lastCall.args[0];
         expect(args.id).to.equal(0);
         expect(args.row).to.deep.equal(defaultData.rows[0]);
         expect(args.hasChanged).to.equal(true);
@@ -192,14 +184,19 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should not publish onCellEditStop if field has error', async () => {
-        columnProps.preProcessEditCellProps = spy(({ props }: GridPreProcessEditCellProps) => ({
+        const preProcessEditCellProps = spy(({ props }: GridPreProcessEditCellProps) => ({
           ...props,
           error: true,
         }));
 
         const handleEditCellStop = spy();
 
-        render(<TestCase onCellEditStop={handleEditCellStop} />);
+        render(
+          <TestCase
+            onCellEditStop={handleEditCellStop}
+            columnProps={{ preProcessEditCellProps }}
+          />,
+        );
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         await act(() =>
           apiRef.current.setEditCellValue({
@@ -217,11 +214,11 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should pass to renderEditCell the props returned by preProcessEditCellProps', async () => {
-        columnProps.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
+        const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
           ...props,
           foo: 'bar',
         });
-        render(<TestCase />);
+        render(<TestCase columnProps={{ preProcessEditCellProps }} />);
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         expect(renderEditCell.lastCall.args[0].foo).to.equal(undefined);
         await act(() =>
@@ -231,11 +228,11 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should not pass to renderEditCell the value returned by preProcessEditCellProps', async () => {
-        columnProps.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
+        const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
           ...props,
           value: 'foobar',
         });
-        render(<TestCase />);
+        render(<TestCase columnProps={{ preProcessEditCellProps }} />);
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         expect(renderEditCell.lastCall.args[0].value).to.equal('USDGBP');
         await act(() =>
@@ -245,8 +242,8 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should set isProcessingProps to false after calling preProcessEditCellProps', async () => {
-        columnProps.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => props;
-        render(<TestCase />);
+        const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => props;
+        render(<TestCase columnProps={{ preProcessEditCellProps }} />);
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         let promise: Promise<boolean> | null = null;
         // We want to flush updates before preProcessEditCellProps resolves
@@ -263,11 +260,11 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should return false if preProcessEditCellProps sets an error', async () => {
-        columnProps.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
+        const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
           ...props,
           error: true,
         });
-        render(<TestCase />);
+        render(<TestCase columnProps={{ preProcessEditCellProps }} />);
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         expect(
           await act(() =>
@@ -280,13 +277,13 @@ describe('<DataGridPro /> - Cell editing', () => {
         ).to.equal(false);
       });
 
-      it('should return false if the cell left the edit mode while calling preProcessEditCellProps', (done) => {
+      it('should return false if the cell left the edit mode while calling preProcessEditCellProps', async () => {
         let resolveCallback: () => void;
-        columnProps.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
+        const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
           new Promise((resolve) => {
             resolveCallback = () => resolve(props);
           });
-        render(<TestCase />);
+        render(<TestCase columnProps={{ preProcessEditCellProps }} />);
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
 
         let promise: Promise<boolean>;
@@ -298,11 +295,6 @@ describe('<DataGridPro /> - Cell editing', () => {
           }) as Promise<boolean>;
         });
 
-        promise!.then((result) => {
-          expect(result).to.equal(false);
-          done();
-        });
-
         act(() =>
           apiRef.current.stopCellEditMode({
             id: 0,
@@ -312,6 +304,8 @@ describe('<DataGridPro /> - Cell editing', () => {
         );
 
         resolveCallback!();
+
+        expect(await act(async () => promise)).to.equal(false);
       });
 
       describe('with debounceMs > 0', () => {
@@ -363,11 +357,11 @@ describe('<DataGridPro /> - Cell editing', () => {
 
       it('should update the row with the new value stored', async () => {
         render(<TestCase />);
-        act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
-        await act(() =>
+        await act(async () => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
+        await act(async () =>
           apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
         );
-        act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' }));
+        await act(async () => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' }));
         expect(getCell(0, 1).textContent).to.equal('USD GBP');
       });
 
@@ -389,11 +383,11 @@ describe('<DataGridPro /> - Cell editing', () => {
 
       it('should do nothing if props are still being processed and ignoreModifications=false', async () => {
         let resolveCallback: () => void;
-        columnProps.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
+        const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) =>
           new Promise((resolve) => {
             resolveCallback = () => resolve(props);
           });
-        render(<TestCase />);
+        render(<TestCase columnProps={{ preProcessEditCellProps }} />);
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
 
         let promise: Promise<boolean>;
@@ -415,11 +409,11 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should do nothing if props contain error=true', async () => {
-        columnProps.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
+        const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
           ...props,
           error: true,
         });
-        render(<TestCase />);
+        render(<TestCase columnProps={{ preProcessEditCellProps }} />);
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         await act(() =>
           apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
@@ -429,12 +423,17 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should keep mode=edit if props of any column contains error=true', async () => {
-        columnProps.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
+        const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
           ...props,
           error: true,
         });
         const onCellModesModelChange = spy();
-        render(<TestCase onCellModesModelChange={onCellModesModelChange} />);
+        render(
+          <TestCase
+            onCellModesModelChange={onCellModesModelChange}
+            columnProps={{ preProcessEditCellProps }}
+          />,
+        );
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         await act(() =>
           apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
@@ -446,11 +445,11 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should allow a 2nd call if the first call was when error=true', async () => {
-        columnProps.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
+        const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
           ...props,
           error: props.value.length === 0,
         });
-        render(<TestCase />);
+        render(<TestCase columnProps={{ preProcessEditCellProps }} />);
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
 
         await act(() =>
@@ -580,12 +579,12 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should pass the new value through the value setter before calling processRowUpdate', async () => {
-        columnProps.valueSetter = spy<GridValueSetter>((value, row) => ({
+        const valueSetter = spy<GridValueSetter>((value, row) => ({
           ...row,
           _currencyPair: value,
         }));
         const processRowUpdate = spy(() => new Promise(() => {}));
-        render(<TestCase processRowUpdate={processRowUpdate} />);
+        render(<TestCase processRowUpdate={processRowUpdate} columnProps={{ valueSetter }} />);
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         await act(() =>
           apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }),
@@ -596,13 +595,13 @@ describe('<DataGridPro /> - Cell editing', () => {
           currencyPair: 'USDGBP',
           _currencyPair: 'USD GBP',
         });
-        expect(columnProps.valueSetter.lastCall.args[0]).to.equal('USD GBP');
-        expect(columnProps.valueSetter.lastCall.args[1]).to.deep.equal(defaultData.rows[0]);
+        expect(valueSetter.lastCall.args[0]).to.equal('USD GBP');
+        expect(valueSetter.lastCall.args[1]).to.deep.equal(defaultData.rows[0]);
       });
 
       it('should move focus to the cell below when cellToFocusAfter=below', async () => {
-        columnProps.renderEditCell = (props: GridCellProps) => <CustomEditComponent {...props} />;
-        render(<TestCase />);
+        const renderEditCellProp = (props: GridCellProps) => <CustomEditComponent {...props} />;
+        render(<TestCase columnProps={{ renderEditCell: renderEditCellProp }} />);
 
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         expect(getCell(0, 1).querySelector('input')).toHaveFocus();
@@ -617,7 +616,7 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should move focus to the cell on the right when cellToFocusAfter=right', async () => {
-        columnProps.renderEditCell = (props: GridCellProps) => <CustomEditComponent {...props} />;
+        const renderEditCellProp = (props: GridCellProps) => <CustomEditComponent {...props} />;
         render(
           <TestCase
             {...getBasicGridData(1, 3)}
@@ -626,6 +625,7 @@ describe('<DataGridPro /> - Cell editing', () => {
               { field: 'currencyPair', editable: true },
               { field: 'price1M', editable: true },
             ]}
+            columnProps={{ renderEditCell: renderEditCellProp }}
           />,
         );
 
@@ -642,7 +642,7 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should move focus to the cell on the left when cellToFocusAfter=left', async () => {
-        columnProps.renderEditCell = (props: GridCellProps) => <CustomEditComponent {...props} />;
+        const renderEditCellProp = (props: GridCellProps) => <CustomEditComponent {...props} />;
         render(
           <TestCase
             {...getBasicGridData(1, 3)}
@@ -651,6 +651,7 @@ describe('<DataGridPro /> - Cell editing', () => {
               { field: 'currencyPair', editable: true },
               { field: 'price1M', editable: true },
             ]}
+            columnProps={{ renderEditCell: renderEditCellProp }}
           />,
         );
 
@@ -1011,8 +1012,8 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should call stopCellEditMode with ignoreModifications=false if the props are being processed', async () => {
-        columnProps.preProcessEditCellProps = () => new Promise(() => {});
-        render(<TestCase />);
+        const preProcessEditCellProps = () => new Promise(() => {});
+        render(<TestCase columnProps={{ preProcessEditCellProps }} />);
         const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode');
         fireEvent.doubleClick(getCell(0, 1));
         await act(
@@ -1088,8 +1089,8 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should call stopCellEditMode with ignoreModifications=false if the props are being processed', async () => {
-        columnProps.preProcessEditCellProps = () => new Promise(() => {});
-        render(<TestCase />);
+        const preProcessEditCellProps = () => new Promise(() => {});
+        render(<TestCase columnProps={{ preProcessEditCellProps }} />);
         const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode');
         const cell = getCell(0, 1);
         fireUserEvent.mousePress(cell);
@@ -1137,8 +1138,8 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should call stopCellEditMode with ignoreModifications=false if the props are being processed', async () => {
-        columnProps.preProcessEditCellProps = () => new Promise(() => {});
-        render(<TestCase />);
+        const preProcessEditCellProps = () => new Promise(() => {});
+        render(<TestCase columnProps={{ preProcessEditCellProps }} />);
         const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode');
         const cell = getCell(0, 1);
         fireUserEvent.mousePress(cell);
@@ -1240,11 +1241,11 @@ describe('<DataGridPro /> - Cell editing', () => {
     });
 
     it('should not mutate the cellModesModel prop if props of any column contains error=true', async () => {
-      columnProps.preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
+      const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => ({
         ...props,
         error: true,
       });
-      const { setProps } = render(<TestCase />);
+      const { setProps } = render(<TestCase columnProps={{ preProcessEditCellProps }} />);
       const cell = getCell(0, 1);
       fireEvent.mouseUp(cell);
       fireEvent.click(cell);

From b056b21408f9901f7d73e6c1b12990a4a99571e5 Mon Sep 17 00:00:00 2001
From: Jose Quintas <juniorquintas@gmail.com>
Date: Fri, 11 Oct 2024 14:45:54 +0200
Subject: [PATCH 3/5] Also change rendereditcell

---
 .../tests/cellEditing.DataGridPro.test.tsx    | 73 ++++++++++++++-----
 1 file changed, 53 insertions(+), 20 deletions(-)

diff --git a/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx
index bd1f453e8ee6..3fa98b164baa 100644
--- a/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx
@@ -24,12 +24,13 @@ describe('<DataGridPro /> - Cell editing', () => {
 
   const defaultData = getBasicGridData(4, 2);
 
-  const renderEditCell = spy((() => <input />) as (
+  const defaultRenderEditCell = (() => <input />) as (
     props: GridRenderEditCellParams,
-  ) => React.ReactNode);
+  ) => React.ReactNode;
 
   function TestCase(props: Partial<DataGridProProps> & { columnProps?: Record<string, any> }) {
     apiRef = useGridApiRef();
+    const { columnProps = {}, ...rest } = props;
     return (
       <div style={{ width: 300, height: 300 }}>
         <DataGridPro
@@ -37,19 +38,20 @@ describe('<DataGridPro /> - Cell editing', () => {
           {...defaultData}
           columns={defaultData.columns.map((column) =>
             column.field === 'currencyPair'
-              ? { ...column, renderEditCell, editable: true, ...(props.columnProps ?? {}) }
+              ? {
+                  ...column,
+                  renderEditCell: defaultRenderEditCell,
+                  editable: true,
+                  ...columnProps,
+                }
               : column,
           )}
-          {...props}
+          {...rest}
         />
       </div>
     );
   }
 
-  afterEach(() => {
-    renderEditCell.resetHistory();
-  });
-
   describe('apiRef', () => {
     describe('startCellEditMode', () => {
       it('should throw when the cell is already in edit mode', () => {
@@ -68,14 +70,19 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should render the component given in renderEditCell', () => {
-        render(<TestCase />);
+        const renderEditCell = spy(defaultRenderEditCell);
+
+        render(<TestCase columnProps={{ renderEditCell }} />);
         expect(renderEditCell.callCount).to.equal(0);
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         expect(renderEditCell.callCount).not.to.equal(0);
       });
 
       it('should pass props to renderEditCell', () => {
-        render(<TestCase />);
+        const renderEditCell = spy(defaultRenderEditCell);
+
+        render(<TestCase columnProps={{ renderEditCell }} />);
+
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         expect(renderEditCell.lastCall.args[0].value).to.equal('USDGBP');
         expect(renderEditCell.lastCall.args[0].error).to.equal(false);
@@ -83,7 +90,10 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should empty the value if deleteValue is true', () => {
-        render(<TestCase />);
+        const renderEditCell = spy(defaultRenderEditCell);
+
+        render(<TestCase columnProps={{ renderEditCell }} />);
+
         act(() =>
           apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair', deleteValue: true }),
         );
@@ -95,7 +105,10 @@ describe('<DataGridPro /> - Cell editing', () => {
 
     describe('setEditCellValue', () => {
       it('should update the value prop given to renderEditCell', async () => {
-        render(<TestCase />);
+        const renderEditCell = spy(defaultRenderEditCell);
+
+        render(<TestCase columnProps={{ renderEditCell }} />);
+
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         expect(renderEditCell.lastCall.args[0].value).to.equal('USDGBP');
         await act(() =>
@@ -109,7 +122,10 @@ describe('<DataGridPro /> - Cell editing', () => {
           ...row,
           currencyPair: value.trim(),
         });
-        render(<TestCase columnProps={{ valueSetter }} />);
+
+        const renderEditCell = spy(defaultRenderEditCell);
+
+        render(<TestCase columnProps={{ valueSetter, renderEditCell }} />);
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         expect(renderEditCell.lastCall.args[0].row).to.deep.equal(defaultData.rows[0]);
         await act(() =>
@@ -123,7 +139,10 @@ describe('<DataGridPro /> - Cell editing', () => {
 
       it('should pass the new value through the value parser if defined', async () => {
         const valueParser = spy((value) => value.toLowerCase());
-        render(<TestCase columnProps={{ valueParser }} />);
+        const renderEditCell = spy(defaultRenderEditCell);
+
+        render(<TestCase columnProps={{ valueParser, renderEditCell }} />);
+
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         expect(valueParser.callCount).to.equal(0);
         await act(() =>
@@ -145,7 +164,9 @@ describe('<DataGridPro /> - Cell editing', () => {
 
       it('should set isProcessingProps to true before calling preProcessEditCellProps', async () => {
         const preProcessEditCellProps = spy(({ props }: GridPreProcessEditCellProps) => props);
-        render(<TestCase columnProps={{ preProcessEditCellProps }} />);
+        const renderEditCell = spy(defaultRenderEditCell);
+
+        render(<TestCase columnProps={{ preProcessEditCellProps, renderEditCell }} />);
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         let promise: Promise<boolean> | null = null;
         // We want to flush updates before preProcessEditCellProps resolves
@@ -218,7 +239,9 @@ describe('<DataGridPro /> - Cell editing', () => {
           ...props,
           foo: 'bar',
         });
-        render(<TestCase columnProps={{ preProcessEditCellProps }} />);
+        const renderEditCell = spy(defaultRenderEditCell);
+
+        render(<TestCase columnProps={{ preProcessEditCellProps, renderEditCell }} />);
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         expect(renderEditCell.lastCall.args[0].foo).to.equal(undefined);
         await act(() =>
@@ -232,7 +255,9 @@ describe('<DataGridPro /> - Cell editing', () => {
           ...props,
           value: 'foobar',
         });
-        render(<TestCase columnProps={{ preProcessEditCellProps }} />);
+        const renderEditCell = spy(defaultRenderEditCell);
+
+        render(<TestCase columnProps={{ preProcessEditCellProps, renderEditCell }} />);
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         expect(renderEditCell.lastCall.args[0].value).to.equal('USDGBP');
         await act(() =>
@@ -243,7 +268,9 @@ describe('<DataGridPro /> - Cell editing', () => {
 
       it('should set isProcessingProps to false after calling preProcessEditCellProps', async () => {
         const preProcessEditCellProps = ({ props }: GridPreProcessEditCellProps) => props;
-        render(<TestCase columnProps={{ preProcessEditCellProps }} />);
+        const renderEditCell = spy(defaultRenderEditCell);
+
+        render(<TestCase columnProps={{ preProcessEditCellProps, renderEditCell }} />);
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         let promise: Promise<boolean> | null = null;
         // We want to flush updates before preProcessEditCellProps resolves
@@ -312,7 +339,11 @@ describe('<DataGridPro /> - Cell editing', () => {
         clock.withFakeTimers();
 
         it('should debounce multiple changes if debounceMs > 0', () => {
-          render(<TestCase />);
+          const renderEditCell = spy((() => <input />) as (
+            props: GridRenderEditCellParams,
+          ) => React.ReactNode);
+
+          render(<TestCase columnProps={{ renderEditCell }} />);
           act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
           expect(renderEditCell.lastCall.args[0].value).to.equal('USDGBP');
           renderEditCell.resetHistory();
@@ -669,7 +700,9 @@ describe('<DataGridPro /> - Cell editing', () => {
 
       it('should run all pending value mutations before calling processRowUpdate', async () => {
         const processRowUpdate = spy(() => new Promise(() => {}));
-        render(<TestCase processRowUpdate={processRowUpdate} />);
+        const renderEditCell = spy(defaultRenderEditCell);
+
+        render(<TestCase processRowUpdate={processRowUpdate} columnProps={{ renderEditCell }} />);
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
         await act(
           () =>

From db554b9154fc808b1c378f2e4d2db32488c38449 Mon Sep 17 00:00:00 2001
From: Jose Quintas <juniorquintas@gmail.com>
Date: Sat, 12 Oct 2024 00:14:23 +0200
Subject: [PATCH 4/5] fix issues with playwright scrollbar

---
 .../src/tests/columns.DataGridPro.test.tsx    | 57 +++++++++++--------
 1 file changed, 33 insertions(+), 24 deletions(-)

diff --git a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
index 3d6e0567771d..8cdac39175f0 100644
--- a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
@@ -165,12 +165,13 @@ describe('<DataGridPro /> - Columns', () => {
       fireEvent.doubleClick(separator);
       await microtasks();
       expect(onColumnWidthChange.callCount).to.be.at.least(2);
-      const widthArgs = onColumnWidthChange.args.map((arg) => arg[0].width);
-      const isWidth114Present = widthArgs.some((width) => width === 114);
-      expect(isWidth114Present).to.equal(true);
-      const colDefWidthArgs = onColumnWidthChange.args.map((arg) => arg[0].colDef.width);
-      const isColDefWidth114Present = colDefWidthArgs.some((width) => width === 114);
-      expect(isColDefWidth114Present).to.equal(true);
+      const widthArgs = onColumnWidthChange.args.map((arg) => Math.round(arg[0].width));
+      expect(widthArgs).to.deep.equal([120, 64]);
+      const colDefWidthArgs = onColumnWidthChange.args.map((arg) =>
+        Math.round(arg[0].colDef.width),
+      );
+      const isColDefWidth64Present = colDefWidthArgs.some((width) => width === 64);
+      expect(isColDefWidth64Present).to.equal(true);
     });
 
     it('should not affect other cell elements that are not part of the main DataGrid instance', () => {
@@ -449,52 +450,57 @@ describe('<DataGridPro /> - Columns', () => {
       },
       {
         id: 1,
-        brand: 'Adidas',
-      },
-      {
-        id: 2,
         brand: 'Puma',
       },
       {
-        id: 3,
+        id: 2,
         brand: 'Lululemon Athletica',
       },
     ];
-    const columns = [
-      { field: 'id', headerName: 'This is the ID column' },
-      { field: 'brand', headerName: 'This is the brand column' },
-    ];
-
-    const getWidths = () => {
-      return columns.map((_, i) => parseInt(getColumnHeaderCell(i).style.width, 10));
+    const buildColumns = () => {
+      const columns = [
+        { field: 'id', headerName: 'This is the ID column' },
+        { field: 'brand', headerName: 'This is the brand column' },
+      ];
+      const getWidths = () => {
+        return columns.map((_, i) => parseInt(getColumnHeaderCell(i).style.width, 10));
+      };
+      return {
+        columns,
+        getWidths,
+      };
     };
 
     it('should work through the API', async () => {
+      const { columns, getWidths } = buildColumns();
       render(<Test rows={rows} columns={columns} />);
       await apiRef.current.autosizeColumns();
       await microtasks();
-      expect(getWidths()).to.deep.equal([211, 233]);
+      expect(getWidths()).to.deep.equal([155, 177]);
     });
 
     it('should work through double-clicking the separator', async () => {
+      const { columns, getWidths } = buildColumns();
       render(<Test rows={rows} columns={columns} />);
       const separator = document.querySelectorAll(
         `.${gridClasses['columnSeparator--resizable']}`,
       )[1];
       fireEvent.doubleClick(separator);
       await microtasks();
-      expect(getWidths()).to.deep.equal([100, 233]);
+      expect(getWidths()).to.deep.equal([100, 177]);
     });
 
     it('should work on mount', async () => {
+      const { columns, getWidths } = buildColumns();
       render(<Test rows={rows} columns={columns} autosizeOnMount />);
       await microtasks(); /* first effect after render */
       await microtasks(); /* async autosize operation */
-      expect(getWidths()).to.deep.equal([211, 233]);
+      expect(getWidths()).to.deep.equal([155, 177]);
     });
 
     describe('options', () => {
       const autosize = async (options: GridAutosizeOptions | undefined, widths: number[]) => {
+        const { columns, getWidths } = buildColumns();
         render(<Test rows={rows} columns={columns} />);
         await apiRef.current.autosizeColumns({ includeHeaders: false, ...options });
         await microtasks();
@@ -502,11 +508,11 @@ describe('<DataGridPro /> - Columns', () => {
       };
 
       it('.columns works', async () => {
-        await autosize({ columns: [columns[0].field] }, [50, 100]);
+        await autosize({ columns: ['id'] }, [50, 100]);
       });
 
       it('.includeHeaders works', async () => {
-        await autosize({ includeHeaders: true }, [211, 233]);
+        await autosize({ includeHeaders: true }, [155, 177]);
       });
 
       it('.includeOutliers works', async () => {
@@ -518,7 +524,7 @@ describe('<DataGridPro /> - Columns', () => {
       });
 
       it('.expand works', async () => {
-        await autosize({ expand: true }, [134, 148]);
+        await autosize({ expand: true }, [101, 196]);
       });
     });
   });
@@ -536,6 +542,7 @@ describe('<DataGridPro /> - Columns', () => {
 
       act(() => apiRef.current.setColumnWidth('brand', 300));
       expect(gridColumnLookupSelector(apiRef).brand.computedWidth).to.equal(300);
+      // @ts-expect-error privateApi is not defined
       act(() => privateApi.current.requestPipeProcessorsApplication('hydrateColumns'));
       expect(gridColumnLookupSelector(apiRef).brand.computedWidth).to.equal(300);
     });
@@ -557,6 +564,7 @@ describe('<DataGridPro /> - Columns', () => {
       expect(gridColumnFieldsSelector(apiRef).indexOf('brand')).to.equal(2);
       act(() => apiRef.current.setColumnIndex('brand', 1));
       expect(gridColumnFieldsSelector(apiRef).indexOf('brand')).to.equal(1);
+      // @ts-expect-error privateApi is not defined
       act(() => privateApi.current.requestPipeProcessorsApplication('hydrateColumns'));
       expect(gridColumnFieldsSelector(apiRef).indexOf('brand')).to.equal(1);
     });
@@ -571,6 +579,7 @@ describe('<DataGridPro /> - Columns', () => {
 
       act(() => apiRef.current.updateColumns([{ field: 'id' }]));
       expect(gridColumnFieldsSelector(apiRef)).to.deep.equal(['__check__', 'brand', 'id']);
+      // @ts-expect-error privateApi is not defined
       act(() => privateApi.current.requestPipeProcessorsApplication('hydrateColumns'));
       expect(gridColumnFieldsSelector(apiRef)).to.deep.equal(['__check__', 'brand', 'id']);
     });

From 20a142fd7679761ad7e1863b8b5becf5f0f138ca Mon Sep 17 00:00:00 2001
From: Jose Quintas <juniorquintas@gmail.com>
Date: Mon, 14 Oct 2024 11:18:28 +0200
Subject: [PATCH 5/5] Revert "fix issues with playwright scrollbar"

This reverts commit db554b9154fc808b1c378f2e4d2db32488c38449.
---
 .../src/tests/columns.DataGridPro.test.tsx    | 57 ++++++++-----------
 1 file changed, 24 insertions(+), 33 deletions(-)

diff --git a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
index 8cdac39175f0..3d6e0567771d 100644
--- a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
@@ -165,13 +165,12 @@ describe('<DataGridPro /> - Columns', () => {
       fireEvent.doubleClick(separator);
       await microtasks();
       expect(onColumnWidthChange.callCount).to.be.at.least(2);
-      const widthArgs = onColumnWidthChange.args.map((arg) => Math.round(arg[0].width));
-      expect(widthArgs).to.deep.equal([120, 64]);
-      const colDefWidthArgs = onColumnWidthChange.args.map((arg) =>
-        Math.round(arg[0].colDef.width),
-      );
-      const isColDefWidth64Present = colDefWidthArgs.some((width) => width === 64);
-      expect(isColDefWidth64Present).to.equal(true);
+      const widthArgs = onColumnWidthChange.args.map((arg) => arg[0].width);
+      const isWidth114Present = widthArgs.some((width) => width === 114);
+      expect(isWidth114Present).to.equal(true);
+      const colDefWidthArgs = onColumnWidthChange.args.map((arg) => arg[0].colDef.width);
+      const isColDefWidth114Present = colDefWidthArgs.some((width) => width === 114);
+      expect(isColDefWidth114Present).to.equal(true);
     });
 
     it('should not affect other cell elements that are not part of the main DataGrid instance', () => {
@@ -450,57 +449,52 @@ describe('<DataGridPro /> - Columns', () => {
       },
       {
         id: 1,
-        brand: 'Puma',
+        brand: 'Adidas',
       },
       {
         id: 2,
+        brand: 'Puma',
+      },
+      {
+        id: 3,
         brand: 'Lululemon Athletica',
       },
     ];
-    const buildColumns = () => {
-      const columns = [
-        { field: 'id', headerName: 'This is the ID column' },
-        { field: 'brand', headerName: 'This is the brand column' },
-      ];
-      const getWidths = () => {
-        return columns.map((_, i) => parseInt(getColumnHeaderCell(i).style.width, 10));
-      };
-      return {
-        columns,
-        getWidths,
-      };
+    const columns = [
+      { field: 'id', headerName: 'This is the ID column' },
+      { field: 'brand', headerName: 'This is the brand column' },
+    ];
+
+    const getWidths = () => {
+      return columns.map((_, i) => parseInt(getColumnHeaderCell(i).style.width, 10));
     };
 
     it('should work through the API', async () => {
-      const { columns, getWidths } = buildColumns();
       render(<Test rows={rows} columns={columns} />);
       await apiRef.current.autosizeColumns();
       await microtasks();
-      expect(getWidths()).to.deep.equal([155, 177]);
+      expect(getWidths()).to.deep.equal([211, 233]);
     });
 
     it('should work through double-clicking the separator', async () => {
-      const { columns, getWidths } = buildColumns();
       render(<Test rows={rows} columns={columns} />);
       const separator = document.querySelectorAll(
         `.${gridClasses['columnSeparator--resizable']}`,
       )[1];
       fireEvent.doubleClick(separator);
       await microtasks();
-      expect(getWidths()).to.deep.equal([100, 177]);
+      expect(getWidths()).to.deep.equal([100, 233]);
     });
 
     it('should work on mount', async () => {
-      const { columns, getWidths } = buildColumns();
       render(<Test rows={rows} columns={columns} autosizeOnMount />);
       await microtasks(); /* first effect after render */
       await microtasks(); /* async autosize operation */
-      expect(getWidths()).to.deep.equal([155, 177]);
+      expect(getWidths()).to.deep.equal([211, 233]);
     });
 
     describe('options', () => {
       const autosize = async (options: GridAutosizeOptions | undefined, widths: number[]) => {
-        const { columns, getWidths } = buildColumns();
         render(<Test rows={rows} columns={columns} />);
         await apiRef.current.autosizeColumns({ includeHeaders: false, ...options });
         await microtasks();
@@ -508,11 +502,11 @@ describe('<DataGridPro /> - Columns', () => {
       };
 
       it('.columns works', async () => {
-        await autosize({ columns: ['id'] }, [50, 100]);
+        await autosize({ columns: [columns[0].field] }, [50, 100]);
       });
 
       it('.includeHeaders works', async () => {
-        await autosize({ includeHeaders: true }, [155, 177]);
+        await autosize({ includeHeaders: true }, [211, 233]);
       });
 
       it('.includeOutliers works', async () => {
@@ -524,7 +518,7 @@ describe('<DataGridPro /> - Columns', () => {
       });
 
       it('.expand works', async () => {
-        await autosize({ expand: true }, [101, 196]);
+        await autosize({ expand: true }, [134, 148]);
       });
     });
   });
@@ -542,7 +536,6 @@ describe('<DataGridPro /> - Columns', () => {
 
       act(() => apiRef.current.setColumnWidth('brand', 300));
       expect(gridColumnLookupSelector(apiRef).brand.computedWidth).to.equal(300);
-      // @ts-expect-error privateApi is not defined
       act(() => privateApi.current.requestPipeProcessorsApplication('hydrateColumns'));
       expect(gridColumnLookupSelector(apiRef).brand.computedWidth).to.equal(300);
     });
@@ -564,7 +557,6 @@ describe('<DataGridPro /> - Columns', () => {
       expect(gridColumnFieldsSelector(apiRef).indexOf('brand')).to.equal(2);
       act(() => apiRef.current.setColumnIndex('brand', 1));
       expect(gridColumnFieldsSelector(apiRef).indexOf('brand')).to.equal(1);
-      // @ts-expect-error privateApi is not defined
       act(() => privateApi.current.requestPipeProcessorsApplication('hydrateColumns'));
       expect(gridColumnFieldsSelector(apiRef).indexOf('brand')).to.equal(1);
     });
@@ -579,7 +571,6 @@ describe('<DataGridPro /> - Columns', () => {
 
       act(() => apiRef.current.updateColumns([{ field: 'id' }]));
       expect(gridColumnFieldsSelector(apiRef)).to.deep.equal(['__check__', 'brand', 'id']);
-      // @ts-expect-error privateApi is not defined
       act(() => privateApi.current.requestPipeProcessorsApplication('hydrateColumns'));
       expect(gridColumnFieldsSelector(apiRef)).to.deep.equal(['__check__', 'brand', 'id']);
     });