test(action-menu): restore tests (#10921)

**Related Issue:** #8586, #9000 ## Summary ✨🧪🔨✨
Esri · Dec 3, 2024 · f571c99 · f571c99
1 parent 27066c8
commit f571c99
Showing 1 changed file with 36 additions and 42 deletions.
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts
@@ -14,7 +14,7 @@ import {
 } from "../../tests/commonTests";
 import { TOOLTIP_OPEN_DELAY_MS } from "../tooltip/resources";
 import { CSS as TooltipCSS } from "../tooltip/resources";
-import { skipAnimations } from "../../tests/utils";
+import { isElementFocused, skipAnimations } from "../../tests/utils";
 import type { Action } from "../action/action";
 import { CSS, SLOTS, activeAttr } from "./resources";
 
@@ -177,34 +177,29 @@ describe("calcite-action-menu", () => {
     expect(await popover.getProperty("open")).toBe(false);
   });
 
-  it.skip("should close menu if slotted action is clicked", async () => {
-    const page = await newE2EPage({
-      html: `<calcite-action-menu open>
-          <calcite-action id="triggerAction" slot="${SLOTS.trigger}" text="Add" icon="plus" text-enabled></calcite-action>
-          <calcite-action id="slottedAction" text="Add" icon="plus" text-enabled></calcite-action>
-          <calcite-action text="Add" icon="plus" text-enabled></calcite-action>
-        </calcite-action-menu>
-        <div>
-        <button id="outside">outside</button>
-        </div>`,
-    });
-
+  it("should close menu if slotted action is clicked", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`
+      <calcite-action-menu open>
+        <calcite-action id="triggerAction" slot="${SLOTS.trigger}" text="Add" icon="plus" text-enabled></calcite-action>
+        <calcite-action id="slottedAction" text="Add" icon="plus" text-enabled></calcite-action>
+        <calcite-action text="Add" icon="plus" text-enabled></calcite-action>
+      </calcite-action-menu>
+    `);
+    await skipAnimations(page);
     await page.waitForChanges();
-
     const actionMenu = await page.find("calcite-action-menu");
 
     expect(await actionMenu.getProperty("open")).toBe(true);
 
     const action = await page.find("#slottedAction");
-
     await action.click();
-
     await page.waitForChanges();
 
     expect(await actionMenu.getProperty("open")).toBe(false);
 
     const focusTargetSelector = `#triggerAction`;
-    expect(await page.evaluate((selector) => document.activeElement.matches(selector), focusTargetSelector)).toBe(true);
+    await isElementFocused(page, focusTargetSelector);
   });
 
   it("should honor scale of expand icon", async () => {
@@ -427,25 +422,24 @@ describe("calcite-action-menu", () => {
       expect(await trigger.getProperty("active")).toBe(false);
     });
 
-    it.skip("should handle TAB navigation", async () => {
-      const page = await newE2EPage({
-        html: html`<calcite-action-menu>
+    it("should handle TAB navigation", async () => {
+      const page = await newE2EPage();
+      await page.setContent(
+        html`<calcite-action-menu>
           <calcite-action id="first" text="Add" icon="plus" text-enabled></calcite-action>
           <calcite-action id="second" text="Add" icon="minus" text-enabled></calcite-action>
           <calcite-action id="third" text="Add" icon="banana" text-enabled></calcite-action>
-        </calcite-action-menu> `,
-      });
-
+        </calcite-action-menu>`,
+      );
+      await skipAnimations(page);
       await page.waitForChanges();
-
       const actionMenu = await page.find("calcite-action-menu");
       const actions = await page.findAll("calcite-action");
 
       expect(await actionMenu.getProperty("open")).toBe(false);
 
       await actionMenu.callMethod("setFocus");
       await page.waitForChanges();
-
       await page.keyboard.press("ArrowDown");
       await page.waitForChanges();
 
@@ -455,31 +449,29 @@ describe("calcite-action-menu", () => {
       expect(actions[2].getAttribute(activeAttr)).toBe(null);
 
       await page.keyboard.press("Tab");
-
       await page.waitForChanges();
 
       expect(await actionMenu.getProperty("open")).toBe(false);
     });
 
-    it.skip("should click the active action on Enter key and close the menu", async () => {
-      const page = await newE2EPage({
-        html: html`<calcite-action-menu>
+    it("should click the active action on Enter key and close the menu", async () => {
+      const page = await newE2EPage();
+      await page.setContent(
+        html`<calcite-action-menu>
           <calcite-action id="first" text="Add" icon="plus" text-enabled></calcite-action>
           <calcite-action id="second" text="Add" icon="minus" text-enabled></calcite-action>
           <calcite-action id="third" text="Add" icon="banana" text-enabled></calcite-action>
         </calcite-action-menu> `,
-      });
-
+      );
+      await skipAnimations(page);
       await page.waitForChanges();
-
       const actionMenu = await page.find("calcite-action-menu");
       const actions = await page.findAll("calcite-action");
 
       expect(await actionMenu.getProperty("open")).toBe(false);
 
       await actionMenu.callMethod("setFocus");
       await page.waitForChanges();
-
       await page.keyboard.press("ArrowDown");
       await page.waitForChanges();
 
@@ -497,25 +489,24 @@ describe("calcite-action-menu", () => {
       expect(clickSpy).toHaveReceivedEventTimes(1);
     });
 
-    it.skip("should click the active action when clicked and close the menu", async () => {
-      const page = await newE2EPage({
-        html: html`<calcite-action-menu>
+    it("should click the active action when clicked and close the menu", async () => {
+      const page = await newE2EPage();
+      await page.setContent(
+        html`<calcite-action-menu>
           <calcite-action id="first" text="Add" icon="plus" text-enabled></calcite-action>
           <calcite-action id="second" text="Add" icon="minus" text-enabled></calcite-action>
           <calcite-action id="third" text="Add" icon="banana" text-enabled></calcite-action>
         </calcite-action-menu> `,
-      });
-
+      );
+      await skipAnimations(page);
       await page.waitForChanges();
-
       const actionMenu = await page.find("calcite-action-menu");
       const actions = await page.findAll("calcite-action");
 
       expect(await actionMenu.getProperty("open")).toBe(false);
 
       await actionMenu.callMethod("setFocus");
       await page.waitForChanges();
-
       await page.keyboard.press("ArrowDown");
       await page.waitForChanges();
 
@@ -526,8 +517,11 @@ describe("calcite-action-menu", () => {
       expect(actions[1].getAttribute(activeAttr)).toBe(null);
       expect(actions[2].getAttribute(activeAttr)).toBe(null);
 
-      // native click is used to close the open menu
-      await page.$eval("calcite-action", (el: Action["el"]) => el.click());
+      await page.$eval("calcite-action", (el: Action["el"]) =>
+        // native click is used to close the open menu
+        el.click(),
+      );
+      await page.waitForChanges();
 
       expect(await actionMenu.getProperty("open")).toBe(false);
       expect(clickSpy).toHaveReceivedEventTimes(1);