From 986c16d0dd87f4f07113e12393be7fc4b1a72f83 Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 6 Oct 2021 10:48:17 +0200 Subject: [PATCH 1/4] [DataGrid] Remove old string class constants --- .../grid/constants/cssClassesConstants.ts | 14 -------------- .../grid/_modules_/grid/constants/index.ts | 1 - .../tests/columnHeaders.DataGridPro.test.tsx | 4 ++-- .../src/tests/columns.DataGridPro.test.tsx | 18 +++++++++--------- .../src/tests/events.DataGridPro.test.tsx | 5 ++--- .../src/tests/reorder.DataGridPro.test.tsx | 6 +++--- 6 files changed, 16 insertions(+), 32 deletions(-) delete mode 100644 packages/grid/_modules_/grid/constants/cssClassesConstants.ts diff --git a/packages/grid/_modules_/grid/constants/cssClassesConstants.ts b/packages/grid/_modules_/grid/constants/cssClassesConstants.ts deleted file mode 100644 index f79b283f2f869..0000000000000 --- a/packages/grid/_modules_/grid/constants/cssClassesConstants.ts +++ /dev/null @@ -1,14 +0,0 @@ -// CSS_CLASSES_CONSTANTS -export const GRID_CSS_CLASS_PREFIX = 'MuiDataGrid'; -export const GRID_ROOT_CSS_CLASS_SUFFIX = 'root'; -export const GRID_COLUMN_HEADER_CSS_CLASS_SUFFIX = 'columnHeader'; -export const GRID_ROW_CSS_CLASS_SUFFIX = 'row'; -export const GRID_CELL_CSS_CLASS_SUFFIX = 'cell'; - -export const GRID_COLUMN_HEADER_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-${GRID_COLUMN_HEADER_CSS_CLASS_SUFFIX}`; -export const GRID_ROW_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-${GRID_ROW_CSS_CLASS_SUFFIX}`; -export const GRID_CELL_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-${GRID_CELL_CSS_CLASS_SUFFIX}`; -export const GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-columnSeparator--resizable`; -export const GRID_COLUMN_HEADER_TITLE_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-columnHeaderTitleContainer`; -export const GRID_COLUMN_HEADER_DROP_ZONE_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-columnHeaderDropZone`; -export const GRID_COLUMN_HEADER_DRAGGING_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-${GRID_COLUMN_HEADER_CSS_CLASS_SUFFIX}--dragging`; diff --git a/packages/grid/_modules_/grid/constants/index.ts b/packages/grid/_modules_/grid/constants/index.ts index 17fbf260df1fd..97679668ee788 100644 --- a/packages/grid/_modules_/grid/constants/index.ts +++ b/packages/grid/_modules_/grid/constants/index.ts @@ -1,4 +1,3 @@ export * from './envConstants'; export * from './eventsConstants'; -export * from './cssClassesConstants'; export * from './localeTextConstants'; diff --git a/packages/grid/x-grid/src/tests/columnHeaders.DataGridPro.test.tsx b/packages/grid/x-grid/src/tests/columnHeaders.DataGridPro.test.tsx index d59215cb5f26c..8911af1160569 100644 --- a/packages/grid/x-grid/src/tests/columnHeaders.DataGridPro.test.tsx +++ b/packages/grid/x-grid/src/tests/columnHeaders.DataGridPro.test.tsx @@ -10,7 +10,7 @@ import { } from 'test/utils'; import { expect } from 'chai'; import { - GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS, + gridClasses, DataGridPro, } from '@mui/x-data-grid-pro'; import { getColumnHeaderCell } from 'test/utils/helperFn'; @@ -108,7 +108,7 @@ describe(' - Column Headers', () => { await waitFor(() => expect(screen.queryByRole('menu')).not.to.equal(null)); const separator = columnToResizeCell.querySelector( - `.${GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS}`, + `.${gridClasses.columnSeparator}`, ); fireEvent.mouseDown(separator); await waitFor(() => expect(screen.queryByRole('menu')).to.equal(null)); diff --git a/packages/grid/x-grid/src/tests/columns.DataGridPro.test.tsx b/packages/grid/x-grid/src/tests/columns.DataGridPro.test.tsx index a0b52c60af3dd..f9618c7f18d03 100644 --- a/packages/grid/x-grid/src/tests/columns.DataGridPro.test.tsx +++ b/packages/grid/x-grid/src/tests/columns.DataGridPro.test.tsx @@ -15,7 +15,7 @@ import { GridComponentProps, useGridApiRef, DataGridPro, - GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS, + gridClasses, } from '@mui/x-data-grid-pro'; import { getColumnHeaderCell, getCell } from 'test/utils/helperFn'; @@ -102,7 +102,7 @@ describe(' - Columns', () => { it('should allow to resize columns with the mouse', () => { render(); const separator = document.querySelector( - `.${GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS}`, + `.${gridClasses.columnSeparator}`, ); fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); @@ -120,7 +120,7 @@ describe(' - Columns', () => { } render(); const separator = document.querySelector( - `.${GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS}`, + `.${gridClasses.columnSeparator}`, )!; const now = Date.now(); fireEvent.touchStart(separator, { @@ -142,7 +142,7 @@ describe(' - Columns', () => { const onColumnResize = spy(); render(); const separator = document.querySelector( - `.${GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS}`, + `.${gridClasses.columnSeparator}`, ); fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); @@ -157,7 +157,7 @@ describe(' - Columns', () => { const onColumnWidthChange = spy(); render(); const separator = document.querySelector( - `.${GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS}`, + `.${gridClasses.columnSeparator}`, ); fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); @@ -212,7 +212,7 @@ describe(' - Columns', () => { expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' }); const separator = getColumnHeaderCell(1).querySelector( - `.${GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS}`, + `.${gridClasses.columnSeparator}`, ); fireEvent.mouseDown(separator, { clientX: 100 }); @@ -260,7 +260,7 @@ describe(' - Columns', () => { expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' }); const separator = getColumnHeaderCell(1).querySelector( - `.${GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS}`, + `.${gridClasses.columnSeparator}`, ); fireEvent.mouseDown(separator, { clientX: 100 }); @@ -308,7 +308,7 @@ describe(' - Columns', () => { expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' }); const separator = getColumnHeaderCell(1).querySelector( - `.${GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS}`, + `.${gridClasses.columnSeparator}`, ); fireEvent.mouseDown(separator, { clientX: 100 }); @@ -333,7 +333,7 @@ describe(' - Columns', () => { expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '198px' }); const separator = getColumnHeaderCell(0).querySelector( - `.${GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS}`, + `.${gridClasses.columnSeparator}`, ); fireEvent.mouseDown(separator, { clientX: 200 }); diff --git a/packages/grid/x-grid/src/tests/events.DataGridPro.test.tsx b/packages/grid/x-grid/src/tests/events.DataGridPro.test.tsx index 9fabe4d5c06a2..443f998578640 100644 --- a/packages/grid/x-grid/src/tests/events.DataGridPro.test.tsx +++ b/packages/grid/x-grid/src/tests/events.DataGridPro.test.tsx @@ -19,8 +19,7 @@ import { GridRowsProp, GridColumns, GridEvents, - GRID_CELL_CSS_CLASS, - GridApiRef, + GridApiRef, gridClasses, } from '@mui/x-data-grid-pro'; import { getCell, getColumnHeaderCell, getRow } from 'test/utils/helperFn'; import { spy } from 'sinon'; @@ -237,7 +236,7 @@ describe(' - Events Params', () => { const cell = getCell(1, 1); fireEvent.doubleClick(cell); expect(handleCellDoubleClick.callCount).to.equal(1); - expect(cell).not.to.have.class(`${GRID_CELL_CSS_CLASS}--editing`); + expect(cell).not.to.have.class(gridClasses["row--editing"]); }); it('should allow to prevent the default behavior while allowing the event to propagate', () => { diff --git a/packages/grid/x-grid/src/tests/reorder.DataGridPro.test.tsx b/packages/grid/x-grid/src/tests/reorder.DataGridPro.test.tsx index 7a8d504178b4c..9da37ac000c26 100644 --- a/packages/grid/x-grid/src/tests/reorder.DataGridPro.test.tsx +++ b/packages/grid/x-grid/src/tests/reorder.DataGridPro.test.tsx @@ -19,7 +19,7 @@ import { GridApiRef, useGridApiRef, DataGridPro, - GRID_COLUMN_HEADER_DRAGGING_CSS_CLASS, + gridClasses, } from '@mui/x-data-grid-pro'; import { useData } from 'storybook/src/hooks/useData'; import { spy } from 'sinon'; @@ -200,7 +200,7 @@ describe(' - Reorder', () => { const columnHeaderDraggableContainer = columnHeader.firstChild as HTMLElement; fireEvent.dragStart(columnHeaderDraggableContainer.firstChild); expect( - columnHeaderDraggableContainer.classList.contains(GRID_COLUMN_HEADER_DRAGGING_CSS_CLASS), + columnHeaderDraggableContainer.classList.contains(gridClasses["columnHeader--dragging"]), ).to.equal(false); }); @@ -289,7 +289,7 @@ describe(' - Reorder', () => { fireEvent.dragStart(dragCol); expect(dragCol).to.have.attribute('draggable', 'false'); - expect(dragCol).not.to.have.class(GRID_COLUMN_HEADER_DRAGGING_CSS_CLASS); + expect(dragCol).not.to.have.class(gridClasses["columnHeader--dragging"]); fireEvent.dragEnter(targetCol); const dragOverEvent = createDragOverEvent(targetCol); From a3e502463a1c448785d2b7381180b1d937f908f2 Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 6 Oct 2021 12:46:52 +0200 Subject: [PATCH 2/4] Prettier --- .../tests/columnHeaders.DataGridPro.test.tsx | 9 ++---- .../src/tests/columns.DataGridPro.test.tsx | 32 +++++-------------- .../src/tests/events.DataGridPro.test.tsx | 5 +-- .../src/tests/reorder.DataGridPro.test.tsx | 11 ++----- 4 files changed, 16 insertions(+), 41 deletions(-) diff --git a/packages/grid/x-grid/src/tests/columnHeaders.DataGridPro.test.tsx b/packages/grid/x-grid/src/tests/columnHeaders.DataGridPro.test.tsx index 8911af1160569..1c671aa772be1 100644 --- a/packages/grid/x-grid/src/tests/columnHeaders.DataGridPro.test.tsx +++ b/packages/grid/x-grid/src/tests/columnHeaders.DataGridPro.test.tsx @@ -9,10 +9,7 @@ import { waitFor, } from 'test/utils'; import { expect } from 'chai'; -import { - gridClasses, - DataGridPro, -} from '@mui/x-data-grid-pro'; +import { gridClasses, DataGridPro } from '@mui/x-data-grid-pro'; import { getColumnHeaderCell } from 'test/utils/helperFn'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -107,9 +104,7 @@ describe(' - Column Headers', () => { fireEvent.click(menuIconButton); await waitFor(() => expect(screen.queryByRole('menu')).not.to.equal(null)); - const separator = columnToResizeCell.querySelector( - `.${gridClasses.columnSeparator}`, - ); + const separator = columnToResizeCell.querySelector(`.${gridClasses.columnSeparator}`); fireEvent.mouseDown(separator); await waitFor(() => expect(screen.queryByRole('menu')).to.equal(null)); }); diff --git a/packages/grid/x-grid/src/tests/columns.DataGridPro.test.tsx b/packages/grid/x-grid/src/tests/columns.DataGridPro.test.tsx index f9618c7f18d03..32061982c7c16 100644 --- a/packages/grid/x-grid/src/tests/columns.DataGridPro.test.tsx +++ b/packages/grid/x-grid/src/tests/columns.DataGridPro.test.tsx @@ -101,9 +101,7 @@ describe(' - Columns', () => { it('should allow to resize columns with the mouse', () => { render(); - const separator = document.querySelector( - `.${gridClasses.columnSeparator}`, - ); + const separator = document.querySelector(`.${gridClasses.columnSeparator}`); fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); fireEvent.mouseUp(separator); @@ -119,9 +117,7 @@ describe(' - Columns', () => { this.skip(); } render(); - const separator = document.querySelector( - `.${gridClasses.columnSeparator}`, - )!; + const separator = document.querySelector(`.${gridClasses.columnSeparator}`)!; const now = Date.now(); fireEvent.touchStart(separator, { changedTouches: [new Touch({ identifier: now, target: separator, clientX: 100 })], @@ -141,9 +137,7 @@ describe(' - Columns', () => { it('should call onColumnResize during resizing', () => { const onColumnResize = spy(); render(); - const separator = document.querySelector( - `.${gridClasses.columnSeparator}`, - ); + const separator = document.querySelector(`.${gridClasses.columnSeparator}`); fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); fireEvent.mouseMove(separator, { clientX: 120, buttons: 1 }); @@ -156,9 +150,7 @@ describe(' - Columns', () => { it('should call onColumnWidthChange after resizing', () => { const onColumnWidthChange = spy(); render(); - const separator = document.querySelector( - `.${gridClasses.columnSeparator}`, - ); + const separator = document.querySelector(`.${gridClasses.columnSeparator}`); fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); fireEvent.mouseMove(separator, { clientX: 120, buttons: 1 }); @@ -211,9 +203,7 @@ describe(' - Columns', () => { // @ts-expect-error need to migrate helpers to TypeScript expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' }); - const separator = getColumnHeaderCell(1).querySelector( - `.${gridClasses.columnSeparator}`, - ); + const separator = getColumnHeaderCell(1).querySelector(`.${gridClasses.columnSeparator}`); fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 150, buttons: 1 }); @@ -259,9 +249,7 @@ describe(' - Columns', () => { // @ts-expect-error need to migrate helpers to TypeScript expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' }); - const separator = getColumnHeaderCell(1).querySelector( - `.${gridClasses.columnSeparator}`, - ); + const separator = getColumnHeaderCell(1).querySelector(`.${gridClasses.columnSeparator}`); fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 150, buttons: 1 }); @@ -307,9 +295,7 @@ describe(' - Columns', () => { // @ts-expect-error need to migrate helpers to TypeScript expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' }); - const separator = getColumnHeaderCell(1).querySelector( - `.${gridClasses.columnSeparator}`, - ); + const separator = getColumnHeaderCell(1).querySelector(`.${gridClasses.columnSeparator}`); fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 150, buttons: 1 }); @@ -332,9 +318,7 @@ describe(' - Columns', () => { // @ts-expect-error need to migrate helpers to TypeScript expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '198px' }); - const separator = getColumnHeaderCell(0).querySelector( - `.${gridClasses.columnSeparator}`, - ); + const separator = getColumnHeaderCell(0).querySelector(`.${gridClasses.columnSeparator}`); fireEvent.mouseDown(separator, { clientX: 200 }); fireEvent.mouseMove(separator, { clientX: 100, buttons: 1 }); diff --git a/packages/grid/x-grid/src/tests/events.DataGridPro.test.tsx b/packages/grid/x-grid/src/tests/events.DataGridPro.test.tsx index 443f998578640..62aba2759cf01 100644 --- a/packages/grid/x-grid/src/tests/events.DataGridPro.test.tsx +++ b/packages/grid/x-grid/src/tests/events.DataGridPro.test.tsx @@ -19,7 +19,8 @@ import { GridRowsProp, GridColumns, GridEvents, - GridApiRef, gridClasses, + GridApiRef, + gridClasses, } from '@mui/x-data-grid-pro'; import { getCell, getColumnHeaderCell, getRow } from 'test/utils/helperFn'; import { spy } from 'sinon'; @@ -236,7 +237,7 @@ describe(' - Events Params', () => { const cell = getCell(1, 1); fireEvent.doubleClick(cell); expect(handleCellDoubleClick.callCount).to.equal(1); - expect(cell).not.to.have.class(gridClasses["row--editing"]); + expect(cell).not.to.have.class(gridClasses['row--editing']); }); it('should allow to prevent the default behavior while allowing the event to propagate', () => { diff --git a/packages/grid/x-grid/src/tests/reorder.DataGridPro.test.tsx b/packages/grid/x-grid/src/tests/reorder.DataGridPro.test.tsx index 9da37ac000c26..182d286b47e4d 100644 --- a/packages/grid/x-grid/src/tests/reorder.DataGridPro.test.tsx +++ b/packages/grid/x-grid/src/tests/reorder.DataGridPro.test.tsx @@ -15,12 +15,7 @@ import { getCell, raf, } from 'test/utils/helperFn'; -import { - GridApiRef, - useGridApiRef, - DataGridPro, - gridClasses, -} from '@mui/x-data-grid-pro'; +import { GridApiRef, useGridApiRef, DataGridPro, gridClasses } from '@mui/x-data-grid-pro'; import { useData } from 'storybook/src/hooks/useData'; import { spy } from 'sinon'; @@ -200,7 +195,7 @@ describe(' - Reorder', () => { const columnHeaderDraggableContainer = columnHeader.firstChild as HTMLElement; fireEvent.dragStart(columnHeaderDraggableContainer.firstChild); expect( - columnHeaderDraggableContainer.classList.contains(gridClasses["columnHeader--dragging"]), + columnHeaderDraggableContainer.classList.contains(gridClasses['columnHeader--dragging']), ).to.equal(false); }); @@ -289,7 +284,7 @@ describe(' - Reorder', () => { fireEvent.dragStart(dragCol); expect(dragCol).to.have.attribute('draggable', 'false'); - expect(dragCol).not.to.have.class(gridClasses["columnHeader--dragging"]); + expect(dragCol).not.to.have.class(gridClasses['columnHeader--dragging']); fireEvent.dragEnter(targetCol); const dragOverEvent = createDragOverEvent(targetCol); From ccb357501d3b273af7a2bafb0f23185c1486affb Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 12 Oct 2021 08:39:02 +0200 Subject: [PATCH 3/4] Fix --- .../src/tests/columnHeaders.DataGridPro.test.tsx | 2 +- .../src/tests/columns.DataGridPro.test.tsx | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/grid/x-grid/src/tests/columnHeaders.DataGridPro.test.tsx b/packages/grid/x-grid/src/tests/columnHeaders.DataGridPro.test.tsx index 1c671aa772be1..4e910a416683a 100644 --- a/packages/grid/x-grid/src/tests/columnHeaders.DataGridPro.test.tsx +++ b/packages/grid/x-grid/src/tests/columnHeaders.DataGridPro.test.tsx @@ -104,7 +104,7 @@ describe(' - Column Headers', () => { fireEvent.click(menuIconButton); await waitFor(() => expect(screen.queryByRole('menu')).not.to.equal(null)); - const separator = columnToResizeCell.querySelector(`.${gridClasses.columnSeparator}`); + const separator = columnToResizeCell.querySelector(`.${gridClasses['columnSeparator--resizable']}`); fireEvent.mouseDown(separator); await waitFor(() => expect(screen.queryByRole('menu')).to.equal(null)); }); diff --git a/packages/grid/x-grid/src/tests/columns.DataGridPro.test.tsx b/packages/grid/x-grid/src/tests/columns.DataGridPro.test.tsx index 32061982c7c16..ab147fd5d23ff 100644 --- a/packages/grid/x-grid/src/tests/columns.DataGridPro.test.tsx +++ b/packages/grid/x-grid/src/tests/columns.DataGridPro.test.tsx @@ -101,7 +101,7 @@ describe(' - Columns', () => { it('should allow to resize columns with the mouse', () => { render(); - const separator = document.querySelector(`.${gridClasses.columnSeparator}`); + const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`); fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); fireEvent.mouseUp(separator); @@ -117,7 +117,7 @@ describe(' - Columns', () => { this.skip(); } render(); - const separator = document.querySelector(`.${gridClasses.columnSeparator}`)!; + const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!; const now = Date.now(); fireEvent.touchStart(separator, { changedTouches: [new Touch({ identifier: now, target: separator, clientX: 100 })], @@ -137,7 +137,7 @@ describe(' - Columns', () => { it('should call onColumnResize during resizing', () => { const onColumnResize = spy(); render(); - const separator = document.querySelector(`.${gridClasses.columnSeparator}`); + const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`); fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); fireEvent.mouseMove(separator, { clientX: 120, buttons: 1 }); @@ -150,7 +150,7 @@ describe(' - Columns', () => { it('should call onColumnWidthChange after resizing', () => { const onColumnWidthChange = spy(); render(); - const separator = document.querySelector(`.${gridClasses.columnSeparator}`); + const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`); fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 }); fireEvent.mouseMove(separator, { clientX: 120, buttons: 1 }); @@ -203,7 +203,7 @@ describe(' - Columns', () => { // @ts-expect-error need to migrate helpers to TypeScript expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' }); - const separator = getColumnHeaderCell(1).querySelector(`.${gridClasses.columnSeparator}`); + const separator = getColumnHeaderCell(1).querySelector(`.${gridClasses['columnSeparator--resizable']}`); fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 150, buttons: 1 }); @@ -249,7 +249,7 @@ describe(' - Columns', () => { // @ts-expect-error need to migrate helpers to TypeScript expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' }); - const separator = getColumnHeaderCell(1).querySelector(`.${gridClasses.columnSeparator}`); + const separator = getColumnHeaderCell(1).querySelector(`.${gridClasses['columnSeparator--resizable']}`); fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 150, buttons: 1 }); @@ -295,7 +295,7 @@ describe(' - Columns', () => { // @ts-expect-error need to migrate helpers to TypeScript expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' }); - const separator = getColumnHeaderCell(1).querySelector(`.${gridClasses.columnSeparator}`); + const separator = getColumnHeaderCell(1).querySelector(`.${gridClasses['columnSeparator--resizable']}`); fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 150, buttons: 1 }); @@ -318,7 +318,7 @@ describe(' - Columns', () => { // @ts-expect-error need to migrate helpers to TypeScript expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '198px' }); - const separator = getColumnHeaderCell(0).querySelector(`.${gridClasses.columnSeparator}`); + const separator = getColumnHeaderCell(0).querySelector(`.${gridClasses['columnSeparator--resizable']}`); fireEvent.mouseDown(separator, { clientX: 200 }); fireEvent.mouseMove(separator, { clientX: 100, buttons: 1 }); From 59ad5755465c236232bc027df3de977f315e83a7 Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 12 Oct 2021 08:39:12 +0200 Subject: [PATCH 4/4] Code review --- .../src/tests/columnHeaders.DataGridPro.test.tsx | 4 +++- .../src/tests/columns.DataGridPro.test.tsx | 16 ++++++++++++---- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/grid/x-grid/src/tests/columnHeaders.DataGridPro.test.tsx b/packages/grid/x-grid/src/tests/columnHeaders.DataGridPro.test.tsx index 4e910a416683a..84cb0766a6224 100644 --- a/packages/grid/x-grid/src/tests/columnHeaders.DataGridPro.test.tsx +++ b/packages/grid/x-grid/src/tests/columnHeaders.DataGridPro.test.tsx @@ -104,7 +104,9 @@ describe(' - Column Headers', () => { fireEvent.click(menuIconButton); await waitFor(() => expect(screen.queryByRole('menu')).not.to.equal(null)); - const separator = columnToResizeCell.querySelector(`.${gridClasses['columnSeparator--resizable']}`); + const separator = columnToResizeCell.querySelector( + `.${gridClasses['columnSeparator--resizable']}`, + ); fireEvent.mouseDown(separator); await waitFor(() => expect(screen.queryByRole('menu')).to.equal(null)); }); diff --git a/packages/grid/x-grid/src/tests/columns.DataGridPro.test.tsx b/packages/grid/x-grid/src/tests/columns.DataGridPro.test.tsx index ab147fd5d23ff..5db83f1912866 100644 --- a/packages/grid/x-grid/src/tests/columns.DataGridPro.test.tsx +++ b/packages/grid/x-grid/src/tests/columns.DataGridPro.test.tsx @@ -203,7 +203,9 @@ describe(' - Columns', () => { // @ts-expect-error need to migrate helpers to TypeScript expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' }); - const separator = getColumnHeaderCell(1).querySelector(`.${gridClasses['columnSeparator--resizable']}`); + const separator = getColumnHeaderCell(1).querySelector( + `.${gridClasses['columnSeparator--resizable']}`, + ); fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 150, buttons: 1 }); @@ -249,7 +251,9 @@ describe(' - Columns', () => { // @ts-expect-error need to migrate helpers to TypeScript expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' }); - const separator = getColumnHeaderCell(1).querySelector(`.${gridClasses['columnSeparator--resizable']}`); + const separator = getColumnHeaderCell(1).querySelector( + `.${gridClasses['columnSeparator--resizable']}`, + ); fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 150, buttons: 1 }); @@ -295,7 +299,9 @@ describe(' - Columns', () => { // @ts-expect-error need to migrate helpers to TypeScript expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' }); - const separator = getColumnHeaderCell(1).querySelector(`.${gridClasses['columnSeparator--resizable']}`); + const separator = getColumnHeaderCell(1).querySelector( + `.${gridClasses['columnSeparator--resizable']}`, + ); fireEvent.mouseDown(separator, { clientX: 100 }); fireEvent.mouseMove(separator, { clientX: 150, buttons: 1 }); @@ -318,7 +324,9 @@ describe(' - Columns', () => { // @ts-expect-error need to migrate helpers to TypeScript expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '198px' }); - const separator = getColumnHeaderCell(0).querySelector(`.${gridClasses['columnSeparator--resizable']}`); + const separator = getColumnHeaderCell(0).querySelector( + `.${gridClasses['columnSeparator--resizable']}`, + ); fireEvent.mouseDown(separator, { clientX: 200 }); fireEvent.mouseMove(separator, { clientX: 100, buttons: 1 });