[test] Polish refactor

.eslintrc.js

@@ -24,4 +24,24 @@ module.exports = {
     // TODO
     'no-restricted-imports': 'off',
   },
+  overrides: [
+    ...baseline.overrides,
+    {
+      files: [
+        // matching the pattern of the test runner
+        '*.test.js',
+        '*.test.ts',
+        '*.test.tsx',
+      ],
+      rules: {
+        'no-restricted-imports': [
+          'error',
+          {
+            patterns: ['test/utils/*'],
+            paths: ['@testing-library/react'],
+          },
+        ],
+      },
+    },
+  ],
 };

packages/grid/_modules_/grid/utils/__tests__/classnames.tests.ts

@@ -5,15 +5,18 @@ describe('utils: classnames', () => {
     const css = classnames('hello', 'world');
     expect(css).toBe('hello world');
   });
+
   it('should work with css rules object', () => {
     const css = classnames('working', { yes: true, no: false });
     expect(css).toBe('working yes');
   });
-  it('should work with string arrays ', () => {
+
+  it('should work with string arrays', () => {
     const css = classnames(['working', 'from', 'home']);
     expect(css).toBe('working from home');
   });
-  it('should work with all types of params mixed together ', () => {
+
+  it('should work with all types of params mixed together', () => {
     const css = classnames(
       'people',
       ['working', 'from', 'home'],

packages/grid/data-grid/src/tests/keyboard.DataGrid.test.tsx

@@ -7,10 +7,15 @@ import {
   screen,
   // @ts-expect-error need to migrate helpers to TypeScript
   createEvent,
-} from 'test/utils/index';
+  // @ts-expect-error need to migrate helpers to TypeScript
+  waitFor,
+} from 'test/utils';
 import { spy } from 'sinon';
 import { expect } from 'chai';
+import { getActiveCell } from 'test/utils/helperFn';
 import { DataGrid } from '@material-ui/data-grid';
+import { useData } from 'packages/storybook/src/hooks/useData';
+import { Columns } from 'packages/grid/_modules_/grid/models/colDef/colDef';
 
 describe('<DataGrid /> - Keyboard', () => {
   // TODO v5: replace with createClientRender
@@ -57,4 +62,47 @@ describe('<DataGrid /> - Keyboard', () => {
     fireEvent(input, keydownEvent);
     expect(handleInputKeyDown.callCount).to.equal(1);
   });
+
+  /* eslint-disable material-ui/disallow-active-element-as-key-event-target */
+  const KeyboardTest = () => {
+    const data = useData(100, 20);
+    const transformColSizes = (columns: Columns) =>
+      columns.map((column) => ({ ...column, width: 60 }));
+
+    return (
+      <div style={{ width: 300, height: 300 }}>
+        <DataGrid rows={data.rows} columns={transformColSizes(data.columns)} />
+      </div>
+    );
+  };
+
+  it('cell navigation with arrows', () => {
+    render(<KeyboardTest />);
+    // @ts-ignore
+    document.querySelector('[role="cell"][data-rowindex="0"][aria-colindex="0"]').focus();
+    expect(getActiveCell()).to.equal('0-0');
+    fireEvent.keyDown(document.activeElement!, { code: 'ArrowRight' });
+    expect(getActiveCell()).to.equal('0-1');
+    fireEvent.keyDown(document.activeElement!, { code: 'ArrowDown' });
+    expect(getActiveCell()).to.equal('1-1');
+    fireEvent.keyDown(document.activeElement!, { code: 'ArrowLeft' });
+    expect(getActiveCell()).to.equal('1-0');
+    fireEvent.keyDown(document.activeElement!, { code: 'ArrowUp' });
+    expect(getActiveCell()).to.equal('0-0');
+  });
+
+  it('Home / End navigation', async () => {
+    render(<KeyboardTest />);
+    // @ts-ignore
+    document.querySelector('[role="cell"][data-rowindex="1"][aria-colindex="1"]').focus();
+    expect(getActiveCell()).to.equal('1-1');
+    fireEvent.keyDown(document.activeElement!, { code: 'Home' });
+    expect(getActiveCell()).to.equal('1-0');
+    fireEvent.keyDown(document.activeElement!, { code: 'End' });
+    await waitFor(() =>
+      document.querySelector('[role="cell"][data-rowindex="1"][aria-colindex="19"]'),
+    );
+    expect(getActiveCell()).to.equal('1-19');
+  });
+  /* eslint-enable material-ui/disallow-active-element-as-key-event-target */
 });

packages/grid/data-grid/src/tests/layout.DataGrid.test.tsx

@@ -4,11 +4,11 @@ import {
   createClientRenderStrictMode,
   // @ts-expect-error need to migrate helpers to TypeScript
   ErrorBoundary,
-} from 'test/utils/index';
+} from 'test/utils';
 import { useFakeTimers } from 'sinon';
 import { expect } from 'chai';
 import { DataGrid } from '@material-ui/data-grid';
-import { getColumnValues } from 'test/utils/helperFn';
+import { getColumnValues, raf } from 'test/utils/helperFn';
 
 describe('<DataGrid /> - Layout & Warnings', () => {
   // TODO v5: replace with createClientRender
@@ -40,6 +40,30 @@ describe('<DataGrid /> - Layout & Warnings', () => {
       }
     });
 
+    it('should resize the width of the columns', async () => {
+      interface TestCaseProps {
+        width?: number;
+      }
+      const TestCase = (props: TestCaseProps) => {
+        const { width = 300 } = props;
+        return (
+          <div style={{ width, height: 300 }}>
+            <DataGrid {...baselineProps} />
+          </div>
+        );
+      };
+
+      const { container, setProps } = render(<TestCase width={300} />);
+      let rect;
+      rect = container.querySelector('[role="row"][data-rowindex="0"]').getBoundingClientRect();
+      expect(rect.width).to.equal(300 - 2);
+
+      setProps({ width: 400 });
+      await raf(); // wait for the AutoSize's dimension detection logic
+      rect = container.querySelector('[role="row"][data-rowindex="0"]').getBoundingClientRect();
+      expect(rect.width).to.equal(400 - 2);
+    });
+
     // Adapation of describeConformance()
     describe('Material-UI component API', () => {
       it(`attaches the ref`, () => {

packages/grid/data-grid/src/tests/pagination.DataGrid.test.tsx

@@ -5,7 +5,7 @@ import {
   fireEvent,
   // @ts-expect-error need to migrate helpers to TypeScript
   screen,
-} from 'test/utils/index';
+} from 'test/utils';
 import { expect } from 'chai';
 import { DataGrid, RowsProp } from '@material-ui/data-grid';
 import { getColumnValues } from 'test/utils/helperFn';

packages/grid/x-grid/src/selection.XGrid.test.tsx → packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 // @ts-expect-error need to migrate helpers to TypeScript
 import { fireEvent, screen, createClientRenderStrictMode } from 'test/utils';
 import { expect } from 'chai';
-import { XGrid } from '@material-ui/x-grid';
+import { DataGrid } from '@material-ui/data-grid';
 
-describe('<XGrid /> - Selection', () => {
+describe('<DataGrid /> - Selection', () => {
   // TODO v5: replace with createClientRender
   const render = createClientRenderStrictMode();
 
@@ -19,7 +19,7 @@ describe('<XGrid /> - Selection', () => {
     it('should check and uncheck when double clicking the row', () => {
       render(
         <div style={{ width: 300, height: 300 }}>
-          <XGrid
+          <DataGrid
             rows={[
               {
                 id: 0,

packages/grid/data-grid/src/tests/sorting.DataGrid.test.tsx

@@ -5,7 +5,7 @@ import {
   fireEvent,
   // @ts-expect-error need to migrate helpers to TypeScript
   screen,
-} from 'test/utils/index';
+} from 'test/utils';
 import { expect } from 'chai';
 import { DataGrid } from '@material-ui/data-grid';
 import { getColumnValues } from 'test/utils/helperFn';

packages/grid/data-grid/src/tests/state.DataGrid.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createClientRenderStrictMode } from 'test/utils/index';
+import { createClientRenderStrictMode } from 'test/utils';
 import { expect } from 'chai';
 import { DataGrid } from '@material-ui/data-grid';
 import { getColumnValues } from 'test/utils/helperFn';
@@ -32,6 +32,7 @@ describe('<DataGrid /> - State', () => {
       this.skip();
     }
   });
+
   it('should allow to control the state using useState', async () => {
     function GridStateTest({ direction, sortedRows }) {
       const gridState = {

packages/grid/data-grid/src/tests/toolbar.DataGrid.test.tsx

@@ -3,7 +3,7 @@ import {
   createClientRenderStrictMode,
   // @ts-expect-error need to migrate helpers to TypeScript
   fireEvent,
-} from 'test/utils/index';
+} from 'test/utils';
 import { expect } from 'chai';
 import { DataGrid } from '@material-ui/data-grid';
 import {

packages/grid/x-grid/src/layout.XGrid.test.tsx → packages/grid/x-grid/src/tests/layout.XGrid.test.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { createClientRenderStrictMode } from 'test/utils';
-import { raf } from 'test/utils/helperFn';
 import { expect } from 'chai';
 import { XGrid } from '@material-ui/x-grid';
 
@@ -64,28 +63,4 @@ describe('<XGrid /> - Layout', () => {
       );
     });
   });
-
-  it('should resize the width of the columns', async () => {
-    interface TestCaseProps {
-      width?: number;
-    }
-    const TestCase = (props: TestCaseProps) => {
-      const { width = 300 } = props;
-      return (
-        <div style={{ width, height: 300 }}>
-          <XGrid {...baselineProps} />
-        </div>
-      );
-    };
-
-    const { container, setProps } = render(<TestCase width={300} />);
-    let rect;
-    rect = container.querySelector('[role="row"][data-rowindex="0"]').getBoundingClientRect();
-    expect(rect.width).to.equal(300 - 2);
-
-    setProps({ width: 400 });
-    await raf(); // wait for the AutoSize's dimension detection logic
-    rect = container.querySelector('[role="row"][data-rowindex="0"]').getBoundingClientRect();
-    expect(rect.width).to.equal(400 - 2);
-  });
 });

packages/grid/x-grid/src/pagination.XGrid.test.tsx → packages/grid/x-grid/src/tests/pagination.XGrid.test.tsx

@@ -1,9 +1,16 @@
-import { act, render } from '@testing-library/react';
+import {
+  createClientRenderStrictMode,
+  // @ts-expect-error need to migrate helpers to TypeScript
+  act,
+} from 'test/utils';
 import * as React from 'react';
 import { expect } from 'chai';
 import { XGrid, useApiRef } from '@material-ui/x-grid';
 
 describe('<XGrid /> - Pagination', () => {
+  // TODO v5: replace with createClientRender
+  const render = createClientRenderStrictMode();
+
   const baselineProps = {
     rows: [
       {
@@ -29,7 +36,7 @@ describe('<XGrid /> - Pagination', () => {
     }
   });
 
-  it('should apply setPage correctly', async () => {
+  it('should apply setPage correctly', () => {
     let apiRef;
     const GridTest = () => {
       apiRef = useApiRef();
@@ -41,7 +48,8 @@ describe('<XGrid /> - Pagination', () => {
       );
     };
 
-    render(<GridTest />);
+    // TODO fix StrictMode support
+    render(<GridTest />, { strict: false });
 
     let cell = document.querySelector('[role="cell"][aria-colindex="0"]')!;
     expect(cell).to.have.text('Nike');

packages/x-license/src/__tests__/verifyLicense.tests.ts

@@ -19,7 +19,8 @@ const mockLocation = (fakeLocation: any) => {
   });
 };
 const RELEASE_INFO = generateReleaseInfo();
-describe('License: verifyLicense ', () => {
+
+describe('License: verifyLicense', () => {
   const validLicense = generateLicence({
     expiryDate: new Date(new Date().getTime() + oneYear),
     orderNumber: 'MUI-123',