Skip to content

Commit 4cfb772

Browse files
thejacksheltonthejackshelton
committed
tests: fix popover tests (except a bit of flakiness)
1 parent 3f5a06b commit 4cfb772

File tree

2 files changed

+31
-48
lines changed
  • apps/website/src/routes/docs/headless/popover/examples
  • packages/kit-headless/src/components/popover

2 files changed

+31
-48
lines changed

‎apps/website/src/routes/docs/headless/popover/examples/hero.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,6 @@ export default component$(() => {
99
<Popover id="hero-id" class="popover">
1010
My Hero!
1111
</Popover>
12-
<div
13-
id="content-outside-of-popover"
14-
style={{ width: '10px', height: '10px' }}
15-
></div>
1612
</>
1713
);
1814
});

‎packages/kit-headless/src/components/popover/popover.test.ts‎

Lines changed: 31 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,7 @@ test.describe('Mouse Behavior', () => {
4343
// If I use `toBeVisible` here, the test fails that the `toBeHidden` check below????
4444
await expect(d.getPopover()).toHaveCSS('opacity', '1');
4545

46-
const outsideDiv = page.locator('#content-outside-of-popover');
47-
await outsideDiv.click();
46+
await page.mouse.click(0, 0);
4847

4948
await expect(d.getPopover()).toBeHidden();
5049
});
@@ -60,10 +59,10 @@ test.describe('Mouse Behavior', () => {
6059
await expect(firstPopOver).toBeHidden();
6160
await expect(secondPopOver).toBeHidden();
6261

63-
await firstPopoverTrigger.click();
62+
await firstPopoverTrigger.click({ position: { x: 1, y: 1 } });
6463
await expect(firstPopOver).toBeVisible();
6564

66-
await secondPopoverTrigger.click();
65+
await secondPopoverTrigger.click({ position: { x: 1, y: 1 } });
6766
await expect(secondPopOver).toBeVisible();
6867

6968
await expect(firstPopOver).toBeHidden();
@@ -81,8 +80,8 @@ test.describe('Mouse Behavior', () => {
8180
await expect(firstPopOver).toBeHidden();
8281
await expect(secondPopOver).toBeHidden();
8382

84-
await firstPopoverTrigger.click();
85-
await secondPopoverTrigger.click();
83+
await firstPopoverTrigger.click({ position: { x: 1, y: 1 } });
84+
await secondPopoverTrigger.click({ position: { x: 1, y: 1 } });
8685

8786
await expect(firstPopOver).toBeVisible();
8887
await expect(secondPopOver).toBeVisible();
@@ -97,8 +96,8 @@ test.describe('Mouse Behavior', () => {
9796
const [firstPopoverTrigger, secondPopoverTrigger] = await d.getAllTriggers();
9897

9998
// Arrange
100-
await firstPopoverTrigger.click();
101-
await secondPopoverTrigger.click();
99+
await firstPopoverTrigger.click({ position: { x: 1, y: 1 } });
100+
await secondPopoverTrigger.click({ position: { x: 1, y: 1 } });
102101

103102
await expect(firstPopOver).toBeVisible();
104103
await expect(secondPopOver).toBeVisible();
@@ -114,27 +113,30 @@ test.describe('Mouse Behavior', () => {
114113
await expect(secondPopOver).toBeHidden();
115114
});
116115

117-
test(`GIVEN a combobox with placement set to top
118-
WHEN opening the combobox
119-
THEN the popover should appear above the trigger`, async ({ page }) => {
116+
test(`GIVEN a popover with placement set to top
117+
WHEN opening the popover
118+
THEN the popover should appear to the right of the trigger`, async ({ page }) => {
120119
const { driver: d } = await setup(page, 'placement');
121120

122121
const popover = d.getPopover();
123122
const trigger = d.getTrigger();
124123

125-
await trigger.click();
124+
await trigger.hover();
126125

127126
await expect(popover).toBeVisible();
128127

129128
const popoverBoundingBox = await popover.boundingBox();
130129
const triggerBoundingBox = await trigger.boundingBox();
131130

132-
expect(popoverBoundingBox?.y).toBeLessThan(triggerBoundingBox?.y ?? 0);
131+
expect(popoverBoundingBox?.x).toBeGreaterThan(
132+
(triggerBoundingBox?.x ?? Number.MAX_VALUE) +
133+
(triggerBoundingBox?.width ?? Number.MAX_VALUE),
134+
);
133135
});
134136

135-
test(`GIVEN a combobox with a gutter configured
136-
WHEN opening the combobox
137-
THEN the popover should be spaced 24px from the combobox`, async ({ page }) => {
137+
test(`GIVEN a popover with a gutter configured
138+
WHEN opening the popover
139+
THEN the popover should be spaced 40px from the popover`, async ({ page }) => {
138140
const { driver: d } = await setup(page, 'gutter');
139141

140142
const popover = d.getPopover();
@@ -147,12 +149,10 @@ test.describe('Mouse Behavior', () => {
147149
const popoverBoundingBox = await popover.boundingBox();
148150
const triggerBoundingBox = await trigger.boundingBox();
149151

150-
console.log(triggerBoundingBox, popoverBoundingBox);
151-
152-
const triggerBottomAbsolutePosition =
153-
(triggerBoundingBox?.y ?? 0) + (triggerBoundingBox?.height ?? 0);
154-
155-
expect((popoverBoundingBox?.y ?? 0) - triggerBottomAbsolutePosition).toBe(24);
152+
expect(
153+
(triggerBoundingBox?.y ?? 0) -
154+
((popoverBoundingBox?.y ?? 0) + (popoverBoundingBox?.height ?? 0)),
155+
).toBe(40);
156156
});
157157

158158
// test(`GIVEN a combobox with a flip configured
@@ -190,7 +190,6 @@ test.describe('Keyboard Behavior', () => {
190190
const { driver: d } = await setup(page, 'hero');
191191
await expect(d.getPopover()).toBeHidden();
192192

193-
await d.getTrigger().focus();
194193
await d.getTrigger().press(key);
195194

196195
await expect(d.getPopover()).toBeVisible();
@@ -202,15 +201,11 @@ test.describe('Keyboard Behavior', () => {
202201
const { driver: d } = await setup(page, 'hero');
203202

204203
// Open the popover
205-
await d.getTrigger().focus();
206204
await d.getTrigger().press(key);
207205

208206
await expect(d.getPopover()).toBeVisible();
209207

210-
await d.getTrigger().blur();
211-
212208
// Close the popover
213-
await d.getTrigger().focus();
214209
await d.getTrigger().press(key);
215210

216211
await expect(d.getPopover()).toBeHidden();
@@ -223,7 +218,6 @@ test.describe('Keyboard Behavior', () => {
223218
const { driver: d } = await setup(page, 'hero');
224219

225220
// Open the popover
226-
await d.getTrigger().focus();
227221
await d.getTrigger().press('Enter');
228222

229223
await expect(d.getPopover()).toBeVisible();
@@ -259,7 +253,6 @@ test.describe('Keyboard Behavior', () => {
259253
await expect(firstPopOver).toBeHidden();
260254
await expect(secondPopOver).toBeHidden();
261255

262-
await firstPopoverTrigger.focus();
263256
await firstPopoverTrigger.press('Enter');
264257
await expect(firstPopOver).toBeVisible();
265258
await firstPopoverTrigger.press('Tab');
@@ -282,10 +275,8 @@ test.describe('Keyboard Behavior', () => {
282275
await expect(firstPopOver).toBeHidden();
283276
await expect(secondPopOver).toBeHidden();
284277

285-
await firstPopoverTrigger.focus();
286278
await firstPopoverTrigger.press('Enter');
287279

288-
await secondPopoverTrigger.focus();
289280
await secondPopoverTrigger.press('Enter');
290281

291282
await expect(firstPopOver).toBeVisible();
@@ -301,24 +292,20 @@ test.describe('Keyboard Behavior', () => {
301292
const [firstPopoverTrigger, secondPopoverTrigger] = await d.getAllTriggers();
302293

303294
// Arrange
304-
await firstPopoverTrigger.focus();
305295
await firstPopoverTrigger.press('Enter');
306296

307-
await secondPopoverTrigger.focus();
308297
await secondPopoverTrigger.press('Enter');
309298

310299
await expect(firstPopOver).toBeVisible();
311300
await expect(secondPopOver).toBeVisible();
312301

313302
// Act
314303
await secondPopoverTrigger.press('Enter');
315-
316-
await firstPopoverTrigger.focus();
317-
await firstPopoverTrigger.press('Enter');
304+
await expect(secondPopOver).toBeHidden();
318305

319306
// Assert
307+
await firstPopoverTrigger.press('Enter');
320308
await expect(firstPopOver).toBeHidden();
321-
await expect(secondPopOver).toBeHidden();
322309
});
323310

324311
test(`GIVEN a programmatic popover
@@ -331,7 +318,6 @@ test.describe('Keyboard Behavior', () => {
331318

332319
await expect(popover).toBeHidden();
333320

334-
await programmaticButtonTrigger.focus();
335321
await programmaticButtonTrigger.press('o');
336322

337323
await expect(popover).toBeVisible();
@@ -345,7 +331,6 @@ test.describe('Keyboard Behavior', () => {
345331
const popover = d.getPopover();
346332
const programmaticButtonTrigger = d.getProgrammaticButtonTrigger();
347333

348-
await programmaticButtonTrigger.focus();
349334
await programmaticButtonTrigger.press('o');
350335

351336
await expect(popover).toBeVisible();
@@ -355,22 +340,24 @@ test.describe('Keyboard Behavior', () => {
355340
await expect(popover).toBeHidden();
356341
});
357342

358-
test(`GIVEN a combobox with placement set to top
359-
WHEN opening the combobox using the keyboard
360-
THEN the popover should appear above the trigger`, async ({ page }) => {
343+
test(`GIVEN a popover with placement set to top
344+
WHEN opening the popover using the keyboard
345+
THEN the popover should appear to the right of the trigger`, async ({ page }) => {
361346
const { driver: d } = await setup(page, 'placement');
362347

363348
const popover = d.getPopover();
364349
const trigger = d.getTrigger();
365350

366-
await trigger.focus();
367351
await trigger.press('Enter');
368352

369353
await expect(popover).toBeVisible();
370354

371355
const popoverBoundingBox = await popover.boundingBox();
372356
const triggerBoundingBox = await trigger.boundingBox();
373357

374-
expect(popoverBoundingBox?.y).toBeLessThan(triggerBoundingBox?.y ?? 0);
358+
expect(popoverBoundingBox?.x).toBeGreaterThan(
359+
(triggerBoundingBox?.x ?? Number.MAX_VALUE) +
360+
(triggerBoundingBox?.width ?? Number.MAX_VALUE),
361+
);
375362
});
376363
});

0 commit comments

Comments
 (0)