diff --git a/eslint.config.js b/eslint.config.js index 54500d02ad..fca062d537 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -573,10 +573,6 @@ export default defineConfig([ name: 'react-dom', importNames: ['default'], message: 'Use named imports instead.' - }, - { - name: '@testing-library/dom', - message: 'Import @testing-library/react instead.' } ], '@typescript-eslint/no-shadow': 0, @@ -702,7 +698,7 @@ export default defineConfig([ 'testing-library/prefer-explicit-assert': 1, 'testing-library/prefer-find-by': 1, 'testing-library/prefer-implicit-assert': 0, - 'testing-library/prefer-presence-queries': 1, + 'testing-library/prefer-presence-queries': 0, 'testing-library/prefer-query-by-disappearance': 1, 'testing-library/prefer-query-matchers': 0, 'testing-library/prefer-screen-queries': 0, diff --git a/package.json b/package.json index a82dce4e95..333a1efc8b 100644 --- a/package.json +++ b/package.json @@ -62,9 +62,6 @@ "@microsoft/api-extractor": "^7.50.0", "@tanstack/react-router": "^1.114.16", "@tanstack/router-plugin": "^1.114.16", - "@testing-library/dom": "^10.1.0", - "@testing-library/react": "^16.2.0", - "@testing-library/user-event": "^14.5.2", "@types/node": "^22.13.1", "@types/react": "^19.0.8", "@types/react-dom": "^19.0.3", diff --git a/test/browser/TreeDataGrid.test.tsx b/test/browser/TreeDataGrid.test.tsx index c5073b4617..02a2e25b6d 100644 --- a/test/browser/TreeDataGrid.test.tsx +++ b/test/browser/TreeDataGrid.test.tsx @@ -1,6 +1,5 @@ import { useState } from 'react'; -import { render, screen, within } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { page, userEvent } from '@vitest/browser/context'; import type { Column } from '../../src'; import { SelectColumn, textEditor, TreeDataGrid } from '../../src'; @@ -8,13 +7,13 @@ import { focusSinkClassname } from '../../src/style/core'; import { rowSelected } from '../../src/style/row'; import type { PasteEvent } from '../../src/types'; import { - copySelectedCellOld, - getCellsAtRowIndexOld, - getHeaderCellsOld, - getRowsOld, - getSelectedCellOld, - getTreeGridOld, - pasteSelectedCellOld + copySelectedCell, + getCellsAtRowIndex, + getHeaderCells, + getRows, + getSelectedCell, + getTreeGrid, + pasteSelectedCell } from './utils'; const rowSelectedClassname = 'rdg-row-selected'; @@ -132,82 +131,82 @@ function rowGrouper(rows: readonly Row[], columnKey: string) { } function setup(groupBy: string[]) { - render(); + page.render(); } function getHeaderCellsContent() { - return getHeaderCellsOld().map((cell) => cell.textContent); + return getHeaderCells().map((cell) => cell.textContent); } -test('should not group if groupBy is empty', () => { +test('should not group if groupBy is empty', async () => { setup([]); - expect(getTreeGridOld()).toHaveAttribute('aria-rowcount', '7'); + await expect.element(getTreeGrid()).toHaveAttribute('aria-rowcount', '7'); expect(getHeaderCellsContent()).toStrictEqual(['', 'Sport', 'Country', 'Year', 'Id']); - expect(getRowsOld()).toHaveLength(6); + expect(getRows()).toHaveLength(6); }); -test('should not group if column does not exist', () => { +test('should not group if column does not exist', async () => { setup(['abc']); - expect(getTreeGridOld()).toHaveAttribute('aria-rowcount', '7'); - expect(getRowsOld()).toHaveLength(6); + await expect.element(getTreeGrid()).toHaveAttribute('aria-rowcount', '7'); + expect(getRows()).toHaveLength(6); }); -test('should group by single column', () => { +test('should group by single column', async () => { setup(['country']); - expect(getTreeGridOld()).toHaveAttribute('aria-rowcount', '9'); + await expect.element(getTreeGrid()).toHaveAttribute('aria-rowcount', '9'); expect(getHeaderCellsContent()).toStrictEqual(['', 'Country', 'Sport', 'Year', 'Id']); - expect(getRowsOld()).toHaveLength(4); + expect(getRows()).toHaveLength(4); }); -test('should group by multiple columns', () => { +test('should group by multiple columns', async () => { setup(['country', 'year']); - expect(getTreeGridOld()).toHaveAttribute('aria-rowcount', '13'); + await expect.element(getTreeGrid()).toHaveAttribute('aria-rowcount', '13'); expect(getHeaderCellsContent()).toStrictEqual(['', 'Country', 'Year', 'Sport', 'Id']); - expect(getRowsOld()).toHaveLength(4); + expect(getRows()).toHaveLength(4); }); -test('should ignore duplicate groupBy columns', () => { +test('should ignore duplicate groupBy columns', async () => { setup(['year', 'year', 'year']); - expect(getTreeGridOld()).toHaveAttribute('aria-rowcount', '10'); - expect(getRowsOld()).toHaveLength(5); + await expect.element(getTreeGrid()).toHaveAttribute('aria-rowcount', '10'); + expect(getRows()).toHaveLength(5); }); -test('should use groupBy order while grouping', () => { +test('should use groupBy order while grouping', async () => { setup(['year', 'country']); - expect(getTreeGridOld()).toHaveAttribute('aria-rowcount', '14'); + await expect.element(getTreeGrid()).toHaveAttribute('aria-rowcount', '14'); expect(getHeaderCellsContent()).toStrictEqual(['', 'Year', 'Country', 'Sport', 'Id']); - expect(getRowsOld()).toHaveLength(5); + expect(getRows()).toHaveLength(5); }); test('should toggle group when group cell is clicked', async () => { setup(['year']); - expect(getRowsOld()).toHaveLength(5); - const groupCell = screen.getByRole('gridcell', { name: '2021' }); + expect(getRows()).toHaveLength(5); + const groupCell = page.getByRole('gridcell', { name: '2021' }); await userEvent.click(groupCell); - expect(getRowsOld()).toHaveLength(7); + expect(getRows()).toHaveLength(7); await userEvent.click(groupCell); - expect(getRowsOld()).toHaveLength(5); + expect(getRows()).toHaveLength(5); }); test('should toggle group using keyboard', async () => { setup(['year']); - expect(getRowsOld()).toHaveLength(5); - const groupCell = screen.getByRole('gridcell', { name: '2021' }); + expect(getRows()).toHaveLength(5); + const groupCell = page.getByRole('gridcell', { name: '2021' }); await userEvent.click(groupCell); - expect(getRowsOld()).toHaveLength(7); + expect(getRows()).toHaveLength(7); // clicking on the group cell selects the row - expect(getSelectedCellOld()).toBeNull(); - expect(getRowsOld()[2]).toHaveClass(rowSelectedClassname); + await expect.element(getSelectedCell()).not.toBeInTheDocument(); + await expect.element(getRows()[2]).toHaveClass(rowSelectedClassname); await userEvent.keyboard('{arrowright}{arrowright}{enter}'); - expect(getRowsOld()).toHaveLength(5); + expect(getRows()).toHaveLength(5); await userEvent.keyboard('{enter}'); - expect(getRowsOld()).toHaveLength(7); + expect(getRows()).toHaveLength(7); }); test('should set aria-attributes', async () => { setup(['year', 'country']); - const groupCell1 = screen.getByRole('gridcell', { name: '2020' }); + const groupCell1 = page.getByRole('gridcell', { name: '2020' }).element(); const groupRow1 = groupCell1.parentElement!; expect(groupRow1).toHaveAttribute('aria-level', '1'); expect(groupRow1).toHaveAttribute('aria-setsize', '3'); @@ -215,7 +214,7 @@ test('should set aria-attributes', async () => { expect(groupRow1).toHaveAttribute('aria-rowindex', '3'); expect(groupRow1).toHaveAttribute('aria-expanded', 'false'); - const groupCell2 = screen.getByRole('gridcell', { name: '2021' }); + const groupCell2 = page.getByRole('gridcell', { name: '2021' }).element(); const groupRow2 = groupCell2.parentElement!; expect(groupRow2).toHaveAttribute('aria-level', '1'); expect(groupRow2).toHaveAttribute('aria-setsize', '3'); @@ -226,7 +225,7 @@ test('should set aria-attributes', async () => { await userEvent.click(groupCell2); expect(groupRow2).toHaveAttribute('aria-expanded', 'true'); - const groupCell3 = screen.getByRole('gridcell', { name: 'Canada' }); + const groupCell3 = page.getByRole('gridcell', { name: 'Canada' }).element(); const groupRow3 = groupCell3.parentElement!; expect(groupRow3).toHaveAttribute('aria-level', '2'); expect(groupRow3).toHaveAttribute('aria-setsize', '2'); @@ -241,67 +240,67 @@ test('should set aria-attributes', async () => { test('should select rows in a group', async () => { setup(['year', 'country']); - const headerCheckbox = screen.getByRole('checkbox', { name: 'Select All' }); - expect(headerCheckbox).not.toBeChecked(); + const headerCheckbox = page.getByRole('checkbox', { name: 'Select All' }); + await expect.element(headerCheckbox).not.toBeChecked(); // expand group - const groupCell1 = screen.getByRole('gridcell', { name: '2021' }); + const groupCell1 = page.getByRole('gridcell', { name: '2021' }).element(); await userEvent.click(groupCell1); - const groupCell2 = screen.getByRole('gridcell', { name: 'Canada' }); + const groupCell2 = page.getByRole('gridcell', { name: 'Canada' }).element(); await userEvent.click(groupCell2); - expect(screen.queryAllByRole('row', { selected: true })).toHaveLength(0); + expect(page.getByRole('row', { selected: true }).all()).toHaveLength(0); // select parent row await userEvent.click( - within(groupCell1.parentElement!).getByRole('checkbox', { name: 'Select Group' }) + page.elementLocator(groupCell1.parentElement!).getByRole('checkbox', { name: 'Select Group' }) ); - let selectedRows = screen.getAllByRole('row', { selected: true }); + let selectedRows = page.getByRole('row', { selected: true }).all(); expect(selectedRows).toHaveLength(4); - expect(selectedRows[0]).toHaveAttribute('aria-rowindex', '6'); - expect(selectedRows[1]).toHaveAttribute('aria-rowindex', '7'); - expect(selectedRows[2]).toHaveAttribute('aria-rowindex', '9'); - expect(selectedRows[3]).toHaveAttribute('aria-rowindex', '10'); + await expect.element(selectedRows[0]).toHaveAttribute('aria-rowindex', '6'); + await expect.element(selectedRows[1]).toHaveAttribute('aria-rowindex', '7'); + await expect.element(selectedRows[2]).toHaveAttribute('aria-rowindex', '9'); + await expect.element(selectedRows[3]).toHaveAttribute('aria-rowindex', '10'); // unselecting child should unselect the parent row - await userEvent.click(within(selectedRows[3]).getByRole('checkbox', { name: 'Select' })); - selectedRows = screen.getAllByRole('row', { selected: true }); + await userEvent.click(selectedRows[3].getByRole('checkbox', { name: 'Select' })); + selectedRows = page.getByRole('row', { selected: true }).all(); expect(selectedRows).toHaveLength(1); - expect(selectedRows[0]).toHaveAttribute('aria-rowindex', '7'); + await expect.element(selectedRows[0]).toHaveAttribute('aria-rowindex', '7'); // select child group - const checkbox = within(groupCell2.parentElement!).getByRole('checkbox', { + const checkbox = page.elementLocator(groupCell2.parentElement!).getByRole('checkbox', { name: 'Select Group' }); await userEvent.click(checkbox); - selectedRows = screen.getAllByRole('row', { selected: true }); + selectedRows = page.getByRole('row', { selected: true }).all(); expect(selectedRows).toHaveLength(4); // unselect child group await userEvent.click(checkbox); - selectedRows = screen.getAllByRole('row', { selected: true }); + selectedRows = page.getByRole('row', { selected: true }).all(); expect(selectedRows).toHaveLength(1); - await userEvent.click(screen.getByRole('gridcell', { name: '2020' })); - await userEvent.click(screen.getByRole('gridcell', { name: '2022' })); + await userEvent.click(page.getByRole('gridcell', { name: '2020' })); + await userEvent.click(page.getByRole('gridcell', { name: '2022' })); await userEvent.click(headerCheckbox); - expect(screen.queryByRole('row', { selected: true })).not.toBeInTheDocument(); + await expect.element(page.getByRole('row', { selected: true })).not.toBeInTheDocument(); await userEvent.click(headerCheckbox); - expect(screen.getAllByRole('row', { selected: true })).toHaveLength(8); + expect(page.getByRole('row', { selected: true }).all()).toHaveLength(8); await userEvent.click(headerCheckbox); - expect(screen.queryByRole('row', { selected: true })).not.toBeInTheDocument(); + await expect.element(page.getByRole('row', { selected: true })).not.toBeInTheDocument(); }); test('cell navigation in a treegrid', async () => { setup(['country', 'year']); - expect(getRowsOld()).toHaveLength(4); + expect(getRows()).toHaveLength(4); const focusSink = document.querySelector(`.${focusSinkClassname}`); // expand group - const groupCell1 = screen.getByRole('gridcell', { name: 'USA' }); + const groupCell1 = page.getByRole('gridcell', { name: 'USA' }); expect(document.body).toHaveFocus(); expect(focusSink).toHaveAttribute('tabIndex', '-1'); await userEvent.click(groupCell1); @@ -324,84 +323,84 @@ test('cell navigation in a treegrid', async () => { expect(focusSink).toHaveFocus(); expect(focusSink).toHaveStyle('grid-row-start:2'); expect(focusSink).toHaveClass(rowSelected); - const groupCell2 = screen.getByRole('gridcell', { name: '2021' }); + const groupCell2 = page.getByRole('gridcell', { name: '2021' }); await userEvent.click(groupCell2); expect(focusSink).toHaveFocus(); expect(focusSink).toHaveAttribute('tabIndex', '0'); // select cell - await userEvent.click(getCellsAtRowIndexOld(5)[1]); - expect(getCellsAtRowIndexOld(5)[1]).toHaveAttribute('aria-selected', 'true'); + await userEvent.click(getCellsAtRowIndex(5)[1]); + expect(getCellsAtRowIndex(5)[1]).toHaveAttribute('aria-selected', 'true'); expect(focusSink).toHaveAttribute('tabIndex', '-1'); // select the previous cell await userEvent.keyboard('{arrowleft}'); - expect(getCellsAtRowIndexOld(5)[1]).toHaveAttribute('aria-selected', 'false'); - expect(getCellsAtRowIndexOld(5)[0]).toHaveAttribute('aria-selected', 'true'); + expect(getCellsAtRowIndex(5)[1]).toHaveAttribute('aria-selected', 'false'); + expect(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'true'); // if the first cell is selected then arrowleft should select the row await userEvent.keyboard('{arrowleft}'); - expect(getCellsAtRowIndexOld(5)[0]).toHaveAttribute('aria-selected', 'false'); - expect(getRowsOld()[4]).toHaveClass(rowSelectedClassname); + expect(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'false'); + await expect.element(getRows()[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(getCellsAtRowIndexOld(5)[0]).toHaveAttribute('aria-selected', 'true'); + expect(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'true'); await userEvent.keyboard('{arrowleft}{arrowup}'); - expect(getRowsOld()).toHaveLength(7); + expect(getRows()).toHaveLength(7); // left arrow should collapse the group await userEvent.keyboard('{arrowleft}'); - expect(getRowsOld()).toHaveLength(6); + expect(getRows()).toHaveLength(6); // right arrow should expand the group await userEvent.keyboard('{arrowright}'); - expect(getRowsOld()).toHaveLength(7); + expect(getRows()).toHaveLength(7); // left arrow on a collapsed group should select the parent group - expect(getRowsOld()[1]).not.toHaveClass(rowSelectedClassname); + await expect.element(getRows()[1]).not.toHaveClass(rowSelectedClassname); await userEvent.keyboard('{arrowleft}{arrowleft}'); - expect(getRowsOld()[1]).toHaveClass(rowSelectedClassname); + await expect.element(getRows()[1]).toHaveClass(rowSelectedClassname); await userEvent.keyboard('{end}'); - expect(getRowsOld()[5]).toHaveClass(rowSelectedClassname); + await expect.element(getRows()[5]).toHaveClass(rowSelectedClassname); await userEvent.keyboard('{home}'); - expect(screen.getAllByRole('row')[0]).toHaveClass(rowSelectedClassname); + await expect.element(page.getByRole('row').all()[0]).toHaveClass(rowSelectedClassname); // collpase parent group await userEvent.keyboard('{arrowdown}{arrowdown}{arrowleft}'); - expect(screen.queryByRole('gridcell', { name: '2021' })).not.toBeInTheDocument(); - expect(getRowsOld()).toHaveLength(4); + await expect.element(page.getByRole('gridcell', { name: '2021' })).not.toBeInTheDocument(); + expect(getRows()).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 copySelectedCellOld(); - expect(getSelectedCellOld()).toHaveClass('rdg-cell-copied'); + await userEvent.click(page.getByRole('gridcell', { name: '2021' })); + await userEvent.click(page.getByRole('gridcell', { name: 'USA' })); + await copySelectedCell(); + await expect.element(getSelectedCell()).toHaveClass('rdg-cell-copied'); await userEvent.keyboard('{arrowdown}'); - expect(getSelectedCellOld()).toHaveTextContent('Canada'); - await pasteSelectedCellOld(); - expect(getSelectedCellOld()).toHaveTextContent('USA'); + await expect.element(getSelectedCell()).toHaveTextContent('Canada'); + await pasteSelectedCell(); + await expect.element(getSelectedCell()).toHaveTextContent('USA'); }); test('update row using cell renderer', async () => { setup(['year']); - await userEvent.click(screen.getByRole('gridcell', { name: '2021' })); - await userEvent.click(screen.getByRole('gridcell', { name: 'USA' })); + await userEvent.click(page.getByRole('gridcell', { name: '2021' })); + await userEvent.click(page.getByRole('gridcell', { name: 'USA' })); await userEvent.keyboard('{arrowright}{arrowright}'); - expect(getSelectedCellOld()).toHaveTextContent('value: 2'); - await userEvent.click(screen.getByRole('button', { name: 'value: 2' })); - expect(getSelectedCellOld()).toHaveTextContent('value: 12'); + await expect.element(getSelectedCell()).toHaveTextContent('value: 2'); + await userEvent.click(page.getByRole('button', { name: 'value: 2' })); + await expect.element(getSelectedCell()).toHaveTextContent('value: 12'); }); test('custom renderGroupCell', () => { setup(['country']); - expect(getCellsAtRowIndexOld(1)[4]).toHaveTextContent('1'); - expect(getCellsAtRowIndexOld(4)[4]).toHaveTextContent('3'); + expect(getCellsAtRowIndex(1)[4]).toHaveTextContent('1'); + expect(getCellsAtRowIndex(4)[4]).toHaveTextContent('3'); }); diff --git a/test/browser/column/cellClass.test.ts b/test/browser/column/cellClass.test.ts index 48883b7efb..8d6f4c7afe 100644 --- a/test/browser/column/cellClass.test.ts +++ b/test/browser/column/cellClass.test.ts @@ -8,7 +8,7 @@ interface Row { const rows: readonly Row[] = [{ id: 0 }, { id: 1 }]; -test('cellClass is undefined', async () => { +test('cellClass is undefined', () => { const columns: readonly Column[] = [ { key: 'id', @@ -17,11 +17,11 @@ test('cellClass is undefined', async () => { ]; setup({ columns, rows }); const [cell1, cell2] = getCells(); - await expect.element(cell1).toHaveClass(cellClassname, { exact: true }); - await expect.element(cell2).toHaveClass(cellClassname, { exact: true }); + expect(cell1).toHaveClass(cellClassname, { exact: true }); + expect(cell2).toHaveClass(cellClassname, { exact: true }); }); -test('cellClass is a string', async () => { +test('cellClass is a string', () => { const columns: readonly Column[] = [ { key: 'id', @@ -31,11 +31,11 @@ test('cellClass is a string', async () => { ]; 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 }); + expect(cell1).toHaveClass(`${cellClassname} my-cell`, { exact: true }); + expect(cell2).toHaveClass(`${cellClassname} my-cell`, { exact: true }); }); -test('cellClass returns a string', async () => { +test('cellClass returns a string', () => { const columns: readonly Column[] = [ { key: 'id', @@ -45,11 +45,11 @@ test('cellClass returns a string', async () => { ]; 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 }); + expect(cell1).toHaveClass(`${cellClassname} my-cell-0`, { exact: true }); + expect(cell2).toHaveClass(`${cellClassname} my-cell-1`, { exact: true }); }); -test('cellClass returns undefined', async () => { +test('cellClass returns undefined', () => { const columns: readonly Column[] = [ { key: 'id', @@ -59,6 +59,6 @@ test('cellClass returns undefined', async () => { ]; setup({ columns, rows }); const [cell1, cell2] = getCells(); - await expect.element(cell1).toHaveClass(cellClassname, { exact: true }); - await expect.element(cell2).toHaveClass(cellClassname, { exact: true }); + expect(cell1).toHaveClass(cellClassname, { exact: true }); + expect(cell2).toHaveClass(cellClassname, { exact: true }); }); diff --git a/test/browser/column/colSpan.test.ts b/test/browser/column/colSpan.test.ts index 621a21807f..4f63cec112 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 { getCellsAtRowIndexOld, getHeaderCells, setup, validateCellPositionOld } from '../utils'; +import { getCellsAtRowIndex, getHeaderCells, setup, validateCellPosition } from '../utils'; describe('colSpan', () => { function setupColSpanGrid(colCount = 15) { @@ -43,7 +43,7 @@ describe('colSpan', () => { expect(getHeaderCells()).toHaveLength(13); // top summary rows - const topSummarryRow1 = getCellsAtRowIndexOld(0); + const topSummarryRow1 = getCellsAtRowIndex(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(getCellsAtRowIndexOld(1)).toHaveLength(15); + expect(getCellsAtRowIndex(1)).toHaveLength(15); // rows - const row1 = getCellsAtRowIndexOld(3); + const row1 = getCellsAtRowIndex(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 = getCellsAtRowIndexOld(4); + const row2 = getCellsAtRowIndex(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(getCellsAtRowIndexOld(6)).toHaveLength(14); // colSpan 6 won't work as there are 5 frozen columns - expect(getCellsAtRowIndexOld(7)).toHaveLength(10); + expect(getCellsAtRowIndex(6)).toHaveLength(14); // colSpan 6 won't work as there are 5 frozen columns + expect(getCellsAtRowIndex(7)).toHaveLength(10); // bottom summary row - expect(getCellsAtRowIndexOld(12)).toHaveLength(14); - expect(getCellsAtRowIndexOld(13)).toHaveLength(15); + expect(getCellsAtRowIndex(12)).toHaveLength(14); + expect(getCellsAtRowIndex(13)).toHaveLength(15); }); it('should navigate between merged cells', async () => { setupColSpanGrid(); // header row await userEvent.click(getHeaderCells()[7]); - validateCellPositionOld(7, 0); + validateCellPosition(7, 0); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(8, 0); + validateCellPosition(8, 0); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(11, 0); + validateCellPosition(11, 0); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(12, 0); + validateCellPosition(12, 0); await userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}'); - validateCellPositionOld(7, 0); + validateCellPosition(7, 0); // top summary rows - await userEvent.click(getCellsAtRowIndexOld(0)[6]); - validateCellPositionOld(6, 1); + await userEvent.click(getCellsAtRowIndex(0)[6]); + validateCellPosition(6, 1); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(7, 1); + validateCellPosition(7, 1); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(9, 1); + validateCellPosition(9, 1); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(10, 1); + validateCellPosition(10, 1); await userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}'); - validateCellPositionOld(6, 1); + validateCellPosition(6, 1); // viewport rows - await userEvent.click(getCellsAtRowIndexOld(3)[1]); - validateCellPositionOld(1, 4); + await userEvent.click(getCellsAtRowIndex(3)[1]); + validateCellPosition(1, 4); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(2, 4); + validateCellPosition(2, 4); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(3, 4); + validateCellPosition(3, 4); await userEvent.keyboard('{arrowdown}'); - validateCellPositionOld(2, 5); + validateCellPosition(2, 5); await userEvent.keyboard('{arrowleft}'); - validateCellPositionOld(1, 5); + validateCellPosition(1, 5); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(2, 5); + validateCellPosition(2, 5); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(5, 5); + validateCellPosition(5, 5); await userEvent.keyboard('{arrowleft}'); - validateCellPositionOld(2, 5); + validateCellPosition(2, 5); await userEvent.keyboard('{arrowdown}'); - validateCellPositionOld(2, 6); + validateCellPosition(2, 6); await userEvent.keyboard('{arrowdown}{arrowdown}'); - validateCellPositionOld(0, 8); + validateCellPosition(0, 8); await userEvent.keyboard('{arrowLeft}'); - validateCellPositionOld(0, 8); + validateCellPosition(0, 8); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(5, 8); + validateCellPosition(5, 8); await userEvent.tab({ shift: true }); await userEvent.tab({ shift: true }); - validateCellPositionOld(14, 7); + validateCellPosition(14, 7); await userEvent.tab(); - validateCellPositionOld(0, 8); - await userEvent.click(getCellsAtRowIndexOld(10)[11]); - validateCellPositionOld(11, 11); + validateCellPosition(0, 8); + await userEvent.click(getCellsAtRowIndex(10)[11]); + validateCellPosition(11, 11); await userEvent.tab(); - validateCellPositionOld(12, 11); + validateCellPosition(12, 11); await userEvent.tab(); - validateCellPositionOld(0, 12); + validateCellPosition(0, 12); await userEvent.tab({ shift: true }); - validateCellPositionOld(12, 11); + validateCellPosition(12, 11); // bottom summary rows - await userEvent.click(getCellsAtRowIndexOld(12)[6]); - validateCellPositionOld(6, 13); + await userEvent.click(getCellsAtRowIndex(12)[6]); + validateCellPosition(6, 13); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(7, 13); + validateCellPosition(7, 13); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(9, 13); + validateCellPosition(9, 13); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(10, 13); + validateCellPosition(10, 13); await userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}'); - validateCellPositionOld(6, 13); + validateCellPosition(6, 13); }); it('should scroll to the merged cell when selected', async () => { setupColSpanGrid(30); - await userEvent.click(getCellsAtRowIndexOld(10)[23]); // last visible cell (1920/80) + await userEvent.click(getCellsAtRowIndex(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 - validateCellPositionOld(27, 11); + validateCellPosition(27, 11); await navigate(7); testScrollIntoView(); - validateCellPositionOld(6, 12); // should navigate to the next row + validateCellPosition(6, 12); // should navigate to the next row await navigate(7, true); testScrollIntoView(); - validateCellPositionOld(27, 11); // should navigate to the previous row + validateCellPosition(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 6bb9c2642d..14efe0bf41 100644 --- a/test/browser/column/draggable.test.ts +++ b/test/browser/column/draggable.test.ts @@ -30,10 +30,10 @@ test('draggable columns', async () => { setup({ columns, rows: [], onColumnsReorder }); const [cell1, cell2, cell3, cell4] = getHeaderCells(); - await expect.element(cell1).not.toHaveAttribute('draggable'); - await expect.element(cell2).toHaveAttribute('draggable'); - await expect.element(cell3).toHaveAttribute('draggable'); - await expect.element(cell4).toHaveAttribute('draggable'); + expect(cell1).not.toHaveAttribute('draggable'); + expect(cell2).toHaveAttribute('draggable'); + expect(cell3).toHaveAttribute('draggable'); + expect(cell4).toHaveAttribute('draggable'); expect(onColumnsReorder).not.toHaveBeenCalled(); diff --git a/test/browser/column/frozen.test.ts b/test/browser/column/frozen.test.ts index aae32d241c..9075f446ce 100644 --- a/test/browser/column/frozen.test.ts +++ b/test/browser/column/frozen.test.ts @@ -2,7 +2,7 @@ import type { Column } from '../../../src'; import { cellClassname, cellFrozenClassname } from '../../../src/style/cell'; import { getHeaderCells, setup } from '../utils'; -test('frozen column have a specific class, and are stable-sorted before non-frozen columns', async () => { +test('frozen column have a specific class, and are stable-sorted before non-frozen columns', () => { const columns: readonly Column[] = [ { key: 'col1', @@ -28,17 +28,13 @@ test('frozen column have a specific class, and are stable-sorted before non-froz setup({ columns, rows: [] }); const [cell1, cell2, cell3, cell4] = getHeaderCells(); - await expect - .element(cell1) - .toHaveClass(`${cellClassname} ${cellFrozenClassname}`, { exact: true }); - await expect - .element(cell2) - .toHaveClass(`${cellClassname} ${cellFrozenClassname}`, { exact: true }); - await expect.element(cell3).toHaveClass(cellClassname, { exact: true }); - await expect.element(cell4).toHaveClass(cellClassname, { exact: true }); + expect(cell1).toHaveClass(`${cellClassname} ${cellFrozenClassname}`, { exact: true }); + expect(cell2).toHaveClass(`${cellClassname} ${cellFrozenClassname}`, { exact: true }); + expect(cell3).toHaveClass(cellClassname, { exact: true }); + expect(cell4).toHaveClass(cellClassname, { exact: true }); - await expect.element(cell1).toHaveTextContent('col1'); - await expect.element(cell2).toHaveTextContent('col3'); - await expect.element(cell3).toHaveTextContent('col2'); - await expect.element(cell4).toHaveTextContent('col4'); + expect(cell1).toHaveTextContent('col1'); + expect(cell2).toHaveTextContent('col3'); + expect(cell3).toHaveTextContent('col2'); + expect(cell4).toHaveTextContent('col4'); }); diff --git a/test/browser/column/headerCellClass.test.ts b/test/browser/column/headerCellClass.test.ts index 4d716e6d3d..8b292c626f 100644 --- a/test/browser/column/headerCellClass.test.ts +++ b/test/browser/column/headerCellClass.test.ts @@ -2,7 +2,7 @@ import type { Column, ColumnGroup } from '../../../src'; import { cellClassname } from '../../../src/style/cell'; import { getHeaderCells, setup } from '../utils'; -test('headerCellClass is either nullish or a string', async () => { +test('headerCellClass is either nullish or a string', () => { const columns: readonly Column[] = [ { key: 'id', @@ -17,11 +17,11 @@ test('headerCellClass is either nullish or a string', async () => { 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 }); + expect(cell1).toHaveClass(cellClassname, { exact: true }); + expect(cell2).toHaveClass(`${cellClassname} my-header`, { exact: true }); }); -test('columnGroup.headerCellClass is either nullish or a string', async () => { +test('columnGroup.headerCellClass is either nullish or a string', () => { const columns: readonly ColumnGroup[] = [ { name: 'Group 1', @@ -36,6 +36,6 @@ test('columnGroup.headerCellClass is either nullish or a string', async () => { 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 }); + expect(cell1).toHaveClass(cellClassname, { exact: true }); + expect(cell2).toHaveClass(`${cellClassname} my-header`, { exact: true }); }); diff --git a/test/browser/column/name.test.tsx b/test/browser/column/name.test.tsx index a275586f3d..b968471270 100644 --- a/test/browser/column/name.test.tsx +++ b/test/browser/column/name.test.tsx @@ -1,7 +1,7 @@ import type { Column } from '../../../src'; import { getHeaderCells, setup } from '../utils'; -test('name is either a string or an element', async () => { +test('name is either a string or an element', () => { function Header() { return 'Fancy'; } @@ -19,6 +19,6 @@ test('name is either a string or an element', async () => { setup({ columns, rows: [] }); const [cell1, cell2] = getHeaderCells(); - await expect.element(cell1).toHaveTextContent('ID'); - await expect.element(cell2).toHaveTextContent('Fancy'); + expect(cell1).toHaveTextContent('ID'); + expect(cell2).toHaveTextContent('Fancy'); }); diff --git a/test/browser/column/renderCell.test.tsx b/test/browser/column/renderCell.test.tsx index 19d955c1a8..98a6a3a31e 100644 --- a/test/browser/column/renderCell.test.tsx +++ b/test/browser/column/renderCell.test.tsx @@ -4,7 +4,7 @@ import { page, userEvent } from '@vitest/browser/context'; import { DataGrid } from '../../../src'; import type { Column } from '../../../src'; import defaultRenderHeaderCell from '../../../src/renderHeaderCell'; -import { getCells, getCellsAtRowIndexOld, setup } from '../utils'; +import { getCells, getCellsAtRowIndex, setup } from '../utils'; interface Row { id: number; @@ -18,18 +18,18 @@ describe('renderValue', () => { const rows: readonly Row[] = [{ id: 101 }]; - it('should be used by default', async () => { + it('should be used by default', () => { setup({ columns, rows }); const [cell1, cell2] = getCells(); - await expect.element(cell1).toHaveTextContent('101'); - await expect.element(cell2).toBeEmptyDOMElement(); + expect(cell1).toHaveTextContent('101'); + expect(cell2).toBeEmptyDOMElement(); }); - it('should handle non-object values', async () => { + it('should handle non-object values', () => { setup({ columns, rows: [null] }); const [cell1, cell2] = getCells(); - await expect.element(cell1).toBeEmptyDOMElement(); - await expect.element(cell2).toBeEmptyDOMElement(); + expect(cell1).toBeEmptyDOMElement(); + expect(cell2).toBeEmptyDOMElement(); }); }); @@ -49,11 +49,11 @@ describe('Custom cell renderer', () => { const rows: readonly Row[] = [{ id: 101 }]; - it('should replace the default cell renderer', async () => { + it('should replace the default cell renderer', () => { setup({ columns, rows }); const [cell1, cell2] = getCells(); - await expect.element(cell1).toHaveTextContent('#101'); - await expect.element(cell2).toHaveTextContent('No name'); + expect(cell1).toHaveTextContent('#101'); + expect(cell2).toHaveTextContent('No name'); }); it('can update rows', async () => { @@ -93,9 +93,9 @@ describe('Custom cell renderer', () => { page.render(); const [cell] = getCells(); - await expect.element(cell).toHaveTextContent('value: 1'); + expect(cell).toHaveTextContent('value: 1'); await userEvent.click(page.getByRole('button')); - await expect.element(cell).toHaveTextContent('value: 2'); + expect(cell).toHaveTextContent('value: 2'); expect(onChange).toHaveBeenCalledExactlyOnceWith([{ id: 2 }], { column: { ...column, @@ -143,12 +143,12 @@ test('Cell should not steal focus when the focus is outside the grid and cell is page.render(); - await userEvent.click(getCellsAtRowIndexOld(0)[0]); - expect(getCellsAtRowIndexOld(0)[0]).toHaveFocus(); + await userEvent.click(getCellsAtRowIndex(0)[0]); + expect(getCellsAtRowIndex(0)[0]).toHaveFocus(); - const button = page.getByRole('button', { name: 'Test' }); - await expect.element(button).not.toHaveFocus(); + const button = page.getByRole('button', { name: 'Test' }).element(); + expect(button).not.toHaveFocus(); await userEvent.click(button); - expect(getCellsAtRowIndexOld(0)[0]).not.toHaveFocus(); - await expect.element(button).toHaveFocus(); + expect(getCellsAtRowIndex(0)[0]).not.toHaveFocus(); + expect(button).toHaveFocus(); }); diff --git a/test/browser/column/renderEditCell.test.tsx b/test/browser/column/renderEditCell.test.tsx index bdc23d317b..b2abf82685 100644 --- a/test/browser/column/renderEditCell.test.tsx +++ b/test/browser/column/renderEditCell.test.tsx @@ -1,11 +1,10 @@ import { useMemo, useState } from 'react'; import { createPortal } from 'react-dom'; -import { waitFor } from '@testing-library/react'; import { page, userEvent } from '@vitest/browser/context'; import { DataGrid } from '../../../src'; import type { Column, DataGridProps } from '../../../src'; -import { getCellsAtRowIndexOld, getGridOld, getSelectedCellOld, scrollGrid } from '../utils'; +import { getCellsAtRowIndex, getGrid, getSelectedCell, scrollGrid } from '../utils'; interface Row { col1: number; @@ -16,62 +15,62 @@ describe('Editor', () => { it('should open editor on double click', async () => { page.render(); const editor = page.getByRole('spinbutton', { name: 'col1-editor' }); - await userEvent.click(getCellsAtRowIndexOld(0)[0]); + await userEvent.click(getCellsAtRowIndex(0)[0]); await expect.element(editor).not.toBeInTheDocument(); - await userEvent.dblClick(getCellsAtRowIndexOld(0)[0]); + await userEvent.dblClick(getCellsAtRowIndex(0)[0]); await expect.element(editor).toHaveValue(1); await userEvent.keyboard('2'); await userEvent.tab(); await expect.element(editor).not.toBeInTheDocument(); - expect(getCellsAtRowIndexOld(0)[0]).toHaveTextContent(/^12$/); + expect(getCellsAtRowIndex(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(getCellsAtRowIndexOld(0)[0]); + await userEvent.click(getCellsAtRowIndex(0)[0]); await expect.element(editor).not.toBeInTheDocument(); await userEvent.keyboard('{enter}'); await expect.element(editor).toHaveValue(1); await userEvent.keyboard('3{enter}'); - expect(getCellsAtRowIndexOld(0)[0]).toHaveTextContent(/^13$/); - expect(getCellsAtRowIndexOld(0)[0]).toHaveFocus(); + expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^13$/); + expect(getCellsAtRowIndex(0)[0]).toHaveFocus(); await expect.element(editor).not.toBeInTheDocument(); }); it('should open editor when user types', async () => { page.render(); - await userEvent.click(getCellsAtRowIndexOld(0)[0]); + await userEvent.click(getCellsAtRowIndex(0)[0]); await userEvent.keyboard('123{enter}'); - expect(getCellsAtRowIndexOld(0)[0]).toHaveTextContent(/^1123$/); + expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^1123$/); }); it('should close editor and discard changes on escape', async () => { page.render(); - await userEvent.dblClick(getCellsAtRowIndexOld(0)[0]); + await userEvent.dblClick(getCellsAtRowIndex(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(getCellsAtRowIndexOld(0)[0]).toHaveTextContent(/^1$/); - expect(getCellsAtRowIndexOld(0)[0]).toHaveFocus(); + expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^1$/); + expect(getCellsAtRowIndex(0)[0]).toHaveFocus(); }); it('should commit changes and close editor when clicked outside', async () => { page.render(); - await userEvent.dblClick(getCellsAtRowIndexOld(0)[0]); + await userEvent.dblClick(getCellsAtRowIndex(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(getCellsAtRowIndexOld(0)[0]).toHaveTextContent(/^12222$/); + expect(getCellsAtRowIndex(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(getCellsAtRowIndexOld(0)[0]); + await userEvent.dblClick(getCellsAtRowIndex(0)[0]); await userEvent.keyboard('234'); expect(onSave).not.toHaveBeenCalled(); const saveButton = page.getByRole('button', { name: 'save' }); @@ -93,25 +92,23 @@ describe('Editor', () => { } page.render(); - await userEvent.click(getCellsAtRowIndexOld(0)[0]); - expect(getCellsAtRowIndexOld(0)).toHaveLength(2); + await userEvent.click(getCellsAtRowIndex(0)[0]); + expect(getCellsAtRowIndex(0)).toHaveLength(2); await scrollGrid({ scrollTop: 2000 }); - expect(getCellsAtRowIndexOld(0)).toHaveLength(1); + expect(getCellsAtRowIndex(0)).toHaveLength(1); const editor = page.getByRole('spinbutton', { name: 'col1-editor' }); await expect.element(editor).not.toBeInTheDocument(); - expect(getGridOld().scrollTop).toBe(2000); + expect(getGrid().element().scrollTop).toBe(2000); await userEvent.keyboard('123'); - await waitFor(() => { - expect(getCellsAtRowIndexOld(0)).toHaveLength(2); - }); + expect(getCellsAtRowIndex(0)).toHaveLength(2); await expect.element(editor).toHaveValue(123); - expect(getGridOld().scrollTop).toBe(0); + expect(getGrid().element().scrollTop).toBe(0); }); describe('editable', () => { it('should be editable if an editor is specified and editable is undefined/null', async () => { page.render(); - const cell = getCellsAtRowIndexOld(0)[1]; + const cell = getCellsAtRowIndex(0)[1]; expect(cell).not.toHaveAttribute('aria-readonly'); await userEvent.dblClick(cell); await expect.element(page.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument(); @@ -119,13 +116,13 @@ describe('Editor', () => { it('should be editable if an editor is specified and editable is set to true', async () => { page.render(); - await userEvent.dblClick(getCellsAtRowIndexOld(0)[1]); + await userEvent.dblClick(getCellsAtRowIndex(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 = getCellsAtRowIndexOld(0)[1]; + const cell = getCellsAtRowIndex(0)[1]; expect(cell).toHaveAttribute('aria-readonly', 'true'); await userEvent.dblClick(cell); @@ -136,11 +133,11 @@ describe('Editor', () => { it('should not be editable if editable function returns false', async () => { page.render( row.col1 === 2} />); - await userEvent.dblClick(getCellsAtRowIndexOld(0)[1]); + await userEvent.dblClick(getCellsAtRowIndex(0)[1]); const editor = page.getByRole('textbox', { name: 'col2-editor' }); await expect.element(editor).not.toBeInTheDocument(); - await userEvent.dblClick(getCellsAtRowIndexOld(1)[1]); + await userEvent.dblClick(getCellsAtRowIndex(1)[1]); await expect.element(editor).toBeInTheDocument(); }); }); @@ -148,24 +145,24 @@ describe('Editor', () => { describe('editorOptions', () => { it('should detect outside click if editor is rendered in a portal', async () => { page.render(); - await userEvent.dblClick(getCellsAtRowIndexOld(0)[1]); + await userEvent.dblClick(getCellsAtRowIndex(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(getCellsAtRowIndexOld(0)[1]).toHaveTextContent(/^a123$/); + expect(getCellsAtRowIndex(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(getCellsAtRowIndexOld(0)[1]).not.toHaveFocus(); + expect(getCellsAtRowIndex(0)[1]).not.toHaveFocus(); - await userEvent.dblClick(getCellsAtRowIndexOld(0)[1]); + await userEvent.dblClick(getCellsAtRowIndex(0)[1]); await userEvent.click(page.getByRole('textbox', { name: 'col2-editor' })); await userEvent.keyboard('{enter}'); - expect(getCellsAtRowIndexOld(0)[1]).toHaveFocus(); + expect(getCellsAtRowIndex(0)[1]).toHaveFocus(); }); it('should not commit on outside click if commitOnOutsideClick is false', async () => { @@ -176,7 +173,7 @@ describe('Editor', () => { }} /> ); - await userEvent.dblClick(getCellsAtRowIndexOld(0)[1]); + await userEvent.dblClick(getCellsAtRowIndex(0)[1]); const editor = page.getByRole('textbox', { name: 'col2-editor' }); await expect.element(editor).toBeInTheDocument(); await userEvent.click(page.getByText('outside')); @@ -196,9 +193,9 @@ describe('Editor', () => { }} /> ); - await userEvent.click(getCellsAtRowIndexOld(0)[1]); + await userEvent.click(getCellsAtRowIndex(0)[1]); await userEvent.keyboard('yz{enter}'); - expect(getCellsAtRowIndexOld(0)[1]).toHaveTextContent(/^a1yz$/); + expect(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a1yz$/); await userEvent.keyboard('x'); await expect .element(page.getByRole('textbox', { name: 'col2-editor' })) @@ -216,9 +213,9 @@ describe('Editor', () => { }} /> ); - await userEvent.dblClick(getCellsAtRowIndexOld(0)[1]); + await userEvent.dblClick(getCellsAtRowIndex(0)[1]); await userEvent.keyboard('a{arrowleft}b{arrowright}c{arrowdown}'); // should commit changes on arrowdown - expect(getCellsAtRowIndexOld(0)[1]).toHaveTextContent(/^a1bac$/); + expect(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a1bac$/); }); }); @@ -231,15 +228,15 @@ describe('Editor', () => { page.render(); - await userEvent.dblClick(getCellsAtRowIndexOld(0)[1]); + await userEvent.dblClick(getCellsAtRowIndex(0)[1]); await userEvent.keyboard('abc'); await scrollGrid({ scrollTop: 1500 }); - expect(getCellsAtRowIndexOld(40)[1]).toHaveTextContent(/^40$/); - await userEvent.click(getCellsAtRowIndexOld(40)[1]); - expect(getSelectedCellOld()).toHaveTextContent(/^40$/); + expect(getCellsAtRowIndex(40)[1]).toHaveTextContent(/^40$/); + await userEvent.click(getCellsAtRowIndex(40)[1]); + await expect.element(getSelectedCell()).toHaveTextContent(/^40$/); await scrollGrid({ scrollTop: 0 }); - expect(getCellsAtRowIndexOld(0)[1]).toHaveTextContent(/^0abc$/); + expect(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^0abc$/); }); it('should not steal focus back to the cell after being closed by clicking outside the grid', async () => { @@ -281,7 +278,7 @@ describe('Editor', () => { ); const outerInput = page.getByRole('textbox', { name: 'outer-input' }); - await userEvent.dblClick(getCellsAtRowIndexOld(0)[0]); + await userEvent.dblClick(getCellsAtRowIndex(0)[0]); const col1Input = page.getByRole('textbox', { name: 'col1-input' }); await expect.element(col1Input).toHaveFocus(); await userEvent.click(outerInput); @@ -289,7 +286,7 @@ describe('Editor', () => { await expect.element(col1Input).not.toBeInTheDocument(); await expect.element(outerInput).toHaveFocus(); - await userEvent.dblClick(getCellsAtRowIndexOld(0)[1]); + await userEvent.dblClick(getCellsAtRowIndex(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 b469814684..030efedb33 100644 --- a/test/browser/column/renderHeaderCell.test.tsx +++ b/test/browser/column/renderHeaderCell.test.tsx @@ -1,7 +1,7 @@ import type { Column } from '../../../src'; import { getHeaderCells, setup } from '../utils'; -test('renderHeaderCell is either undefined or a component', async () => { +test('renderHeaderCell is either undefined or a component', () => { const columns: readonly Column[] = [ { key: 'id', @@ -16,6 +16,6 @@ test('renderHeaderCell is either undefined or a component', async () => { setup({ columns, rows: [] }); const [cell1, cell2] = getHeaderCells(); - await expect.element(cell1).toHaveTextContent('ID'); - await expect.element(cell2).toHaveTextContent('Fancy! Name'); + expect(cell1).toHaveTextContent('ID'); + expect(cell2).toHaveTextContent('Fancy! Name'); }); diff --git a/test/browser/column/renderSummaryCell.test.tsx b/test/browser/column/renderSummaryCell.test.tsx index fd1fdf2bbd..50b471a789 100644 --- a/test/browser/column/renderSummaryCell.test.tsx +++ b/test/browser/column/renderSummaryCell.test.tsx @@ -21,7 +21,7 @@ const columns: readonly Column[] = [ } ]; -test('renderSummaryCell', async () => { +test('renderSummaryCell', () => { setup({ columns, rows: [], @@ -37,13 +37,13 @@ test('renderSummaryCell', async () => { const cells = getCells(); expect(cells).toHaveLength(8); - await expect.element(cells[0]).toHaveTextContent('Summary: 1'); - await expect.element(cells[2]).toHaveTextContent('Summary: 2'); - await expect.element(cells[4]).toHaveTextContent('Summary: 3'); - await expect.element(cells[6]).toHaveTextContent('Summary: 4'); + expect(cells[0]).toHaveTextContent('Summary: 1'); + expect(cells[2]).toHaveTextContent('Summary: 2'); + expect(cells[4]).toHaveTextContent('Summary: 3'); + expect(cells[6]).toHaveTextContent('Summary: 4'); // nothing is rendered when renderSummaryCell is not defined - await expect.element(cells[1]).toBeEmptyDOMElement(); - await expect.element(cells[3]).toBeEmptyDOMElement(); - await expect.element(cells[5]).toBeEmptyDOMElement(); - await expect.element(cells[7]).toBeEmptyDOMElement(); + expect(cells[1]).toBeEmptyDOMElement(); + expect(cells[3]).toBeEmptyDOMElement(); + expect(cells[5]).toBeEmptyDOMElement(); + expect(cells[7]).toBeEmptyDOMElement(); }); diff --git a/test/browser/column/resizable.test.tsx b/test/browser/column/resizable.test.tsx index 8d3eea9422..afd227bf25 100644 --- a/test/browser/column/resizable.test.tsx +++ b/test/browser/column/resizable.test.tsx @@ -1,4 +1,4 @@ -import { commands, page } from '@vitest/browser/context'; +import { commands, userEvent } from '@vitest/browser/context'; import type { Column } from '../../../src'; import { resizeHandleClassname } from '../../../src/HeaderCell'; @@ -36,9 +36,9 @@ async function resize({ column, resizeBy }: ResizeArgs) { } async function autoResize(column: Element) { - const resizeHandle = page.elementLocator(getResizeHandle(column)); + const resizeHandle = getResizeHandle(column); - await resizeHandle.dblClick(); + await userEvent.dblClick(resizeHandle); } const columns: readonly Column[] = [ @@ -60,7 +60,7 @@ 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.element())).not.toBeInTheDocument(); + expect(queryResizeHandle(col1)).not.toBeInTheDocument(); }); test('should resize column when dragging the handle', async () => { @@ -70,7 +70,7 @@ test('should resize column when dragging the handle', async () => { const grid = getGrid(); expect(onColumnResize).not.toHaveBeenCalled(); await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' }); - await resize({ column: col2.element(), resizeBy: -50 }); + await resize({ column: col2, resizeBy: -50 }); await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 150px' }); expect(onColumnResize).toHaveBeenCalledExactlyOnceWith(expect.objectContaining(columns[1]), 150); }); @@ -80,7 +80,7 @@ test('should use the maxWidth if specified', async () => { const [, col2] = getHeaderCells(); const grid = getGrid(); await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px ' }); - await resize({ column: col2.element(), resizeBy: 1000 }); + await resize({ column: col2, resizeBy: 1000 }); await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 400px' }); }); @@ -89,7 +89,7 @@ test('should use the minWidth if specified', async () => { const [, col2] = getHeaderCells(); const grid = getGrid(); await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' }); - await resize({ column: col2.element(), resizeBy: -150 }); + await resize({ column: col2, resizeBy: -150 }); await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 100px' }); }); @@ -106,7 +106,7 @@ test('should auto resize column when resize handle is double clicked', async () const [, col2] = getHeaderCells(); const grid = getGrid(); await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' }); - await autoResize(col2.element()); + await autoResize(col2); await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 327.703px' }); }); @@ -123,7 +123,7 @@ test('should use the maxWidth if specified on auto resize', async () => { const [, col2] = getHeaderCells(); const grid = getGrid(); await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' }); - await autoResize(col2.element()); + await autoResize(col2); await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 400px' }); }); @@ -140,6 +140,6 @@ test('should use the minWidth if specified on auto resize', async () => { const [, col2] = getHeaderCells(); const grid = getGrid(); await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' }); - await autoResize(col2.element()); + await autoResize(col2); 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 f397474a19..cc51c8cae3 100644 --- a/test/browser/column/summaryCellClass.test.ts +++ b/test/browser/column/summaryCellClass.test.ts @@ -11,7 +11,7 @@ const cellClassname = `${cellClass} ${summaryCellClassname}`; const topSummaryRows: readonly SummaryRow[] = [{ id: 0 }, { id: 1 }]; const bottomSummaryRows: readonly SummaryRow[] = [{ id: 2 }, { id: 3 }]; -test('summaryCellClass is undefined', async () => { +test('summaryCellClass is undefined', () => { const columns: readonly Column[] = [ { key: 'id', @@ -20,11 +20,11 @@ test('summaryCellClass is undefined', async () => { ]; 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 }); + expect(cell1).toHaveClass(cellClassname, { exact: true }); + expect(cell2).toHaveClass(cellClassname, { exact: true }); }); -test('summaryCellClass is a string', async () => { +test('summaryCellClass is a string', () => { const columns: readonly Column[] = [ { key: 'id', @@ -35,11 +35,11 @@ test('summaryCellClass is a string', async () => { setup({ columns, topSummaryRows, bottomSummaryRows, rows: [] }); const cells = getCells(); for (const cell of cells) { - await expect.element(cell).toHaveClass(`${cellClassname} my-cell`, { exact: true }); + expect(cell).toHaveClass(`${cellClassname} my-cell`, { exact: true }); } }); -test('summaryCellClass returns a string', async () => { +test('summaryCellClass returns a string', () => { const columns: readonly Column[] = [ { key: 'id', @@ -49,13 +49,13 @@ test('summaryCellClass returns a string', async () => { ]; 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 }); - await expect.element(cell4).toHaveClass(`${cellClassname} my-cell-3`, { exact: true }); + expect(cell1).toHaveClass(`${cellClassname} my-cell-0`, { exact: true }); + expect(cell2).toHaveClass(`${cellClassname} my-cell-1`, { exact: true }); + expect(cell3).toHaveClass(`${cellClassname} my-cell-2`, { exact: true }); + expect(cell4).toHaveClass(`${cellClassname} my-cell-3`, { exact: true }); }); -test('summaryCellClass returns undefined', async () => { +test('summaryCellClass returns undefined', () => { const columns: readonly Column[] = [ { key: 'id', @@ -66,6 +66,6 @@ test('summaryCellClass returns undefined', async () => { setup({ columns, topSummaryRows, bottomSummaryRows, rows: [] }); const cells = getCells(); for (const cell of cells) { - await expect.element(cell).toHaveClass(cellClassname, { exact: true }); + expect(cell).toHaveClass(cellClassname, { exact: true }); } }); diff --git a/test/browser/columnOrder.test.tsx b/test/browser/columnOrder.test.tsx index 18f436d7fa..b8639df072 100644 --- a/test/browser/columnOrder.test.tsx +++ b/test/browser/columnOrder.test.tsx @@ -46,7 +46,7 @@ test('column order', () => { )); } - expect(getHeaderCells().map((c) => c.element().textContent)).toStrictEqual(expected); + expect(getHeaderCells().map((c) => c.textContent)).toStrictEqual(expected); unmount(); } diff --git a/test/browser/copyPaste.test.tsx b/test/browser/copyPaste.test.tsx index cbd0817b86..509d7f8d32 100644 --- a/test/browser/copyPaste.test.tsx +++ b/test/browser/copyPaste.test.tsx @@ -3,12 +3,7 @@ import { page, userEvent } from '@vitest/browser/context'; import { DataGrid } from '../../src'; import type { Column, PasteEvent } from '../../src'; -import { - copySelectedCell, - getCellsAtRowIndexOld, - getSelectedCell, - pasteSelectedCell -} from './utils'; +import { copySelectedCell, getCellsAtRowIndex, getSelectedCell, pasteSelectedCell } from './utils'; interface Row { col: string; @@ -84,20 +79,20 @@ function setup(onPasteCallback = true, onCopyCallback = false) { test('should not allow copy/paste if onPaste & onCopy is undefined', async () => { setup(false, false); - await userEvent.click(getCellsAtRowIndexOld(0)[0]); + await userEvent.click(getCellsAtRowIndex(0)[0]); await copySelectedCell(); await expect.element(getSelectedCell()).not.toHaveClass(copyCellClassName); expect(onCopySpy).not.toHaveBeenCalled(); await userEvent.keyboard('{arrowdown}'); await pasteSelectedCell(); await userEvent.keyboard('{escape}'); - expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a2'); + expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a2'); expect(onPasteSpy).not.toHaveBeenCalled(); }); test('should allow copy if only onCopy is specified', async () => { setup(false, true); - await userEvent.click(getCellsAtRowIndexOld(0)[0]); + await userEvent.click(getCellsAtRowIndex(0)[0]); await copySelectedCell(); await expect.element(getSelectedCell()).toHaveClass(copyCellClassName); expect(onCopySpy).toHaveBeenCalledExactlyOnceWith({ @@ -106,25 +101,25 @@ test('should allow copy if only onCopy is specified', async () => { }); await userEvent.keyboard('{arrowdown}'); await pasteSelectedCell(); - expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a2'); + expect(getCellsAtRowIndex(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(getCellsAtRowIndexOld(0)[0]); + await userEvent.click(getCellsAtRowIndex(0)[0]); await copySelectedCell(); await expect.element(getSelectedCell()).toHaveClass(copyCellClassName); expect(onCopySpy).not.toHaveBeenCalled(); await userEvent.keyboard('{arrowdown}'); await pasteSelectedCell(); - expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a1'); + expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1'); expect(onPasteSpy).toHaveBeenCalledOnce(); }); test('should allow copy/paste if both onPaste & onCopy is specified', async () => { setup(true, true); - await userEvent.click(getCellsAtRowIndexOld(0)[0]); + await userEvent.click(getCellsAtRowIndex(0)[0]); await copySelectedCell(); await expect.element(getSelectedCell()).toHaveClass(copyCellClassName); expect(onCopySpy).toHaveBeenCalledExactlyOnceWith({ @@ -133,40 +128,40 @@ test('should allow copy/paste if both onPaste & onCopy is specified', async () = }); await userEvent.keyboard('{arrowdown}'); await pasteSelectedCell(); - expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a1'); + expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a1'); expect(onPasteSpy).toHaveBeenCalledOnce(); }); test('should not allow paste on readonly cells', async () => { setup(); - await userEvent.click(getCellsAtRowIndexOld(1)[0]); + await userEvent.click(getCellsAtRowIndex(1)[0]); await copySelectedCell(); await expect.element(getSelectedCell()).toHaveClass(copyCellClassName); await userEvent.keyboard('{arrowdown}'); await pasteSelectedCell(); - expect(getCellsAtRowIndexOld(2)[0]).toHaveTextContent('a3'); + expect(getCellsAtRowIndex(2)[0]).toHaveTextContent('a3'); }); test('should allow copying a readonly cell, and pasting the value into a writable cell', async () => { setup(); - await userEvent.click(getCellsAtRowIndexOld(2)[0]); + await userEvent.click(getCellsAtRowIndex(2)[0]); await copySelectedCell(); await expect.element(getSelectedCell()).toHaveClass(copyCellClassName); await userEvent.keyboard('{arrowup}'); await pasteSelectedCell(); - expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a3'); + expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a3'); }); test('should cancel copy/paste on escape', async () => { setup(); - await userEvent.click(getCellsAtRowIndexOld(0)[0]); + await userEvent.click(getCellsAtRowIndex(0)[0]); await copySelectedCell(); await expect.element(getSelectedCell()).toHaveClass(copyCellClassName); await userEvent.keyboard('{escape}'); await expect.element(getSelectedCell()).not.toHaveClass(copyCellClassName); await userEvent.keyboard('{arrowdown}'); await pasteSelectedCell(); - expect(getCellsAtRowIndexOld(1)[0]).toHaveTextContent('a2'); + expect(getCellsAtRowIndex(1)[0]).toHaveTextContent('a2'); }); test('should not allow copy on header or summary cells', async () => { @@ -189,7 +184,7 @@ test('should not allow copy on header or summary cells', async () => { test('should not allow paste on header or summary cells', async () => { setup(); - await userEvent.click(getCellsAtRowIndexOld(0)[0]); + await userEvent.click(getCellsAtRowIndex(0)[0]); await copySelectedCell(); await userEvent.keyboard('{arrowup}'); await pasteSelectedCell(); @@ -203,7 +198,7 @@ test('should not allow paste on header or summary cells', async () => { test('should not start editing when pressing ctrl+', async () => { setup(); - await userEvent.click(getCellsAtRowIndexOld(1)[0]); + await userEvent.click(getCellsAtRowIndex(1)[0]); await userEvent.keyboard('{Control>}b'); await expect.element(getSelectedCell()).not.toHaveClass('rdg-editor-container'); }); diff --git a/test/browser/direction.test.ts b/test/browser/direction.test.ts index 7b4c4f0ee3..b35c4b7cf2 100644 --- a/test/browser/direction.test.ts +++ b/test/browser/direction.test.ts @@ -1,4 +1,4 @@ -import userEvent from '@testing-library/user-event'; +import { userEvent } from '@vitest/browser/context'; import type { Column } from '../../src'; import { getGrid, getSelectedCell, setup } from './utils'; diff --git a/test/browser/events.test.tsx b/test/browser/events.test.tsx index 7a7b9368dc..f4a80a1ac6 100644 --- a/test/browser/events.test.tsx +++ b/test/browser/events.test.tsx @@ -1,9 +1,8 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { page, userEvent } from '@vitest/browser/context'; import { DataGrid } from '../../src'; import type { Column, DataGridProps } from '../../src'; -import { getCellsAtRowIndexOld } from './utils'; +import { getCellsAtRowIndex } from './utils'; interface Row { col1: number; @@ -55,7 +54,7 @@ const rows: readonly Row[] = [ describe('Events', () => { it('should not select cell if onCellClick prevents grid default', async () => { - render( + page.render( { if (args.column.key === 'col1') { @@ -64,14 +63,14 @@ describe('Events', () => { }} /> ); - 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'); + 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'); }); it('should be able to open editor editor on single click using onCellClick', async () => { - render( + page.render( { if (args.column.key === 'col2') { @@ -81,14 +80,14 @@ describe('Events', () => { }} /> ); - await userEvent.click(getCellsAtRowIndexOld(0)[0]); - expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument(); - await userEvent.click(getCellsAtRowIndexOld(0)[1]); - expect(screen.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument(); + await userEvent.click(getCellsAtRowIndex(0)[0]); + await expect.element(page.getByLabelText('col1-editor')).not.toBeInTheDocument(); + await userEvent.click(getCellsAtRowIndex(0)[1]); + await expect.element(page.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument(); }); it('should not open editor editor on double click if onCellDoubleClick prevents default', async () => { - render( + page.render( { if (args.column.key === 'col1') { @@ -97,14 +96,14 @@ describe('Events', () => { }} /> ); - await userEvent.dblClick(getCellsAtRowIndexOld(0)[0]); - expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument(); - await userEvent.dblClick(getCellsAtRowIndexOld(0)[1]); - expect(screen.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument(); + await userEvent.dblClick(getCellsAtRowIndex(0)[0]); + await expect.element(page.getByLabelText('col1-editor')).not.toBeInTheDocument(); + await userEvent.dblClick(getCellsAtRowIndex(0)[1]); + await expect.element(page.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument(); }); it('should call onCellContextMenu when cell is right clicked', async () => { - render( + page.render( { if (args.column.key === 'col1') { @@ -113,21 +112,21 @@ describe('Events', () => { }} /> ); - 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'); + await userEvent.click(getCellsAtRowIndex(0)[0], { button: 'right' }); + expect(getCellsAtRowIndex(0)[0]).toHaveAttribute('aria-selected', 'false'); + await userEvent.click(getCellsAtRowIndex(0)[1], { button: 'right' }); + expect(getCellsAtRowIndex(0)[1]).toHaveAttribute('aria-selected', 'true'); }); it('should call onSelectedCellChange when cell selection is changed', async () => { const onSelectedCellChange = vi.fn(); - render(); + page.render(); expect(onSelectedCellChange).not.toHaveBeenCalled(); // Selected by click - await userEvent.click(getCellsAtRowIndexOld(0)[1]); + await userEvent.click(getCellsAtRowIndex(0)[1]); expect(onSelectedCellChange).toHaveBeenLastCalledWith({ column: expect.objectContaining(columns[1]), row: rows[0], @@ -136,7 +135,7 @@ describe('Events', () => { expect(onSelectedCellChange).toHaveBeenCalledTimes(1); // Selected by double click - await userEvent.dblClick(getCellsAtRowIndexOld(0)[0]); + await userEvent.dblClick(getCellsAtRowIndex(0)[0]); expect(onSelectedCellChange).toHaveBeenLastCalledWith({ column: expect.objectContaining(columns[0]), row: rows[0], @@ -145,7 +144,7 @@ describe('Events', () => { expect(onSelectedCellChange).toHaveBeenCalledTimes(2); // Selected by right-click - await userEvent.pointer({ target: getCellsAtRowIndexOld(1)[0], keys: '[MouseRight]' }); + await userEvent.click(getCellsAtRowIndex(1)[0], { button: 'right' }); expect(onSelectedCellChange).toHaveBeenLastCalledWith({ column: expect.objectContaining(columns[0]), row: rows[1], diff --git a/test/browser/keyboardNavigation.test.tsx b/test/browser/keyboardNavigation.test.tsx index 2754ff4b91..ad63ce8622 100644 --- a/test/browser/keyboardNavigation.test.tsx +++ b/test/browser/keyboardNavigation.test.tsx @@ -1,14 +1,13 @@ -import { render } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { page, userEvent } from '@vitest/browser/context'; import { DataGrid, SelectColumn } from '../../src'; import type { Column } from '../../src'; import { - getCellsAtRowIndexOld, - getSelectedCellOld, + getCellsAtRowIndex, + getSelectedCell, scrollGrid, - setupOld, - validateCellPositionOld + setup, + validateCellPosition } from './utils'; type Row = undefined; @@ -28,161 +27,172 @@ const columns = [ ] as const satisfies Column[]; test('keyboard navigation', async () => { - setupOld({ columns, rows, topSummaryRows, bottomSummaryRows }); + setup({ columns, rows, topSummaryRows, bottomSummaryRows }); // no initial selection - expect(getSelectedCellOld()).not.toBeInTheDocument(); + await expect.element(getSelectedCell()).not.toBeInTheDocument(); // tab into the grid await userEvent.tab(); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); // tab to the next cell await userEvent.tab(); - validateCellPositionOld(1, 0); + validateCellPosition(1, 0); // tab back to the previous cell await userEvent.tab({ shift: true }); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); // arrow navigation await userEvent.keyboard('{arrowdown}'); - validateCellPositionOld(0, 1); + validateCellPosition(0, 1); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(1, 1); + validateCellPosition(1, 1); await userEvent.keyboard('{arrowdown}'); - validateCellPositionOld(1, 2); + validateCellPosition(1, 2); await userEvent.keyboard('{arrowleft}'); - validateCellPositionOld(0, 2); + validateCellPosition(0, 2); await userEvent.keyboard('{arrowup}'); - validateCellPositionOld(0, 1); + validateCellPosition(0, 1); await userEvent.keyboard('{arrowup}'); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); // page {up,down} await userEvent.keyboard('{PageDown}'); - validateCellPositionOld(0, 26); + validateCellPosition(0, 26); await userEvent.keyboard('{PageDown}'); - validateCellPositionOld(0, 52); + validateCellPosition(0, 52); await userEvent.keyboard('{PageUp}'); - validateCellPositionOld(0, 26); + validateCellPosition(0, 26); // home/end navigation await userEvent.keyboard('{end}'); - validateCellPositionOld(6, 26); + validateCellPosition(6, 26); await userEvent.keyboard('{home}'); - validateCellPositionOld(0, 26); - await userEvent.keyboard('{Control>}{end}'); - validateCellPositionOld(6, 103); + validateCellPosition(0, 26); + await userEvent.keyboard('{Control>}{end}{/Control}'); + validateCellPosition(6, 103); await userEvent.keyboard('{arrowdown}'); - validateCellPositionOld(6, 103); + validateCellPosition(6, 103); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(6, 103); + validateCellPosition(6, 103); await userEvent.keyboard('{end}'); - validateCellPositionOld(6, 103); - await userEvent.keyboard('{Control>}{end}'); - validateCellPositionOld(6, 103); + validateCellPosition(6, 103); + await userEvent.keyboard('{Control>}{end}{/Control}'); + validateCellPosition(6, 103); await userEvent.keyboard('{PageDown}'); - validateCellPositionOld(6, 103); - await userEvent.keyboard('{Control>}{home}'); - validateCellPositionOld(0, 0); + validateCellPosition(6, 103); + await userEvent.keyboard('{Control>}{home}{/Control}'); + validateCellPosition(0, 0); await userEvent.keyboard('{home}'); - validateCellPositionOld(0, 0); - await userEvent.keyboard('{Control>}{home}'); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); + await userEvent.keyboard('{Control>}{home}{/Control}'); + validateCellPosition(0, 0); await userEvent.keyboard('{PageUp}'); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); // tab at the end of a row selects the first cell on the next row await userEvent.keyboard('{end}'); await userEvent.tab(); - validateCellPositionOld(0, 1); + validateCellPosition(0, 1); // shift tab should select the last cell of the previous row await userEvent.tab({ shift: true }); - validateCellPositionOld(6, 0); + validateCellPosition(6, 0); }); test('arrow and tab navigation', async () => { - setupOld({ columns, rows, bottomSummaryRows }); + setup({ columns, rows, bottomSummaryRows }); // pressing arrowleft on the leftmost cell does nothing await userEvent.tab(); await userEvent.keyboard('{arrowdown}'); - validateCellPositionOld(0, 1); + validateCellPosition(0, 1); await userEvent.keyboard('{arrowleft}'); - validateCellPositionOld(0, 1); + validateCellPosition(0, 1); // pressing arrowright on the rightmost cell does nothing await userEvent.keyboard('{end}'); - validateCellPositionOld(6, 1); + validateCellPosition(6, 1); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(6, 1); + validateCellPosition(6, 1); // pressing tab on the rightmost cell navigates to the leftmost cell on the next row await userEvent.tab(); - validateCellPositionOld(0, 2); + validateCellPosition(0, 2); // pressing shift+tab on the leftmost cell navigates to the rightmost cell on the previous row await userEvent.tab({ shift: true }); - validateCellPositionOld(6, 1); + validateCellPosition(6, 1); }); test('grid enter/exit', async () => { - setupOld({ columns, rows: new Array(5), bottomSummaryRows }); + page.render( + <> + + +
+ + + ); + + const beforeButton = page.getByRole('button', { name: 'Before' }); + const afterButton = page.getByRole('button', { name: 'After' }); // no initial selection - expect(getSelectedCellOld()).not.toBeInTheDocument(); + await expect.element(getSelectedCell()).not.toBeInTheDocument(); // tab into the grid + await userEvent.click(beforeButton); await userEvent.tab(); - validateCellPositionOld(0, 0); + validateCellPosition(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 expect.element(beforeButton).toHaveFocus(); await userEvent.tab(); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); await userEvent.keyboard('{arrowdown}{arrowdown}'); - validateCellPositionOld(0, 2); + validateCellPosition(0, 2); // tab should select the last selected cell // click outside the grid - await userEvent.click(document.body); + await userEvent.click(beforeButton); await userEvent.tab(); await userEvent.keyboard('{arrowdown}'); - validateCellPositionOld(0, 3); + validateCellPosition(0, 3); // shift+tab should select the last selected cell - await userEvent.click(document.body); + await userEvent.click(afterButton); await userEvent.tab({ shift: true }); - await userEvent.keyboard('{arrowup}'); - validateCellPositionOld(0, 2); + validateCellPosition(0, 3); + await expect.element(getSelectedCell().getByRole('checkbox')).toHaveFocus(); // tab tabs out of the grid if we are at the last cell - await userEvent.keyboard('{Control>}{end}'); + await userEvent.keyboard('{Control>}{end}{/Control}'); await userEvent.tab(); - expect(document.body).toHaveFocus(); + await expect.element(afterButton).toHaveFocus(); }); test('navigation with focusable cell renderer', async () => { - setupOld({ columns, rows: new Array(1), bottomSummaryRows }); + setup({ columns, rows: new Array(1), bottomSummaryRows }); await userEvent.tab(); await userEvent.keyboard('{arrowdown}'); - validateCellPositionOld(0, 1); + validateCellPosition(0, 1); // cell should not set tabIndex to 0 if it contains a focusable cell renderer - expect(getSelectedCellOld()).toHaveAttribute('tabIndex', '-1'); - const checkbox = getSelectedCellOld()!.querySelector('input'); + await expect.element(getSelectedCell()).toHaveAttribute('tabIndex', '-1'); + const checkbox = getSelectedCell().getByRole('checkbox').element(); expect(checkbox).toHaveFocus(); expect(checkbox).toHaveAttribute('tabIndex', '0'); await userEvent.tab(); - validateCellPositionOld(1, 1); + validateCellPosition(1, 1); // cell should set tabIndex to 0 if it does not have focusable cell renderer - expect(getSelectedCellOld()).toHaveAttribute('tabIndex', '0'); + await expect.element(getSelectedCell()).toHaveAttribute('tabIndex', '0'); }); test('navigation when header and summary rows have focusable elements', async () => { @@ -209,7 +219,7 @@ test('navigation when header and summary rows have focusable elements', async () } ]; - setupOld({ columns, rows: new Array(2), bottomSummaryRows }); + setup({ columns, rows: new Array(2), bottomSummaryRows }); await userEvent.tab(); // should set focus on the header filter @@ -219,7 +229,7 @@ test('navigation when header and summary rows have focusable elements', async () expect(document.getElementById('header-filter2')).toHaveFocus(); await userEvent.tab(); - validateCellPositionOld(0, 1); + validateCellPosition(0, 1); await userEvent.tab({ shift: true }); expect(document.getElementById('header-filter2')).toHaveFocus(); @@ -229,8 +239,8 @@ test('navigation when header and summary rows have focusable elements', async () await userEvent.tab(); await userEvent.tab(); - await userEvent.keyboard('{Control>}{end}{arrowup}{arrowup}'); - validateCellPositionOld(1, 2); + await userEvent.keyboard('{Control>}{end}{/Control}{arrowup}{arrowup}'); + validateCellPosition(1, 2); await userEvent.tab(); expect(document.getElementById('summary-1')).toHaveFocus(); @@ -240,8 +250,8 @@ test('navigation when header and summary rows have focusable elements', async () await userEvent.tab({ shift: true }); await userEvent.tab({ shift: true }); - validateCellPositionOld(1, 2); - expect(getSelectedCellOld()).toHaveFocus(); + validateCellPosition(1, 2); + await expect.element(getSelectedCell()).toHaveFocus(); }); test('navigation when selected cell not in the viewport', async () => { @@ -249,31 +259,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 }); } - setupOld({ columns, rows, bottomSummaryRows }); + setup({ columns, rows, bottomSummaryRows }); await userEvent.tab(); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); - await userEvent.keyboard('{Control>}{end}{arrowup}{arrowup}'); - validateCellPositionOld(99, 100); - expect(getCellsAtRowIndexOld(100)).not.toHaveLength(1); + await userEvent.keyboard('{Control>}{end}{/Control}{arrowup}{arrowup}'); + validateCellPosition(99, 100); + expect(getCellsAtRowIndex(100)).not.toHaveLength(1); await scrollGrid({ scrollTop: 0 }); - expect(getCellsAtRowIndexOld(99)).toHaveLength(1); + expect(getCellsAtRowIndex(99)).toHaveLength(1); await userEvent.keyboard('{arrowup}'); - validateCellPositionOld(99, 99); - expect(getCellsAtRowIndexOld(99)).not.toHaveLength(1); + validateCellPosition(99, 99); + expect(getCellsAtRowIndex(99)).not.toHaveLength(1); await scrollGrid({ scrollLeft: 0 }); await userEvent.keyboard('{arrowdown}'); - validateCellPositionOld(99, 100); + validateCellPosition(99, 100); await userEvent.keyboard( '{home}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}' ); - validateCellPositionOld(7, 100); + validateCellPosition(7, 100); await scrollGrid({ scrollLeft: 2000 }); await userEvent.keyboard('{arrowleft}'); - validateCellPositionOld(6, 100); + validateCellPosition(6, 100); }); test('reset selected cell when column is removed', async () => { @@ -287,15 +297,15 @@ test('reset selected cell when column is removed', async () => { return ; } - const { rerender } = render(); + const { rerender } = page.render(); await userEvent.tab(); await userEvent.keyboard('{arrowdown}{arrowright}'); - validateCellPositionOld(1, 1); + validateCellPosition(1, 1); rerender(); - expect(getSelectedCellOld()).not.toBeInTheDocument(); + await expect.element(getSelectedCell()).not.toBeInTheDocument(); }); test('reset selected cell when row is removed', async () => { @@ -309,29 +319,29 @@ test('reset selected cell when row is removed', async () => { return ; } - const { rerender } = render(); + const { rerender } = page.render(); await userEvent.tab(); await userEvent.keyboard('{arrowdown}{arrowdown}{arrowright}'); - validateCellPositionOld(1, 2); + validateCellPosition(1, 2); rerender(); - expect(getSelectedCellOld()).not.toBeInTheDocument(); + await expect.element(getSelectedCell()).not.toBeInTheDocument(); }); test('should not change the left and right arrow behavior for right to left languages', async () => { - setupOld({ rows, columns, direction: 'rtl' }); + setup({ rows, columns, direction: 'rtl' }); await userEvent.tab(); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); await userEvent.tab(); - validateCellPositionOld(1, 0); + validateCellPosition(1, 0); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); await userEvent.keyboard('{arrowright}'); - validateCellPositionOld(0, 0); + validateCellPosition(0, 0); await userEvent.keyboard('{arrowleft}'); - validateCellPositionOld(1, 0); + validateCellPosition(1, 0); await userEvent.keyboard('{arrowleft}'); - validateCellPositionOld(2, 0); + validateCellPosition(2, 0); }); diff --git a/test/browser/renderers.test.tsx b/test/browser/renderers.test.tsx index 1b69f9b615..5575487958 100644 --- a/test/browser/renderers.test.tsx +++ b/test/browser/renderers.test.tsx @@ -17,7 +17,7 @@ import type { RenderSortStatusProps, SortColumn } from '../../src'; -import { getCells, getHeaderCells, getRowsOld, setup } from './utils'; +import { getCells, getHeaderCells, getRows, setup } from './utils'; interface Row { id: number; @@ -116,21 +116,21 @@ function setupContext(props: DataGridProps test('fallback defined using renderers prop with no rows', async () => { setup({ columns, rows: noRows, renderers: { noRowsFallback: } }); - expect(getRowsOld()).toHaveLength(0); + expect(getRows()).toHaveLength(0); await expect.element(page.getByText('Local no rows fallback')).toBeInTheDocument(); }); test('fallback defined using context with no rows', async () => { setupContext({ columns, rows: noRows }); - expect(getRowsOld()).toHaveLength(0); + expect(getRows()).toHaveLength(0); await expect.element(page.getByText('Global no rows fallback')).toBeInTheDocument(); }); test('fallback defined using both context and renderers with no rows', async () => { setupContext({ columns, rows: noRows, renderers: { noRowsFallback: } }); - expect(getRowsOld()).toHaveLength(0); + expect(getRows()).toHaveLength(0); await expect.element(page.getByText('Local no rows fallback')).toBeInTheDocument(); }); @@ -141,14 +141,14 @@ test('fallback defined using renderers prop with a row', async () => { renderers: { noRowsFallback: } }); - expect(getRowsOld()).toHaveLength(1); + expect(getRows()).toHaveLength(1); await expect.element(page.getByText('Local no rows fallback')).not.toBeInTheDocument(); }); test('fallback defined using context with a row', async () => { setupContext({ columns, rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }] }); - expect(getRowsOld()).toHaveLength(1); + expect(getRows()).toHaveLength(1); await expect.element(page.getByText('Global no rows fallback')).not.toBeInTheDocument(); }); @@ -159,7 +159,7 @@ test('fallback defined using both context and renderers with a row', async () => renderers: { noRowsFallback: } }); - expect(getRowsOld()).toHaveLength(1); + expect(getRows()).toHaveLength(1); await expect.element(page.getByText('Global no rows fallback')).not.toBeInTheDocument(); await expect.element(page.getByText('Local no rows fallback')).not.toBeInTheDocument(); }); @@ -167,21 +167,21 @@ test('fallback defined using both context and renderers with a row', async () => test('checkbox defined using renderers prop', async () => { setup({ columns, rows: noRows, renderers: { renderCheckbox: renderLocalCheckbox } }); - expect(getRowsOld()).toHaveLength(0); + expect(getRows()).toHaveLength(0); await expect.element(page.getByText('Local checkbox')).toBeInTheDocument(); }); test('checkbox defined using context', async () => { setupContext({ columns, rows: noRows }); - expect(getRowsOld()).toHaveLength(0); + expect(getRows()).toHaveLength(0); await expect.element(page.getByText('Global checkbox')).toBeInTheDocument(); }); test('checkbox defined using both context and renderers', async () => { setupContext({ columns, rows: noRows, renderers: { renderCheckbox: renderLocalCheckbox } }); - expect(getRowsOld()).toHaveLength(0); + expect(getRows()).toHaveLength(0); await expect.element(page.getByText('Local checkbox')).toBeInTheDocument(); await expect.element(page.getByText('Global checkbox')).not.toBeInTheDocument(); }); @@ -194,9 +194,9 @@ test('sortPriority defined using both contexts', async () => { await userEvent.keyboard('{Control>}'); await userEvent.click(headerCell3); - const p = page.getByTestId('global-sort-priority').all(); - await expect.element(p[0]).toHaveTextContent('1'); - await expect.element(p[1]).toHaveTextContent('2'); + const p = page.getByTestId('global-sort-priority').elements(); + expect(p[0]).toHaveTextContent('1'); + expect(p[1]).toHaveTextContent('2'); await expect.element(page.getByTestId('local-sort-priority')).not.toBeInTheDocument(); }); @@ -216,22 +216,22 @@ test('sortPriority defined using both contexts and renderers', async () => { await expect.element(page.getByTestId('global-sort-priority')).not.toBeInTheDocument(); }); -test('renderCell defined using context', async () => { +test('renderCell defined using context', () => { setupContext({ columns, rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }] }); const [, cell1, cell2] = getCells(); - await expect.element(cell1).toHaveTextContent('value 1'); - await expect.element(cell1).toHaveClass('global'); - await expect.element(cell1).not.toHaveClass('local'); - await expect.element(cell1).toHaveStyle({ fontStyle: 'italic' }); - - await expect.element(cell2).toHaveTextContent('value 2'); - await expect.element(cell2).toHaveClass('global'); - await expect.element(cell2).not.toHaveClass('local'); - await expect.element(cell2).toHaveStyle({ fontStyle: 'italic' }); + expect(cell1).toHaveTextContent('value 1'); + expect(cell1).toHaveClass('global'); + expect(cell1).not.toHaveClass('local'); + expect(cell1).toHaveStyle({ fontStyle: 'italic' }); + + expect(cell2).toHaveTextContent('value 2'); + expect(cell2).toHaveClass('global'); + expect(cell2).not.toHaveClass('local'); + expect(cell2).toHaveStyle({ fontStyle: 'italic' }); }); -test('renderCell defined using both contexts and renderers', async () => { +test('renderCell defined using both contexts and renderers', () => { setupContext({ columns, rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }], @@ -239,21 +239,21 @@ test('renderCell defined using both contexts and renderers', async () => { }); const [, cell1, cell2] = getCells(); - await expect.element(cell1).toHaveTextContent('value 1'); - await expect.element(cell1).toHaveClass('local'); - await expect.element(cell1).not.toHaveClass('global'); - await expect.element(cell1).toHaveStyle({ fontStyle: 'normal' }); - - await expect.element(cell2).toHaveTextContent('value 2'); - await expect.element(cell2).toHaveClass('local'); - await expect.element(cell2).not.toHaveClass('global'); - await expect.element(cell2).toHaveStyle({ fontStyle: 'normal' }); + expect(cell1).toHaveTextContent('value 1'); + expect(cell1).toHaveClass('local'); + expect(cell1).not.toHaveClass('global'); + expect(cell1).toHaveStyle({ fontStyle: 'normal' }); + + expect(cell2).toHaveTextContent('value 2'); + expect(cell2).toHaveClass('local'); + expect(cell2).not.toHaveClass('global'); + expect(cell2).toHaveStyle({ fontStyle: 'normal' }); }); test('renderRow defined using context', () => { setupContext({ columns, rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }] }); - const [row] = getRowsOld(); + const row = getRows()[0]; expect(row).toHaveClass('global'); expect(row).not.toHaveClass('local'); }); @@ -265,7 +265,7 @@ test('renderRow defined using both contexts and renderers', () => { renderers: { renderRow: renderLocalRow } }); - const [row] = getRowsOld(); + const row = getRows()[0]; expect(row).toHaveClass('local'); expect(row).not.toHaveClass('global'); }); diff --git a/test/browser/rowClass.test.ts b/test/browser/rowClass.test.ts index c1059c82e7..be50467c12 100644 --- a/test/browser/rowClass.test.ts +++ b/test/browser/rowClass.test.ts @@ -9,38 +9,38 @@ interface Row { const columns: readonly Column[] = [{ key: 'id', name: 'ID' }]; const rows: readonly Row[] = [{ id: 0 }, { id: 1 }, { id: 2 }]; -test('rowClass is undefined', async () => { +test('rowClass is undefined', () => { setup({ columns, rows, rowClass: undefined }); 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 }); + expect(row1).toHaveClass(`${rowClassname} rdg-row-even`, { exact: true }); + expect(row2).toHaveClass(`${rowClassname} rdg-row-odd`, { exact: true }); + expect(row3).toHaveClass(`${rowClassname} rdg-row-even`, { exact: true }); }); -test('rowClass returns a string', async () => { +test('rowClass returns a string', () => { setup({ columns, rows, rowClass: (row) => `my-row-${row.id}` }); 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 }); + expect(row1).toHaveClass(`${rowClassname} rdg-row-even my-row-0`, { exact: true }); + expect(row2).toHaveClass(`${rowClassname} rdg-row-odd my-row-1`, { exact: true }); + expect(row3).toHaveClass(`${rowClassname} rdg-row-even my-row-2`, { exact: true }); }); -test('rowClass returns undefined', async () => { +test('rowClass returns undefined', () => { setup({ columns, rows, rowClass: () => undefined }); 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 }); + expect(row1).toHaveClass(`${rowClassname} rdg-row-even`, { exact: true }); + expect(row2).toHaveClass(`${rowClassname} rdg-row-odd`, { exact: true }); + expect(row3).toHaveClass(`${rowClassname} rdg-row-even`, { exact: true }); }); diff --git a/test/browser/rowSelection.test.tsx b/test/browser/rowSelection.test.tsx index ea414c0313..55d2cf214c 100644 --- a/test/browser/rowSelection.test.tsx +++ b/test/browser/rowSelection.test.tsx @@ -49,13 +49,11 @@ function setupNew(initialRows = defaultRows) { } function testSelection(rowIdx: number, isSelected: boolean) { - return expect - .element(getRows()[rowIdx]) - .toHaveAttribute('aria-selected', isSelected ? 'true' : 'false'); + expect(getRows()[rowIdx]).toHaveAttribute('aria-selected', isSelected ? 'true' : 'false'); } async function toggleSelection(rowIdx: number, shift = false) { - const element = getCellsAtRowIndex(rowIdx)[0].getByRole('checkbox', { name: 'Select' }); + const element = page.getByRole('row').all()[rowIdx + 1].getByRole('checkbox', { name: 'Select' }); if (shift) await userEvent.keyboard('{Shift>}'); await userEvent.click(element, { force: true }); if (shift) await userEvent.keyboard('{/Shift}'); @@ -64,29 +62,29 @@ async function toggleSelection(rowIdx: number, shift = false) { test('toggle selection when checkbox is clicked', async () => { setupNew(); await toggleSelection(0); - await testSelection(0, true); + testSelection(0, true); await toggleSelection(1); - await testSelection(1, true); + testSelection(1, true); await toggleSelection(0); - await testSelection(0, false); + testSelection(0, false); await toggleSelection(1); - await testSelection(1, false); + testSelection(1, false); }); test('toggle selection using keyboard', async () => { setupNew(); - await testSelection(0, false); + testSelection(0, false); await userEvent.click(getCellsAtRowIndex(0)[0]); - await testSelection(0, true); + testSelection(0, true); await userEvent.keyboard(' '); - await testSelection(0, false); + testSelection(0, false); await userEvent.keyboard(' '); - await testSelection(0, true); + testSelection(0, true); await userEvent.keyboard('{arrowdown} '); - await testSelection(1, true); + testSelection(1, true); await userEvent.keyboard('{arrowup} '); - await testSelection(0, false); + testSelection(0, false); }); test('should partially select header checkbox', async () => { @@ -112,14 +110,14 @@ test('should partially select header checkbox', async () => { expect(headerCheckbox).toBePartiallyChecked(); await userEvent.click(headerCheckbox); - await testSelection(0, false); - await testSelection(1, false); - await testSelection(2, false); + testSelection(0, false); + testSelection(1, false); + testSelection(2, false); await userEvent.click(headerCheckbox); - await testSelection(0, true); - await testSelection(1, true); - await testSelection(2, true); + testSelection(0, true); + testSelection(1, true); + testSelection(2, true); }); test('should not select row when isRowSelectionDisabled returns true', async () => { @@ -127,18 +125,18 @@ test('should not select row when isRowSelectionDisabled returns true', async () row.id === 2} /> ); await toggleSelection(0); - await testSelection(0, true); + testSelection(0, true); await toggleSelection(1); - await testSelection(1, false); + testSelection(1, false); await toggleSelection(2); - await testSelection(2, true); + testSelection(2, true); await userEvent.click(page.getByRole('checkbox', { name: 'Select All' })); await toggleSelection(0); await toggleSelection(2, true); - await testSelection(0, true); - await testSelection(1, false); - await testSelection(2, true); + testSelection(0, true); + testSelection(1, false); + testSelection(2, true); }); test('select/deselect all rows when header checkbox is clicked', async () => { @@ -146,9 +144,9 @@ test('select/deselect all rows when header checkbox is clicked', async () => { const headerCheckbox = page.getByRole('checkbox', { name: 'Select All' }).element(); expect(headerCheckbox).not.toBeChecked(); await userEvent.click(headerCheckbox); - await testSelection(0, true); - await testSelection(1, true); - await testSelection(2, true); + testSelection(0, true); + testSelection(1, true); + testSelection(2, true); // deselecting a row should toggle header await toggleSelection(0); @@ -157,9 +155,9 @@ test('select/deselect all rows when header checkbox is clicked', async () => { expect(headerCheckbox).toBeChecked(); await userEvent.click(headerCheckbox); - await testSelection(0, false); - await testSelection(1, false); - await testSelection(2, false); + testSelection(0, false); + testSelection(1, false); + testSelection(2, false); }); test('header checkbox is not checked when there are no rows', async () => { @@ -243,23 +241,23 @@ test('select/deselect rows using shift click', async () => { setupNew(); await toggleSelection(0); await toggleSelection(2, true); - await testSelection(0, true); - await testSelection(1, true); - await testSelection(2, true); + testSelection(0, true); + testSelection(1, true); + testSelection(2, true); await toggleSelection(0); await toggleSelection(2, true); - await testSelection(0, false); - await testSelection(1, false); - await testSelection(2, false); + testSelection(0, false); + testSelection(1, false); + testSelection(2, false); }); test('select rows using shift space', async () => { setupNew(); await userEvent.click(getCellsAtRowIndex(0)[1]); await userEvent.keyboard('{Shift>} {/Shift}'); - await testSelection(0, true); + testSelection(0, true); await userEvent.keyboard(' '); - await testSelection(0, true); + testSelection(0, true); await userEvent.keyboard('{Shift>} {/Shift}'); - await testSelection(0, false); + testSelection(0, false); }); diff --git a/test/browser/sorting.test.tsx b/test/browser/sorting.test.tsx index c8bfee48e2..8f1e829766 100644 --- a/test/browser/sorting.test.tsx +++ b/test/browser/sorting.test.tsx @@ -41,7 +41,7 @@ function testSortColumns(expectedValue: readonly SortColumn[]) { test('should not sort if sortable is false', async () => { setup(); - const headerCell = getHeaderCells()[3].element(); + const headerCell = getHeaderCells()[3]; 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 = getHeaderCells()[0].element(); + const headerCell = getHeaderCells()[0]; await userEvent.click(headerCell); expect(headerCell).toHaveAttribute('aria-sort', 'ascending'); // priority is not shown for single sort @@ -72,12 +72,12 @@ test('multi column sort', async () => { await userEvent.click(headerCell3); // aria-sort is only added for single sort - await expect.element(headerCell1).not.toHaveAttribute('aria-sort'); - await expect.element(headerCell1).toHaveTextContent('1'); // priority - await expect.element(headerCell2).not.toHaveAttribute('aria-sort'); - await expect.element(headerCell2).toHaveTextContent('2'); - await expect.element(headerCell3).not.toHaveAttribute('aria-sort'); - await expect.element(headerCell3).toHaveTextContent('3'); + expect(headerCell1).not.toHaveAttribute('aria-sort'); + expect(headerCell1).toHaveTextContent('1'); // priority + expect(headerCell2).not.toHaveAttribute('aria-sort'); + expect(headerCell2).toHaveTextContent('2'); + expect(headerCell3).not.toHaveAttribute('aria-sort'); + expect(headerCell3).toHaveTextContent('3'); await testSortColumns([ { columnKey: 'colA', direction: 'ASC' }, { columnKey: 'colB', direction: 'DESC' }, @@ -95,14 +95,14 @@ test('multi column sort', async () => { { columnKey: 'colA', direction: 'ASC' }, { columnKey: 'colC', direction: 'ASC' } ]); - await expect.element(headerCell3).toHaveTextContent('2'); + expect(headerCell3).toHaveTextContent('2'); // clicking on a column without ctrlKey should remove multisort await userEvent.keyboard('{/Control}'); await userEvent.click(headerCell2); await testSortColumns([{ columnKey: 'colB', direction: 'DESC' }]); - await expect.element(headerCell2).toHaveAttribute('aria-sort'); - await expect.element(headerCell2).not.toHaveTextContent('2'); + expect(headerCell2).toHaveAttribute('aria-sort'); + expect(headerCell2).not.toHaveTextContent('2'); }); test('multi column sort with metakey', async () => { diff --git a/test/browser/utils.tsx b/test/browser/utils.tsx index 38d12d0dc6..6b0b605339 100644 --- a/test/browser/utils.tsx +++ b/test/browser/utils.tsx @@ -1,22 +1,9 @@ -import { act, render, screen } from '@testing-library/react'; import { page, userEvent } from '@vitest/browser/context'; import { css } from '@linaria/core'; import { DataGrid } from '../../src'; import type { DataGridProps } from '../../src'; -export function setupOld(props: DataGridProps) { - render( - - ); -} - export function setup(props: DataGridProps) { page.render( (props: DataGridPro ); } -export function getGridOld() { - return screen.getByRole('grid'); -} - export function getGrid() { return page.getByRole('grid'); } -export function getTreeGridOld() { - return screen.getByRole('treegrid'); -} - -export function getRowsOld() { - return screen.getAllByRole('row').slice(1); +export function getTreeGrid() { + return page.getByRole('treegrid'); } export function getRows() { - return page.getByRole('row').all().slice(1); + return page.getByRole('row').elements().slice(1); } -export function queryRowsOld() { - return screen.queryAllByRole('row').slice(1); -} - -export function getCellsAtRowIndexOld(rowIdx: number) { +export function getCellsAtRowIndex(rowIdx: number) { return Array.from( document.querySelectorAll(`[aria-rowindex="${rowIdx + 2}"] > .rdg-cell`) ); } -export function getCellsAtRowIndex(rowIdx: number) { - return page.getByRole('row').all()[rowIdx + 1].getByRole('gridcell').all(); -} - -export function getCellsOld() { - return screen.getAllByRole('gridcell'); -} - export function getCells() { - return page.getByRole('gridcell').all(); -} - -export function queryCellsOld() { - return screen.queryAllByRole('gridcell'); -} - -export function getHeaderCellsOld() { - return screen.getAllByRole('columnheader'); + return page.getByRole('gridcell').elements(); } export function getHeaderCells() { - return page.getByRole('columnheader').all(); -} - -export function queryHeaderCellsOld() { - return screen.queryAllByRole('columnheader'); -} - -export function getSelectedCellOld() { - return ( - screen.queryByRole('gridcell', { selected: true }) ?? - screen.queryByRole('columnheader', { selected: true }) - ); -} - -export function validateCellPositionOld(columnIdx: number, rowIdx: number) { - const cell = getSelectedCellOld(); - if (cell === null) { - throw new Error('Selected cell not found'); - } - expect(cell).toHaveAttribute('aria-colindex', `${columnIdx + 1}`); - expect(cell.parentNode).toHaveAttribute('aria-rowindex', `${rowIdx + 1}`); + return page.getByRole('columnheader').elements(); } export function getSelectedCell() { const selectedGridCell = page.getByRole('gridcell', { selected: true }); - if (selectedGridCell.all().length > 0) { + // TODO use `or` when available + if (selectedGridCell.elements().length > 0) { return selectedGridCell; } @@ -118,24 +58,10 @@ export function validateCellPosition(columnIdx: number, rowIdx: number) { expect(cell.parentNode).toHaveAttribute('aria-rowindex', `${rowIdx + 1}`); } -export async function copySelectedCellOld() { - // eslint-disable-next-line testing-library/no-unnecessary-act - await act(async () => { - await userEvent.keyboard('{Control>}c'); - }); -} - export function copySelectedCell() { return userEvent.keyboard('{Control>}c{/Control}'); } -export async function pasteSelectedCellOld() { - // eslint-disable-next-line testing-library/no-unnecessary-act - await act(async () => { - await userEvent.keyboard('{Control>}v'); - }); -} - export function pasteSelectedCell() { return userEvent.keyboard('{Control>}v{/Control}'); } @@ -147,17 +73,17 @@ export async function scrollGrid({ scrollLeft?: number; scrollTop?: number; }) { - const grid = getGridOld(); + const grid = getGrid().element(); - await act(async () => { - if (scrollLeft !== undefined) { - grid.scrollLeft = scrollLeft; - } - if (scrollTop !== undefined) { - grid.scrollTop = scrollTop; - } + if (scrollLeft !== undefined) { + grid.scrollLeft = scrollLeft; + } + if (scrollTop !== undefined) { + grid.scrollTop = scrollTop; + } + if (scrollLeft !== undefined || scrollTop !== undefined) { // let the browser fire the 'scroll' event await new Promise(requestAnimationFrame); - }); + } } diff --git a/test/browser/virtualization.test.ts b/test/browser/virtualization.test.ts index 449e9daa8e..458e07b5ea 100644 --- a/test/browser/virtualization.test.ts +++ b/test/browser/virtualization.test.ts @@ -1,15 +1,5 @@ import type { Column } from '../../src'; -import { - getCellsAtRowIndexOld, - getCellsOld, - getHeaderCellsOld, - getRowsOld, - queryCellsOld, - queryHeaderCellsOld, - queryRowsOld, - scrollGrid, - setupOld -} from './utils'; +import { getCells, getCellsAtRowIndex, getHeaderCells, getRows, scrollGrid, setup } from './utils'; const rowHeight = 35; @@ -35,7 +25,7 @@ function setupGrid( }); } - setupOld({ + setup({ columns, rows, topSummaryRows, @@ -46,7 +36,7 @@ function setupGrid( } function assertElements( - elements: HTMLElement[], + elements: Element[], attribute: string, count: number, startIdx: number, @@ -58,7 +48,7 @@ function assertElements( } function assertIndexes( - cells: HTMLElement[], + cells: Element[], expectedIndexes: number[], attribute: string, indexOffset: number @@ -70,27 +60,27 @@ function assertIndexes( } function assertHeaderCells(count: number, startIdx: number, endIdx: number) { - assertElements(getHeaderCellsOld(), 'aria-colindex', count, startIdx + 1, endIdx + 1); + assertElements(getHeaderCells(), 'aria-colindex', count, startIdx + 1, endIdx + 1); } function assertHeaderCellIndexes(indexes: number[]) { - assertIndexes(getHeaderCellsOld(), indexes, 'aria-colindex', 1); + assertIndexes(getHeaderCells(), indexes, 'aria-colindex', 1); } function assertRows(count: number, startIdx: number, endIdx: number) { - assertElements(getRowsOld(), 'aria-rowindex', count, startIdx + 2, endIdx + 2); + assertElements(getRows(), 'aria-rowindex', count, startIdx + 2, endIdx + 2); } function assertRowIndexes(indexes: number[]) { - assertIndexes(getRowsOld(), indexes, 'aria-rowindex', 2); + assertIndexes(getRows(), indexes, 'aria-rowindex', 2); } function assertCells(rowIdx: number, count: number, startIdx: number, endIdx: number) { - assertElements(getCellsAtRowIndexOld(rowIdx), 'aria-colindex', count, startIdx + 1, endIdx + 1); + assertElements(getCellsAtRowIndex(rowIdx), 'aria-colindex', count, startIdx + 1, endIdx + 1); } function assertCellIndexes(rowIdx: number, indexes: number[]) { - assertIndexes(getCellsAtRowIndexOld(rowIdx), indexes, 'aria-colindex', 1); + assertIndexes(getCellsAtRowIndex(rowIdx), indexes, 'aria-colindex', 1); } test('virtualization is enabled', async () => { @@ -204,17 +194,17 @@ test('virtualization is enabled with 2 summary rows', async () => { test('zero columns', () => { setupGrid(true, 0, 100); - expect(queryHeaderCellsOld()).toHaveLength(0); - expect(queryCellsOld()).toHaveLength(0); - expect(getRowsOld()).toHaveLength(34); + expect(getHeaderCells()).toHaveLength(0); + expect(getCells()).toHaveLength(0); + expect(getRows()).toHaveLength(0); }); test('zero rows', () => { setupGrid(true, 20, 0); - expect(getHeaderCellsOld()).toHaveLength(18); - expect(queryCellsOld()).toHaveLength(0); - expect(queryRowsOld()).toHaveLength(0); + expect(getHeaderCells()).toHaveLength(18); + expect(getCells()).toHaveLength(0); + expect(getRows()).toHaveLength(0); }); test('virtualization is enable with not enough columns or rows to virtualize', () => { @@ -223,7 +213,7 @@ test('virtualization is enable with not enough columns or rows to virtualize', ( assertHeaderCells(5, 0, 4); assertRows(5, 0, 4); - const cells = getCellsOld(); + const cells = getCells(); expect(cells).toHaveLength(5 * 5); }); @@ -233,6 +223,6 @@ test('enableVirtualization is disabled', () => { assertHeaderCells(40, 0, 39); assertRows(100, 0, 99); - const cells = getCellsOld(); + const cells = getCells(); expect(cells).toHaveLength(40 * 100); }); diff --git a/test/setup.ts b/test/setup.ts deleted file mode 100644 index 8f5794e9d3..0000000000 --- a/test/setup.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { configure } from '@testing-library/react'; - -configure({ - reactStrictMode: true, - throwSuggestions: true -}); diff --git a/vite.config.ts b/vite.config.ts index 86a450d434..f8b2f0468d 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -98,7 +98,7 @@ export default defineConfig(({ command }) => ({ headless: true, screenshotFailures: process.env.CI !== 'true' }, - setupFiles: ['test/setup.ts', 'test/setupBrowser.ts'] + setupFiles: ['test/setupBrowser.ts'] } }, { @@ -106,8 +106,7 @@ export default defineConfig(({ command }) => ({ test: { name: 'node', include: ['test/node/**/*.test.*'], - environment: 'node', - setupFiles: ['test/setup.ts'] + environment: 'node' } } ]