diff --git a/packages/grid/_modules_/grid/utils/__tests__/classnames.tests.ts b/packages/grid/_modules_/grid/utils/__tests__/classnames.tests.ts index ac11eb0284825..9f406845cb4b4 100644 --- a/packages/grid/_modules_/grid/utils/__tests__/classnames.tests.ts +++ b/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'], diff --git a/packages/grid/data-grid/src/tests/keyboard.DataGrid.test.tsx b/packages/grid/data-grid/src/tests/keyboard.DataGrid.test.tsx index cc6977db7fc62..ada48bbc32212 100644 --- a/packages/grid/data-grid/src/tests/keyboard.DataGrid.test.tsx +++ b/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(' - Keyboard', () => { // TODO v5: replace with createClientRender @@ -57,4 +62,47 @@ describe(' - 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 ( +
+ +
+ ); + }; + + it('cell navigation with arrows', () => { + render(); + // @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(); + // @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 */ }); diff --git a/packages/grid/data-grid/src/tests/layout.DataGrid.test.tsx b/packages/grid/data-grid/src/tests/layout.DataGrid.test.tsx index 7776a7220b526..16ac7c8784050 100644 --- a/packages/grid/data-grid/src/tests/layout.DataGrid.test.tsx +++ b/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(' - Layout & Warnings', () => { // TODO v5: replace with createClientRender @@ -40,6 +40,30 @@ describe(' - Layout & Warnings', () => { } }); + it('should resize the width of the columns', async () => { + interface TestCaseProps { + width?: number; + } + const TestCase = (props: TestCaseProps) => { + const { width = 300 } = props; + return ( +
+ +
+ ); + }; + + const { container, setProps } = render(); + 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`, () => { diff --git a/packages/grid/data-grid/src/tests/pagination.DataGrid.test.tsx b/packages/grid/data-grid/src/tests/pagination.DataGrid.test.tsx index 8e24f5abd0a53..7e5ec00e328aa 100644 --- a/packages/grid/data-grid/src/tests/pagination.DataGrid.test.tsx +++ b/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'; diff --git a/packages/grid/x-grid/src/selection.XGrid.test.tsx b/packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx similarity index 93% rename from packages/grid/x-grid/src/selection.XGrid.test.tsx rename to packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx index 927e830dc0942..5f95e4cfcd6c3 100644 --- a/packages/grid/x-grid/src/selection.XGrid.test.tsx +++ b/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(' - Selection', () => { +describe(' - Selection', () => { // TODO v5: replace with createClientRender const render = createClientRenderStrictMode(); @@ -19,7 +19,7 @@ describe(' - Selection', () => { it('should check and uncheck when double clicking the row', () => { render(
- - State', () => { this.skip(); } }); + it('should allow to control the state using useState', async () => { function GridStateTest({ direction, sortedRows }) { const gridState = { diff --git a/packages/grid/data-grid/src/tests/toolbar.DataGrid.test.tsx b/packages/grid/data-grid/src/tests/toolbar.DataGrid.test.tsx index 9881e71fdb589..77cae0fa891a0 100644 --- a/packages/grid/data-grid/src/tests/toolbar.DataGrid.test.tsx +++ b/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 { diff --git a/packages/grid/x-grid/src/keyboard.XGrid.test.tsx b/packages/grid/x-grid/src/keyboard.XGrid.test.tsx deleted file mode 100644 index 170bcfa0e5d5d..0000000000000 --- a/packages/grid/x-grid/src/keyboard.XGrid.test.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { XGrid } from '@material-ui/x-grid/XGrid'; -import { waitFor } from '@testing-library/react'; -import { expect } from 'chai'; -import * as React from 'react'; -import { getActiveCell } from '../../../../test/utils/helperFn'; -// @ts-expect-error need to migrate helpers to TypeScript -import { createClientRenderStrictMode, fireEvent } from '../../../../test/utils/index'; -import { useData } from '../../../storybook/src/hooks/useData'; -import { Columns } from '../../_modules_/grid/models/colDef/colDef'; - -describe(' - Keyboard ', () => { - // TODO v5: replace with createClientRender - const render = createClientRenderStrictMode(); - - before(function beforeHook() { - if (/jsdom/.test(window.navigator.userAgent)) { - // Need layouting - this.skip(); - } - }); - - /* 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 ( -
- -
- ); - }; - - it('cell navigation with arrows ', () => { - render(); - // @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(); - // @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 */ -}); diff --git a/packages/grid/x-grid/src/layout.XGrid.test.tsx b/packages/grid/x-grid/src/tests/layout.XGrid.test.tsx similarity index 67% rename from packages/grid/x-grid/src/layout.XGrid.test.tsx rename to packages/grid/x-grid/src/tests/layout.XGrid.test.tsx index 5a5806e36b3f7..c62f81539e516 100644 --- a/packages/grid/x-grid/src/layout.XGrid.test.tsx +++ b/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(' - Layout', () => { ); }); }); - - it('should resize the width of the columns', async () => { - interface TestCaseProps { - width?: number; - } - const TestCase = (props: TestCaseProps) => { - const { width = 300 } = props; - return ( -
- -
- ); - }; - - const { container, setProps } = render(); - 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); - }); }); diff --git a/packages/grid/x-grid/src/pagination.XGrid.test.tsx b/packages/grid/x-grid/src/tests/pagination.XGrid.test.tsx similarity index 84% rename from packages/grid/x-grid/src/pagination.XGrid.test.tsx rename to packages/grid/x-grid/src/tests/pagination.XGrid.test.tsx index 5e3843d6f69c3..7b63be3e964b1 100644 --- a/packages/grid/x-grid/src/pagination.XGrid.test.tsx +++ b/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(' - Pagination', () => { + // TODO v5: replace with createClientRender + const render = createClientRenderStrictMode(); + const baselineProps = { rows: [ { diff --git a/packages/grid/x-grid/src/state.XGrid.test.tsx b/packages/grid/x-grid/src/tests/state.XGrid.test.tsx similarity index 100% rename from packages/grid/x-grid/src/state.XGrid.test.tsx rename to packages/grid/x-grid/src/tests/state.XGrid.test.tsx diff --git a/packages/x-license/src/__tests__/verifyLicense.tests.ts b/packages/x-license/src/__tests__/verifyLicense.tests.ts index bb0cfca0e5da7..9073c7451916e 100644 --- a/packages/x-license/src/__tests__/verifyLicense.tests.ts +++ b/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',