[test] Make focus state out-of-sync warning opt-in (mui#4129)

m4theushw · Mar 9, 2022 · 5551732 · 5551732
1 parent 318f6cc
commit 5551732
Show file tree

Hide file tree

Showing 15 changed files with 63 additions and 22 deletions.
diff --git a/docs/pages/api-docs/data-grid/data-grid-pro.json b/docs/pages/api-docs/data-grid/data-grid-pro.json
@@ -61,7 +61,7 @@
     "experimentalFeatures": {
       "type": {
         "name": "shape",
-        "description": "{ preventCommitWhileValidating?: bool, rowGrouping?: bool }"
+        "description": "{ preventCommitWhileValidating?: bool, rowGrouping?: bool, warnIfFocusStateIsNotSynced?: bool }"
       }
     },
     "filterMode": {

diff --git a/docs/pages/api-docs/data-grid/data-grid.json b/docs/pages/api-docs/data-grid/data-grid.json
@@ -38,7 +38,10 @@
     "editRowsModel": { "type": { "name": "object" } },
     "error": { "type": { "name": "any" } },
     "experimentalFeatures": {
-      "type": { "name": "shape", "description": "{ preventCommitWhileValidating?: bool }" }
+      "type": {
+        "name": "shape",
+        "description": "{ preventCommitWhileValidating?: bool, warnIfFocusStateIsNotSynced?: bool }"
+      }
     },
     "filterMode": {
       "type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" },

diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -61,7 +61,7 @@
     "experimentalFeatures": {
       "type": {
         "name": "shape",
-        "description": "{ preventCommitWhileValidating?: bool, rowGrouping?: bool }"
+        "description": "{ preventCommitWhileValidating?: bool, rowGrouping?: bool, warnIfFocusStateIsNotSynced?: bool }"
       }
     },
     "filterMode": {

diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
@@ -38,7 +38,10 @@
     "editRowsModel": { "type": { "name": "object" } },
     "error": { "type": { "name": "any" } },
     "experimentalFeatures": {
-      "type": { "name": "shape", "description": "{ preventCommitWhileValidating?: bool }" }
+      "type": {
+        "name": "shape",
+        "description": "{ preventCommitWhileValidating?: bool, warnIfFocusStateIsNotSynced?: bool }"
+      }
     },
     "filterMode": {
       "type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" },

diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
@@ -255,6 +255,7 @@ DataGridProRaw.propTypes = {
   experimentalFeatures: PropTypes.shape({
     preventCommitWhileValidating: PropTypes.bool,
     rowGrouping: PropTypes.bool,
+    warnIfFocusStateIsNotSynced: PropTypes.bool,
   }),
   /**
    * Filtering can be processed on the server or client-side.

diff --git a/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx
@@ -61,7 +61,12 @@ describe('<DataGridPro /> - Cell Editing', () => {
     apiRef = useGridApiRef();
     return (
       <div style={{ width: 300, height: 300 }}>
-        <DataGridPro {...baselineProps} apiRef={apiRef} {...props} />
+        <DataGridPro
+          {...baselineProps}
+          apiRef={apiRef}
+          experimentalFeatures={{ warnIfFocusStateIsNotSynced: true }}
+          {...props}
+        />
       </div>
     );
   };
@@ -611,7 +616,6 @@ describe('<DataGridPro /> - Cell Editing', () => {
     expect(cell).to.have.class('MuiDataGrid-cell--editing');
 
     const input = screen.getByTestId('custom-input');
-    fireEvent.mouseUp(input);
     fireEvent.click(input);
     input.focus();
 

diff --git a/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx
@@ -83,7 +83,12 @@ describe('<DataGridPro /> - Edit Components', () => {
     apiRef = useGridApiRef();
     return (
       <div style={{ width: 300, height: 300 }}>
-        <DataGridPro {...baselineProps} apiRef={apiRef} {...props} />
+        <DataGridPro
+          {...baselineProps}
+          apiRef={apiRef}
+          experimentalFeatures={{ warnIfFocusStateIsNotSynced: true }}
+          {...props}
+        />
       </div>
     );
   };

diff --git a/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx
@@ -64,7 +64,12 @@ describe('<DataGridPro /> - Row Editing', () => {
     apiRef = useGridApiRef();
     return (
       <div style={{ width: 300, height: 300 }}>
-        <DataGridPro {...baselineProps} apiRef={apiRef} {...props} />
+        <DataGridPro
+          {...baselineProps}
+          apiRef={apiRef}
+          experimentalFeatures={{ warnIfFocusStateIsNotSynced: true }}
+          {...props}
+        />
       </div>
     );
   };

diff --git a/packages/grid/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx
@@ -16,6 +16,7 @@ import {
   DataGridPro,
   DataGridProProps,
   GridApi,
+  gridFocusCellSelector,
 } from '@mui/x-data-grid-pro';
 import { useData } from 'packages/storybook/src/hooks/useData';
 import { getData } from 'storybook/src/data/data-service';
@@ -710,7 +711,7 @@ describe('<DataGridPro /> - Rows', () => {
 
       fireEvent.click(getCell(0, 0));
       setProps({ rows: baselineProps.rows.slice(1) });
-      expect(apiRef.current.state.focus.cell).to.equal(null);
+      expect(gridFocusCellSelector(apiRef)).to.equal(null);
     });
 
     it('should not reset focus when removing a row not containing the focus cell', () => {
@@ -719,7 +720,7 @@ describe('<DataGridPro /> - Rows', () => {
       fireEvent.mouseUp(getCell(1, 0));
       fireEvent.click(getCell(1, 0));
       setProps({ rows: baselineProps.rows.slice(1) });
-      expect(apiRef.current.state.focus.cell).to.deep.equal({
+      expect(gridFocusCellSelector(apiRef)).to.deep.equal({
         id: baselineProps.rows[1].id,
         field: baselineProps.columns[0].field,
       });
@@ -731,7 +732,7 @@ describe('<DataGridPro /> - Rows', () => {
       fireEvent.mouseUp(cell);
       fireEvent.click(cell);
       fireEvent.keyDown(cell, { key: 'a' });
-      expect(apiRef.current.state.focus.cell).to.deep.equal({
+      expect(gridFocusCellSelector(apiRef)).to.deep.equal({
         id: baselineProps.rows[1].id,
         field: baselineProps.columns[0].field,
       });
@@ -741,13 +742,13 @@ describe('<DataGridPro /> - Rows', () => {
       render(<TestCase rows={baselineProps.rows} />);
       fireEvent.mouseUp(getCell(1, 0));
       fireEvent.click(getCell(1, 0));
-      expect(apiRef.current.state.focus.cell).to.deep.equal({
+      expect(gridFocusCellSelector(apiRef)).to.deep.equal({
         id: baselineProps.rows[1].id,
         field: baselineProps.columns[0].field,
       });
       fireEvent.mouseUp(getCell(2, 1));
       fireEvent.click(getCell(2, 1));
-      expect(apiRef.current.state.focus.cell).to.deep.equal({
+      expect(gridFocusCellSelector(apiRef)).to.deep.equal({
         id: baselineProps.rows[2].id,
         field: baselineProps.columns[1].field,
       });
@@ -757,12 +758,12 @@ describe('<DataGridPro /> - Rows', () => {
       render(<TestCase rows={baselineProps.rows} />);
       fireEvent.mouseUp(getCell(1, 0));
       fireEvent.click(getCell(1, 0));
-      expect(apiRef.current.state.focus.cell).to.deep.equal({
+      expect(gridFocusCellSelector(apiRef)).to.deep.equal({
         id: baselineProps.rows[1].id,
         field: baselineProps.columns[0].field,
       });
       fireEvent.click(document.body);
-      expect(apiRef.current.state.focus.cell).to.deep.equal(null);
+      expect(gridFocusCellSelector(apiRef)).to.deep.equal(null);
     });
 
     it('should publish "cellFocusOut" when clicking outside the focused cell', () => {

diff --git a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx
@@ -175,6 +175,7 @@ DataGridRaw.propTypes = {
    */
   experimentalFeatures: PropTypes.shape({
     preventCommitWhileValidating: PropTypes.bool,
+    warnIfFocusStateIsNotSynced: PropTypes.bool,
   }),
   /**
    * Filtering can be processed on the server or client-side.

diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx
@@ -183,7 +183,10 @@ function GridCell(props: GridCellProps) {
 
   let handleFocus: any = other.onFocus;
 
-  if (process.env.NODE_ENV === 'test') {
+  if (
+    process.env.NODE_ENV === 'test' &&
+    rootProps.experimentalFeatures?.warnIfFocusStateIsNotSynced
+  ) {
     handleFocus = (event: React.FocusEvent) => {
       const focusedCell = gridFocusCellSelector(apiRef);
       if (focusedCell?.id === rowId && focusedCell.field === field) {
@@ -194,12 +197,12 @@ function GridCell(props: GridCellProps) {
       }
 
       if (!warnedOnce) {
-        console.error(
+        console.warn(
           [
             `MUI: The cell with id=${rowId} and field=${field} received focus.`,
             `According to the state, the focus should be at id=${focusedCell?.id}, field=${focusedCell?.field}.`,
-            'In the next render, the focus will be changed to match the state.',
-            'Call `fireEvent.mouseUp` and `fireEvent.click` before to sync the focus with the state.',
+            "Not syncing the state may cause unwanted behaviors since the `cellFocusIn` event won't be fired.",
+            'Call `fireEvent.mouseUp` before the `fireEvent.click` to sync the focus with the state.',
           ].join('\n'),
         );
 

diff --git a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts
@@ -28,6 +28,11 @@ export interface GridExperimentalFeatures {
    * Will be part of the premium-plan when fully ready.
    */
   preventCommitWhileValidating: boolean;
+  /**
+   * Emits a warning if the cell receives focus without also syncing the focus state.
+   * Only works if NODE_ENV=test.
+   */
+  warnIfFocusStateIsNotSynced: boolean;
 }
 
 /**

diff --git a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx
@@ -109,7 +109,11 @@ describe('<DataGrid /> - Cells', () => {
 
     render(
       <div style={{ width: 300, height: 500 }}>
-        <DataGrid {...baselineProps} columns={[{ field: 'brand', cellClassName: 'foobar' }]} />
+        <DataGrid
+          {...baselineProps}
+          columns={[{ field: 'brand', cellClassName: 'foobar' }]}
+          experimentalFeatures={{ warnIfFocusStateIsNotSynced: true }}
+        />
       </div>,
     );
 
@@ -118,6 +122,6 @@ describe('<DataGrid /> - Cells', () => {
 
     expect(() => {
       getCell(1, 0).focus();
-    }).toErrorDev(['MUI: The cell with id=1 and field=brand received focus.']);
+    }).toWarnDev(['MUI: The cell with id=1 and field=brand received focus.']);
   });
 });
diff --git a/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx
@@ -54,6 +54,7 @@ describe('<DataGrid /> - Keyboard', () => {
           headerHeight={HEADER_HEIGHT}
           hideFooter
           filterModel={{ items: [{ columnField: 'id', operatorValue: '>', value: 10 }] }}
+          experimentalFeatures={{ warnIfFocusStateIsNotSynced: true }}
           {...props}
         />
       </div>

diff --git a/packages/grid/x-data-grid/src/tests/selection.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/selection.DataGrid.test.tsx
@@ -42,7 +42,12 @@ describe('<DataGrid /> - Selection', () => {
       Partial<Pick<DataGridProps, 'rows' | 'columns'>>,
   ) => (
     <div style={{ width: 300, height: 300 }}>
-      <DataGrid {...defaultData} {...props} autoHeight={isJSDOM} />
+      <DataGrid
+        {...defaultData}
+        {...props}
+        autoHeight={isJSDOM}
+        experimentalFeatures={{ warnIfFocusStateIsNotSynced: true }}
+      />
     </div>
   );