Skip to content

Commit

Permalink
chore(modal): remove e2e tests that are covered by the dedicated `ope…
Browse files Browse the repository at this point in the history 
…nClose` commonTests helper (#8472)

Remove e2e tests covered by the dedicated `openClose` commonTests
helper.

**Related Issue:** #8392, #7379

## Summary
Remove e2e tests covered by dedicated `openClose` commonTests helper to
simplify test setup, ensure testing consistency across all openClose
components, and enhance test maintainability.
  • Loading branch information
@Elijbet
Elijbet authored Dec 22, 2023
1 parent e0ffbc5 commit 92b3f07
Showing 1 changed file with 1 addition and 203 deletions.
204 changes: 1 addition & 203 deletions packages/calcite-components/src/components/modal/modal.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand Down Expand Up @@ -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`<calcite-modal></calcite-modal>`);
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`<calcite-modal></calcite-modal>`);
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";
Expand Down

0 comments on commit 92b3f07

Please sign in to comment.