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

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);
-        });
-    });
-});

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

@@ -1,55 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
-describe("calcite-avatar", () => {
-    it("renders", async () => renders("calcite-avatar", { display: "inline-block" }));
-    it("honors hidden attribute", async () => hidden("calcite-avatar"));
-    it("is accessible", async () => {
-        await accessible("calcite-avatar");
-        await accessible("<calcite-avatar thumbnail='http://placekitten.com/120/120'></calcite-avatar>");
-    });
-    it("has property defaults", async () => defaults("calcite-avatar", [
-        {
-            propertyName: "scale",
-            defaultValue: "m"
-        }
-    ]));
-    it("renders thumbnail when provided", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-avatar thumbnail='http://placekitten.com/120/120'></calcite-avatar>");
-        const thumbnail = await page.find("calcite-avatar >>> .thumbnail");
-        expect(thumbnail).toEqualAttribute("src", "http://placekitten.com/120/120");
-    });
-    it("renders initials when no thumbnail is provided", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-avatar full-name='My Dude'></calcite-avatar>");
-        const initials = await page.find("calcite-avatar >>> .initials");
-        expect(initials).toEqualText("MD");
-    });
-    it("computes a background fill color based on user id", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-avatar user-id='25684463a00c449585dbb32a065f6b74'></calcite-avatar>");
-        const style = await page.evaluate(() => {
-            const background = document.querySelector("calcite-avatar").shadowRoot.querySelector(".background");
-            return background.getAttribute("style");
-        });
-        expect(style).toEqual("background-color: rgb(214, 232, 245);");
-    });
-    it("computes a background fill if id is not a valid hex", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-avatar user-id='for sure not a hex' username='THaverford'></calcite-avatar>");
-        const initials = await page.find("calcite-avatar >>> .initials");
-        expect(initials).toEqualText("TH");
-        const style = await page.evaluate(() => {
-            const background = document.querySelector("calcite-avatar").shadowRoot.querySelector(".background");
-            return background.getAttribute("style");
-        });
-        expect(style).toEqual("background-color: rgb(245, 219, 214);");
-    });
-    it("renders default icon when no information is passed", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-avatar></calcite-avatar>");
-        const icon = await page.find("calcite-avatar >>> .icon");
-        const visible = await icon.isVisible();
-        expect(visible).toBe(true);
-    });
-});

package/dist/collection/components/avatar/avatar.spec.js

@@ -1,42 +0,0 @@
-import { isValidHex } from "../color-picker/utils";
-import { hexToHue, rgbToHue, stringToHex } from "./utils";
-describe("stringToHex", () => {
-    it("generates a consistent hex", () => {
-        expect(stringToHex("testing")).toEqual(stringToHex("testing"));
-    });
-    it("handles empty input", () => {
-        expect(stringToHex("")).toBeTruthy();
-    });
-    it("generates a valid hex color, regardless of input", () => {
-        expect(isValidHex(stringToHex("hey dude"))).toBe(true);
-        expect(isValidHex(stringToHex("numbe8972983767869891823"))).toBe(true);
-        expect(isValidHex(stringToHex("asdf8798768657476876yashjkdfbasd"))).toBe(true);
-        expect(isValidHex(stringToHex(")#@$%*@^#&%$(^!)@*)#$*!%"))).toBe(true);
-        expect(isValidHex(stringToHex("0"))).toBe(true);
-        expect(isValidHex(stringToHex("##########"))).toBe(true);
-        expect(isValidHex(stringToHex("키스의 고유조건은 입술끼리 만나야 하고 특별한 기술은 필요치 않다"))).toBe(true);
-        expect(isValidHex(stringToHex("✨🌈"))).toBe(true);
-    });
-});
-describe("rgbToHue", () => {
-    it("correctly finds hue of various rgb colors", () => {
-        expect(rgbToHue({ r: 0, g: 0, b: 0 })).toEqual(0);
-        expect(rgbToHue({ r: 255, g: 255, b: 255 })).toEqual(0);
-        expect(rgbToHue({ r: 255, g: 0, b: 0 })).toEqual(0);
-        expect(rgbToHue({ r: 0, g: 255, b: 0 })).toEqual(120);
-        expect(rgbToHue({ r: 0, g: 0, b: 255 })).toEqual(240);
-        expect(rgbToHue({ r: 18, g: 77, b: 123 })).toEqual(206);
-        expect(rgbToHue({ r: 214, g: 90, b: 45 })).toEqual(16);
-        expect(rgbToHue({ r: 160, g: 123, b: 45 })).toEqual(41);
-    });
-});
-describe("hexToHue", () => {
-    it("correctly finds hue of various hex colors", () => {
-        expect(hexToHue("#a07b2d")).toEqual(41);
-        expect(hexToHue("#44ed51")).toEqual(125);
-        expect(hexToHue("#151515")).toEqual(0);
-        expect(hexToHue("#ffc800")).toEqual(47);
-        expect(hexToHue("#47bbff")).toEqual(202);
-        expect(hexToHue("#ffffff")).toEqual(0);
-    });
-});

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

@@ -1,194 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { CSS, SLOTS, TEXT } from "./resources";
-import { accessible, defaults, disabled, hidden, renders, slots } from "../../tests/commonTests";
-import { html } from "../../../support/formatting";
-describe("calcite-block", () => {
-    it("renders", async () => renders("calcite-block", { display: "flex" }));
-    it("honors hidden attribute", async () => hidden("calcite-block"));
-    it("has property defaults", async () => defaults("calcite-block", [
-        {
-            propertyName: "collapsible",
-            defaultValue: false
-        },
-        {
-            propertyName: "headingLevel",
-            defaultValue: undefined
-        },
-        {
-            propertyName: "intlLoading",
-            defaultValue: TEXT.loading
-        },
-        {
-            propertyName: "intlOptions",
-            defaultValue: TEXT.options
-        },
-        {
-            propertyName: "open",
-            defaultValue: false
-        }
-    ]));
-    it("has slots", () => slots("calcite-block", SLOTS));
-    it("is accessible", async () => accessible(`
-      <calcite-block heading="heading" summary="summary" open collapsible>
-        <div slot=${SLOTS.icon}>✅</div>
-        <div>content</div>
-        <label slot=${SLOTS.control}>test <input placeholder="control"/></label>
-      </calcite-block>
-  `));
-    it("can be disabled", () => disabled(html `<calcite-block heading="heading" summary="summary" collapsible></calcite-block>`));
-    it("has a loading state", async () => {
-        const page = await newE2EPage({
-            html: `
-        <calcite-block heading="heading" summary="summary" open collapsible>
-          <div class="content">content</div>
-        </calcite-block>
-    `
-        });
-        await page.waitForChanges();
-        expect(await page.find("calcite-block >>> calcite-scrim")).toBeNull();
-        const content = await page.find(".content");
-        const clickSpy = await content.spyOnEvent("click");
-        await content.click();
-        expect(clickSpy).toHaveReceivedEventTimes(1);
-        const block = await page.find("calcite-block");
-        block.setProperty("loading", true);
-        await page.waitForChanges();
-        await content.click();
-        expect(clickSpy).toHaveReceivedEventTimes(1);
-        expect(await page.find("calcite-block >>> calcite-scrim")).toBeTruthy();
-    });
-    it("can display/hide content", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-block><div>some content</div></calcite-block>");
-        let element = await page.find("calcite-block");
-        let content = await page.find(`calcite-block >>> .${CSS.content}`);
-        expect(await content.isVisible()).toBe(false);
-        element.setProperty("open", true);
-        await page.waitForChanges();
-        element = await page.find("calcite-block[open]");
-        content = await page.find(`calcite-block >>> .${CSS.content}`);
-        expect(element).toBeTruthy();
-        expect(await content.isVisible()).toBe(true);
-        element.setProperty("open", false);
-        await page.waitForChanges();
-        element = await page.find("calcite-block[open]");
-        content = await page.find(`calcite-block >>> .${CSS.content}`);
-        expect(element).toBeNull();
-        expect(await content.isVisible()).toBe(false);
-    });
-    it("allows toggling its content", async () => {
-        const page = await newE2EPage({ html: "<calcite-block collapsible></calcite-block>" });
-        const element = await page.find("calcite-block");
-        const toggleSpy = await element.spyOnEvent("calciteBlockToggle");
-        const toggle = await page.find(`calcite-block >>> .${CSS.toggle}`);
-        expect(toggle.getAttribute("aria-label")).toBe(TEXT.expand);
-        expect(toggle.getAttribute("aria-expanded")).toBe("false");
-        expect(toggle.getAttribute("title")).toBe(TEXT.expand);
-        await toggle.click();
-        expect(toggleSpy).toHaveReceivedEventTimes(1);
-        expect(await element.getProperty("open")).toBe(true);
-        expect(toggle.getAttribute("aria-label")).toBe(TEXT.collapse);
-        expect(toggle.getAttribute("aria-expanded")).toBe("true");
-        expect(toggle.getAttribute("title")).toBe(TEXT.collapse);
-        await toggle.click();
-        expect(toggleSpy).toHaveReceivedEventTimes(2);
-        expect(await element.getProperty("open")).toBe(false);
-        expect(toggle.getAttribute("aria-label")).toBe(TEXT.expand);
-        expect(toggle.getAttribute("aria-expanded")).toBe("false");
-        expect(toggle.getAttribute("title")).toBe(TEXT.expand);
-    });
-    describe("header", () => {
-        it("renders a heading", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-block heading="test-heading"></calcite-block>`);
-            const heading = await page.find(`calcite-block >>> .${CSS.heading}`);
-            expect(heading).toBeTruthy();
-            expect(heading.innerText).toBe("test-heading");
-            const description = await page.find(`calcite-block >>> .${CSS.description}`);
-            expect(description).toBeNull();
-        });
-        it("renders a heading with optional summary (deprecated)", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-block heading="test-heading" summary="test-summary"></calcite-block>`);
-            const heading = await page.find(`calcite-block >>> .${CSS.heading}`);
-            expect(heading).toBeTruthy();
-            const summary = await page.find(`calcite-block >>> .${CSS.description}`);
-            expect(summary.innerText).toBe("test-summary");
-        });
-        it("renders a heading with optional description", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-block heading="test-heading" description="test-summary"></calcite-block>`);
-            const heading = await page.find(`calcite-block >>> .${CSS.heading}`);
-            expect(heading).toBeTruthy();
-            const description = await page.find(`calcite-block >>> .${CSS.description}`);
-            expect(description.innerText).toBe("test-summary");
-        });
-        it("allows users to add a control in a collapsible block", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-block heading="test-heading" collapsible><div class="nested-control" tabindex="0" slot=${SLOTS.control}>fake space/enter-bubbling control</div></calcite-block>`);
-            const control = await page.find(".nested-control");
-            expect(await control.isVisible()).toBe(true);
-            const controlSlot = await page.find(`calcite-block >>> slot[name=${SLOTS.control}]`);
-            expect(await controlSlot.isVisible()).toBe(true);
-            const block = await page.find("calcite-block");
-            const blockToggleSpy = await block.spyOnEvent("calciteBlockToggle");
-            await control.press("Space");
-            await control.press("Enter");
-            await control.click();
-            expect(blockToggleSpy).toHaveReceivedEventTimes(0);
-            await block.click();
-            await block.click();
-            expect(blockToggleSpy).toHaveReceivedEventTimes(2);
-        });
-        it("does not render collapsible icon when a control is added to the header", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-block heading="test-heading" collapsible>
-          <calcite-action text="test" icon="banana" slot="${SLOTS.control}"></calcite-action>
-        </calcite-block>`);
-            const collapsibleIcon = await page.find(`calcite-block >>> .${CSS.toggleIcon}`);
-            expect(collapsibleIcon).toBeNull();
-        });
-        it("displays a status icon instead of a header icon when `status` is an accepted value", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-block status="invalid">
-          <div class="header-icon" slot=${SLOTS.icon} /></calcite-block>
-        </calcite-block>`);
-            const headerIcon = await page.find("calcite-block >>> .header-icon");
-            expect(headerIcon).toBeNull();
-            const statusIcon = await page.find(`calcite-block >>> .${CSS.statusIcon}`);
-            expect(statusIcon).not.toBeNull();
-        });
-        it("displays a loading icon  when `loading` is set to true and `open` is set to false", async () => {
-            const headerIcon = "header-icon";
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-block status="invalid" loading>
-          <div class="${headerIcon}" slot=${SLOTS.icon} /></calcite-block>
-        </calcite-block>`);
-            const headerIconEle = await page.find(`calcite-block >>> .${headerIcon}`);
-            expect(headerIconEle).toBeNull();
-            const statusIcon = await page.find(`calcite-block >>> .${CSS.statusIcon}`);
-            const loadingIcon = await page.find(`calcite-block >>> .${CSS.loading}`);
-            expect(statusIcon).not.toBeNull();
-            expect(loadingIcon).not.toBeNull();
-        });
-        it("allows users to slot in actions in a header menu", async () => {
-            const page = await newE2EPage({
-                html: html ` <calcite-block heading="With header actions" summary="has header actions">
-          <calcite-action label="Add" icon="plus" slot="header-menu-actions"></calcite-action>
-        </calcite-block>`
-            });
-            const menuSlot = await page.find(`calcite-block >>> calcite-action-menu slot[name=${SLOTS.headerMenuActions}]`);
-            expect(menuSlot).toBeDefined();
-            const actionAssignedSlot = await page.$eval("calcite-action", (action) => action.assignedSlot.name);
-            expect(actionAssignedSlot).toBe(SLOTS.headerMenuActions);
-        });
-        it("does not render collapsible icon when actions are added to the header menu", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-block heading="test-heading" collapsible>
-          <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
-        </calcite-block>`);
-            const collapsibleIcon = await page.find(`calcite-block >>> .${CSS.toggleIcon}`);
-            expect(collapsibleIcon).toBeNull();
-        });
-    });
-});