diff --git a/babel.config.js b/babel.config.js index 2eba11541ee7c..fb49c16869299 100644 --- a/babel.config.js +++ b/babel.config.js @@ -58,6 +58,7 @@ module.exports = { 'babel-plugin-module-resolver', { root: ['./'], + extensions: ['.js', '.ts', '.tsx'], alias: defaultAlias, }, ], @@ -70,6 +71,7 @@ module.exports = { 'babel-plugin-module-resolver', { root: ['./'], + extensions: ['.js', '.ts', '.tsx'], alias: defaultAlias, }, ], diff --git a/packages/grid/x-grid/test/XGrid.test.tsx b/packages/grid/x-grid/test/XGrid.test.tsx index 4e31bc449563e..6a5afe1dc249b 100644 --- a/packages/grid/x-grid/test/XGrid.test.tsx +++ b/packages/grid/x-grid/test/XGrid.test.tsx @@ -1,7 +1,20 @@ import * as React from 'react'; -import { createClientRender, act } from 'test/utils'; +import { createClientRender, act, fireEvent } from 'test/utils'; import { expect } from 'chai'; import { XGrid } from '@material-ui/x-grid'; +import { useData } from 'packages/storybook/src/hooks/useData'; + +function getActiveCell() { + const activeElement = document.activeElement; + + if (!activeElement || !activeElement.parentElement) { + return null; + } + + return `${activeElement.parentElement.getAttribute('data-rowindex')}-${activeElement.getAttribute( + 'data-colindex', + )}`; +} async function sleep(duration: number) { return new Promise((resolve) => { @@ -14,13 +27,65 @@ async function sleep(duration: number) { describe('', () => { const render = createClientRender(); - it('should resize the width of the columns', async function test() { + before(function beforeHook() { if (/jsdom/.test(window.navigator.userAgent)) { - // TODO: Unclear why this fails. Not important - // since a browser test gives us more confidence anyway + // Need layouting this.skip(); } + }); + + describe('keyboard', () => { + const KeyboardTest = () => { + const data = useData(100, 20); + const transformColSizes = (columns) => columns.map((column) => ({ ...column, width: 60 })); + + return ( +
+ +
+ ); + }; + + it('cell navigation with arrows ', async () => { + render(); + await sleep(10); + document.querySelector('[data-rowindex="0"]').querySelector('[data-colindex="0"]').focus(); + expect(getActiveCell()).to.equal('0-0'); + fireEvent.keyDown(document.activeElement, { code: 'ArrowRight' }); + await sleep(100); + expect(getActiveCell()).to.equal('0-1'); + + fireEvent.keyDown(document.activeElement, { code: 'ArrowDown' }); + await sleep(100); + expect(getActiveCell()).to.equal('1-1'); + + fireEvent.keyDown(document.activeElement, { code: 'ArrowLeft' }); + await sleep(100); + expect(getActiveCell()).to.equal('1-0'); + + fireEvent.keyDown(document.activeElement, { code: 'ArrowUp' }); + await sleep(100); + expect(getActiveCell()).to.equal('0-0'); + }); + + it('Home / End navigation', async () => { + render(); + await sleep(10); + document.querySelector('[data-rowindex="1"]').querySelector('[data-colindex="1"]').focus(); + expect(getActiveCell()).to.equal('1-1'); + + fireEvent.keyDown(document.activeElement, { code: 'Home' }); + await sleep(100); + expect(getActiveCell()).to.equal('1-0'); + + fireEvent.keyDown(document.activeElement, { code: 'End' }); + await sleep(100); + expect(getActiveCell()).to.equal('1-19'); + }); + }); + + it('should resize the width of the columns', async function test() { function App(props) { const { width = 300 } = props; return ( diff --git a/packages/license/bin/license-gen-script.js b/packages/license/bin/license-gen-script.js index 7ee174058a050..cf77c360d37ba 100755 --- a/packages/license/bin/license-gen-script.js +++ b/packages/license/bin/license-gen-script.js @@ -1,7 +1,5 @@ #!/usr/bin/env node - -// eslint-disable-next-line no-global-assign +/* eslint-disable */ require = require('esm')(module); -// eslint-disable-next-line import/no-unresolved require('../dist/cjs/license-cli').licenseGenCli(process.argv); diff --git a/packages/storybook/integration/components.test.ts b/packages/storybook/integration/components.test.ts deleted file mode 100644 index f255b1c81f576..0000000000000 --- a/packages/storybook/integration/components.test.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { snapshotTest } from './helper-fn'; - -jest.setTimeout(30000); - -describe('Components override', () => { - test('Loading', async (done) => { - await snapshotTest('/story/x-grid-demos-custom-components--loading'); - done(); - }); - test('No rows', async (done) => { - await snapshotTest('/story/x-grid-demos-custom-components--no-rows'); - done(); - }); - test('Icons', async (done) => { - await snapshotTest('/story/x-grid-demos-custom-components--icons'); - done(); - }); - test('Pagination', async (done) => { - await snapshotTest('/story/x-grid-demos-custom-components--custom-pagination'); - done(); - }); - test('Footer', async (done) => { - await snapshotTest('/story/x-grid-demos-custom-components--custom-footer'); - done(); - }); - test('Header & Footer', async (done) => { - await snapshotTest('/story/x-grid-demos-custom-components--header-and-footer'); - done(); - }); - test('Styled Columns', async (done) => { - await snapshotTest('/story/x-grid-demos-custom-components--styled-columns'); - done(); - }); -}); diff --git a/packages/storybook/integration/keyboard.test.ts b/packages/storybook/integration/keyboard.test.ts index 56f44638ddf9f..22949c673893d 100644 --- a/packages/storybook/integration/keyboard.test.ts +++ b/packages/storybook/integration/keyboard.test.ts @@ -5,64 +5,26 @@ describe('Keyboard Navigation', () => { let browser; const waitFnOptions = { timeout: 500 }; - beforeAll(async (done) => { + beforeAll(async () => { browser = await startBrowser(); - done(); }); - beforeEach(async (done) => { + + beforeEach(async () => { page = await getStoryPage(browser, '/story/x-grid-tests-columns--small-col-sizes', true); await page.keyboard.press('Tab'); await page.keyboard.press('Tab'); await page.waitFor(100); - done(); }); - afterEach(async (done) => { + afterEach(async () => { await page.close(); - done(); }); - afterAll(async (done) => { + afterAll(async () => { await browser.close(); - done(); }); - test('Cell navigation with arrows ', async (done) => { - await page.keyboard.press('ArrowRight'); - await page.waitForFunction(activeCell, waitFnOptions, 0, 1); - - await page.keyboard.press('ArrowRight'); - await page.waitForFunction(activeCell, waitFnOptions, 0, 2); - - await page.keyboard.press('ArrowRight'); - await page.waitForFunction(activeCell, waitFnOptions, 0, 3); - - await page.keyboard.press('ArrowDown'); - await page.waitForFunction(activeCell, waitFnOptions, 1, 3); - - await page.keyboard.press('ArrowDown'); - await page.waitForFunction(activeCell, waitFnOptions, 2, 3); - - await page.keyboard.press('ArrowLeft'); - await page.waitForFunction(activeCell, waitFnOptions, 2, 2); - - await page.keyboard.press('ArrowUp'); - await page.waitForFunction(activeCell, waitFnOptions, 1, 2); - - done(); - }); - - test('Home / End navigation', async (done) => { - await page.keyboard.press('End'); - await page.waitForFunction(activeCell, waitFnOptions, 0, 19); - - await page.keyboard.press('Home'); - await page.waitForFunction(activeCell, waitFnOptions, 0, 0); - - done(); - }); - - test('CTRL Home / End navigation ', async (done) => { + test('CTRL Home / End navigation ', async () => { await page.keyboard.down('Control'); await page.waitFor(100); await page.keyboard.press('End'); @@ -72,21 +34,18 @@ describe('Keyboard Navigation', () => { await page.waitFor(100); await page.keyboard.up('Control'); await page.waitForFunction(activeCell, waitFnOptions, 0, 0); - - done(); }); - test('CTRL A to select all rows', async (done) => { + test('CTRL A to select all rows', async () => { await page.keyboard.down('Control'); await page.waitFor(100); await page.keyboard.press('a'); await page.waitFor(100); const imageEnd = await page.screenshot(); expect(imageEnd).toMatchImageSnapshot(); - done(); }); - test('Shift space + arrows to select rows ', async (done) => { + test('Shift space + arrows to select rows ', async () => { await page.keyboard.down('Shift'); await page.waitFor(100); await page.keyboard.press('Space'); @@ -101,10 +60,9 @@ describe('Keyboard Navigation', () => { const selectedScreen = await page.screenshot(); expect(selectedScreen).toMatchImageSnapshot(); - done(); }); - test('Next/Previous page', async (done) => { + test('Next/Previous page', async () => { await page.keyboard.press('Space'); await page.waitForFunction(activeCell, waitFnOptions, 15, 0); @@ -113,11 +71,9 @@ describe('Keyboard Navigation', () => { await page.keyboard.press('PageUp'); await page.waitForFunction(activeCell, waitFnOptions, 15, 0); - - done(); }); - test('Copy to clipboard', async (done) => { + test('Copy to clipboard', async () => { await page.keyboard.down('Shift'); await page.waitFor(100); await page.keyboard.press('Space'); @@ -148,6 +104,5 @@ describe('Keyboard Navigation', () => { '0, 17\n' + '0, 18\n', ); - done(); }); }); diff --git a/packages/storybook/integration/staticStories.test.ts b/packages/storybook/integration/staticStories.test.ts index eb5a20d493447..5e68115653a67 100644 --- a/packages/storybook/integration/staticStories.test.ts +++ b/packages/storybook/integration/staticStories.test.ts @@ -3,6 +3,13 @@ import { snapshotTest } from './helper-fn'; jest.setTimeout(30000); const stories = [ + '/story/x-grid-demos-custom-components--custom-footer', + '/story/x-grid-demos-custom-components--custom-pagination', + '/story/x-grid-demos-custom-components--header-and-footer', + '/story/x-grid-demos-custom-components--icons', + '/story/x-grid-demos-custom-components--loading', + '/story/x-grid-demos-custom-components--no-rows', + '/story/x-grid-demos-custom-components--styled-columns', '/story/x-grid-tests-columns--small-col-sizes', '/story/x-grid-tests-columns--very-small-col-sizes', { @@ -23,73 +30,65 @@ const stories = [ }, '/story/x-grid-tests-columns--header-component', '/story/x-grid-tests-columns--new-column-types', - '/story/x-grid-tests-dataset--no-rows', - '/story/x-grid-tests-dataset--no-rows-no-cols', + '/story/x-grid-tests-dataset--both-scroll-no-extend-and-borders', + '/story/x-grid-tests-dataset--both-scroll', + '/story/x-grid-tests-dataset--grid-100-by-100', + '/story/x-grid-tests-dataset--grid-20-by-2', + '/story/x-grid-tests-dataset--horizontal-scroll', + '/story/x-grid-tests-dataset--loading-rows-auto-height', '/story/x-grid-tests-dataset--loading-rows', '/story/x-grid-tests-dataset--no-rows-auto-height', '/story/x-grid-tests-dataset--no-rows-no-cols-auto-height', - '/story/x-grid-tests-dataset--loading-rows-auto-height', + '/story/x-grid-tests-dataset--no-rows-no-cols', + '/story/x-grid-tests-dataset--no-rows', '/story/x-grid-tests-dataset--vertical-scroll', - '/story/x-grid-tests-dataset--horizontal-scroll', - '/story/x-grid-tests-dataset--both-scroll', - '/story/x-grid-tests-dataset--both-scroll-no-extend-and-borders', - '/story/x-grid-tests-dataset--grid-20-by-2', - '/story/x-grid-tests-dataset--grid-100-by-100', - - '/story/x-grid-tests-options--no-row-extend', - '/story/x-grid-tests-options--no-row-extend-cell-border', - '/story/x-grid-tests-options--auto-height-small', '/story/x-grid-tests-options--auto-height-large', + '/story/x-grid-tests-options--auto-height-small', '/story/x-grid-tests-options--cell-right-border', '/story/x-grid-tests-options--column-right-border', - - '/story/x-grid-tests-pagination--pagination-default', + '/story/x-grid-tests-options--no-row-extend-cell-border', + '/story/x-grid-tests-options--no-row-extend', + '/story/x-grid-tests-pagination--auto-pagination', // TODO click btns', '/story/x-grid-tests-pagination--hidden-pagination', - '/story/x-grid-tests-pagination--page-size-100', '/story/x-grid-tests-pagination--hidden-pagination', + '/story/x-grid-tests-pagination--page-size-100', '/story/x-grid-tests-pagination--pagination-api-tests', // TODO click btns', - '/story/x-grid-tests-pagination--auto-pagination', // TODO click btns', - - '/story/x-grid-tests-resize--resize-small-dataset', + '/story/x-grid-tests-pagination--pagination-default', '/story/x-grid-tests-resize--resize-large-dataset', - + '/story/x-grid-tests-resize--resize-small-dataset', '/story/x-grid-tests-selection--api-pre-selected-rows', - - '/story/x-grid-tests-sorting--string-sorting-desc', - '/story/x-grid-tests-sorting--string-sorting-asc', - - '/story/x-grid-tests-sorting--number-sorting-asc', - '/story/x-grid-tests-sorting--number-sorting-desc', + '/story/x-grid-tests-sorting--api-multiple-sorted', + '/story/x-grid-tests-sorting--api-single-sorted', + '/story/x-grid-tests-sorting--custom-comparator', '/story/x-grid-tests-sorting--date-sorting-asc', '/story/x-grid-tests-sorting--date-sorting-desc', '/story/x-grid-tests-sorting--date-time-sorting-asc', '/story/x-grid-tests-sorting--date-time-sorting-desc', - '/story/x-grid-tests-sorting--multiple-sorting', '/story/x-grid-tests-sorting--multiple-and-sort-index', - '/story/x-grid-tests-sorting--unsortable-last-col', - '/story/x-grid-tests-sorting--custom-comparator', - '/story/x-grid-tests-sorting--sorting-with-formatter', - '/story/x-grid-tests-sorting--api-single-sorted', - '/story/x-grid-tests-sorting--api-multiple-sorted', + '/story/x-grid-tests-sorting--multiple-sorting', + '/story/x-grid-tests-sorting--number-sorting-asc', + '/story/x-grid-tests-sorting--number-sorting-desc', '/story/x-grid-tests-sorting--sorted-events-api', - + '/story/x-grid-tests-sorting--sorting-with-formatter', + '/story/x-grid-tests-sorting--string-sorting-asc', + '/story/x-grid-tests-sorting--string-sorting-desc', + '/story/x-grid-tests-sorting--unsortable-last-col', '/story/x-grid-tests-styling--big-rows-and-header', - '/story/x-grid-tests-styling--unset', - '/story/x-grid-tests-styling--small', - '/story/x-grid-tests-styling--column-cell-class', - '/story/x-grid-tests-styling--column-header-class', '/story/x-grid-tests-styling--column-cell-class-rules', + '/story/x-grid-tests-styling--column-cell-class', '/story/x-grid-tests-styling--column-cell-renderer', + '/story/x-grid-tests-styling--column-header-class', + '/story/x-grid-tests-styling--small', + '/story/x-grid-tests-styling--unset', ]; -describe.only('snapshotTest', () => { +describe('snapshotTest', () => { stories.forEach((config: any) => { const path = typeof config === 'string' ? config : config.path; const beforeTest = typeof config === 'string' ? undefined : config.beforeTest; - test(path, async (done) => { + test(path, async () => { await snapshotTest(path, beforeTest); - done(); }); }); }); diff --git a/packages/storybook/src/stories/grid-columns.stories.tsx b/packages/storybook/src/stories/grid-columns.stories.tsx index f5a414e1002db..1c22247f28815 100644 --- a/packages/storybook/src/stories/grid-columns.stories.tsx +++ b/packages/storybook/src/stories/grid-columns.stories.tsx @@ -19,24 +19,26 @@ export default { export function SmallColSizes() { const data = useData(100, 20); - const transformColSizes = (columns: ColDef[]) => columns.map((c) => ({ ...c, width: 60 })); + const transformColSizes = (columns: ColDef[]) => + columns.map((column) => ({ ...column, width: 60 })); return ; } export function VerySmallColSizes() { const data = useData(100, 20); - const transformColSizes = (columns: ColDef[]) => columns.map((c) => ({ ...c, width: 50 })); + const transformColSizes = (columns: ColDef[]) => + columns.map((column) => ({ ...column, width: 50 })); return ; } export function ColumnDescriptionTooltip() { const data = useData(100, 20); const transformColSizes = (columns: ColDef[]) => - columns.map((c) => { - if (c.field === 'currencyPair') { - return { ...c, width: 80, description: 'This is the currency pair column' }; + columns.map((column) => { + if (column.field === 'currencyPair') { + return { ...column, width: 80, description: 'This is the currency pair column' }; } - return c; + return column; }); return ; diff --git a/test/karma.conf.js b/test/karma.conf.js index 020f1dcd7063d..e1c40f6862488 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -1,3 +1,4 @@ +const path = require('path'); const webpack = require('webpack'); const browserStack = { @@ -73,6 +74,7 @@ module.exports = function setKarmaConfig(config) { }, resolve: { extensions: ['.js', '.ts', '.tsx'], + modules: [path.join(__dirname, '../'), 'node_modules'], alias: { // yarn alias for `pretty-format@3` // @testing-library/dom -> pretty-format@25 diff --git a/test/utils/setup.js b/test/utils/setup.js index a50b5d911cdd6..767a0ed5b9a89 100644 --- a/test/utils/setup.js +++ b/test/utils/setup.js @@ -4,7 +4,7 @@ const createDOM = require('./createDOM'); process.browser = true; -require('@babel/register')({ extensions: ['.js', '.jsx', '.ts', '.tsx'] }); +require('@babel/register')({ extensions: ['.js', '.ts', '.tsx'] }); // Enable missing act warnings: https://github.com/facebook/react/blob/v16.13.1/packages/react-reconciler/src/ReactFiberHooks.js#L965 // TODO: Revisit once https://github.com/facebook/react/issues/15439 is resolved. diff --git a/tsconfig.json b/tsconfig.json index c2866e17ced1e..16f596b65e0d4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,6 +15,17 @@ "jsx": "react", "sourceMap": true, "noImplicitAny": false, - "types": ["jest", "node"] + "types": ["jest", "node"], + "baseUrl": "./", + "paths": { + "@material-ui/x-grid": ["./packages/grid/x-grid/src"], + "@material-ui/x-grid/*": ["./packages/grid/x-grid/src/*"], + "@material-ui/x-grid-modules": ["./packages/grid/x-grid-modules/src"], + "@material-ui/x-grid-modules/*": ["./packages/grid/x-grid-modules/src/*"], + "@material-ui/x-license": ["./packages/license/src"], + "@material-ui/x-license/*": ["./packages/license/src/ยจ"], + "@material-ui/data-grid": ["./packages/grid/data-grid/src"], + "@material-ui/data-grid/*": ["./packages/grid/data-grid/src/*"] + } } }