@esri/calcite-components 1.0.0-next.597 → 1.0.0-next.598

package/dist/collection/components/action-menu/action-menu.e2e.js

@@ -1,153 +0,0 @@
-import { accessible, hidden, renders, defaults, reflects, focusable, slots } from "../../tests/commonTests";
-import { newE2EPage } from "@stencil/core/testing";
-import { SLOTS, CSS } from "./resources";
-import { html } from "../../../support/formatting";
-import { TOOLTIP_DELAY_MS } from "../tooltip/resources";
-describe("calcite-action-menu", () => {
-    it("renders", async () => renders("calcite-action-menu", { display: "flex" }));
-    it("honors hidden attribute", async () => hidden("calcite-action-menu"));
-    it("should be accessible", async () => accessible(`
-    <calcite-action-menu label="test">
-      <calcite-action text="Add" icon="plus"></calcite-action>
-    </calcite-action-menu>
-    `));
-    it("should be accessible: with tooltip", async () => accessible(`
-    <calcite-action-menu label="test">
-      <calcite-tooltip slot="${SLOTS.tooltip}">Bits and bobs.</calcite-tooltip>
-      <calcite-action text="Add" icon="plus"></calcite-action>
-    </calcite-action-menu>
-    `));
-    it("has slots", () => slots("calcite-action-menu", SLOTS));
-    it("defaults", async () => defaults("calcite-action-menu", [
-        {
-            propertyName: "expanded",
-            defaultValue: false
-        },
-        {
-            propertyName: "flipPlacements",
-            defaultValue: undefined
-        },
-        {
-            propertyName: "intlOptions",
-            defaultValue: undefined
-        },
-        {
-            propertyName: "open",
-            defaultValue: false
-        },
-        {
-            propertyName: "placement",
-            defaultValue: "auto"
-        },
-        {
-            propertyName: "overlayPositioning",
-            defaultValue: "absolute"
-        },
-        {
-            propertyName: "scale",
-            defaultValue: undefined
-        }
-    ]));
-    it("reflects", async () => reflects("calcite-action-menu", [
-        {
-            propertyName: "expanded",
-            value: true
-        },
-        {
-            propertyName: "open",
-            value: true
-        },
-        {
-            propertyName: "placement",
-            value: "auto"
-        }
-    ]));
-    it("should emit 'calciteActionMenuOpenChange' event", async () => {
-        const page = await newE2EPage({
-            html: `<calcite-action-menu>
-      <calcite-action text="Add" icon="plus"></calcite-action>
-    </calcite-action-menu>`
-        });
-        await page.waitForChanges();
-        const clickSpy = await page.spyOnEvent("calciteActionMenuOpenChange");
-        const actionMenu = await page.find("calcite-action-menu");
-        actionMenu.setProperty("open", true);
-        await page.waitForChanges();
-        expect(clickSpy).toHaveReceivedEventTimes(1);
-    });
-    it("should focus on menu button", async () => focusable(html `
-        <calcite-action-menu>
-          <calcite-action id="triggerAction" slot="${SLOTS.trigger}" text="Add" icon="plus"></calcite-action>
-          <calcite-action text="Add" icon="plus"></calcite-action>
-          <calcite-action text="Add" icon="plus"></calcite-action
-        ></calcite-action-menu>
-      `, {
-        focusTargetSelector: `#triggerAction`
-    }));
-    it("should close menu if clicked outside", async () => {
-        const page = await newE2EPage({
-            html: `<calcite-action-menu open>
-          <calcite-action text="Add" icon="plus" text-enabled></calcite-action>
-          <calcite-action 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>`
-        });
-        await page.waitForChanges();
-        const actionMenu = await page.find("calcite-action-menu");
-        expect(await actionMenu.getProperty("open")).toBe(true);
-        const outside = await page.find("#outside");
-        await outside.click();
-        await page.waitForChanges();
-        expect(await actionMenu.getProperty("open")).toBe(false);
-    });
-    it("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>`
-        });
-        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);
-    });
-    it("should honor scale of expand icon", async () => {
-        const page = await newE2EPage({ html: `<calcite-action-menu scale="l"></calcite-action-menu>` });
-        const trigger = await page.find(`calcite-action-menu >>> .${CSS.defaultTrigger}`);
-        expect(await trigger.getProperty("scale")).toBe("l");
-    });
-    it("should close tooltip when open", async () => {
-        const page = await newE2EPage({
-            html: `
-    <calcite-action-menu label="test">
-    <calcite-action id="trigger" slot="${SLOTS.trigger}" text="Add" icon="plus"></calcite-action>
-      <calcite-tooltip slot="${SLOTS.tooltip}">Bits and bobs.</calcite-tooltip>
-      <calcite-action text="Add" icon="plus"></calcite-action>
-    </calcite-action-menu>
-    `
-        });
-        const actionMenu = await page.find("calcite-action-menu");
-        const tooltip = await page.find("calcite-tooltip");
-        const trigger = await page.find("#trigger");
-        expect(await tooltip.isVisible()).toBe(false);
-        await trigger.hover();
-        await page.waitForTimeout(TOOLTIP_DELAY_MS);
-        expect(await tooltip.isVisible()).toBe(true);
-        actionMenu.setProperty("open", true);
-        await page.waitForChanges();
-        expect(await tooltip.isVisible()).toBe(false);
-    });
-});

package/dist/collection/components/action-pad/action-pad.e2e.js

@@ -1,178 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, focusable, hidden, reflects, renders, slots } from "../../tests/commonTests";
-import { CSS, SLOTS } from "./resources";
-import { html } from "../../../support/formatting";
-describe("calcite-action-pad", () => {
-    it("renders", async () => renders("calcite-action-pad", { display: "block" }));
-    it("honors hidden attribute", async () => hidden("calcite-action-pad"));
-    it("defaults", async () => defaults("calcite-action-pad", [
-        {
-            propertyName: "expandDisabled",
-            defaultValue: false
-        },
-        {
-            propertyName: "expanded",
-            defaultValue: false
-        },
-        {
-            propertyName: "layout",
-            defaultValue: "vertical"
-        },
-        {
-            propertyName: "scale",
-            defaultValue: undefined
-        }
-    ]));
-    it("reflects", async () => reflects("calcite-action-pad", [
-        {
-            propertyName: "expandDisabled",
-            value: true
-        },
-        {
-            propertyName: "expanded",
-            value: true
-        },
-        {
-            propertyName: "layout",
-            value: "horizontal"
-        }
-    ]));
-    describe("expand functionality", () => {
-        it("should be expandable by default", async () => {
-            const page = await newE2EPage();
-            await page.setContent("<calcite-action-pad></calcite-action-pad>");
-            await page.waitForChanges();
-            const expandAction = await page.find("calcite-action-pad >>> calcite-action");
-            expect(expandAction).not.toBeNull();
-        });
-        it("allows disabling expandable behavior", async () => {
-            const page = await newE2EPage();
-            await page.setContent("<calcite-action-pad expand-disabled></calcite-action-pad>");
-            await page.waitForChanges();
-            const expandAction = await page.find("calcite-action-pad >>> calcite-action");
-            expect(expandAction).toBeNull();
-        });
-        it("should toggle expanded", async () => {
-            const page = await newE2EPage({ html: "<calcite-action-pad></calcite-action-pad>" });
-            const pad = await page.find("calcite-action-pad");
-            const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupBottom}`);
-            const button = await buttonGroup.find(`calcite-action`);
-            expect(button).not.toBeNull();
-            await button.click();
-            expect(pad).toHaveAttribute("expanded");
-        });
-        it("should fire not expanded event when expanded programmatically", async () => {
-            const page = await newE2EPage();
-            await page.setContent("<calcite-action-pad></calcite-action-pad>");
-            const element = await page.find("calcite-action-pad");
-            const eventSpy = await element.spyOnEvent("calciteActionPadToggle");
-            element.setProperty("expanded", true);
-            await page.waitForChanges();
-            expect(eventSpy).not.toHaveReceivedEvent();
-        });
-        it("should fire expanded event on user interaction", async () => {
-            const page = await newE2EPage();
-            await page.setContent("<calcite-action-pad></calcite-action-pad>");
-            const element = await page.find("calcite-action-pad");
-            const actionElement = await page.find("calcite-action-pad >>> calcite-action");
-            const eventSpy = await element.spyOnEvent("calciteActionPadToggle");
-            await actionElement.click();
-            await page.waitForChanges();
-            expect(eventSpy).toHaveReceivedEvent();
-        });
-        it("should have child actions be textEnabled when expanded is set", async () => {
-            const page = await newE2EPage();
-            await page.setContent("<calcite-action-pad expanded></calcite-action-pad>");
-            const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupBottom}`);
-            const button = await buttonGroup.find("calcite-action");
-            const textEnabled = await button.getProperty("textEnabled");
-            expect(textEnabled).toBe(true);
-        });
-    });
-    it("should not have bottomGroup when not expandable", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-action-pad expand-disabled></calcite-action-pad>`);
-        const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupBottom}`);
-        expect(buttonGroup).toBeNull();
-    });
-    it("should modify textEnabled on actions when expanded and expandDisabled", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html `<calcite-action-pad expand-disabled expanded>
-      <calcite-action-group>
-        <calcite-action id="my-action" text="Add" label="Add Item" icon="plus"></calcite-action>
-      </calcite-action-group>
-    </calcite-action-pad>`);
-        const expandAction = await page.find("calcite-action-pad >>> calcite-action");
-        const action = await page.find("calcite-action");
-        const actionPad = await page.find("calcite-action-pad");
-        const group = await page.find("calcite-action-group");
-        expect(await actionPad.getProperty("expanded")).toBe(true);
-        expect(expandAction).toBeNull();
-        expect(action).not.toBeNull();
-        expect(await group.getProperty("expanded")).toBe(true);
-        expect(await action.getProperty("textEnabled")).toBe(true);
-    });
-    it("should be accessible", async () => accessible(`
-    <calcite-action-pad>
-       <calcite-action-group>
-        <calcite-action text="Add" icon="plus"></calcite-action>
-      </calcite-action-group>
-    </calcite-action-pad>
-    `));
-    it("should be accessible when expanded", async () => accessible(`
-    <calcite-action-pad expanded>
-      <calcite-action-group>
-        <calcite-action text="Add" icon="plus"></calcite-action>
-      </calcite-action-group>
-    </calcite-action-pad>
-    `));
-    it("should focus on toggle button", async () => focusable(html `
-        <calcite-action-pad>
-          <calcite-action-group>
-            <calcite-action text="Add" icon="plus"></calcite-action>
-          </calcite-action-group>
-        </calcite-action-pad>
-      `, {
-        focusId: "expand-toggle",
-        focusTargetSelector: "calcite-action-pad"
-    }));
-    it("has slots", () => slots("calcite-action-pad", SLOTS));
-    it("'calciteActionMenuOpenChange' event should set other 'calcite-action-group' - 'menuOpen' to false", async () => {
-        const page = await newE2EPage({
-            html: `<calcite-action-pad>
-          <calcite-action-group>
-            <calcite-action text="Add" icon="plus"></calcite-action>
-            <calcite-action text="Add" icon="plus"></calcite-action>
-            <calcite-action text="Add" icon="plus"></calcite-action>
-            <calcite-action text="Add" icon="plus" slot="menu-actions"></calcite-action>
-            <calcite-action text="Add" icon="plus" slot="menu-actions"></calcite-action>
-          </calcite-action-group>
-          <calcite-action-group menu-open>
-            <calcite-action text="Add" icon="plus"></calcite-action>
-            <calcite-action text="Add" icon="plus"></calcite-action>
-            <calcite-action text="Add" icon="plus"></calcite-action>
-            <calcite-action text="Add" icon="plus"></calcite-action>
-            <calcite-action text="Add" icon="plus" slot="menu-actions"></calcite-action>
-            <calcite-action text="Add" icon="plus" slot="menu-actions"></calcite-action>
-          </calcite-action-group>
-        </calcite-action-pad>`
-        });
-        const eventSpy = await page.spyOnEvent("calciteActionMenuOpenChange", "window");
-        await page.waitForChanges();
-        let groups = await page.findAll("calcite-action-group");
-        expect(await groups[0].getProperty("menuOpen")).toBe(false);
-        expect(await groups[1].getProperty("menuOpen")).toBe(true);
-        groups[0].setProperty("menuOpen", true);
-        await page.waitForChanges();
-        expect(eventSpy).toHaveReceivedEventTimes(2);
-        groups = await page.findAll("calcite-action-group");
-        expect(await groups[0].getProperty("menuOpen")).toBe(true);
-        expect(await groups[1].getProperty("menuOpen")).toBe(false);
-    });
-    it("should honor scale of expand icon", async () => {
-        const page = await newE2EPage({ html: `<calcite-action-pad scale="l"></calcite-action-pad>` });
-        const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupBottom}`);
-        const button = await buttonGroup.find("calcite-action");
-        expect(await button.getProperty("scale")).toBe("l");
-    });
-});

package/dist/collection/components/alert/alert.e2e.js

@@ -1,294 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { renders, accessible, HYDRATED_ATTR, hidden } from "../../tests/commonTests";
-import { html } from "../../../support/formatting";
-import { CSS } from "./resources";
-describe("calcite-alert", () => {
-    const alertContent = `
-    <div slot="title">Title Text</div>
-    <div slot="message">Message Text</div>
-    <a slot="link" href="">Action</a>
-  `;
-    it("renders", async () => renders("calcite-alert", { visible: false, display: "block" }));
-    it("honors hidden attribute", async () => hidden(`<calcite-alert open></calcite-alert>`));
-    it("is accessible", async () => accessible(`
-    <calcite-alert open label="test">
-    ${alertContent}
-    </calcite-alert>
-  `));
-    it("is accessible with auto-dismiss", async () => accessible(`
-    <calcite-alert open auto-dismiss auto-dismiss-duration="slow" label="test">
-    ${alertContent}
-    </calcite-alert>
-  `));
-    it("renders default props when none are provided", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-    <calcite-alert>
-    ${alertContent}
-    </calcite-alert>`);
-        const element = await page.find("calcite-alert");
-        const close = await page.find("calcite-alert >>> .alert-close");
-        const icon = await page.find("calcite-alert >>> .alert-icon");
-        expect(element).toEqualAttribute("color", "blue");
-        expect(close).not.toBeNull();
-        expect(icon).toBeNull();
-    });
-    it("renders requested props when valid props are provided", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-    <calcite-alert color="yellow" auto-dismiss-duration="fast" auto-dismiss>
-    ${alertContent}
-    </calcite-alert>`);
-        const element = await page.find("calcite-alert");
-        const close = await page.find("calcite-alert >>> .alert-close");
-        const icon = await page.find("calcite-alert >>> .alert-icon");
-        expect(element).toEqualAttribute("color", "yellow");
-        expect(element).toEqualAttribute("auto-dismiss-duration", "fast");
-        expect(close).toBeNull();
-        expect(icon).toBeNull();
-    });
-    it("renders with an icon", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-    <calcite-alert icon>
-    ${alertContent}
-    </calcite-alert>`);
-        const element = await page.find("calcite-alert");
-        const close = await page.find("calcite-alert >>> .alert-close");
-        const icon = await page.find("calcite-alert >>> .alert-icon");
-        expect(element).toHaveAttribute(HYDRATED_ATTR);
-        expect(close).not.toBeNull();
-        expect(icon).not.toBeNull();
-    });
-    it("closes on time based on alert duration", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html `
-      <div>
-        <calcite-button id="button-2" onclick="document.querySelector('#alert-2').setAttribute('open', '')"
-          >open alert-1</calcite-button
-        >
-        <calcite-alert label="this is a success" id="alert-2" scale="s" color="green" auto-dismiss icon>
-          <div slot="title">Hello there!</div>
-          <div slot="message">Get success!</div>
-          <calcite-link slot="link" title="my action"> Do thing </calcite-link>
-        </calcite-alert>
-      </div>
-    `);
-        const alert2 = await page.find("#alert-2");
-        const button2 = await page.find("#button-2");
-        const alertSpeedFastMs = 10000;
-        expect(await alert2.isVisible()).not.toBe(true);
-        await button2.click();
-        expect(await alert2.isVisible()).toBe(true);
-        await page.waitForTimeout(alertSpeedFastMs);
-        expect(await alert2.isVisible()).not.toBe(true);
-    });
-    const animationDurationInMs = 400;
-    it("opens and then closes a single alert", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-    <div>
-    <calcite-button id="button-1" onclick="document.querySelector('#alert-1').setAttribute('open', '')">open alert-1</calcite-button>
-    <calcite-alert id="alert-1">
-    ${alertContent}
-    </calcite-alert>
-    </div>`);
-        const alert1 = await page.find("#alert-1");
-        const button1 = await page.find("#button-1");
-        const alertclose1 = await page.find("#alert-1 >>> .alert-close");
-        expect(await alert1.isVisible()).not.toBe(true);
-        await button1.click();
-        await page.waitForTimeout(animationDurationInMs);
-        expect(await alert1.isVisible()).toBe(true);
-        await alertclose1.click();
-        await page.waitForTimeout(animationDurationInMs);
-        expect(await alert1.isVisible()).not.toBe(true);
-    });
-    it("opens the correct alert when multiple have been opened at once", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-    <div>
-    <calcite-button id="button-1" onclick="document.querySelector('#alert-1').setAttribute('open', '')">open alert-1</calcite-button>
-    <calcite-button id="button-2" onclick="document.querySelector('#alert-2').setAttribute('open', '')">open alert-2</calcite-button>
-    <calcite-button id="button-3" onclick="document.querySelector('#alert-3').setAttribute('open', '')">open alert-3</calcite-button>
-    <calcite-alert id="alert-1">
-    ${alertContent}
-    </calcite-alert>
-    <calcite-alert id="alert-2">
-    ${alertContent}
-    </calcite-alert>
-    <calcite-alert id="alert-3">
-    ${alertContent}
-    </calcite-alert>
-    </div>`);
-        const alert1 = await page.find("#alert-1");
-        const alert2 = await page.find("#alert-2");
-        const alert3 = await page.find("#alert-3");
-        const button1 = await page.find("#button-1");
-        const button2 = await page.find("#button-2");
-        const button3 = await page.find("#button-3");
-        const alertclose1 = await page.find("#alert-1 >>> .alert-close");
-        const alertclose2 = await page.find("#alert-2 >>> .alert-close");
-        await button1.click();
-        await page.waitForTimeout(animationDurationInMs);
-        await alertclose1.click();
-        await button2.click();
-        await page.waitForTimeout(animationDurationInMs);
-        await alertclose2.click();
-        await button3.click();
-        await page.waitForTimeout(animationDurationInMs);
-        expect(await alert1.isVisible()).not.toBe(true);
-        expect(await alert2.isVisible()).not.toBe(true);
-        expect(await alert3.isVisible()).toBe(true);
-    });
-    it("correctly assigns a default placement class", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-    <calcite-alert>
-    ${alertContent}
-    </calcite-alert>`);
-        const container = await page.find("calcite-alert >>> .container");
-        expect(container).toHaveClass("bottom");
-    });
-    it("correctly assigns a requested placement class", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-    <calcite-alert placement="top-end">
-    ${alertContent}
-    </calcite-alert>`);
-        const container = await page.find("calcite-alert >>> .container");
-        expect(container).not.toHaveClass("bottom");
-        expect(container).toHaveClass("top-end");
-    });
-    describe("CSS properties for light/dark themes", () => {
-        const alertSnippet = `
-      <calcite-alert
-        icon="i2DExplore"
-        auto-dismiss
-        auto-dismiss-duration="slow"
-        color="red"
-        open
-      >
-        <div slot="message">
-          Successfully duplicated
-          <strong>2019 Sales Demographics by County</strong>
-          layer
-        </div>
-        <calcite-link
-          slot="link"
-          title="my action"
-          role="presentation"
-        >
-          View layer
-        </calcite-link>
-      </calcite-alert>
-    `;
-        let page;
-        let alertDismissProgressBar;
-        let progressBarStyles;
-        it("should have defined CSS custom properties", async () => {
-            page = await newE2EPage({ html: alertSnippet });
-            progressBarStyles = await page.evaluate(() => {
-                const alert = document.querySelector("calcite-alert");
-                alert.style.setProperty("--calcite-alert-dismiss-progress-background", "white");
-                return window.getComputedStyle(alert).getPropertyValue("--calcite-alert-dismiss-progress-background");
-            });
-            expect(progressBarStyles).toEqual("white");
-        });
-        describe("when theme attribute is not provided", () => {
-            it("should render alert dismiss progress bar with default value tied to light theme", async () => {
-                page = await newE2EPage({ html: alertSnippet });
-                await page.waitForTimeout(animationDurationInMs);
-                alertDismissProgressBar = await page.find("calcite-alert[open] >>> .alert-dismiss-progress");
-                progressBarStyles = await alertDismissProgressBar.getComputedStyle(":after");
-                expect(await progressBarStyles.getPropertyValue("background-color")).toEqual("rgba(255, 255, 255, 0.8)");
-            });
-        });
-        describe("when theme attribute is dark", () => {
-            it("should render alert dismiss progress bar with value tied to dark theme", async () => {
-                page = await newE2EPage({
-                    html: `<div class="calcite-theme-dark">${alertSnippet}</div>`
-                });
-                await page.waitForTimeout(animationDurationInMs);
-                alertDismissProgressBar = await page.find("calcite-alert[open] >>> .alert-dismiss-progress");
-                progressBarStyles = await alertDismissProgressBar.getComputedStyle(":after");
-                expect(await progressBarStyles.getPropertyValue("background-color")).toEqual("rgba(43, 43, 43, 0.8)");
-            });
-        });
-        it("should allow the CSS custom property to be overridden", async () => {
-            const overrideStyle = "rgba(255, 0, 0, 0.5)";
-            page = await newE2EPage({
-                html: `
-        <style>
-          :root {
-            --calcite-alert-dismiss-progress-background: ${overrideStyle};
-          }
-        </style>
-        <div>${alertSnippet}</div>`
-            });
-            await page.waitForTimeout(animationDurationInMs);
-            alertDismissProgressBar = await page.find("calcite-alert[open] >>> .alert-dismiss-progress");
-            progressBarStyles = await alertDismissProgressBar.getComputedStyle(":after");
-            expect(await progressBarStyles.getPropertyValue("background-color")).toEqual(overrideStyle);
-        });
-    });
-    it("should emit component status for transition-chained events: 'calciteAlertBeforeOpen', 'calciteAlertOpen', 'calciteAlertBeforeClose', 'calciteAlertClose'", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html `<calcite-alert> ${alertContent} </calcite-alert>`);
-        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(await element.getProperty("active")).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(await element.getProperty("active")).toBe(false);
-        expect(calciteAlertBeforeCloseSpy).toHaveReceivedEventTimes(1);
-        expect(calciteAlertClose).toHaveReceivedEventTimes(1);
-        expect(await container.isVisible()).toBe(false);
-    });
-    describe("when multiple alerts are queued", () => {
-        it("should display number of queued alerts with a calcite-chip", async () => {
-            const page = await newE2EPage({
-                html: `
-        <calcite-alert open id="first-open" icon="3d-glasses" auto-dismiss-duration="fast" scale="l">
-          <div slot="title">Title of alert #1</div>
-          <div slot="message">Message text of the alert</div>
-          <a slot="link" href="#">Retry</a>
-        </calcite-alert>
-        <calcite-alert id="alert-to-be-queued" icon auto-dismiss scale="l">
-          <div slot="title">Title of alert #2</div>
-          <div slot="message">Message text of the alert</div>
-          <a slot="link" href="#">Retry</a>
-        </calcite-alert>
-        `
-            });
-            await page.addScriptTag({
-                content: `document.querySelector("#alert-to-be-queued").setAttribute("open", "");`
-            });
-            await page.waitForTimeout(animationDurationInMs);
-            const chip = await page.find("calcite-alert[id='first-open'] >>> calcite-chip");
-            const chipQueueCount = "+1";
-            expect(await chip.getProperty("value")).toEqual(chipQueueCount);
-            expect(chip.textContent).toEqual(chipQueueCount);
-        });
-    });
-});