Skip to content

Commit a80e036

Browse files
nstepiennstepien
authored
add safeTab(), fail test when page focus is lost (#3983)
* add `safeTab()`, fail test when page focus is lost * do-while * try a safer `scrollGrid()`
1 parent 8b8ba00 commit a80e036

File tree

11 files changed

+154
-57
lines changed

11 files changed

+154
-57
lines changed

‎test/browser/column/colSpan.test.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { page, userEvent } from 'vitest/browser';
22

33
import type { Column } from '../../../src';
4-
import { getCellsAtRowIndex, setup, validateCellPosition } from '../utils';
4+
import { getCellsAtRowIndex, safeTab, setup, validateCellPosition } from '../utils';
55

66
const headerCells = page.getHeaderCell();
77

@@ -145,18 +145,18 @@ describe('colSpan', () => {
145145
await validateCellPosition(0, 8);
146146
await userEvent.keyboard('{arrowright}');
147147
await validateCellPosition(5, 8);
148-
await userEvent.tab({ shift: true });
149-
await userEvent.tab({ shift: true });
148+
await safeTab(true);
149+
await safeTab(true);
150150
await validateCellPosition(14, 7);
151-
await userEvent.tab();
151+
await safeTab();
152152
await validateCellPosition(0, 8);
153153
await userEvent.click(getCellsAtRowIndex(10).nth(11));
154154
await validateCellPosition(11, 11);
155-
await userEvent.tab();
155+
await safeTab();
156156
await validateCellPosition(12, 11);
157-
await userEvent.tab();
157+
await safeTab();
158158
await validateCellPosition(0, 12);
159-
await userEvent.tab({ shift: true });
159+
await safeTab(true);
160160
await validateCellPosition(12, 11);
161161

162162
// bottom summary rows
@@ -198,7 +198,7 @@ describe('colSpan', () => {
198198

199199
async function navigate(count: number, shift = false) {
200200
for (let i = 0; i < count; i++) {
201-
await userEvent.tab({ shift });
201+
await safeTab(shift);
202202
}
203203
}
204204
});

‎test/browser/column/grouping.test.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { page, userEvent } from 'vitest/browser';
22

33
import type { ColumnOrColumnGroup } from '../../../src';
4-
import { setup, tabIntoGrid, testCount, validateCellPosition } from '../utils';
4+
import { safeTab, setup, tabIntoGrid, testCount, validateCellPosition } from '../utils';
55

66
const grid = page.getGrid();
77
const headerRows = grid.getHeaderRow();
@@ -323,21 +323,21 @@ test('keyboard navigation', async () => {
323323
await validateCellPosition(10, 3);
324324

325325
// tab navigation
326-
await userEvent.tab();
326+
await safeTab();
327327
await validateCellPosition(11, 3);
328-
await userEvent.tab({ shift: true });
329-
await userEvent.tab({ shift: true });
330-
await userEvent.tab({ shift: true });
328+
await safeTab(true);
329+
await safeTab(true);
330+
await safeTab(true);
331331
await validateCellPosition(8, 3);
332332
await userEvent.keyboard('{arrowup}');
333-
await userEvent.tab({ shift: true });
333+
await safeTab(true);
334334
await validateCellPosition(4, 0);
335-
await userEvent.tab();
335+
await safeTab();
336336
await validateCellPosition(8, 0);
337337

338338
await userEvent.keyboard('{home}{end}');
339-
await userEvent.tab();
339+
await safeTab();
340340
await validateCellPosition(0, 4);
341-
await userEvent.tab({ shift: true });
341+
await safeTab(true);
342342
await validateCellPosition(11, 3);
343343
});

‎test/browser/column/renderCell.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { page, userEvent } from 'vitest/browser';
44
import { DataGrid } from '../../../src';
55
import type { Column } from '../../../src';
66
import defaultRenderHeaderCell from '../../../src/renderHeaderCell';
7-
import { getCellsAtRowIndex, setup } from '../utils';
7+
import { getCellsAtRowIndex, safeTab, setup } from '../utils';
88

99
const cells = page.getCell();
1010

@@ -144,15 +144,15 @@ test('Focus child if it sets tabIndex', async () => {
144144
await userEvent.click(page.getByText('Text'));
145145
await expect.element(button1).toHaveFocus();
146146
await expect.element(button1).toHaveAttribute('tabindex', '0');
147-
await userEvent.tab({ shift: true });
147+
await safeTab(true);
148148
await expect.element(button1).not.toHaveFocus();
149149
await expect.element(button1).toHaveAttribute('tabindex', '-1');
150150
await expect.element(cell).toHaveAttribute('tabindex', '-1');
151151
await userEvent.click(button1);
152152
await expect.element(button1).toHaveFocus();
153153
await expect.element(button1).toHaveAttribute('tabindex', '0');
154154
await expect.element(cell).toHaveAttribute('tabindex', '-1');
155-
await userEvent.tab({ shift: true });
155+
await safeTab(true);
156156
await userEvent.click(button2);
157157
await expect.element(button2).toHaveFocus();
158158
// It is user's responsibilty to set the tabIndex on button2

‎test/browser/column/renderEditCell.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { page, userEvent } from 'vitest/browser';
44

55
import { DataGrid } from '../../../src';
66
import type { Column, DataGridProps } from '../../../src';
7-
import { getCellsAtRowIndex, getRowWithCell, scrollGrid, testCount } from '../utils';
7+
import { getCellsAtRowIndex, getRowWithCell, safeTab, scrollGrid, testCount } from '../utils';
88

99
const grid = page.getGrid();
1010

@@ -22,7 +22,7 @@ describe('Editor', () => {
2222
await userEvent.dblClick(getCellsAtRowIndex(0).nth(0));
2323
await expect.element(editor).toHaveValue(1);
2424
await userEvent.keyboard('2');
25-
await userEvent.tab();
25+
await safeTab();
2626
await expect.element(editor).not.toBeInTheDocument();
2727
await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveTextContent(/^12$/);
2828
});

‎test/browser/copyPaste.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { page, userEvent } from 'vitest/browser';
33

44
import { DataGrid } from '../../src';
55
import type { CellPasteArgs, Column } from '../../src';
6-
import { getCellsAtRowIndex } from './utils';
6+
import { getCellsAtRowIndex, safeTab } from './utils';
77

88
interface Row {
99
col: string;
@@ -116,7 +116,7 @@ test('should allow copying a readonly cell', async () => {
116116

117117
test('should not allow copy/paste on header or summary cells', async () => {
118118
await setup();
119-
await userEvent.tab();
119+
await safeTab();
120120
await userEvent.copy();
121121
expect(onCellCopySpy).not.toHaveBeenCalled();
122122
await userEvent.paste();

‎test/browser/events.test.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { page, userEvent } from 'vitest/browser';
22

33
import { DataGrid } from '../../src';
44
import type { Column, DataGridProps } from '../../src';
5+
import { safeTab } from './utils';
56

67
interface Row {
78
col1: number;
@@ -162,7 +163,7 @@ describe('Events', () => {
162163
expect(onSelectedCellChange).toHaveBeenCalledTimes(4);
163164

164165
// Selected by tab key
165-
await userEvent.keyboard('{Tab}');
166+
await safeTab();
166167
expect(onSelectedCellChange).toHaveBeenLastCalledWith({
167168
column: expect.objectContaining(columns[1]),
168169
row: rows[0],

‎test/browser/keyboardNavigation.test.tsx‎

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { DataGrid, SelectColumn } from '../../src';
44
import type { Column } from '../../src';
55
import {
66
getRowWithCell,
7+
safeTab,
78
scrollGrid,
89
setup,
910
tabIntoGrid,
@@ -40,11 +41,11 @@ test('keyboard navigation', async () => {
4041
await validateCellPosition(0, 0);
4142

4243
// tab to the next cell
43-
await userEvent.tab();
44+
await safeTab();
4445
await validateCellPosition(1, 0);
4546

4647
// tab back to the previous cell
47-
await userEvent.tab({ shift: true });
48+
await safeTab(true);
4849
await validateCellPosition(0, 0);
4950

5051
// arrow navigation
@@ -97,11 +98,11 @@ test('keyboard navigation', async () => {
9798

9899
// tab at the end of a row selects the first cell on the next row
99100
await userEvent.keyboard('{end}');
100-
await userEvent.tab();
101+
await safeTab();
101102
await validateCellPosition(0, 1);
102103

103104
// shift tab should select the last cell of the previous row
104-
await userEvent.tab({ shift: true });
105+
await safeTab(true);
105106
await validateCellPosition(6, 0);
106107
});
107108

@@ -122,11 +123,11 @@ test('arrow and tab navigation', async () => {
122123
await validateCellPosition(6, 1);
123124

124125
// pressing tab on the rightmost cell navigates to the leftmost cell on the next row
125-
await userEvent.tab();
126+
await safeTab();
126127
await validateCellPosition(0, 2);
127128

128129
// pressing shift+tab on the leftmost cell navigates to the rightmost cell on the previous row
129-
await userEvent.tab({ shift: true });
130+
await safeTab(true);
130131
await validateCellPosition(6, 1);
131132
});
132133

@@ -144,10 +145,10 @@ test('grid enter/exit', async () => {
144145
await validateCellPosition(0, 0);
145146

146147
// shift+tab tabs out of the grid if we are at the first cell
147-
await userEvent.tab({ shift: true });
148+
await safeTab(true);
148149
await expect.element(beforeButton).toHaveFocus();
149150

150-
await userEvent.tab();
151+
await safeTab();
151152
await validateCellPosition(0, 0);
152153

153154
await userEvent.keyboard('{arrowdown}{arrowdown}');
@@ -156,19 +157,19 @@ test('grid enter/exit', async () => {
156157
// tab should select the last selected cell
157158
// click outside the grid
158159
await userEvent.click(beforeButton);
159-
await userEvent.tab();
160+
await safeTab();
160161
await userEvent.keyboard('{arrowdown}');
161162
await validateCellPosition(0, 3);
162163

163164
// shift+tab should select the last selected cell
164165
await userEvent.click(afterButton);
165-
await userEvent.tab({ shift: true });
166+
await safeTab(true);
166167
await validateCellPosition(0, 3);
167168
await expect.element(selectedCell.getByRole('checkbox')).toHaveFocus();
168169

169170
// tab tabs out of the grid if we are at the last cell
170171
await userEvent.keyboard('{Control>}{end}{/Control}');
171-
await userEvent.tab();
172+
await safeTab();
172173
await expect.element(afterButton).toHaveFocus();
173174
});
174175

@@ -184,7 +185,7 @@ test('navigation with focusable cell renderer', async () => {
184185
await expect.element(checkbox).toHaveFocus();
185186
await expect.element(checkbox).toHaveAttribute('tabIndex', '0');
186187

187-
await userEvent.tab();
188+
await safeTab();
188189
await validateCellPosition(1, 1);
189190
// cell should set tabIndex to 0 if it does not have focusable cell renderer
190191
await expect.element(selectedCell).toHaveAttribute('tabIndex', '0');
@@ -223,31 +224,31 @@ test('navigation when header and summary rows have focusable elements', async ()
223224
// should set focus on the header filter
224225
await expect.element(page.getByTestId('header-filter1')).toHaveFocus();
225226

226-
await userEvent.tab();
227+
await safeTab();
227228
await expect.element(page.getByTestId('header-filter2')).toHaveFocus();
228229

229-
await userEvent.tab();
230+
await safeTab();
230231
await validateCellPosition(0, 1);
231232

232-
await userEvent.tab({ shift: true });
233+
await safeTab(true);
233234
await expect.element(page.getByTestId('header-filter2')).toHaveFocus();
234235

235-
await userEvent.tab({ shift: true });
236+
await safeTab(true);
236237
await expect.element(page.getByTestId('header-filter1')).toHaveFocus();
237238

238-
await userEvent.tab();
239-
await userEvent.tab();
239+
await safeTab();
240+
await safeTab();
240241
await userEvent.keyboard('{Control>}{end}{/Control}{arrowup}{arrowup}');
241242
await validateCellPosition(1, 2);
242243

243-
await userEvent.tab();
244+
await safeTab();
244245
await expect.element(page.getByTestId('summary-col2-1')).toHaveFocus();
245246

246-
await userEvent.tab();
247+
await safeTab();
247248
await expect.element(page.getByTestId('summary-col3-1')).toHaveFocus();
248249

249-
await userEvent.tab({ shift: true });
250-
await userEvent.tab({ shift: true });
250+
await safeTab(true);
251+
await safeTab(true);
251252
await validateCellPosition(1, 2);
252253
await expect.element(selectedCell).toHaveFocus();
253254
});
@@ -297,7 +298,7 @@ test('reset selected cell when column is removed', async () => {
297298

298299
const { rerender } = await page.render(<Test columns={columns} />);
299300

300-
await userEvent.tab();
301+
await safeTab();
301302
await userEvent.keyboard('{arrowdown}{arrowright}');
302303
await validateCellPosition(1, 1);
303304

@@ -319,7 +320,7 @@ test('reset selected cell when row is removed', async () => {
319320

320321
const { rerender } = await page.render(<Test rows={rows} />);
321322

322-
await userEvent.tab();
323+
await safeTab();
323324
await userEvent.keyboard('{arrowdown}{arrowdown}{arrowright}');
324325
await validateCellPosition(1, 2);
325326

@@ -332,7 +333,7 @@ test('should not change the left and right arrow behavior for right to left lang
332333
await setup<Row, Row>({ columns, rows, direction: 'rtl' }, true);
333334
await tabIntoGrid();
334335
await validateCellPosition(0, 0);
335-
await userEvent.tab();
336+
await safeTab();
336337
await validateCellPosition(1, 0);
337338
await userEvent.keyboard('{arrowright}');
338339
await validateCellPosition(0, 0);

‎test/browser/renderTextEditor.test.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { page, userEvent } from 'vitest/browser';
33

44
import { DataGrid, renderTextEditor } from '../../src';
55
import type { Column } from '../../src';
6+
import { safeTab } from './utils';
67

78
interface Row {
89
readonly name: string;
@@ -48,7 +49,7 @@ test('renderTextEditor', async () => {
4849
// blurring the input closes and commits the editor
4950
await userEvent.dblClick(cell);
5051
await userEvent.fill(input, 'Jim Milton');
51-
await userEvent.tab();
52+
await safeTab();
5253
await expect.element(input).not.toBeInTheDocument();
5354
await expect.element(cell).toHaveTextContent(/^Jim Milton$/);
5455
});

0 commit comments

Comments
 (0)