From 8b0de363131df28daae19e65d8777c05680f219b Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 18 Nov 2024 10:40:42 -0600 Subject: [PATCH] Migrate more test to use `vitest-browser-react` and `browserUserEvent` (#3633) * Use `@vitest/browser` * Update grouping tests * Update `userEvent` --- test/browser/column/cellClass.test.ts | 42 +++--- test/browser/column/colSpan.test.ts | 10 +- test/browser/column/draggable.test.ts | 31 ++--- test/browser/column/frozen.test.ts | 28 ++-- test/browser/column/grouping.test.ts | 131 +++++++++--------- test/browser/column/headerCellClass.test.ts | 22 +-- test/browser/column/key.test.ts | 4 +- test/browser/column/name.test.tsx | 12 +- test/browser/column/renderCell.test.tsx | 53 ++++--- test/browser/column/renderHeaderCell.test.tsx | 12 +- .../browser/column/renderSummaryCell.test.tsx | 24 ++-- test/browser/column/summaryCellClass.test.ts | 42 +++--- test/browser/utils.tsx | 31 +++++ 13 files changed, 234 insertions(+), 208 deletions(-) diff --git a/test/browser/column/cellClass.test.ts b/test/browser/column/cellClass.test.ts index 8d6f4c7afe..632324e77e 100644 --- a/test/browser/column/cellClass.test.ts +++ b/test/browser/column/cellClass.test.ts @@ -1,6 +1,6 @@ import type { Column } from '../../../src'; import { cellClassname } from '../../../src/style/cell'; -import { getCells, setup } from '../utils'; +import { getCellsNew, setupNew } from '../utils'; interface Row { id: number; @@ -8,20 +8,20 @@ interface Row { const rows: readonly Row[] = [{ id: 0 }, { id: 1 }]; -test('cellClass is undefined', () => { +test('cellClass is undefined', async () => { const columns: readonly Column[] = [ { key: 'id', name: 'ID' } ]; - setup({ columns, rows }); - const [cell1, cell2] = getCells(); - expect(cell1).toHaveClass(cellClassname, { exact: true }); - expect(cell2).toHaveClass(cellClassname, { exact: true }); + setupNew({ columns, rows }); + const [cell1, cell2] = getCellsNew(); + await expect.element(cell1).toHaveClass(cellClassname, { exact: true }); + await expect.element(cell2).toHaveClass(cellClassname, { exact: true }); }); -test('cellClass is a string', () => { +test('cellClass is a string', async () => { const columns: readonly Column[] = [ { key: 'id', @@ -29,13 +29,13 @@ test('cellClass is a string', () => { cellClass: 'my-cell' } ]; - setup({ columns, rows }); - const [cell1, cell2] = getCells(); - expect(cell1).toHaveClass(`${cellClassname} my-cell`, { exact: true }); - expect(cell2).toHaveClass(`${cellClassname} my-cell`, { exact: true }); + setupNew({ columns, rows }); + const [cell1, cell2] = getCellsNew(); + await expect.element(cell1).toHaveClass(`${cellClassname} my-cell`, { exact: true }); + await expect.element(cell2).toHaveClass(`${cellClassname} my-cell`, { exact: true }); }); -test('cellClass returns a string', () => { +test('cellClass returns a string', async () => { const columns: readonly Column[] = [ { key: 'id', @@ -43,13 +43,13 @@ test('cellClass returns a string', () => { cellClass: (row) => `my-cell-${row.id}` } ]; - setup({ columns, rows }); - const [cell1, cell2] = getCells(); - expect(cell1).toHaveClass(`${cellClassname} my-cell-0`, { exact: true }); - expect(cell2).toHaveClass(`${cellClassname} my-cell-1`, { exact: true }); + setupNew({ columns, rows }); + const [cell1, cell2] = getCellsNew(); + await expect.element(cell1).toHaveClass(`${cellClassname} my-cell-0`, { exact: true }); + await expect.element(cell2).toHaveClass(`${cellClassname} my-cell-1`, { exact: true }); }); -test('cellClass returns undefined', () => { +test('cellClass returns undefined', async () => { const columns: readonly Column[] = [ { key: 'id', @@ -57,8 +57,8 @@ test('cellClass returns undefined', () => { cellClass: () => undefined } ]; - setup({ columns, rows }); - const [cell1, cell2] = getCells(); - expect(cell1).toHaveClass(cellClassname, { exact: true }); - expect(cell2).toHaveClass(cellClassname, { exact: true }); + setupNew({ columns, rows }); + const [cell1, cell2] = getCellsNew(); + await expect.element(cell1).toHaveClass(cellClassname, { exact: true }); + await expect.element(cell2).toHaveClass(cellClassname, { exact: true }); }); diff --git a/test/browser/column/colSpan.test.ts b/test/browser/column/colSpan.test.ts index 9273d2199a..5f1605e0cf 100644 --- a/test/browser/column/colSpan.test.ts +++ b/test/browser/column/colSpan.test.ts @@ -1,7 +1,7 @@ -import userEvent from '@testing-library/user-event'; +import { userEvent } from '@vitest/browser/context'; import type { Column } from '../../../src'; -import { getCellsAtRowIndex, getHeaderCells, setup, validateCellPosition } from '../utils'; +import { getCellsAtRowIndex, getHeaderCellsNew, setupNew, validateCellPosition } from '../utils'; describe('colSpan', () => { function setupColSpanGrid(colCount = 15) { @@ -34,13 +34,13 @@ describe('colSpan', () => { } }); } - setup({ columns, rows, bottomSummaryRows: [1, 2], topSummaryRows: [1, 2] }); + setupNew({ columns, rows, bottomSummaryRows: [1, 2], topSummaryRows: [1, 2] }); } it('should merges cells', () => { setupColSpanGrid(); // header - expect(getHeaderCells()).toHaveLength(13); + expect(getHeaderCellsNew()).toHaveLength(13); // top summary rows const topSummarryRow1 = getCellsAtRowIndex(0); @@ -95,7 +95,7 @@ describe('colSpan', () => { it('should navigate between merged cells', async () => { setupColSpanGrid(); // header row - await userEvent.click(getHeaderCells()[7]); + await userEvent.click(getHeaderCellsNew()[7]); validateCellPosition(7, 0); await userEvent.keyboard('{arrowright}'); validateCellPosition(8, 0); diff --git a/test/browser/column/draggable.test.ts b/test/browser/column/draggable.test.ts index 149639952b..f293e0b81e 100644 --- a/test/browser/column/draggable.test.ts +++ b/test/browser/column/draggable.test.ts @@ -1,8 +1,7 @@ -import { act } from 'react'; import { userEvent } from '@vitest/browser/context'; import type { Column } from '../../../src'; -import { getHeaderCells, setup } from '../utils'; +import { getHeaderCellsNew, setupNew } from '../utils'; const columns: readonly Column[] = [ { @@ -28,35 +27,25 @@ const columns: readonly Column[] = [ test('draggable columns', async () => { const onColumnsReorder = vi.fn(); - setup({ columns, rows: [], onColumnsReorder }); - const [cell1, cell2, cell3, cell4] = getHeaderCells(); + setupNew({ columns, rows: [], onColumnsReorder }); + const [cell1, cell2, cell3, cell4] = getHeaderCellsNew(); - expect(cell1).not.toHaveAttribute('draggable'); - expect(cell2).toHaveAttribute('draggable'); - expect(cell3).toHaveAttribute('draggable'); - expect(cell4).toHaveAttribute('draggable'); + 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(onColumnsReorder).not.toHaveBeenCalled(); - // eslint-disable-next-line testing-library/no-unnecessary-act - await act(async () => { - await userEvent.dragAndDrop(cell2, cell4); - }); - + await userEvent.dragAndDrop(cell2, cell4); expect(onColumnsReorder).toHaveBeenCalledWith('col2', 'col4'); onColumnsReorder.mockReset(); // should not call `onColumnsReorder` if drag and drop elements are the same - // eslint-disable-next-line testing-library/no-unnecessary-act - await act(async () => { - await userEvent.dragAndDrop(cell2, cell2); - }); + await userEvent.dragAndDrop(cell2, cell2); expect(onColumnsReorder).not.toHaveBeenCalled(); // should not drag a column if it is not specified as draggable - // eslint-disable-next-line testing-library/no-unnecessary-act - await act(async () => { - await userEvent.dragAndDrop(cell1, cell2); - }); + await userEvent.dragAndDrop(cell1, cell2); expect(onColumnsReorder).not.toHaveBeenCalled(); }); diff --git a/test/browser/column/frozen.test.ts b/test/browser/column/frozen.test.ts index 9075f446ce..8dd50ff5e7 100644 --- a/test/browser/column/frozen.test.ts +++ b/test/browser/column/frozen.test.ts @@ -1,8 +1,8 @@ import type { Column } from '../../../src'; import { cellClassname, cellFrozenClassname } from '../../../src/style/cell'; -import { getHeaderCells, setup } from '../utils'; +import { getHeaderCellsNew, setupNew } from '../utils'; -test('frozen column have a specific class, and are stable-sorted before non-frozen columns', () => { +test('frozen column have a specific class, and are stable-sorted before non-frozen columns', async () => { const columns: readonly Column[] = [ { key: 'col1', @@ -25,16 +25,20 @@ test('frozen column have a specific class, and are stable-sorted before non-froz } ]; - setup({ columns, rows: [] }); - const [cell1, cell2, cell3, cell4] = getHeaderCells(); + setupNew({ columns, rows: [] }); + const [cell1, cell2, cell3, cell4] = getHeaderCellsNew(); - 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) + .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).toHaveTextContent('col1'); - expect(cell2).toHaveTextContent('col3'); - expect(cell3).toHaveTextContent('col2'); - expect(cell4).toHaveTextContent('col4'); + await expect.element(cell1).toHaveTextContent('col1'); + await expect.element(cell2).toHaveTextContent('col3'); + await expect.element(cell3).toHaveTextContent('col2'); + await expect.element(cell4).toHaveTextContent('col4'); }); diff --git a/test/browser/column/grouping.test.ts b/test/browser/column/grouping.test.ts index c6406309db..119f0ccc78 100644 --- a/test/browser/column/grouping.test.ts +++ b/test/browser/column/grouping.test.ts @@ -1,8 +1,7 @@ -import { screen, within } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { page, userEvent } from '@vitest/browser/context'; import type { ColumnOrColumnGroup } from '../../../src'; -import { getSelectedCell, setup, validateCellPosition } from '../utils'; +import { getSelectedCellNew, setupNew, validateCellPositionNew } from '../utils'; const columns: readonly ColumnOrColumnGroup>[] = [ { key: 'col1', name: 'col 1' }, @@ -88,37 +87,41 @@ const columns: readonly ColumnOrColumnGroup>[] = [ } ]; -test('grouping', () => { - setup({ columns, rows: [{}] }); +test('grouping', async () => { + setupNew({ columns, rows: [{}] }); - const grid = screen.getByRole('grid'); - expect(grid).toHaveAttribute('aria-colcount', '12'); - expect(grid).toHaveAttribute('aria-rowcount', '5'); + const grid = page.getByRole('grid'); + await expect.element(grid).toHaveAttribute('aria-colcount', '12'); + await expect.element(grid).toHaveAttribute('aria-rowcount', '5'); - const rows = screen.getAllByRole('row'); + const rows = page.getByRole('row').all(); expect(rows).toHaveLength(5); - expect(rows[0]).toHaveAttribute('aria-rowindex', '1'); - expect(rows[1]).toHaveAttribute('aria-rowindex', '2'); - expect(rows[2]).toHaveAttribute('aria-rowindex', '3'); - expect(rows[3]).toHaveAttribute('aria-rowindex', '4'); - expect(rows[4]).toHaveAttribute('aria-rowindex', '5'); + await expect.element(rows[0]).toHaveAttribute('aria-rowindex', '1'); + await expect.element(rows[1]).toHaveAttribute('aria-rowindex', '2'); + await expect.element(rows[2]).toHaveAttribute('aria-rowindex', '3'); + await expect.element(rows[3]).toHaveAttribute('aria-rowindex', '4'); + await expect.element(rows[4]).toHaveAttribute('aria-rowindex', '5'); - expect(within(rows[0]).getAllByRole('columnheader')).toHaveLength(2); - expect(within(rows[1]).getAllByRole('columnheader')).toHaveLength(2); - expect(within(rows[2]).getAllByRole('columnheader')).toHaveLength(4); - expect(within(rows[3]).getAllByRole('columnheader')).toHaveLength(12); - expect(within(rows[4]).queryByRole('columnheader')).not.toBeInTheDocument(); + expect(rows[0].getByRole('columnheader').all()).toHaveLength(2); + expect(rows[1].getByRole('columnheader').all()).toHaveLength(2); + expect(rows[2].getByRole('columnheader').all()).toHaveLength(4); + expect(rows[3].getByRole('columnheader').all()).toHaveLength(12); + expect(rows[4].getByRole('columnheader').all()).toHaveLength(0); - const headerCells = screen.getAllByRole('columnheader'); + const headerCells = page.getByRole('columnheader').all(); expect(headerCells).toHaveLength(20); - const headerCellDetails = headerCells.map((cell) => ({ - text: cell.textContent, - colIndex: cell.getAttribute('aria-colindex'), - colSpan: cell.getAttribute('aria-colspan'), - rowSpan: cell.getAttribute('aria-rowspan') - })); + const headerCellDetails = headerCells.map((cellLocator) => { + const cell = cellLocator.element(); + + return { + text: cell.textContent, + colIndex: cell.getAttribute('aria-colindex'), + colSpan: cell.getAttribute('aria-colspan'), + rowSpan: cell.getAttribute('aria-rowspan') + }; + }); expect(headerCellDetails).toStrictEqual([ { @@ -245,92 +248,92 @@ test('grouping', () => { }); test('keyboard navigation', async () => { - setup({ columns, rows: [{}] }); + setupNew({ columns, rows: [{}] }); // no initial selection - expect(getSelectedCell()).not.toBeInTheDocument(); + await expect.element(getSelectedCellNew()).not.toBeInTheDocument(); await userEvent.tab(); - validateCellPosition(0, 3); + validateCellPositionNew(0, 3); // arrow navigation await userEvent.keyboard('{arrowup}'); - validateCellPosition(0, 3); + validateCellPositionNew(0, 3); await userEvent.keyboard('{arrowright}'); - validateCellPosition(1, 3); + validateCellPositionNew(1, 3); await userEvent.keyboard('{arrowup}'); - validateCellPosition(1, 2); + validateCellPositionNew(1, 2); await userEvent.keyboard('{arrowup}'); - validateCellPosition(1, 2); + validateCellPositionNew(1, 2); await userEvent.keyboard('{arrowleft}'); - validateCellPosition(0, 3); + validateCellPositionNew(0, 3); await userEvent.keyboard('{arrowright}{arrowright}'); - validateCellPosition(2, 3); + validateCellPositionNew(2, 3); await userEvent.keyboard('{arrowup}'); - validateCellPosition(1, 2); + validateCellPositionNew(1, 2); await userEvent.keyboard('{arrowdown}'); - validateCellPosition(1, 3); + validateCellPositionNew(1, 3); await userEvent.keyboard('{arrowright}{arrowright}'); - validateCellPosition(3, 3); + validateCellPositionNew(3, 3); await userEvent.keyboard('{arrowright}'); - validateCellPosition(4, 3); + validateCellPositionNew(4, 3); await userEvent.keyboard('{arrowdown}'); - validateCellPosition(4, 4); + validateCellPositionNew(4, 4); await userEvent.keyboard('{arrowup}'); - validateCellPosition(4, 3); + validateCellPositionNew(4, 3); await userEvent.keyboard('{arrowup}'); - validateCellPosition(4, 2); + validateCellPositionNew(4, 2); await userEvent.keyboard('{arrowup}'); - validateCellPosition(4, 1); + validateCellPositionNew(4, 1); await userEvent.keyboard('{arrowup}'); - validateCellPosition(4, 0); + validateCellPositionNew(4, 0); await userEvent.keyboard('{arrowdown}'); - validateCellPosition(4, 1); + validateCellPositionNew(4, 1); await userEvent.keyboard('{arrowright}'); - validateCellPosition(5, 3); + validateCellPositionNew(5, 3); await userEvent.keyboard('{arrowleft}'); - validateCellPosition(4, 3); + validateCellPositionNew(4, 3); await userEvent.keyboard('{arrowup}'); - validateCellPosition(4, 2); + validateCellPositionNew(4, 2); await userEvent.keyboard('{arrowright}'); - validateCellPosition(5, 3); + validateCellPositionNew(5, 3); await userEvent.keyboard('{arrowright}'); - validateCellPosition(6, 3); + validateCellPositionNew(6, 3); await userEvent.keyboard('{arrowright}'); - validateCellPosition(7, 3); + validateCellPositionNew(7, 3); await userEvent.keyboard('{arrowup}'); - validateCellPosition(7, 2); + validateCellPositionNew(7, 2); await userEvent.keyboard('{arrowup}'); - validateCellPosition(4, 0); + validateCellPositionNew(4, 0); await userEvent.keyboard('{arrowright}'); - validateCellPosition(8, 0); + validateCellPositionNew(8, 0); await userEvent.keyboard('{arrowleft}'); - validateCellPosition(4, 0); + validateCellPositionNew(4, 0); // home/end navigation await userEvent.keyboard('{home}'); - validateCellPosition(0, 3); + validateCellPositionNew(0, 3); await userEvent.keyboard('{end}'); - validateCellPosition(11, 3); + validateCellPositionNew(11, 3); await userEvent.keyboard('{arrowleft}'); - validateCellPosition(10, 3); + validateCellPositionNew(10, 3); // tab navigation await userEvent.tab(); - validateCellPosition(11, 3); + validateCellPositionNew(11, 3); await userEvent.tab({ shift: true }); await userEvent.tab({ shift: true }); await userEvent.tab({ shift: true }); - validateCellPosition(8, 3); + validateCellPositionNew(8, 3); await userEvent.keyboard('{arrowup}'); await userEvent.tab({ shift: true }); - validateCellPosition(4, 0); + validateCellPositionNew(4, 0); await userEvent.tab(); - validateCellPosition(8, 0); + validateCellPositionNew(8, 0); await userEvent.keyboard('{home}{end}'); await userEvent.tab(); - validateCellPosition(0, 4); + validateCellPositionNew(0, 4); await userEvent.tab({ shift: true }); - validateCellPosition(11, 3); + validateCellPositionNew(11, 3); }); diff --git a/test/browser/column/headerCellClass.test.ts b/test/browser/column/headerCellClass.test.ts index 8b292c626f..fc5b01de9b 100644 --- a/test/browser/column/headerCellClass.test.ts +++ b/test/browser/column/headerCellClass.test.ts @@ -1,8 +1,8 @@ import type { Column, ColumnGroup } from '../../../src'; import { cellClassname } from '../../../src/style/cell'; -import { getHeaderCells, setup } from '../utils'; +import { getHeaderCellsNew, setupNew } from '../utils'; -test('headerCellClass is either nullish or a string', () => { +test('headerCellClass is either nullish or a string', async () => { const columns: readonly Column[] = [ { key: 'id', @@ -15,13 +15,13 @@ test('headerCellClass is either nullish or a string', () => { } ]; - setup({ columns, rows: [] }); - const [cell1, cell2] = getHeaderCells(); - expect(cell1).toHaveClass(cellClassname, { exact: true }); - expect(cell2).toHaveClass(`${cellClassname} my-header`, { exact: true }); + setupNew({ columns, rows: [] }); + const [cell1, cell2] = getHeaderCellsNew(); + await expect.element(cell1).toHaveClass(cellClassname, { exact: true }); + await expect.element(cell2).toHaveClass(`${cellClassname} my-header`, { exact: true }); }); -test('columnGroup.headerCellClass is either nullish or a string', () => { +test('columnGroup.headerCellClass is either nullish or a string', async () => { const columns: readonly ColumnGroup[] = [ { name: 'Group 1', @@ -34,8 +34,8 @@ test('columnGroup.headerCellClass is either nullish or a string', () => { } ]; - setup({ columns, rows: [] }); - const [cell1, cell2] = getHeaderCells(); - expect(cell1).toHaveClass(cellClassname, { exact: true }); - expect(cell2).toHaveClass(`${cellClassname} my-header`, { exact: true }); + setupNew({ columns, rows: [] }); + const [cell1, cell2] = getHeaderCellsNew(); + await expect.element(cell1).toHaveClass(cellClassname, { exact: true }); + await expect.element(cell2).toHaveClass(`${cellClassname} my-header`, { exact: true }); }); diff --git a/test/browser/column/key.test.ts b/test/browser/column/key.test.ts index 497b48b224..4ae1b60b48 100644 --- a/test/browser/column/key.test.ts +++ b/test/browser/column/key.test.ts @@ -1,5 +1,5 @@ import type { Column } from '../../../src'; -import { setup } from '../utils'; +import { setupNew } from '../utils'; test('key is escaped in query selectors', () => { const columns: readonly Column[] = [ @@ -10,6 +10,6 @@ test('key is escaped in query selectors', () => { ]; expect(() => { - setup({ columns, rows: [] }); + setupNew({ columns, rows: [] }); }).not.toThrow(); }); diff --git a/test/browser/column/name.test.tsx b/test/browser/column/name.test.tsx index b968471270..b02255ed4a 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'; +import { getHeaderCellsNew, setupNew } from '../utils'; -test('name is either a string or an element', () => { +test('name is either a string or an element', async () => { function Header() { return 'Fancy'; } @@ -17,8 +17,8 @@ test('name is either a string or an element', () => { } ]; - setup({ columns, rows: [] }); - const [cell1, cell2] = getHeaderCells(); - expect(cell1).toHaveTextContent('ID'); - expect(cell2).toHaveTextContent('Fancy'); + setupNew({ columns, rows: [] }); + const [cell1, cell2] = getHeaderCellsNew(); + await expect.element(cell1).toHaveTextContent('ID'); + await expect.element(cell2).toHaveTextContent('Fancy'); }); diff --git a/test/browser/column/renderCell.test.tsx b/test/browser/column/renderCell.test.tsx index a0cfb0451c..b09438a848 100644 --- a/test/browser/column/renderCell.test.tsx +++ b/test/browser/column/renderCell.test.tsx @@ -1,10 +1,9 @@ import { useState } from 'react'; -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 } from '../../../src'; -import { getCells, getCellsAtRowIndex, setup } from '../utils'; +import { getCellsAtRowIndex, getCellsNew, setupNew } from '../utils'; interface Row { id: number; @@ -18,18 +17,18 @@ describe('renderValue', () => { const rows: readonly Row[] = [{ id: 101 }]; - it('should be used by default', () => { - setup({ columns, rows }); - const [cell1, cell2] = getCells(); - expect(cell1).toHaveTextContent('101'); - expect(cell2).toBeEmptyDOMElement(); + it('should be used by default', async () => { + setupNew({ columns, rows }); + const [cell1, cell2] = getCellsNew(); + await expect.element(cell1).toHaveTextContent('101'); + await expect.element(cell2).toBeEmptyDOMElement(); }); - it('should handle non-object values', () => { - setup({ columns, rows: [null] }); - const [cell1, cell2] = getCells(); - expect(cell1).toBeEmptyDOMElement(); - expect(cell2).toBeEmptyDOMElement(); + it('should handle non-object values', async () => { + setupNew({ columns, rows: [null] }); + const [cell1, cell2] = getCellsNew(); + await expect.element(cell1).toBeEmptyDOMElement(); + await expect.element(cell2).toBeEmptyDOMElement(); }); }); @@ -49,11 +48,11 @@ describe('Custom cell renderer', () => { const rows: readonly Row[] = [{ id: 101 }]; - it('should replace the default cell renderer', () => { - setup({ columns, rows }); - const [cell1, cell2] = getCells(); - expect(cell1).toHaveTextContent('#101'); - expect(cell2).toHaveTextContent('No name'); + it('should replace the default cell renderer', async () => { + setupNew({ columns, rows }); + const [cell1, cell2] = getCellsNew(); + await expect.element(cell1).toHaveTextContent('#101'); + await expect.element(cell2).toHaveTextContent('No name'); }); it('can update rows', async () => { @@ -90,12 +89,12 @@ describe('Custom cell renderer', () => { ); } - render(); + page.render(); - const [cell] = getCells(); - expect(cell).toHaveTextContent('value: 1'); - await userEvent.click(screen.getByRole('button')); - expect(cell).toHaveTextContent('value: 2'); + const [cell] = getCellsNew(); + await expect.element(cell).toHaveTextContent('value: 1'); + await userEvent.click(page.getByRole('button')); + await expect.element(cell).toHaveTextContent('value: 2'); expect(onChange).toHaveBeenCalledTimes(1); expect(onChange).toHaveBeenCalledWith([{ id: 2 }], { column: { @@ -141,14 +140,14 @@ test('Cell should not steal focus when the focus is outside the grid and cell is ); } - render(); + page.render(); await userEvent.click(getCellsAtRowIndex(0)[0]); expect(getCellsAtRowIndex(0)[0]).toHaveFocus(); - const button = screen.getByRole('button', { name: 'Test' }); - expect(button).not.toHaveFocus(); + const button = page.getByRole('button', { name: 'Test' }); + await expect.element(button).not.toHaveFocus(); await userEvent.click(button); expect(getCellsAtRowIndex(0)[0]).not.toHaveFocus(); - expect(button).toHaveFocus(); + await expect.element(button).toHaveFocus(); }); diff --git a/test/browser/column/renderHeaderCell.test.tsx b/test/browser/column/renderHeaderCell.test.tsx index 030efedb33..b70efde2ae 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'; +import { getHeaderCellsNew, setupNew } from '../utils'; -test('renderHeaderCell is either undefined or a component', () => { +test('renderHeaderCell is either undefined or a component', async () => { const columns: readonly Column[] = [ { key: 'id', @@ -14,8 +14,8 @@ test('renderHeaderCell is either undefined or a component', () => { } ]; - setup({ columns, rows: [] }); - const [cell1, cell2] = getHeaderCells(); - expect(cell1).toHaveTextContent('ID'); - expect(cell2).toHaveTextContent('Fancy! Name'); + setupNew({ columns, rows: [] }); + const [cell1, cell2] = getHeaderCellsNew(); + await expect.element(cell1).toHaveTextContent('ID'); + await expect.element(cell2).toHaveTextContent('Fancy! Name'); }); diff --git a/test/browser/column/renderSummaryCell.test.tsx b/test/browser/column/renderSummaryCell.test.tsx index 50b471a789..f470bb96b5 100644 --- a/test/browser/column/renderSummaryCell.test.tsx +++ b/test/browser/column/renderSummaryCell.test.tsx @@ -1,5 +1,5 @@ import type { Column } from '../../../src'; -import { getCells, setup } from '../utils'; +import { getCellsNew, setupNew } from '../utils'; interface SummaryRow { id: number; @@ -21,8 +21,8 @@ const columns: readonly Column[] = [ } ]; -test('renderSummaryCell', () => { - setup({ +test('renderSummaryCell', async () => { + setupNew({ columns, rows: [], topSummaryRows: [ @@ -35,15 +35,15 @@ test('renderSummaryCell', () => { ] }); - const cells = getCells(); + const cells = getCellsNew(); expect(cells).toHaveLength(8); - expect(cells[0]).toHaveTextContent('Summary: 1'); - expect(cells[2]).toHaveTextContent('Summary: 2'); - expect(cells[4]).toHaveTextContent('Summary: 3'); - expect(cells[6]).toHaveTextContent('Summary: 4'); + 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'); // nothing is rendered when renderSummaryCell is not defined - expect(cells[1]).toBeEmptyDOMElement(); - expect(cells[3]).toBeEmptyDOMElement(); - expect(cells[5]).toBeEmptyDOMElement(); - expect(cells[7]).toBeEmptyDOMElement(); + await expect.element(cells[1]).toBeEmptyDOMElement(); + await expect.element(cells[3]).toBeEmptyDOMElement(); + await expect.element(cells[5]).toBeEmptyDOMElement(); + await expect.element(cells[7]).toBeEmptyDOMElement(); }); diff --git a/test/browser/column/summaryCellClass.test.ts b/test/browser/column/summaryCellClass.test.ts index cc51c8cae3..808c12c15f 100644 --- a/test/browser/column/summaryCellClass.test.ts +++ b/test/browser/column/summaryCellClass.test.ts @@ -1,7 +1,7 @@ import type { Column } from '../../../src'; import { cellClassname as cellClass } from '../../../src/style/cell'; import { summaryCellClassname } from '../../../src/SummaryCell'; -import { getCells, setup } from '../utils'; +import { getCellsNew, setupNew } from '../utils'; interface SummaryRow { id: number; @@ -11,20 +11,20 @@ const cellClassname = `${cellClass} ${summaryCellClassname}`; const topSummaryRows: readonly SummaryRow[] = [{ id: 0 }, { id: 1 }]; const bottomSummaryRows: readonly SummaryRow[] = [{ id: 2 }, { id: 3 }]; -test('summaryCellClass is undefined', () => { +test('summaryCellClass is undefined', async () => { const columns: readonly Column[] = [ { key: 'id', name: 'ID' } ]; - setup({ columns, topSummaryRows, bottomSummaryRows, rows: [] }); - const [cell1, cell2] = getCells(); - expect(cell1).toHaveClass(cellClassname, { exact: true }); - expect(cell2).toHaveClass(cellClassname, { exact: true }); + setupNew({ columns, topSummaryRows, bottomSummaryRows, rows: [] }); + const [cell1, cell2] = getCellsNew(); + await expect.element(cell1).toHaveClass(cellClassname, { exact: true }); + await expect.element(cell2).toHaveClass(cellClassname, { exact: true }); }); -test('summaryCellClass is a string', () => { +test('summaryCellClass is a string', async () => { const columns: readonly Column[] = [ { key: 'id', @@ -32,14 +32,14 @@ test('summaryCellClass is a string', () => { summaryCellClass: 'my-cell' } ]; - setup({ columns, topSummaryRows, bottomSummaryRows, rows: [] }); - const cells = getCells(); + setupNew({ columns, topSummaryRows, bottomSummaryRows, rows: [] }); + const cells = getCellsNew(); for (const cell of cells) { - expect(cell).toHaveClass(`${cellClassname} my-cell`, { exact: true }); + await expect.element(cell).toHaveClass(`${cellClassname} my-cell`, { exact: true }); } }); -test('summaryCellClass returns a string', () => { +test('summaryCellClass returns a string', async () => { const columns: readonly Column[] = [ { key: 'id', @@ -47,15 +47,15 @@ test('summaryCellClass returns a string', () => { summaryCellClass: (row) => `my-cell-${row.id}` } ]; - setup({ columns, topSummaryRows, bottomSummaryRows, rows: [] }); - const [cell1, cell2, cell3, cell4] = getCells(); - 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 }); + setupNew({ columns, topSummaryRows, bottomSummaryRows, rows: [] }); + const [cell1, cell2, cell3, cell4] = getCellsNew(); + 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 }); }); -test('summaryCellClass returns undefined', () => { +test('summaryCellClass returns undefined', async () => { const columns: readonly Column[] = [ { key: 'id', @@ -63,9 +63,9 @@ test('summaryCellClass returns undefined', () => { summaryCellClass: () => undefined } ]; - setup({ columns, topSummaryRows, bottomSummaryRows, rows: [] }); - const cells = getCells(); + setupNew({ columns, topSummaryRows, bottomSummaryRows, rows: [] }); + const cells = getCellsNew(); for (const cell of cells) { - expect(cell).toHaveClass(cellClassname, { exact: true }); + await expect.element(cell).toHaveClass(cellClassname, { exact: true }); } }); diff --git a/test/browser/utils.tsx b/test/browser/utils.tsx index e3d940876c..8ddc355ab4 100644 --- a/test/browser/utils.tsx +++ b/test/browser/utils.tsx @@ -17,6 +17,18 @@ export function setup(props: DataGridPro ); } +export function setupNew(props: DataGridProps) { + page.render( + + ); +} + export function getGrid() { return screen.getByRole('grid'); } @@ -55,6 +67,10 @@ export function getHeaderCells() { return screen.getAllByRole('columnheader'); } +export function getHeaderCellsNew() { + return page.getByRole('columnheader').all(); +} + export function queryHeaderCells() { return screen.queryAllByRole('columnheader'); } @@ -75,6 +91,21 @@ export function validateCellPosition(columnIdx: number, rowIdx: number) { expect(cell.parentNode).toHaveAttribute('aria-rowindex', `${rowIdx + 1}`); } +export function getSelectedCellNew() { + const selectedGridCell = page.getByRole('gridcell', { selected: true }); + if (selectedGridCell.all().length > 0) { + return selectedGridCell; + } + + return page.getByRole('columnheader', { selected: true }); +} + +export function validateCellPositionNew(columnIdx: number, rowIdx: number) { + const cell = getSelectedCellNew().element(); + expect(cell).toHaveAttribute('aria-colindex', `${columnIdx + 1}`); + expect(cell.parentNode).toHaveAttribute('aria-rowindex', `${rowIdx + 1}`); +} + export async function copySelectedCell() { // eslint-disable-next-line testing-library/no-unnecessary-act await act(async () => {