Skip to content

Commit

Permalink
tests: fix popover tests (except a bit of flakiness)
Browse files Browse the repository at this point in the history
  • Loading branch information
@thejackshelton
thejackshelton committed Apr 15, 2024
1 parent 3f5a06b commit 4cfb772
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 48 deletions.
4 changes: 0 additions & 4 deletions apps/website/src/routes/docs/headless/popover/examples/hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,6 @@ export default component$(() => {
<Popover id="hero-id" class="popover">
My Hero!
</Popover>
<div
id="content-outside-of-popover"
style={{ width: '10px', height: '10px' }}
></div>
</>
);
});
75 changes: 31 additions & 44 deletions packages/kit-headless/src/components/popover/popover.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,7 @@ test.describe('Mouse Behavior', () => {
// If I use `toBeVisible` here, the test fails that the `toBeHidden` check below????
await expect(d.getPopover()).toHaveCSS('opacity', '1');

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

await expect(d.getPopover()).toBeHidden();
});
Expand All @@ -60,10 +59,10 @@ test.describe('Mouse Behavior', () => {
await expect(firstPopOver).toBeHidden();
await expect(secondPopOver).toBeHidden();

await firstPopoverTrigger.click();
await firstPopoverTrigger.click({ position: { x: 1, y: 1 } });
await expect(firstPopOver).toBeVisible();

await secondPopoverTrigger.click();
await secondPopoverTrigger.click({ position: { x: 1, y: 1 } });
await expect(secondPopOver).toBeVisible();

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

await firstPopoverTrigger.click();
await secondPopoverTrigger.click();
await firstPopoverTrigger.click({ position: { x: 1, y: 1 } });
await secondPopoverTrigger.click({ position: { x: 1, y: 1 } });

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

// Arrange
await firstPopoverTrigger.click();
await secondPopoverTrigger.click();
await firstPopoverTrigger.click({ position: { x: 1, y: 1 } });
await secondPopoverTrigger.click({ position: { x: 1, y: 1 } });

await expect(firstPopOver).toBeVisible();
await expect(secondPopOver).toBeVisible();
Expand All @@ -114,27 +113,30 @@ test.describe('Mouse Behavior', () => {
await expect(secondPopOver).toBeHidden();
});

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

const popover = d.getPopover();
const trigger = d.getTrigger();

await trigger.click();
await trigger.hover();

await expect(popover).toBeVisible();

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

expect(popoverBoundingBox?.y).toBeLessThan(triggerBoundingBox?.y ?? 0);
expect(popoverBoundingBox?.x).toBeGreaterThan(
(triggerBoundingBox?.x ?? Number.MAX_VALUE) +
(triggerBoundingBox?.width ?? Number.MAX_VALUE),
);
});

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

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

console.log(triggerBoundingBox, popoverBoundingBox);

const triggerBottomAbsolutePosition =
(triggerBoundingBox?.y ?? 0) + (triggerBoundingBox?.height ?? 0);

expect((popoverBoundingBox?.y ?? 0) - triggerBottomAbsolutePosition).toBe(24);
expect(
(triggerBoundingBox?.y ?? 0) -
((popoverBoundingBox?.y ?? 0) + (popoverBoundingBox?.height ?? 0)),
).toBe(40);
});

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

await d.getTrigger().focus();
await d.getTrigger().press(key);

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

// Open the popover
await d.getTrigger().focus();
await d.getTrigger().press(key);

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

await d.getTrigger().blur();

// Close the popover
await d.getTrigger().focus();
await d.getTrigger().press(key);

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

// Open the popover
await d.getTrigger().focus();
await d.getTrigger().press('Enter');

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

await firstPopoverTrigger.focus();
await firstPopoverTrigger.press('Enter');
await expect(firstPopOver).toBeVisible();
await firstPopoverTrigger.press('Tab');
Expand All @@ -282,10 +275,8 @@ test.describe('Keyboard Behavior', () => {
await expect(firstPopOver).toBeHidden();
await expect(secondPopOver).toBeHidden();

await firstPopoverTrigger.focus();
await firstPopoverTrigger.press('Enter');

await secondPopoverTrigger.focus();
await secondPopoverTrigger.press('Enter');

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

// Arrange
await firstPopoverTrigger.focus();
await firstPopoverTrigger.press('Enter');

await secondPopoverTrigger.focus();
await secondPopoverTrigger.press('Enter');

await expect(firstPopOver).toBeVisible();
await expect(secondPopOver).toBeVisible();

// Act
await secondPopoverTrigger.press('Enter');

await firstPopoverTrigger.focus();
await firstPopoverTrigger.press('Enter');
await expect(secondPopOver).toBeHidden();

// Assert
await firstPopoverTrigger.press('Enter');
await expect(firstPopOver).toBeHidden();
await expect(secondPopOver).toBeHidden();
});

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

await expect(popover).toBeHidden();

await programmaticButtonTrigger.focus();
await programmaticButtonTrigger.press('o');

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

await programmaticButtonTrigger.focus();
await programmaticButtonTrigger.press('o');

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

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

const popover = d.getPopover();
const trigger = d.getTrigger();

await trigger.focus();
await trigger.press('Enter');

await expect(popover).toBeVisible();

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

expect(popoverBoundingBox?.y).toBeLessThan(triggerBoundingBox?.y ?? 0);
expect(popoverBoundingBox?.x).toBeGreaterThan(
(triggerBoundingBox?.x ?? Number.MAX_VALUE) +
(triggerBoundingBox?.width ?? Number.MAX_VALUE),
);
});
});

0 comments on commit 4cfb772

Please sign in to comment.