From 6f91713d76646538f23c07f7995f359d5944653f Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Mon, 11 Apr 2022 13:03:57 +0200 Subject: [PATCH] [core] Unify tests (#4368) --- .../columnResize/useGridColumnResize.tsx | 8 +-- .../tests/columnPinning.DataGridPro.test.tsx | 66 ++++++++--------- .../tests/detailPanel.DataGridPro.test.tsx | 4 +- .../src/tests/filtering.DataGridPro.test.tsx | 24 +++---- .../src/tests/pagination.DataGridPro.test.tsx | 12 ++-- .../tests/rowGrouping.DataGridPro.test.tsx | 18 ++--- .../src/tests/rows.DataGridPro.test.tsx | 42 +++++------ .../src/tests/sorting.DataGridPro.test.tsx | 42 +++++------ .../src/tests/state.DataGridPro.test.tsx | 2 +- .../src/components/cell/GridCell.tsx | 2 +- .../features/export/useGridPrintExport.tsx | 4 +- .../src/hooks/features/focus/useGridFocus.ts | 2 +- .../src/tests/filtering.DataGrid.test.tsx | 2 +- .../src/tests/keyboard.DataGrid.test.tsx | 15 ++-- .../src/tests/layout.DataGrid.test.tsx | 18 ++--- .../src/tests/pagination.DataGrid.test.tsx | 54 +++++++------- .../src/tests/rows.DataGrid.test.tsx | 6 +- .../src/tests/selection.DataGrid.test.tsx | 14 ++-- .../src/tests/sorting.DataGrid.test.tsx | 70 +++++++++---------- .../grid/x-data-grid/src/utils/domUtils.ts | 12 ++-- test/utils/helperFn.ts | 14 ++-- 21 files changed, 213 insertions(+), 218 deletions(-) diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx index 6a15c389e4a6..0870c57d60af 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx @@ -222,15 +222,15 @@ export const useGridColumnResize = ( colDefRef.current = colDef as GridStateColDef; colElementRef.current = - apiRef.current.columnHeadersContainerElementRef?.current!.querySelector( + apiRef.current.columnHeadersContainerElementRef?.current!.querySelector( `[data-field="${colDef.field}"]`, - ) as HTMLDivElement; + )!; colCellElementsRef.current = findGridCellElementsFromCol( colElementRef.current, ) as NodeListOf; - const doc = ownerDocument(apiRef.current.rootElementRef!.current as HTMLElement); + const doc = ownerDocument(apiRef.current.rootElementRef!.current); doc.body.style.cursor = 'col-resize'; separatorSide.current = getSeparatorSide(event.currentTarget); @@ -350,7 +350,7 @@ export const useGridColumnResize = ( }); const stopListening = React.useCallback(() => { - const doc = ownerDocument(apiRef.current.rootElementRef!.current as HTMLElement); + const doc = ownerDocument(apiRef.current.rootElementRef!.current); doc.body.style.removeProperty('cursor'); doc.removeEventListener('mousemove', handleResizeMouseMove); doc.removeEventListener('mouseup', handleResizeMouseUp); diff --git a/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx index 38d4adb3aeb1..002f65b32262 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx @@ -107,9 +107,9 @@ describe(' - Column pinning', () => { this.skip(); } render(); - const renderZone = document.querySelector( + const renderZone = document.querySelector( `.${gridClasses.virtualScrollerRenderZone}`, - ) as HTMLDivElement; + )!; expect(renderZone).toHaveInlineStyle({ transform: 'translate3d(100px, 0px, 0px)' }); const columnHeader = getColumnHeaderCell(0); const separator = columnHeader.querySelector(`.${gridClasses['columnSeparator--resizable']}`); @@ -126,9 +126,9 @@ describe(' - Column pinning', () => { this.skip(); } render(); - const columnHeadersInner = document.querySelector( + const columnHeadersInner = document.querySelector( `.${gridClasses.columnHeadersInner}`, - ) as HTMLDivElement; + )!; expect(columnHeadersInner).toHaveInlineStyle({ transform: 'translate3d(100px, 0px, 0px)' }); const columnHeader = getColumnHeaderCell(0); const separator = columnHeader.querySelector(`.${gridClasses['columnSeparator--resizable']}`); @@ -220,7 +220,7 @@ describe(' - Column pinning', () => { expect(getColumnHeadersTextContent()).to.deep.equal(['id', '', 'Currency Pair']); }); - describe('props: onPinnedColumnsChange', () => { + describe('prop: onPinnedColumnsChange', () => { it('should call when a column is pinned', () => { const handlePinnedColumnsChange = spy(); render(); @@ -258,12 +258,12 @@ describe(' - Column pinning', () => { }); }); - describe('props: pinnedColumns', () => { + describe('prop: pinnedColumns', () => { it('should pin the columns specified', () => { render(); - const leftColumns = document.querySelector( + const leftColumns = document.querySelector( `.${gridClasses['pinnedColumns--left']}`, - ) as HTMLDivElement; + )!; expect(leftColumns.querySelector('[data-field="currencyPair"]')).not.to.equal(null); }); @@ -284,15 +284,15 @@ describe(' - Column pinning', () => { it('should filter our duplicated columns', () => { render(); - const leftColumns = document.querySelector( + const leftColumns = document.querySelector( `.${gridClasses['pinnedColumns--left']}`, - ) as HTMLDivElement; + )!; expect(leftColumns.querySelector('[data-field="currencyPair"]')).not.to.equal(null); expect(document.querySelector(`.${gridClasses['pinnedColumns--right']}`)).to.equal(null); }); }); - describe('props: disableColumnPinning', () => { + describe('prop: disableColumnPinning', () => { it('should not add any button to the column menu', () => { render(); const columnCell = document.querySelector('[role="columnheader"][data-field="id"]')!; @@ -331,12 +331,12 @@ describe(' - Column pinning', () => { describe('apiRef', () => { it('should reorder the columns to render the left pinned columns before all other columns', () => { render(); - const leftColumns = document.querySelector( + const leftColumns = document.querySelector( `.${gridClasses['pinnedColumns--left']}`, - ) as HTMLDivElement; - const renderZone = document.querySelector( + )!; + const renderZone = document.querySelector( `.${gridClasses.virtualScrollerRenderZone}`, - ) as HTMLDivElement; + )!; expect(leftColumns.querySelector('[data-field="currencyPair"]')).not.to.equal(null); expect(leftColumns.querySelector('[data-field="price1M"]')).not.to.equal(null); expect(renderZone.querySelector('[data-field="currencyPair"]')).to.equal(null); @@ -345,12 +345,12 @@ describe(' - Column pinning', () => { it('should reorder the columns to render the right pinned columns after all other columns', () => { render(); - const rightColumns = document.querySelector( + const rightColumns = document.querySelector( `.${gridClasses['pinnedColumns--right']}`, - ) as HTMLDivElement; - const renderZone = document.querySelector( + )!; + const renderZone = document.querySelector( `.${gridClasses.virtualScrollerRenderZone}`, - ) as HTMLDivElement; + )!; expect(rightColumns.querySelector('[data-field="price16M"]')).not.to.equal(null); expect(rightColumns.querySelector('[data-field="price17M"]')).not.to.equal(null); expect(renderZone.querySelector('[data-field="price16M"]')).to.equal(null); @@ -367,37 +367,37 @@ describe(' - Column pinning', () => { describe('pinColumn', () => { it('should pin the given column', () => { render(); - const renderZone = document.querySelector( + const renderZone = document.querySelector( `.${gridClasses.virtualScrollerRenderZone}`, - ) as HTMLDivElement; + )!; expect(renderZone.querySelector('[data-field="currencyPair"]')).not.to.equal(null); apiRef.current.pinColumn('currencyPair', GridPinnedPosition.left); - const leftColumns = document.querySelector( + const leftColumns = document.querySelector( `.${gridClasses['pinnedColumns--left']}`, - ) as HTMLDivElement; + )!; expect(leftColumns.querySelector('[data-field="currencyPair"]')).not.to.equal(null); expect(renderZone.querySelector('[data-field="currencyPair"]')).to.equal(null); }); it('should change the side when called on a pinned column', () => { render(); - const renderZone = document.querySelector( + const renderZone = document.querySelector( `.${gridClasses.virtualScrollerRenderZone}`, - ) as HTMLDivElement; + )!; expect(renderZone.querySelector('[data-field="currencyPair"]')).not.to.equal(null); expect(renderZone.querySelector('[data-field="currencyPair"]')).not.to.equal(null); apiRef.current.pinColumn('currencyPair', GridPinnedPosition.left); - const leftColumns = document.querySelector( + const leftColumns = document.querySelector( `.${gridClasses['pinnedColumns--left']}`, - ) as HTMLDivElement; + )!; expect(leftColumns.querySelector('[data-field="currencyPair"]')).not.to.equal(null); expect(renderZone.querySelector('[data-field="currencyPair"]')).to.equal(null); apiRef.current.pinColumn('currencyPair', GridPinnedPosition.right); - const rightColumns = document.querySelector( + const rightColumns = document.querySelector( `.${gridClasses['pinnedColumns--right']}`, - ) as HTMLDivElement; + )!; expect(document.querySelector(`.${gridClasses['pinnedColumns--left']}`)).to.equal(null); expect(rightColumns.querySelector('[data-field="currencyPair"]')).not.to.equal(null); }); @@ -405,9 +405,9 @@ describe(' - Column pinning', () => { it('should not change the columns when called on a pinned column with the same side ', () => { render(); apiRef.current.pinColumn('currencyPair', GridPinnedPosition.left); - const leftColumns = document.querySelector( + const leftColumns = document.querySelector( `.${gridClasses['pinnedColumns--left']}`, - ) as HTMLDivElement; + )!; expect(leftColumns.querySelector('[data-id="0"]')?.children).to.have.length(1); apiRef.current.pinColumn('currencyPair', GridPinnedPosition.left); expect(leftColumns.querySelector('[data-id="0"]')?.children).to.have.length(1); @@ -421,9 +421,9 @@ describe(' - Column pinning', () => { expect(document.querySelector(`.${gridClasses['pinnedColumns--left']}`)).not.to.equal(null); apiRef.current.unpinColumn('currencyPair'); expect(document.querySelector(`.${gridClasses['pinnedColumns--left']}`)).to.equal(null); - const renderZone = document.querySelector( + const renderZone = document.querySelector( `.${gridClasses.virtualScrollerRenderZone}`, - ) as HTMLDivElement; + )!; expect(renderZone.querySelector('[data-field="currencyPair"]')).not.to.equal(null); }); }); diff --git a/packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx index 1d59e417a37d..c38e120c4e27 100644 --- a/packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx @@ -291,7 +291,7 @@ describe(' - Detail panel', () => { expect(handleSelectionModelChange.callCount).to.equal(0); }); - describe('props: onDetailPanelsExpandedRowIds', () => { + describe('prop: onDetailPanelsExpandedRowIds', () => { it('shoull call when a row is expanded or closed', () => { const handleDetailPanelsExpandedRowIdsChange = spy(); render( @@ -326,7 +326,7 @@ describe(' - Detail panel', () => { }); }); - describe('props: detailPanelExpandedRowIds', () => { + describe('prop: detailPanelExpandedRowIds', () => { it('should open the detail panel of the specified rows', () => { render( - Filter', () => { it('should apply the filterModel prop correctly', () => { render(); - expect(getColumnValues()).to.deep.equal(['Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Puma']); }); it('should apply the filterModel prop correctly on GridApiRef setRows', () => { @@ -93,14 +93,14 @@ describe(' - Filter', () => { }, ]; apiRef.current.setRows(newRows); - expect(getColumnValues()).to.deep.equal(['Asics']); + expect(getColumnValues(0)).to.deep.equal(['Asics']); }); it('should apply the filterModel prop correctly on GridApiRef update row data', () => { render(); apiRef.current.updateRows([{ id: 1, brand: 'Fila' }]); apiRef.current.updateRows([{ id: 0, brand: 'Patagonia' }]); - expect(getColumnValues()).to.deep.equal(['Patagonia', 'Fila', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Patagonia', 'Fila', 'Puma']); }); it('should allow apiRef to setFilterModel', () => { @@ -114,7 +114,7 @@ describe(' - Filter', () => { }, ], }); - expect(getColumnValues()).to.deep.equal(['Adidas']); + expect(getColumnValues(0)).to.deep.equal(['Adidas']); }); it('should allow multiple filter and default to AND', () => { @@ -135,7 +135,7 @@ describe(' - Filter', () => { ], }; render(); - expect(getColumnValues()).to.deep.equal(['Puma']); + expect(getColumnValues(0)).to.deep.equal(['Puma']); }); it('should allow multiple filter via apiRef', () => { @@ -157,7 +157,7 @@ describe(' - Filter', () => { ], }; apiRef.current.setFilterModel(newModel); - expect(getColumnValues()).to.deep.equal(['Adidas']); + expect(getColumnValues(0)).to.deep.equal(['Adidas']); }); it('should allow multiple filter and changing the linkOperator', () => { @@ -179,7 +179,7 @@ describe(' - Filter', () => { linkOperator: GridLinkOperator.Or, }; render(); - expect(getColumnValues()).to.deep.equal(['Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Puma']); }); it('should trigger onFilterModelChange when the link operator changes but not change the state', () => { @@ -210,7 +210,7 @@ describe(' - Filter', () => { />, ); expect(onFilterModelChange.callCount).to.equal(0); - expect(getColumnValues()).to.deep.equal([]); + expect(getColumnValues(0)).to.deep.equal([]); // The first combo is hidden and we include hidden elements to make the query faster // https://github.com/testing-library/dom-testing-library/issues/820#issuecomment-726936225 @@ -219,7 +219,7 @@ describe(' - Filter', () => { ]; fireEvent.change(select, { target: { value: 'or' } }); expect(onFilterModelChange.callCount).to.equal(1); - expect(getColumnValues()).to.deep.equal([]); + expect(getColumnValues(0)).to.deep.equal([]); }); it('should call onFilterModelChange when the value is emptied', () => { @@ -276,9 +276,9 @@ describe(' - Filter', () => { ], }; const { setProps } = render(); - expect(getColumnValues()).to.deep.equal(['Adidas']); + expect(getColumnValues(0)).to.deep.equal(['Adidas']); setProps({ filterModel: { items: [] } }); - expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); }); it('should show the latest visibleRows', () => { @@ -296,7 +296,7 @@ describe(' - Filter', () => { const input = screen.getByPlaceholderText('Filter value'); fireEvent.change(input, { target: { value: 'ad' } }); clock.tick(SUBMIT_FILTER_STROKE_TIME); - expect(getColumnValues()).to.deep.equal(['Adidas']); + expect(getColumnValues(0)).to.deep.equal(['Adidas']); expect(apiRef.current.getVisibleRowModels().size).to.equal(1); expect(apiRef.current.getVisibleRowModels().get(1)).to.deep.equal({ id: 1, brand: 'Adidas' }); diff --git a/packages/grid/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx index cd0cfb80e5a6..b3b2c3ce853f 100644 --- a/packages/grid/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx @@ -32,12 +32,12 @@ describe(' - Pagination', () => { render(); - expect(getColumnValues()).to.deep.equal(['0']); + expect(getColumnValues(0)).to.deep.equal(['0']); act(() => { apiRef.current.setPage(1); }); - expect(getColumnValues()).to.deep.equal(['1']); + expect(getColumnValues(0)).to.deep.equal(['1']); }); it('should apply last page if trying to go to a non-existing page', () => { @@ -61,12 +61,12 @@ describe(' - Pagination', () => { render(); - expect(getColumnValues()).to.deep.equal(['0']); + expect(getColumnValues(0)).to.deep.equal(['0']); act(() => { apiRef.current.setPage(50); }); - expect(getColumnValues()).to.deep.equal(['19']); + expect(getColumnValues(0)).to.deep.equal(['19']); }); }); @@ -96,12 +96,12 @@ describe(' - Pagination', () => { render(); clock.runToLast(); - expect(getColumnValues()).to.deep.equal(['0', '1', '2', '3', '4']); + expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3', '4']); act(() => { apiRef.current.setPageSize(2); }); - expect(getColumnValues()).to.deep.equal(['0', '1']); + expect(getColumnValues(0)).to.deep.equal(['0', '1']); }); }); }); diff --git a/packages/grid/x-data-grid-pro/src/tests/rowGrouping.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowGrouping.DataGridPro.test.tsx index e68a4ba67c19..c52b63a43247 100644 --- a/packages/grid/x-data-grid-pro/src/tests/rowGrouping.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/rowGrouping.DataGridPro.test.tsx @@ -129,7 +129,7 @@ describe(' - Group Rows By Column', () => { setProps({ rowGroupingModel: ['category2'] }); expect(getColumnValues(0)).to.deep.equal(['Cat 1 (2)', '', '', 'Cat 2 (3)', '', '', '']); setProps({ rowGroupingModel: ['category1', 'category2'] }); - expect(getColumnValues()).to.deep.equal([ + expect(getColumnValues(0)).to.deep.equal([ 'Cat A (3)', 'Cat 1 (1)', '', @@ -200,7 +200,7 @@ describe(' - Group Rows By Column', () => { }); }); - describe('props: rowGroupingColumnMode', () => { + describe('prop: rowGroupingColumnMode', () => { it('should gather all the grouping criteria into a single column when rowGroupingColumnMode is not defined', () => { render( - Group Rows By Column', () => { }); }); - describe('props: disableRowGrouping', () => { + describe('prop: disableRowGrouping', () => { // TODO: Remove once the feature is stable it('should set `disableRowGrouping` to `true` if `experimentalFeatures.rowGrouping = false', () => { const disableRowGroupingSpy = spy(); @@ -687,7 +687,7 @@ describe(' - Group Rows By Column', () => { }); }); - describe('props: groupingColDef when groupingColumMode = "single"', () => { + describe('prop: groupingColDef when groupingColumMode = "single"', () => { it('should not allow to override the field', () => { render( - Group Rows By Column', () => { }); }); - describe('props: groupingColDef when groupingColumMode = "multiple"', () => { + describe('prop: groupingColDef when groupingColumMode = "multiple"', () => { it('should not allow to override the field', () => { render( - Group Rows By Column', () => { }); describe('sorting', () => { - describe('props: rowGroupingColumnMode = "single"', () => { + describe('prop: rowGroupingColumnMode = "single"', () => { it('should use the top level grouping criteria for sorting if mainGroupingCriteria and leafField are not defined', () => { render( - Group Rows By Column', () => { }); }); - describe('props: rowGroupingColumnMode = "multiple"', () => { + describe('prop: rowGroupingColumnMode = "multiple"', () => { it('should use the column grouping criteria for sorting if mainGroupingCriteria and leafField are not defined', () => { render( - Group Rows By Column', () => { describe('filtering', () => { clock.withFakeTimers(); - describe('props: rowGroupingColumnMode = "single"', () => { + describe('prop: rowGroupingColumnMode = "single"', () => { it('should use the top level grouping criteria for filtering if mainGroupingCriteria and leafField are not defined', () => { render( - Group Rows By Column', () => { }); }); - describe('props: rowGroupingColumnMode = "multiple"', () => { + describe('prop: rowGroupingColumnMode = "multiple"', () => { it('should use the column grouping criteria for filtering if mainGroupingCriteria and leafField are not defined', () => { render( - Rows', () => { ); }; render(); - expect(getColumnValues()).to.deep.equal(['c1', 'c2', 'c3']); + expect(getColumnValues(0)).to.deep.equal(['c1', 'c2', 'c3']); apiRef!.current.updateRows([ { clientId: 'c2', age: 30 }, { clientId: 'c3', age: 31 }, @@ -130,7 +130,7 @@ describe(' - Rows', () => { }); }); - describe('props: rows', () => { + describe('prop: rows', () => { it('should not throttle even when props.throttleRowsMs is defined', () => { const { rows, columns } = getData(5, 2); @@ -189,19 +189,19 @@ describe(' - Rows', () => { it('should not throttle by default', () => { render(); - expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); apiRef.current.updateRows([{ id: 1, brand: 'Fila' }]); - expect(getColumnValues()).to.deep.equal(['Nike', 'Fila', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Fila', 'Puma']); }); it('should allow to enable throttle', () => { render(); - expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); apiRef.current.updateRows([{ id: 1, brand: 'Fila' }]); clock.tick(50); - expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); clock.tick(50); - expect(getColumnValues()).to.deep.equal(['Nike', 'Fila', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Fila', 'Puma']); }); it('should allow to update row data', () => { @@ -209,7 +209,7 @@ describe(' - Rows', () => { apiRef.current.updateRows([{ id: 1, brand: 'Fila' }]); apiRef.current.updateRows([{ id: 0, brand: 'Pata' }]); apiRef.current.updateRows([{ id: 2, brand: 'Pum' }]); - expect(getColumnValues()).to.deep.equal(['Pata', 'Fila', 'Pum']); + expect(getColumnValues(0)).to.deep.equal(['Pata', 'Fila', 'Pum']); }); it('update row data can also add rows', () => { @@ -218,7 +218,7 @@ describe(' - Rows', () => { apiRef.current.updateRows([{ id: 0, brand: 'Pata' }]); apiRef.current.updateRows([{ id: 2, brand: 'Pum' }]); apiRef.current.updateRows([{ id: 3, brand: 'Jordan' }]); - expect(getColumnValues()).to.deep.equal(['Pata', 'Fila', 'Pum', 'Jordan']); + expect(getColumnValues(0)).to.deep.equal(['Pata', 'Fila', 'Pum', 'Jordan']); }); it('update row data can also add rows in bulk', () => { @@ -229,7 +229,7 @@ describe(' - Rows', () => { { id: 2, brand: 'Pum' }, { id: 3, brand: 'Jordan' }, ]); - expect(getColumnValues()).to.deep.equal(['Pata', 'Fila', 'Pum', 'Jordan']); + expect(getColumnValues(0)).to.deep.equal(['Pata', 'Fila', 'Pum', 'Jordan']); }); it('update row data can also delete rows', () => { @@ -238,7 +238,7 @@ describe(' - Rows', () => { apiRef.current.updateRows([{ id: 0, brand: 'Apple' }]); apiRef.current.updateRows([{ id: 2, _action: 'delete' }]); apiRef.current.updateRows([{ id: 5, brand: 'Atari' }]); - expect(getColumnValues()).to.deep.equal(['Apple', 'Atari']); + expect(getColumnValues(0)).to.deep.equal(['Apple', 'Atari']); }); it('update row data can also delete rows in bulk', () => { @@ -249,7 +249,7 @@ describe(' - Rows', () => { { id: 2, _action: 'delete' }, { id: 5, brand: 'Atari' }, ]); - expect(getColumnValues()).to.deep.equal(['Apple', 'Atari']); + expect(getColumnValues(0)).to.deep.equal(['Apple', 'Atari']); }); it('update row data should process getRowId', () => { @@ -269,14 +269,14 @@ describe(' - Rows', () => { }; render(); - expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); apiRef.current.updateRows([ { idField: 1, _action: 'delete' }, { idField: 0, brand: 'Apple' }, { idField: 2, _action: 'delete' }, { idField: 5, brand: 'Atari' }, ]); - expect(getColumnValues()).to.deep.equal(['Apple', 'Atari']); + expect(getColumnValues(0)).to.deep.equal(['Apple', 'Atari']); }); }); @@ -315,7 +315,7 @@ describe(' - Rows', () => { it('should not throttle by default', () => { render(); - expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); const newRows = [ { id: 3, @@ -324,12 +324,12 @@ describe(' - Rows', () => { ]; apiRef.current.setRows(newRows); - expect(getColumnValues()).to.deep.equal(['Asics']); + expect(getColumnValues(0)).to.deep.equal(['Asics']); }); it('should allow to enable throttle', () => { render(); - expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); const newRows = [ { id: 3, @@ -339,9 +339,9 @@ describe(' - Rows', () => { apiRef.current.setRows(newRows); clock.tick(50); - expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); clock.tick(50); - expect(getColumnValues()).to.deep.equal(['Asics']); + expect(getColumnValues(0)).to.deep.equal(['Asics']); }); }); @@ -389,9 +389,9 @@ describe(' - Rows', () => { ); const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; - const renderingZone = document.querySelector( + const renderingZone = document.querySelector( '.MuiDataGrid-virtualScrollerRenderZone', - )! as HTMLElement; + )!; virtualScroller.scrollTop = 10e6; // scroll to the bottom virtualScroller.dispatchEvent(new Event('scroll')); diff --git a/packages/grid/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx index 01654fb3d572..501a6268d2ac 100644 --- a/packages/grid/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx @@ -65,7 +65,7 @@ describe(' - Sorting', () => { it('should apply the sortModel prop correctly', () => { renderBrandSortedAsc(); - expect(getColumnValues()).to.deep.equal(['Adidas', 'Nike', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']); }); it('should apply the sortModel prop correctly on GridApiRef setRows', () => { @@ -85,21 +85,21 @@ describe(' - Sorting', () => { }, ]; apiRef.current.setRows(newRows); - expect(getColumnValues()).to.deep.equal(['Asics', 'Hugo', 'RedBull']); + expect(getColumnValues(0)).to.deep.equal(['Asics', 'Hugo', 'RedBull']); }); it('should apply the sortModel prop correctly on GridApiRef update row data', () => { renderBrandSortedAsc(); apiRef.current.updateRows([{ id: 1, brand: 'Fila' }]); apiRef.current.updateRows([{ id: 0, brand: 'Patagonia' }]); - expect(getColumnValues()).to.deep.equal(['Fila', 'Patagonia', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Fila', 'Patagonia', 'Puma']); }); it('should allow apiRef to setSortModel', () => { render(); apiRef.current.setSortModel([{ field: 'brand', sort: 'desc' }]); - expect(getColumnValues()).to.deep.equal(['Puma', 'Nike', 'Adidas']); + expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']); }); it('should allow multiple sort columns and', () => { @@ -108,7 +108,7 @@ describe(' - Sorting', () => { { field: 'brand', sort: 'asc' }, ]; render(); - expect(getColumnValues()).to.deep.equal(['Puma', 'Adidas', 'Nike']); + expect(getColumnValues(0)).to.deep.equal(['Puma', 'Adidas', 'Nike']); }); it('should allow to set multiple Sort items via apiRef', () => { @@ -120,7 +120,7 @@ describe(' - Sorting', () => { ]; apiRef.current.setSortModel(sortModel); - expect(getColumnValues()).to.deep.equal(['Puma', 'Adidas', 'Nike']); + expect(getColumnValues(0)).to.deep.equal(['Puma', 'Adidas', 'Nike']); }); describe('multi-sorting', () => { @@ -128,9 +128,9 @@ describe(' - Sorting', () => { it(`should do a multi-sorting when clicking the header cell while ${key} is pressed`, () => { render(); apiRef.current.setSortModel([{ field: 'year', sort: 'desc' }]); - expect(getColumnValues()).to.deep.equal(['Puma', 'Nike', 'Adidas']); + expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']); fireEvent.click(getColumnHeaderCell(0), { [key]: true }); - expect(getColumnValues()).to.deep.equal(['Puma', 'Adidas', 'Nike']); + expect(getColumnValues(0)).to.deep.equal(['Puma', 'Adidas', 'Nike']); }); }); @@ -138,36 +138,36 @@ describe(' - Sorting', () => { it(`should do nothing when pressing Enter while ${key} is pressed`, () => { render(); apiRef.current.setSortModel([{ field: 'year', sort: 'desc' }]); - expect(getColumnValues()).to.deep.equal(['Puma', 'Nike', 'Adidas']); + expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']); getColumnHeaderCell(1).focus(); fireEvent.keyDown(getColumnHeaderCell(1), { key: 'Enter', [key]: true }); - expect(getColumnValues()).to.deep.equal(['Puma', 'Nike', 'Adidas']); + expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']); }); }); it('should do a multi-sorting pressing Enter while shiftKey is pressed', () => { render(); apiRef.current.setSortModel([{ field: 'year', sort: 'desc' }]); - expect(getColumnValues()).to.deep.equal(['Puma', 'Nike', 'Adidas']); + expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']); getColumnHeaderCell(0).focus(); fireEvent.keyDown(getColumnHeaderCell(0), { key: 'Enter', shiftKey: true }); - expect(getColumnValues()).to.deep.equal(['Puma', 'Adidas', 'Nike']); + expect(getColumnValues(0)).to.deep.equal(['Puma', 'Adidas', 'Nike']); }); it(`should not do a multi-sorting if no multiple key is pressed`, () => { render(); apiRef.current.setSortModel([{ field: 'year', sort: 'desc' }]); - expect(getColumnValues()).to.deep.equal(['Puma', 'Nike', 'Adidas']); + expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']); fireEvent.click(getColumnHeaderCell(0)); - expect(getColumnValues()).to.deep.equal(['Adidas', 'Nike', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']); }); it('should not do a multi-sorting if disableMultipleColumnsSorting is true', () => { render(); apiRef.current.setSortModel([{ field: 'year', sort: 'desc' }]); - expect(getColumnValues()).to.deep.equal(['Puma', 'Nike', 'Adidas']); + expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']); fireEvent.click(getColumnHeaderCell(0), { shiftKey: true }); - expect(getColumnValues()).to.deep.equal(['Adidas', 'Nike', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']); }); }); @@ -216,17 +216,17 @@ describe(' - Sorting', () => { describe('control Sorting', () => { it('should update the sorting state when neither the model nor the onChange are set', () => { render(); - expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); fireEvent.click(getColumnHeaderCell(0)); - expect(getColumnValues()).to.deep.equal(['Adidas', 'Nike', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']); }); it('should not update the sort model when the sortModelProp is set', () => { const testSortModel: GridSortModel = [{ field: 'brand', sort: 'desc' }]; render(); - expect(getColumnValues()).to.deep.equal(['Puma', 'Nike', 'Adidas']); + expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']); fireEvent.click(getColumnHeaderCell(0)); - expect(getColumnValues()).to.deep.equal(['Puma', 'Nike', 'Adidas']); + expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']); }); it('should update the sort state when the model is not set, but the onChange is set', () => { @@ -264,7 +264,7 @@ describe(' - Sorting', () => { render(); fireEvent.click(getColumnHeaderCell(0)); - expect(getColumnValues()).to.deep.equal(['Adidas', 'Nike', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']); expect(expectedModel).to.deep.equal([{ field: 'brand', sort: 'asc' }]); }); diff --git a/packages/grid/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx index 3003d73a97af..ecd33483a3f8 100644 --- a/packages/grid/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx @@ -72,6 +72,6 @@ describe(' - State', () => { } render(); - expect(getColumnValues()).to.deep.equal(['Adidas', 'Nike', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']); }); }); diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx index 99230081e940..8e96553c005c 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx @@ -164,7 +164,7 @@ function GridCell(props: GridCellProps) { return; } - const doc = ownerDocument(apiRef.current.rootElementRef!.current as HTMLElement)!; + const doc = ownerDocument(apiRef.current.rootElementRef!.current)!; if (cellRef.current && !cellRef.current.contains(doc.activeElement!)) { const focusableElement = cellRef.current!.querySelector('[tabindex="0"]'); diff --git a/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx b/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx index 35ae9f873d11..283e1afcc99f 100644 --- a/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx @@ -126,9 +126,9 @@ export const useGridPrintExport = ( gridMain!.style.overflow = 'visible'; const columnHeaders = gridClone.querySelector(`.${gridClasses.columnHeaders}`); - const columnHeadersInner = columnHeaders!.querySelector( + const columnHeadersInner = columnHeaders!.querySelector( `.${gridClasses.columnHeadersInner}`, - ) as HTMLElement; + )!; columnHeadersInner.style.width = '100%'; let gridToolbarElementHeight = diff --git a/packages/grid/x-data-grid/src/hooks/features/focus/useGridFocus.ts b/packages/grid/x-data-grid/src/hooks/features/focus/useGridFocus.ts index 339c9ab3d8b9..01deaa6ab402 100644 --- a/packages/grid/x-data-grid/src/hooks/features/focus/useGridFocus.ts +++ b/packages/grid/x-data-grid/src/hooks/features/focus/useGridFocus.ts @@ -263,7 +263,7 @@ export const useGridFocus = ( }, [apiRef, props.rows]); React.useEffect(() => { - const doc = ownerDocument(apiRef.current.rootElementRef!.current as HTMLElement); + const doc = ownerDocument(apiRef.current.rootElementRef!.current); doc.addEventListener('click', handleDocumentClick); return () => { diff --git a/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx index 95089b8f0f6c..02f83d2cd27f 100644 --- a/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx @@ -45,7 +45,7 @@ describe(' - Filter', () => { ); }; - describe('props: filterModel', () => { + describe('prop: filterModel', () => { it('should throw for more than one filter item', () => { expect(() => { render( diff --git a/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx index 990c269220b6..f4e29de0b2fd 100644 --- a/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/keyboard.DataGrid.test.tsx @@ -311,9 +311,7 @@ describe(' - Keyboard', () => { , ); getColumnHeaderCell(0).focus(); - const virtualScroller = document.querySelector( - '.MuiDataGrid-virtualScroller', - )! as HTMLElement; + const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; expect(virtualScroller.scrollLeft).to.equal(0); fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' }); expect(virtualScroller.scrollLeft).not.to.equal(0); @@ -330,9 +328,7 @@ describe(' - Keyboard', () => { , ); getColumnHeaderCell(0).focus(); - const virtualScroller = document.querySelector( - '.MuiDataGrid-virtualScroller', - )! as HTMLElement; + const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; expect(virtualScroller.scrollLeft).to.equal(0); fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' }); expect(virtualScroller.scrollLeft).not.to.equal(0); @@ -396,9 +392,8 @@ describe(' - Keyboard', () => { render(); // get the sort button in column header 1 - const columnMenuButton = getColumnHeaderCell(1).querySelector( - `button[title="Sort"]`, - ) as HTMLElement; + const columnMenuButton = + getColumnHeaderCell(1).querySelector(`button[title="Sort"]`)!; // Simulate click on this button fireEvent.mouseUp(columnMenuButton); @@ -469,7 +464,7 @@ describe(' - Keyboard', () => { fireEvent.mouseUp(getCell(0, 1)); fireEvent.click(getCell(0, 1)); expect(handleCellKeyDown.callCount).to.equal(0); - const input = document.querySelector('input[name="custom-input"]') as HTMLInputElement; + const input = document.querySelector('input[name="custom-input"]')!; input.focus(); fireEvent.keyDown(input, { key: 'ArrowLeft' }); expect(handleCellKeyDown.callCount).to.equal(0); diff --git a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx index 2e29febfcd93..ac7a662bb39a 100644 --- a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx @@ -807,9 +807,9 @@ describe(' - Layout & Warnings', () => { , ); - expect( - (document.querySelector('.MuiDataGrid-overlay') as HTMLElement).clientHeight, - ).to.equal(rowHeight * 2); + expect(document.querySelector('.MuiDataGrid-overlay')!.clientHeight).to.equal( + rowHeight * 2, + ); }); it('should expand content height to one row height when there is an error', () => { @@ -827,7 +827,7 @@ describe(' - Layout & Warnings', () => { /> , ); - const errorOverlayElement = document.querySelector('.MuiDataGrid-overlay') as HTMLElement; + const errorOverlayElement = document.querySelector('.MuiDataGrid-overlay')!; expect(errorOverlayElement.textContent).to.equal(error.message); expect(errorOverlayElement.offsetHeight).to.equal(2 * rowHeight); }); @@ -844,9 +844,9 @@ describe(' - Layout & Warnings', () => { ); }; render(); - const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller'); + const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; // It should not have a horizontal scrollbar - expect(virtualScroller!.scrollWidth - virtualScroller!.clientWidth).to.equal(0); + expect(virtualScroller.scrollWidth - virtualScroller.clientWidth).to.equal(0); }); it('should have a horizontal scrollbar when there are more columns to show and no rows', function test() { @@ -859,8 +859,8 @@ describe(' - Layout & Warnings', () => { , ); - const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller'); - expect(virtualScroller!.scrollWidth - virtualScroller!.clientWidth).not.to.equal(0); + const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; + expect(virtualScroller.scrollWidth - virtualScroller.clientWidth).not.to.equal(0); }); it('should not place the overlay on top of the horizontal scrollbar when rows=[]', () => { @@ -1023,7 +1023,7 @@ describe(' - Layout & Warnings', () => { , ); - expect((document.querySelector('.MuiDataGrid-overlay') as HTMLElement).textContent).to.equal( + expect(document.querySelector('.MuiDataGrid-overlay')!.textContent).to.equal( message, ); }); diff --git a/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx index 05cb76a4c709..4d17cefcf6f4 100644 --- a/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx @@ -32,7 +32,7 @@ describe(' - Pagination', () => { ); }; - describe('props: page and onPageChange', () => { + describe('prop: page and onPageChange', () => { before(function beforeHook() { if (isJSDOM) { // Need layouting @@ -42,7 +42,7 @@ describe(' - Pagination', () => { it('should display the rows of page given in props', () => { render(); - expect(getColumnValues()).to.deep.equal(['1']); + expect(getColumnValues(0)).to.deep.equal(['1']); }); it('should not call onPageChange on initialisation or on page prop change', () => { @@ -67,18 +67,18 @@ describe(' - Pagination', () => { const { setProps } = render( , ); - expect(getColumnValues()).to.deep.equal(['0']); + expect(getColumnValues(0)).to.deep.equal(['0']); setProps({ page: 1 }); - expect(getColumnValues()).to.deep.equal(['1']); + expect(getColumnValues(0)).to.deep.equal(['1']); }); it('should apply new page when clicking on next / previous button and onPageChange is not defined and page is not controlled', () => { render(); fireEvent.click(screen.getByRole('button', { name: /next page/i })); - expect(getColumnValues()).to.deep.equal(['1']); + expect(getColumnValues(0)).to.deep.equal(['1']); fireEvent.click(screen.getByRole('button', { name: /previous page/i })); - expect(getColumnValues()).to.deep.equal(['0']); + expect(getColumnValues(0)).to.deep.equal(['0']); }); it('should call onPageChange and apply new page when clicking on next / previous button and page is not controlled', () => { @@ -90,12 +90,12 @@ describe(' - Pagination', () => { fireEvent.click(screen.getByRole('button', { name: /next page/i })); expect(onPageChange.callCount).to.equal(1); expect(onPageChange.lastCall.args[0]).to.equal(1); - expect(getColumnValues()).to.deep.equal(['1']); + expect(getColumnValues(0)).to.deep.equal(['1']); fireEvent.click(screen.getByRole('button', { name: /previous page/i })); expect(onPageChange.callCount).to.equal(2); expect(onPageChange.lastCall.args[0]).to.equal(0); - expect(getColumnValues()).to.deep.equal(['0']); + expect(getColumnValues(0)).to.deep.equal(['0']); }); it('should call onPageChange with the correct page when clicking on next / previous button when page is controlled', () => { @@ -112,11 +112,11 @@ describe(' - Pagination', () => { fireEvent.click(screen.getByRole('button', { name: /next page/i })); expect(onPageChange.lastCall.args[0]).to.equal(2); - expect(getColumnValues()).to.deep.equal(['1']); + expect(getColumnValues(0)).to.deep.equal(['1']); fireEvent.click(screen.getByRole('button', { name: /previous page/i })); expect(onPageChange.lastCall.args[0]).to.equal(0); - expect(getColumnValues()).to.deep.equal(['1']); + expect(getColumnValues(0)).to.deep.equal(['1']); }); it('should call onPageChange when clicking on next / previous button in "server" mode', () => { @@ -140,9 +140,9 @@ describe(' - Pagination', () => { it('should not change the page state when clicking on next button and a page prop is provided', () => { render(); - expect(getColumnValues()).to.deep.equal(['0']); + expect(getColumnValues(0)).to.deep.equal(['0']); fireEvent.click(screen.getByRole('button', { name: /next page/i })); - expect(getColumnValues()).to.deep.equal(['0']); + expect(getColumnValues(0)).to.deep.equal(['0']); }); it('should control page state when the prop and the onChange are set', () => { @@ -162,10 +162,10 @@ describe(' - Pagination', () => { render(); fireEvent.click(screen.getByRole('button', { name: /next page/i })); - expect(getColumnValues()).to.deep.equal(['1']); + expect(getColumnValues(0)).to.deep.equal(['1']); fireEvent.click(screen.getByRole('button', { name: /previous page/i })); - expect(getColumnValues()).to.deep.equal(['0']); + expect(getColumnValues(0)).to.deep.equal(['0']); }); it('should go to last page when page is controlled and the current page is greater than the last page', () => { @@ -220,7 +220,7 @@ describe(' - Pagination', () => { }); }); - describe('props: pageSize and onPageSizeChange', () => { + describe('prop: pageSize and onPageSizeChange', () => { before(function beforeHook() { if (isJSDOM) { // Need layouting @@ -230,7 +230,7 @@ describe(' - Pagination', () => { it('should display the amount of rows given in props', () => { render(); - expect(getColumnValues()).to.deep.equal(['0', '1']); + expect(getColumnValues(0)).to.deep.equal(['0', '1']); }); it('should not call onPageSizeChange on initialisation or on pageSize prop change', () => { @@ -260,18 +260,18 @@ describe(' - Pagination', () => { rowsPerPageOptions={[1, 2]} />, ); - expect(getColumnValues()).to.deep.equal(['0']); + expect(getColumnValues(0)).to.deep.equal(['0']); setProps({ pageSize: 2 }); - expect(getColumnValues()).to.deep.equal(['0', '1']); + expect(getColumnValues(0)).to.deep.equal(['0', '1']); }); it('should allow to update both the page and pageSize from the outside at once', () => { const { setProps } = render( , ); - expect(getColumnValues()).to.deep.equal(['0']); + expect(getColumnValues(0)).to.deep.equal(['0']); setProps({ page: 1, pageSize: 2 }); - expect(getColumnValues()).to.deep.equal(['2', '3']); + expect(getColumnValues(0)).to.deep.equal(['2', '3']); }); it('should apply the new pageSize when clicking on a page size option and onPageSizeChanged is not defined and pageSize is not controlled', () => { @@ -280,7 +280,7 @@ describe(' - Pagination', () => { expect(screen.queryAllByRole('option').length).to.equal(4); fireEvent.click(screen.queryAllByRole('option')[1]); - expect(getColumnValues()).to.deep.equal(['0', '1']); + expect(getColumnValues(0)).to.deep.equal(['0', '1']); }); it('should call onPageChange and apply the new pageSize when clicking on a page size option and pageSize is not controlled', () => { @@ -298,7 +298,7 @@ describe(' - Pagination', () => { fireEvent.click(screen.queryAllByRole('option')[1]); expect(onPageSizeChange.callCount).to.equal(1); expect(onPageSizeChange.lastCall.args[0]).to.equal(2); - expect(getColumnValues()).to.deep.equal(['0', '1']); + expect(getColumnValues(0)).to.deep.equal(['0', '1']); }); it('should call onPageSizeChange with the correct page when clicking on a page size option when pageSize is controlled', () => { @@ -328,7 +328,7 @@ describe(' - Pagination', () => { expect(screen.queryAllByRole('option').length).to.equal(3); fireEvent.click(screen.queryAllByRole('option')[1]); - expect(getColumnValues()).to.deep.equal(['0']); + expect(getColumnValues(0)).to.deep.equal(['0']); }); it('should control pageSize state when the prop and the onChange are set', () => { @@ -351,7 +351,7 @@ describe(' - Pagination', () => { expect(screen.queryAllByRole('option').length).to.equal(3); fireEvent.click(screen.queryAllByRole('option')[1]); - expect(getColumnValues()).to.deep.equal(['0', '1']); + expect(getColumnValues(0)).to.deep.equal(['0', '1']); }); it('should display a warning if the prop pageSize is not in the prop rowsPerPageOptions', () => { @@ -394,7 +394,7 @@ describe(' - Pagination', () => { }); }); - describe('props: autoPageSize', () => { + describe('prop: autoPageSize', () => { before(function beforeHook() { if (isJSDOM) { // Need layouting @@ -585,9 +585,9 @@ describe(' - Pagination', () => { }; render(); - expect(getColumnValues()).to.deep.equal(['0']); + expect(getColumnValues(0)).to.deep.equal(['0']); fireEvent.click(screen.getByRole('button', { name: /next page/i })); - expect(getColumnValues()).to.deep.equal(['1']); + expect(getColumnValues(0)).to.deep.equal(['1']); }); describe('prop: initialState.pagination', () => { diff --git a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx index 6da1c5e0574c..855b66d22fba 100644 --- a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx @@ -43,7 +43,7 @@ describe(' - Rows', () => { columns: [{ field: 'clientId' }, { field: 'first' }, { field: 'age' }], }; - describe('props: getRowId', () => { + describe('prop: getRowId', () => { it('should allow to select a field as id', () => { const getRowId: GridRowIdGetter = (row) => `${row.clientId}`; render( @@ -51,11 +51,11 @@ describe(' - Rows', () => { , ); - expect(getColumnValues()).to.deep.equal(['c1', 'c2', 'c3']); + expect(getColumnValues(0)).to.deep.equal(['c1', 'c2', 'c3']); }); }); - describe('props: rows', () => { + describe('prop: rows', () => { it('should support new dataset', () => { const { rows, columns } = getData(5, 2); diff --git a/packages/grid/x-data-grid/src/tests/selection.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/selection.DataGrid.test.tsx index 4544fdf1f2fd..af7fb22edc1e 100644 --- a/packages/grid/x-data-grid/src/tests/selection.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/selection.DataGrid.test.tsx @@ -51,7 +51,7 @@ describe(' - Selection', () => { ); - describe('props: checkboxSelection = false (single selection)', () => { + describe('prop: checkboxSelection = false (single selection)', () => { it('should select one row at a time on click WITHOUT ctrl or meta pressed', () => { render(); fireClickEvent(getCell(0, 0)); @@ -95,7 +95,7 @@ describe(' - Selection', () => { }); }); - describe('props: checkboxSelection = false (single selection), with keyboard events', () => { + describe('prop: checkboxSelection = false (single selection), with keyboard events', () => { it('should select one row at a time on Shift + Space', () => { render(); @@ -453,9 +453,9 @@ describe(' - Selection', () => { it('should select/unselect all rows when pressing space', () => { render(); - const selectAllCell = document.querySelector( + const selectAllCell = document.querySelector( '[role="columnheader"][data-field="__check__"] input', - ) as HTMLElement; + )!; selectAllCell.focus(); fireEvent.keyDown(selectAllCell, { @@ -491,7 +491,7 @@ describe(' - Selection', () => { }); }); - describe('props: isRowSelectable', () => { + describe('prop: isRowSelectable', () => { it('should update the selected rows when the isRowSelectable prop changes', async () => { const { setProps } = render( true} checkboxSelection />, @@ -557,7 +557,7 @@ describe(' - Selection', () => { }); }); - describe('props: rows', () => { + describe('prop: rows', () => { it('should remove the outdated selected rows when rows prop changes', () => { const data = getData(4, 2); @@ -573,7 +573,7 @@ describe(' - Selection', () => { }); }); - describe('props: selectionModel and onSelectionModelChange', () => { + describe('prop: selectionModel and onSelectionModelChange', () => { it('should select rows when initialised (array-version)', () => { render(); expect(getSelectedRowIds()).to.deep.equal([1]); diff --git a/packages/grid/x-data-grid/src/tests/sorting.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/sorting.DataGrid.test.tsx index 12ca17e96439..ae2b9ffc2ff9 100644 --- a/packages/grid/x-data-grid/src/tests/sorting.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/sorting.DataGrid.test.tsx @@ -41,7 +41,7 @@ describe(' - Sorting', () => { , ); - expect(getColumnValues()).to.deep.equal(['10', '0', '5']); + expect(getColumnValues(0)).to.deep.equal(['10', '0', '5']); }); it('should update the order server side', () => { @@ -57,9 +57,9 @@ describe(' - Sorting', () => { } const { setProps } = render(); - expect(getColumnValues()).to.deep.equal(['10', '0', '5']); + expect(getColumnValues(0)).to.deep.equal(['10', '0', '5']); setProps({ rows: [{ id: 5 }, { id: 0 }, { id: 10 }] }); - expect(getColumnValues()).to.deep.equal(['5', '0', '10']); + expect(getColumnValues(0)).to.deep.equal(['5', '0', '10']); }); it('should sort string column when clicking the header cell', () => { @@ -69,11 +69,11 @@ describe(' - Sorting', () => { , ); const header = getColumnHeaderCell(0); - expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); fireEvent.click(header); - expect(getColumnValues()).to.deep.equal(['Adidas', 'Nike', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']); fireEvent.click(header); - expect(getColumnValues()).to.deep.equal(['Puma', 'Nike', 'Adidas']); + expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']); }); it('should sort boolean column when clicking the header cell', () => { @@ -85,11 +85,11 @@ describe(' - Sorting', () => { const header = screen .getByRole('columnheader', { name: 'isPublished' }) .querySelector('.MuiDataGrid-columnHeaderTitleContainer'); - expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); fireEvent.click(header); - expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); fireEvent.click(header); - expect(getColumnValues()).to.deep.equal(['Adidas', 'Puma', 'Nike']); + expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Puma', 'Nike']); }); it('should only allow ascending sorting using sortingOrder', () => { @@ -99,11 +99,11 @@ describe(' - Sorting', () => { , ); const header = getColumnHeaderCell(0); - expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); fireEvent.click(header); - expect(getColumnValues()).to.deep.equal(['Adidas', 'Nike', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']); fireEvent.click(header); - expect(getColumnValues()).to.deep.equal(['Adidas', 'Nike', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']); }); it('should only allow ascending and initial sorting using sortingOrder', () => { @@ -113,11 +113,11 @@ describe(' - Sorting', () => { , ); const header = getColumnHeaderCell(0); - expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); fireEvent.click(header); - expect(getColumnValues()).to.deep.equal(['Adidas', 'Nike', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']); fireEvent.click(header); - expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); }); it('should only allow ascending and descending sorting using sortingOrder', () => { @@ -127,13 +127,13 @@ describe(' - Sorting', () => { , ); const header = getColumnHeaderCell(0); - expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); fireEvent.click(header); - expect(getColumnValues()).to.deep.equal(['Puma', 'Nike', 'Adidas']); + expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']); fireEvent.click(header); - expect(getColumnValues()).to.deep.equal(['Adidas', 'Nike', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']); fireEvent.click(header); - expect(getColumnValues()).to.deep.equal(['Puma', 'Nike', 'Adidas']); + expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']); }); it('should allow per-column sortingOrder override', () => { @@ -147,13 +147,13 @@ describe(' - Sorting', () => { , ); const header = getColumnHeaderCell(0); - expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); fireEvent.click(header); - expect(getColumnValues()).to.deep.equal(['Puma', 'Nike', 'Adidas']); + expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']); fireEvent.click(header); - expect(getColumnValues()).to.deep.equal(['Adidas', 'Nike', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']); fireEvent.click(header); - expect(getColumnValues()).to.deep.equal(['Puma', 'Nike', 'Adidas']); + expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']); }); it('should keep rows sorted when rows prop change', () => { @@ -180,7 +180,7 @@ describe(' - Sorting', () => { }; const { setProps } = render(); - expect(getColumnValues()).to.deep.equal(['Adidas', 'Nike', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']); setProps({ rows: [ @@ -198,7 +198,7 @@ describe(' - Sorting', () => { }, ], }); - expect(getColumnValues()).to.deep.equal(['Asics', 'Hugo', 'RedBull']); + expect(getColumnValues(0)).to.deep.equal(['Asics', 'Hugo', 'RedBull']); }); it('should support server-side sorting', () => { @@ -241,9 +241,9 @@ describe(' - Sorting', () => { ]; const { setProps } = render(); - expect(getColumnValues()).to.deep.equal(['Asics', 'RedBull']); + expect(getColumnValues(0)).to.deep.equal(['Asics', 'RedBull']); setProps({ rows }); - expect(getColumnValues()).to.deep.equal(['Asics', 'RedBull', 'Hugo']); + expect(getColumnValues(0)).to.deep.equal(['Asics', 'RedBull', 'Hugo']); }); it('should support new dataset', () => { @@ -261,9 +261,9 @@ describe(' - Sorting', () => { const header = screen .getByRole('columnheader', { name: 'brand' }) .querySelector('.MuiDataGrid-columnHeaderTitleContainer'); - expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); fireEvent.click(header); - expect(getColumnValues()).to.deep.equal(['Adidas', 'Nike', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']); const newData = { rows: [ { @@ -282,7 +282,7 @@ describe(' - Sorting', () => { columns: [{ field: 'country' }], }; setProps(newData); - expect(getColumnValues()).to.deep.equal(['France', 'UK', 'US']); + expect(getColumnValues(0)).to.deep.equal(['France', 'UK', 'US']); }); it('should support new dataset in control mode', () => { @@ -308,9 +308,9 @@ describe(' - Sorting', () => { const header = screen .getByRole('columnheader', { name: 'brand' }) .querySelector('.MuiDataGrid-columnHeaderTitleContainer'); - expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); fireEvent.click(header); - expect(getColumnValues()).to.deep.equal(['Adidas', 'Nike', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']); const newData = { rows: [ { @@ -329,7 +329,7 @@ describe(' - Sorting', () => { columns: [{ field: 'country' }], }; setProps(newData); - expect(getColumnValues()).to.deep.equal(['France', 'UK', 'US']); + expect(getColumnValues(0)).to.deep.equal(['France', 'UK', 'US']); }); it('should clear the sorting col when passing an empty sortModel', () => { @@ -343,9 +343,9 @@ describe(' - Sorting', () => { const { setProps } = render(); - expect(getColumnValues()).to.deep.equal(['Adidas', 'Nike', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']); setProps({ sortModel: [] }); - expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']); + expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); }); describe('prop: initialState.sorting', () => { diff --git a/packages/grid/x-data-grid/src/utils/domUtils.ts b/packages/grid/x-data-grid/src/utils/domUtils.ts index 577466444189..d27463a89b81 100644 --- a/packages/grid/x-data-grid/src/utils/domUtils.ts +++ b/packages/grid/x-data-grid/src/utils/domUtils.ts @@ -30,15 +30,15 @@ function escapeOperandAttributeSelector(operand: string): string { } export function getGridColumnHeaderElement(root: Element, field: string) { - return root.querySelector( + return root.querySelector( `[role="columnheader"][data-field="${escapeOperandAttributeSelector(field)}"]`, - ) as HTMLDivElement; + ); } export function getGridRowElement(root: Element, id: GridRowId) { - return root.querySelector( + return root.querySelector( `.${gridClasses.row}[data-id="${escapeOperandAttributeSelector(String(id))}"]`, - ) as HTMLDivElement; + ); } export function getGridCellElement(root: Element, { id, field }: { id: GridRowId; field: string }) { @@ -46,7 +46,7 @@ export function getGridCellElement(root: Element, { id, field }: { id: GridRowId if (!row) { return null; } - return row.querySelector( + return row.querySelector( `.${gridClasses.cell}[data-field="${escapeOperandAttributeSelector(field)}"]`, - ) as HTMLDivElement; + ); } diff --git a/test/utils/helperFn.ts b/test/utils/helperFn.ts index 7af890983519..4a0c0fe6ae15 100644 --- a/test/utils/helperFn.ts +++ b/test/utils/helperFn.ts @@ -58,20 +58,20 @@ export function sleep(duration: number) { }); } -export function getColumnValues(colIndex: number = 0) { +export function getColumnValues(colIndex: number) { return Array.from(document.querySelectorAll(`[role="cell"][data-colindex="${colIndex}"]`)).map( (node) => node!.textContent, ); } export function getColumnHeaderCell(colIndex: number): HTMLElement { - const columnHeader = document.querySelector( + const columnHeader = document.querySelector( `[role="columnheader"][aria-colindex="${colIndex + 1}"]`, ); if (columnHeader == null) { throw new Error(`columnheader ${colIndex} not found`); } - return columnHeader as HTMLElement; + return columnHeader; } export function getColumnHeadersTextContent() { @@ -81,13 +81,13 @@ export function getColumnHeadersTextContent() { } export function getCell(rowIndex: number, colIndex: number): HTMLElement { - const cell = document.querySelector( + const cell = document.querySelector( `[role="row"][data-rowindex="${rowIndex}"] [role="cell"][data-colindex="${colIndex}"]`, ); if (cell == null) { throw new Error(`Cell ${rowIndex} ${colIndex} not found`); } - return cell as HTMLElement; + return cell; } export function getRows() { @@ -95,9 +95,9 @@ export function getRows() { } export function getRow(rowIndex: number): HTMLElement { - const row = document.querySelector(`[role="row"][data-rowindex="${rowIndex}"]`); + const row = document.querySelector(`[role="row"][data-rowindex="${rowIndex}"]`); if (row == null) { throw new Error(`Row ${rowIndex} not found`); } - return row as HTMLElement; + return row; }