Skip to content

Rewrite some tests to reduce flakiness: part 1 #3871

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 21 commits into from
Sep 26, 2025
Merged

Rewrite some tests to reduce flakiness: part 1 #3871

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
7f3a683
Rewrite scrollToCell tests
amanmahajan7 Sep 23, 2025
5f90ce1
Merge branch 'main' into fix-flaky
amanmahajan7 Sep 23, 2025
ed175eb
tweak
amanmahajan7 Sep 23, 2025
370dbd3
-1
amanmahajan7 Sep 23, 2025
b08e391
-1
amanmahajan7 Sep 23, 2025
9f4d616
-1
amanmahajan7 Sep 23, 2025
2336eda
-1
amanmahajan7 Sep 23, 2025
87a273d
-3
amanmahajan7 Sep 23, 2025
11e7fc6
-2
amanmahajan7 Sep 23, 2025
b1e130e
Revert a few changes
amanmahajan7 Sep 23, 2025
aac213d
Fix flaky test
amanmahajan7 Sep 23, 2025
be92fc3
Fix types
amanmahajan7 Sep 23, 2025
a8bc927
Add new utils
amanmahajan7 Sep 23, 2025
7157e11
Fix one test
amanmahajan7 Sep 23, 2025
5bb3da2
check focus and selection
amanmahajan7 Sep 23, 2025
d601c43
Revert 1 change
amanmahajan7 Sep 24, 2025
16077fe
tweak
amanmahajan7 Sep 24, 2025
2719e2b
Check column order
amanmahajan7 Sep 24, 2025
01df2aa
Check exact text
amanmahajan7 Sep 26, 2025
1fd1584
format
amanmahajan7 Sep 26, 2025
f90009c
Tweak 1 test
amanmahajan7 Sep 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 13 additions & 14 deletions test/browser/TextEditor.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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$/);
});
69 changes: 30 additions & 39 deletions test/browser/column/cellClass.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,55 @@
import type { Column } from '../../../src';
import { cellClassname } from '../../../src/style/cell';
import { getCells, setup } from '../utils';
import { getCell, getCells, setup } from '../utils';

interface Row {
id: number;
}

const rows: readonly Row[] = [{ id: 0 }, { id: 1 }];

test('cellClass is undefined', () => {
const columns: readonly Column<Row>[] = [
function getColumns(cellClass?: Column<Row>['cellClass']): readonly Column<Row>[] {
return [
{
key: 'id',
name: 'ID'
name: 'ID',
renderCell: (p) => p.row.id,
cellClass
}
];
}

test('cellClass is undefined', async () => {
const columns = getColumns();
setup({ columns, rows });
const [cell1, cell2] = getCells();
expect(cell1).toHaveClass(cellClassname, { exact: true });
expect(cell2).toHaveClass(cellClassname, { exact: true });
const cell1 = getCell('0');
const cell2 = getCell('1');
await expect.element(cell1).toHaveClass(cellClassname, { exact: true });
await expect.element(cell2).toHaveClass(cellClassname, { exact: true });
});

test('cellClass is a string', () => {
const columns: readonly Column<Row>[] = [
{
key: 'id',
name: 'ID',
cellClass: 'my-cell'
}
];
test('cellClass is a string', async () => {
const columns = getColumns('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 });
const cell1 = getCell('0');
const cell2 = getCell('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', () => {
const columns: readonly Column<Row>[] = [
{
key: 'id',
name: 'ID',
cellClass: (row) => `my-cell-${row.id}`
}
];
test('cellClass returns a string', async () => {
const columns = getColumns((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 });
const cell1 = getCell('0');
const cell2 = getCell('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', () => {
const columns: readonly Column<Row>[] = [
{
key: 'id',
name: 'ID',
cellClass: () => undefined
}
];
test('cellClass returns undefined', async () => {
const columns = getColumns(() => undefined);
setup({ columns, rows });
const [cell1, cell2] = getCells();
expect(cell1).toHaveClass(cellClassname, { exact: true });
expect(cell2).toHaveClass(cellClassname, { exact: true });
await expect.element(cell1).toHaveClass(cellClassname, { exact: true });
await expect.element(cell2).toHaveClass(cellClassname, { exact: true });
});
16 changes: 7 additions & 9 deletions test/browser/headerRowClass.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { page } from '@vitest/browser/context';

import type { Column } from '../../src';
import { headerRowClassname } from '../../src/HeaderRow';
import { setup } from './utils';
import { getRow, setup } from './utils';

interface Row {
id: number;
Expand All @@ -11,22 +9,22 @@ interface Row {
const columns: readonly Column<Row>[] = [{ key: 'id', name: 'ID' }];
const rows: readonly Row[] = [{ id: 0 }];

test('headerRowClass is undefined', () => {
test('headerRowClass is undefined', async () => {
setup({
columns,
rows,
rowClass: undefined
});
const header = page.getByRole('row').first();
expect(header).toHaveClass(headerRowClassname, { exact: true });
const header = getRow('ID');
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 = getRow('ID');
await expect.element(header).toHaveClass(`${headerRowClassname} my-header-row`, { exact: true });
});
16 changes: 8 additions & 8 deletions test/browser/label.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: [],
Expand All @@ -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');
});
40 changes: 23 additions & 17 deletions test/browser/rowClass.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,52 @@
import type { Column } from '../../src';
import { rowClassname } from '../../src/style/row';
import { getRows, setup } from './utils';
import { getRow, setup } from './utils';

interface Row {
id: number;
}

const columns: readonly Column<Row>[] = [{ key: 'id', name: 'ID' }];
const columns: readonly Column<Row>[] = [{ key: 'id', name: 'ID', renderCell: (p) => p.row.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 = getRow('0');
const row2 = getRow('1');
const row3 = getRow('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 = getRow('0');
const row2 = getRow('1');
const row3 = getRow('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 = getRow('0');
const row2 = getRow('1');
const row3 = getRow('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 });
});
Loading