Skip to content

Commit

Permalink
Rename utils (#3638)
Browse files Browse the repository at this point in the history 
* Rename utils

* Does this fix flaky test

* Use new `getGrid`

* Remove act

* Remove setup

* revert
  • Loading branch information
@amanmahajan7
amanmahajan7 authored Nov 20, 2024
1 parent 69f29e9 commit ea34ae9
Show file tree
Hide file tree
Showing 30 changed files with 554 additions and 555 deletions.
10 changes: 5 additions & 5 deletions test/browser/TextEditor.test.tsx
View file
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
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
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

0 comments on commit ea34ae9

Please sign in to comment.