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 index 55142a37698..cb49797c8f6 100755 --- 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: ` - - - - -
- -
`, - }); - + it("should close menu if slotted action is clicked", async () => { + const page = await newE2EPage(); + await page.setContent(html` + + + + + + `); + 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,17 +422,17 @@ describe("calcite-action-menu", () => { expect(await trigger.getProperty("active")).toBe(false); }); - it.skip("should handle TAB navigation", async () => { - const page = await newE2EPage({ - html: html` + it("should handle TAB navigation", async () => { + const page = await newE2EPage(); + await page.setContent( + html` - `, - }); - + `, + ); + await skipAnimations(page); await page.waitForChanges(); - const actionMenu = await page.find("calcite-action-menu"); const actions = await page.findAll("calcite-action"); @@ -445,7 +440,6 @@ describe("calcite-action-menu", () => { await actionMenu.callMethod("setFocus"); await page.waitForChanges(); - await page.keyboard.press("ArrowDown"); await page.waitForChanges(); @@ -455,23 +449,22 @@ 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` + it("should click the active action on Enter key and close the menu", async () => { + const page = await newE2EPage(); + await page.setContent( + html` `, - }); - + ); + await skipAnimations(page); await page.waitForChanges(); - const actionMenu = await page.find("calcite-action-menu"); const actions = await page.findAll("calcite-action"); @@ -479,7 +472,6 @@ describe("calcite-action-menu", () => { await actionMenu.callMethod("setFocus"); await page.waitForChanges(); - await page.keyboard.press("ArrowDown"); await page.waitForChanges(); @@ -497,17 +489,17 @@ 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` + it("should click the active action when clicked and close the menu", async () => { + const page = await newE2EPage(); + await page.setContent( + html` `, - }); - + ); + await skipAnimations(page); await page.waitForChanges(); - const actionMenu = await page.find("calcite-action-menu"); const actions = await page.findAll("calcite-action"); @@ -515,7 +507,6 @@ describe("calcite-action-menu", () => { 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);