Skip to content

Commit

Permalink
-1
Browse files Browse the repository at this point in the history
  • Loading branch information
@amanmahajan7
amanmahajan7 committed Nov 21, 2024
1 parent 120e395 commit 1027683
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 90 deletions.
8 changes: 4 additions & 4 deletions test/browser/column/renderEditCell.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { page, userEvent } from '@vitest/browser/context';

import DataGrid from '../../../src';
import type { Column, DataGridProps } from '../../../src';
import { getCellsAtRowIndexOld, getGridOld, getSelectedCellOld, scrollGrid } from '../utils';
import { getCellsAtRowIndexOld, getGrid, getSelectedCell, scrollGrid } from '../utils';

interface Row {
col1: number;
Expand Down Expand Up @@ -100,13 +100,13 @@ describe('Editor', () => {
expect(getCellsAtRowIndexOld(0)).toHaveLength(1);
const editor = page.getByRole('spinbutton', { name: 'col1-editor' });
await expect.element(editor).not.toBeInTheDocument();
expect(getGridOld().scrollTop).toBe(2000);
expect(getGrid().element().scrollTop).toBe(2000);
await userEvent.keyboard('123');
await waitFor(() => {
expect(getCellsAtRowIndexOld(0)).toHaveLength(2);
});
await expect.element(editor).toHaveValue(123);
expect(getGridOld().scrollTop).toBe(0);
expect(getGrid().element().scrollTop).toBe(0);
});

describe('editable', () => {
Expand Down Expand Up @@ -238,7 +238,7 @@ describe('Editor', () => {
await scrollGrid({ scrollTop: 1500 });
expect(getCellsAtRowIndexOld(40)[1]).toHaveTextContent(/^40$/);
await userEvent.click(getCellsAtRowIndexOld(40)[1]);
expect(getSelectedCellOld()).toHaveTextContent(/^40$/);
await expect.element(getSelectedCell()).toHaveTextContent(/^40$/);
await scrollGrid({ scrollTop: 0 });
expect(getCellsAtRowIndexOld(0)[1]).toHaveTextContent(/^0abc$/);
});
Expand Down
148 changes: 74 additions & 74 deletions test/browser/keyboardNavigation.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import type { Column } from '../../src';
import DataGrid, { SelectColumn } from '../../src';
import {
getCellsAtRowIndexOld,
getSelectedCellOld,
getSelectedCell,
scrollGrid,
setupOld,
validateCellPositionOld
setup,
validateCellPosition
} from './utils';

type Row = undefined;
Expand All @@ -28,138 +28,138 @@ const columns = [
] as const satisfies Column<Row, Row>[];

test('keyboard navigation', async () => {
setupOld({ columns, rows, topSummaryRows, bottomSummaryRows });
setup({ columns, rows, topSummaryRows, bottomSummaryRows });

// no initial selection
expect(getSelectedCellOld()).not.toBeInTheDocument();
await expect.element(getSelectedCell()).not.toBeInTheDocument();

// tab into the grid
await userEvent.tab();
validateCellPositionOld(0, 0);
validateCellPosition(0, 0);

// tab to the next cell
await userEvent.tab();
validateCellPositionOld(1, 0);
validateCellPosition(1, 0);

// tab back to the previous cell
await userEvent.tab({ shift: true });
validateCellPositionOld(0, 0);
validateCellPosition(0, 0);

// arrow navigation
await userEvent.keyboard('{arrowdown}');
validateCellPositionOld(0, 1);
validateCellPosition(0, 1);
await userEvent.keyboard('{arrowright}');
validateCellPositionOld(1, 1);
validateCellPosition(1, 1);
await userEvent.keyboard('{arrowdown}');
validateCellPositionOld(1, 2);
validateCellPosition(1, 2);
await userEvent.keyboard('{arrowleft}');
validateCellPositionOld(0, 2);
validateCellPosition(0, 2);
await userEvent.keyboard('{arrowup}');
validateCellPositionOld(0, 1);
validateCellPosition(0, 1);
await userEvent.keyboard('{arrowup}');
validateCellPositionOld(0, 0);
validateCellPosition(0, 0);

// page {up,down}
await userEvent.keyboard('{PageDown}');
validateCellPositionOld(0, 26);
validateCellPosition(0, 26);
await userEvent.keyboard('{PageDown}');
validateCellPositionOld(0, 52);
validateCellPosition(0, 52);
await userEvent.keyboard('{PageUp}');
validateCellPositionOld(0, 26);
validateCellPosition(0, 26);

// home/end navigation
await userEvent.keyboard('{end}');
validateCellPositionOld(6, 26);
validateCellPosition(6, 26);
await userEvent.keyboard('{home}');
validateCellPositionOld(0, 26);
validateCellPosition(0, 26);
await userEvent.keyboard('{Control>}{end}');
validateCellPositionOld(6, 103);
validateCellPosition(6, 103);
await userEvent.keyboard('{arrowdown}');
validateCellPositionOld(6, 103);
validateCellPosition(6, 103);
await userEvent.keyboard('{arrowright}');
validateCellPositionOld(6, 103);
validateCellPosition(6, 103);
await userEvent.keyboard('{end}');
validateCellPositionOld(6, 103);
validateCellPosition(6, 103);
await userEvent.keyboard('{Control>}{end}');
validateCellPositionOld(6, 103);
validateCellPosition(6, 103);
await userEvent.keyboard('{PageDown}');
validateCellPositionOld(6, 103);
validateCellPosition(6, 103);
await userEvent.keyboard('{Control>}{home}');
validateCellPositionOld(0, 0);
validateCellPosition(0, 0);
await userEvent.keyboard('{home}');
validateCellPositionOld(0, 0);
validateCellPosition(0, 0);
await userEvent.keyboard('{Control>}{home}');
validateCellPositionOld(0, 0);
validateCellPosition(0, 0);
await userEvent.keyboard('{PageUp}');
validateCellPositionOld(0, 0);
validateCellPosition(0, 0);

// tab at the end of a row selects the first cell on the next row
await userEvent.keyboard('{end}');
await userEvent.tab();
validateCellPositionOld(0, 1);
validateCellPosition(0, 1);

// shift tab should select the last cell of the previous row
await userEvent.tab({ shift: true });
validateCellPositionOld(6, 0);
validateCellPosition(6, 0);
});

test('arrow and tab navigation', async () => {
setupOld({ columns, rows, bottomSummaryRows });
setup({ columns, rows, bottomSummaryRows });

// pressing arrowleft on the leftmost cell does nothing
await userEvent.tab();
await userEvent.keyboard('{arrowdown}');
validateCellPositionOld(0, 1);
validateCellPosition(0, 1);
await userEvent.keyboard('{arrowleft}');
validateCellPositionOld(0, 1);
validateCellPosition(0, 1);

// pressing arrowright on the rightmost cell does nothing
await userEvent.keyboard('{end}');
validateCellPositionOld(6, 1);
validateCellPosition(6, 1);
await userEvent.keyboard('{arrowright}');
validateCellPositionOld(6, 1);
validateCellPosition(6, 1);

// pressing tab on the rightmost cell navigates to the leftmost cell on the next row
await userEvent.tab();
validateCellPositionOld(0, 2);
validateCellPosition(0, 2);

// pressing shift+tab on the leftmost cell navigates to the rightmost cell on the previous row
await userEvent.tab({ shift: true });
validateCellPositionOld(6, 1);
validateCellPosition(6, 1);
});

test('grid enter/exit', async () => {
setupOld({ columns, rows: new Array(5), bottomSummaryRows });
setup({ columns, rows: new Array(5), bottomSummaryRows });

// no initial selection
expect(getSelectedCellOld()).not.toBeInTheDocument();
await expect.element(getSelectedCell()).not.toBeInTheDocument();

// tab into the grid
await userEvent.tab();
validateCellPositionOld(0, 0);
validateCellPosition(0, 0);

// shift+tab tabs out of the grid if we are at the first cell
await userEvent.tab({ shift: true });
expect(document.body).toHaveFocus();

await userEvent.tab();
validateCellPositionOld(0, 0);
validateCellPosition(0, 0);

await userEvent.keyboard('{arrowdown}{arrowdown}');
validateCellPositionOld(0, 2);
validateCellPosition(0, 2);

// tab should select the last selected cell
// click outside the grid
await userEvent.click(document.body);
await userEvent.tab();
await userEvent.keyboard('{arrowdown}');
validateCellPositionOld(0, 3);
validateCellPosition(0, 3);

// shift+tab should select the last selected cell
await userEvent.click(document.body);
await userEvent.tab({ shift: true });
await userEvent.keyboard('{arrowup}');
validateCellPositionOld(0, 2);
validateCellPosition(0, 2);

// tab tabs out of the grid if we are at the last cell
await userEvent.keyboard('{Control>}{end}');
Expand All @@ -168,21 +168,21 @@ test('grid enter/exit', async () => {
});

test('navigation with focusable cell renderer', async () => {
setupOld({ columns, rows: new Array(1), bottomSummaryRows });
setup({ columns, rows: new Array(1), bottomSummaryRows });
await userEvent.tab();
await userEvent.keyboard('{arrowdown}');
validateCellPositionOld(0, 1);
validateCellPosition(0, 1);

// cell should not set tabIndex to 0 if it contains a focusable cell renderer
expect(getSelectedCellOld()).toHaveAttribute('tabIndex', '-1');
const checkbox = getSelectedCellOld()!.querySelector('input');
await expect.element(getSelectedCell()).toHaveAttribute('tabIndex', '-1');
const checkbox = getSelectedCell().getByRole('checkbox').element();
expect(checkbox).toHaveFocus();
expect(checkbox).toHaveAttribute('tabIndex', '0');

await userEvent.tab();
validateCellPositionOld(1, 1);
validateCellPosition(1, 1);
// cell should set tabIndex to 0 if it does not have focusable cell renderer
expect(getSelectedCellOld()).toHaveAttribute('tabIndex', '0');
await expect.element(getSelectedCell()).toHaveAttribute('tabIndex', '0');
});

test('navigation when header and summary rows have focusable elements', async () => {
Expand All @@ -209,7 +209,7 @@ test('navigation when header and summary rows have focusable elements', async ()
}
];

setupOld({ columns, rows: new Array(2), bottomSummaryRows });
setup({ columns, rows: new Array(2), bottomSummaryRows });
await userEvent.tab();

// should set focus on the header filter
Expand All @@ -219,7 +219,7 @@ test('navigation when header and summary rows have focusable elements', async ()
expect(document.getElementById('header-filter2')).toHaveFocus();

await userEvent.tab();
validateCellPositionOld(0, 1);
validateCellPosition(0, 1);

await userEvent.tab({ shift: true });
expect(document.getElementById('header-filter2')).toHaveFocus();
Expand All @@ -230,7 +230,7 @@ test('navigation when header and summary rows have focusable elements', async ()
await userEvent.tab();
await userEvent.tab();
await userEvent.keyboard('{Control>}{end}{arrowup}{arrowup}');
validateCellPositionOld(1, 2);
validateCellPosition(1, 2);

await userEvent.tab();
expect(document.getElementById('summary-1')).toHaveFocus();
Expand All @@ -240,40 +240,40 @@ test('navigation when header and summary rows have focusable elements', async ()

await userEvent.tab({ shift: true });
await userEvent.tab({ shift: true });
validateCellPositionOld(1, 2);
expect(getSelectedCellOld()).toHaveFocus();
validateCellPosition(1, 2);
await expect.element(getSelectedCell()).toHaveFocus();
});

test('navigation when selected cell not in the viewport', async () => {
const columns: Column<Row, Row>[] = [SelectColumn];
for (let i = 0; i < 99; i++) {
columns.push({ key: `col${i}`, name: `col${i}`, frozen: i < 5 });
}
setupOld({ columns, rows, bottomSummaryRows });
setup({ columns, rows, bottomSummaryRows });
await userEvent.tab();
validateCellPositionOld(0, 0);
validateCellPosition(0, 0);

await userEvent.keyboard('{Control>}{end}{arrowup}{arrowup}');
validateCellPositionOld(99, 100);
validateCellPosition(99, 100);
expect(getCellsAtRowIndexOld(100)).not.toHaveLength(1);

await scrollGrid({ scrollTop: 0 });
expect(getCellsAtRowIndexOld(99)).toHaveLength(1);
await userEvent.keyboard('{arrowup}');
validateCellPositionOld(99, 99);
validateCellPosition(99, 99);
expect(getCellsAtRowIndexOld(99)).not.toHaveLength(1);

await scrollGrid({ scrollLeft: 0 });
await userEvent.keyboard('{arrowdown}');
validateCellPositionOld(99, 100);
validateCellPosition(99, 100);

await userEvent.keyboard(
'{home}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}'
);
validateCellPositionOld(7, 100);
validateCellPosition(7, 100);
await scrollGrid({ scrollLeft: 2000 });
await userEvent.keyboard('{arrowleft}');
validateCellPositionOld(6, 100);
validateCellPosition(6, 100);
});

test('reset selected cell when column is removed', async () => {
Expand All @@ -291,11 +291,11 @@ test('reset selected cell when column is removed', async () => {

await userEvent.tab();
await userEvent.keyboard('{arrowdown}{arrowright}');
validateCellPositionOld(1, 1);
validateCellPosition(1, 1);

rerender(<Test columns={[columns[0]]} />);

expect(getSelectedCellOld()).not.toBeInTheDocument();
await expect.element(getSelectedCell()).not.toBeInTheDocument();
});

test('reset selected cell when row is removed', async () => {
Expand All @@ -313,25 +313,25 @@ test('reset selected cell when row is removed', async () => {

await userEvent.tab();
await userEvent.keyboard('{arrowdown}{arrowdown}{arrowright}');
validateCellPositionOld(1, 2);
validateCellPosition(1, 2);

rerender(<Test rows={[rows[0]]} />);

expect(getSelectedCellOld()).not.toBeInTheDocument();
await expect.element(getSelectedCell()).not.toBeInTheDocument();
});

test('should not change the left and right arrow behavior for right to left languages', async () => {
setupOld({ rows, columns, direction: 'rtl' });
setup({ rows, columns, direction: 'rtl' });
await userEvent.tab();
validateCellPositionOld(0, 0);
validateCellPosition(0, 0);
await userEvent.tab();
validateCellPositionOld(1, 0);
validateCellPosition(1, 0);
await userEvent.keyboard('{arrowright}');
validateCellPositionOld(0, 0);
validateCellPosition(0, 0);
await userEvent.keyboard('{arrowright}');
validateCellPositionOld(0, 0);
validateCellPosition(0, 0);
await userEvent.keyboard('{arrowleft}');
validateCellPositionOld(1, 0);
validateCellPosition(1, 0);
await userEvent.keyboard('{arrowleft}');
validateCellPositionOld(2, 0);
validateCellPosition(2, 0);
});
Loading

0 comments on commit 1027683

Please sign in to comment.