Skip to content

Fix flaky tests #3639

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
amanmahajan7 merged 9 commits into from
Nov 20, 2024
Merged

Fix flaky tests #3639

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
00f6eef
Rename utils
amanmahajan7 Nov 19, 2024
4c9cf1c
Does this fix flaky test
amanmahajan7 Nov 19, 2024
cd0a84c
Use new `getGrid`
amanmahajan7 Nov 19, 2024
292793b
Remove act
amanmahajan7 Nov 19, 2024
1933b86
Remove setup
amanmahajan7 Nov 19, 2024
2db06ad
revert
amanmahajan7 Nov 19, 2024
2e24816
Fix flaky tests
amanmahajan7 Nov 20, 2024
8153854
Merge branch 'main' into am-fix-drag-fill-tests
amanmahajan7 Nov 20, 2024
bee26f3
Update vitest.workspace.ts
amanmahajan7 Nov 20, 2024
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
10 changes: 5 additions & 5 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,7 @@ import { page, userEvent } from '@vitest/browser/context';

import DataGrid, { textEditor } from '../../src';
import type { Column } from '../../src';
import { getCellsNew } from './utils';
import { getCells } from './utils';

interface Row {
readonly name: string;
Expand All @@ -30,7 +30,7 @@ function Test() {
test('TextEditor', async () => {
page.render(<Test />);

await userEvent.dblClick(getCellsNew()[0]);
await userEvent.dblClick(getCells()[0]);
let input = page.getByRole('textbox').element() as HTMLInputElement;
expect(input).toHaveClass('rdg-text-editor');
// input value is row[column.key]
Expand All @@ -44,13 +44,13 @@ test('TextEditor', async () => {
// pressing escape closes the editor without committing
await userEvent.keyboard('Test{escape}');
expect(input).not.toBeInTheDocument();
await expect.element(getCellsNew()[0]).toHaveTextContent(/^Tacitus Kilgore$/);
await expect.element(getCells()[0]).toHaveTextContent(/^Tacitus Kilgore$/);

// blurring the input closes and commits the editor
await userEvent.dblClick(getCellsNew()[0]);
await userEvent.dblClick(getCells()[0]);
input = page.getByRole('textbox').element() as HTMLInputElement;
await userEvent.fill(input, 'Jim Milton');
await userEvent.tab();
expect(input).not.toBeInTheDocument();
await expect.element(getCellsNew()[0]).toHaveTextContent(/^Jim Milton$/);
await expect.element(getCells()[0]).toHaveTextContent(/^Jim Milton$/);
});
106 changes: 53 additions & 53 deletions test/browser/TreeDataGrid.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ import { focusSinkClassname } from '../../src/style/core';
import { rowSelected } from '../../src/style/row';
import type { PasteEvent } from '../../src/types';
import {
copySelectedCell,
getCellsAtRowIndex,
getHeaderCells,
getRows,
getSelectedCell,
getTreeGrid,
pasteSelectedCell
copySelectedCellOld,
getCellsAtRowIndexOld,
getHeaderCellsOld,
getRowsOld,
getSelectedCellOld,
getTreeGridOld,
pasteSelectedCellOld
} from './utils';

const rowSelectedClassname = 'rdg-row-selected';
Expand Down Expand Up @@ -136,72 +136,72 @@ function setup(groupBy: string[]) {
}

function getHeaderCellsContent() {
return getHeaderCells().map((cell) => cell.textContent);
return getHeaderCellsOld().map((cell) => cell.textContent);
}

test('should not group if groupBy is empty', () => {
setup([]);
expect(getTreeGrid()).toHaveAttribute('aria-rowcount', '7');
expect(getTreeGridOld()).toHaveAttribute('aria-rowcount', '7');
expect(getHeaderCellsContent()).toStrictEqual(['', 'Sport', 'Country', 'Year', 'Id']);
expect(getRows()).toHaveLength(6);
expect(getRowsOld()).toHaveLength(6);
});

test('should not group if column does not exist', () => {
setup(['abc']);
expect(getTreeGrid()).toHaveAttribute('aria-rowcount', '7');
expect(getRows()).toHaveLength(6);
expect(getTreeGridOld()).toHaveAttribute('aria-rowcount', '7');
expect(getRowsOld()).toHaveLength(6);
});

test('should group by single column', () => {
setup(['country']);
expect(getTreeGrid()).toHaveAttribute('aria-rowcount', '9');
expect(getTreeGridOld()).toHaveAttribute('aria-rowcount', '9');
expect(getHeaderCellsContent()).toStrictEqual(['', 'Country', 'Sport', 'Year', 'Id']);
expect(getRows()).toHaveLength(4);
expect(getRowsOld()).toHaveLength(4);
});

test('should group by multiple columns', () => {
setup(['country', 'year']);
expect(getTreeGrid()).toHaveAttribute('aria-rowcount', '13');
expect(getTreeGridOld()).toHaveAttribute('aria-rowcount', '13');
expect(getHeaderCellsContent()).toStrictEqual(['', 'Country', 'Year', 'Sport', 'Id']);
expect(getRows()).toHaveLength(4);
expect(getRowsOld()).toHaveLength(4);
});

test('should ignore duplicate groupBy columns', () => {
setup(['year', 'year', 'year']);
expect(getTreeGrid()).toHaveAttribute('aria-rowcount', '10');
expect(getRows()).toHaveLength(5);
expect(getTreeGridOld()).toHaveAttribute('aria-rowcount', '10');
expect(getRowsOld()).toHaveLength(5);
});

test('should use groupBy order while grouping', () => {
setup(['year', 'country']);
expect(getTreeGrid()).toHaveAttribute('aria-rowcount', '14');
expect(getTreeGridOld()).toHaveAttribute('aria-rowcount', '14');
expect(getHeaderCellsContent()).toStrictEqual(['', 'Year', 'Country', 'Sport', 'Id']);
expect(getRows()).toHaveLength(5);
expect(getRowsOld()).toHaveLength(5);
});

test('should toggle group when group cell is clicked', async () => {
setup(['year']);
expect(getRows()).toHaveLength(5);
expect(getRowsOld()).toHaveLength(5);
const groupCell = screen.getByRole('gridcell', { name: '2021' });
await userEvent.click(groupCell);
expect(getRows()).toHaveLength(7);
expect(getRowsOld()).toHaveLength(7);
await userEvent.click(groupCell);
expect(getRows()).toHaveLength(5);
expect(getRowsOld()).toHaveLength(5);
});

test('should toggle group using keyboard', async () => {
setup(['year']);
expect(getRows()).toHaveLength(5);
expect(getRowsOld()).toHaveLength(5);
const groupCell = screen.getByRole('gridcell', { name: '2021' });
await userEvent.click(groupCell);
expect(getRows()).toHaveLength(7);
expect(getRowsOld()).toHaveLength(7);
// clicking on the group cell selects the row
expect(getSelectedCell()).toBeNull();
expect(getRows()[2]).toHaveClass(rowSelectedClassname);
expect(getSelectedCellOld()).toBeNull();
expect(getRowsOld()[2]).toHaveClass(rowSelectedClassname);
await userEvent.keyboard('{arrowright}{arrowright}{enter}');
expect(getRows()).toHaveLength(5);
expect(getRowsOld()).toHaveLength(5);
await userEvent.keyboard('{enter}');
expect(getRows()).toHaveLength(7);
expect(getRowsOld()).toHaveLength(7);
});

test('should set aria-attributes', async () => {
Expand Down Expand Up @@ -297,7 +297,7 @@ test('should select rows in a group', async () => {

test('cell navigation in a treegrid', async () => {
setup(['country', 'year']);
expect(getRows()).toHaveLength(4);
expect(getRowsOld()).toHaveLength(4);
const focusSink = document.querySelector(`.${focusSinkClassname}`);

// expand group
Expand Down Expand Up @@ -330,78 +330,78 @@ test('cell navigation in a treegrid', async () => {
expect(focusSink).toHaveAttribute('tabIndex', '0');

// select cell
await userEvent.click(getCellsAtRowIndex(5)[1]);
expect(getCellsAtRowIndex(5)[1]).toHaveAttribute('aria-selected', 'true');
await userEvent.click(getCellsAtRowIndexOld(5)[1]);
expect(getCellsAtRowIndexOld(5)[1]).toHaveAttribute('aria-selected', 'true');
expect(focusSink).toHaveAttribute('tabIndex', '-1');

// select the previous cell
await userEvent.keyboard('{arrowleft}');
expect(getCellsAtRowIndex(5)[1]).toHaveAttribute('aria-selected', 'false');
expect(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'true');
expect(getCellsAtRowIndexOld(5)[1]).toHaveAttribute('aria-selected', 'false');
expect(getCellsAtRowIndexOld(5)[0]).toHaveAttribute('aria-selected', 'true');

// if the first cell is selected then arrowleft should select the row
await userEvent.keyboard('{arrowleft}');
expect(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'false');
expect(getRows()[4]).toHaveClass(rowSelectedClassname);
expect(getCellsAtRowIndexOld(5)[0]).toHaveAttribute('aria-selected', 'false');
expect(getRowsOld()[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(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'true');
expect(getCellsAtRowIndexOld(5)[0]).toHaveAttribute('aria-selected', 'true');

await userEvent.keyboard('{arrowleft}{arrowup}');

expect(getRows()).toHaveLength(7);
expect(getRowsOld()).toHaveLength(7);

// left arrow should collapse the group
await userEvent.keyboard('{arrowleft}');
expect(getRows()).toHaveLength(6);
expect(getRowsOld()).toHaveLength(6);

// right arrow should expand the group
await userEvent.keyboard('{arrowright}');
expect(getRows()).toHaveLength(7);
expect(getRowsOld()).toHaveLength(7);

// left arrow on a collapsed group should select the parent group
expect(getRows()[1]).not.toHaveClass(rowSelectedClassname);
expect(getRowsOld()[1]).not.toHaveClass(rowSelectedClassname);
await userEvent.keyboard('{arrowleft}{arrowleft}');
expect(getRows()[1]).toHaveClass(rowSelectedClassname);
expect(getRowsOld()[1]).toHaveClass(rowSelectedClassname);

await userEvent.keyboard('{end}');
expect(getRows()[5]).toHaveClass(rowSelectedClassname);
expect(getRowsOld()[5]).toHaveClass(rowSelectedClassname);

await userEvent.keyboard('{home}');
expect(screen.getAllByRole('row')[0]).toHaveClass(rowSelectedClassname);

// collpase parent group
await userEvent.keyboard('{arrowdown}{arrowdown}{arrowleft}');
expect(screen.queryByRole('gridcell', { name: '2021' })).not.toBeInTheDocument();
expect(getRows()).toHaveLength(4);
expect(getRowsOld()).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 copySelectedCell();
expect(getSelectedCell()).toHaveClass('rdg-cell-copied');
await copySelectedCellOld();
expect(getSelectedCellOld()).toHaveClass('rdg-cell-copied');
await userEvent.keyboard('{arrowdown}');
expect(getSelectedCell()).toHaveTextContent('Canada');
await pasteSelectedCell();
expect(getSelectedCell()).toHaveTextContent('USA');
expect(getSelectedCellOld()).toHaveTextContent('Canada');
await pasteSelectedCellOld();
expect(getSelectedCellOld()).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.keyboard('{arrowright}{arrowright}');
expect(getSelectedCell()).toHaveTextContent('value: 2');
expect(getSelectedCellOld()).toHaveTextContent('value: 2');
await userEvent.click(screen.getByRole('button', { name: 'value: 2' }));
expect(getSelectedCell()).toHaveTextContent('value: 12');
expect(getSelectedCellOld()).toHaveTextContent('value: 12');
});

test('custom renderGroupCell', () => {
setup(['country']);
expect(getCellsAtRowIndex(1)[4]).toHaveTextContent('1');
expect(getCellsAtRowIndex(4)[4]).toHaveTextContent('3');
expect(getCellsAtRowIndexOld(1)[4]).toHaveTextContent('1');
expect(getCellsAtRowIndexOld(4)[4]).toHaveTextContent('3');
});
18 changes: 9 additions & 9 deletions test/browser/column/cellClass.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { Column } from '../../../src';
import { cellClassname } from '../../../src/style/cell';
import { getCellsNew, setupNew } from '../utils';
import { getCells, setup } from '../utils';

interface Row {
id: number;
Expand All @@ -15,8 +15,8 @@ test('cellClass is undefined', async () => {
name: 'ID'
}
];
setupNew({ columns, rows });
const [cell1, cell2] = getCellsNew();
setup({ columns, rows });
const [cell1, cell2] = getCells();
await expect.element(cell1).toHaveClass(cellClassname, { exact: true });
await expect.element(cell2).toHaveClass(cellClassname, { exact: true });
});
Expand All @@ -29,8 +29,8 @@ test('cellClass is a string', async () => {
cellClass: 'my-cell'
}
];
setupNew({ columns, rows });
const [cell1, cell2] = getCellsNew();
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 });
});
Expand All @@ -43,8 +43,8 @@ test('cellClass returns a string', async () => {
cellClass: (row) => `my-cell-${row.id}`
}
];
setupNew({ columns, rows });
const [cell1, cell2] = getCellsNew();
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 });
});
Expand All @@ -57,8 +57,8 @@ test('cellClass returns undefined', async () => {
cellClass: () => undefined
}
];
setupNew({ columns, rows });
const [cell1, cell2] = getCellsNew();
setup({ columns, rows });
const [cell1, cell2] = getCells();
await expect.element(cell1).toHaveClass(cellClassname, { exact: true });
await expect.element(cell2).toHaveClass(cellClassname, { exact: true });
});
Loading