Skip to content

Commit 0523043

Browse files
thejacksheltonthejackshelton
committed
refactor: initial popover tests
1 parent 54c42b6 commit 0523043

File tree

2 files changed

+65
-46
lines changed

2 files changed

+65
-46
lines changed

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

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import { type Locator, type Page } from '@playwright/test';
1+
import { expect, type Locator, type Page } from '@playwright/test';
22

33
export type DriverLocator = Locator | Page;
44

5+
type OpenKeys = 'Enter' | 'Space';
6+
57
export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
68
const getPopover = () => {
79
return rootLocator.locator('[popover]');
@@ -11,6 +13,21 @@ export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
1113
return rootLocator.locator('[popovertarget]');
1214
};
1315

16+
const openPopover = async (key: OpenKeys | 'click', index?: number) => {
17+
const action = key === 'click' ? 'click' : 'press';
18+
const trigger = index !== undefined ? getTrigger().nth(index) : getTrigger();
19+
const popover = index !== undefined ? getPopover().nth(index) : getPopover();
20+
21+
if (action === 'click') {
22+
await trigger.click({ position: { x: 1, y: 1 } }); // Modified line
23+
} else {
24+
await trigger.press(key);
25+
}
26+
27+
// Needed because Playwright doesn't wait for the listbox to be visible
28+
await expect(popover).toBeVisible();
29+
};
30+
1431
const getAllPopovers = () => {
1532
return getPopover().all();
1633
};
@@ -30,6 +47,7 @@ export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
3047
getAllPopovers,
3148
getTrigger,
3249
getAllTriggers,
50+
openPopover,
3351
getProgrammaticButtonTrigger,
3452
};
3553
}

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

Lines changed: 46 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ test('@Visual diff', async ({ page }) => {
2121
});
2222

2323
test.describe('Mouse Behavior', () => {
24-
test(`GIVEN a closed hero popover
24+
test(`GIVEN a closed popover
2525
WHEN clicking on the trigger
2626
THEN the popover should be opened `, async ({ page }) => {
2727
const { driver: d } = await setup(page, 'hero');
@@ -32,90 +32,90 @@ test.describe('Mouse Behavior', () => {
3232
await expect(d.getPopover()).toBeVisible();
3333
});
3434

35-
test(`GIVEN an open hero popover
35+
test(`GIVEN an open popover
3636
WHEN clicking elsewhere on the page
3737
THEN the popover should close`, async ({ page }) => {
3838
const { driver: d } = await setup(page, 'hero');
3939

4040
await expect(d.getPopover()).toBeHidden();
4141
await d.getTrigger().click();
4242

43-
// If I use `toBeVisible` here, the test fails that the `toBeHidden` check below????
44-
await expect(d.getPopover()).toHaveCSS('opacity', '1');
43+
await expect(d.getPopover()).toBeVisible();
4544

4645
await page.mouse.click(0, 0);
4746

4847
await expect(d.getPopover()).toBeHidden();
4948
});
5049

51-
test(`GIVEN an open auto popover
50+
test(`GIVEN an open popover
5251
WHEN clicking the first trigger on the page and then clicking the second trigger
5352
THEN the first popover should close and the second one appear`, async ({ page }) => {
5453
const { driver: d } = await setup(page, 'auto');
55-
//ask shai: is it good to use nth here???
56-
const [firstPopOver, secondPopOver] = await d.getAllPopovers();
57-
const [firstPopoverTrigger, secondPopoverTrigger] = await d.getAllTriggers();
5854

59-
await expect(firstPopOver).toBeHidden();
60-
await expect(secondPopOver).toBeHidden();
55+
const firstPopover = d.getPopover().nth(0);
56+
const secondPopover = d.getPopover().nth(1);
57+
const firstTrigger = d.getTrigger().nth(0);
58+
const secondTrigger = d.getTrigger().nth(1);
6159

62-
await firstPopoverTrigger.click({ position: { x: 1, y: 1 } });
63-
await expect(firstPopOver).toBeVisible();
60+
await expect(firstPopover).toBeHidden();
61+
await expect(secondPopover).toBeHidden();
6462

65-
await secondPopoverTrigger.click({ position: { x: 1, y: 1 } });
66-
await expect(secondPopOver).toBeVisible();
63+
await firstTrigger.click({ position: { x: 1, y: 1 } });
64+
await expect(firstPopover).toBeVisible();
6765

68-
await expect(firstPopOver).toBeHidden();
66+
await secondTrigger.click({ position: { x: 1, y: 1 } });
67+
await expect(secondPopover).toBeVisible();
68+
69+
await expect(firstPopover).toBeHidden();
6970
});
7071

7172
test(`GIVEN a pair of manual popovers
7273
WHEN clicking the first trigger on the page and then clicking the second trigger
7374
THEN then both popovers should be opened`, async ({ page }) => {
7475
const { driver: d } = await setup(page, 'manual');
7576

76-
//ask shai: is it good to use nth here???
77-
const [firstPopOver, secondPopOver] = await d.getAllPopovers();
78-
const [firstPopoverTrigger, secondPopoverTrigger] = await d.getAllTriggers();
77+
const firstPopover = d.getPopover().nth(0);
78+
const secondPopover = d.getPopover().nth(1);
79+
const firstTrigger = d.getTrigger().nth(0);
80+
const secondTrigger = d.getTrigger().nth(1);
7981

80-
await expect(firstPopOver).toBeHidden();
81-
await expect(secondPopOver).toBeHidden();
82+
await expect(firstPopover).toBeHidden();
83+
await expect(secondPopover).toBeHidden();
8284

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

86-
await expect(firstPopOver).toBeVisible();
87-
await expect(secondPopOver).toBeVisible();
88+
await expect(firstPopover).toBeVisible();
89+
await expect(secondPopover).toBeVisible();
8890
});
8991

9092
test(`GIVEN a pair of manual opened popovers
9193
WHEN clicking the first trigger on the page and then clicking the second trigger
9294
THEN then both popovers should be closed`, async ({ page }) => {
9395
const { driver: d } = await setup(page, 'manual');
9496

95-
const [firstPopOver, secondPopOver] = await d.getAllPopovers();
96-
const [firstPopoverTrigger, secondPopoverTrigger] = await d.getAllTriggers();
97-
98-
// Arrange
99-
await firstPopoverTrigger.click({ position: { x: 1, y: 1 } });
100-
await secondPopoverTrigger.click({ position: { x: 1, y: 1 } });
97+
const firstPopover = d.getPopover().nth(0);
98+
const secondPopover = d.getPopover().nth(1);
99+
const firstTrigger = d.getTrigger().nth(0);
100+
const secondTrigger = d.getTrigger().nth(1);
101101

102-
await expect(firstPopOver).toBeVisible();
103-
await expect(secondPopOver).toBeVisible();
102+
await d.openPopover('click', 0);
103+
await d.openPopover('click', 1);
104104

105105
// Need to be explicit about where we're clicking. By default
106106
// the click action tries to click the center of the element
107107
// but in this case, the popover is covering it.
108-
await firstPopoverTrigger.click({ position: { x: 1, y: 1 } });
109-
await secondPopoverTrigger.click({ position: { x: 1, y: 1 } });
108+
await firstTrigger.click({ position: { x: 1, y: 1 } });
109+
await secondTrigger.click({ position: { x: 1, y: 1 } });
110110

111111
// Assert
112-
await expect(firstPopOver).toBeHidden();
113-
await expect(secondPopOver).toBeHidden();
112+
await expect(firstPopover).toBeHidden();
113+
await expect(secondPopover).toBeHidden();
114114
});
115115

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 }) => {
116+
test(`GIVEN a popover with placement set to right
117+
WHEN hovering over the popover
118+
THEN the popover should appear to the right of the trigger`, async ({ page }) => {
119119
const { driver: d } = await setup(page, 'placement');
120120

121121
const popover = d.getPopover();
@@ -128,10 +128,11 @@ test.describe('Mouse Behavior', () => {
128128
const popoverBoundingBox = await popover.boundingBox();
129129
const triggerBoundingBox = await trigger.boundingBox();
130130

131-
expect(popoverBoundingBox?.x).toBeGreaterThan(
131+
const triggerRightEdge =
132132
(triggerBoundingBox?.x ?? Number.MAX_VALUE) +
133-
(triggerBoundingBox?.width ?? Number.MAX_VALUE),
134-
);
133+
(triggerBoundingBox?.width ?? Number.MAX_VALUE);
134+
135+
expect(popoverBoundingBox?.x).toBeGreaterThan(triggerRightEdge);
135136
});
136137

137138
test(`GIVEN a popover with a gutter configured
@@ -149,10 +150,10 @@ test.describe('Mouse Behavior', () => {
149150
const popoverBoundingBox = await popover.boundingBox();
150151
const triggerBoundingBox = await trigger.boundingBox();
151152

152-
expect(
153+
const gutterSpace =
153154
(triggerBoundingBox?.y ?? 0) -
154-
((popoverBoundingBox?.y ?? 0) + (popoverBoundingBox?.height ?? 0)),
155-
).toBe(40);
155+
((popoverBoundingBox?.y ?? 0) + (popoverBoundingBox?.height ?? 0));
156+
expect(gutterSpace).toBe(40);
156157
});
157158

158159
// test(`GIVEN a combobox with a flip configured

0 commit comments

Comments
 (0)