diff --git a/test/browser/TextEditor.test.tsx b/test/browser/TextEditor.test.tsx index a29386f95c..86493df498 100644 --- a/test/browser/TextEditor.test.tsx +++ b/test/browser/TextEditor.test.tsx @@ -3,7 +3,7 @@ import { page, userEvent } from '@vitest/browser/context'; import DataGrid, { textEditor } from '../../src'; import type { Column } from '../../src'; -import { getCellsNew } from './utils'; +import { getCells } from './utils'; interface Row { readonly name: string; @@ -30,7 +30,7 @@ function Test() { test('TextEditor', async () => { page.render(); - await userEvent.dblClick(getCellsNew()[0]); + await userEvent.dblClick(getCells()[0]); let input = page.getByRole('textbox').element() as HTMLInputElement; expect(input).toHaveClass('rdg-text-editor'); // input value is row[column.key] @@ -44,13 +44,13 @@ test('TextEditor', async () => { // pressing escape closes the editor without committing await userEvent.keyboard('Test{escape}'); expect(input).not.toBeInTheDocument(); - await expect.element(getCellsNew()[0]).toHaveTextContent(/^Tacitus Kilgore$/); + await expect.element(getCells()[0]).toHaveTextContent(/^Tacitus Kilgore$/); // blurring the input closes and commits the editor - await userEvent.dblClick(getCellsNew()[0]); + await userEvent.dblClick(getCells()[0]); input = page.getByRole('textbox').element() as HTMLInputElement; await userEvent.fill(input, 'Jim Milton'); await userEvent.tab(); expect(input).not.toBeInTheDocument(); - await expect.element(getCellsNew()[0]).toHaveTextContent(/^Jim Milton$/); + await expect.element(getCells()[0]).toHaveTextContent(/^Jim Milton$/); }); diff --git a/test/browser/TreeDataGrid.test.tsx b/test/browser/TreeDataGrid.test.tsx index 8ab37d85c2..c5073b4617 100644 --- a/test/browser/TreeDataGrid.test.tsx +++ b/test/browser/TreeDataGrid.test.tsx @@ -8,13 +8,13 @@ import { focusSinkClassname } from '../../src/style/core'; import { rowSelected } from '../../src/style/row'; import type { PasteEvent } from '../../src/types'; import { - copySelectedCell, - getCellsAtRowIndex, - getHeaderCells, - getRows, - getSelectedCell, - getTreeGrid, - pasteSelectedCell + copySelectedCellOld, + getCellsAtRowIndexOld, + getHeaderCellsOld, + getRowsOld, + getSelectedCellOld, + getTreeGridOld, + pasteSelectedCellOld } from './utils'; const rowSelectedClassname = 'rdg-row-selected'; @@ -136,72 +136,72 @@ function setup(groupBy: string[]) { } function getHeaderCellsContent() { - return getHeaderCells().map((cell) => cell.textContent); + return getHeaderCellsOld().map((cell) => cell.textContent); } test('should not group if groupBy is empty', () => { setup([]); - expect(getTreeGrid()).toHaveAttribute('aria-rowcount', '7'); + expect(getTreeGridOld()).toHaveAttribute('aria-rowcount', '7'); expect(getHeaderCellsContent()).toStrictEqual(['', 'Sport', 'Country', 'Year', 'Id']); - expect(getRows()).toHaveLength(6); + expect(getRowsOld()).toHaveLength(6); }); test('should not group if column does not exist', () => { setup(['abc']); - expect(getTreeGrid()).toHaveAttribute('aria-rowcount', '7'); - expect(getRows()).toHaveLength(6); + expect(getTreeGridOld()).toHaveAttribute('aria-rowcount', '7'); + expect(getRowsOld()).toHaveLength(6); }); test('should group by single column', () => { setup(['country']); - expect(getTreeGrid()).toHaveAttribute('aria-rowcount', '9'); + expect(getTreeGridOld()).toHaveAttribute('aria-rowcount', '9'); expect(getHeaderCellsContent()).toStrictEqual(['', 'Country', 'Sport', 'Year', 'Id']); - expect(getRows()).toHaveLength(4); + expect(getRowsOld()).toHaveLength(4); }); test('should group by multiple columns', () => { setup(['country', 'year']); - expect(getTreeGrid()).toHaveAttribute('aria-rowcount', '13'); + expect(getTreeGridOld()).toHaveAttribute('aria-rowcount', '13'); expect(getHeaderCellsContent()).toStrictEqual(['', 'Country', 'Year', 'Sport', 'Id']); - expect(getRows()).toHaveLength(4); + expect(getRowsOld()).toHaveLength(4); }); test('should ignore duplicate groupBy columns', () => { setup(['year', 'year', 'year']); - expect(getTreeGrid()).toHaveAttribute('aria-rowcount', '10'); - expect(getRows()).toHaveLength(5); + expect(getTreeGridOld()).toHaveAttribute('aria-rowcount', '10'); + expect(getRowsOld()).toHaveLength(5); }); test('should use groupBy order while grouping', () => { setup(['year', 'country']); - expect(getTreeGrid()).toHaveAttribute('aria-rowcount', '14'); + expect(getTreeGridOld()).toHaveAttribute('aria-rowcount', '14'); expect(getHeaderCellsContent()).toStrictEqual(['', 'Year', 'Country', 'Sport', 'Id']); - expect(getRows()).toHaveLength(5); + expect(getRowsOld()).toHaveLength(5); }); test('should toggle group when group cell is clicked', async () => { setup(['year']); - expect(getRows()).toHaveLength(5); + expect(getRowsOld()).toHaveLength(5); const groupCell = screen.getByRole('gridcell', { name: '2021' }); await userEvent.click(groupCell); - expect(getRows()).toHaveLength(7); + expect(getRowsOld()).toHaveLength(7); await userEvent.click(groupCell); - expect(getRows()).toHaveLength(5); + expect(getRowsOld()).toHaveLength(5); }); test('should toggle group using keyboard', async () => { setup(['year']); - expect(getRows()).toHaveLength(5); + expect(getRowsOld()).toHaveLength(5); const groupCell = screen.getByRole('gridcell', { name: '2021' }); await userEvent.click(groupCell); - expect(getRows()).toHaveLength(7); + expect(getRowsOld()).toHaveLength(7); // clicking on the group cell selects the row - expect(getSelectedCell()).toBeNull(); - expect(getRows()[2]).toHaveClass(rowSelectedClassname); + expect(getSelectedCellOld()).toBeNull(); + expect(getRowsOld()[2]).toHaveClass(rowSelectedClassname); await userEvent.keyboard('{arrowright}{arrowright}{enter}'); - expect(getRows()).toHaveLength(5); + expect(getRowsOld()).toHaveLength(5); await userEvent.keyboard('{enter}'); - expect(getRows()).toHaveLength(7); + expect(getRowsOld()).toHaveLength(7); }); test('should set aria-attributes', async () => { @@ -297,7 +297,7 @@ test('should select rows in a group', async () => { test('cell navigation in a treegrid', async () => { setup(['country', 'year']); - expect(getRows()).toHaveLength(4); + expect(getRowsOld()).toHaveLength(4); const focusSink = document.querySelector(`.${focusSinkClassname}`); // expand group @@ -330,44 +330,44 @@ test('cell navigation in a treegrid', async () => { expect(focusSink).toHaveAttribute('tabIndex', '0'); // select cell - await userEvent.click(getCellsAtRowIndex(5)[1]); - expect(getCellsAtRowIndex(5)[1]).toHaveAttribute('aria-selected', 'true'); + await userEvent.click(getCellsAtRowIndexOld(5)[1]); + expect(getCellsAtRowIndexOld(5)[1]).toHaveAttribute('aria-selected', 'true'); expect(focusSink).toHaveAttribute('tabIndex', '-1'); // select the previous cell await userEvent.keyboard('{arrowleft}'); - expect(getCellsAtRowIndex(5)[1]).toHaveAttribute('aria-selected', 'false'); - expect(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'true'); + expect(getCellsAtRowIndexOld(5)[1]).toHaveAttribute('aria-selected', 'false'); + expect(getCellsAtRowIndexOld(5)[0]).toHaveAttribute('aria-selected', 'true'); // if the first cell is selected then arrowleft should select the row await userEvent.keyboard('{arrowleft}'); - expect(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'false'); - expect(getRows()[4]).toHaveClass(rowSelectedClassname); + expect(getCellsAtRowIndexOld(5)[0]).toHaveAttribute('aria-selected', 'false'); + expect(getRowsOld()[4]).toHaveClass(rowSelectedClassname); expect(focusSink).toHaveFocus(); // if the row is selected then arrowright should select the first cell on the same row await userEvent.keyboard('{arrowright}'); - expect(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'true'); + expect(getCellsAtRowIndexOld(5)[0]).toHaveAttribute('aria-selected', 'true'); await userEvent.keyboard('{arrowleft}{arrowup}'); - expect(getRows()).toHaveLength(7); + expect(getRowsOld()).toHaveLength(7); // left arrow should collapse the group await userEvent.keyboard('{arrowleft}'); - expect(getRows()).toHaveLength(6); + expect(getRowsOld()).toHaveLength(6); // right arrow should expand the group await userEvent.keyboard('{arrowright}'); - expect(getRows()).toHaveLength(7); + expect(getRowsOld()).toHaveLength(7); // left arrow on a collapsed group should select the parent group - expect(getRows()[1]).not.toHaveClass(rowSelectedClassname); + expect(getRowsOld()[1]).not.toHaveClass(rowSelectedClassname); await userEvent.keyboard('{arrowleft}{arrowleft}'); - expect(getRows()[1]).toHaveClass(rowSelectedClassname); + expect(getRowsOld()[1]).toHaveClass(rowSelectedClassname); await userEvent.keyboard('{end}'); - expect(getRows()[5]).toHaveClass(rowSelectedClassname); + expect(getRowsOld()[5]).toHaveClass(rowSelectedClassname); await userEvent.keyboard('{home}'); expect(screen.getAllByRole('row')[0]).toHaveClass(rowSelectedClassname); @@ -375,19 +375,19 @@ test('cell navigation in a treegrid', async () => { // collpase parent group await userEvent.keyboard('{arrowdown}{arrowdown}{arrowleft}'); expect(screen.queryByRole('gridcell', { name: '2021' })).not.toBeInTheDocument(); - expect(getRows()).toHaveLength(4); + expect(getRowsOld()).toHaveLength(4); }); test('copy/paste when grouping is enabled', async () => { setup(['year']); await userEvent.click(screen.getByRole('gridcell', { name: '2021' })); await userEvent.click(screen.getByRole('gridcell', { name: 'USA' })); - await copySelectedCell(); - expect(getSelectedCell()).toHaveClass('rdg-cell-copied'); + await copySelectedCellOld(); + expect(getSelectedCellOld()).toHaveClass('rdg-cell-copied'); await userEvent.keyboard('{arrowdown}'); - expect(getSelectedCell()).toHaveTextContent('Canada'); - await pasteSelectedCell(); - expect(getSelectedCell()).toHaveTextContent('USA'); + expect(getSelectedCellOld()).toHaveTextContent('Canada'); + await pasteSelectedCellOld(); + expect(getSelectedCellOld()).toHaveTextContent('USA'); }); test('update row using cell renderer', async () => { @@ -395,13 +395,13 @@ test('update row using cell renderer', async () => { await userEvent.click(screen.getByRole('gridcell', { name: '2021' })); await userEvent.click(screen.getByRole('gridcell', { name: 'USA' })); await userEvent.keyboard('{arrowright}{arrowright}'); - expect(getSelectedCell()).toHaveTextContent('value: 2'); + expect(getSelectedCellOld()).toHaveTextContent('value: 2'); await userEvent.click(screen.getByRole('button', { name: 'value: 2' })); - expect(getSelectedCell()).toHaveTextContent('value: 12'); + expect(getSelectedCellOld()).toHaveTextContent('value: 12'); }); test('custom renderGroupCell', () => { setup(['country']); - expect(getCellsAtRowIndex(1)[4]).toHaveTextContent('1'); - expect(getCellsAtRowIndex(4)[4]).toHaveTextContent('3'); + expect(getCellsAtRowIndexOld(1)[4]).toHaveTextContent('1'); + expect(getCellsAtRowIndexOld(4)[4]).toHaveTextContent('3'); }); diff --git a/test/browser/column/cellClass.test.ts b/test/browser/column/cellClass.test.ts index 632324e77e..48883b7efb 100644 --- a/test/browser/column/cellClass.test.ts +++ b/test/browser/column/cellClass.test.ts @@ -1,6 +1,6 @@ import type { Column } from '../../../src'; import { cellClassname } from '../../../src/style/cell'; -import { getCellsNew, setupNew } from '../utils'; +import { getCells, setup } from '../utils'; interface Row { id: number; @@ -15,8 +15,8 @@ test('cellClass is undefined', async () => { name: 'ID' } ]; - setupNew({ columns, rows }); - const [cell1, cell2] = getCellsNew(); + setup({ columns, rows }); + const [cell1, cell2] = getCells(); await expect.element(cell1).toHaveClass(cellClassname, { exact: true }); await expect.element(cell2).toHaveClass(cellClassname, { exact: true }); }); @@ -29,8 +29,8 @@ test('cellClass is a string', async () => { cellClass: 'my-cell' } ]; - setupNew({ columns, rows }); - const [cell1, cell2] = getCellsNew(); + setup({ columns, rows }); + const [cell1, cell2] = getCells(); await expect.element(cell1).toHaveClass(`${cellClassname} my-cell`, { exact: true }); await expect.element(cell2).toHaveClass(`${cellClassname} my-cell`, { exact: true }); }); @@ -43,8 +43,8 @@ test('cellClass returns a string', async () => { cellClass: (row) => `my-cell-${row.id}` } ]; - setupNew({ columns, rows }); - const [cell1, cell2] = getCellsNew(); + setup({ columns, rows }); + const [cell1, cell2] = getCells(); await expect.element(cell1).toHaveClass(`${cellClassname} my-cell-0`, { exact: true }); await expect.element(cell2).toHaveClass(`${cellClassname} my-cell-1`, { exact: true }); }); @@ -57,8 +57,8 @@ test('cellClass returns undefined', async () => { cellClass: () => undefined } ]; - setupNew({ columns, rows }); - const [cell1, cell2] = getCellsNew(); + setup({ columns, rows }); + const [cell1, cell2] = getCells(); await expect.element(cell1).toHaveClass(cellClassname, { exact: true }); await expect.element(cell2).toHaveClass(cellClassname, { exact: true }); }); diff --git a/test/browser/column/colSpan.test.ts b/test/browser/column/colSpan.test.ts index 5f1605e0cf..0dec92c1f9 100644 --- a/test/browser/column/colSpan.test.ts +++ b/test/browser/column/colSpan.test.ts @@ -1,7 +1,7 @@ import { userEvent } from '@vitest/browser/context'; import type { Column } from '../../../src'; -import { getCellsAtRowIndex, getHeaderCellsNew, setupNew, validateCellPosition } from '../utils'; +import { getCellsAtRowIndexOld, getHeaderCells, setup, validateCellPositionOld } from '../utils'; describe('colSpan', () => { function setupColSpanGrid(colCount = 15) { @@ -34,16 +34,16 @@ describe('colSpan', () => { } }); } - setupNew({ columns, rows, bottomSummaryRows: [1, 2], topSummaryRows: [1, 2] }); + setup({ columns, rows, bottomSummaryRows: [1, 2], topSummaryRows: [1, 2] }); } it('should merges cells', () => { setupColSpanGrid(); // header - expect(getHeaderCellsNew()).toHaveLength(13); + expect(getHeaderCells()).toHaveLength(13); // top summary rows - const topSummarryRow1 = getCellsAtRowIndex(0); + const topSummarryRow1 = getCellsAtRowIndexOld(0); expect(topSummarryRow1).toHaveLength(14); // 7th-8th cells are merged expect(topSummarryRow1[7]).toHaveAttribute('aria-colindex', '8'); @@ -52,10 +52,10 @@ describe('colSpan', () => { 'grid-column-start': '8', 'grid-column-end': '10' }); - expect(getCellsAtRowIndex(1)).toHaveLength(15); + expect(getCellsAtRowIndexOld(1)).toHaveLength(15); // rows - const row1 = getCellsAtRowIndex(3); + const row1 = getCellsAtRowIndexOld(3); expect(row1).toHaveLength(14); // 7th-8th cells are merged expect(row1[6]).toHaveAttribute('aria-colindex', '7'); @@ -68,7 +68,7 @@ describe('colSpan', () => { expect(row1[7]).not.toHaveAttribute('aria-colspan'); // 3rd-5th, 7th-8th cells are merged - const row2 = getCellsAtRowIndex(4); + const row2 = getCellsAtRowIndexOld(4); expect(row2).toHaveLength(12); expect(row2[2]).toHaveAttribute('aria-colindex', '3'); expect(row2[2]).toHaveStyle({ @@ -84,95 +84,95 @@ describe('colSpan', () => { }); expect(row2[5]).toHaveAttribute('aria-colindex', '9'); - expect(getCellsAtRowIndex(6)).toHaveLength(14); // colSpan 6 won't work as there are 5 frozen columns - expect(getCellsAtRowIndex(7)).toHaveLength(10); + expect(getCellsAtRowIndexOld(6)).toHaveLength(14); // colSpan 6 won't work as there are 5 frozen columns + expect(getCellsAtRowIndexOld(7)).toHaveLength(10); // bottom summary row - expect(getCellsAtRowIndex(12)).toHaveLength(14); - expect(getCellsAtRowIndex(13)).toHaveLength(15); + expect(getCellsAtRowIndexOld(12)).toHaveLength(14); + expect(getCellsAtRowIndexOld(13)).toHaveLength(15); }); it('should navigate between merged cells', async () => { setupColSpanGrid(); // header row - await userEvent.click(getHeaderCellsNew()[7]); - validateCellPosition(7, 0); + await userEvent.click(getHeaderCells()[7]); + validateCellPositionOld(7, 0); await userEvent.keyboard('{arrowright}'); - validateCellPosition(8, 0); + validateCellPositionOld(8, 0); await userEvent.keyboard('{arrowright}'); - validateCellPosition(11, 0); + validateCellPositionOld(11, 0); await userEvent.keyboard('{arrowright}'); - validateCellPosition(12, 0); + validateCellPositionOld(12, 0); await userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}'); - validateCellPosition(7, 0); + validateCellPositionOld(7, 0); // top summary rows - await userEvent.click(getCellsAtRowIndex(0)[6]); - validateCellPosition(6, 1); + await userEvent.click(getCellsAtRowIndexOld(0)[6]); + validateCellPositionOld(6, 1); await userEvent.keyboard('{arrowright}'); - validateCellPosition(7, 1); + validateCellPositionOld(7, 1); await userEvent.keyboard('{arrowright}'); - validateCellPosition(9, 1); + validateCellPositionOld(9, 1); await userEvent.keyboard('{arrowright}'); - validateCellPosition(10, 1); + validateCellPositionOld(10, 1); await userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}'); - validateCellPosition(6, 1); + validateCellPositionOld(6, 1); // viewport rows - await userEvent.click(getCellsAtRowIndex(3)[1]); - validateCellPosition(1, 4); + await userEvent.click(getCellsAtRowIndexOld(3)[1]); + validateCellPositionOld(1, 4); await userEvent.keyboard('{arrowright}'); - validateCellPosition(2, 4); + validateCellPositionOld(2, 4); await userEvent.keyboard('{arrowright}'); - validateCellPosition(3, 4); + validateCellPositionOld(3, 4); await userEvent.keyboard('{arrowdown}'); - validateCellPosition(2, 5); + validateCellPositionOld(2, 5); await userEvent.keyboard('{arrowleft}'); - validateCellPosition(1, 5); + validateCellPositionOld(1, 5); await userEvent.keyboard('{arrowright}'); - validateCellPosition(2, 5); + validateCellPositionOld(2, 5); await userEvent.keyboard('{arrowright}'); - validateCellPosition(5, 5); + validateCellPositionOld(5, 5); await userEvent.keyboard('{arrowleft}'); - validateCellPosition(2, 5); + validateCellPositionOld(2, 5); await userEvent.keyboard('{arrowdown}'); - validateCellPosition(2, 6); + validateCellPositionOld(2, 6); await userEvent.keyboard('{arrowdown}{arrowdown}'); - validateCellPosition(0, 8); + validateCellPositionOld(0, 8); await userEvent.keyboard('{arrowLeft}'); - validateCellPosition(0, 8); + validateCellPositionOld(0, 8); await userEvent.keyboard('{arrowright}'); - validateCellPosition(5, 8); + validateCellPositionOld(5, 8); await userEvent.tab({ shift: true }); await userEvent.tab({ shift: true }); - validateCellPosition(14, 7); + validateCellPositionOld(14, 7); await userEvent.tab(); - validateCellPosition(0, 8); - await userEvent.click(getCellsAtRowIndex(10)[11]); - validateCellPosition(11, 11); + validateCellPositionOld(0, 8); + await userEvent.click(getCellsAtRowIndexOld(10)[11]); + validateCellPositionOld(11, 11); await userEvent.tab(); - validateCellPosition(12, 11); + validateCellPositionOld(12, 11); await userEvent.tab(); - validateCellPosition(0, 12); + validateCellPositionOld(0, 12); await userEvent.tab({ shift: true }); - validateCellPosition(12, 11); + validateCellPositionOld(12, 11); // bottom summary rows - await userEvent.click(getCellsAtRowIndex(12)[6]); - validateCellPosition(6, 13); + await userEvent.click(getCellsAtRowIndexOld(12)[6]); + validateCellPositionOld(6, 13); await userEvent.keyboard('{arrowright}'); - validateCellPosition(7, 13); + validateCellPositionOld(7, 13); await userEvent.keyboard('{arrowright}'); - validateCellPosition(9, 13); + validateCellPositionOld(9, 13); await userEvent.keyboard('{arrowright}'); - validateCellPosition(10, 13); + validateCellPositionOld(10, 13); await userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}'); - validateCellPosition(6, 13); + validateCellPositionOld(6, 13); }); it('should scroll to the merged cell when selected', async () => { setupColSpanGrid(30); - await userEvent.click(getCellsAtRowIndex(10)[23]); // last visible cell (1920/80) + await userEvent.click(getCellsAtRowIndexOld(10)[23]); // last visible cell (1920/80) const spy = vi.spyOn(window.HTMLElement.prototype, 'scrollIntoView'); const testScrollIntoView = () => { expect(spy).toHaveBeenCalled(); @@ -182,13 +182,13 @@ describe('colSpan', () => { testScrollIntoView(); await navigate(1); testScrollIntoView(); // should bring the merged cell into view - validateCellPosition(27, 11); + validateCellPositionOld(27, 11); await navigate(7); testScrollIntoView(); - validateCellPosition(6, 12); // should navigate to the next row + validateCellPositionOld(6, 12); // should navigate to the next row await navigate(7, true); testScrollIntoView(); - validateCellPosition(27, 11); // should navigate to the previous row + validateCellPositionOld(27, 11); // should navigate to the previous row await navigate(27); testScrollIntoView(); await navigate(1); diff --git a/test/browser/column/draggable.test.ts b/test/browser/column/draggable.test.ts index f293e0b81e..9ca338afda 100644 --- a/test/browser/column/draggable.test.ts +++ b/test/browser/column/draggable.test.ts @@ -1,7 +1,7 @@ import { userEvent } from '@vitest/browser/context'; import type { Column } from '../../../src'; -import { getHeaderCellsNew, setupNew } from '../utils'; +import { getHeaderCells, setup } from '../utils'; const columns: readonly Column[] = [ { @@ -27,8 +27,8 @@ const columns: readonly Column[] = [ test('draggable columns', async () => { const onColumnsReorder = vi.fn(); - setupNew({ columns, rows: [], onColumnsReorder }); - const [cell1, cell2, cell3, cell4] = getHeaderCellsNew(); + setup({ columns, rows: [], onColumnsReorder }); + const [cell1, cell2, cell3, cell4] = getHeaderCells(); await expect.element(cell1).not.toHaveAttribute('draggable'); await expect.element(cell2).toHaveAttribute('draggable'); diff --git a/test/browser/column/frozen.test.ts b/test/browser/column/frozen.test.ts index 8dd50ff5e7..aae32d241c 100644 --- a/test/browser/column/frozen.test.ts +++ b/test/browser/column/frozen.test.ts @@ -1,6 +1,6 @@ import type { Column } from '../../../src'; import { cellClassname, cellFrozenClassname } from '../../../src/style/cell'; -import { getHeaderCellsNew, setupNew } from '../utils'; +import { getHeaderCells, setup } from '../utils'; test('frozen column have a specific class, and are stable-sorted before non-frozen columns', async () => { const columns: readonly Column[] = [ @@ -25,8 +25,8 @@ test('frozen column have a specific class, and are stable-sorted before non-froz } ]; - setupNew({ columns, rows: [] }); - const [cell1, cell2, cell3, cell4] = getHeaderCellsNew(); + setup({ columns, rows: [] }); + const [cell1, cell2, cell3, cell4] = getHeaderCells(); await expect .element(cell1) diff --git a/test/browser/column/grouping.test.ts b/test/browser/column/grouping.test.ts index 119f0ccc78..e9bfe4c8cd 100644 --- a/test/browser/column/grouping.test.ts +++ b/test/browser/column/grouping.test.ts @@ -1,7 +1,7 @@ import { page, userEvent } from '@vitest/browser/context'; import type { ColumnOrColumnGroup } from '../../../src'; -import { getSelectedCellNew, setupNew, validateCellPositionNew } from '../utils'; +import { getSelectedCell, setup, validateCellPosition } from '../utils'; const columns: readonly ColumnOrColumnGroup>[] = [ { key: 'col1', name: 'col 1' }, @@ -88,7 +88,7 @@ const columns: readonly ColumnOrColumnGroup>[] = [ ]; test('grouping', async () => { - setupNew({ columns, rows: [{}] }); + setup({ columns, rows: [{}] }); const grid = page.getByRole('grid'); await expect.element(grid).toHaveAttribute('aria-colcount', '12'); @@ -248,92 +248,92 @@ test('grouping', async () => { }); test('keyboard navigation', async () => { - setupNew({ columns, rows: [{}] }); + setup({ columns, rows: [{}] }); // no initial selection - await expect.element(getSelectedCellNew()).not.toBeInTheDocument(); + await expect.element(getSelectedCell()).not.toBeInTheDocument(); await userEvent.tab(); - validateCellPositionNew(0, 3); + validateCellPosition(0, 3); // arrow navigation await userEvent.keyboard('{arrowup}'); - validateCellPositionNew(0, 3); + validateCellPosition(0, 3); await userEvent.keyboard('{arrowright}'); - validateCellPositionNew(1, 3); + validateCellPosition(1, 3); await userEvent.keyboard('{arrowup}'); - validateCellPositionNew(1, 2); + validateCellPosition(1, 2); await userEvent.keyboard('{arrowup}'); - validateCellPositionNew(1, 2); + validateCellPosition(1, 2); await userEvent.keyboard('{arrowleft}'); - validateCellPositionNew(0, 3); + validateCellPosition(0, 3); await userEvent.keyboard('{arrowright}{arrowright}'); - validateCellPositionNew(2, 3); + validateCellPosition(2, 3); await userEvent.keyboard('{arrowup}'); - validateCellPositionNew(1, 2); + validateCellPosition(1, 2); await userEvent.keyboard('{arrowdown}'); - validateCellPositionNew(1, 3); + validateCellPosition(1, 3); await userEvent.keyboard('{arrowright}{arrowright}'); - validateCellPositionNew(3, 3); + validateCellPosition(3, 3); await userEvent.keyboard('{arrowright}'); - validateCellPositionNew(4, 3); + validateCellPosition(4, 3); await userEvent.keyboard('{arrowdown}'); - validateCellPositionNew(4, 4); + validateCellPosition(4, 4); await userEvent.keyboard('{arrowup}'); - validateCellPositionNew(4, 3); + validateCellPosition(4, 3); await userEvent.keyboard('{arrowup}'); - validateCellPositionNew(4, 2); + validateCellPosition(4, 2); await userEvent.keyboard('{arrowup}'); - validateCellPositionNew(4, 1); + validateCellPosition(4, 1); await userEvent.keyboard('{arrowup}'); - validateCellPositionNew(4, 0); + validateCellPosition(4, 0); await userEvent.keyboard('{arrowdown}'); - validateCellPositionNew(4, 1); + validateCellPosition(4, 1); await userEvent.keyboard('{arrowright}'); - validateCellPositionNew(5, 3); + validateCellPosition(5, 3); await userEvent.keyboard('{arrowleft}'); - validateCellPositionNew(4, 3); + validateCellPosition(4, 3); await userEvent.keyboard('{arrowup}'); - validateCellPositionNew(4, 2); + validateCellPosition(4, 2); await userEvent.keyboard('{arrowright}'); - validateCellPositionNew(5, 3); + validateCellPosition(5, 3); await userEvent.keyboard('{arrowright}'); - validateCellPositionNew(6, 3); + validateCellPosition(6, 3); await userEvent.keyboard('{arrowright}'); - validateCellPositionNew(7, 3); + validateCellPosition(7, 3); await userEvent.keyboard('{arrowup}'); - validateCellPositionNew(7, 2); + validateCellPosition(7, 2); await userEvent.keyboard('{arrowup}'); - validateCellPositionNew(4, 0); + validateCellPosition(4, 0); await userEvent.keyboard('{arrowright}'); - validateCellPositionNew(8, 0); + validateCellPosition(8, 0); await userEvent.keyboard('{arrowleft}'); - validateCellPositionNew(4, 0); + validateCellPosition(4, 0); // home/end navigation await userEvent.keyboard('{home}'); - validateCellPositionNew(0, 3); + validateCellPosition(0, 3); await userEvent.keyboard('{end}'); - validateCellPositionNew(11, 3); + validateCellPosition(11, 3); await userEvent.keyboard('{arrowleft}'); - validateCellPositionNew(10, 3); + validateCellPosition(10, 3); // tab navigation await userEvent.tab(); - validateCellPositionNew(11, 3); + validateCellPosition(11, 3); await userEvent.tab({ shift: true }); await userEvent.tab({ shift: true }); await userEvent.tab({ shift: true }); - validateCellPositionNew(8, 3); + validateCellPosition(8, 3); await userEvent.keyboard('{arrowup}'); await userEvent.tab({ shift: true }); - validateCellPositionNew(4, 0); + validateCellPosition(4, 0); await userEvent.tab(); - validateCellPositionNew(8, 0); + validateCellPosition(8, 0); await userEvent.keyboard('{home}{end}'); await userEvent.tab(); - validateCellPositionNew(0, 4); + validateCellPosition(0, 4); await userEvent.tab({ shift: true }); - validateCellPositionNew(11, 3); + validateCellPosition(11, 3); }); diff --git a/test/browser/column/headerCellClass.test.ts b/test/browser/column/headerCellClass.test.ts index fc5b01de9b..4d716e6d3d 100644 --- a/test/browser/column/headerCellClass.test.ts +++ b/test/browser/column/headerCellClass.test.ts @@ -1,6 +1,6 @@ import type { Column, ColumnGroup } from '../../../src'; import { cellClassname } from '../../../src/style/cell'; -import { getHeaderCellsNew, setupNew } from '../utils'; +import { getHeaderCells, setup } from '../utils'; test('headerCellClass is either nullish or a string', async () => { const columns: readonly Column[] = [ @@ -15,8 +15,8 @@ test('headerCellClass is either nullish or a string', async () => { } ]; - setupNew({ columns, rows: [] }); - const [cell1, cell2] = getHeaderCellsNew(); + setup({ columns, rows: [] }); + const [cell1, cell2] = getHeaderCells(); await expect.element(cell1).toHaveClass(cellClassname, { exact: true }); await expect.element(cell2).toHaveClass(`${cellClassname} my-header`, { exact: true }); }); @@ -34,8 +34,8 @@ test('columnGroup.headerCellClass is either nullish or a string', async () => { } ]; - setupNew({ columns, rows: [] }); - const [cell1, cell2] = getHeaderCellsNew(); + setup({ columns, rows: [] }); + const [cell1, cell2] = getHeaderCells(); await expect.element(cell1).toHaveClass(cellClassname, { exact: true }); await expect.element(cell2).toHaveClass(`${cellClassname} my-header`, { exact: true }); }); diff --git a/test/browser/column/key.test.ts b/test/browser/column/key.test.ts index 4ae1b60b48..497b48b224 100644 --- a/test/browser/column/key.test.ts +++ b/test/browser/column/key.test.ts @@ -1,5 +1,5 @@ import type { Column } from '../../../src'; -import { setupNew } from '../utils'; +import { setup } from '../utils'; test('key is escaped in query selectors', () => { const columns: readonly Column[] = [ @@ -10,6 +10,6 @@ test('key is escaped in query selectors', () => { ]; expect(() => { - setupNew({ columns, rows: [] }); + setup({ columns, rows: [] }); }).not.toThrow(); }); diff --git a/test/browser/column/name.test.tsx b/test/browser/column/name.test.tsx index b02255ed4a..a275586f3d 100644 --- a/test/browser/column/name.test.tsx +++ b/test/browser/column/name.test.tsx @@ -1,5 +1,5 @@ import type { Column } from '../../../src'; -import { getHeaderCellsNew, setupNew } from '../utils'; +import { getHeaderCells, setup } from '../utils'; test('name is either a string or an element', async () => { function Header() { @@ -17,8 +17,8 @@ test('name is either a string or an element', async () => { } ]; - setupNew({ columns, rows: [] }); - const [cell1, cell2] = getHeaderCellsNew(); + setup({ columns, rows: [] }); + const [cell1, cell2] = getHeaderCells(); await expect.element(cell1).toHaveTextContent('ID'); await expect.element(cell2).toHaveTextContent('Fancy'); }); diff --git a/test/browser/column/renderCell.test.tsx b/test/browser/column/renderCell.test.tsx index b09438a848..744f4a50b0 100644 --- a/test/browser/column/renderCell.test.tsx +++ b/test/browser/column/renderCell.test.tsx @@ -3,7 +3,7 @@ import { page, userEvent } from '@vitest/browser/context'; import DataGrid from '../../../src'; import type { Column } from '../../../src'; -import { getCellsAtRowIndex, getCellsNew, setupNew } from '../utils'; +import { getCells, getCellsAtRowIndexOld, setup } from '../utils'; interface Row { id: number; @@ -18,15 +18,15 @@ describe('renderValue', () => { const rows: readonly Row[] = [{ id: 101 }]; it('should be used by default', async () => { - setupNew({ columns, rows }); - const [cell1, cell2] = getCellsNew(); + setup({ columns, rows }); + const [cell1, cell2] = getCells(); await expect.element(cell1).toHaveTextContent('101'); await expect.element(cell2).toBeEmptyDOMElement(); }); it('should handle non-object values', async () => { - setupNew({ columns, rows: [null] }); - const [cell1, cell2] = getCellsNew(); + setup({ columns, rows: [null] }); + const [cell1, cell2] = getCells(); await expect.element(cell1).toBeEmptyDOMElement(); await expect.element(cell2).toBeEmptyDOMElement(); }); @@ -49,8 +49,8 @@ describe('Custom cell renderer', () => { const rows: readonly Row[] = [{ id: 101 }]; it('should replace the default cell renderer', async () => { - setupNew({ columns, rows }); - const [cell1, cell2] = getCellsNew(); + setup({ columns, rows }); + const [cell1, cell2] = getCells(); await expect.element(cell1).toHaveTextContent('#101'); await expect.element(cell2).toHaveTextContent('No name'); }); @@ -91,7 +91,7 @@ describe('Custom cell renderer', () => { page.render(); - const [cell] = getCellsNew(); + const [cell] = getCells(); await expect.element(cell).toHaveTextContent('value: 1'); await userEvent.click(page.getByRole('button')); await expect.element(cell).toHaveTextContent('value: 2'); @@ -142,12 +142,12 @@ test('Cell should not steal focus when the focus is outside the grid and cell is page.render(); - await userEvent.click(getCellsAtRowIndex(0)[0]); - expect(getCellsAtRowIndex(0)[0]).toHaveFocus(); + await userEvent.click(getCellsAtRowIndexOld(0)[0]); + expect(getCellsAtRowIndexOld(0)[0]).toHaveFocus(); const button = page.getByRole('button', { name: 'Test' }); await expect.element(button).not.toHaveFocus(); await userEvent.click(button); - expect(getCellsAtRowIndex(0)[0]).not.toHaveFocus(); + expect(getCellsAtRowIndexOld(0)[0]).not.toHaveFocus(); await expect.element(button).toHaveFocus(); }); diff --git a/test/browser/column/renderEditCell.test.tsx b/test/browser/column/renderEditCell.test.tsx index aca6434023..8345d3d8c7 100644 --- a/test/browser/column/renderEditCell.test.tsx +++ b/test/browser/column/renderEditCell.test.tsx @@ -5,7 +5,7 @@ import { page, userEvent } from '@vitest/browser/context'; import DataGrid from '../../../src'; import type { Column, DataGridProps } from '../../../src'; -import { getCellsAtRowIndex, getGrid, getSelectedCell, scrollGrid } from '../utils'; +import { getCellsAtRowIndexOld, getGridOld, getSelectedCellOld, scrollGrid } from '../utils'; interface Row { col1: number; @@ -16,62 +16,62 @@ describe('Editor', () => { it('should open editor on double click', async () => { page.render(); const editor = page.getByRole('spinbutton', { name: 'col1-editor' }); - await userEvent.click(getCellsAtRowIndex(0)[0]); + await userEvent.click(getCellsAtRowIndexOld(0)[0]); await expect.element(editor).not.toBeInTheDocument(); - await userEvent.dblClick(getCellsAtRowIndex(0)[0]); + await userEvent.dblClick(getCellsAtRowIndexOld(0)[0]); await expect.element(editor).toHaveValue(1); await userEvent.keyboard('2'); await userEvent.tab(); await expect.element(editor).not.toBeInTheDocument(); - expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^12$/); + expect(getCellsAtRowIndexOld(0)[0]).toHaveTextContent(/^12$/); }); it('should open and commit changes on enter', async () => { page.render(); const editor = page.getByRole('spinbutton', { name: 'col1-editor' }); - await userEvent.click(getCellsAtRowIndex(0)[0]); + await userEvent.click(getCellsAtRowIndexOld(0)[0]); await expect.element(editor).not.toBeInTheDocument(); await userEvent.keyboard('{enter}'); await expect.element(editor).toHaveValue(1); await userEvent.keyboard('3{enter}'); - expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^13$/); - expect(getCellsAtRowIndex(0)[0]).toHaveFocus(); + expect(getCellsAtRowIndexOld(0)[0]).toHaveTextContent(/^13$/); + expect(getCellsAtRowIndexOld(0)[0]).toHaveFocus(); await expect.element(editor).not.toBeInTheDocument(); }); it('should open editor when user types', async () => { page.render(); - await userEvent.click(getCellsAtRowIndex(0)[0]); + await userEvent.click(getCellsAtRowIndexOld(0)[0]); await userEvent.keyboard('123{enter}'); - expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^1123$/); + expect(getCellsAtRowIndexOld(0)[0]).toHaveTextContent(/^1123$/); }); it('should close editor and discard changes on escape', async () => { page.render(); - await userEvent.dblClick(getCellsAtRowIndex(0)[0]); + await userEvent.dblClick(getCellsAtRowIndexOld(0)[0]); const editor = page.getByRole('spinbutton', { name: 'col1-editor' }); await expect.element(editor).toHaveValue(1); await userEvent.keyboard('2222{escape}'); await expect.element(editor).not.toBeInTheDocument(); - expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^1$/); - expect(getCellsAtRowIndex(0)[0]).toHaveFocus(); + expect(getCellsAtRowIndexOld(0)[0]).toHaveTextContent(/^1$/); + expect(getCellsAtRowIndexOld(0)[0]).toHaveFocus(); }); it('should commit changes and close editor when clicked outside', async () => { page.render(); - await userEvent.dblClick(getCellsAtRowIndex(0)[0]); + await userEvent.dblClick(getCellsAtRowIndexOld(0)[0]); const editor = page.getByRole('spinbutton', { name: 'col1-editor' }); await expect.element(editor).toHaveValue(1); await userEvent.keyboard('2222'); await userEvent.click(page.getByText('outside')); await expect.element(editor).not.toBeInTheDocument(); - expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^12222$/); + expect(getCellsAtRowIndexOld(0)[0]).toHaveTextContent(/^12222$/); }); it('should commit quickly enough on outside clicks so click event handlers access the latest rows state', async () => { const onSave = vi.fn(); page.render(); - await userEvent.dblClick(getCellsAtRowIndex(0)[0]); + await userEvent.dblClick(getCellsAtRowIndexOld(0)[0]); await userEvent.keyboard('234'); expect(onSave).not.toHaveBeenCalled(); const saveButton = page.getByRole('button', { name: 'save' }); @@ -94,25 +94,25 @@ describe('Editor', () => { } page.render(); - await userEvent.click(getCellsAtRowIndex(0)[0]); - expect(getCellsAtRowIndex(0)).toHaveLength(2); + await userEvent.click(getCellsAtRowIndexOld(0)[0]); + expect(getCellsAtRowIndexOld(0)).toHaveLength(2); await scrollGrid({ scrollTop: 2000 }); - expect(getCellsAtRowIndex(0)).toHaveLength(1); + expect(getCellsAtRowIndexOld(0)).toHaveLength(1); const editor = page.getByRole('spinbutton', { name: 'col1-editor' }); await expect.element(editor).not.toBeInTheDocument(); - expect(getGrid().scrollTop).toBe(2000); + expect(getGridOld().scrollTop).toBe(2000); await userEvent.keyboard('123'); await waitFor(() => { - expect(getCellsAtRowIndex(0)).toHaveLength(2); + expect(getCellsAtRowIndexOld(0)).toHaveLength(2); }); await expect.element(editor).toHaveValue(123); - expect(getGrid().scrollTop).toBe(0); + expect(getGridOld().scrollTop).toBe(0); }); describe('editable', () => { it('should be editable if an editor is specified and editable is undefined/null', async () => { page.render(); - const cell = getCellsAtRowIndex(0)[1]; + const cell = getCellsAtRowIndexOld(0)[1]; expect(cell).not.toHaveAttribute('aria-readonly'); await userEvent.dblClick(cell); await expect.element(page.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument(); @@ -120,13 +120,13 @@ describe('Editor', () => { it('should be editable if an editor is specified and editable is set to true', async () => { page.render(); - await userEvent.dblClick(getCellsAtRowIndex(0)[1]); + await userEvent.dblClick(getCellsAtRowIndexOld(0)[1]); await expect.element(page.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument(); }); it('should not be editable if editable is false', async () => { page.render(); - const cell = getCellsAtRowIndex(0)[1]; + const cell = getCellsAtRowIndexOld(0)[1]; expect(cell).toHaveAttribute('aria-readonly', 'true'); await userEvent.dblClick(cell); @@ -137,11 +137,11 @@ describe('Editor', () => { it('should not be editable if editable function returns false', async () => { page.render( row.col1 === 2} />); - await userEvent.dblClick(getCellsAtRowIndex(0)[1]); + await userEvent.dblClick(getCellsAtRowIndexOld(0)[1]); const editor = page.getByRole('textbox', { name: 'col2-editor' }); await expect.element(editor).not.toBeInTheDocument(); - await userEvent.dblClick(getCellsAtRowIndex(1)[1]); + await userEvent.dblClick(getCellsAtRowIndexOld(1)[1]); await expect.element(editor).toBeInTheDocument(); }); }); @@ -149,24 +149,24 @@ describe('Editor', () => { describe('editorOptions', () => { it('should detect outside click if editor is rendered in a portal', async () => { page.render(); - await userEvent.dblClick(getCellsAtRowIndex(0)[1]); + await userEvent.dblClick(getCellsAtRowIndexOld(0)[1]); const editor1 = page.getByRole('textbox', { name: 'col2-editor' }); await expect.element(editor1).toHaveValue('a1'); await userEvent.keyboard('23'); // The cell value should update as the editor value is changed - expect(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a123$/); + expect(getCellsAtRowIndexOld(0)[1]).toHaveTextContent(/^a123$/); // clicking in a portal does not count as an outside click await userEvent.click(editor1); await expect.element(editor1).toBeInTheDocument(); // true outside clicks are still detected await userEvent.click(page.getByText('outside')); await expect.element(editor1).not.toBeInTheDocument(); - expect(getCellsAtRowIndex(0)[1]).not.toHaveFocus(); + expect(getCellsAtRowIndexOld(0)[1]).not.toHaveFocus(); - await userEvent.dblClick(getCellsAtRowIndex(0)[1]); + await userEvent.dblClick(getCellsAtRowIndexOld(0)[1]); await userEvent.click(page.getByRole('textbox', { name: 'col2-editor' })); await userEvent.keyboard('{enter}'); - expect(getCellsAtRowIndex(0)[1]).toHaveFocus(); + expect(getCellsAtRowIndexOld(0)[1]).toHaveFocus(); }); it('should not commit on outside click if commitOnOutsideClick is false', async () => { @@ -177,7 +177,7 @@ describe('Editor', () => { }} /> ); - await userEvent.dblClick(getCellsAtRowIndex(0)[1]); + await userEvent.dblClick(getCellsAtRowIndexOld(0)[1]); const editor = page.getByRole('textbox', { name: 'col2-editor' }); await expect.element(editor).toBeInTheDocument(); await userEvent.click(page.getByText('outside')); @@ -197,9 +197,9 @@ describe('Editor', () => { }} /> ); - await userEvent.click(getCellsAtRowIndex(0)[1]); + await userEvent.click(getCellsAtRowIndexOld(0)[1]); await userEvent.keyboard('yz{enter}'); - expect(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a1yz$/); + expect(getCellsAtRowIndexOld(0)[1]).toHaveTextContent(/^a1yz$/); await userEvent.keyboard('x'); await expect .element(page.getByRole('textbox', { name: 'col2-editor' })) @@ -217,9 +217,9 @@ describe('Editor', () => { }} /> ); - await userEvent.dblClick(getCellsAtRowIndex(0)[1]); + await userEvent.dblClick(getCellsAtRowIndexOld(0)[1]); await userEvent.keyboard('a{arrowleft}b{arrowright}c{arrowdown}'); // should commit changes on arrowdown - expect(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a1bac$/); + expect(getCellsAtRowIndexOld(0)[1]).toHaveTextContent(/^a1bac$/); }); }); @@ -232,15 +232,15 @@ describe('Editor', () => { page.render(); - await userEvent.dblClick(getCellsAtRowIndex(0)[1]); + await userEvent.dblClick(getCellsAtRowIndexOld(0)[1]); await userEvent.keyboard('abc'); await scrollGrid({ scrollTop: 1500 }); - expect(getCellsAtRowIndex(40)[1]).toHaveTextContent(/^40$/); - await userEvent.click(getCellsAtRowIndex(40)[1]); - expect(getSelectedCell()).toHaveTextContent(/^40$/); + expect(getCellsAtRowIndexOld(40)[1]).toHaveTextContent(/^40$/); + await userEvent.click(getCellsAtRowIndexOld(40)[1]); + expect(getSelectedCellOld()).toHaveTextContent(/^40$/); await scrollGrid({ scrollTop: 0 }); - expect(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^0abc$/); + expect(getCellsAtRowIndexOld(0)[1]).toHaveTextContent(/^0abc$/); }); it('should not steal focus back to the cell after being closed by clicking outside the grid', async () => { @@ -282,7 +282,7 @@ describe('Editor', () => { ); const outerInput = page.getByRole('textbox', { name: 'outer-input' }); - await userEvent.dblClick(getCellsAtRowIndex(0)[0]); + await userEvent.dblClick(getCellsAtRowIndexOld(0)[0]); const col1Input = page.getByRole('textbox', { name: 'col1-input' }); await expect.element(col1Input).toHaveFocus(); await userEvent.click(outerInput); @@ -290,7 +290,7 @@ describe('Editor', () => { await expect.element(col1Input).not.toBeInTheDocument(); await expect.element(outerInput).toHaveFocus(); - await userEvent.dblClick(getCellsAtRowIndex(0)[1]); + await userEvent.dblClick(getCellsAtRowIndexOld(0)[1]); const col2Input = page.getByRole('textbox', { name: 'col2-input' }); await expect.element(col2Input).toHaveFocus(); await userEvent.click(outerInput); diff --git a/test/browser/column/renderHeaderCell.test.tsx b/test/browser/column/renderHeaderCell.test.tsx index b70efde2ae..b469814684 100644 --- a/test/browser/column/renderHeaderCell.test.tsx +++ b/test/browser/column/renderHeaderCell.test.tsx @@ -1,5 +1,5 @@ import type { Column } from '../../../src'; -import { getHeaderCellsNew, setupNew } from '../utils'; +import { getHeaderCells, setup } from '../utils'; test('renderHeaderCell is either undefined or a component', async () => { const columns: readonly Column[] = [ @@ -14,8 +14,8 @@ test('renderHeaderCell is either undefined or a component', async () => { } ]; - setupNew({ columns, rows: [] }); - const [cell1, cell2] = getHeaderCellsNew(); + setup({ columns, rows: [] }); + const [cell1, cell2] = getHeaderCells(); await expect.element(cell1).toHaveTextContent('ID'); await expect.element(cell2).toHaveTextContent('Fancy! Name'); }); diff --git a/test/browser/column/renderSummaryCell.test.tsx b/test/browser/column/renderSummaryCell.test.tsx index f470bb96b5..fd1fdf2bbd 100644 --- a/test/browser/column/renderSummaryCell.test.tsx +++ b/test/browser/column/renderSummaryCell.test.tsx @@ -1,5 +1,5 @@ import type { Column } from '../../../src'; -import { getCellsNew, setupNew } from '../utils'; +import { getCells, setup } from '../utils'; interface SummaryRow { id: number; @@ -22,7 +22,7 @@ const columns: readonly Column[] = [ ]; test('renderSummaryCell', async () => { - setupNew({ + setup({ columns, rows: [], topSummaryRows: [ @@ -35,7 +35,7 @@ test('renderSummaryCell', async () => { ] }); - const cells = getCellsNew(); + const cells = getCells(); expect(cells).toHaveLength(8); await expect.element(cells[0]).toHaveTextContent('Summary: 1'); await expect.element(cells[2]).toHaveTextContent('Summary: 2'); diff --git a/test/browser/column/resizable.test.tsx b/test/browser/column/resizable.test.tsx index bc0b9675e3..df92ca15c9 100644 --- a/test/browser/column/resizable.test.tsx +++ b/test/browser/column/resizable.test.tsx @@ -1,4 +1,3 @@ -import { act } from 'react'; import { commands, userEvent } from '@vitest/browser/context'; import type { Column } from '../../../src'; @@ -10,11 +9,11 @@ interface Row { readonly col2: string; } -function queryResizeHandle(column: HTMLElement) { +function queryResizeHandle(column: Element) { return column.querySelector(`.${resizeHandleClassname}`); } -function getResizeHandle(column: HTMLElement) { +function getResizeHandle(column: Element) { const resizeHandle = column.querySelector(`.${resizeHandleClassname}`); if (resizeHandle === null) { @@ -25,26 +24,21 @@ function getResizeHandle(column: HTMLElement) { } interface ResizeArgs { - readonly column: HTMLElement; + readonly column: Element; readonly resizeBy: number; } async function resize({ column, resizeBy }: ResizeArgs) { expect(getResizeHandle(column)).toBeInTheDocument(); - await act(async () => { - // @ts-expect-error - await commands.resizeColumn(resizeBy); - }); + // @ts-expect-error + await commands.resizeColumn(resizeBy); } -async function autoResize(column: HTMLElement) { +async function autoResize(column: Element) { const resizeHandle = getResizeHandle(column); - // eslint-disable-next-line testing-library/no-unnecessary-act - await act(async () => { - await userEvent.dblClick(resizeHandle); - }); + await userEvent.dblClick(resizeHandle); } const columns: readonly Column[] = [ @@ -66,32 +60,34 @@ const columns: readonly Column[] = [ test('cannot not resize or auto resize column when resizable is not specified', () => { setup({ columns, rows: [] }); const [col1] = getHeaderCells(); - expect(queryResizeHandle(col1)).not.toBeInTheDocument(); + expect(queryResizeHandle(col1.element())).not.toBeInTheDocument(); }); test('should resize column when dragging the handle', async () => { setup({ columns, rows: [] }); const [, col2] = getHeaderCells(); const grid = getGrid(); - expect(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' }); - await resize({ column: col2, resizeBy: -50 }); - expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 150px' }); + await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' }); + await resize({ column: col2.element(), resizeBy: -50 }); + await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 150px' }); }); test('should use the maxWidth if specified', async () => { setup({ columns, rows: [] }); const [, col2] = getHeaderCells(); - expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px ' }); - await resize({ column: col2, resizeBy: 1000 }); - expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 400px' }); + const grid = getGrid(); + await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px ' }); + await resize({ column: col2.element(), resizeBy: 1000 }); + await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 400px' }); }); test('should use the minWidth if specified', async () => { setup({ columns, rows: [] }); const [, col2] = getHeaderCells(); - expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); - await resize({ column: col2, resizeBy: -150 }); - expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 100px' }); + const grid = getGrid(); + await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' }); + await resize({ column: col2.element(), resizeBy: -150 }); + await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 100px' }); }); test('should auto resize column when resize handle is double clicked', async () => { @@ -105,9 +101,10 @@ test('should auto resize column when resize handle is double clicked', async () ] }); const [, col2] = getHeaderCells(); - expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); - await autoResize(col2); - expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 327.703px' }); + const grid = getGrid(); + await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' }); + await autoResize(col2.element()); + await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 327.703px' }); }); test('should use the maxWidth if specified on auto resize', async () => { @@ -121,9 +118,10 @@ test('should use the maxWidth if specified on auto resize', async () => { ] }); const [, col2] = getHeaderCells(); - expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); - await autoResize(col2); - expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 400px' }); + const grid = getGrid(); + await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' }); + await autoResize(col2.element()); + await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 400px' }); }); test('should use the minWidth if specified on auto resize', async () => { @@ -137,7 +135,8 @@ test('should use the minWidth if specified on auto resize', async () => { ] }); const [, col2] = getHeaderCells(); - expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 200px' }); - await autoResize(col2); - expect(getGrid()).toHaveStyle({ gridTemplateColumns: '100px 100px' }); + const grid = getGrid(); + await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' }); + await autoResize(col2.element()); + await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 100px' }); }); diff --git a/test/browser/column/summaryCellClass.test.ts b/test/browser/column/summaryCellClass.test.ts index 808c12c15f..f397474a19 100644 --- a/test/browser/column/summaryCellClass.test.ts +++ b/test/browser/column/summaryCellClass.test.ts @@ -1,7 +1,7 @@ import type { Column } from '../../../src'; import { cellClassname as cellClass } from '../../../src/style/cell'; import { summaryCellClassname } from '../../../src/SummaryCell'; -import { getCellsNew, setupNew } from '../utils'; +import { getCells, setup } from '../utils'; interface SummaryRow { id: number; @@ -18,8 +18,8 @@ test('summaryCellClass is undefined', async () => { name: 'ID' } ]; - setupNew({ columns, topSummaryRows, bottomSummaryRows, rows: [] }); - const [cell1, cell2] = getCellsNew(); + setup({ columns, topSummaryRows, bottomSummaryRows, rows: [] }); + const [cell1, cell2] = getCells(); await expect.element(cell1).toHaveClass(cellClassname, { exact: true }); await expect.element(cell2).toHaveClass(cellClassname, { exact: true }); }); @@ -32,8 +32,8 @@ test('summaryCellClass is a string', async () => { summaryCellClass: 'my-cell' } ]; - setupNew({ columns, topSummaryRows, bottomSummaryRows, rows: [] }); - const cells = getCellsNew(); + setup({ columns, topSummaryRows, bottomSummaryRows, rows: [] }); + const cells = getCells(); for (const cell of cells) { await expect.element(cell).toHaveClass(`${cellClassname} my-cell`, { exact: true }); } @@ -47,8 +47,8 @@ test('summaryCellClass returns a string', async () => { summaryCellClass: (row) => `my-cell-${row.id}` } ]; - setupNew({ columns, topSummaryRows, bottomSummaryRows, rows: [] }); - const [cell1, cell2, cell3, cell4] = getCellsNew(); + setup({ columns, topSummaryRows, bottomSummaryRows, rows: [] }); + const [cell1, cell2, cell3, cell4] = getCells(); await expect.element(cell1).toHaveClass(`${cellClassname} my-cell-0`, { exact: true }); await expect.element(cell2).toHaveClass(`${cellClassname} my-cell-1`, { exact: true }); await expect.element(cell3).toHaveClass(`${cellClassname} my-cell-2`, { exact: true }); @@ -63,8 +63,8 @@ test('summaryCellClass returns undefined', async () => { summaryCellClass: () => undefined } ]; - setupNew({ columns, topSummaryRows, bottomSummaryRows, rows: [] }); - const cells = getCellsNew(); + setup({ columns, topSummaryRows, bottomSummaryRows, rows: [] }); + const cells = getCells(); for (const cell of cells) { await expect.element(cell).toHaveClass(cellClassname, { exact: true }); } diff --git a/test/browser/columnOrder.test.tsx b/test/browser/columnOrder.test.tsx index c730357de7..32123a9697 100644 --- a/test/browser/columnOrder.test.tsx +++ b/test/browser/columnOrder.test.tsx @@ -2,7 +2,7 @@ import { page } from '@vitest/browser/context'; import DataGrid, { SelectColumn, TreeDataGrid } from '../../src'; import type { Column } from '../../src'; -import { getHeaderCellsNew } from './utils'; +import { getHeaderCells } from './utils'; const frozen1: Column = { key: 'f1', @@ -46,7 +46,7 @@ test('column order', () => { )); } - expect(getHeaderCellsNew().map((c) => c.element().textContent)).toStrictEqual(expected); + expect(getHeaderCells().map((c) => c.element().textContent)).toStrictEqual(expected); unmount(); } diff --git a/test/browser/copyPaste.test.tsx b/test/browser/copyPaste.test.tsx index c4fcd7bbd9..f78c389f67 100644 --- a/test/browser/copyPaste.test.tsx +++ b/test/browser/copyPaste.test.tsx @@ -4,10 +4,10 @@ import { page, userEvent } from '@vitest/browser/context'; import DataGrid from '../../src'; import type { Column, PasteEvent } from '../../src'; import { - copySelectedCellNew, - getCellsAtRowIndex, - getSelectedCellNew, - pasteSelectedCellNew + copySelectedCell, + getCellsAtRowIndexOld, + getSelectedCell, + pasteSelectedCell } from './utils'; interface Row { @@ -84,126 +84,126 @@ function setup(onPasteCallback = true, onCopyCallback = false) { test('should not allow copy/paste if onPaste & onCopy is undefined', async () => { setup(false, false); - await userEvent.click(getCellsAtRowIndex(0)[0]); - await copySelectedCellNew(); - await expect.element(getSelectedCellNew()).not.toHaveClass(copyCellClassName); + await userEvent.click(getCellsAtRowIndexOld(0)[0]); + await copySelectedCell(); + await expect.element(getSelectedCell()).not.toHaveClass(copyCellClassName); expect(onCopySpy).not.toHaveBeenCalled(); await userEvent.keyboard('{arrowdown}'); - await pasteSelectedCellNew(); + await pasteSelectedCell(); await userEvent.keyboard('{escape}'); - expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a2'); + expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a2'); expect(onPasteSpy).not.toHaveBeenCalled(); }); test('should allow copy if only onCopy is specified', async () => { setup(false, true); - await userEvent.click(getCellsAtRowIndex(0)[0]); - await copySelectedCellNew(); - await expect.element(getSelectedCellNew()).toHaveClass(copyCellClassName); + await userEvent.click(getCellsAtRowIndexOld(0)[0]); + await copySelectedCell(); + await expect.element(getSelectedCell()).toHaveClass(copyCellClassName); expect(onCopySpy).toHaveBeenCalledWith({ sourceRow: initialRows[0], sourceColumnKey: 'col' }); await userEvent.keyboard('{arrowdown}'); - await pasteSelectedCellNew(); - expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a2'); + await pasteSelectedCell(); + expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a2'); expect(onPasteSpy).not.toHaveBeenCalled(); }); test('should allow copy/paste if only onPaste is specified', async () => { setup(true, false); - await userEvent.click(getCellsAtRowIndex(0)[0]); - await copySelectedCellNew(); - await expect.element(getSelectedCellNew()).toHaveClass(copyCellClassName); + await userEvent.click(getCellsAtRowIndexOld(0)[0]); + await copySelectedCell(); + await expect.element(getSelectedCell()).toHaveClass(copyCellClassName); expect(onCopySpy).not.toHaveBeenCalled(); await userEvent.keyboard('{arrowdown}'); - await pasteSelectedCellNew(); - expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1'); + await pasteSelectedCell(); + expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a1'); expect(onPasteSpy).toHaveBeenCalledTimes(1); }); test('should allow copy/paste if both onPaste & onCopy is specified', async () => { setup(true, true); - await userEvent.click(getCellsAtRowIndex(0)[0]); - await copySelectedCellNew(); - await expect.element(getSelectedCellNew()).toHaveClass(copyCellClassName); + await userEvent.click(getCellsAtRowIndexOld(0)[0]); + await copySelectedCell(); + await expect.element(getSelectedCell()).toHaveClass(copyCellClassName); expect(onCopySpy).toHaveBeenCalledWith({ sourceRow: initialRows[0], sourceColumnKey: 'col' }); await userEvent.keyboard('{arrowdown}'); - await pasteSelectedCellNew(); - expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1'); + await pasteSelectedCell(); + expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a1'); expect(onPasteSpy).toHaveBeenCalledTimes(1); }); test('should not allow paste on readonly cells', async () => { setup(); - await userEvent.click(getCellsAtRowIndex(1)[0]); - await copySelectedCellNew(); - await expect.element(getSelectedCellNew()).toHaveClass(copyCellClassName); + await userEvent.click(getCellsAtRowIndexOld(1)[0]); + await copySelectedCell(); + await expect.element(getSelectedCell()).toHaveClass(copyCellClassName); await userEvent.keyboard('{arrowdown}'); - await pasteSelectedCellNew(); - expect(getCellsAtRowIndex(2)[0]).toHaveTextContent('a3'); + await pasteSelectedCell(); + expect(getCellsAtRowIndexOld(2)[0]).toHaveTextContent('a3'); }); test('should allow copying a readonly cell, and pasting the value into a writable cell', async () => { setup(); - await userEvent.click(getCellsAtRowIndex(2)[0]); - await copySelectedCellNew(); - await expect.element(getSelectedCellNew()).toHaveClass(copyCellClassName); + await userEvent.click(getCellsAtRowIndexOld(2)[0]); + await copySelectedCell(); + await expect.element(getSelectedCell()).toHaveClass(copyCellClassName); await userEvent.keyboard('{arrowup}'); - await pasteSelectedCellNew(); - expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a3'); + await pasteSelectedCell(); + expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a3'); }); test('should cancel copy/paste on escape', async () => { setup(); - await userEvent.click(getCellsAtRowIndex(0)[0]); - await copySelectedCellNew(); - await expect.element(getSelectedCellNew()).toHaveClass(copyCellClassName); + await userEvent.click(getCellsAtRowIndexOld(0)[0]); + await copySelectedCell(); + await expect.element(getSelectedCell()).toHaveClass(copyCellClassName); await userEvent.keyboard('{escape}'); - await expect.element(getSelectedCellNew()).not.toHaveClass(copyCellClassName); + await expect.element(getSelectedCell()).not.toHaveClass(copyCellClassName); await userEvent.keyboard('{arrowdown}'); - await pasteSelectedCellNew(); - expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a2'); + await pasteSelectedCell(); + expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a2'); }); test('should not allow copy on header or summary cells', async () => { setup(); await userEvent.tab(); - await copySelectedCellNew(); - await expect.element(getSelectedCellNew()).not.toHaveClass(copyCellClassName); + await copySelectedCell(); + await expect.element(getSelectedCell()).not.toHaveClass(copyCellClassName); await userEvent.keyboard('{arrowdown}'); - await pasteSelectedCellNew(); - await expect.element(getSelectedCellNew()).toHaveTextContent('a1'); + await pasteSelectedCell(); + await expect.element(getSelectedCell()).toHaveTextContent('a1'); expect(onPasteSpy).not.toHaveBeenCalled(); await userEvent.keyboard('{Control>}{end}'); - await copySelectedCellNew(); - await expect.element(getSelectedCellNew()).not.toHaveClass(copyCellClassName); + await copySelectedCell(); + await expect.element(getSelectedCell()).not.toHaveClass(copyCellClassName); await userEvent.keyboard('{arrowup}'); - await pasteSelectedCellNew(); - await expect.element(getSelectedCellNew()).toHaveTextContent('a3'); + await pasteSelectedCell(); + await expect.element(getSelectedCell()).toHaveTextContent('a3'); expect(onPasteSpy).not.toHaveBeenCalled(); }); test('should not allow paste on header or summary cells', async () => { setup(); - await userEvent.click(getCellsAtRowIndex(0)[0]); - await copySelectedCellNew(); + await userEvent.click(getCellsAtRowIndexOld(0)[0]); + await copySelectedCell(); await userEvent.keyboard('{arrowup}'); - await pasteSelectedCellNew(); - await expect.element(getSelectedCellNew()).toHaveTextContent('Col'); + await pasteSelectedCell(); + await expect.element(getSelectedCell()).toHaveTextContent('Col'); expect(onPasteSpy).not.toHaveBeenCalled(); await userEvent.keyboard('{Control>}{end}'); - await pasteSelectedCellNew(); - await expect.element(getSelectedCellNew()).toHaveTextContent('s1'); + await pasteSelectedCell(); + await expect.element(getSelectedCell()).toHaveTextContent('s1'); expect(onPasteSpy).not.toHaveBeenCalled(); }); test('should not start editing when pressing ctrl+', async () => { setup(); - await userEvent.click(getCellsAtRowIndex(1)[0]); + await userEvent.click(getCellsAtRowIndexOld(1)[0]); await userEvent.keyboard('{Control>}b'); - await expect.element(getSelectedCellNew()).not.toHaveClass('rdg-editor-container'); + await expect.element(getSelectedCell()).not.toHaveClass('rdg-editor-container'); }); diff --git a/test/browser/direction.test.ts b/test/browser/direction.test.ts index 412e655a3e..7b4c4f0ee3 100644 --- a/test/browser/direction.test.ts +++ b/test/browser/direction.test.ts @@ -1,7 +1,7 @@ import userEvent from '@testing-library/user-event'; import type { Column } from '../../src'; -import { getGridNew, getSelectedCellNew, setupNew } from './utils'; +import { getGrid, getSelectedCell, setup } from './utils'; interface Row { id: number; @@ -22,28 +22,28 @@ const columns: readonly Column[] = [ const rows: readonly Row[] = []; test('should use left to right direction by default', async () => { - setupNew({ rows, columns }); - await expect.element(getGridNew()).toHaveAttribute('dir', 'ltr'); + setup({ rows, columns }); + await expect.element(getGrid()).toHaveAttribute('dir', 'ltr'); await userEvent.tab(); - await expect.element(getSelectedCellNew()).toHaveTextContent('ID'); + await expect.element(getSelectedCell()).toHaveTextContent('ID'); await userEvent.keyboard('{ArrowRight}'); - await expect.element(getSelectedCellNew()).toHaveTextContent('Name'); + await expect.element(getSelectedCell()).toHaveTextContent('Name'); }); test('should use left to right direction if direction prop is set to ltr', async () => { - setupNew({ rows, columns, direction: 'ltr' }); - await expect.element(getGridNew()).toHaveAttribute('dir', 'ltr'); + setup({ rows, columns, direction: 'ltr' }); + await expect.element(getGrid()).toHaveAttribute('dir', 'ltr'); await userEvent.tab(); - await expect.element(getSelectedCellNew()).toHaveTextContent('ID'); + await expect.element(getSelectedCell()).toHaveTextContent('ID'); await userEvent.keyboard('{ArrowRight}'); - await expect.element(getSelectedCellNew()).toHaveTextContent('Name'); + await expect.element(getSelectedCell()).toHaveTextContent('Name'); }); test('should use right to left direction if direction prop is set to rtl', async () => { - setupNew({ rows, columns, direction: 'rtl' }); - await expect.element(getGridNew()).toHaveAttribute('dir', 'rtl'); + setup({ rows, columns, direction: 'rtl' }); + await expect.element(getGrid()).toHaveAttribute('dir', 'rtl'); await userEvent.tab(); - await expect.element(getSelectedCellNew()).toHaveTextContent('ID'); + await expect.element(getSelectedCell()).toHaveTextContent('ID'); await userEvent.keyboard('{ArrowLeft}'); - await expect.element(getSelectedCellNew()).toHaveTextContent('Name'); + await expect.element(getSelectedCell()).toHaveTextContent('Name'); }); diff --git a/test/browser/dragFill.test.tsx b/test/browser/dragFill.test.tsx index ba36d62e2c..e6fd478501 100644 --- a/test/browser/dragFill.test.tsx +++ b/test/browser/dragFill.test.tsx @@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event'; import DataGrid from '../../src'; import type { Column, FillEvent } from '../../src'; -import { getCellsAtRowIndex, getRows } from './utils'; +import { getCellsAtRowIndexOld, getRowsOld } from './utils'; interface Row { col: string; @@ -50,65 +50,65 @@ function getDragHandle() { test('should not allow dragFill if onFill is undefined', async () => { setup(false); - await userEvent.click(getCellsAtRowIndex(0)[0]); + await userEvent.click(getCellsAtRowIndexOld(0)[0]); expect(getDragHandle()).not.toBeInTheDocument(); }); test('should allow dragFill if onFill is specified', async () => { setup(); - const cell = getCellsAtRowIndex(0)[0]; + const cell = getCellsAtRowIndexOld(0)[0]; await userEvent.click(cell); expect(cell).toHaveFocus(); await userEvent.dblClick(getDragHandle()!); expect(cell).toHaveFocus(); - expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1'); - expect(getCellsAtRowIndex(2)[0]).toHaveTextContent('a1'); - expect(getCellsAtRowIndex(3)[0]).toHaveTextContent('a4'); // readonly cell + expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a1'); + expect(getCellsAtRowIndexOld(2)[0]).toHaveTextContent('a1'); + expect(getCellsAtRowIndexOld(3)[0]).toHaveTextContent('a4'); // readonly cell }); test('should update single row using mouse', async () => { setup(); - const cell = getCellsAtRowIndex(0)[0]; + const cell = getCellsAtRowIndexOld(0)[0]; await userEvent.click(cell); await userEvent.pointer([ { keys: '[MouseLeft>]', target: getDragHandle()! }, - { target: getRows()[1] }, + { target: getRowsOld()[1] }, { keys: '[/MouseLeft]' } ]); - expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1'); - expect(getCellsAtRowIndex(2)[0]).toHaveTextContent('a3'); + expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a1'); + expect(getCellsAtRowIndexOld(2)[0]).toHaveTextContent('a3'); expect(cell).toHaveFocus(); }); test('should update multiple rows using mouse', async () => { setup(); - await userEvent.click(getCellsAtRowIndex(0)[0]); + await userEvent.click(getCellsAtRowIndexOld(0)[0]); await userEvent.pointer([ { keys: '[MouseLeft>]', target: getDragHandle()! }, - { target: getRows()[3] }, + { target: getRowsOld()[3] }, { keys: '[/MouseLeft]' } ]); - expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1'); - expect(getCellsAtRowIndex(2)[0]).toHaveTextContent('a1'); - expect(getCellsAtRowIndex(3)[0]).toHaveTextContent('a4'); // readonly cell + expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a1'); + expect(getCellsAtRowIndexOld(2)[0]).toHaveTextContent('a1'); + expect(getCellsAtRowIndexOld(3)[0]).toHaveTextContent('a4'); // readonly cell }); test('should allow drag up using mouse', async () => { setup(); - await userEvent.click(getCellsAtRowIndex(3)[0]); + await userEvent.click(getCellsAtRowIndexOld(3)[0]); await userEvent.pointer([ { keys: '[MouseLeft>]', target: getDragHandle()! }, - { target: getRows()[0] }, + { target: getRowsOld()[0] }, { keys: '[/MouseLeft]' } ]); - expect(getCellsAtRowIndex(0)[0]).toHaveTextContent('a4'); - expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a4'); - expect(getCellsAtRowIndex(2)[0]).toHaveTextContent('a4'); + expect(getCellsAtRowIndexOld(0)[0]).toHaveTextContent('a4'); + expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a4'); + expect(getCellsAtRowIndexOld(2)[0]).toHaveTextContent('a4'); }); test('should focus the cell when drag handle is clicked', async () => { setup(); - const cell = getCellsAtRowIndex(0)[0]; + const cell = getCellsAtRowIndexOld(0)[0]; await userEvent.click(cell); await userEvent.click(document.body); expect(document.body).toHaveFocus(); diff --git a/test/browser/events.test.tsx b/test/browser/events.test.tsx index 7f09614ffc..83cb0e0598 100644 --- a/test/browser/events.test.tsx +++ b/test/browser/events.test.tsx @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'; import DataGrid from '../../src'; import type { Column, DataGridProps } from '../../src'; -import { getCellsAtRowIndex } from './utils'; +import { getCellsAtRowIndexOld } from './utils'; interface Row { col1: number; @@ -64,10 +64,10 @@ describe('Events', () => { }} /> ); - await userEvent.click(getCellsAtRowIndex(0)[0]); - expect(getCellsAtRowIndex(0)[0]).toHaveAttribute('aria-selected', 'false'); - await userEvent.click(getCellsAtRowIndex(0)[1]); - expect(getCellsAtRowIndex(0)[1]).toHaveAttribute('aria-selected', 'true'); + await userEvent.click(getCellsAtRowIndexOld(0)[0]); + expect(getCellsAtRowIndexOld(0)[0]).toHaveAttribute('aria-selected', 'false'); + await userEvent.click(getCellsAtRowIndexOld(0)[1]); + expect(getCellsAtRowIndexOld(0)[1]).toHaveAttribute('aria-selected', 'true'); }); it('should be able to open editor editor on single click using onCellClick', async () => { @@ -81,9 +81,9 @@ describe('Events', () => { }} /> ); - await userEvent.click(getCellsAtRowIndex(0)[0]); + await userEvent.click(getCellsAtRowIndexOld(0)[0]); expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument(); - await userEvent.click(getCellsAtRowIndex(0)[1]); + await userEvent.click(getCellsAtRowIndexOld(0)[1]); expect(screen.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument(); }); @@ -97,9 +97,9 @@ describe('Events', () => { }} /> ); - await userEvent.dblClick(getCellsAtRowIndex(0)[0]); + await userEvent.dblClick(getCellsAtRowIndexOld(0)[0]); expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument(); - await userEvent.dblClick(getCellsAtRowIndex(0)[1]); + await userEvent.dblClick(getCellsAtRowIndexOld(0)[1]); expect(screen.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument(); }); @@ -113,10 +113,10 @@ describe('Events', () => { }} /> ); - await userEvent.pointer({ target: getCellsAtRowIndex(0)[0], keys: '[MouseRight]' }); - expect(getCellsAtRowIndex(0)[0]).toHaveAttribute('aria-selected', 'false'); - await userEvent.pointer({ target: getCellsAtRowIndex(0)[1], keys: '[MouseRight]' }); - expect(getCellsAtRowIndex(0)[1]).toHaveAttribute('aria-selected', 'true'); + await userEvent.pointer({ target: getCellsAtRowIndexOld(0)[0], keys: '[MouseRight]' }); + expect(getCellsAtRowIndexOld(0)[0]).toHaveAttribute('aria-selected', 'false'); + await userEvent.pointer({ target: getCellsAtRowIndexOld(0)[1], keys: '[MouseRight]' }); + expect(getCellsAtRowIndexOld(0)[1]).toHaveAttribute('aria-selected', 'true'); }); it('should call onSelectedCellChange when cell selection is changed', async () => { @@ -127,7 +127,7 @@ describe('Events', () => { expect(onSelectedCellChange).not.toHaveBeenCalled(); // Selected by click - await userEvent.click(getCellsAtRowIndex(0)[1]); + await userEvent.click(getCellsAtRowIndexOld(0)[1]); expect(onSelectedCellChange).toHaveBeenCalledWith({ column: expect.objectContaining(columns[1]), row: rows[0], @@ -136,7 +136,7 @@ describe('Events', () => { expect(onSelectedCellChange).toHaveBeenCalledTimes(1); // Selected by double click - await userEvent.dblClick(getCellsAtRowIndex(0)[0]); + await userEvent.dblClick(getCellsAtRowIndexOld(0)[0]); expect(onSelectedCellChange).toHaveBeenCalledWith({ column: expect.objectContaining(columns[0]), row: rows[0], @@ -145,7 +145,7 @@ describe('Events', () => { expect(onSelectedCellChange).toHaveBeenCalledTimes(2); // Selected by right-click - await userEvent.pointer({ target: getCellsAtRowIndex(1)[0], keys: '[MouseRight]' }); + await userEvent.pointer({ target: getCellsAtRowIndexOld(1)[0], keys: '[MouseRight]' }); expect(onSelectedCellChange).toHaveBeenCalledWith({ column: expect.objectContaining(columns[0]), row: rows[1], diff --git a/test/browser/keyboardNavigation.test.tsx b/test/browser/keyboardNavigation.test.tsx index 5be9d45a62..e1c44be25d 100644 --- a/test/browser/keyboardNavigation.test.tsx +++ b/test/browser/keyboardNavigation.test.tsx @@ -4,11 +4,11 @@ import userEvent from '@testing-library/user-event'; import type { Column } from '../../src'; import DataGrid, { SelectColumn } from '../../src'; import { - getCellsAtRowIndex, - getSelectedCell, + getCellsAtRowIndexOld, + getSelectedCellOld, scrollGrid, - setup, - validateCellPosition + setupOld, + validateCellPositionOld } from './utils'; type Row = undefined; @@ -28,138 +28,138 @@ const columns = [ ] as const satisfies Column[]; test('keyboard navigation', async () => { - setup({ columns, rows, topSummaryRows, bottomSummaryRows }); + setupOld({ columns, rows, topSummaryRows, bottomSummaryRows }); // no initial selection - expect(getSelectedCell()).not.toBeInTheDocument(); + expect(getSelectedCellOld()).not.toBeInTheDocument(); // tab into the grid await userEvent.tab(); - validateCellPosition(0, 0); + validateCellPositionOld(0, 0); // tab to the next cell await userEvent.tab(); - validateCellPosition(1, 0); + validateCellPositionOld(1, 0); // tab back to the previous cell await userEvent.tab({ shift: true }); - validateCellPosition(0, 0); + validateCellPositionOld(0, 0); // arrow navigation await userEvent.keyboard('{arrowdown}'); - validateCellPosition(0, 1); + validateCellPositionOld(0, 1); await userEvent.keyboard('{arrowright}'); - validateCellPosition(1, 1); + validateCellPositionOld(1, 1); await userEvent.keyboard('{arrowdown}'); - validateCellPosition(1, 2); + validateCellPositionOld(1, 2); await userEvent.keyboard('{arrowleft}'); - validateCellPosition(0, 2); + validateCellPositionOld(0, 2); await userEvent.keyboard('{arrowup}'); - validateCellPosition(0, 1); + validateCellPositionOld(0, 1); await userEvent.keyboard('{arrowup}'); - validateCellPosition(0, 0); + validateCellPositionOld(0, 0); // page {up,down} await userEvent.keyboard('{PageDown}'); - validateCellPosition(0, 26); + validateCellPositionOld(0, 26); await userEvent.keyboard('{PageDown}'); - validateCellPosition(0, 52); + validateCellPositionOld(0, 52); await userEvent.keyboard('{PageUp}'); - validateCellPosition(0, 26); + validateCellPositionOld(0, 26); // home/end navigation await userEvent.keyboard('{end}'); - validateCellPosition(6, 26); + validateCellPositionOld(6, 26); await userEvent.keyboard('{home}'); - validateCellPosition(0, 26); + validateCellPositionOld(0, 26); await userEvent.keyboard('{Control>}{end}'); - validateCellPosition(6, 103); + validateCellPositionOld(6, 103); await userEvent.keyboard('{arrowdown}'); - validateCellPosition(6, 103); + validateCellPositionOld(6, 103); await userEvent.keyboard('{arrowright}'); - validateCellPosition(6, 103); + validateCellPositionOld(6, 103); await userEvent.keyboard('{end}'); - validateCellPosition(6, 103); + validateCellPositionOld(6, 103); await userEvent.keyboard('{Control>}{end}'); - validateCellPosition(6, 103); + validateCellPositionOld(6, 103); await userEvent.keyboard('{PageDown}'); - validateCellPosition(6, 103); + validateCellPositionOld(6, 103); await userEvent.keyboard('{Control>}{home}'); - validateCellPosition(0, 0); + validateCellPositionOld(0, 0); await userEvent.keyboard('{home}'); - validateCellPosition(0, 0); + validateCellPositionOld(0, 0); await userEvent.keyboard('{Control>}{home}'); - validateCellPosition(0, 0); + validateCellPositionOld(0, 0); await userEvent.keyboard('{PageUp}'); - validateCellPosition(0, 0); + validateCellPositionOld(0, 0); // tab at the end of a row selects the first cell on the next row await userEvent.keyboard('{end}'); await userEvent.tab(); - validateCellPosition(0, 1); + validateCellPositionOld(0, 1); // shift tab should select the last cell of the previous row await userEvent.tab({ shift: true }); - validateCellPosition(6, 0); + validateCellPositionOld(6, 0); }); test('arrow and tab navigation', async () => { - setup({ columns, rows, bottomSummaryRows }); + setupOld({ columns, rows, bottomSummaryRows }); // pressing arrowleft on the leftmost cell does nothing await userEvent.tab(); await userEvent.keyboard('{arrowdown}'); - validateCellPosition(0, 1); + validateCellPositionOld(0, 1); await userEvent.keyboard('{arrowleft}'); - validateCellPosition(0, 1); + validateCellPositionOld(0, 1); // pressing arrowright on the rightmost cell does nothing await userEvent.keyboard('{end}'); - validateCellPosition(6, 1); + validateCellPositionOld(6, 1); await userEvent.keyboard('{arrowright}'); - validateCellPosition(6, 1); + validateCellPositionOld(6, 1); // pressing tab on the rightmost cell navigates to the leftmost cell on the next row await userEvent.tab(); - validateCellPosition(0, 2); + validateCellPositionOld(0, 2); // pressing shift+tab on the leftmost cell navigates to the rightmost cell on the previous row await userEvent.tab({ shift: true }); - validateCellPosition(6, 1); + validateCellPositionOld(6, 1); }); test('grid enter/exit', async () => { - setup({ columns, rows: new Array(5), bottomSummaryRows }); + setupOld({ columns, rows: new Array(5), bottomSummaryRows }); // no initial selection - expect(getSelectedCell()).not.toBeInTheDocument(); + expect(getSelectedCellOld()).not.toBeInTheDocument(); // tab into the grid await userEvent.tab(); - validateCellPosition(0, 0); + validateCellPositionOld(0, 0); // shift+tab tabs out of the grid if we are at the first cell await userEvent.tab({ shift: true }); expect(document.body).toHaveFocus(); await userEvent.tab(); - validateCellPosition(0, 0); + validateCellPositionOld(0, 0); await userEvent.keyboard('{arrowdown}{arrowdown}'); - validateCellPosition(0, 2); + validateCellPositionOld(0, 2); // tab should select the last selected cell // click outside the grid await userEvent.click(document.body); await userEvent.tab(); await userEvent.keyboard('{arrowdown}'); - validateCellPosition(0, 3); + validateCellPositionOld(0, 3); // shift+tab should select the last selected cell await userEvent.click(document.body); await userEvent.tab({ shift: true }); await userEvent.keyboard('{arrowup}'); - validateCellPosition(0, 2); + validateCellPositionOld(0, 2); // tab tabs out of the grid if we are at the last cell await userEvent.keyboard('{Control>}{end}'); @@ -168,21 +168,21 @@ test('grid enter/exit', async () => { }); test('navigation with focusable cell renderer', async () => { - setup({ columns, rows: new Array(1), bottomSummaryRows }); + setupOld({ columns, rows: new Array(1), bottomSummaryRows }); await userEvent.tab(); await userEvent.keyboard('{arrowdown}'); - validateCellPosition(0, 1); + validateCellPositionOld(0, 1); // cell should not set tabIndex to 0 if it contains a focusable cell renderer - expect(getSelectedCell()).toHaveAttribute('tabIndex', '-1'); - const checkbox = getSelectedCell()!.querySelector('input'); + expect(getSelectedCellOld()).toHaveAttribute('tabIndex', '-1'); + const checkbox = getSelectedCellOld()!.querySelector('input'); expect(checkbox).toHaveFocus(); expect(checkbox).toHaveAttribute('tabIndex', '0'); await userEvent.tab(); - validateCellPosition(1, 1); + validateCellPositionOld(1, 1); // cell should set tabIndex to 0 if it does not have focusable cell renderer - expect(getSelectedCell()).toHaveAttribute('tabIndex', '0'); + expect(getSelectedCellOld()).toHaveAttribute('tabIndex', '0'); }); test('navigation when header and summary rows have focusable elements', async () => { @@ -209,7 +209,7 @@ test('navigation when header and summary rows have focusable elements', async () } ]; - setup({ columns, rows: new Array(2), bottomSummaryRows }); + setupOld({ columns, rows: new Array(2), bottomSummaryRows }); await userEvent.tab(); // should set focus on the header filter @@ -219,7 +219,7 @@ test('navigation when header and summary rows have focusable elements', async () expect(document.getElementById('header-filter2')).toHaveFocus(); await userEvent.tab(); - validateCellPosition(0, 1); + validateCellPositionOld(0, 1); await userEvent.tab({ shift: true }); expect(document.getElementById('header-filter2')).toHaveFocus(); @@ -230,7 +230,7 @@ test('navigation when header and summary rows have focusable elements', async () await userEvent.tab(); await userEvent.tab(); await userEvent.keyboard('{Control>}{end}{arrowup}{arrowup}'); - validateCellPosition(1, 2); + validateCellPositionOld(1, 2); await userEvent.tab(); expect(document.getElementById('summary-1')).toHaveFocus(); @@ -240,8 +240,8 @@ test('navigation when header and summary rows have focusable elements', async () await userEvent.tab({ shift: true }); await userEvent.tab({ shift: true }); - validateCellPosition(1, 2); - expect(getSelectedCell()).toHaveFocus(); + validateCellPositionOld(1, 2); + expect(getSelectedCellOld()).toHaveFocus(); }); test('navigation when selected cell not in the viewport', async () => { @@ -249,31 +249,31 @@ test('navigation when selected cell not in the viewport', async () => { for (let i = 0; i < 99; i++) { columns.push({ key: `col${i}`, name: `col${i}`, frozen: i < 5 }); } - setup({ columns, rows, bottomSummaryRows }); + setupOld({ columns, rows, bottomSummaryRows }); await userEvent.tab(); - validateCellPosition(0, 0); + validateCellPositionOld(0, 0); await userEvent.keyboard('{Control>}{end}{arrowup}{arrowup}'); - validateCellPosition(99, 100); - expect(getCellsAtRowIndex(100)).not.toHaveLength(1); + validateCellPositionOld(99, 100); + expect(getCellsAtRowIndexOld(100)).not.toHaveLength(1); await scrollGrid({ scrollTop: 0 }); - expect(getCellsAtRowIndex(99)).toHaveLength(1); + expect(getCellsAtRowIndexOld(99)).toHaveLength(1); await userEvent.keyboard('{arrowup}'); - validateCellPosition(99, 99); - expect(getCellsAtRowIndex(99)).not.toHaveLength(1); + validateCellPositionOld(99, 99); + expect(getCellsAtRowIndexOld(99)).not.toHaveLength(1); await scrollGrid({ scrollLeft: 0 }); await userEvent.keyboard('{arrowdown}'); - validateCellPosition(99, 100); + validateCellPositionOld(99, 100); await userEvent.keyboard( '{home}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}' ); - validateCellPosition(7, 100); + validateCellPositionOld(7, 100); await scrollGrid({ scrollLeft: 2000 }); await userEvent.keyboard('{arrowleft}'); - validateCellPosition(6, 100); + validateCellPositionOld(6, 100); }); test('reset selected cell when column is removed', async () => { @@ -291,11 +291,11 @@ test('reset selected cell when column is removed', async () => { await userEvent.tab(); await userEvent.keyboard('{arrowdown}{arrowright}'); - validateCellPosition(1, 1); + validateCellPositionOld(1, 1); rerender(); - expect(getSelectedCell()).not.toBeInTheDocument(); + expect(getSelectedCellOld()).not.toBeInTheDocument(); }); test('reset selected cell when row is removed', async () => { @@ -313,25 +313,25 @@ test('reset selected cell when row is removed', async () => { await userEvent.tab(); await userEvent.keyboard('{arrowdown}{arrowdown}{arrowright}'); - validateCellPosition(1, 2); + validateCellPositionOld(1, 2); rerender(); - expect(getSelectedCell()).not.toBeInTheDocument(); + expect(getSelectedCellOld()).not.toBeInTheDocument(); }); test('should not change the left and right arrow behavior for right to left languages', async () => { - setup({ rows, columns, direction: 'rtl' }); + setupOld({ rows, columns, direction: 'rtl' }); await userEvent.tab(); - validateCellPosition(0, 0); + validateCellPositionOld(0, 0); await userEvent.tab(); - validateCellPosition(1, 0); + validateCellPositionOld(1, 0); await userEvent.keyboard('{arrowright}'); - validateCellPosition(0, 0); + validateCellPositionOld(0, 0); await userEvent.keyboard('{arrowright}'); - validateCellPosition(0, 0); + validateCellPositionOld(0, 0); await userEvent.keyboard('{arrowleft}'); - validateCellPosition(1, 0); + validateCellPositionOld(1, 0); await userEvent.keyboard('{arrowleft}'); - validateCellPosition(2, 0); + validateCellPositionOld(2, 0); }); diff --git a/test/browser/renderers.test.tsx b/test/browser/renderers.test.tsx index 94afced7b8..687cbe3d07 100644 --- a/test/browser/renderers.test.tsx +++ b/test/browser/renderers.test.tsx @@ -16,7 +16,7 @@ import type { RenderSortStatusProps, SortColumn } from '../../src'; -import { getCellsNew, getHeaderCellsNew, getRows, setupNew } from './utils'; +import { getCells, getHeaderCells, getRowsOld, setup } from './utils'; interface Row { id: number; @@ -113,41 +113,41 @@ function setupProvider(props: DataGridProps { - setupNew({ columns, rows: noRows, renderers: { noRowsFallback: } }); + setup({ columns, rows: noRows, renderers: { noRowsFallback: } }); - expect(getRows()).toHaveLength(0); + expect(getRowsOld()).toHaveLength(0); await expect.element(page.getByText('Local no rows fallback')).toBeInTheDocument(); }); test('fallback defined using provider with no rows', async () => { setupProvider({ columns, rows: noRows }); - expect(getRows()).toHaveLength(0); + expect(getRowsOld()).toHaveLength(0); await expect.element(page.getByText('Global no rows fallback')).toBeInTheDocument(); }); test('fallback defined using both provider and renderers with no rows', async () => { setupProvider({ columns, rows: noRows, renderers: { noRowsFallback: } }); - expect(getRows()).toHaveLength(0); + expect(getRowsOld()).toHaveLength(0); await expect.element(page.getByText('Local no rows fallback')).toBeInTheDocument(); }); test('fallback defined using renderers prop with a row', async () => { - setupNew({ + setup({ columns, rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }], renderers: { noRowsFallback: } }); - expect(getRows()).toHaveLength(1); + expect(getRowsOld()).toHaveLength(1); await expect.element(page.getByText('Local no rows fallback')).not.toBeInTheDocument(); }); test('fallback defined using provider with a row', async () => { setupProvider({ columns, rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }] }); - expect(getRows()).toHaveLength(1); + expect(getRowsOld()).toHaveLength(1); await expect.element(page.getByText('Global no rows fallback')).not.toBeInTheDocument(); }); @@ -158,29 +158,29 @@ test('fallback defined using both provider and renderers with a row', async () = renderers: { noRowsFallback: } }); - expect(getRows()).toHaveLength(1); + expect(getRowsOld()).toHaveLength(1); await expect.element(page.getByText('Global no rows fallback')).not.toBeInTheDocument(); await expect.element(page.getByText('Local no rows fallback')).not.toBeInTheDocument(); }); test('checkbox defined using renderers prop', async () => { - setupNew({ columns, rows: noRows, renderers: { renderCheckbox: renderLocalCheckbox } }); + setup({ columns, rows: noRows, renderers: { renderCheckbox: renderLocalCheckbox } }); - expect(getRows()).toHaveLength(0); + expect(getRowsOld()).toHaveLength(0); await expect.element(page.getByText('Local checkbox')).toBeInTheDocument(); }); test('checkbox defined using provider', async () => { setupProvider({ columns, rows: noRows }); - expect(getRows()).toHaveLength(0); + expect(getRowsOld()).toHaveLength(0); await expect.element(page.getByText('Global checkbox')).toBeInTheDocument(); }); test('checkbox defined using both provider and renderers', async () => { setupProvider({ columns, rows: noRows, renderers: { renderCheckbox: renderLocalCheckbox } }); - expect(getRows()).toHaveLength(0); + expect(getRowsOld()).toHaveLength(0); await expect.element(page.getByText('Local checkbox')).toBeInTheDocument(); await expect.element(page.getByText('Global checkbox')).not.toBeInTheDocument(); }); @@ -188,7 +188,7 @@ test('checkbox defined using both provider and renderers', async () => { test('sortPriority defined using both providers', async () => { setupProvider({ columns, rows: noRows }); - const [, headerCell2, headerCell3] = getHeaderCellsNew(); + const [, headerCell2, headerCell3] = getHeaderCells(); await userEvent.click(headerCell2); await userEvent.keyboard('{Control>}'); await userEvent.click(headerCell3); @@ -203,7 +203,7 @@ test('sortPriority defined using both providers', async () => { test('sortPriority defined using both providers and renderers', async () => { setupProvider({ columns, rows: noRows, renderers: { renderSortStatus: renderLocalSortStatus } }); - const [, headerCell2, headerCell3] = getHeaderCellsNew(); + const [, headerCell2, headerCell3] = getHeaderCells(); await userEvent.click(headerCell3); await userEvent.keyboard('{Control>}'); await userEvent.click(headerCell2); @@ -218,7 +218,7 @@ test('sortPriority defined using both providers and renderers', async () => { test('renderCell defined using provider', async () => { setupProvider({ columns, rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }] }); - const [, cell1, cell2] = getCellsNew(); + const [, cell1, cell2] = getCells(); await expect.element(cell1).toHaveTextContent('value 1'); await expect.element(cell1).toHaveClass('global'); await expect.element(cell1).not.toHaveClass('local'); @@ -237,7 +237,7 @@ test('renderCell defined using both providers and renderers', async () => { renderers: { renderCell: renderLocalCell } }); - const [, cell1, cell2] = getCellsNew(); + const [, cell1, cell2] = getCells(); await expect.element(cell1).toHaveTextContent('value 1'); await expect.element(cell1).toHaveClass('local'); await expect.element(cell1).not.toHaveClass('global'); @@ -252,7 +252,7 @@ test('renderCell defined using both providers and renderers', async () => { test('renderRow defined using provider', () => { setupProvider({ columns, rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }] }); - const [row] = getRows(); + const [row] = getRowsOld(); expect(row).toHaveClass('global'); expect(row).not.toHaveClass('local'); }); @@ -264,7 +264,7 @@ test('renderRow defined using both providers and renderers', () => { renderers: { renderRow: renderLocalRow } }); - const [row] = getRows(); + const [row] = getRowsOld(); expect(row).toHaveClass('local'); expect(row).not.toHaveClass('global'); }); diff --git a/test/browser/rowClass.test.ts b/test/browser/rowClass.test.ts index ee409ed996..c1059c82e7 100644 --- a/test/browser/rowClass.test.ts +++ b/test/browser/rowClass.test.ts @@ -1,6 +1,6 @@ import type { Column } from '../../src'; import { rowClassname } from '../../src/style/row'; -import { getRowsNew, setupNew } from './utils'; +import { getRows, setup } from './utils'; interface Row { id: number; @@ -10,36 +10,36 @@ const columns: readonly Column[] = [{ key: 'id', name: 'ID' }]; const rows: readonly Row[] = [{ id: 0 }, { id: 1 }, { id: 2 }]; test('rowClass is undefined', async () => { - setupNew({ + setup({ columns, rows, rowClass: undefined }); - const [row1, row2, row3] = getRowsNew(); + const [row1, row2, row3] = getRows(); await expect.element(row1).toHaveClass(`${rowClassname} rdg-row-even`, { exact: true }); await expect.element(row2).toHaveClass(`${rowClassname} rdg-row-odd`, { exact: true }); await expect.element(row3).toHaveClass(`${rowClassname} rdg-row-even`, { exact: true }); }); test('rowClass returns a string', async () => { - setupNew({ + setup({ columns, rows, rowClass: (row) => `my-row-${row.id}` }); - const [row1, row2, row3] = getRowsNew(); + const [row1, row2, row3] = getRows(); await expect.element(row1).toHaveClass(`${rowClassname} rdg-row-even my-row-0`, { exact: true }); await expect.element(row2).toHaveClass(`${rowClassname} rdg-row-odd my-row-1`, { exact: true }); await expect.element(row3).toHaveClass(`${rowClassname} rdg-row-even my-row-2`, { exact: true }); }); test('rowClass returns undefined', async () => { - setupNew({ + setup({ columns, rows, rowClass: () => undefined }); - const [row1, row2, row3] = getRowsNew(); + const [row1, row2, row3] = getRows(); await expect.element(row1).toHaveClass(`${rowClassname} rdg-row-even`, { exact: true }); await expect.element(row2).toHaveClass(`${rowClassname} rdg-row-odd`, { exact: true }); await expect.element(row3).toHaveClass(`${rowClassname} rdg-row-even`, { exact: true }); diff --git a/test/browser/rowHeight.test.ts b/test/browser/rowHeight.test.ts index e6a8d4430a..277ffe877c 100644 --- a/test/browser/rowHeight.test.ts +++ b/test/browser/rowHeight.test.ts @@ -1,7 +1,7 @@ import { page, userEvent } from '@vitest/browser/context'; import type { Column, DataGridProps } from '../../src'; -import { getRowsNew, setupNew } from './utils'; +import { getRows, setup } from './utils'; type Row = number; @@ -17,7 +17,7 @@ function setupGrid(rowHeight: DataGridProps['rowHeight']) { width: 80 }); } - setupNew({ columns, rows, rowHeight }); + setup({ columns, rows, rowHeight }); } test('rowHeight is number', async () => { @@ -28,7 +28,7 @@ test('rowHeight is number', async () => { 'grid-template-rows': '40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px' }); - expect(getRowsNew()).toHaveLength(30); + expect(getRows()).toHaveLength(30); await userEvent.tab(); expect(grid.scrollTop).toBe(0); @@ -44,7 +44,7 @@ test('rowHeight is function', async () => { 'grid-template-rows': '35px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px' }); - expect(getRowsNew()).toHaveLength(22); + expect(getRows()).toHaveLength(22); await userEvent.tab(); expect(grid.scrollTop).toBe(0); diff --git a/test/browser/rowSelection.test.tsx b/test/browser/rowSelection.test.tsx index 2b9335901d..b0f74e262f 100644 --- a/test/browser/rowSelection.test.tsx +++ b/test/browser/rowSelection.test.tsx @@ -3,7 +3,7 @@ import { page, userEvent } from '@vitest/browser/context'; import DataGrid, { SelectColumn } from '../../src'; import type { Column } from '../../src'; -import { getCellsAtRowIndexNew, getRowsNew } from './utils'; +import { getCellsAtRowIndex, getRows } from './utils'; interface Row { id: number; @@ -50,12 +50,12 @@ function setupNew(initialRows = defaultRows) { function testSelection(rowIdx: number, isSelected: boolean) { return expect - .element(getRowsNew()[rowIdx]) + .element(getRows()[rowIdx]) .toHaveAttribute('aria-selected', isSelected ? 'true' : 'false'); } async function toggleSelection(rowIdx: number, shift = false) { - const element = getCellsAtRowIndexNew(rowIdx)[0].getByRole('checkbox', { name: 'Select' }); + const element = getCellsAtRowIndex(rowIdx)[0].getByRole('checkbox', { name: 'Select' }); if (shift) await userEvent.keyboard('{Shift>}'); await userEvent.click(element, { force: true }); if (shift) await userEvent.keyboard('{/Shift}'); @@ -77,7 +77,7 @@ test('toggle selection when checkbox is clicked', async () => { test('toggle selection using keyboard', async () => { setupNew(); await testSelection(0, false); - await userEvent.click(getCellsAtRowIndexNew(0)[0]); + await userEvent.click(getCellsAtRowIndex(0)[0]); await testSelection(0, true); await userEvent.keyboard(' '); await testSelection(0, false); @@ -255,7 +255,7 @@ test('select/deselect rows using shift click', async () => { test('select rows using shift space', async () => { setupNew(); - await userEvent.click(getCellsAtRowIndexNew(0)[1]); + await userEvent.click(getCellsAtRowIndex(0)[1]); await userEvent.keyboard('{Shift>} {/Shift}'); await testSelection(0, true); await userEvent.keyboard(' '); diff --git a/test/browser/scrollToCell.test.tsx b/test/browser/scrollToCell.test.tsx index 407ef20075..ac39bc35b8 100644 --- a/test/browser/scrollToCell.test.tsx +++ b/test/browser/scrollToCell.test.tsx @@ -54,7 +54,7 @@ async function testScroll(p: PartialPosition) { test('scrollToCell', async () => { page.render(); - const grid = getGrid(); + const grid = getGrid().element(); validateScrollPosition(0, 0); // should scroll to a cell when a valid position is specified diff --git a/test/browser/sorting.test.tsx b/test/browser/sorting.test.tsx index 531b76891d..2c7ae067da 100644 --- a/test/browser/sorting.test.tsx +++ b/test/browser/sorting.test.tsx @@ -3,7 +3,7 @@ import { page, userEvent } from '@vitest/browser/context'; import DataGrid from '../../src'; import type { Column, SortColumn } from '../../src/types'; -import { getHeaderCellsNew } from './utils'; +import { getHeaderCells } from './utils'; const columns: readonly Column[] = [ { key: 'colA', name: 'colA' }, @@ -41,7 +41,7 @@ function testSortColumns(expectedValue: readonly SortColumn[]) { test('should not sort if sortable is false', async () => { setup(); - const headerCell = getHeaderCellsNew()[3].element(); + const headerCell = getHeaderCells()[3].element(); await userEvent.click(headerCell); expect(headerCell).not.toHaveAttribute('aria-sort'); await testSortColumns([]); @@ -49,7 +49,7 @@ test('should not sort if sortable is false', async () => { test('single column sort', async () => { setup(); - const headerCell = getHeaderCellsNew()[0].element(); + const headerCell = getHeaderCells()[0].element(); await userEvent.click(headerCell); expect(headerCell).toHaveAttribute('aria-sort', 'ascending'); // priority is not shown for single sort @@ -65,7 +65,7 @@ test('single column sort', async () => { test('multi column sort', async () => { setup(); - const [headerCell1, headerCell2, headerCell3] = getHeaderCellsNew(); + const [headerCell1, headerCell2, headerCell3] = getHeaderCells(); await userEvent.click(headerCell1); await userEvent.keyboard('{Control>}'); await userEvent.click(headerCell2); @@ -107,7 +107,7 @@ test('multi column sort', async () => { test('multi column sort with metakey', async () => { setup(); - const [headerCell1, headerCell2] = getHeaderCellsNew(); + const [headerCell1, headerCell2] = getHeaderCells(); await userEvent.click(headerCell1); await userEvent.keyboard('{Meta>}'); await userEvent.click(headerCell2); @@ -119,7 +119,7 @@ test('multi column sort with metakey', async () => { test('multi column sort with keyboard', async () => { setup(); - const [headerCell1] = getHeaderCellsNew(); + const [headerCell1] = getHeaderCells(); await userEvent.click(headerCell1); await userEvent.keyboard(' {arrowright}{Control>}{enter}'); await testSortColumns([ diff --git a/test/browser/utils.tsx b/test/browser/utils.tsx index 2f609bc5d5..3b00f7538b 100644 --- a/test/browser/utils.tsx +++ b/test/browser/utils.tsx @@ -5,7 +5,7 @@ import { css } from '@linaria/core'; import DataGrid from '../../src'; import type { DataGridProps } from '../../src'; -export function setup(props: DataGridProps) { +export function setupOld(props: DataGridProps) { render( (props: DataGridPro ); } -export function setupNew(props: DataGridProps) { +export function setup(props: DataGridProps) { page.render( (props: DataGrid ); } -export function getGrid() { +export function getGridOld() { return screen.getByRole('grid'); } -export function getGridNew() { +export function getGrid() { return page.getByRole('grid'); } -export function getTreeGrid() { +export function getTreeGridOld() { return screen.getByRole('treegrid'); } -export function getRows() { +export function getRowsOld() { return screen.getAllByRole('row').slice(1); } -export function getRowsNew() { +export function getRows() { return page.getByRole('row').all().slice(1); } -export function queryRows() { +export function queryRowsOld() { return screen.queryAllByRole('row').slice(1); } -export function getCellsAtRowIndex(rowIdx: number) { +export function getCellsAtRowIndexOld(rowIdx: number) { return Array.from( document.querySelectorAll(`[aria-rowindex="${rowIdx + 2}"] > .rdg-cell`) ); } -export function getCellsAtRowIndexNew(rowIdx: number) { +export function getCellsAtRowIndex(rowIdx: number) { return page.getByRole('row').all()[rowIdx + 1].getByRole('gridcell').all(); } -export function getCells() { +export function getCellsOld() { return screen.getAllByRole('gridcell'); } -export function getCellsNew() { +export function getCells() { return page.getByRole('gridcell').all(); } -export function queryCells() { +export function queryCellsOld() { return screen.queryAllByRole('gridcell'); } -export function getHeaderCells() { +export function getHeaderCellsOld() { return screen.getAllByRole('columnheader'); } -export function getHeaderCellsNew() { +export function getHeaderCells() { return page.getByRole('columnheader').all(); } -export function queryHeaderCells() { +export function queryHeaderCellsOld() { return screen.queryAllByRole('columnheader'); } -export function getSelectedCell() { +export function getSelectedCellOld() { return ( screen.queryByRole('gridcell', { selected: true }) ?? screen.queryByRole('columnheader', { selected: true }) ); } -export function validateCellPosition(columnIdx: number, rowIdx: number) { - const cell = getSelectedCell(); +export function validateCellPositionOld(columnIdx: number, rowIdx: number) { + const cell = getSelectedCellOld(); if (cell === null) { throw new Error('Selected cell not found'); } @@ -103,7 +103,7 @@ export function validateCellPosition(columnIdx: number, rowIdx: number) { expect(cell.parentNode).toHaveAttribute('aria-rowindex', `${rowIdx + 1}`); } -export function getSelectedCellNew() { +export function getSelectedCell() { const selectedGridCell = page.getByRole('gridcell', { selected: true }); if (selectedGridCell.all().length > 0) { return selectedGridCell; @@ -112,31 +112,31 @@ export function getSelectedCellNew() { return page.getByRole('columnheader', { selected: true }); } -export function validateCellPositionNew(columnIdx: number, rowIdx: number) { - const cell = getSelectedCellNew().element(); +export function validateCellPosition(columnIdx: number, rowIdx: number) { + const cell = getSelectedCell().element(); expect(cell).toHaveAttribute('aria-colindex', `${columnIdx + 1}`); expect(cell.parentNode).toHaveAttribute('aria-rowindex', `${rowIdx + 1}`); } -export async function copySelectedCell() { +export async function copySelectedCellOld() { // eslint-disable-next-line testing-library/no-unnecessary-act await act(async () => { await userEvent.keyboard('{Control>}c'); }); } -export function copySelectedCellNew() { +export function copySelectedCell() { return userEvent.keyboard('{Control>}c{/Control}'); } -export async function pasteSelectedCell() { +export async function pasteSelectedCellOld() { // eslint-disable-next-line testing-library/no-unnecessary-act await act(async () => { await userEvent.keyboard('{Control>}v'); }); } -export function pasteSelectedCellNew() { +export function pasteSelectedCell() { return userEvent.keyboard('{Control>}v{/Control}'); } @@ -147,7 +147,7 @@ export async function scrollGrid({ scrollLeft?: number; scrollTop?: number; }) { - const grid = getGrid(); + const grid = getGridOld(); await act(async () => { if (scrollLeft !== undefined) { diff --git a/test/browser/virtualization.test.ts b/test/browser/virtualization.test.ts index cf1c5eb774..449e9daa8e 100644 --- a/test/browser/virtualization.test.ts +++ b/test/browser/virtualization.test.ts @@ -1,14 +1,14 @@ import type { Column } from '../../src'; import { - getCells, - getCellsAtRowIndex, - getHeaderCells, - getRows, - queryCells, - queryHeaderCells, - queryRows, + getCellsAtRowIndexOld, + getCellsOld, + getHeaderCellsOld, + getRowsOld, + queryCellsOld, + queryHeaderCellsOld, + queryRowsOld, scrollGrid, - setup + setupOld } from './utils'; const rowHeight = 35; @@ -35,7 +35,7 @@ function setupGrid( }); } - setup({ + setupOld({ columns, rows, topSummaryRows, @@ -70,27 +70,27 @@ function assertIndexes( } function assertHeaderCells(count: number, startIdx: number, endIdx: number) { - assertElements(getHeaderCells(), 'aria-colindex', count, startIdx + 1, endIdx + 1); + assertElements(getHeaderCellsOld(), 'aria-colindex', count, startIdx + 1, endIdx + 1); } function assertHeaderCellIndexes(indexes: number[]) { - assertIndexes(getHeaderCells(), indexes, 'aria-colindex', 1); + assertIndexes(getHeaderCellsOld(), indexes, 'aria-colindex', 1); } function assertRows(count: number, startIdx: number, endIdx: number) { - assertElements(getRows(), 'aria-rowindex', count, startIdx + 2, endIdx + 2); + assertElements(getRowsOld(), 'aria-rowindex', count, startIdx + 2, endIdx + 2); } function assertRowIndexes(indexes: number[]) { - assertIndexes(getRows(), indexes, 'aria-rowindex', 2); + assertIndexes(getRowsOld(), indexes, 'aria-rowindex', 2); } function assertCells(rowIdx: number, count: number, startIdx: number, endIdx: number) { - assertElements(getCellsAtRowIndex(rowIdx), 'aria-colindex', count, startIdx + 1, endIdx + 1); + assertElements(getCellsAtRowIndexOld(rowIdx), 'aria-colindex', count, startIdx + 1, endIdx + 1); } function assertCellIndexes(rowIdx: number, indexes: number[]) { - assertIndexes(getCellsAtRowIndex(rowIdx), indexes, 'aria-colindex', 1); + assertIndexes(getCellsAtRowIndexOld(rowIdx), indexes, 'aria-colindex', 1); } test('virtualization is enabled', async () => { @@ -204,17 +204,17 @@ test('virtualization is enabled with 2 summary rows', async () => { test('zero columns', () => { setupGrid(true, 0, 100); - expect(queryHeaderCells()).toHaveLength(0); - expect(queryCells()).toHaveLength(0); - expect(getRows()).toHaveLength(34); + expect(queryHeaderCellsOld()).toHaveLength(0); + expect(queryCellsOld()).toHaveLength(0); + expect(getRowsOld()).toHaveLength(34); }); test('zero rows', () => { setupGrid(true, 20, 0); - expect(getHeaderCells()).toHaveLength(18); - expect(queryCells()).toHaveLength(0); - expect(queryRows()).toHaveLength(0); + expect(getHeaderCellsOld()).toHaveLength(18); + expect(queryCellsOld()).toHaveLength(0); + expect(queryRowsOld()).toHaveLength(0); }); test('virtualization is enable with not enough columns or rows to virtualize', () => { @@ -223,7 +223,7 @@ test('virtualization is enable with not enough columns or rows to virtualize', ( assertHeaderCells(5, 0, 4); assertRows(5, 0, 4); - const cells = getCells(); + const cells = getCellsOld(); expect(cells).toHaveLength(5 * 5); }); @@ -233,6 +233,6 @@ test('enableVirtualization is disabled', () => { assertHeaderCells(40, 0, 39); assertRows(100, 0, 99); - const cells = getCells(); + const cells = getCellsOld(); expect(cells).toHaveLength(40 * 100); });