Skip to content

Commit 5e1ac44

Browse files
nstepiennstepien
authored
Resolve flaky test (#3999)
* Resolve flaky test * don't need to keep this
1 parent 390afa8 commit 5e1ac44

3 files changed

Lines changed: 40 additions & 52 deletions

File tree

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

Lines changed: 33 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import type { Column, DataGridProps } from '../../../src';
77
import { getCellsAtRowIndex, getRowWithCell, safeTab, scrollGrid, testCount } from '../utils';
88

99
const grid = page.getGrid();
10+
const col1Editor = page.getByRole('spinbutton', { name: 'col1-editor' });
11+
const col2Editor = page.getByRole('textbox', { name: 'col2-editor' });
1012

1113
interface Row {
1214
col1: number;
@@ -16,28 +18,26 @@ interface Row {
1618
describe('Editor', () => {
1719
it('should open editor on double click', async () => {
1820
await page.render(<EditorTest />);
19-
const editor = page.getByRole('spinbutton', { name: 'col1-editor' });
2021
await userEvent.click(getCellsAtRowIndex(0).nth(0));
21-
await expect.element(editor).not.toBeInTheDocument();
22+
await expect.element(col1Editor).not.toBeInTheDocument();
2223
await userEvent.dblClick(getCellsAtRowIndex(0).nth(0));
23-
await expect.element(editor).toHaveValue(1);
24+
await expect.element(col1Editor).toHaveValue(1);
2425
await userEvent.keyboard('2');
2526
await safeTab();
26-
await expect.element(editor).not.toBeInTheDocument();
27+
await expect.element(col1Editor).not.toBeInTheDocument();
2728
await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveTextContent(/^12$/);
2829
});
2930

3031
it('should open and commit changes on enter', async () => {
3132
await page.render(<EditorTest />);
32-
const editor = page.getByRole('spinbutton', { name: 'col1-editor' });
3333
await userEvent.click(getCellsAtRowIndex(0).nth(0));
34-
await expect.element(editor).not.toBeInTheDocument();
34+
await expect.element(col1Editor).not.toBeInTheDocument();
3535
await userEvent.keyboard('{enter}');
36-
await expect.element(editor).toHaveValue(1);
36+
await expect.element(col1Editor).toHaveValue(1);
3737
await userEvent.keyboard('3{enter}');
3838
await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveTextContent(/^13$/);
3939
await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveFocus();
40-
await expect.element(editor).not.toBeInTheDocument();
40+
await expect.element(col1Editor).not.toBeInTheDocument();
4141
});
4242

4343
it('should open editor when user types', async () => {
@@ -51,22 +51,20 @@ describe('Editor', () => {
5151
it('should close editor and discard changes on escape', async () => {
5252
await page.render(<EditorTest />);
5353
await userEvent.dblClick(getCellsAtRowIndex(0).nth(0));
54-
const editor = page.getByRole('spinbutton', { name: 'col1-editor' });
55-
await expect.element(editor).toHaveValue(1);
54+
await expect.element(col1Editor).toHaveValue(1);
5655
await userEvent.keyboard('2222{escape}');
57-
await expect.element(editor).not.toBeInTheDocument();
56+
await expect.element(col1Editor).not.toBeInTheDocument();
5857
await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveTextContent(/^1$/);
5958
await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveFocus();
6059
});
6160

6261
it('should commit changes and close editor when clicked outside', async () => {
6362
await page.render(<EditorTest />);
6463
await userEvent.dblClick(getCellsAtRowIndex(0).nth(0));
65-
const editor = page.getByRole('spinbutton', { name: 'col1-editor' });
66-
await expect.element(editor).toHaveValue(1);
64+
await expect.element(col1Editor).toHaveValue(1);
6765
await userEvent.keyboard('2222');
6866
await userEvent.click(page.getByText('outside'));
69-
await expect.element(editor).not.toBeInTheDocument();
67+
await expect.element(col1Editor).not.toBeInTheDocument();
7068
await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveTextContent(/^12222$/);
7169
});
7270

@@ -100,13 +98,12 @@ describe('Editor', () => {
10098
await testCount(activeRowCells, 2);
10199
await scrollGrid({ top: 2001 });
102100
await testCount(activeRowCells, 1);
103-
const editor = grid.getByRole('spinbutton', { name: 'col1-editor' });
104-
await expect.element(editor).not.toBeInTheDocument();
101+
await expect.element(col1Editor).not.toBeInTheDocument();
105102
await expect.element(grid).toHaveProperty('scrollTop', 2001);
106103
// TODO: await userEvent.keyboard('123'); fails in FF
107104
await userEvent.keyboard('{enter}123');
108105
await testCount(activeRowCells, 2);
109-
await expect.element(editor).toHaveValue(123);
106+
await expect.element(col1Editor).toHaveValue(123);
110107
await expect.element(grid).toHaveProperty('scrollTop', 0);
111108
});
112109

@@ -116,13 +113,13 @@ describe('Editor', () => {
116113
const cell = getCellsAtRowIndex(0).nth(1);
117114
await expect.element(cell).not.toHaveAttribute('aria-readonly');
118115
await userEvent.dblClick(cell);
119-
await expect.element(page.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument();
116+
await expect.element(col2Editor).toBeInTheDocument();
120117
});
121118

122119
it('should be editable if an editor is specified and editable is set to true', async () => {
123120
await page.render(<EditorTest editable />);
124121
await userEvent.dblClick(getCellsAtRowIndex(0).nth(1));
125-
await expect.element(page.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument();
122+
await expect.element(col2Editor).toBeInTheDocument();
126123
});
127124

128125
it('should not be editable if editable is false', async () => {
@@ -131,19 +128,16 @@ describe('Editor', () => {
131128
await expect.element(cell).toHaveAttribute('aria-readonly', 'true');
132129
await userEvent.dblClick(cell);
133130

134-
await expect
135-
.element(page.getByRole('textbox', { name: 'col2-editor' }))
136-
.not.toBeInTheDocument();
131+
await expect.element(col2Editor).not.toBeInTheDocument();
137132
});
138133

139134
it('should not be editable if editable function returns false', async () => {
140135
await page.render(<EditorTest editable={(row) => row.col1 === 2} />);
141136
await userEvent.dblClick(getCellsAtRowIndex(0).nth(1));
142-
const editor = page.getByRole('textbox', { name: 'col2-editor' });
143-
await expect.element(editor).not.toBeInTheDocument();
137+
await expect.element(col2Editor).not.toBeInTheDocument();
144138

145139
await userEvent.dblClick(getCellsAtRowIndex(1).nth(1));
146-
await expect.element(editor).toBeInTheDocument();
140+
await expect.element(col2Editor).toBeInTheDocument();
147141
});
148142
});
149143

@@ -153,21 +147,20 @@ describe('Editor', () => {
153147
<EditorTest createEditorPortal editorOptions={{ displayCellContent: true }} />
154148
);
155149
await userEvent.dblClick(getCellsAtRowIndex(0).nth(1));
156-
const editor1 = page.getByRole('textbox', { name: 'col2-editor' });
157-
await expect.element(editor1).toHaveValue('a1');
150+
await expect.element(col2Editor).toHaveValue('a1');
158151
await userEvent.keyboard('23');
159152
// The cell value should update as the editor value is changed
160153
await expect.element(getCellsAtRowIndex(0).nth(1)).toHaveTextContent(/^a123$/);
161154
// clicking in a portal does not count as an outside click
162-
await userEvent.click(editor1);
163-
await expect.element(editor1).toBeInTheDocument();
155+
await userEvent.click(col2Editor);
156+
await expect.element(col2Editor).toBeInTheDocument();
164157
// true outside clicks are still detected
165158
await userEvent.click(page.getByText('outside'));
166-
await expect.element(editor1).not.toBeInTheDocument();
159+
await expect.element(col2Editor).not.toBeInTheDocument();
167160
await expect.element(getCellsAtRowIndex(0).nth(1)).not.toHaveFocus();
168161

169162
await userEvent.dblClick(getCellsAtRowIndex(0).nth(1));
170-
await userEvent.click(page.getByRole('textbox', { name: 'col2-editor' }));
163+
await userEvent.click(col2Editor);
171164
await userEvent.keyboard('{enter}');
172165
await expect.element(getCellsAtRowIndex(0).nth(1)).toHaveFocus();
173166
});
@@ -181,13 +174,12 @@ describe('Editor', () => {
181174
/>
182175
);
183176
await userEvent.dblClick(getCellsAtRowIndex(0).nth(1));
184-
const editor = page.getByRole('textbox', { name: 'col2-editor' });
185-
await expect.element(editor).toBeInTheDocument();
177+
await expect.element(col2Editor).toBeInTheDocument();
186178
await userEvent.click(page.getByText('outside'));
187-
await expect.element(editor).toBeInTheDocument();
188-
await userEvent.click(editor);
179+
await expect.element(col2Editor).toBeInTheDocument();
180+
await userEvent.click(col2Editor);
189181
await userEvent.keyboard('{enter}');
190-
await expect.element(editor).not.toBeInTheDocument();
182+
await expect.element(col2Editor).not.toBeInTheDocument();
191183
});
192184

193185
it('should not open editor if onCellKeyDown prevents the default event', async () => {
@@ -205,9 +197,7 @@ describe('Editor', () => {
205197
await userEvent.keyboard('{enter}yz{enter}');
206198
await expect.element(getCellsAtRowIndex(0).nth(1)).toHaveTextContent(/^a1yz$/);
207199
await userEvent.keyboard('x');
208-
await expect
209-
.element(page.getByRole('textbox', { name: 'col2-editor' }))
210-
.not.toBeInTheDocument();
200+
await expect.element(col2Editor).not.toBeInTheDocument();
211201
});
212202

213203
it('should prevent navigation if onCellKeyDown prevents the default event', async () => {
@@ -236,10 +226,9 @@ describe('Editor', () => {
236226
/>
237227
);
238228
await userEvent.dblClick(getCellsAtRowIndex(0).nth(1));
239-
const editor = page.getByRole('textbox', { name: 'col2-editor' });
240-
await expect.element(editor).toBeInTheDocument();
229+
await expect.element(col2Editor).toBeInTheDocument();
241230
await userEvent.click(page.getByRole('button', { name: 'update' }));
242-
await expect.element(editor).not.toBeInTheDocument();
231+
await expect.element(col2Editor).not.toBeInTheDocument();
243232
});
244233

245234
it('should not close the editor when closeOnExternalRowChange is false and row is changed from outside', async () => {
@@ -252,10 +241,9 @@ describe('Editor', () => {
252241
/>
253242
);
254243
await userEvent.dblClick(getCellsAtRowIndex(0).nth(1));
255-
const editor = page.getByRole('textbox', { name: 'col2-editor' });
256-
await expect.element(editor).toBeInTheDocument();
244+
await expect.element(col2Editor).toBeInTheDocument();
257245
await userEvent.click(page.getByRole('button', { name: 'update' }));
258-
await expect.element(editor).toBeInTheDocument();
246+
await expect.element(col2Editor).toBeInTheDocument();
259247
});
260248
});
261249

‎test/browser/utils.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,12 @@ export async function validateCellPosition(columnIdx: number, rowIdx: number) {
2727

2828
export async function scrollGrid(options: ScrollToOptions) {
2929
await new Promise((resolve) => {
30-
const gridElement = page.getGrid().element() as HTMLElement;
31-
gridElement.addEventListener('scrollend', resolve, { once: true });
32-
gridElement.scroll(options);
30+
// wait for browser state to stablize before scrolling, to avoid flaky scroll-related tests
31+
requestAnimationFrame(() => {
32+
const gridElement = page.getGrid().element();
33+
gridElement.addEventListener('scrollend', resolve, { once: true });
34+
gridElement.scroll(options);
35+
});
3336
});
3437
}
3538

‎vite.config.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const viewport = { width: 1920, height: 1080 } as const;
4444
// vitest modifies the instance objects, so we cannot rely on static objects
4545
function getInstances(): BrowserInstanceOption[] {
4646
const opts: PlaywrightProviderOptions = {
47-
actionTimeout: 1000,
47+
actionTimeout: 2000,
4848
contextOptions: {
4949
viewport
5050
}
@@ -123,9 +123,6 @@ export default defineConfig(
123123
include: ['browser/**/*.test.*'],
124124
browser: {
125125
enabled: true,
126-
trace: {
127-
mode: isCI ? 'off' : 'retain-on-failure'
128-
},
129126
instances: getInstances(),
130127
commands: { resizeColumn, dragFill },
131128
viewport,

0 commit comments

Comments
 (0)