refactor: fix up rest of current popover gets

Author: thejackshelton

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

@@ -37,61 +37,45 @@ test.describe('Mouse Behavior', () => {
         THEN the popover should close`, async ({ page }) => {
     const { driver: d } = await setup(page, 'basic');
 
-    await expect(d.getPopover()).toBeHidden();
-    await d.getTrigger().click();
-
-    await expect(d.getPopover()).toBeVisible();
+    await d.openPopover('click');
 
     await page.mouse.click(0, 0);
 
     await expect(d.getPopover()).toBeHidden();
   });
 
-  test(`GIVEN an open popover
-  WHEN clicking the first trigger on the page and then clicking the second trigger
-  THEN the first popover should close and the second one appear`, async ({ page }) => {
+  test(`GIVEN a pair of popovers in auto mode
+        WHEN clicking the first trigger
+        AND clicking the second trigger
+        THEN the first popover should close and the second one appear`, async ({
+    page,
+  }) => {
     const { driver: d } = await setup(page, 'auto');
 
     const firstPopover = d.getPopover().nth(0);
     const secondPopover = d.getPopover().nth(1);
-    const firstTrigger = d.getTrigger().nth(0);
-    const secondTrigger = d.getTrigger().nth(1);
 
-    await expect(firstPopover).toBeHidden();
-    await expect(secondPopover).toBeHidden();
-
-    await firstTrigger.click({ position: { x: 1, y: 1 } });
-    await expect(firstPopover).toBeVisible();
-
-    await secondTrigger.click({ position: { x: 1, y: 1 } });
-    await expect(secondPopover).toBeVisible();
+    await d.openPopover('click', 0);
+    await d.openPopover('click', 1);
 
     await expect(firstPopover).toBeHidden();
+    await expect(secondPopover).toBeVisible();
   });
 
   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 }) => {
+        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');
 
-    const firstPopover = d.getPopover().nth(0);
-    const secondPopover = d.getPopover().nth(1);
-    const firstTrigger = d.getTrigger().nth(0);
-    const secondTrigger = d.getTrigger().nth(1);
-
-    await expect(firstPopover).toBeHidden();
-    await expect(secondPopover).toBeHidden();
-
-    await firstTrigger.click({ position: { x: 1, y: 1 } });
-    await secondTrigger.click({ position: { x: 1, y: 1 } });
-
-    await expect(firstPopover).toBeVisible();
-    await expect(secondPopover).toBeVisible();
+    await d.openPopover('click', 0);
+    await d.openPopover('click', 1);
   });
 
   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 closed`, async ({ page }) => {
+        WHEN clicking the first trigger on the page
+        AND clicking the second trigger
+        THEN both popovers should be closed`, async ({ page }) => {
     const { driver: d } = await setup(page, 'manual');
 
     const firstPopover = d.getPopover().nth(0);
@@ -102,9 +86,8 @@ test.describe('Mouse Behavior', () => {
     await d.openPopover('click', 0);
     await d.openPopover('click', 1);
 
-    // Need to be explicit about where we're clicking. By default
-    // the click action tries to click the center of the element
-    // but in this case, the popover is covering it.
+    // Explicitly specifying click positions due to default behavior targeting the element's center,
+    // which is obscured by the popover in this scenario.
     await firstTrigger.click({ position: { x: 1, y: 1 } });
     await secondTrigger.click({ position: { x: 1, y: 1 } });
 
@@ -136,8 +119,8 @@ test.describe('Mouse Behavior', () => {
   });
 
   test(`GIVEN a popover with a gutter configured
-  WHEN opening the popover
-  THEN the popover should be spaced 40px from the popover`, async ({ page }) => {
+        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();
@@ -210,7 +193,7 @@ test.describe('Keyboard Behavior', () => {
 
   test(`GIVEN an open popover
         WHEN focusing on the button and pressing the 'Escape' key
-        THEN the popover should close and the trigger be focused`, async ({ page }) => {
+        THEN the popover should close and the trigger focused`, async ({ page }) => {
     const { driver: d } = await setup(page, 'basic');
 
     // Open the popover
@@ -241,100 +224,83 @@ test.describe('Keyboard Behavior', () => {
 
     await expect(d.getPopover()).toBeVisible();
   });
-  test(`GIVEN an open auto popover
-        WHEN the first trigger opens 
-        AND the focus changes to the second popover
-        THEN the first popover should close and the second one appear`, async ({
-    page,
-  }) => {
-    const { driver: d } = await setup(page, 'auto');
 
-    const firstPopover = d.getPopover().nth(0);
-    const secondPopover = d.getPopover().nth(1);
-    const firstTrigger = d.getTrigger().nth(0);
-    const secondTrigger = d.getTrigger().nth(1);
+  test.describe('auto', () => {
+    test(`GIVEN a pair of auto popovers
+    WHEN one popover is open with the enter key
+    AND another popover is open with the enter key
+    THEN the first popover should close and the second one appear`, async ({ page }) => {
+      const { driver: d } = await setup(page, 'auto');
 
-    await expect(firstPopover).toBeHidden();
-    await expect(secondPopover).toBeHidden();
+      const firstPopover = d.getPopover().nth(0);
+      const secondPopover = d.getPopover().nth(1);
 
-    await d.openPopover('Enter', 0);
-    await firstTrigger.press('Tab');
+      await expect(firstPopover).toBeHidden();
+      await expect(secondPopover).toBeHidden();
 
-    await expect(secondTrigger).toBeFocused();
-    await d.openPopover('Enter', 1);
+      await d.openPopover('Enter', 0);
+      await d.openPopover('Enter', 1);
 
-    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');
-
-    await d.openPopover('click', 0);
-    await d.openPopover('click', 1);
+      await expect(firstPopover).toBeHidden();
+    });
   });
 
   test(`GIVEN a pair of manual opened popovers
-  WHEN activating the first trigger on the page and then activating the second trigger
-  THEN then both popovers should be closed`, async ({ page }) => {
+        WHEN pressing enter on the first trigger on the page
+        AND the same on the second trigger
+        THEN then both popovers should be closed`, async ({ page }) => {
     const { driver: d } = await setup(page, 'manual');
 
-    const [firstPopOver, secondPopOver] = await d.getAllPopovers();
-    const [firstPopoverTrigger, secondPopoverTrigger] = await d.getAllTriggers();
-
-    // Arrange
-    await firstPopoverTrigger.press('Enter');
-
-    await secondPopoverTrigger.press('Enter');
+    const firstPopover = d.getPopover().nth(0);
+    const secondPopover = d.getPopover().nth(1);
+    const firstTrigger = d.getTrigger().nth(0);
+    const secondTrigger = d.getTrigger().nth(1);
 
-    await expect(firstPopOver).toBeVisible();
-    await expect(secondPopOver).toBeVisible();
+    await d.openPopover('Enter', 0);
+    await d.openPopover('Enter', 1);
 
-    // Act
-    await secondPopoverTrigger.press('Enter');
-    await expect(secondPopOver).toBeHidden();
+    await secondTrigger.press('Enter');
+    await expect(secondPopover).toBeHidden();
 
     // Assert
-    await firstPopoverTrigger.press('Enter');
-    await expect(firstPopOver).toBeHidden();
+    await firstTrigger.press('Enter');
+    await expect(firstPopover).toBeHidden();
   });
 
-  test(`GIVEN a programmatic popover
-  WHEN focusing the button on the page and then typing 'o'
-  THEN the popover should open`, async ({ page }) => {
+  test(`GIVEN a popover
+        WHEN programmatically toggling the popover
+        THEN the popover should open`, async ({ page }) => {
     const { driver: d } = await setup(page, 'programmatic');
 
     const popover = d.getPopover();
-    const programmaticButtonTrigger = d.getProgrammaticButtonTrigger();
+    const programmaticTrigger = page.getByRole('button');
 
     await expect(popover).toBeHidden();
 
-    await programmaticButtonTrigger.press('o');
+    await programmaticTrigger.press('o');
 
     await expect(popover).toBeVisible();
   });
 
-  test(`GIVEN an open programmatic popover
-  WHEN focusing the button on the page and then typing 'o'
-  THEN the popover should close`, async ({ page }) => {
+  test(`GIVEN a popover
+        WHEN programmatically toggling the popover
+        THEN the popover should close`, async ({ page }) => {
     const { driver: d } = await setup(page, 'programmatic');
 
+    // initial open
     const popover = d.getPopover();
-    const programmaticButtonTrigger = d.getProgrammaticButtonTrigger();
-
-    await programmaticButtonTrigger.press('o');
-
+    const programmaticTrigger = page.getByRole('button');
+    await programmaticTrigger.press('o');
     await expect(popover).toBeVisible();
 
-    await programmaticButtonTrigger.press('o');
+    await programmaticTrigger.press('o');
 
     await expect(popover).toBeHidden();
   });
 
   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 }) => {
+        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();