Skip to content

Rewrite some tests to reduce flakiness: part 2 #3878

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 6 commits into from
Oct 1, 2025
Merged

Rewrite some tests to reduce flakiness: part 2 #3878

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
769a04a
-1
amanmahajan7 Sep 27, 2025
667d224
Merge branch 'main' into flaky-test-2
amanmahajan7 Sep 29, 2025
eb98c12
-1
amanmahajan7 Sep 29, 2025
9df268d
Use locators for `validateCellPosition`
amanmahajan7 Sep 30, 2025
049b45b
Use `commands.scrollGrid`
amanmahajan7 Oct 1, 2025
38d0783
-1
amanmahajan7 Oct 1, 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
72 changes: 36 additions & 36 deletions test/browser/column/colSpan.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,78 +96,78 @@ describe('colSpan', () => {
setupColSpanGrid();
// header row
await userEvent.click(getHeaderCells()[7]);
validateCellPosition(7, 0);
await validateCellPosition(7, 0);
await userEvent.keyboard('{arrowright}');
validateCellPosition(8, 0);
await validateCellPosition(8, 0);
await userEvent.keyboard('{arrowright}');
validateCellPosition(11, 0);
await validateCellPosition(11, 0);
await userEvent.keyboard('{arrowright}');
validateCellPosition(12, 0);
await validateCellPosition(12, 0);
await userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}');
validateCellPosition(7, 0);
await validateCellPosition(7, 0);

// top summary rows
await userEvent.click(getCellsAtRowIndex(0)[6]);
validateCellPosition(6, 1);
await validateCellPosition(6, 1);
await userEvent.keyboard('{arrowright}');
validateCellPosition(7, 1);
await validateCellPosition(7, 1);
await userEvent.keyboard('{arrowright}');
validateCellPosition(9, 1);
await validateCellPosition(9, 1);
await userEvent.keyboard('{arrowright}');
validateCellPosition(10, 1);
await validateCellPosition(10, 1);
await userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}');
validateCellPosition(6, 1);
await validateCellPosition(6, 1);

// viewport rows
await userEvent.click(getCellsAtRowIndex(3)[1]);
validateCellPosition(1, 4);
await validateCellPosition(1, 4);
await userEvent.keyboard('{arrowright}');
validateCellPosition(2, 4);
await validateCellPosition(2, 4);
await userEvent.keyboard('{arrowright}');
validateCellPosition(3, 4);
await validateCellPosition(3, 4);
await userEvent.keyboard('{arrowdown}');
validateCellPosition(2, 5);
await validateCellPosition(2, 5);
await userEvent.keyboard('{arrowleft}');
validateCellPosition(1, 5);
await validateCellPosition(1, 5);
await userEvent.keyboard('{arrowright}');
validateCellPosition(2, 5);
await validateCellPosition(2, 5);
await userEvent.keyboard('{arrowright}');
validateCellPosition(5, 5);
await validateCellPosition(5, 5);
await userEvent.keyboard('{arrowleft}');
validateCellPosition(2, 5);
await validateCellPosition(2, 5);
await userEvent.keyboard('{arrowdown}');
validateCellPosition(2, 6);
await validateCellPosition(2, 6);
await userEvent.keyboard('{arrowdown}{arrowdown}');
validateCellPosition(0, 8);
await validateCellPosition(0, 8);
await userEvent.keyboard('{arrowLeft}');
validateCellPosition(0, 8);
await validateCellPosition(0, 8);
await userEvent.keyboard('{arrowright}');
validateCellPosition(5, 8);
await validateCellPosition(5, 8);
await userEvent.tab({ shift: true });
await userEvent.tab({ shift: true });
validateCellPosition(14, 7);
await validateCellPosition(14, 7);
await userEvent.tab();
validateCellPosition(0, 8);
await validateCellPosition(0, 8);
await userEvent.click(getCellsAtRowIndex(10)[11]);
validateCellPosition(11, 11);
await validateCellPosition(11, 11);
await userEvent.tab();
validateCellPosition(12, 11);
await validateCellPosition(12, 11);
await userEvent.tab();
validateCellPosition(0, 12);
await validateCellPosition(0, 12);
await userEvent.tab({ shift: true });
validateCellPosition(12, 11);
await validateCellPosition(12, 11);

// bottom summary rows
await userEvent.click(getCellsAtRowIndex(12)[6]);
validateCellPosition(6, 13);
await validateCellPosition(6, 13);
await userEvent.keyboard('{arrowright}');
validateCellPosition(7, 13);
await validateCellPosition(7, 13);
await userEvent.keyboard('{arrowright}');
validateCellPosition(9, 13);
await validateCellPosition(9, 13);
await userEvent.keyboard('{arrowright}');
validateCellPosition(10, 13);
await validateCellPosition(10, 13);
await userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}');
validateCellPosition(6, 13);
await validateCellPosition(6, 13);
});

it('should scroll to the merged cell when selected', async () => {
Expand All @@ -182,13 +182,13 @@ describe('colSpan', () => {
testScrollIntoView();
await navigate(1);
testScrollIntoView(); // should bring the merged cell into view
validateCellPosition(27, 11);
await validateCellPosition(27, 11);
await navigate(7);
testScrollIntoView();
validateCellPosition(6, 12); // should navigate to the next row
await validateCellPosition(6, 12); // should navigate to the next row
await navigate(7, true);
testScrollIntoView();
validateCellPosition(27, 11); // should navigate to the previous row
await validateCellPosition(27, 11); // should navigate to the previous row
await navigate(27);
testScrollIntoView();
await navigate(1);
Expand Down
72 changes: 36 additions & 36 deletions test/browser/column/grouping.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,86 +254,86 @@ test('keyboard navigation', async () => {
await expect.element(getSelectedCell()).not.toBeInTheDocument();

await tabIntoGrid();
validateCellPosition(0, 3);
await validateCellPosition(0, 3);

// arrow navigation
await userEvent.keyboard('{arrowup}');
validateCellPosition(0, 3);
await validateCellPosition(0, 3);
await userEvent.keyboard('{arrowright}');
validateCellPosition(1, 3);
await validateCellPosition(1, 3);
await userEvent.keyboard('{arrowup}');
validateCellPosition(1, 2);
await validateCellPosition(1, 2);
await userEvent.keyboard('{arrowup}');
validateCellPosition(1, 2);
await validateCellPosition(1, 2);
await userEvent.keyboard('{arrowleft}');
validateCellPosition(0, 3);
await validateCellPosition(0, 3);
await userEvent.keyboard('{arrowright}{arrowright}');
validateCellPosition(2, 3);
await validateCellPosition(2, 3);
await userEvent.keyboard('{arrowup}');
validateCellPosition(1, 2);
await validateCellPosition(1, 2);
await userEvent.keyboard('{arrowdown}');
validateCellPosition(1, 3);
await validateCellPosition(1, 3);
await userEvent.keyboard('{arrowright}{arrowright}');
validateCellPosition(3, 3);
await validateCellPosition(3, 3);
await userEvent.keyboard('{arrowright}');
validateCellPosition(4, 3);
await validateCellPosition(4, 3);
await userEvent.keyboard('{arrowdown}');
validateCellPosition(4, 4);
await validateCellPosition(4, 4);
await userEvent.keyboard('{arrowup}');
validateCellPosition(4, 3);
await validateCellPosition(4, 3);
await userEvent.keyboard('{arrowup}');
validateCellPosition(4, 2);
await validateCellPosition(4, 2);
await userEvent.keyboard('{arrowup}');
validateCellPosition(4, 1);
await validateCellPosition(4, 1);
await userEvent.keyboard('{arrowup}');
validateCellPosition(4, 0);
await validateCellPosition(4, 0);
await userEvent.keyboard('{arrowdown}');
validateCellPosition(4, 1);
await validateCellPosition(4, 1);
await userEvent.keyboard('{arrowright}');
validateCellPosition(5, 3);
await validateCellPosition(5, 3);
await userEvent.keyboard('{arrowleft}');
validateCellPosition(4, 3);
await validateCellPosition(4, 3);
await userEvent.keyboard('{arrowup}');
validateCellPosition(4, 2);
await validateCellPosition(4, 2);
await userEvent.keyboard('{arrowright}');
validateCellPosition(5, 3);
await validateCellPosition(5, 3);
await userEvent.keyboard('{arrowright}');
validateCellPosition(6, 3);
await validateCellPosition(6, 3);
await userEvent.keyboard('{arrowright}');
validateCellPosition(7, 3);
await validateCellPosition(7, 3);
await userEvent.keyboard('{arrowup}');
validateCellPosition(7, 2);
await validateCellPosition(7, 2);
await userEvent.keyboard('{arrowup}');
validateCellPosition(4, 0);
await validateCellPosition(4, 0);
await userEvent.keyboard('{arrowright}');
validateCellPosition(8, 0);
await validateCellPosition(8, 0);
await userEvent.keyboard('{arrowleft}');
validateCellPosition(4, 0);
await validateCellPosition(4, 0);

// home/end navigation
await userEvent.keyboard('{home}');
validateCellPosition(0, 3);
await validateCellPosition(0, 3);
await userEvent.keyboard('{end}');
validateCellPosition(11, 3);
await validateCellPosition(11, 3);
await userEvent.keyboard('{arrowleft}');
validateCellPosition(10, 3);
await validateCellPosition(10, 3);

// tab navigation
await userEvent.tab();
validateCellPosition(11, 3);
await validateCellPosition(11, 3);
await userEvent.tab({ shift: true });
await userEvent.tab({ shift: true });
await userEvent.tab({ shift: true });
validateCellPosition(8, 3);
await validateCellPosition(8, 3);
await userEvent.keyboard('{arrowup}');
await userEvent.tab({ shift: true });
validateCellPosition(4, 0);
await validateCellPosition(4, 0);
await userEvent.tab();
validateCellPosition(8, 0);
await validateCellPosition(8, 0);

await userEvent.keyboard('{home}{end}');
await userEvent.tab();
validateCellPosition(0, 4);
await validateCellPosition(0, 4);
await userEvent.tab({ shift: true });
validateCellPosition(11, 3);
await validateCellPosition(11, 3);
});
10 changes: 5 additions & 5 deletions test/browser/column/name.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { Column } from '../../../src';
import { getHeaderCells, setup } from '../utils';
import { getHeaderCellsNew, setup } 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';
}
Expand All @@ -18,7 +18,7 @@ test('name is either a string or an element', () => {
];

setup({ columns, rows: [] });
const [cell1, cell2] = getHeaderCells();
expect(cell1).toHaveTextContent('ID');
expect(cell2).toHaveTextContent('Fancy');
const [cell1, cell2] = getHeaderCellsNew('ID', 'Fancy');
await expect.element(cell1).toBeVisible();
await expect.element(cell2).toBeVisible();
});
14 changes: 9 additions & 5 deletions test/browser/column/renderEditCell.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { commands, page, userEvent } from '@vitest/browser/context';

import { DataGrid } from '../../../src';
import type { Column, DataGridProps } from '../../../src';
import { getCell, getCellsAtRowIndex, getGrid, getSelectedCell, scrollGrid } from '../utils';
import { getCell, getCellsAtRowIndex, getGrid, getSelectedCell } from '../utils';

interface Row {
col1: number;
Expand Down Expand Up @@ -94,15 +94,19 @@ describe('Editor', () => {

page.render(<EditorTest gridRows={rows} />);
await userEvent.click(getCellsAtRowIndex(0)[0]);
expect(getCellsAtRowIndex(0)).toHaveLength(2);
await scrollGrid({ scrollTop: 2000 });
expect(getCellsAtRowIndex(0)).toHaveLength(1);
const selectedRowCells = page
.getByRole('row')
.filter({ has: getSelectedCell() })
.getByRole('gridcell');
await expect.poll(() => selectedRowCells.elements().length).toBe(2);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

    await expect.element(selectedRowCells).toHaveLength(2);

v4 will support this

await commands.scrollGrid({ scrollTop: 2000 });
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably best to use playwright API. I had to tweak the value in v4
https://github.com/Comcast/react-data-grid/pull/3867/files#diff-8f5b89bd3c240b6815c27e36ccb58f6502796f81b1c801bb70b41d9292413472R98

await expect.poll(() => selectedRowCells.elements().length).toBe(1);
const editor = page.getByRole('spinbutton', { name: 'col1-editor' });
await expect.element(editor).not.toBeInTheDocument();
expect(getGrid().element().scrollTop).toBe(2000);
// TODO: await userEvent.keyboard('123'); fails in FF
await userEvent.keyboard('{enter}123');
expect(getCellsAtRowIndex(0)).toHaveLength(2);
await expect.poll(() => selectedRowCells.elements().length).toBe(2);
await expect.element(editor).toHaveValue(123);
expect(getGrid().element().scrollTop).toBe(0);
});
Expand Down
Loading