test: refactor and add manual popover tests

Co-authored-by: TheMcnafaha <[email protected]>

Author: cwoolum

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

@@ -9,6 +9,7 @@ export default component$(() => {
       <Popover id="hero-id" class="popover">
         My Hero!
       </Popover>
+      <div id="content-outside-of-popover"></div>
     </>
   );
 });

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

@@ -11,10 +11,20 @@ export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
     return rootLocator.locator('[popovertarget]');
   };
 
+  const getAllPopovers = () => {
+    return getPopover().all();
+  };
+
+  const getAllTriggers = () => {
+    return getTrigger().all();
+  };
+
   return {
     ...rootLocator,
     locator: rootLocator,
     getPopover,
+    getAllPopovers,
     getTrigger,
+    getAllTriggers,
   };
 }

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

@@ -53,10 +53,10 @@ test.describe('Mouse Behavior', () => {
   THEN the first popover should close and the second one appear`, async ({ page }) => {
     const { driver: d } = await setup(page, 'auto');
     //ask shai: is it good to use nth here???
-    const firstPopOver = d.getPopover().nth(0);
+    const [firstPopOver, secondPopOver] = await d.getAllPopovers();
+
     const firstPopoverTrigger = d.getTrigger().nth(0);
 
-    const secondPopOver = d.getPopover().nth(1);
     const secondPopoverTrigger = d.getTrigger().nth(1);
 
     await expect(firstPopOver).toBeHidden();
@@ -70,6 +70,47 @@ test.describe('Mouse Behavior', () => {
 
     await expect(firstPopOver).toBeHidden();
   });
+
+  test(`GIVEN a pair of manual popovers
+  WHEN clicking the first trigger on the page and then clicking the second trigger
+  THEN then both popovers should be opened`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'manual');
+
+    //ask shai: is it good to use nth here???
+    const [firstPopOver, secondPopOver] = await d.getAllPopovers();
+
+    const firstPopoverTrigger = d.getTrigger().nth(0);
+
+    const secondPopoverTrigger = d.getTrigger().nth(1);
+
+    await expect(firstPopOver).toBeHidden();
+    await expect(secondPopOver).toBeHidden();
+
+    await firstPopoverTrigger.click();
+    await secondPopoverTrigger.click();
+
+    await expect(firstPopOver).toBeVisible();
+    await expect(secondPopOver).toBeVisible();
+  });
+
+  test(`GIVEN a pair of manual opened popovers
+  WHEN clicking the first trigger on the page and then clicking the second trigger
+  THEN then both popovers should be opened`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'manual');
+
+    //ask shai: is it good to use nth here???
+    const [firstPopOver, secondPopOver] = await d.getAllPopovers();
+    const [firstPopoverTrigger, secondPopoverTrigger] = await d.getAllTriggers();
+
+    await expect(firstPopOver).toBeHidden();
+    await expect(secondPopOver).toBeHidden();
+
+    await firstPopoverTrigger.click();
+    await secondPopoverTrigger.click();
+
+    await expect(firstPopOver).toBeVisible();
+    await expect(secondPopOver).toBeVisible();
+  });
 });
 
 test.describe('Keyboard Behavior', () => {