Skip to content

Commit d7b1799

Browse files
nstepiennstepien
authored
Tweak tests (#3948)
1 parent 88b913d commit d7b1799

17 files changed

Lines changed: 145 additions & 128 deletions

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -760,8 +760,8 @@ function MyGrid() {
760760
}
761761

762762
test('grid', async () => {
763-
await render(<MyGrid />);
764-
const grid = screen.getByRole('grid', { name: 'my-grid' });
763+
await page.render(<MyGrid />);
764+
const grid = page.getByRole('grid', { name: 'my-grid' });
765765
});
766766
```
767767

‎test/browser/TreeDataGrid.test.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -322,7 +322,7 @@ test('cell navigation in a treegrid', async () => {
322322

323323
// expand group
324324
const groupCell1 = getCell('USA');
325-
expect(document.body).toHaveFocus();
325+
await expect.element(document.body).toHaveFocus();
326326
await expect.element(focusSink).toHaveAttribute('tabIndex', '-1');
327327
await userEvent.click(groupCell1);
328328
await expect.element(focusSink).toHaveFocus();
@@ -351,23 +351,23 @@ test('cell navigation in a treegrid', async () => {
351351

352352
// select cell
353353
await userEvent.click(getCellsAtRowIndex(5)[1]);
354-
expect(getCellsAtRowIndex(5)[1]).toHaveAttribute('aria-selected', 'true');
354+
await expect.element(getCellsAtRowIndex(5)[1]).toHaveAttribute('aria-selected', 'true');
355355
await expect.element(focusSink).toHaveAttribute('tabIndex', '-1');
356356

357357
// select the previous cell
358358
await userEvent.keyboard('{arrowleft}');
359-
expect(getCellsAtRowIndex(5)[1]).toHaveAttribute('aria-selected', 'false');
360-
expect(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'true');
359+
await expect.element(getCellsAtRowIndex(5)[1]).toHaveAttribute('aria-selected', 'false');
360+
await expect.element(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'true');
361361

362362
// if the first cell is selected then arrowleft should select the row
363363
await userEvent.keyboard('{arrowleft}');
364-
expect(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'false');
364+
await expect.element(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'false');
365365
await expect.element(getRows()[4]).toHaveClass(rowSelectedClassname);
366366
await expect.element(focusSink).toHaveFocus();
367367

368368
// if the row is selected then arrowright should select the first cell on the same row
369369
await userEvent.keyboard('{arrowright}');
370-
expect(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'true');
370+
await expect.element(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'true');
371371

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

@@ -390,7 +390,7 @@ test('cell navigation in a treegrid', async () => {
390390
await expect.element(getRows()[5]).toHaveClass(rowSelectedClassname);
391391

392392
await userEvent.keyboard('{home}');
393-
await expect.element(page.getByRole('row').all()[0]).toHaveClass(rowSelectedClassname);
393+
await expect.element(page.getByRole('row').nth(0)).toHaveClass(rowSelectedClassname);
394394

395395
// collpase parent group
396396
await userEvent.keyboard('{arrowdown}{arrowdown}{arrowleft}');

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,9 @@ describe('colSpan', () => {
4646
const topSummarryRow1 = getCellsAtRowIndex(0);
4747
expect(topSummarryRow1).toHaveLength(14);
4848
// 7th-8th cells are merged
49-
expect(topSummarryRow1[7]).toHaveAttribute('aria-colindex', '8');
50-
expect(topSummarryRow1[7]).toHaveAttribute('aria-colspan', '2');
51-
expect(topSummarryRow1[7]).toHaveStyle({
49+
await expect.element(topSummarryRow1[7]).toHaveAttribute('aria-colindex', '8');
50+
await expect.element(topSummarryRow1[7]).toHaveAttribute('aria-colspan', '2');
51+
await expect.element(topSummarryRow1[7]).toHaveStyle({
5252
gridColumnStart: '8',
5353
gridColumnEnd: '10'
5454
});
@@ -58,31 +58,31 @@ describe('colSpan', () => {
5858
const row1 = getCellsAtRowIndex(3);
5959
expect(row1).toHaveLength(14);
6060
// 7th-8th cells are merged
61-
expect(row1[6]).toHaveAttribute('aria-colindex', '7');
62-
expect(row1[6]).toHaveAttribute('aria-colspan', '2');
63-
expect(row1[6]).toHaveStyle({
61+
await expect.element(row1[6]).toHaveAttribute('aria-colindex', '7');
62+
await expect.element(row1[6]).toHaveAttribute('aria-colspan', '2');
63+
await expect.element(row1[6]).toHaveStyle({
6464
gridTemplateColumns: '7',
6565
gridColumnEnd: '9'
6666
});
67-
expect(row1[7]).toHaveAttribute('aria-colindex', '9');
68-
expect(row1[7]).not.toHaveAttribute('aria-colspan');
67+
await expect.element(row1[7]).toHaveAttribute('aria-colindex', '9');
68+
await expect.element(row1[7]).not.toHaveAttribute('aria-colspan');
6969

7070
// 3rd-5th, 7th-8th cells are merged
7171
const row2 = getCellsAtRowIndex(4);
7272
expect(row2).toHaveLength(12);
73-
expect(row2[2]).toHaveAttribute('aria-colindex', '3');
74-
expect(row2[2]).toHaveStyle({
73+
await expect.element(row2[2]).toHaveAttribute('aria-colindex', '3');
74+
await expect.element(row2[2]).toHaveStyle({
7575
gridColumnStart: '3',
7676
gridColumnEnd: '6'
7777
});
78-
expect(row2[2]).toHaveAttribute('aria-colspan', '3');
79-
expect(row2[3]).toHaveAttribute('aria-colindex', '6');
80-
expect(row2[4]).toHaveAttribute('aria-colindex', '7');
81-
expect(row2[4]).toHaveStyle({
78+
await expect.element(row2[2]).toHaveAttribute('aria-colspan', '3');
79+
await expect.element(row2[3]).toHaveAttribute('aria-colindex', '6');
80+
await expect.element(row2[4]).toHaveAttribute('aria-colindex', '7');
81+
await expect.element(row2[4]).toHaveStyle({
8282
gridColumnStart: '7',
8383
gridColumnEnd: '9'
8484
});
85-
expect(row2[5]).toHaveAttribute('aria-colindex', '9');
85+
await expect.element(row2[5]).toHaveAttribute('aria-colindex', '9');
8686

8787
expect(getCellsAtRowIndex(6)).toHaveLength(14); // colSpan 6 won't work as there are 5 frozen columns
8888
expect(getCellsAtRowIndex(7)).toHaveLength(10);

‎test/browser/column/headerCellClass.test.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ test('headerCellClass is either nullish or a string', async () => {
1717

1818
await setup({ columns, rows: [] });
1919
const [cell1, cell2] = getHeaderCells();
20-
expect(cell1).toHaveClass(cellClassname, { exact: true });
21-
expect(cell2).toHaveClass(`${cellClassname} my-header`, { exact: true });
20+
await expect.element(cell1).toHaveClass(cellClassname, { exact: true });
21+
await expect.element(cell2).toHaveClass(`${cellClassname} my-header`, { exact: true });
2222
});
2323

2424
test('columnGroup.headerCellClass is either nullish or a string', async () => {
@@ -36,6 +36,6 @@ test('columnGroup.headerCellClass is either nullish or a string', async () => {
3636

3737
await setup({ columns, rows: [] });
3838
const [cell1, cell2] = getHeaderCells();
39-
expect(cell1).toHaveClass(cellClassname, { exact: true });
40-
expect(cell2).toHaveClass(`${cellClassname} my-header`, { exact: true });
39+
await expect.element(cell1).toHaveClass(cellClassname, { exact: true });
40+
await expect.element(cell2).toHaveClass(`${cellClassname} my-header`, { exact: true });
4141
});

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

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,15 @@ describe('renderValue', () => {
2121
it('should be used by default', async () => {
2222
await setup({ columns, rows });
2323
const [cell1, cell2] = getCells();
24-
expect(cell1).toHaveTextContent('101');
25-
expect(cell2).toBeEmptyDOMElement();
24+
await expect.element(cell1).toHaveTextContent('101');
25+
await expect.element(cell2).toBeEmptyDOMElement();
2626
});
2727

2828
it('should handle non-object values', async () => {
2929
await setup({ columns, rows: [null] });
3030
const [cell1, cell2] = getCells();
31-
expect(cell1).toBeEmptyDOMElement();
32-
expect(cell2).toBeEmptyDOMElement();
31+
await expect.element(cell1).toBeEmptyDOMElement();
32+
await expect.element(cell2).toBeEmptyDOMElement();
3333
});
3434
});
3535

@@ -52,8 +52,8 @@ describe('Custom cell renderer', () => {
5252
it('should replace the default cell renderer', async () => {
5353
await setup({ columns, rows });
5454
const [cell1, cell2] = getCells();
55-
expect(cell1).toHaveTextContent('#101');
56-
expect(cell2).toHaveTextContent('No name');
55+
await expect.element(cell1).toHaveTextContent('#101');
56+
await expect.element(cell2).toHaveTextContent('No name');
5757
});
5858

5959
it('can update rows', async () => {
@@ -93,9 +93,9 @@ describe('Custom cell renderer', () => {
9393
await page.render(<Test />);
9494

9595
const [cell] = getCells();
96-
expect(cell).toHaveTextContent('value: 1');
96+
await expect.element(cell).toHaveTextContent('value: 1');
9797
await userEvent.click(page.getByRole('button'));
98-
expect(cell).toHaveTextContent('value: 2');
98+
await expect.element(cell).toHaveTextContent('value: 2');
9999
expect(onChange).toHaveBeenCalledExactlyOnceWith([{ id: 2 }], {
100100
column: {
101101
...column,
@@ -140,29 +140,29 @@ test('Focus child if it sets tabIndex', async () => {
140140
const button1 = page.getByRole('button', { name: 'Button 1' });
141141
const button2 = page.getByRole('button', { name: 'Button 2' });
142142
const cell = page.getByRole('gridcell', { name: 'Button 1 Text Button 2' });
143-
expect(button1).toHaveAttribute('tabindex', '-1');
144-
expect(cell).toHaveAttribute('tabindex', '-1');
143+
await expect.element(button1).toHaveAttribute('tabindex', '-1');
144+
await expect.element(cell).toHaveAttribute('tabindex', '-1');
145145
await userEvent.click(page.getByText('Text'));
146-
expect(button1).toHaveFocus();
147-
expect(button1).toHaveAttribute('tabindex', '0');
146+
await expect.element(button1).toHaveFocus();
147+
await expect.element(button1).toHaveAttribute('tabindex', '0');
148148
await userEvent.tab({ shift: true });
149-
expect(button1).not.toHaveFocus();
150-
expect(button1).toHaveAttribute('tabindex', '-1');
151-
expect(cell).toHaveAttribute('tabindex', '-1');
149+
await expect.element(button1).not.toHaveFocus();
150+
await expect.element(button1).toHaveAttribute('tabindex', '-1');
151+
await expect.element(cell).toHaveAttribute('tabindex', '-1');
152152
await userEvent.click(button1);
153-
expect(button1).toHaveFocus();
154-
expect(button1).toHaveAttribute('tabindex', '0');
155-
expect(cell).toHaveAttribute('tabindex', '-1');
153+
await expect.element(button1).toHaveFocus();
154+
await expect.element(button1).toHaveAttribute('tabindex', '0');
155+
await expect.element(cell).toHaveAttribute('tabindex', '-1');
156156
await userEvent.tab({ shift: true });
157157
await userEvent.click(button2);
158-
expect(button2).toHaveFocus();
158+
await expect.element(button2).toHaveFocus();
159159
// It is user's responsibilty to set the tabIndex on button2
160-
expect(button1).toHaveAttribute('tabindex', '0');
161-
expect(cell).toHaveAttribute('tabindex', '-1');
160+
await expect.element(button1).toHaveAttribute('tabindex', '0');
161+
await expect.element(cell).toHaveAttribute('tabindex', '-1');
162162
await userEvent.click(button1);
163-
expect(button1).toHaveFocus();
164-
expect(button1).toHaveAttribute('tabindex', '0');
165-
expect(cell).toHaveAttribute('tabindex', '-1');
163+
await expect.element(button1).toHaveFocus();
164+
await expect.element(button1).toHaveAttribute('tabindex', '0');
165+
await expect.element(cell).toHaveAttribute('tabindex', '-1');
166166
});
167167

168168
test('Cell should not steal focus when the focus is outside the grid and cell is recreated', async () => {
@@ -193,11 +193,11 @@ test('Cell should not steal focus when the focus is outside the grid and cell is
193193
await page.render(<FormatterTest />);
194194

195195
await userEvent.click(getCellsAtRowIndex(0)[0]);
196-
expect(getCellsAtRowIndex(0)[0]).toHaveFocus();
196+
await expect.element(getCellsAtRowIndex(0)[0]).toHaveFocus();
197197

198198
const button = page.getByRole('button', { name: 'Test' }).element();
199-
expect(button).not.toHaveFocus();
199+
await expect.element(button).not.toHaveFocus();
200200
await userEvent.click(button);
201-
expect(getCellsAtRowIndex(0)[0]).not.toHaveFocus();
202-
expect(button).toHaveFocus();
201+
await expect.element(getCellsAtRowIndex(0)[0]).not.toHaveFocus();
202+
await expect.element(button).toHaveFocus();
203203
});

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

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ describe('Editor', () => {
2222
await userEvent.keyboard('2');
2323
await userEvent.tab();
2424
await expect.element(editor).not.toBeInTheDocument();
25-
expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^12$/);
25+
await expect.element(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^12$/);
2626
});
2727

2828
it('should open and commit changes on enter', async () => {
@@ -33,8 +33,8 @@ describe('Editor', () => {
3333
await userEvent.keyboard('{enter}');
3434
await expect.element(editor).toHaveValue(1);
3535
await userEvent.keyboard('3{enter}');
36-
expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^13$/);
37-
expect(getCellsAtRowIndex(0)[0]).toHaveFocus();
36+
await expect.element(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^13$/);
37+
await expect.element(getCellsAtRowIndex(0)[0]).toHaveFocus();
3838
await expect.element(editor).not.toBeInTheDocument();
3939
});
4040

@@ -43,7 +43,7 @@ describe('Editor', () => {
4343
await userEvent.click(getCellsAtRowIndex(0)[0]);
4444
// TODO: await userEvent.keyboard('123{enter}'); fails in FF
4545
await userEvent.keyboard('{enter}123{enter}');
46-
expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^1123$/);
46+
await expect.element(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^1123$/);
4747
});
4848

4949
it('should close editor and discard changes on escape', async () => {
@@ -53,8 +53,8 @@ describe('Editor', () => {
5353
await expect.element(editor).toHaveValue(1);
5454
await userEvent.keyboard('2222{escape}');
5555
await expect.element(editor).not.toBeInTheDocument();
56-
expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^1$/);
57-
expect(getCellsAtRowIndex(0)[0]).toHaveFocus();
56+
await expect.element(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^1$/);
57+
await expect.element(getCellsAtRowIndex(0)[0]).toHaveFocus();
5858
});
5959

6060
it('should commit changes and close editor when clicked outside', async () => {
@@ -65,7 +65,7 @@ describe('Editor', () => {
6565
await userEvent.keyboard('2222');
6666
await userEvent.click(page.getByText('outside'));
6767
await expect.element(editor).not.toBeInTheDocument();
68-
expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^12222$/);
68+
await expect.element(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^12222$/);
6969
});
7070

7171
it('should commit quickly enough on outside clicks so click event handlers access the latest rows state', async () => {
@@ -115,7 +115,7 @@ describe('Editor', () => {
115115
it('should be editable if an editor is specified and editable is undefined/null', async () => {
116116
await page.render(<EditorTest />);
117117
const cell = getCellsAtRowIndex(0)[1];
118-
expect(cell).not.toHaveAttribute('aria-readonly');
118+
await expect.element(cell).not.toHaveAttribute('aria-readonly');
119119
await userEvent.dblClick(cell);
120120
await expect.element(page.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument();
121121
});
@@ -129,7 +129,7 @@ describe('Editor', () => {
129129
it('should not be editable if editable is false', async () => {
130130
await page.render(<EditorTest editable={false} />);
131131
const cell = getCellsAtRowIndex(0)[1];
132-
expect(cell).toHaveAttribute('aria-readonly', 'true');
132+
await expect.element(cell).toHaveAttribute('aria-readonly', 'true');
133133
await userEvent.dblClick(cell);
134134

135135
await expect
@@ -158,19 +158,19 @@ describe('Editor', () => {
158158
await expect.element(editor1).toHaveValue('a1');
159159
await userEvent.keyboard('23');
160160
// The cell value should update as the editor value is changed
161-
expect(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a123$/);
161+
await expect.element(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a123$/);
162162
// clicking in a portal does not count as an outside click
163163
await userEvent.click(editor1);
164164
await expect.element(editor1).toBeInTheDocument();
165165
// true outside clicks are still detected
166166
await userEvent.click(page.getByText('outside'));
167167
await expect.element(editor1).not.toBeInTheDocument();
168-
expect(getCellsAtRowIndex(0)[1]).not.toHaveFocus();
168+
await expect.element(getCellsAtRowIndex(0)[1]).not.toHaveFocus();
169169

170170
await userEvent.dblClick(getCellsAtRowIndex(0)[1]);
171171
await userEvent.click(page.getByRole('textbox', { name: 'col2-editor' }));
172172
await userEvent.keyboard('{enter}');
173-
expect(getCellsAtRowIndex(0)[1]).toHaveFocus();
173+
await expect.element(getCellsAtRowIndex(0)[1]).toHaveFocus();
174174
});
175175

176176
it('should not commit on outside click if commitOnOutsideClick is false', async () => {
@@ -204,7 +204,7 @@ describe('Editor', () => {
204204
await userEvent.click(getCellsAtRowIndex(0)[1]);
205205
// TODO: await userEvent.keyboard('yz{enter}'); fails in FF
206206
await userEvent.keyboard('{enter}yz{enter}');
207-
expect(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a1yz$/);
207+
await expect.element(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a1yz$/);
208208
await userEvent.keyboard('x');
209209
await expect
210210
.element(page.getByRole('textbox', { name: 'col2-editor' }))
@@ -224,7 +224,7 @@ describe('Editor', () => {
224224
);
225225
await userEvent.dblClick(getCellsAtRowIndex(0)[1]);
226226
await userEvent.keyboard('a{arrowleft}b{arrowright}c{arrowdown}'); // should commit changes on arrowdown
227-
expect(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a1bac$/);
227+
await expect.element(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a1bac$/);
228228
});
229229

230230
it('should close the editor when closeOnExternalRowChange is true or undefined and row is changed from outside', async () => {

‎test/browser/column/renderHeaderCell.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@ test('renderHeaderCell is either undefined or a component', async () => {
1616

1717
await setup({ columns, rows: [] });
1818
const [cell1, cell2] = getHeaderCells();
19-
expect(cell1).toHaveTextContent('ID');
20-
expect(cell2).toHaveTextContent('Fancy! Name');
19+
await expect.element(cell1).toHaveTextContent('ID');
20+
await expect.element(cell2).toHaveTextContent('Fancy! Name');
2121
});

‎test/browser/column/renderSummaryCell.test.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,13 @@ test('renderSummaryCell', async () => {
3737

3838
const cells = getCells();
3939
expect(cells).toHaveLength(8);
40-
expect(cells[0]).toHaveTextContent('Summary: 1');
41-
expect(cells[2]).toHaveTextContent('Summary: 2');
42-
expect(cells[4]).toHaveTextContent('Summary: 3');
43-
expect(cells[6]).toHaveTextContent('Summary: 4');
40+
await expect.element(cells[0]).toHaveTextContent('Summary: 1');
41+
await expect.element(cells[2]).toHaveTextContent('Summary: 2');
42+
await expect.element(cells[4]).toHaveTextContent('Summary: 3');
43+
await expect.element(cells[6]).toHaveTextContent('Summary: 4');
4444
// nothing is rendered when renderSummaryCell is not defined
45-
expect(cells[1]).toBeEmptyDOMElement();
46-
expect(cells[3]).toBeEmptyDOMElement();
47-
expect(cells[5]).toBeEmptyDOMElement();
48-
expect(cells[7]).toBeEmptyDOMElement();
45+
await expect.element(cells[1]).toBeEmptyDOMElement();
46+
await expect.element(cells[3]).toBeEmptyDOMElement();
47+
await expect.element(cells[5]).toBeEmptyDOMElement();
48+
await expect.element(cells[7]).toBeEmptyDOMElement();
4949
});

0 commit comments

Comments
 (0)