test(popover): add placement tests

Author: cwoolum

apps/component-tests/src/routes/[kit]/[component]/[example]/index.tsx

@@ -2,5 +2,13 @@ import { component$ } from '@builder.io/qwik';
 import { ShowcaseTest } from '../../../../components/showcase-test/showcase-test';
 
 export default component$(() => {
-  return <ShowcaseTest />;
+  // Need to center the content in the screen
+  // so that tests like popover placement can
+  // be placed on top and not get overridden by
+  // lack of space
+  return (
+    <div class="flex h-screen items-center justify-center">
+      <ShowcaseTest />
+    </div>
+  );
 });

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

@@ -110,6 +110,24 @@ test.describe('Mouse Behavior', () => {
     await expect(firstPopOver).toBeHidden();
     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 }) => {
+    const { driver: d } = await setup(page, 'placement');
+
+    const popover = d.getPopover();
+    const trigger = d.getTrigger();
+
+    await trigger.click();
+
+    await expect(popover).toBeVisible();
+
+    const popoverBoundingBox = await popover.boundingBox();
+    const triggerBoundingBox = await trigger.boundingBox();
+
+    expect(popoverBoundingBox?.y).toBeLessThan(triggerBoundingBox?.y ?? 0);
+  });
 });
 
 test.describe('Keyboard Behavior', () => {
@@ -234,4 +252,23 @@ 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 }) => {
+    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);
+  });
 });