Skip to content

Commit f95e6c7

Browse files
amanmahajan7amanmahajan7
authored
Rewrite some tests to reduce flakiness: part 2 (#3878)
* -1 * -1 * Use locators for `validateCellPosition` * Use `commands.scrollGrid` * -1
1 parent 4df98ae commit f95e6c7

7 files changed

Lines changed: 185 additions & 178 deletions

File tree

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

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -96,78 +96,78 @@ describe('colSpan', () => {
9696
setupColSpanGrid();
9797
// header row
9898
await userEvent.click(getHeaderCells()[7]);
99-
validateCellPosition(7, 0);
99+
await validateCellPosition(7, 0);
100100
await userEvent.keyboard('{arrowright}');
101-
validateCellPosition(8, 0);
101+
await validateCellPosition(8, 0);
102102
await userEvent.keyboard('{arrowright}');
103-
validateCellPosition(11, 0);
103+
await validateCellPosition(11, 0);
104104
await userEvent.keyboard('{arrowright}');
105-
validateCellPosition(12, 0);
105+
await validateCellPosition(12, 0);
106106
await userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}');
107-
validateCellPosition(7, 0);
107+
await validateCellPosition(7, 0);
108108

109109
// top summary rows
110110
await userEvent.click(getCellsAtRowIndex(0)[6]);
111-
validateCellPosition(6, 1);
111+
await validateCellPosition(6, 1);
112112
await userEvent.keyboard('{arrowright}');
113-
validateCellPosition(7, 1);
113+
await validateCellPosition(7, 1);
114114
await userEvent.keyboard('{arrowright}');
115-
validateCellPosition(9, 1);
115+
await validateCellPosition(9, 1);
116116
await userEvent.keyboard('{arrowright}');
117-
validateCellPosition(10, 1);
117+
await validateCellPosition(10, 1);
118118
await userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}');
119-
validateCellPosition(6, 1);
119+
await validateCellPosition(6, 1);
120120

121121
// viewport rows
122122
await userEvent.click(getCellsAtRowIndex(3)[1]);
123-
validateCellPosition(1, 4);
123+
await validateCellPosition(1, 4);
124124
await userEvent.keyboard('{arrowright}');
125-
validateCellPosition(2, 4);
125+
await validateCellPosition(2, 4);
126126
await userEvent.keyboard('{arrowright}');
127-
validateCellPosition(3, 4);
127+
await validateCellPosition(3, 4);
128128
await userEvent.keyboard('{arrowdown}');
129-
validateCellPosition(2, 5);
129+
await validateCellPosition(2, 5);
130130
await userEvent.keyboard('{arrowleft}');
131-
validateCellPosition(1, 5);
131+
await validateCellPosition(1, 5);
132132
await userEvent.keyboard('{arrowright}');
133-
validateCellPosition(2, 5);
133+
await validateCellPosition(2, 5);
134134
await userEvent.keyboard('{arrowright}');
135-
validateCellPosition(5, 5);
135+
await validateCellPosition(5, 5);
136136
await userEvent.keyboard('{arrowleft}');
137-
validateCellPosition(2, 5);
137+
await validateCellPosition(2, 5);
138138
await userEvent.keyboard('{arrowdown}');
139-
validateCellPosition(2, 6);
139+
await validateCellPosition(2, 6);
140140
await userEvent.keyboard('{arrowdown}{arrowdown}');
141-
validateCellPosition(0, 8);
141+
await validateCellPosition(0, 8);
142142
await userEvent.keyboard('{arrowLeft}');
143-
validateCellPosition(0, 8);
143+
await validateCellPosition(0, 8);
144144
await userEvent.keyboard('{arrowright}');
145-
validateCellPosition(5, 8);
145+
await validateCellPosition(5, 8);
146146
await userEvent.tab({ shift: true });
147147
await userEvent.tab({ shift: true });
148-
validateCellPosition(14, 7);
148+
await validateCellPosition(14, 7);
149149
await userEvent.tab();
150-
validateCellPosition(0, 8);
150+
await validateCellPosition(0, 8);
151151
await userEvent.click(getCellsAtRowIndex(10)[11]);
152-
validateCellPosition(11, 11);
152+
await validateCellPosition(11, 11);
153153
await userEvent.tab();
154-
validateCellPosition(12, 11);
154+
await validateCellPosition(12, 11);
155155
await userEvent.tab();
156-
validateCellPosition(0, 12);
156+
await validateCellPosition(0, 12);
157157
await userEvent.tab({ shift: true });
158-
validateCellPosition(12, 11);
158+
await validateCellPosition(12, 11);
159159

160160
// bottom summary rows
161161
await userEvent.click(getCellsAtRowIndex(12)[6]);
162-
validateCellPosition(6, 13);
162+
await validateCellPosition(6, 13);
163163
await userEvent.keyboard('{arrowright}');
164-
validateCellPosition(7, 13);
164+
await validateCellPosition(7, 13);
165165
await userEvent.keyboard('{arrowright}');
166-
validateCellPosition(9, 13);
166+
await validateCellPosition(9, 13);
167167
await userEvent.keyboard('{arrowright}');
168-
validateCellPosition(10, 13);
168+
await validateCellPosition(10, 13);
169169
await userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}');
170-
validateCellPosition(6, 13);
170+
await validateCellPosition(6, 13);
171171
});
172172

173173
it('should scroll to the merged cell when selected', async () => {
@@ -182,13 +182,13 @@ describe('colSpan', () => {
182182
testScrollIntoView();
183183
await navigate(1);
184184
testScrollIntoView(); // should bring the merged cell into view
185-
validateCellPosition(27, 11);
185+
await validateCellPosition(27, 11);
186186
await navigate(7);
187187
testScrollIntoView();
188-
validateCellPosition(6, 12); // should navigate to the next row
188+
await validateCellPosition(6, 12); // should navigate to the next row
189189
await navigate(7, true);
190190
testScrollIntoView();
191-
validateCellPosition(27, 11); // should navigate to the previous row
191+
await validateCellPosition(27, 11); // should navigate to the previous row
192192
await navigate(27);
193193
testScrollIntoView();
194194
await navigate(1);

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

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -254,86 +254,86 @@ test('keyboard navigation', async () => {
254254
await expect.element(getSelectedCell()).not.toBeInTheDocument();
255255

256256
await tabIntoGrid();
257-
validateCellPosition(0, 3);
257+
await validateCellPosition(0, 3);
258258

259259
// arrow navigation
260260
await userEvent.keyboard('{arrowup}');
261-
validateCellPosition(0, 3);
261+
await validateCellPosition(0, 3);
262262
await userEvent.keyboard('{arrowright}');
263-
validateCellPosition(1, 3);
263+
await validateCellPosition(1, 3);
264264
await userEvent.keyboard('{arrowup}');
265-
validateCellPosition(1, 2);
265+
await validateCellPosition(1, 2);
266266
await userEvent.keyboard('{arrowup}');
267-
validateCellPosition(1, 2);
267+
await validateCellPosition(1, 2);
268268
await userEvent.keyboard('{arrowleft}');
269-
validateCellPosition(0, 3);
269+
await validateCellPosition(0, 3);
270270
await userEvent.keyboard('{arrowright}{arrowright}');
271-
validateCellPosition(2, 3);
271+
await validateCellPosition(2, 3);
272272
await userEvent.keyboard('{arrowup}');
273-
validateCellPosition(1, 2);
273+
await validateCellPosition(1, 2);
274274
await userEvent.keyboard('{arrowdown}');
275-
validateCellPosition(1, 3);
275+
await validateCellPosition(1, 3);
276276
await userEvent.keyboard('{arrowright}{arrowright}');
277-
validateCellPosition(3, 3);
277+
await validateCellPosition(3, 3);
278278
await userEvent.keyboard('{arrowright}');
279-
validateCellPosition(4, 3);
279+
await validateCellPosition(4, 3);
280280
await userEvent.keyboard('{arrowdown}');
281-
validateCellPosition(4, 4);
281+
await validateCellPosition(4, 4);
282282
await userEvent.keyboard('{arrowup}');
283-
validateCellPosition(4, 3);
283+
await validateCellPosition(4, 3);
284284
await userEvent.keyboard('{arrowup}');
285-
validateCellPosition(4, 2);
285+
await validateCellPosition(4, 2);
286286
await userEvent.keyboard('{arrowup}');
287-
validateCellPosition(4, 1);
287+
await validateCellPosition(4, 1);
288288
await userEvent.keyboard('{arrowup}');
289-
validateCellPosition(4, 0);
289+
await validateCellPosition(4, 0);
290290
await userEvent.keyboard('{arrowdown}');
291-
validateCellPosition(4, 1);
291+
await validateCellPosition(4, 1);
292292
await userEvent.keyboard('{arrowright}');
293-
validateCellPosition(5, 3);
293+
await validateCellPosition(5, 3);
294294
await userEvent.keyboard('{arrowleft}');
295-
validateCellPosition(4, 3);
295+
await validateCellPosition(4, 3);
296296
await userEvent.keyboard('{arrowup}');
297-
validateCellPosition(4, 2);
297+
await validateCellPosition(4, 2);
298298
await userEvent.keyboard('{arrowright}');
299-
validateCellPosition(5, 3);
299+
await validateCellPosition(5, 3);
300300
await userEvent.keyboard('{arrowright}');
301-
validateCellPosition(6, 3);
301+
await validateCellPosition(6, 3);
302302
await userEvent.keyboard('{arrowright}');
303-
validateCellPosition(7, 3);
303+
await validateCellPosition(7, 3);
304304
await userEvent.keyboard('{arrowup}');
305-
validateCellPosition(7, 2);
305+
await validateCellPosition(7, 2);
306306
await userEvent.keyboard('{arrowup}');
307-
validateCellPosition(4, 0);
307+
await validateCellPosition(4, 0);
308308
await userEvent.keyboard('{arrowright}');
309-
validateCellPosition(8, 0);
309+
await validateCellPosition(8, 0);
310310
await userEvent.keyboard('{arrowleft}');
311-
validateCellPosition(4, 0);
311+
await validateCellPosition(4, 0);
312312

313313
// home/end navigation
314314
await userEvent.keyboard('{home}');
315-
validateCellPosition(0, 3);
315+
await validateCellPosition(0, 3);
316316
await userEvent.keyboard('{end}');
317-
validateCellPosition(11, 3);
317+
await validateCellPosition(11, 3);
318318
await userEvent.keyboard('{arrowleft}');
319-
validateCellPosition(10, 3);
319+
await validateCellPosition(10, 3);
320320

321321
// tab navigation
322322
await userEvent.tab();
323-
validateCellPosition(11, 3);
323+
await validateCellPosition(11, 3);
324324
await userEvent.tab({ shift: true });
325325
await userEvent.tab({ shift: true });
326326
await userEvent.tab({ shift: true });
327-
validateCellPosition(8, 3);
327+
await validateCellPosition(8, 3);
328328
await userEvent.keyboard('{arrowup}');
329329
await userEvent.tab({ shift: true });
330-
validateCellPosition(4, 0);
330+
await validateCellPosition(4, 0);
331331
await userEvent.tab();
332-
validateCellPosition(8, 0);
332+
await validateCellPosition(8, 0);
333333

334334
await userEvent.keyboard('{home}{end}');
335335
await userEvent.tab();
336-
validateCellPosition(0, 4);
336+
await validateCellPosition(0, 4);
337337
await userEvent.tab({ shift: true });
338-
validateCellPosition(11, 3);
338+
await validateCellPosition(11, 3);
339339
});

‎test/browser/column/name.test.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { Column } from '../../../src';
2-
import { getHeaderCells, setup } from '../utils';
2+
import { getHeaderCellsNew, setup } from '../utils';
33

4-
test('name is either a string or an element', () => {
4+
test('name is either a string or an element', async () => {
55
function Header() {
66
return 'Fancy';
77
}
@@ -18,7 +18,7 @@ test('name is either a string or an element', () => {
1818
];
1919

2020
setup({ columns, rows: [] });
21-
const [cell1, cell2] = getHeaderCells();
22-
expect(cell1).toHaveTextContent('ID');
23-
expect(cell2).toHaveTextContent('Fancy');
21+
const [cell1, cell2] = getHeaderCellsNew('ID', 'Fancy');
22+
await expect.element(cell1).toBeVisible();
23+
await expect.element(cell2).toBeVisible();
2424
});

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

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

55
import { DataGrid } from '../../../src';
66
import type { Column, DataGridProps } from '../../../src';
7-
import { getCell, getCellsAtRowIndex, getGrid, getSelectedCell, scrollGrid } from '../utils';
7+
import { getCell, getCellsAtRowIndex, getGrid, getSelectedCell } from '../utils';
88

99
interface Row {
1010
col1: number;
@@ -94,15 +94,19 @@ describe('Editor', () => {
9494

9595
page.render(<EditorTest gridRows={rows} />);
9696
await userEvent.click(getCellsAtRowIndex(0)[0]);
97-
expect(getCellsAtRowIndex(0)).toHaveLength(2);
98-
await scrollGrid({ scrollTop: 2000 });
99-
expect(getCellsAtRowIndex(0)).toHaveLength(1);
97+
const selectedRowCells = page
98+
.getByRole('row')
99+
.filter({ has: getSelectedCell() })
100+
.getByRole('gridcell');
101+
await expect.poll(() => selectedRowCells.elements().length).toBe(2);
102+
await commands.scrollGrid({ scrollTop: 2000 });
103+
await expect.poll(() => selectedRowCells.elements().length).toBe(1);
100104
const editor = page.getByRole('spinbutton', { name: 'col1-editor' });
101105
await expect.element(editor).not.toBeInTheDocument();
102106
expect(getGrid().element().scrollTop).toBe(2000);
103107
// TODO: await userEvent.keyboard('123'); fails in FF
104108
await userEvent.keyboard('{enter}123');
105-
expect(getCellsAtRowIndex(0)).toHaveLength(2);
109+
await expect.poll(() => selectedRowCells.elements().length).toBe(2);
106110
await expect.element(editor).toHaveValue(123);
107111
expect(getGrid().element().scrollTop).toBe(0);
108112
});

0 commit comments

Comments
 (0)