Rewrite some tests to reduce flakiness: part 1

test/browser/TextEditor.test.tsx

@@ -3,7 +3,6 @@ import { page, userEvent } from '@vitest/browser/context';
 
 import { DataGrid, textEditor } from '../../src';
 import type { Column } from '../../src';
-import { getCells } from './utils';
 
 interface Row {
   readonly name: string;
@@ -29,27 +28,27 @@ function Test() {
 
 test('TextEditor', async () => {
   page.render(<Test />);
-
-  await userEvent.dblClick(getCells()[0]);
-  let input = page.getByRole('textbox').element() as HTMLInputElement;
-  expect(input).toHaveClass('rdg-text-editor');
+  const cell = page.getByRole('gridcell');
+  await expect.element(cell).toHaveTextContent(/^Tacitus Kilgore$/);
+  await userEvent.dblClick(cell);
+  const input = page.getByRole('textbox');
+  await expect.element(input).toHaveClass('rdg-text-editor');
   // input value is row[column.key]
-  expect(input).toHaveValue(initialRows[0].name);
+  await expect.element(input).toHaveValue(initialRows[0].name);
   // input is focused
-  expect(input).toHaveFocus();
+  await expect.element(input).toHaveFocus();
   // input value is fully selected
-  expect(input).toHaveSelection(initialRows[0].name);
+  await expect.element(input).toHaveSelection(initialRows[0].name);
 
   // pressing escape closes the editor without committing
   await userEvent.keyboard('Test{escape}');
-  expect(input).not.toBeInTheDocument();
-  await expect.element(getCells()[0]).toHaveTextContent(/^Tacitus Kilgore$/);
+  await expect.element(input).not.toBeInTheDocument();
+  await expect.element(cell).toHaveTextContent(/^Tacitus Kilgore$/);
 
   // blurring the input closes and commits the editor
-  await userEvent.dblClick(getCells()[0]);
-  input = page.getByRole('textbox').element() as HTMLInputElement;
+  await userEvent.dblClick(cell);
   await userEvent.fill(input, 'Jim Milton');
   await userEvent.tab();
-  expect(input).not.toBeInTheDocument();
-  await expect.element(getCells()[0]).toHaveTextContent(/^Jim Milton$/);
+  await expect.element(input).not.toBeInTheDocument();
+  await expect.element(cell).toHaveTextContent(/^Jim Milton$/);
 });

test/browser/column/cellClass.test.ts

@@ -1,27 +1,27 @@
 import type { Column } from '../../../src';
 import { cellClassname } from '../../../src/style/cell';
-import { getCells, setup } from '../utils';
+import { getCellsNew, setup } from '../utils';
 
 interface Row {
   id: number;
 }
 
 const rows: readonly Row[] = [{ id: 0 }, { id: 1 }];
 
-test('cellClass is undefined', () => {
+test('cellClass is undefined', async () => {
   const columns: readonly Column<Row>[] = [
     {
       key: 'id',
       name: 'ID'
     }
   ];
   setup({ columns, rows });
-  const [cell1, cell2] = getCells();
-  expect(cell1).toHaveClass(cellClassname, { exact: true });
-  expect(cell2).toHaveClass(cellClassname, { exact: true });
+  const [cell1, cell2] = getCellsNew('0', '1');
+  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<Row>[] = [
     {
       key: 'id',
@@ -30,12 +30,12 @@ test('cellClass is a string', () => {
     }
   ];
   setup({ columns, rows });
-  const [cell1, cell2] = getCells();
-  expect(cell1).toHaveClass(`${cellClassname} my-cell`, { exact: true });
-  expect(cell2).toHaveClass(`${cellClassname} my-cell`, { exact: true });
+  const [cell1, cell2] = getCellsNew('0', '1');
+  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<Row>[] = [
     {
       key: 'id',
@@ -44,12 +44,12 @@ test('cellClass returns a string', () => {
     }
   ];
   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 });
+  const [cell1, cell2] = getCellsNew('0', '1');
+  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<Row>[] = [
     {
       key: 'id',
@@ -58,7 +58,7 @@ test('cellClass returns undefined', () => {
     }
   ];
   setup({ columns, rows });
-  const [cell1, cell2] = getCells();
-  expect(cell1).toHaveClass(cellClassname, { exact: true });
-  expect(cell2).toHaveClass(cellClassname, { exact: true });
+  const [cell1, cell2] = getCellsNew('0', '1');
+  await expect.element(cell1).toHaveClass(cellClassname, { exact: true });
+  await expect.element(cell2).toHaveClass(cellClassname, { exact: true });
 });

test/browser/column/draggable.test.ts

@@ -1,7 +1,7 @@
 import { userEvent } from '@vitest/browser/context';
 
 import type { Column } from '../../../src';
-import { getHeaderCells, setup } from '../utils';
+import { getHeaderCellsNew, setup } from '../utils';
 
 const columns: readonly Column<never>[] = [
   {
@@ -28,12 +28,12 @@ const columns: readonly Column<never>[] = [
 test('draggable columns', async () => {
   const onColumnsReorder = vi.fn();
   setup({ columns, rows: [], onColumnsReorder });
-  const [cell1, cell2, cell3, cell4] = getHeaderCells();
+  const [cell1, cell2, cell3, cell4] = getHeaderCellsNew('col1', 'col2', 'col3', 'col4');
 
-  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();
 

test/browser/column/frozen.test.ts

@@ -1,8 +1,10 @@
+import { page } from '@vitest/browser/context';
+
 import type { Column } from '../../../src';
 import { cellClassname, cellFrozenClassname } from '../../../src/style/cell';
-import { getHeaderCells, setup } from '../utils';
+import { getHeaderCellsNew, setup } 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<never>[] = [
     {
       key: 'col1',
@@ -26,15 +28,15 @@ test('frozen column have a specific class, and are stable-sorted before non-froz
   ];
 
   setup({ columns, rows: [] });
-  const [cell1, cell2, cell3, cell4] = getHeaderCells();
-
-  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(page.getByRole('row')).toHaveTextContent('col1col3col2col4');
+  const [cell1, cell2, cell3, cell4] = getHeaderCellsNew('col1', 'col2', 'col3', 'col4');
 
-  expect(cell1).toHaveTextContent('col1');
-  expect(cell2).toHaveTextContent('col3');
-  expect(cell3).toHaveTextContent('col2');
-  expect(cell4).toHaveTextContent('col4');
+  await expect
+    .element(cell1)
+    .toHaveClass(`${cellClassname} ${cellFrozenClassname}`, { exact: true });
+  await expect
+    .element(cell3)
+    .toHaveClass(`${cellClassname} ${cellFrozenClassname}`, { exact: true });
+  await expect.element(cell2).toHaveClass(cellClassname, { exact: true });
+  await expect.element(cell4).toHaveClass(cellClassname, { exact: true });
 });

test/browser/column/renderEditCell.test.tsx

@@ -1,10 +1,10 @@
 import { useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { page, userEvent } from '@vitest/browser/context';
+import { commands, page, userEvent } from '@vitest/browser/context';
 
 import { DataGrid } from '../../../src';
 import type { Column, DataGridProps } from '../../../src';
-import { getCellsAtRowIndex, getGrid, getSelectedCell, scrollGrid } from '../utils';
+import { getCell, getCellsAtRowIndex, getGrid, getSelectedCell, scrollGrid } from '../utils';
 
 interface Row {
   col1: number;
@@ -258,20 +258,19 @@ describe('Editor', () => {
     it('should not steal focus back to the cell if the editor is not in the viewport and another cell is clicked', async () => {
       const rows: Row[] = [];
       for (let i = 0; i < 99; i++) {
-        rows.push({ col1: i, col2: `${i}` });
+        rows.push({ col1: i, col2: `name${i}` });
       }
 
       page.render(<EditorTest gridRows={rows} />);
 
-      await userEvent.dblClick(getCellsAtRowIndex(0)[1]);
+      await userEvent.dblClick(getCell('name0'));
       await userEvent.keyboard('abc');
 
-      await scrollGrid({ scrollTop: 1500 });
-      expect(getCellsAtRowIndex(40)[1]).toHaveTextContent(/^40$/);
-      await userEvent.click(getCellsAtRowIndex(40)[1]);
-      await expect.element(getSelectedCell()).toHaveTextContent(/^40$/);
-      await scrollGrid({ scrollTop: 0 });
-      expect(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^0abc$/);
+      await commands.scrollGrid({ scrollTop: 1500 });
+      await userEvent.click(getCell('name43'));
+      await expect.element(getSelectedCell()).toHaveTextContent(/^name43$/);
+      await commands.scrollGrid({ scrollTop: 0 });
+      await expect.element(getCell('name0abc')).toBeVisible();
     });
 
     it('should not steal focus back to the cell after being closed by clicking outside the grid', async () => {

test/browser/headerRowClass.test.ts

@@ -9,24 +9,24 @@ interface Row {
 }
 
 const columns: readonly Column<Row>[] = [{ key: 'id', name: 'ID' }];
-const rows: readonly Row[] = [{ id: 0 }];
+const rows: readonly Row[] = [];
 
-test('headerRowClass is undefined', () => {
+test('headerRowClass is undefined', async () => {
   setup({
     columns,
     rows,
-    rowClass: undefined
+    headerRowClass: undefined
   });
-  const header = page.getByRole('row').first();
-  expect(header).toHaveClass(headerRowClassname, { exact: true });
+  const header = page.getByRole('row');
+  await expect.element(header).toHaveClass(headerRowClassname, { exact: true });
 });
 
-test('headerRowClass is a string', () => {
+test('headerRowClass is a string', async () => {
   setup({
     columns,
     rows,
     headerRowClass: 'my-header-row'
   });
-  const header = page.getByRole('row').first();
-  expect(header).toHaveClass(`${headerRowClassname} my-header-row`, { exact: true });
+  const header = page.getByRole('row');
+  await expect.element(header).toHaveClass(`${headerRowClassname} my-header-row`, { exact: true });
 });

test/browser/label.test.ts

@@ -1,6 +1,6 @@
 import { getGrid, setup } from './utils';
 
-test('should set label and description', () => {
+test('should set label and description', async () => {
   setup({
     rows: [],
     columns: [],
@@ -12,11 +12,11 @@ test('should set label and description', () => {
     'data-cy': 'cy'
   });
 
-  const grid = getGrid().element();
-  expect(grid).toHaveAttribute('aria-label', 'label');
-  expect(grid).toHaveAttribute('aria-labelledby', 'labelledby');
-  expect(grid).toHaveAttribute('aria-description', 'description');
-  expect(grid).toHaveAttribute('aria-describedby', 'describedby');
-  expect(grid).toHaveAttribute('data-testid', 'testid');
-  expect(grid).toHaveAttribute('data-cy', 'cy');
+  const grid = getGrid();
+  await expect.element(grid).toHaveAttribute('aria-label', 'label');
+  await expect.element(grid).toHaveAttribute('aria-labelledby', 'labelledby');
+  await expect.element(grid).toHaveAttribute('aria-description', 'description');
+  await expect.element(grid).toHaveAttribute('aria-describedby', 'describedby');
+  await expect.element(grid).toHaveAttribute('data-testid', 'testid');
+  await expect.element(grid).toHaveAttribute('data-cy', 'cy');
 });

test/browser/rowClass.test.ts

@@ -1,6 +1,6 @@
 import type { Column } from '../../src';
 import { rowClassname } from '../../src/style/row';
-import { getRows, setup } from './utils';
+import { getRowsNew, setup } from './utils';
 
 interface Row {
   id: number;
@@ -9,38 +9,38 @@ interface Row {
 const columns: readonly Column<Row>[] = [{ key: 'id', name: 'ID' }];
 const rows: readonly Row[] = [{ id: 0 }, { id: 1 }, { id: 2 }];
 
-test('rowClass is undefined', () => {
+test('rowClass is undefined', async () => {
   setup({
     columns,
     rows,
     rowClass: undefined
   });
-  const [row1, row2, row3] = getRows();
-  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 });
+  const [row1, row2, row3] = getRowsNew('0', '1', '2');
+  await expect.element(row1).toHaveClass(`${rowClassname} rdg-row-even`, { exact: true });
+  await expect.element(row2).toHaveClass(`${rowClassname} rdg-row-odd`, { exact: true });
+  await expect.element(row3).toHaveClass(`${rowClassname} rdg-row-even`, { exact: true });
 });
 
-test('rowClass returns a string', () => {
+test('rowClass returns a string', async () => {
   setup({
     columns,
     rows,
     rowClass: (row) => `my-row-${row.id}`
   });
-  const [row1, row2, row3] = getRows();
-  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 });
+  const [row1, row2, row3] = getRowsNew('0', '1', '2');
+  await expect.element(row1).toHaveClass(`${rowClassname} rdg-row-even my-row-0`, { exact: true });
+  await expect.element(row2).toHaveClass(`${rowClassname} rdg-row-odd my-row-1`, { exact: true });
+  await expect.element(row3).toHaveClass(`${rowClassname} rdg-row-even my-row-2`, { exact: true });
 });
 
-test('rowClass returns undefined', () => {
+test('rowClass returns undefined', async () => {
   setup({
     columns,
     rows,
     rowClass: () => undefined
   });
-  const [row1, row2, row3] = getRows();
-  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 });
+  const [row1, row2, row3] = getRowsNew('0', '1', '2');
+  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 });
 });