tests: more programmatic tests

Author: thejackshelton

apps/website/src/routes/docs/headless/popover/examples/basic.tsx

@@ -3,10 +3,10 @@ import { Popover, PopoverTrigger } from '@qwik-ui/headless';
 export default component$(() => {
   return (
     <>
-      <PopoverTrigger popovertarget="hero-id" class="popover-trigger">
+      <PopoverTrigger popovertarget="basic-id" class="popover-trigger">
         Popover Trigger
       </PopoverTrigger>
-      <Popover id="hero-id" class="popover">
+      <Popover id="basic-id" class="popover">
         My Hero!
       </Popover>
     </>

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

@@ -6,14 +6,14 @@ export default component$(() => {
 
   return (
     <>
-      <PopoverTrigger ref={triggerRef} popovertarget="popover-id" class="popover-trigger">
+      <PopoverTrigger ref={triggerRef} popovertarget="hero-id" class="popover-trigger">
         Click me
       </PopoverTrigger>
       <Popover
         anchorRef={triggerRef}
         floating={true}
         gutter={4}
-        id="popover-id"
+        id="hero-id"
         class="popover"
       >
         I am anchored to the popover trigger!

apps/website/src/routes/docs/headless/popover/examples/hide.tsx

@@ -0,0 +1,17 @@
+import { component$ } from '@builder.io/qwik';
+import { Popover, PopoverTrigger, usePopover } from '@qwik-ui/headless';
+export default component$(() => {
+  const { hidePopover } = usePopover(`hide-id`);
+
+  return (
+    <>
+      <button onClick$={() => hidePopover()}>hide popover</button>
+      <PopoverTrigger popovertarget="hide-id" class="popover-trigger">
+        Click me
+      </PopoverTrigger>
+      <Popover id="hide-id" class="popover">
+        My Hero!
+      </Popover>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/popover/examples/show.tsx

@@ -0,0 +1,14 @@
+import { component$ } from '@builder.io/qwik';
+import { Popover, usePopover } from '@qwik-ui/headless';
+export default component$(() => {
+  const { showPopover } = usePopover(`show-id`);
+
+  return (
+    <>
+      <button onClick$={() => showPopover()}>show popover</button>
+      <Popover id="show-id" class="popover">
+        My Hero!
+      </Popover>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/popover/examples/toggle.tsx

@@ -0,0 +1,14 @@
+import { component$ } from '@builder.io/qwik';
+import { Popover, usePopover } from '@qwik-ui/headless';
+export default component$(() => {
+  const { togglePopover } = usePopover(`toggle-id`);
+
+  return (
+    <>
+      <button onClick$={() => togglePopover()}>toggle popover</button>
+      <Popover id="toggle-id" class="popover">
+        My Hero!
+      </Popover>
+    </>
+  );
+});

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

@@ -62,6 +62,19 @@ test.describe('Mouse Behavior', () => {
     await expect(secondPopover).toBeVisible();
   });
 
+  test(`GIVEN an open manual popover
+        WHEN clicking elsewhere on the page
+        THEN the popover should remain open`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'manual');
+
+    // initial open
+    await d.openPopover('click', 0);
+
+    await page.mouse.click(0, 0);
+
+    await expect(d.getPopover().nth(0)).toBeVisible();
+  });
+
   test(`GIVEN a pair of manual popovers
         WHEN clicking the first trigger on the page
         AND then clicking the second trigger
@@ -319,3 +332,43 @@ test.describe('Keyboard Behavior', () => {
     );
   });
 });
+
+test.describe('Programmatic', () => {
+  // test(`GIVEN a programmatic popover
+  //       WHEN the showPopover function is called
+  //       THEN the popover should be open`, async ({ page }) => {
+  //   const { driver: d } = await setup(page, 'show');
+  //   await expect(d.getPopover()).toBeHidden();
+  //   const programmaticTrigger = page.getByRole('button', { name: 'show popover' });
+  //   await programmaticTrigger.click();
+  //   await expect(d.getPopover()).toBeVisible();
+  // });
+  // test(`GIVEN an open programmatic popover
+  // WHEN the hidePopover function is called
+  // THEN the popover should be hidden`, async ({ page }) => {
+  //   const { driver: d } = await setup(page, 'hide');
+  //   const programmaticTrigger = page.getByRole('button', { name: 'hide popover' });
+  //   // initial open
+  //   await d.openPopover('click');
+  //   await programmaticTrigger.click({ position: { x: 0, y: 0 } });
+  //   await expect(d.getPopover()).toBeHidden();
+  // });
+  // test(`GIVEN a programmatic popover
+  //       WHEN the togglePopover function is called
+  //       THEN the popover should be open`, async ({ page }) => {
+  //   const { driver: d } = await setup(page, 'toggle');
+  //   const programmaticTrigger = page.getByRole('button', { name: 'toggle popover' });
+  //   await programmaticTrigger.click();
+  //   await expect(d.getPopover()).toBeVisible();
+  // });
+  // test(`GIVEN an open programmatic popover
+  // WHEN the togglePopover function is called
+  // THEN the popover should be closed`, async ({ page }) => {
+  //   const { driver: d } = await setup(page, 'toggle');
+  //   const programmaticTrigger = page.getByRole('button', { name: 'toggle popover' });
+  //   await programmaticTrigger.click();
+  //   await expect(d.getPopover()).toBeVisible();
+  //   await programmaticTrigger.click();
+  //   await expect(d.getPopover()).toBeHidden();
+  // });
+});