Skip to content
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

Migrate remaining tests to vitest-browser-react and browserUserEvent #3640

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

Migrate remaining tests to vitest-browser-react and browserUserEvent #3640

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
1d84213
Start migrating remaining tests
amanmahajan7 Nov 21, 2024
120e395
-1
amanmahajan7 Nov 21, 2024
1027683
-1
amanmahajan7 Nov 21, 2024
b0e701d
-1
amanmahajan7 Nov 21, 2024
f4a79b7
Merge branch 'main' into am-migrate-remaining-tests
amanmahajan7 Nov 22, 2024
447d85e
Merge branch 'main' into am-migrate-remaining-tests
amanmahajan7 Nov 22, 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
2 changes: 1 addition & 1 deletion eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -706,7 +706,7 @@ export default [
'testing-library/prefer-explicit-assert': 1,
'testing-library/prefer-find-by': 1,
'testing-library/prefer-implicit-assert': 0,
'testing-library/prefer-presence-queries': 1,
'testing-library/prefer-presence-queries': 0,
'testing-library/prefer-query-by-disappearance': 1,
'testing-library/prefer-query-matchers': 0,
'testing-library/prefer-screen-queries': 0,
Expand Down
174 changes: 87 additions & 87 deletions test/browser/TreeDataGrid.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import { useState } from 'react';
import { render, screen, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { within } from '@testing-library/react';
import { page, userEvent } from '@vitest/browser/context';

import type { Column } from '../../src';
import { SelectColumn, textEditor, TreeDataGrid } from '../../src';
import { focusSinkClassname } from '../../src/style/core';
import { rowSelected } from '../../src/style/row';
import type { PasteEvent } from '../../src/types';
import {
copySelectedCellOld,
copySelectedCell,
getCellsAtRowIndexOld,
getHeaderCellsOld,
getRowsOld,
getSelectedCellOld,
getTreeGridOld,
pasteSelectedCellOld
getHeaderCells,
getRows,
getSelectedCell,
getTreeGrid,

Check failure on line 16 in test/browser/TreeDataGrid.test.tsx

View workflow job for this annotation

GitHub Actions / test (18) 

'"./utils"' has no exported member named 'getTreeGrid'. Did you mean 'getTreeGridOld'?

Check failure on line 16 in test/browser/TreeDataGrid.test.tsx

View workflow job for this annotation

GitHub Actions / test (19) 

'"./utils"' has no exported member named 'getTreeGrid'. Did you mean 'getTreeGridOld'?
pasteSelectedCell
} from './utils';

const rowSelectedClassname = 'rdg-row-selected';
Expand Down Expand Up @@ -132,90 +132,90 @@
}

function setup(groupBy: string[]) {
render(<TestGrid groupBy={groupBy} />);
page.render(<TestGrid groupBy={groupBy} />);
}

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

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

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

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

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

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

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

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

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

test('should set aria-attributes', async () => {
setup(['year', 'country']);

const groupCell1 = screen.getByRole('gridcell', { name: '2020' });
const groupCell1 = page.getByRole('gridcell', { name: '2020' }).element();
const groupRow1 = groupCell1.parentElement!;
expect(groupRow1).toHaveAttribute('aria-level', '1');
expect(groupRow1).toHaveAttribute('aria-setsize', '3');
expect(groupRow1).toHaveAttribute('aria-posinset', '1');
expect(groupRow1).toHaveAttribute('aria-rowindex', '3');
expect(groupRow1).toHaveAttribute('aria-expanded', 'false');

const groupCell2 = screen.getByRole('gridcell', { name: '2021' });
const groupCell2 = page.getByRole('gridcell', { name: '2021' }).element();
const groupRow2 = groupCell2.parentElement!;
expect(groupRow2).toHaveAttribute('aria-level', '1');
expect(groupRow2).toHaveAttribute('aria-setsize', '3');
Expand All @@ -226,7 +226,7 @@
await userEvent.click(groupCell2);
expect(groupRow2).toHaveAttribute('aria-expanded', 'true');

const groupCell3 = screen.getByRole('gridcell', { name: 'Canada' });
const groupCell3 = page.getByRole('gridcell', { name: 'Canada' }).element();
const groupRow3 = groupCell3.parentElement!;
expect(groupRow3).toHaveAttribute('aria-level', '2');
expect(groupRow3).toHaveAttribute('aria-setsize', '2');
Expand All @@ -241,67 +241,67 @@
test('should select rows in a group', async () => {
setup(['year', 'country']);

const headerCheckbox = screen.getByRole('checkbox', { name: 'Select All' });
expect(headerCheckbox).not.toBeChecked();
const headerCheckbox = page.getByRole('checkbox', { name: 'Select All' });
await expect.element(headerCheckbox).not.toBeChecked();

// expand group
const groupCell1 = screen.getByRole('gridcell', { name: '2021' });
const groupCell1 = page.getByRole('gridcell', { name: '2021' }).element();
await userEvent.click(groupCell1);
const groupCell2 = screen.getByRole('gridcell', { name: 'Canada' });
const groupCell2 = page.getByRole('gridcell', { name: 'Canada' }).element();
await userEvent.click(groupCell2);

expect(screen.queryAllByRole('row', { selected: true })).toHaveLength(0);
expect(page.getByRole('row', { selected: true }).all()).toHaveLength(0);

// select parent row
await userEvent.click(
within(groupCell1.parentElement!).getByRole('checkbox', { name: 'Select Group' })
);
let selectedRows = screen.getAllByRole('row', { selected: true });
let selectedRows = page.getByRole('row', { selected: true }).all();
expect(selectedRows).toHaveLength(4);
expect(selectedRows[0]).toHaveAttribute('aria-rowindex', '6');
expect(selectedRows[1]).toHaveAttribute('aria-rowindex', '7');
expect(selectedRows[2]).toHaveAttribute('aria-rowindex', '9');
expect(selectedRows[3]).toHaveAttribute('aria-rowindex', '10');
await expect.element(selectedRows[0]).toHaveAttribute('aria-rowindex', '6');
await expect.element(selectedRows[1]).toHaveAttribute('aria-rowindex', '7');
await expect.element(selectedRows[2]).toHaveAttribute('aria-rowindex', '9');
await expect.element(selectedRows[3]).toHaveAttribute('aria-rowindex', '10');

// unselecting child should unselect the parent row
await userEvent.click(within(selectedRows[3]).getByRole('checkbox', { name: 'Select' }));
selectedRows = screen.getAllByRole('row', { selected: true });
await userEvent.click(selectedRows[3].getByRole('checkbox', { name: 'Select' }));
selectedRows = page.getByRole('row', { selected: true }).all();
expect(selectedRows).toHaveLength(1);
expect(selectedRows[0]).toHaveAttribute('aria-rowindex', '7');
await expect.element(selectedRows[0]).toHaveAttribute('aria-rowindex', '7');

// select child group
const checkbox = within(groupCell2.parentElement!).getByRole('checkbox', {
name: 'Select Group'
});
await userEvent.click(checkbox);
selectedRows = screen.getAllByRole('row', { selected: true });
selectedRows = page.getByRole('row', { selected: true }).all();
expect(selectedRows).toHaveLength(4);

// unselect child group
await userEvent.click(checkbox);
selectedRows = screen.getAllByRole('row', { selected: true });
selectedRows = page.getByRole('row', { selected: true }).all();
expect(selectedRows).toHaveLength(1);

await userEvent.click(screen.getByRole('gridcell', { name: '2020' }));
await userEvent.click(screen.getByRole('gridcell', { name: '2022' }));
await userEvent.click(page.getByRole('gridcell', { name: '2020' }));
await userEvent.click(page.getByRole('gridcell', { name: '2022' }));

await userEvent.click(headerCheckbox);
expect(screen.queryByRole('row', { selected: true })).not.toBeInTheDocument();
await expect.element(page.getByRole('row', { selected: true })).not.toBeInTheDocument();

await userEvent.click(headerCheckbox);
expect(screen.getAllByRole('row', { selected: true })).toHaveLength(8);
expect(page.getByRole('row', { selected: true }).all()).toHaveLength(8);

await userEvent.click(headerCheckbox);
expect(screen.queryByRole('row', { selected: true })).not.toBeInTheDocument();
await expect.element(page.getByRole('row', { selected: true })).not.toBeInTheDocument();
});

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

// expand group
const groupCell1 = screen.getByRole('gridcell', { name: 'USA' });
const groupCell1 = page.getByRole('gridcell', { name: 'USA' });
expect(document.body).toHaveFocus();
expect(focusSink).toHaveAttribute('tabIndex', '-1');
await userEvent.click(groupCell1);
Expand All @@ -324,7 +324,7 @@
expect(focusSink).toHaveFocus();
expect(focusSink).toHaveStyle('grid-row-start:2');
expect(focusSink).toHaveClass(rowSelected);
const groupCell2 = screen.getByRole('gridcell', { name: '2021' });
const groupCell2 = page.getByRole('gridcell', { name: '2021' });
await userEvent.click(groupCell2);
expect(focusSink).toHaveFocus();
expect(focusSink).toHaveAttribute('tabIndex', '0');
Expand All @@ -342,7 +342,7 @@
// if the first cell is selected then arrowleft should select the row
await userEvent.keyboard('{arrowleft}');
expect(getCellsAtRowIndexOld(5)[0]).toHaveAttribute('aria-selected', 'false');
expect(getRowsOld()[4]).toHaveClass(rowSelectedClassname);
await expect.element(getRows()[4]).toHaveClass(rowSelectedClassname);
expect(focusSink).toHaveFocus();

// if the row is selected then arrowright should select the first cell on the same row
Expand All @@ -351,53 +351,53 @@

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

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

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

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

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

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

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

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

test('custom renderGroupCell', () => {
Expand Down
Loading
Loading