diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts index 7ac924f9181..788decdbf68 100644 --- a/packages/calcite-components/src/components/alert/alert.e2e.ts +++ b/packages/calcite-components/src/components/alert/alert.e2e.ts @@ -3,6 +3,7 @@ import { html } from "../../../support/formatting"; import { accessible, defaults, hidden, HYDRATED_ATTR, renders, t9n } from "../../tests/commonTests"; import { getElementXY } from "../../tests/utils"; import { CSS, DURATIONS } from "./resources"; +import { openClose } from "../../tests/commonTests"; describe("defaults", () => { defaults("calcite-alert", [ @@ -38,6 +39,10 @@ describe("calcite-alert", () => { `); }); + describe("openClose", () => { + openClose("calcite-alert"); + }); + it("renders default props when none are provided", async () => { const page = await newE2EPage(); await page.setContent(` @@ -280,54 +285,6 @@ describe("calcite-alert", () => { }); }); - it("should emit component status for transition-chained events: 'calciteAlertBeforeOpen', 'calciteAlertOpen', 'calciteAlertBeforeClose', 'calciteAlertClose'", async () => { - const page = await newE2EPage(); - await page.setContent(html` ${alertContent} `); - - const element = await page.find("calcite-alert"); - const container = await page.find(`calcite-alert >>> .${CSS.container}`); - - expect(await container.isVisible()).toBe(false); - - const calciteAlertBeforeOpenEvent = page.waitForEvent("calciteAlertBeforeOpen"); - const calciteAlertOpenEvent = page.waitForEvent("calciteAlertOpen"); - - const calciteAlertBeforeOpenSpy = await element.spyOnEvent("calciteAlertBeforeOpen"); - const calciteAlertOpenSpy = await element.spyOnEvent("calciteAlertOpen"); - - await element.setProperty("open", true); - await page.waitForChanges(); - - await calciteAlertBeforeOpenEvent; - await calciteAlertOpenEvent; - - expect(await element.getProperty("open")).toBe(true); - - expect(calciteAlertBeforeOpenSpy).toHaveReceivedEventTimes(1); - expect(calciteAlertOpenSpy).toHaveReceivedEventTimes(1); - - expect(await container.isVisible()).toBe(true); - - const calciteAlertBeforeCloseEvent = page.waitForEvent("calciteAlertBeforeClose"); - const calciteAlertCloseEvent = page.waitForEvent("calciteAlertClose"); - - const calciteAlertBeforeCloseSpy = await element.spyOnEvent("calciteAlertBeforeClose"); - const calciteAlertClose = await element.spyOnEvent("calciteAlertClose"); - - await element.setProperty("open", false); - await page.waitForChanges(); - - await calciteAlertBeforeCloseEvent; - await calciteAlertCloseEvent; - - expect(await element.getProperty("open")).toBe(false); - - expect(calciteAlertBeforeCloseSpy).toHaveReceivedEventTimes(1); - expect(calciteAlertClose).toHaveReceivedEventTimes(1); - - expect(await container.isVisible()).toBe(false); - }); - it("should update number of queued alerts with a calcite-chip when removing an alert", async () => { const page = await newE2EPage(); await page.setContent(html` diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts index e5b1c0b2898..e315419538c 100644 --- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts +++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts @@ -3,10 +3,11 @@ import { accessible, defaults, disabled, + hidden, floatingUIOwner, formAssociated, - hidden, labelable, + openClose, reflects, renders, t9n, @@ -14,7 +15,6 @@ import { import { html } from "../../../support/formatting"; import { CSS as ComboboxItemCSS } from "../combobox-item/resources"; -import { CSS } from "./resources"; import { CSS as XButtonCSS } from "../functional/XButton"; import { skipAnimations } from "../../tests/utils"; @@ -143,51 +143,17 @@ describe("calcite-combobox", () => { disabled("calcite-combobox"); }); - it("filter properly when items have duplicate values with parents", async () => { - const page = await newE2EPage(); - await page.setContent( - html` - - - - - - - - - - - ` - ); - - const combobox = await page.find("calcite-combobox"); - await combobox.click(); - await page.waitForChanges(); - await combobox.type("conf"); - await page.waitForChanges(); - - const items = await page.findAll("calcite-combobox-item"); - const groups = await page.findAll("calcite-combobox-item-group"); - - expect(await groups[0].isVisible()).toBe(false); - expect(await items[0].isVisible()).toBe(false); + const simpleComboboxHTML = html` + + + + + + + `; - expect(await groups[1].isVisible()).toBe(true); - expect(await items[1].isVisible()).toBe(true); - expect(await items[2].isVisible()).toBe(true); - expect(await items[3].isVisible()).toBe(true); + describe("openClose", () => { + openClose(simpleComboboxHTML); }); it("filtering does not match property with value of undefined", async () => { @@ -1593,56 +1559,6 @@ describe("calcite-combobox", () => { ); }); - it("should emit component status for transition-chained events: 'calciteComboboxBeforeOpen', 'calciteComboboxOpen', 'calciteComboboxBeforeClose', 'calciteComboboxClose'", async () => { - const page = await newE2EPage(); - await page.setContent(html` - - - - - - - `); - const element = await page.find("calcite-combobox"); - const container = await page.find(`calcite-combobox >>> .${CSS.listContainer}`); - - expect(await container.isVisible()).toBe(false); - - const calciteComboboxBeforeOpenEvent = page.waitForEvent("calciteComboboxBeforeOpen"); - const calciteComboboxOpenEvent = page.waitForEvent("calciteComboboxOpen"); - - const calciteComboboxBeforeOpenSpy = await element.spyOnEvent("calciteComboboxBeforeOpen"); - const calciteComboboxOpenSpy = await element.spyOnEvent("calciteComboboxOpen"); - - await element.setProperty("open", true); - await page.waitForChanges(); - - await calciteComboboxBeforeOpenEvent; - await calciteComboboxOpenEvent; - - expect(calciteComboboxBeforeOpenSpy).toHaveReceivedEventTimes(1); - expect(calciteComboboxOpenSpy).toHaveReceivedEventTimes(1); - - expect(await container.isVisible()).toBe(true); - - const calciteComboboxBeforeCloseEvent = page.waitForEvent("calciteComboboxBeforeClose"); - const calciteComboboxCloseEvent = page.waitForEvent("calciteComboboxClose"); - - const calciteComboboxBeforeCloseSpy = await element.spyOnEvent("calciteComboboxBeforeClose"); - const calciteComboboxClose = await element.spyOnEvent("calciteComboboxClose"); - - await element.setProperty("open", false); - await page.waitForChanges(); - - await calciteComboboxBeforeCloseEvent; - await calciteComboboxCloseEvent; - - expect(calciteComboboxBeforeCloseSpy).toHaveReceivedEventTimes(1); - expect(calciteComboboxClose).toHaveReceivedEventTimes(1); - - expect(await container.isVisible()).toBe(false); - }); - it("should have input--icon class when placeholder-icon is parsed", async () => { const page = await newE2EPage(); await page.setContent(html` { const simpleDropdownHTML = html` @@ -74,6 +74,10 @@ describe("calcite-dropdown", () => { }); }); + describe("openClose", () => { + openClose(simpleDropdownHTML); + }); + interface SelectedItemsAssertionOptions { /** * IDs from items to assert selection @@ -1228,58 +1232,5 @@ describe("calcite-dropdown", () => { } ); }); - - it("should emit component status for transition-chained events: 'calciteDropdownBeforeOpen', 'calciteDropdownOpen', 'calciteDropdownBeforeClose', 'calciteDropdownClose'", async () => { - const page = await newE2EPage(); - await page.setContent(html` - - Open dropdown - - Dropdown Item Content - Dropdown Item Content - Dropdown Item Content - - - `); - const element = await page.find(`calcite-dropdown`); - const group = await page.find(`calcite-dropdown >>> .${CSS.calciteDropdownContent}`); - - expect(await group.isVisible()).toBe(false); - - const calciteDropdownBeforeOpenEvent = page.waitForEvent("calciteDropdownBeforeOpen"); - const calciteDropdownOpenEvent = page.waitForEvent("calciteDropdownOpen"); - - const calciteDropdownBeforeOpenSpy = await element.spyOnEvent("calciteDropdownBeforeOpen"); - const calciteDropdownOpenSpy = await element.spyOnEvent("calciteDropdownOpen"); - - element.setProperty("open", true); - await page.waitForChanges(); - - expect(await element.getProperty("open")).toBe(true); - await calciteDropdownBeforeOpenEvent; - await calciteDropdownOpenEvent; - - expect(calciteDropdownBeforeOpenSpy).toHaveReceivedEventTimes(1); - expect(calciteDropdownOpenSpy).toHaveReceivedEventTimes(1); - - expect(await group.isVisible()).toBe(true); - - const calciteDropdownBeforeCloseEvent = page.waitForEvent("calciteDropdownBeforeClose"); - const calciteDropdownCloseEvent = page.waitForEvent("calciteDropdownClose"); - - const calciteDropdownBeforeCloseSpy = await element.spyOnEvent("calciteDropdownBeforeClose"); - const calciteDropdownCloseSpy = await element.spyOnEvent("calciteDropdownClose"); - - element.setProperty("open", false); - await page.waitForChanges(); - - await calciteDropdownBeforeCloseEvent; - await calciteDropdownCloseEvent; - - expect(calciteDropdownBeforeCloseSpy).toHaveReceivedEventTimes(1); - expect(calciteDropdownCloseSpy).toHaveReceivedEventTimes(1); - - expect(await group.isVisible()).toBe(false); - }); }); }); diff --git a/packages/calcite-components/src/components/dropdown/resources.ts b/packages/calcite-components/src/components/dropdown/resources.ts index f241e05be2c..27b82a111a3 100644 --- a/packages/calcite-components/src/components/dropdown/resources.ts +++ b/packages/calcite-components/src/components/dropdown/resources.ts @@ -1,7 +1,3 @@ export const SLOTS = { dropdownTrigger: "trigger", }; - -export const CSS = { - calciteDropdownContent: "calcite-dropdown-content", -}; diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts index 136550e1626..c9cf28c2f4f 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts @@ -1,14 +1,15 @@ import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing"; import { + accessible, defaults, disabled, formAssociated, - labelable, floatingUIOwner, - renders, hidden, + labelable, + openClose, + renders, t9n, - accessible, } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { CSS } from "./resources"; @@ -55,6 +56,10 @@ describe("calcite-input-date-picker", () => { disabled("calcite-input-date-picker"); }); + describe("openClose", () => { + openClose(``); + }); + it.skip("supports t9n", () => t9n("calcite-input-date-picker")); async function navigateMonth(page: E2EPage, direction: "previous" | "next"): Promise { @@ -499,50 +504,6 @@ describe("calcite-input-date-picker", () => { expect(await input.getProperty("value")).toBe(""); }); - it("should emit component status for transition-chained events: 'calciteInputDatePickerBeforeOpen', 'calciteInputDatePickerOpen', 'calciteInputDatePickerBeforeClose', 'calciteInputDatePickerClose'", async () => { - const page = await newE2EPage(); - await page.setContent( - html` ` - ); - - const element = await page.find("calcite-input-date-picker"); - const container = await page.find(`calcite-input-date-picker >>> .${CSS.menu}`); - - const calciteInputDatePickerBeforeOpenEvent = page.waitForEvent("calciteInputDatePickerBeforeOpen"); - const calciteInputDatePickerOpenEvent = page.waitForEvent("calciteInputDatePickerOpen"); - - const calciteInputDatePickerBeforeOpenSpy = await element.spyOnEvent("calciteInputDatePickerBeforeOpen"); - const calciteInputDatePickerOpenSpy = await element.spyOnEvent("calciteInputDatePickerOpen"); - - await element.setProperty("open", true); - await page.waitForChanges(); - - expect(container).toHaveClass(CSS.menuActive); - - await calciteInputDatePickerBeforeOpenEvent; - await calciteInputDatePickerOpenEvent; - - expect(calciteInputDatePickerBeforeOpenSpy).toHaveReceivedEventTimes(1); - expect(calciteInputDatePickerOpenSpy).toHaveReceivedEventTimes(1); - - const calciteInputDatePickerBeforeCloseEvent = page.waitForEvent("calciteInputDatePickerBeforeClose"); - const calciteInputDatePickerCloseEvent = page.waitForEvent("calciteInputDatePickerClose"); - - const calciteInputDatePickerBeforeCloseSpy = await element.spyOnEvent("calciteInputDatePickerBeforeClose"); - const calciteInputDatePickerClose = await element.spyOnEvent("calciteInputDatePickerClose"); - - await element.setProperty("open", false); - await page.waitForChanges(); - - expect(container).not.toHaveClass(CSS.menuActive); - - await calciteInputDatePickerBeforeCloseEvent; - await calciteInputDatePickerCloseEvent; - - expect(calciteInputDatePickerBeforeCloseSpy).toHaveReceivedEventTimes(1); - expect(calciteInputDatePickerClose).toHaveReceivedEventTimes(1); - }); - it("should return endDate time as 23:59:999 when end value is typed", async () => { const page = await newE2EPage(); await page.setContent(html` `); diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts index 830d4699ee9..031ba239d69 100644 --- a/packages/calcite-components/src/components/modal/modal.e2e.ts +++ b/packages/calcite-components/src/components/modal/modal.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { focusable, renders, slots, hidden, t9n } from "../../tests/commonTests"; +import { focusable, hidden, openClose, renders, slots, t9n } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { CSS, SLOTS } from "./resources"; import { GlobalTestProps, isElementFocused, newProgrammaticE2EPage, skipAnimations } from "../../tests/utils"; @@ -13,6 +13,15 @@ describe("calcite-modal properties", () => { hidden("calcite-modal"); }); + describe("openClose", () => { + const openCloseOptions = { + initialToggleValue: true, + }; + + openClose("calcite-modal"); + openClose("calcite-modal", openCloseOptions); + }); + describe("slots", () => { slots("calcite-modal", SLOTS); }); diff --git a/packages/calcite-components/src/components/popover/popover.e2e.ts b/packages/calcite-components/src/components/popover/popover.e2e.ts index a37ce62df4b..d704b93b298 100644 --- a/packages/calcite-components/src/components/popover/popover.e2e.ts +++ b/packages/calcite-components/src/components/popover/popover.e2e.ts @@ -1,7 +1,16 @@ import { newE2EPage } from "@stencil/core/testing"; import { html } from "../../../support/formatting"; -import { accessible, defaults, hidden, renders, floatingUIOwner, focusable, t9n } from "../../tests/commonTests"; +import { + accessible, + defaults, + floatingUIOwner, + focusable, + hidden, + openClose, + renders, + t9n, +} from "../../tests/commonTests"; import { CSS } from "./resources"; describe("calcite-popover", () => { @@ -93,6 +102,13 @@ describe("calcite-popover", () => { ]); }); + describe("openClose", () => { + openClose(html` + content +
referenceElement
+ `); + }); + it("popover positions when referenceElement is set", async () => { const page = await newE2EPage(); await page.setContent( @@ -298,64 +314,6 @@ describe("calcite-popover", () => { expect(await popover.isVisible()).toBe(false); }); - it("should emit open and beforeOpen events", async () => { - const page = await newE2EPage(); - await page.setContent( - `content
referenceElement
` - ); - const popover = await page.find("calcite-popover"); - - const openEvent = await popover.spyOnEvent("calcitePopoverOpen"); - const beforeOpenEvent = await popover.spyOnEvent("calcitePopoverBeforeOpen"); - - expect(openEvent).toHaveReceivedEventTimes(0); - expect(beforeOpenEvent).toHaveReceivedEventTimes(0); - - const popoverOpenEvent = page.waitForEvent("calcitePopoverOpen"); - const popoverBeforeOpenEvent = page.waitForEvent("calcitePopoverBeforeOpen"); - - await popover.setProperty("open", true); - await page.waitForChanges(); - - await popoverOpenEvent; - await popoverBeforeOpenEvent; - - expect(openEvent).toHaveReceivedEventTimes(1); - expect(beforeOpenEvent).toHaveReceivedEventTimes(1); - }); - - it("should emit close and beforeClose events", async () => { - const page = await newE2EPage(); - - await page.setContent( - `content
referenceElement
` - ); - - await page.waitForChanges(); - - const popover = await page.find("calcite-popover"); - - const closeEvent = await popover.spyOnEvent("calcitePopoverClose"); - const beforeCloseEvent = await popover.spyOnEvent("calcitePopoverBeforeClose"); - - expect(closeEvent).toHaveReceivedEventTimes(0); - expect(beforeCloseEvent).toHaveReceivedEventTimes(0); - - const popoverCloseEvent = page.waitForEvent("calcitePopoverClose"); - const popoverBeforeCloseEvent = page.waitForEvent("calcitePopoverBeforeClose"); - - await page.evaluate(() => { - const popover = document.querySelector("calcite-popover"); - popover.open = false; - }); - - await popoverBeforeCloseEvent; - await popoverCloseEvent; - - expect(closeEvent).toHaveReceivedEventTimes(1); - expect(beforeCloseEvent).toHaveReceivedEventTimes(1); - }); - it("should open popovers", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts index e5a633b7315..f85b1479616 100644 --- a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts +++ b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts @@ -1,6 +1,6 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; import { TOOLTIP_OPEN_DELAY_MS, TOOLTIP_CLOSE_DELAY_MS } from "../tooltip/resources"; -import { accessible, defaults, hidden, floatingUIOwner, renders } from "../../tests/commonTests"; +import { accessible, defaults, floatingUIOwner, hidden, openClose, renders } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { getElementXY, GlobalTestProps } from "../../tests/utils"; @@ -90,6 +90,38 @@ describe("calcite-tooltip", () => { ]); }); + const simpleTooltipHtml = html` + content + `; + const tooltipDisplayNoneHtml = html` +
+
+ content +
+
+ + + `; + + describe("openClose", () => { + openClose(simpleTooltipHtml); + openClose(tooltipDisplayNoneHtml); + }); + it("should have zIndex of 901", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/tests/commonTests.ts b/packages/calcite-components/src/tests/commonTests.ts index 6801c81056c..189f1dc0f51 100644 --- a/packages/calcite-components/src/tests/commonTests.ts +++ b/packages/calcite-components/src/tests/commonTests.ts @@ -8,7 +8,7 @@ import { html } from "../../support/formatting"; import { JSX } from "../components"; import { hiddenFormInputSlotName } from "../utils/form"; import { MessageBundle } from "../utils/t9n"; -import { GlobalTestProps, isElementFocused, skipAnimations } from "./utils"; +import { GlobalTestProps, isElementFocused, newProgrammaticE2EPage, skipAnimations } from "./utils"; import { InteractiveHTMLElement } from "../utils/interactive"; expect.extend(toHaveNoViolations); @@ -30,9 +30,13 @@ function isHTML(tagOrHTML: string): boolean { function getTag(tagOrHTML: string): ComponentTag { if (isHTML(tagOrHTML)) { - const regex = /[>\s]/; + const calciteTagRegex = / (window as TestWindow).called); @@ -1376,3 +1380,204 @@ export async function t9n(componentTestSetup: ComponentTestSetup): Promise await page.waitForChanges(); } } + +interface BeforeToggle { + /** + * Function argument to simulate user input (mouse or keyboard), to open the component. + */ + open: (page: E2EPage) => Promise; + + /** + * Function argument to simulate user input (mouse or keyboard), to close the component. + */ + close: (page: E2EPage) => Promise; +} + +interface OpenCloseOptions { + /** + * Toggle property to test. Currently, either "open" or "expanded". + */ + openPropName?: string; + + /** + * Indicates the initial value of the toggle property. + */ + initialToggleValue?: boolean; + + /** + * Optional argument with functions to simulate user input (mouse or keyboard), to open or close the component. + */ + beforeToggle?: BeforeToggle; +} + +/** + * Helper to test openClose component setup. + * + * Note that this helper should be used within a `describe` block. + * + * @example + * + * describe("openClose", () => { + * openClose("calcite-combobox opened with a tab", { + * beforeToggle: { + * open: async (page) => { + * await page.keyboard.press("Tab"); + * await page.waitForChanges(); + * }, + * close: async (page) => { + * await page.keyboard.press("Tab"); + * await page.waitForChanges(); + * }, + * } + * }); + * + * openClose("open calcite-combobox closed with a tab", { + * initialToggleValue: true, + * beforeToggle: { + * close: async (page) => { + * await page.keyboard.press("Tab"); + * await page.waitForChanges(); + * }, + * } + * } + * }) + * + * @param componentTagOrHTML - The component tag or HTML markup to test against. + * @param {object} [options] - Additional options to assert. + */ + +export async function openClose(componentTagOrHTML: TagOrHTML, options?: OpenCloseOptions): Promise { + const defaultOptions: OpenCloseOptions = { + initialToggleValue: false, + openPropName: "open", + }; + const customizedOptions = { ...defaultOptions, ...options }; + + type EventOrderWindow = GlobalTestProps<{ events: string[] }>; + const eventSequence = await setUpEventSequence(componentTagOrHTML); + + async function setUpEventSequence(componentTagOrHTML: TagOrHTML): Promise { + const tag = getTag(componentTagOrHTML); + + const camelCaseTag = tag.replace(/-([a-z])/g, (lettersAfterHyphen) => lettersAfterHyphen[1].toUpperCase()); + const eventSuffixes = [`BeforeOpen`, `Open`, `BeforeClose`, `Close`]; + + return eventSuffixes.map((suffix) => `${camelCaseTag}${suffix}`); + } + + const addEventListeners = async (): Promise => { + const receivedEvents: string[] = []; + + (window as EventOrderWindow).events = receivedEvents; + + eventSequence.forEach((eventType) => { + document.addEventListener(eventType, (event) => receivedEvents.push(event.type)); + }); + }; + + async function setUpPage(componentTagOrHTML: TagOrHTML, page: E2EPage): Promise { + customizedOptions.initialToggleValue + ? await page.evaluate(() => { + addEventListeners(); + + const component = document.createElement(componentTagOrHTML); + component[customizedOptions.openPropName] = true; + + document.body.append(component); + }) + : await page.evaluate(() => { + addEventListeners(); + }); + } + + async function testOpenCloseEvents(componentTagOrHTML: TagOrHTML, page: E2EPage): Promise { + const tag = getTag(componentTagOrHTML); + const element = await page.find(tag); + + const [beforeOpenEvent, openEvent, beforeCloseEvent, closeEvent] = eventSequence.map((event) => + page.waitForEvent(event) + ); + + const [beforeOpenSpy, openSpy, beforeCloseSpy, closeSpy] = await Promise.all( + eventSequence.map(async (event) => await element.spyOnEvent(event)) + ); + + if (customizedOptions.beforeToggle) { + await customizedOptions.beforeToggle.open(page); + } else { + element.setProperty(customizedOptions.openPropName, true); + } + + await page.waitForChanges(); + + await beforeOpenEvent; + await openEvent; + + expect(beforeOpenSpy).toHaveReceivedEventTimes(1); + expect(openSpy).toHaveReceivedEventTimes(1); + expect(beforeCloseSpy).toHaveReceivedEventTimes(0); + expect(closeSpy).toHaveReceivedEventTimes(0); + + if (customizedOptions.beforeToggle) { + await customizedOptions.beforeToggle.close(page); + } else { + element.setProperty(customizedOptions.openPropName, false); + } + + await page.waitForChanges(); + + await beforeCloseEvent; + await closeEvent; + + expect(beforeCloseSpy).toHaveReceivedEventTimes(1); + expect(closeSpy).toHaveReceivedEventTimes(1); + expect(beforeOpenSpy).toHaveReceivedEventTimes(1); + expect(openSpy).toHaveReceivedEventTimes(1); + + expect(await page.evaluate(() => (window as EventOrderWindow).events)).toEqual(eventSequence); + } + + /** + * `skipAnimations` utility sets the animation duration to 0.01. This is a workaround for an issue with the animation utility. + * Because this still leaves a very small duration, we can still test the animation events, but faster. + */ + it(`emits with animations enabled`, async () => { + const page = await simplePageSetup(componentTagOrHTML); + await skipAnimations(page); + setUpPage(componentTagOrHTML, page); + await testOpenCloseEvents(componentTagOrHTML, page); + }); + + it(`emits with animations disabled`, async () => { + const page = await simplePageSetup(componentTagOrHTML); + await page.addStyleTag({ + content: ` + :root { + --calcite-animation-duration: 0s; + } + `, + }); + setUpPage(componentTagOrHTML, page); + await testOpenCloseEvents(componentTagOrHTML, page); + }); + + it("emits on initialization with animations enabled", async () => { + const page = await newProgrammaticE2EPage(); + await skipAnimations(page); + setUpPage(componentTagOrHTML, page); + await testOpenCloseEvents(componentTagOrHTML, page); + }); + + it("emits on initialization with animations disabled", async () => { + const page = await newProgrammaticE2EPage(); + await page.addStyleTag({ + content: ` + :root { + --calcite-animation-duration: 0s; + } + `, + }); + setUpPage(componentTagOrHTML, page); + await testOpenCloseEvents(componentTagOrHTML, page); + }); +}