From c0104601cb62db57e9a8f917e9af61351100ddb9 Mon Sep 17 00:00:00 2001 From: damien Date: Fri, 29 Jan 2021 16:39:27 +0100 Subject: [PATCH 1/9] fix onSelectionChange --- .../grid/hooks/features/columns/useColumns.ts | 6 ++++-- .../grid/hooks/utils/useOptionsProp.ts | 2 +- packages/grid/_modules_/grid/utils/index.ts | 2 +- .../utils/{mergeOptions.ts => mergeUtils.ts} | 2 -- .../src/stories/grid-selection.stories.tsx | 21 +++++++++++++++++++ 5 files changed, 27 insertions(+), 6 deletions(-) rename packages/grid/_modules_/grid/utils/{mergeOptions.ts => mergeUtils.ts} (90%) diff --git a/packages/grid/_modules_/grid/hooks/features/columns/useColumns.ts b/packages/grid/_modules_/grid/hooks/features/columns/useColumns.ts index e1334d58e0c0e..39ebc2051a905 100644 --- a/packages/grid/_modules_/grid/hooks/features/columns/useColumns.ts +++ b/packages/grid/_modules_/grid/hooks/features/columns/useColumns.ts @@ -11,7 +11,9 @@ import { InternalColumns, } from '../../../models/colDef/colDef'; import { ColumnTypesRecord } from '../../../models/colDef/colTypeDef'; +import { getDefaultColumnTypes } from '../../../models/colDef/defaultColumnTypes'; import { getColDef } from '../../../models/colDef/getColDef'; +import { mergeColTypes } from '../../../utils/mergeUtils'; import { useApiMethod } from '../../root/useApiMethod'; import { optionsSelector } from '../../utils/optionsSelector'; import { Logger, useLogger } from '../../utils/useLogger'; @@ -56,8 +58,8 @@ function hydrateColumns( logger: Logger, ): Columns { logger.debug('Hydrating Columns with default definitions'); - - const extendedColumns = columns.map((c) => ({ ...getColDef(columnTypes, c.type), ...c })); + const mergedColTypes = mergeColTypes(getDefaultColumnTypes(), columnTypes); + const extendedColumns = columns.map((c) => ({ ...getColDef(mergedColTypes, c.type), ...c })); if (withCheckboxSelection) { return [checkboxSelectionColDef, ...extendedColumns]; diff --git a/packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts b/packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts index d0cad9b7b7bec..bec872831e37c 100644 --- a/packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts +++ b/packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts @@ -3,7 +3,7 @@ import { DEFAULT_LOCALE_TEXT } from '../../constants/localeTextConstants'; import { GridComponentProps, GridOptionsProp } from '../../GridComponentProps'; import { ApiRef } from '../../models/api/apiRef'; import { DEFAULT_GRID_OPTIONS, GridOptions } from '../../models/gridOptions'; -import { mergeOptions } from '../../utils/mergeOptions'; +import { mergeOptions } from '../../utils/mergeUtils'; import { useGridReducer } from '../features/core/useGridReducer'; // REDUCER diff --git a/packages/grid/_modules_/grid/utils/index.ts b/packages/grid/_modules_/grid/utils/index.ts index 6afd75dd3f41b..7f5197c902efc 100644 --- a/packages/grid/_modules_/grid/utils/index.ts +++ b/packages/grid/_modules_/grid/utils/index.ts @@ -3,5 +3,5 @@ export * from './sortingUtils'; export * from './domUtils'; export * from './classnames'; export * from './keyboardUtils'; -export * from './mergeOptions'; +export * from './mergeUtils'; export * from './paramsUtils'; diff --git a/packages/grid/_modules_/grid/utils/mergeOptions.ts b/packages/grid/_modules_/grid/utils/mergeUtils.ts similarity index 90% rename from packages/grid/_modules_/grid/utils/mergeOptions.ts rename to packages/grid/_modules_/grid/utils/mergeUtils.ts index 4ceb92613a006..5a823dbb7eded 100644 --- a/packages/grid/_modules_/grid/utils/mergeOptions.ts +++ b/packages/grid/_modules_/grid/utils/mergeUtils.ts @@ -33,11 +33,9 @@ export function removeUndefinedProps(options: Object) { // We intentionally set the types to any to avoid circular deps export function mergeOptions(defaultOptions: any, options?: any) { options = removeUndefinedProps(options); - const mergedColTypes = mergeColTypes(defaultOptions.columnTypes, options?.columnTypes); const mergedOptions = { ...defaultOptions, ...options, }; - mergedOptions.columnTypes = mergedColTypes; return mergedOptions; } diff --git a/packages/storybook/src/stories/grid-selection.stories.tsx b/packages/storybook/src/stories/grid-selection.stories.tsx index 0a6a1c60bc9c8..8f72561b8168a 100644 --- a/packages/storybook/src/stories/grid-selection.stories.tsx +++ b/packages/storybook/src/stories/grid-selection.stories.tsx @@ -1,3 +1,4 @@ +import { useDemoData } from '@material-ui/x-grid-data-generator'; import * as React from 'react'; import { action } from '@storybook/addon-actions'; import { XGrid, GridOptionsProp, useApiRef } from '@material-ui/x-grid'; @@ -63,3 +64,23 @@ export const MultipleSelectWithCheckboxNoClick = () => { ); }; + +export function HandleSelection() { + const { data } = useDemoData({ + dataSet: "Commodity", + rowLength: 100000 + }); + + const [myState, setMyState] = React.useState(false); + const handleSelection = React.useCallback(() => { + setMyState(!myState); + }, [myState]); + + return ( + + ); +} From 74d252ceb616939f39d8bb1b3ee1bb4f9eaad344 Mon Sep 17 00:00:00 2001 From: damien Date: Fri, 29 Jan 2021 16:44:20 +0100 Subject: [PATCH 2/9] prettier --- .../storybook/src/stories/grid-selection.stories.tsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/storybook/src/stories/grid-selection.stories.tsx b/packages/storybook/src/stories/grid-selection.stories.tsx index 8f72561b8168a..59f1c6695897c 100644 --- a/packages/storybook/src/stories/grid-selection.stories.tsx +++ b/packages/storybook/src/stories/grid-selection.stories.tsx @@ -67,8 +67,8 @@ export const MultipleSelectWithCheckboxNoClick = () => { export function HandleSelection() { const { data } = useDemoData({ - dataSet: "Commodity", - rowLength: 100000 + dataSet: 'Commodity', + rowLength: 100000, }); const [myState, setMyState] = React.useState(false); @@ -76,11 +76,5 @@ export function HandleSelection() { setMyState(!myState); }, [myState]); - return ( - - ); + return ; } From d67b7fbeb56b0562cd5b87ee54b2b79fa3b8bae9 Mon Sep 17 00:00:00 2001 From: damien Date: Fri, 29 Jan 2021 19:32:26 +0100 Subject: [PATCH 3/9] WIP add test --- .../x-grid/src/tests/selection.XGrid.test.tsx | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 packages/grid/x-grid/src/tests/selection.XGrid.test.tsx diff --git a/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx b/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx new file mode 100644 index 0000000000000..59171aacce8f2 --- /dev/null +++ b/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx @@ -0,0 +1,49 @@ +import * as React from 'react'; +import { XGrid, useApiRef, ApiRef } from '@material-ui/x-grid'; +// @ts-expect-error need to migrate helpers to TypeScript +import { fireEvent, createClientRenderStrictMode } from 'test/utils'; +import { expect } from 'chai'; +import { getCell, getColumnHeaders, getRow } from '../../../../../test/utils/helperFn'; + +describe(' - Selection', () => { + // TODO v5: replace with createClientRender + const render = createClientRenderStrictMode(); + + before(function beforeHook() { + if (/jsdom/.test(window.navigator.userAgent)) { + // Need layouting + this.skip(); + } + }); + + it('should not reset the column order', () => { + let apiRef: ApiRef; + const Test = (props) => { + apiRef = useApiRef(); + + return ( +
+ +
+ ); + }; + + render(); + apiRef!.current.moveColumn('brand', 2); + expect(getColumnHeaders()).to.deep.equal(['desc', 'type', 'brand']); + fireEvent.click(getCell(0, 0)); + + const row = getRow(0); + expect(row.classList.contains('Mui-selected')).to.equal(true); + expect(getColumnHeaders()).to.deep.equal(['desc', 'type', 'brand']); + }); +}); From f1498e2df14580a4dbf08ecf22c3e43aab6f1dd1 Mon Sep 17 00:00:00 2001 From: damien Date: Mon, 1 Feb 2021 12:11:37 +0100 Subject: [PATCH 4/9] fix tests and cleanup --- .../x-grid/src/tests/selection.XGrid.test.tsx | 26 +++++++++++-------- .../src/stories/grid-selection.stories.tsx | 2 +- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx b/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx index 59171aacce8f2..7f578c9d12b3b 100644 --- a/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx +++ b/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx @@ -16,28 +16,32 @@ describe(' - Selection', () => { } }); - it('should not reset the column order', () => { + it('should not reset the column order when onSelectionChange is binded', () => { let apiRef: ApiRef; - const Test = (props) => { + const Test = () => { apiRef = useApiRef(); + const [rows] = React.useState([{ id: 0, brand: 'Nike' }]); + const [columns] = React.useState([{ field: 'brand' }, { field: 'desc' }, { field: 'type' }]); + + const [myState, setMyState] = React.useState(false); + const handleSelection = React.useCallback(() => { + setMyState(!myState); + }, [myState]); return ( -
+
); }; - render(); + render(); + expect(getColumnHeaders()).to.deep.equal(['brand', 'desc', 'type']); apiRef!.current.moveColumn('brand', 2); expect(getColumnHeaders()).to.deep.equal(['desc', 'type', 'brand']); fireEvent.click(getCell(0, 0)); diff --git a/packages/storybook/src/stories/grid-selection.stories.tsx b/packages/storybook/src/stories/grid-selection.stories.tsx index 59f1c6695897c..4adb08035af10 100644 --- a/packages/storybook/src/stories/grid-selection.stories.tsx +++ b/packages/storybook/src/stories/grid-selection.stories.tsx @@ -68,7 +68,7 @@ export const MultipleSelectWithCheckboxNoClick = () => { export function HandleSelection() { const { data } = useDemoData({ dataSet: 'Commodity', - rowLength: 100000, + rowLength: 100, }); const [myState, setMyState] = React.useState(false); From 5c31628ee14a54a7b533af3b64f32d50db7e3159 Mon Sep 17 00:00:00 2001 From: damien Date: Mon, 1 Feb 2021 12:16:00 +0100 Subject: [PATCH 5/9] fix import --- packages/grid/x-grid/src/tests/selection.XGrid.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx b/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx index 7f578c9d12b3b..a9826d084457a 100644 --- a/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx +++ b/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx @@ -3,7 +3,7 @@ import { XGrid, useApiRef, ApiRef } from '@material-ui/x-grid'; // @ts-expect-error need to migrate helpers to TypeScript import { fireEvent, createClientRenderStrictMode } from 'test/utils'; import { expect } from 'chai'; -import { getCell, getColumnHeaders, getRow } from '../../../../../test/utils/helperFn'; +import { getCell, getColumnHeaders, getRow } from 'test/utils/helperFn'; describe(' - Selection', () => { // TODO v5: replace with createClientRender From e16185e61b860549fb1738f9d195fedc39746776 Mon Sep 17 00:00:00 2001 From: damien tassone Date: Mon, 1 Feb 2021 16:01:59 +0100 Subject: [PATCH 6/9] Update packages/grid/x-grid/src/tests/selection.XGrid.test.tsx Co-authored-by: Olivier Tassinari --- .../x-grid/src/tests/selection.XGrid.test.tsx | 28 +++++++------------ 1 file changed, 10 insertions(+), 18 deletions(-) diff --git a/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx b/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx index a9826d084457a..b40ca817aa137 100644 --- a/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx +++ b/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx @@ -1,11 +1,10 @@ import * as React from 'react'; import { XGrid, useApiRef, ApiRef } from '@material-ui/x-grid'; -// @ts-expect-error need to migrate helpers to TypeScript -import { fireEvent, createClientRenderStrictMode } from 'test/utils'; +import { createClientRenderStrictMode } from 'test/utils'; import { expect } from 'chai'; -import { getCell, getColumnHeaders, getRow } from 'test/utils/helperFn'; +import { getColumnHeaders } from 'test/utils/helperFn'; -describe(' - Selection', () => { +describe(' - Reorder', () => { // TODO v5: replace with createClientRender const render = createClientRenderStrictMode(); @@ -16,17 +15,13 @@ describe(' - Selection', () => { } }); - it('should not reset the column order when onSelectionChange is binded', () => { + it('should not reset the column order when a prop change', () => { let apiRef: ApiRef; + const rows = [{ id: 0, brand: 'Nike' }]; + const columns = [{ field: 'brand' }, { field: 'desc' }, { field: 'type' }]; + const Test = () => { apiRef = useApiRef(); - const [rows] = React.useState([{ id: 0, brand: 'Nike' }]); - const [columns] = React.useState([{ field: 'brand' }, { field: 'desc' }, { field: 'type' }]); - - const [myState, setMyState] = React.useState(false); - const handleSelection = React.useCallback(() => { - setMyState(!myState); - }, [myState]); return (
@@ -34,20 +29,17 @@ describe(' - Selection', () => { apiRef={apiRef} rows={rows} columns={columns} - onSelectionChange={handleSelection} + onPageChange={() => {}} />
); }; - render(); + const { forceUpdate } = render(); expect(getColumnHeaders()).to.deep.equal(['brand', 'desc', 'type']); apiRef!.current.moveColumn('brand', 2); expect(getColumnHeaders()).to.deep.equal(['desc', 'type', 'brand']); - fireEvent.click(getCell(0, 0)); - - const row = getRow(0); - expect(row.classList.contains('Mui-selected')).to.equal(true); + forceUpdate(); // test stability expect(getColumnHeaders()).to.deep.equal(['desc', 'type', 'brand']); }); }); From 17a3d0d9ef4f7e9164a083af34d68c77b110d191 Mon Sep 17 00:00:00 2001 From: damien Date: Mon, 1 Feb 2021 16:12:28 +0100 Subject: [PATCH 7/9] prettier --- packages/grid/x-grid/src/tests/selection.XGrid.test.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx b/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx index b40ca817aa137..56980d6a18c17 100644 --- a/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx +++ b/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx @@ -25,12 +25,7 @@ describe(' - Reorder', () => { return (
- {}} - /> + {}} />
); }; From 9d94e55406b0deeee309062be6a49fd55cce6ec4 Mon Sep 17 00:00:00 2001 From: damien Date: Mon, 1 Feb 2021 17:36:12 +0100 Subject: [PATCH 8/9] move test to reorder file --- .../x-grid/src/tests/reorder.XGrid.test.tsx | 22 ++++++++++ .../x-grid/src/tests/selection.XGrid.test.tsx | 40 ------------------- 2 files changed, 22 insertions(+), 40 deletions(-) delete mode 100644 packages/grid/x-grid/src/tests/selection.XGrid.test.tsx diff --git a/packages/grid/x-grid/src/tests/reorder.XGrid.test.tsx b/packages/grid/x-grid/src/tests/reorder.XGrid.test.tsx index 34dabdecf937d..9358d569e290e 100644 --- a/packages/grid/x-grid/src/tests/reorder.XGrid.test.tsx +++ b/packages/grid/x-grid/src/tests/reorder.XGrid.test.tsx @@ -58,4 +58,26 @@ describe(' - Reorder', () => { expect(getColumnHeaders()).to.deep.equal(['brand', 'id']); }); }); + it('should not reset the column order when a prop change', () => { + let apiRef: ApiRef; + const rows = [{ id: 0, brand: 'Nike' }]; + const columns = [{ field: 'brand' }, { field: 'desc' }, { field: 'type' }]; + + const Test = () => { + apiRef = useApiRef(); + + return ( +
+ {}} /> +
+ ); + }; + + const { forceUpdate } = render(); + expect(getColumnHeaders()).to.deep.equal(['brand', 'desc', 'type']); + apiRef!.current.moveColumn('brand', 2); + expect(getColumnHeaders()).to.deep.equal(['desc', 'type', 'brand']); + forceUpdate(); // test stability + expect(getColumnHeaders()).to.deep.equal(['desc', 'type', 'brand']); + }); }); diff --git a/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx b/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx deleted file mode 100644 index 56980d6a18c17..0000000000000 --- a/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import * as React from 'react'; -import { XGrid, useApiRef, ApiRef } from '@material-ui/x-grid'; -import { createClientRenderStrictMode } from 'test/utils'; -import { expect } from 'chai'; -import { getColumnHeaders } from 'test/utils/helperFn'; - -describe(' - Reorder', () => { - // TODO v5: replace with createClientRender - const render = createClientRenderStrictMode(); - - before(function beforeHook() { - if (/jsdom/.test(window.navigator.userAgent)) { - // Need layouting - this.skip(); - } - }); - - it('should not reset the column order when a prop change', () => { - let apiRef: ApiRef; - const rows = [{ id: 0, brand: 'Nike' }]; - const columns = [{ field: 'brand' }, { field: 'desc' }, { field: 'type' }]; - - const Test = () => { - apiRef = useApiRef(); - - return ( -
- {}} /> -
- ); - }; - - const { forceUpdate } = render(); - expect(getColumnHeaders()).to.deep.equal(['brand', 'desc', 'type']); - apiRef!.current.moveColumn('brand', 2); - expect(getColumnHeaders()).to.deep.equal(['desc', 'type', 'brand']); - forceUpdate(); // test stability - expect(getColumnHeaders()).to.deep.equal(['desc', 'type', 'brand']); - }); -}); From dfc8388a91692ffc6f081f143a39c5d419ee7070 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 1 Feb 2021 17:52:08 +0100 Subject: [PATCH 9/9] Update packages/grid/x-grid/src/tests/reorder.XGrid.test.tsx --- packages/grid/x-grid/src/tests/reorder.XGrid.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/grid/x-grid/src/tests/reorder.XGrid.test.tsx b/packages/grid/x-grid/src/tests/reorder.XGrid.test.tsx index 9358d569e290e..88ceabf006a5e 100644 --- a/packages/grid/x-grid/src/tests/reorder.XGrid.test.tsx +++ b/packages/grid/x-grid/src/tests/reorder.XGrid.test.tsx @@ -58,6 +58,7 @@ describe(' - Reorder', () => { expect(getColumnHeaders()).to.deep.equal(['brand', 'id']); }); }); + it('should not reset the column order when a prop change', () => { let apiRef: ApiRef; const rows = [{ id: 0, brand: 'Nike' }];