Skip to content

Commit 5f9b64a

Browse files
nikkimknikkimk
authored
test: fix flaky tests (#5502)
* test(overlay): added debugging for chrome * test(overlay): added debugging for chrome * test(overlay): added debugging for chrome * test(overlay): added debugging for chrome * test(overlay): fixed one flaky scroll test * test(overlay): conintue debugging * test(overlay): resolved one and debugging another * test(overlay): fixed one and added failure messages to another * test(overlay): added more failure details * test(overlay): is sp-opened not firing * test(overlay): are components ready * test(overlay): is overlay open and does overlay have rti * test(overlay): is button focusable? * test(overlay): added better failure feedback * test(overlay): are the elements connected * test(overlay): removed some debugging * test(overlay): removed some debugging * test(overlay): focus on one test * test(overlay): removed unneccessary afterEach * test(overlay): focus on another test * test(overlay): removed unneccessary rti arrowUp * test(overlay): commented out last two thirds * test(overlay): commented out last half * test(overlay): commented out last third * test(overlay): testing close event * test(overlay): wait for state instead of event * test(overlay): init testing helpers * test(overlay): updated occludes test * test(overlay): fixes commitlint error * test(overlay): only test one thing * test(overlay): test only one * test(overlay): do all extended tests work now * test(overlay): added timeouts * test(overlay): added timeouts * test(overlay): do all extended tests work now * test(picker): added timeouts * test(action-menu): simplified flaky tests * test(picker): simplified flaky tests * test(overlay): cleaned up overlay testing helpers * test(action-group): simplified flaky tests * test(overlay): added more failure details * test(picker): simplified flaky tests * test(overlay): simplified flaky tests * test(overlay): simplified flaky tests * test(overlay): simplified flaky tests * test(overlay): added more failure details * test(action-menu): added more failure details * test(overlay): added more failure details * test(action-menu): simplified flaky tests * test(action-menu): simplified flaky tests * test(overlay): added more failure details * test(picker): simplified flaky tests * test(picker): removed unneccessary setViewport * test(action-menu): removed unneccessary setViewport * test(overlay): removed unneccessary debugging * test(overlay): added more failure details * docs(number-field): simplified flaky tests * test(overlay): added more failure details * docs(number-field): simplified flaky tests * docs(number-field): simplified flaky tests * test(overlay): simplified flaky tests * test(overlay): increased timeout * test(overlay): increased timeout * test: updated copyright year * test(number-field): refactored * test(overlay): refactored * test(number-field): increased timeout * test(overlay): added more failure details * test(overlay): added more failure details * chore: added changeset * test(overlay): added more failure details * test(overlay): added more failure details * test(overlay): added more failure details * chore: removed changeset no consumer-facing changes
1 parent 95e4997 commit 5f9b64a

File tree

6 files changed

+371
-416
lines changed

6 files changed

+371
-416
lines changed

‎packages/action-group/test/action-group.test.ts‎

Lines changed: 12 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
Copyright 2020 Adobe. All rights reserved.
2+
Copyright 2025 Adobe. All rights reserved.
33
This file is licensed to you under the Apache License, Version 2.0 (the "License");
44
you may not use this file except in compliance with the License. You may obtain a copy
55
of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -44,6 +44,8 @@ import {
4444
arrowUpEvent,
4545
endEvent,
4646
homeEvent,
47+
sendMouseFrom,
48+
sendMouseTo,
4749
testForLitDevWarnings,
4850
} from '../../../test/testing-helpers';
4951
import { sendKeys } from '@web/test-runner-commands';
@@ -270,18 +272,8 @@ describe('ActionGroup', () => {
270272

271273
// get the bounding box of the first button
272274
const firstButton = el.querySelector('#first') as ActionButton;
273-
const rect = firstButton.getBoundingClientRect();
274-
sendMouse({
275-
steps: [
276-
{
277-
position: [
278-
rect.left + rect.width / 2,
279-
rect.top + rect.height / 2,
280-
],
281-
type: 'click',
282-
},
283-
],
284-
});
275+
sendMouseTo(firstButton, 'click');
276+
285277
await elementUpdated(firstButton);
286278

287279
// expect all the elements of the focus group to have a tabIndex of -1 except the first button because it is focused using mouse
@@ -303,14 +295,7 @@ describe('ActionGroup', () => {
303295
).to.equal(-1);
304296

305297
// click outside the action-group and it should loose focus and update the tabIndexes
306-
sendMouse({
307-
steps: [
308-
{
309-
position: [0, 0],
310-
type: 'click',
311-
},
312-
],
313-
});
298+
sendMouseFrom(el, 'click');
314299

315300
await elementUpdated(el);
316301

@@ -336,22 +321,13 @@ describe('ActionGroup', () => {
336321

337322
// get the bounding box of the action-menu
338323
const actionMenu = el.querySelector('#action-menu') as ActionMenu;
339-
const actionMenuRect = actionMenu.getBoundingClientRect();
340324

341-
const opened = oneEvent(el.children[3] as ActionMenu, 'sp-opened');
342-
sendMouse({
343-
steps: [
344-
{
345-
position: [
346-
actionMenuRect.left + actionMenuRect.width / 2,
347-
actionMenuRect.top + actionMenuRect.height / 2,
348-
],
349-
type: 'click',
350-
},
351-
],
352-
});
353-
await elementUpdated(el);
354-
await opened;
325+
sendMouseTo(actionMenu, 'click');
326+
await waitUntil(
327+
() => actionMenu?.strategy?.overlay?.state === 'opened',
328+
`action-menu opened (status ${actionMenu?.strategy?.overlay?.state})`,
329+
{ timeout: 300 }
330+
);
355331

356332
expect(actionMenu).to.equal(document.activeElement);
357333
const closed = oneEvent(el.children[3] as ActionMenu, 'sp-closed');

‎packages/action-menu/test/action-menu-responsive.test.ts‎

Lines changed: 55 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,16 @@ import {
1515
expect,
1616
fixture,
1717
html,
18-
nextFrame,
19-
oneEvent,
18+
waitUntil,
2019
} from '@open-wc/testing';
2120
import { ActionMenu } from '@spectrum-web-components/action-menu';
2221
import '@spectrum-web-components/action-menu/sync/sp-action-menu.js';
2322
import '@spectrum-web-components/menu/sp-menu-divider.js';
2423
import '@spectrum-web-components/menu/sp-menu-item.js';
25-
import { setViewport } from '@web/test-runner-commands';
2624
import { spreadProps } from '../../../test/lit-helpers.js';
27-
import { sendMouse } from '../../../test/plugins/browser.js';
28-
import { isChrome } from '@spectrum-web-components/shared';
25+
import { sendMouseTo } from '../../../test/testing-helpers.js';
26+
import { Popover } from '@spectrum-web-components/popover';
27+
import { Tray } from '@spectrum-web-components/tray/src/Tray.js';
2928

3029
describe('ActionMenu, responsive', () => {
3130
let el: ActionMenu;
@@ -63,51 +62,42 @@ describe('ActionMenu, responsive', () => {
6362
el.isMobile.matches = true;
6463
el.bindEvents();
6564

66-
/**
67-
* While we can set the view port, but not `(hover: none) and (pointer: coarse)`
68-
* which prevents us from testing this at unit time. Hopefully there will be
69-
* a future version of Playwright and/or @web/test-runner that does allow this.
70-
* See: https://github.com/microsoft/playwright/issues/11781
71-
**/
72-
await setViewport({ width: 360, height: 640 });
73-
// Allow viewport update to propagate.
74-
await nextFrame();
75-
76-
const opened = oneEvent(el, 'sp-opened');
77-
78-
const boundingRect = el.button.getBoundingClientRect();
79-
sendMouse({
80-
steps: [
81-
{
82-
type: 'click',
83-
position: [
84-
boundingRect.x + boundingRect.width / 2,
85-
boundingRect.y + boundingRect.height / 2,
86-
],
87-
},
88-
],
89-
});
90-
91-
await opened;
65+
sendMouseTo(el.button, 'click');
66+
67+
// in this test we only need to wait to see if a tray opens
68+
let tray: Tray | null = null;
69+
await waitUntil(
70+
() => {
71+
tray = el.shadowRoot.querySelector('sp-tray') as Tray;
72+
return !!tray;
73+
},
74+
`tray appeared (el.open: ${el.open})`,
75+
{ timeout: 300 }
76+
);
9277

93-
const tray = el.shadowRoot.querySelector('sp-tray');
9478
const popover = el.shadowRoot.querySelector('sp-popover');
9579

9680
expect(tray).to.not.be.null;
9781
expect(popover).to.be.null;
9882
});
9983

10084
it('is a Popover in desktop', async () => {
101-
await setViewport({ width: 701, height: 640 });
102-
// Allow viewport update to propagate.
103-
await nextFrame();
104-
await nextFrame();
10585

106-
const opened = oneEvent(el, 'sp-opened');
10786
el.open = true;
108-
await opened;
10987

110-
const popover = el.shadowRoot.querySelector('sp-popover');
88+
// in this test we only need to wait to see if a popover opens
89+
let popover: Popover | null = null;
90+
await waitUntil(
91+
() => {
92+
popover = el.shadowRoot.querySelector(
93+
'sp-popover'
94+
) as Popover;
95+
return !!popover && popover.open;
96+
},
97+
`popover appeared (el.open: ${el.open})`,
98+
{ timeout: 300 }
99+
);
100+
111101
const tray = el.shadowRoot.querySelector('sp-tray');
112102

113103
expect(popover).to.not.be.null;
@@ -122,63 +112,50 @@ describe('ActionMenu, responsive', () => {
122112
});
123113

124114
it('is a Popover in mobile', async () => {
125-
// This test is flaky in chrome on ci so we're skipping it for now
126-
if (isChrome()) {
127-
return;
128-
}
129-
130115
/**
131116
* This is a hack to set the `isMobile` property to true so that we can test the MobileController
132117
*/
133118
el.isMobile.matches = true;
134119
el.bindEvents();
135120

136-
/**
137-
* While we can set the view port, but not `(hover: none) and (pointer: coarse)`
138-
* which prevents us from testing this at unit time. Hopefully there will be
139-
* a future version of Playwright and/or @web/test-runner that does allow this.
140-
* See: https://github.com/microsoft/playwright/issues/11781
141-
**/
142-
await setViewport({ width: 360, height: 640 });
143-
// Allow viewport update to propagate.
144-
await nextFrame();
145-
146-
const opened = oneEvent(el, 'sp-opened');
147-
148-
const boundingRect = el.button.getBoundingClientRect();
149-
sendMouse({
150-
steps: [
151-
{
152-
type: 'click',
153-
position: [
154-
boundingRect.x + boundingRect.width / 2,
155-
boundingRect.y + boundingRect.height / 2,
156-
],
157-
},
158-
],
159-
});
160-
await elementUpdated(el);
121+
el.open = true;
161122

162-
await opened;
123+
// in this test we only need to wait to see if a popover opens
124+
let popover: Popover | null = null;
125+
await waitUntil(
126+
() => {
127+
popover = el.shadowRoot.querySelector(
128+
'sp-popover'
129+
) as Popover;
130+
return !!popover && popover.open;
131+
},
132+
`popover appeared (el.open: ${el.open})`,
133+
{ timeout: 300 }
134+
);
163135

164136
const tray = el.shadowRoot.querySelector('sp-tray');
165-
const popover = el.shadowRoot.querySelector('sp-popover');
166137

167138
expect(tray).to.be.null;
168139
expect(popover).to.not.be.null;
169140
});
170141

171142
it('is a Popover in desktop', async () => {
172-
await setViewport({ width: 701, height: 640 });
173-
// Allow viewport update to propagate.
174-
await nextFrame();
175-
await nextFrame();
176143

177-
const opened = oneEvent(el, 'sp-opened');
178144
el.open = true;
179-
await opened;
180145

181-
const popover = el.shadowRoot.querySelector('sp-popover');
146+
// in this test we only need to wait to see if a popover opens
147+
let popover: Popover | null = null;
148+
await waitUntil(
149+
() => {
150+
popover = el.shadowRoot.querySelector(
151+
'sp-popover'
152+
) as Popover;
153+
return !!popover && popover.open;
154+
},
155+
`popover appeared (el.open: ${el.open})`,
156+
{ timeout: 300 }
157+
);
158+
182159
const tray = el.shadowRoot.querySelector('sp-tray');
183160

184161
expect(popover).to.not.be.null;

0 commit comments

Comments
 (0)