diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts
index 8284bb23981..5a358c14fe7 100644
--- a/packages/calcite-components/src/components/modal/modal.e2e.ts
+++ b/packages/calcite-components/src/components/modal/modal.e2e.ts
@@ -2,7 +2,7 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing";
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";
+import { GlobalTestProps, isElementFocused, skipAnimations } from "../../tests/utils";
describe("calcite-modal", () => {
describe("renders", () => {
@@ -241,208 +241,6 @@ describe("calcite-modal", () => {
expect(modal.getAttribute("open")).toBe(""); // Makes sure attribute is added back
});
- describe("opening and closing behavior", () => {
- it("opens and closes", async () => {
- const page = await newE2EPage();
- await page.setContent(html``);
- const modal = await page.find("calcite-modal");
-
- type ModalEventOrderWindow = GlobalTestProps<{ events: string[] }>;
-
- await page.$eval("calcite-modal", (modal: HTMLCalciteModalElement) => {
- const receivedEvents: string[] = [];
- (window as ModalEventOrderWindow).events = receivedEvents;
-
- ["calciteModalBeforeOpen", "calciteModalOpen", "calciteModalBeforeClose", "calciteModalClose"].forEach(
- (eventType) => {
- modal.addEventListener(eventType, (event) => receivedEvents.push(event.type));
- },
- );
- });
-
- const beforeOpenSpy = await modal.spyOnEvent("calciteModalBeforeOpen");
- const openSpy = await modal.spyOnEvent("calciteModalOpen");
- const beforeCloseSpy = await modal.spyOnEvent("calciteModalBeforeClose");
- const closeSpy = await modal.spyOnEvent("calciteModalClose");
-
- expect(beforeOpenSpy).toHaveReceivedEventTimes(0);
- expect(openSpy).toHaveReceivedEventTimes(0);
- expect(beforeCloseSpy).toHaveReceivedEventTimes(0);
- expect(closeSpy).toHaveReceivedEventTimes(0);
-
- expect(await modal.isVisible()).toBe(false);
-
- const modalBeforeOpen = page.waitForEvent("calciteModalBeforeOpen");
- const modalOpen = page.waitForEvent("calciteModalOpen");
- await modal.setProperty("open", true);
- await page.waitForChanges();
-
- await modalBeforeOpen;
- await modalOpen;
-
- expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
- expect(openSpy).toHaveReceivedEventTimes(1);
- expect(beforeCloseSpy).toHaveReceivedEventTimes(0);
- expect(closeSpy).toHaveReceivedEventTimes(0);
-
- expect(await modal.isVisible()).toBe(true);
-
- const modalBeforeClose = page.waitForEvent("calciteModalBeforeClose");
- const modalClose = page.waitForEvent("calciteModalClose");
- await modal.setProperty("open", false);
- await page.waitForChanges();
-
- await modalBeforeClose;
- await modalClose;
-
- expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
- expect(openSpy).toHaveReceivedEventTimes(1);
- expect(beforeCloseSpy).toHaveReceivedEventTimes(1);
- expect(closeSpy).toHaveReceivedEventTimes(1);
-
- expect(await modal.isVisible()).toBe(false);
-
- expect(await page.evaluate(() => (window as ModalEventOrderWindow).events)).toEqual([
- "calciteModalBeforeOpen",
- "calciteModalOpen",
- "calciteModalBeforeClose",
- "calciteModalClose",
- ]);
- });
-
- it("emits when closing on click", async () => {
- const page = await newE2EPage();
- await page.setContent(html``);
- const modal = await page.find("calcite-modal");
-
- const beforeOpenSpy = await modal.spyOnEvent("calciteModalBeforeOpen");
- const openSpy = await modal.spyOnEvent("calciteModalOpen");
- const beforeCloseSpy = await modal.spyOnEvent("calciteModalBeforeClose");
- const closeSpy = await modal.spyOnEvent("calciteModalClose");
-
- expect(beforeOpenSpy).toHaveReceivedEventTimes(0);
- expect(openSpy).toHaveReceivedEventTimes(0);
- expect(beforeCloseSpy).toHaveReceivedEventTimes(0);
- expect(closeSpy).toHaveReceivedEventTimes(0);
-
- expect(await modal.isVisible()).toBe(false);
-
- const modalBeforeOpen = page.waitForEvent("calciteModalBeforeOpen");
- const modalOpen = page.waitForEvent("calciteModalOpen");
- modal.setProperty("open", true);
- await page.waitForChanges();
-
- await modalBeforeOpen;
- await modalOpen;
-
- expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
- expect(openSpy).toHaveReceivedEventTimes(1);
- expect(beforeCloseSpy).toHaveReceivedEventTimes(0);
- expect(closeSpy).toHaveReceivedEventTimes(0);
-
- expect(await modal.isVisible()).toBe(true);
-
- const modalBeforeClose = page.waitForEvent("calciteModalBeforeClose");
- const modalClose = page.waitForEvent("calciteModalClose");
- const closeButton = await page.find(`calcite-modal >>> .${CSS.close}`);
- await closeButton.click();
- await page.waitForChanges();
-
- await modalBeforeClose;
- await modalClose;
-
- expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
- expect(openSpy).toHaveReceivedEventTimes(1);
- expect(beforeCloseSpy).toHaveReceivedEventTimes(1);
- expect(closeSpy).toHaveReceivedEventTimes(1);
-
- expect(await modal.isVisible()).toBe(false);
- });
-
- it("emits when set to open on initial render", async () => {
- const page = await newProgrammaticE2EPage();
-
- const beforeOpenSpy = await page.spyOnEvent("calciteModalBeforeOpen");
- const openSpy = await page.spyOnEvent("calciteModalOpen");
-
- const waitForBeforeOpenEvent = page.waitForEvent("calciteModalBeforeOpen");
- const waitForOpenEvent = page.waitForEvent("calciteModalOpen");
-
- await page.evaluate((): void => {
- const modal = document.createElement("calcite-modal");
- modal.open = true;
- document.body.append(modal);
- });
-
- await page.waitForChanges();
- await waitForBeforeOpenEvent;
- await waitForOpenEvent;
-
- expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
- expect(openSpy).toHaveReceivedEventTimes(1);
- });
-
- it("emits when set to open on initial render and duration is 0", async () => {
- const page = await newProgrammaticE2EPage();
- await skipAnimations(page);
-
- const beforeOpenSpy = await page.spyOnEvent("calciteModalBeforeOpen");
- const openSpy = await page.spyOnEvent("calciteModalOpen");
-
- const waitForOpenEvent = page.waitForEvent("calciteModalOpen");
- const waitForBeforeOpenEvent = page.waitForEvent("calciteModalBeforeOpen");
-
- await page.evaluate((): void => {
- const modal = document.createElement("calcite-modal");
- modal.open = true;
- document.body.append(modal);
- });
-
- await page.waitForChanges();
- await waitForBeforeOpenEvent;
- await waitForOpenEvent;
-
- expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
- expect(openSpy).toHaveReceivedEventTimes(1);
- });
-
- it("emits when duration is set to 0", async () => {
- const page = await newProgrammaticE2EPage();
- await skipAnimations(page);
-
- const beforeOpenSpy = await page.spyOnEvent("calciteModalBeforeOpen");
- const openSpy = await page.spyOnEvent("calciteModalOpen");
-
- const beforeCloseSpy = await page.spyOnEvent("calciteModalBeforeClose");
- const closeSpy = await page.spyOnEvent("calciteModalClose");
-
- await page.evaluate((): void => {
- const modal = document.createElement("calcite-modal");
- modal.open = true;
- document.body.append(modal);
- });
-
- await page.waitForChanges();
- await beforeOpenSpy;
- await openSpy;
-
- expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
- expect(openSpy).toHaveReceivedEventTimes(1);
-
- await page.evaluate(() => {
- const modal = document.querySelector("calcite-modal");
- modal.open = false;
- });
-
- await page.waitForChanges();
- await beforeCloseSpy;
- await closeSpy;
-
- expect(beforeCloseSpy).toHaveReceivedEventTimes(1);
- expect(closeSpy).toHaveReceivedEventTimes(1);
- });
- });
-
describe("calcite-modal accessibility checks", () => {
it("traps focus within the modal when open", async () => {
const button1Id = "button1";