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

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

@@ -1,132 +0,0 @@
-import { CSS, TEXT } from "./resources";
-import { accessible, defaults, hidden, reflects, renders } from "../../tests/commonTests";
-import { newE2EPage } from "@stencil/core/testing";
-describe("calcite-block-section", () => {
-    it("renders", async () => renders("calcite-block-section", { display: "block" }));
-    it("honors hidden attribute", async () => hidden("calcite-block-section"));
-    it("reflects properties", async () => reflects("calcite-block-section", [
-        {
-            propertyName: "open",
-            value: true
-        }
-    ]));
-    it("has property defaults", async () => defaults("calcite-block-section", [
-        {
-            propertyName: "open",
-            defaultValue: false
-        },
-        {
-            propertyName: "toggleDisplay",
-            defaultValue: "button"
-        }
-    ]));
-    describe("toggle-display = 'switch'", () => {
-        describe("accessibility", () => {
-            it("when open", async () => accessible(`<calcite-block-section text="text" toggle-display="switch" open><div>some content</div></calcite-block-section>`));
-            it("when closed", async () => accessible(`<calcite-block-section text="text" toggle-display="switch"><div>some content</div></calcite-block-section>`));
-        });
-        it("can display/hide content", async () => {
-            const page = await newE2EPage({
-                html: `<calcite-block-section toggle-display="switch"><div>some content</div></calcite-block-section>`
-            });
-            await assertContentIsDisplayedAndHidden(page);
-        });
-        it("can be toggled", async () => {
-            const page = await newE2EPage({
-                html: `<calcite-block-section toggle-display="switch"></calcite-block-section>`
-            });
-            await assertToggleBehavior(page);
-        });
-        it("renders section text", async () => {
-            const page = await newE2EPage({
-                html: `<calcite-block-section text="test text" open toggle-display="switch"></calcite-block-section>`
-            });
-            const element = await page.find(`calcite-block-section >>> .${CSS.toggle}`);
-            expect(element.textContent).toBe("test text");
-        });
-    });
-    describe("toggle-display = 'button' (default)", () => {
-        describe("accessibility", () => {
-            it("when open", async () => accessible(`<calcite-block-section text="text" open><div>some content</div></calcite-block-section>`));
-            it("when closed", async () => accessible(`<calcite-block-section text="text"><div>some content</div></calcite-block-section>`));
-        });
-        it("can display/hide content", async () => {
-            const page = await newE2EPage({ html: "<calcite-block-section><div>some content</div></calcite-block-section>" });
-            await assertContentIsDisplayedAndHidden(page);
-        });
-        it("can be toggled", async () => {
-            const page = await newE2EPage({ html: "<calcite-block-section></calcite-block-section>" });
-            await assertToggleBehavior(page);
-        });
-    });
-    describe("status = 'invalid'", () => {
-        it("displays a status indicator when `status` is an accepted value", async () => {
-            const page = await newE2EPage({
-                html: `<calcite-block-section status="invalid"><div>content</div></calcite-block-section>`
-            });
-            const statusIconEl = await page.find(`calcite-block-section >>> .${CSS.statusIcon}`);
-            expect(statusIconEl).not.toBeNull();
-        });
-    });
-    describe("status = 'foo'", () => {
-        it("does not display a status indicator when `status` is not an accepted value", async () => {
-            const page2 = await newE2EPage({
-                html: `<calcite-block-section status="foo"><div>content</div></calcite-block-section>`
-            });
-            const statusIconEl2 = await page2.find(`calcite-block-section >>> .${CSS.statusIcon}`);
-            await page2.waitForChanges();
-            expect(statusIconEl2).toBeNull();
-        });
-    });
-    async function assertContentIsDisplayedAndHidden(page) {
-        let element = await page.find("calcite-block-section");
-        let content = await page.find(`calcite-block-section >>> .${CSS.content}`);
-        expect(await content.isVisible()).toBe(false);
-        element.setProperty("open", true);
-        await page.waitForChanges();
-        element = await page.find("calcite-block-section[open]");
-        content = await page.find(`calcite-block-section >>> .${CSS.content}`);
-        expect(element).toBeTruthy();
-        expect(await content.isVisible()).toBe(true);
-        element.setProperty("open", false);
-        await page.waitForChanges();
-        element = await page.find("calcite-block-section[open]");
-        content = await page.find(`calcite-block-section >>> .${CSS.content}`);
-        expect(element).toBeNull();
-        expect(await content.isVisible()).toBe(false);
-    }
-    async function assertToggleBehavior(page) {
-        const element = await page.find("calcite-block-section");
-        const toggleSpy = await element.spyOnEvent("calciteBlockSectionToggle");
-        const toggle = await page.find(`calcite-block-section >>> .${CSS.toggle}`);
-        expect(toggle.getAttribute("aria-label")).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);
-        await toggle.click();
-        expect(toggleSpy).toHaveReceivedEventTimes(2);
-        expect(await element.getProperty("open")).toBe(false);
-        expect(toggle.getAttribute("aria-label")).toBe(TEXT.expand);
-        const keyboardToggleEmitter = toggle.tagName === "CALCITE-ACTION"
-            ? (await page.evaluateHandle(() => {
-                // keyboard event needs to be dispatched from the action's button for it to trigger a click
-                // deep shadow piercing is based on https://github.com/puppeteer/puppeteer/issues/858#issuecomment-438540596
-                return document
-                    .querySelector("calcite-block-section")
-                    .shadowRoot.querySelector("section > calcite-action")
-                    .shadowRoot.querySelector("button");
-            })).asElement()
-            : toggle;
-        await keyboardToggleEmitter.press(" ");
-        await page.waitForChanges();
-        expect(toggleSpy).toHaveReceivedEventTimes(3);
-        expect(await element.getProperty("open")).toBe(true);
-        expect(toggle.getAttribute("aria-label")).toBe(TEXT.collapse);
-        await keyboardToggleEmitter.press("Enter");
-        await page.waitForChanges();
-        expect(toggleSpy).toHaveReceivedEventTimes(4);
-        expect(await element.getProperty("open")).toBe(false);
-        expect(toggle.getAttribute("aria-label")).toBe(TEXT.expand);
-    }
-});

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

@@ -1,529 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { accessible, disabled, HYDRATED_ATTR, labelable, defaults, hidden } from "../../tests/commonTests";
-import { CSS } from "./resources";
-import { html } from "../../../support/formatting";
-describe("calcite-button", () => {
-    it("defaults", async () => defaults("calcite-button", [
-        {
-            propertyName: "alignment",
-            defaultValue: "center"
-        },
-        {
-            propertyName: "appearance",
-            defaultValue: "solid"
-        },
-        {
-            propertyName: "label",
-            defaultValue: undefined
-        },
-        {
-            propertyName: "color",
-            defaultValue: "blue"
-        },
-        {
-            propertyName: "disabled",
-            defaultValue: false
-        },
-        {
-            propertyName: "href",
-            defaultValue: undefined
-        },
-        {
-            propertyName: "iconEnd",
-            defaultValue: undefined
-        },
-        {
-            propertyName: "iconFlipRtl",
-            defaultValue: undefined
-        },
-        {
-            propertyName: "iconStart",
-            defaultValue: undefined
-        },
-        {
-            propertyName: "intlLoading",
-            defaultValue: "Loading"
-        },
-        {
-            propertyName: "loading",
-            defaultValue: false
-        },
-        {
-            propertyName: "name",
-            defaultValue: undefined
-        },
-        {
-            propertyName: "rel",
-            defaultValue: undefined
-        },
-        {
-            propertyName: "form",
-            defaultValue: undefined
-        },
-        {
-            propertyName: "round",
-            defaultValue: false
-        },
-        {
-            propertyName: "scale",
-            defaultValue: "m"
-        },
-        {
-            propertyName: "splitChild",
-            defaultValue: false
-        },
-        {
-            propertyName: "target",
-            defaultValue: undefined
-        },
-        {
-            propertyName: "type",
-            defaultValue: "button"
-        },
-        {
-            propertyName: "width",
-            defaultValue: "auto"
-        }
-    ]));
-    it("honors hidden attribute", async () => hidden("calcite-button"));
-    it("renders as a button with default props", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-button>Continue</calcite-button>`);
-        const element = await page.find("calcite-button");
-        const elementAsButton = await page.find("calcite-button >>> button");
-        const elementAsLink = await page.find("calcite-button >>> a");
-        const iconStart = await page.find(`calcite-button >>> .${CSS.iconStart}`);
-        const iconEnd = await page.find(`calcite-button >>> .${CSS.iconEnd}`);
-        const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
-        expect(element).toHaveAttribute(HYDRATED_ATTR);
-        expect(element).toEqualAttribute("color", "blue");
-        expect(element).toEqualAttribute("appearance", "solid");
-        expect(element).toEqualAttribute("scale", "m");
-        expect(element).toEqualAttribute("width", "auto");
-        expect(elementAsLink).toBeNull();
-        expect(elementAsButton).not.toBeNull();
-        expect(iconStart).toBeNull();
-        expect(iconEnd).toBeNull();
-        expect(loader).toBeNull();
-    });
-    it("is accessible", async () => accessible(`<calcite-button>Continue</calcite-button>`));
-    it("is accessible: href", async () => accessible(`<calcite-button href="/">Continue</calcite-button>`));
-    it("is accessible: style props", async () => accessible(`<calcite-button color="red" scale="l" width="half" appearance="outline">Continue</calcite-button>`));
-    it("is accessible: href and target", async () => accessible(`<calcite-button rel="noopener noreferrer" target="_blank" class="mycustomclass" href="google.com">Continue</calcite-button>`));
-    it("is accessible: icons and loading", async () => accessible(`<calcite-button loading icon-start='plus' icon-end='plus'>Continue</calcite-button>`));
-    it("is labelable", async () => labelable("calcite-button"));
-    it("can be disabled", () => disabled("calcite-button"));
-    it("should update childElType when href changes", async () => {
-        const page = await newE2EPage({ html: `<calcite-button>Continue</calcite-button>` });
-        const link = await page.find("calcite-button");
-        let elementAsLink;
-        let elementAsSpan;
-        elementAsSpan = await page.find("calcite-button >>> button");
-        elementAsLink = await page.find("calcite-button >>> a");
-        expect(elementAsSpan).not.toBeNull();
-        expect(elementAsLink).toBeNull();
-        link.setProperty("href", "/");
-        await page.waitForChanges();
-        elementAsSpan = await page.find("calcite-button >>> button");
-        elementAsLink = await page.find("calcite-button >>> a");
-        expect(elementAsSpan).toBeNull();
-        expect(elementAsLink).not.toBeNull();
-    });
-    it("renders as a link with default props", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-button href="/">Continue</calcite-button>`);
-        const element = await page.find("calcite-button");
-        const elementAsButton = await page.find("calcite-button >>> button");
-        const elementAsLink = await page.find("calcite-button >>> a");
-        const iconStart = await page.find(`calcite-button >>> .${CSS.iconStart}`);
-        const iconEnd = await page.find(`calcite-button >>> .${CSS.iconEnd}`);
-        const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
-        expect(element).toHaveAttribute(HYDRATED_ATTR);
-        expect(element).toEqualAttribute("color", "blue");
-        expect(element).toEqualAttribute("appearance", "solid");
-        expect(element).toEqualAttribute("scale", "m");
-        expect(element).toEqualAttribute("width", "auto");
-        expect(elementAsLink).not.toBeNull();
-        expect(elementAsButton).toBeNull();
-        expect(iconStart).toBeNull();
-        expect(iconEnd).toBeNull();
-        expect(loader).toBeNull();
-    });
-    it("renders as a button with requested props", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-button color="red" scale="l" width="half" appearance="outline">Continue</calcite-button>`);
-        const element = await page.find("calcite-button");
-        const elementAsButton = await page.find("calcite-button >>> button");
-        const elementAsLink = await page.find("calcite-button >>> a");
-        const iconStart = await page.find(`calcite-button >>> .${CSS.iconStart}`);
-        const iconEnd = await page.find(`calcite-button >>> .${CSS.iconEnd}`);
-        const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
-        expect(element).toHaveAttribute(HYDRATED_ATTR);
-        expect(element).toEqualAttribute("color", "red");
-        expect(element).toEqualAttribute("appearance", "outline");
-        expect(element).toEqualAttribute("scale", "l");
-        expect(element).toEqualAttribute("width", "half");
-        expect(elementAsLink).toBeNull();
-        expect(elementAsButton).not.toBeNull();
-        expect(iconStart).toBeNull();
-        expect(iconEnd).toBeNull();
-        expect(loader).toBeNull();
-    });
-    it("renders as a link with requested props", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-button href="/" color="red" scale="l" width="half" appearance="outline">Continue</calcite-button>`);
-        const element = await page.find("calcite-button");
-        const elementAsButton = await page.find("calcite-button >>> button");
-        const elementAsLink = await page.find("calcite-button >>> a");
-        const iconStart = await page.find(`calcite-button >>> .${CSS.iconStart}`);
-        const iconEnd = await page.find(`calcite-button >>> .${CSS.iconEnd}`);
-        const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
-        expect(element).toHaveAttribute(HYDRATED_ATTR);
-        expect(element).toEqualAttribute("color", "red");
-        expect(element).toEqualAttribute("appearance", "outline");
-        expect(element).toEqualAttribute("scale", "l");
-        expect(element).toEqualAttribute("width", "half");
-        expect(elementAsLink).not.toBeNull();
-        expect(elementAsButton).toBeNull();
-        expect(iconStart).toBeNull();
-        expect(iconEnd).toBeNull();
-        expect(loader).toBeNull();
-    });
-    it("passes attributes to rendered child link", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-button rel="noopener noreferrer" target="_blank" class="mycustomclass" href="google.com">Continue</calcite-button>`);
-        const element = await page.find("calcite-button");
-        const elementAsButton = await page.find("calcite-button >>> button");
-        const elementAsLink = await page.find("calcite-button >>> a");
-        const iconStart = await page.find(`calcite-button >>> .${CSS.iconStart}`);
-        const iconEnd = await page.find(`calcite-button >>> .${CSS.iconEnd}`);
-        const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
-        expect(element).toHaveAttribute(HYDRATED_ATTR);
-        expect(elementAsLink).not.toBeNull();
-        expect(elementAsButton).toBeNull();
-        expect(elementAsLink).toEqualAttribute("href", "google.com");
-        expect(elementAsLink).toEqualAttribute("rel", "noopener noreferrer");
-        expect(elementAsLink).toEqualAttribute("target", "_blank");
-        expect(iconStart).toBeNull();
-        expect(iconEnd).toBeNull();
-        expect(loader).toBeNull();
-    });
-    it("passes attributes to rendered child button", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-button type="reset" name="myname" class="mycustomclass">Continue</calcite-button>`);
-        const element = await page.find("calcite-button");
-        const elementAsButton = await page.find("calcite-button >>> button");
-        const elementAsLink = await page.find("calcite-button >>> a");
-        const iconStart = await page.find(`calcite-button >>> .${CSS.iconStart}`);
-        const iconEnd = await page.find(`calcite-button >>> .${CSS.iconEnd}`);
-        const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
-        expect(element).toHaveAttribute(HYDRATED_ATTR);
-        expect(elementAsLink).toBeNull();
-        expect(elementAsButton).not.toBeNull();
-        expect(elementAsButton).toEqualAttribute("type", "reset");
-        expect(elementAsButton).toEqualAttribute("name", "myname");
-        expect(iconStart).toBeNull();
-        expect(iconEnd).toBeNull();
-        expect(loader).toBeNull();
-    });
-    it("renders with an icon-start", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-button icon-start='plus'>Continue</calcite-button>`);
-        const element = await page.find("calcite-button");
-        const elementAsButton = await page.find("calcite-button >>> button");
-        const elementAsLink = await page.find("calcite-button >>> a");
-        const iconStart = await page.find(`calcite-button >>> .${CSS.iconStart}`);
-        const iconEnd = await page.find(`calcite-button >>> .${CSS.iconEnd}`);
-        const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
-        expect(element).toHaveAttribute(HYDRATED_ATTR);
-        expect(elementAsLink).toBeNull();
-        expect(elementAsButton).not.toBeNull();
-        expect(iconStart).not.toBeNull();
-        expect(iconEnd).toBeNull();
-        expect(loader).toBeNull();
-    });
-    it("renders with an icon-end", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-button icon-end='plus'>Continue</calcite-button>`);
-        const element = await page.find("calcite-button");
-        const elementAsButton = await page.find("calcite-button >>> button");
-        const elementAsLink = await page.find("calcite-button >>> a");
-        const iconStart = await page.find(`calcite-button >>> .${CSS.iconStart}`);
-        const iconEnd = await page.find(`calcite-button >>> .${CSS.iconEnd}`);
-        const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
-        expect(element).toHaveAttribute(HYDRATED_ATTR);
-        expect(elementAsLink).toBeNull();
-        expect(elementAsButton).not.toBeNull();
-        expect(iconStart).toBeNull();
-        expect(iconEnd).not.toBeNull();
-        expect(loader).toBeNull();
-    });
-    it("renders with an icon-start and icon-end", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-button icon-start='plus' icon-end='plus'>Continue</calcite-button>`);
-        const element = await page.find("calcite-button");
-        const elementAsButton = await page.find("calcite-button >>> button");
-        const elementAsLink = await page.find("calcite-button >>> a");
-        const iconStart = await page.find(`calcite-button >>> .${CSS.iconStart}`);
-        const iconEnd = await page.find(`calcite-button >>> .${CSS.iconEnd}`);
-        const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
-        expect(element).toHaveAttribute(HYDRATED_ATTR);
-        expect(elementAsLink).toBeNull();
-        expect(elementAsButton).not.toBeNull();
-        expect(iconStart).not.toBeNull();
-        expect(iconEnd).not.toBeNull();
-        expect(loader).toBeNull();
-    });
-    it("renders hidden icon when both icon and loader are requested, no text", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-button loading icon-start='plus'></calcite-button>`);
-        const element = await page.find("calcite-button");
-        const elementAsButton = await page.find("calcite-button >>> button");
-        const iconStart = await page.find(`calcite-button >>> .${CSS.iconStart}`);
-        const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
-        expect(elementAsButton).not.toBeNull();
-        expect(iconStart).not.toBeNull();
-        expect(await iconStart.isVisible()).toBeFalsy();
-        expect(loader).not.toBeNull();
-        // one icon only buttons should stay square
-        expect(await element.getProperty("offsetWidth")).toEqual(await element.getProperty("offsetHeight"));
-    });
-    it("renders with a loader and an icon-start when both icon-start and loader are requested", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-button loading icon-start='plus'>Continue</calcite-button>`);
-        const element = await page.find("calcite-button");
-        const elementAsButton = await page.find("calcite-button >>> button");
-        const elementAsLink = await page.find("calcite-button >>> a");
-        const iconStart = await page.find(`calcite-button >>> .${CSS.iconStart}`);
-        const iconEnd = await page.find(`calcite-button >>> .${CSS.iconEnd}`);
-        const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
-        expect(element).toHaveAttribute(HYDRATED_ATTR);
-        expect(elementAsLink).toBeNull();
-        expect(elementAsButton).not.toBeNull();
-        expect(iconStart).not.toBeNull();
-        expect(iconEnd).toBeNull();
-        expect(loader).not.toBeNull();
-    });
-    it("renders with a loader and an icon-end when both icon-end and loader are requested", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-button loading icon-end='plus'>Continue</calcite-button>`);
-        const element = await page.find("calcite-button");
-        const elementAsButton = await page.find("calcite-button >>> button");
-        const elementAsLink = await page.find("calcite-button >>> a");
-        const iconStart = await page.find(`calcite-button >>> .${CSS.iconStart}`);
-        const iconEnd = await page.find(`calcite-button >>> .${CSS.iconEnd}`);
-        const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
-        expect(element).toHaveAttribute(HYDRATED_ATTR);
-        expect(elementAsLink).toBeNull();
-        expect(elementAsButton).not.toBeNull();
-        expect(iconStart).toBeNull();
-        expect(iconEnd).not.toBeNull();
-        expect(loader).not.toBeNull();
-    });
-    it("renders with a loader and an icon-start and icon-end when all are requested", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-button loading icon-start='plus' icon-end='plus'>Continue</calcite-button>`);
-        const element = await page.find("calcite-button");
-        const elementAsButton = await page.find("calcite-button >>> button");
-        const elementAsLink = await page.find("calcite-button >>> a");
-        const iconStart = await page.find(`calcite-button >>> .${CSS.iconStart}`);
-        const iconEnd = await page.find(`calcite-button >>> .${CSS.iconEnd}`);
-        const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
-        expect(element).toHaveAttribute(HYDRATED_ATTR);
-        expect(elementAsLink).toBeNull();
-        expect(elementAsButton).not.toBeNull();
-        expect(iconStart).not.toBeNull();
-        expect(iconEnd).not.toBeNull();
-        expect(loader).not.toBeNull();
-    });
-    it("should not render loader with an icon-start ,width set to half and aligned space-between", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-button icon-start='plus' width='half' , alignment='space-between'>Continue</calcite-button>`);
-        const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
-        expect(loader).toBeNull();
-    });
-    it("hascontent class is present on rendered child when content (as text) is present", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-button>Continue</calcite-button>`);
-        const elementAsButton = await page.find("calcite-button >>> button");
-        expect(elementAsButton).toHaveClass(CSS.contentSlotted);
-    });
-    it("hascontent class is present on rendered child when content (as element) is present", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-button><calcite-icon icon="banana" /></calcite-button>`);
-        const elementAsButton = await page.find("calcite-button >>> button");
-        expect(elementAsButton).toHaveClass(CSS.contentSlotted);
-    });
-    it("hascontent class is present on rendered child when content (as text and element) is present", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-button>Banana <calcite-icon icon="banana" /></calcite-button>`);
-        const elementAsButton = await page.find("calcite-button >>> button");
-        expect(elementAsButton).toHaveClass(CSS.contentSlotted);
-    });
-    it("hascontent class is not present on rendered child when content is not present", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-button icon-start='plus'></calcite-button>`);
-        const elementAsButton = await page.find("calcite-button >>> button");
-        expect(elementAsButton).not.toHaveClass(CSS.contentSlotted);
-    });
-    describe("CSS properties for light/dark themes", () => {
-        const buttonSnippet = `
-      <calcite-button
-        class="layers"
-        icon-start="layer"
-        icon-end="chevron-down"
-        appearance="transparent"
-        color="blue"
-      >
-        Layers
-      </calcite-button>
-    `;
-        let page;
-        let buttonEl;
-        let buttonFocusStyle;
-        let buttonHoverStyle;
-        it("should have defined CSS custom properties", async () => {
-            page = await newE2EPage({ html: buttonSnippet });
-            const buttonStyles = await page.evaluate(() => {
-                buttonEl = document.querySelector("calcite-button");
-                buttonEl.style.setProperty("--calcite-button-transparent-hover", "rgba(34, 23, 200, 0.4)");
-                buttonEl.style.setProperty("--calcite-button-transparent-press", "rgba(1, 20, 44, 0.1");
-                return {
-                    hoverFocus: window.getComputedStyle(buttonEl).getPropertyValue("--calcite-button-transparent-hover"),
-                    active: window.getComputedStyle(buttonEl).getPropertyValue("--calcite-button-transparent-press")
-                };
-            });
-            expect(buttonStyles.hoverFocus).toEqual("rgba(34, 23, 200, 0.4)");
-            expect(buttonStyles.active).toEqual("rgba(1, 20, 44, 0.1");
-        });
-        describe("when theme attribute is not provided", () => {
-            it("should render button pseudo classes with default values tied to light theme", async () => {
-                page = await newE2EPage({ html: buttonSnippet });
-                buttonEl = await page.find("calcite-button >>> button");
-                await buttonEl.focus();
-                await page.waitForChanges();
-                buttonFocusStyle = await buttonEl.getComputedStyle(":focus");
-                expect(buttonFocusStyle.getPropertyValue("background-color")).toEqual("rgba(0, 0, 0, 0.05)");
-                await buttonEl.hover();
-                await page.waitForChanges();
-                buttonHoverStyle = await buttonEl.getComputedStyle(":hover");
-                expect(buttonHoverStyle.getPropertyValue("background-color")).toEqual("rgba(0, 0, 0, 0.05)");
-            });
-        });
-        describe("when theme attribute is dark", () => {
-            it("should render button pseudo classes with value tied to dark theme", async () => {
-                page = await newE2EPage({
-                    html: `<div class="calcite-theme-dark">${buttonSnippet}</div>`
-                });
-                buttonEl = await page.find("calcite-button >>> button");
-                await buttonEl.focus();
-                await page.waitForChanges();
-                buttonFocusStyle = await buttonEl.getComputedStyle(":focus");
-                expect(buttonFocusStyle.getPropertyValue("background-color")).toEqual("rgba(255, 255, 255, 0.05)");
-                await buttonEl.hover();
-                await page.waitForChanges();
-                buttonHoverStyle = await buttonEl.getComputedStyle(":hover");
-                expect(buttonHoverStyle.getPropertyValue("background-color")).toEqual("rgba(255, 255, 255, 0.05)");
-            });
-        });
-        it("should allow the CSS custom property to be overridden", async () => {
-            const overrideStyle = "rgba(255, 255, 0, 0.9)";
-            page = await newE2EPage({
-                html: `
-        <style>
-          :root {
-            --calcite-button-transparent-hover: ${overrideStyle};
-          }
-        </style>
-        <div>${buttonSnippet}</div>`
-            });
-            buttonEl = await page.find("calcite-button >>> button");
-            await buttonEl.focus();
-            await page.waitForChanges();
-            buttonFocusStyle = await buttonEl.getComputedStyle(":focus");
-            expect(buttonFocusStyle.getPropertyValue("background-color")).toEqual(overrideStyle);
-            await buttonEl.hover();
-            await page.waitForChanges();
-            buttonHoverStyle = await buttonEl.getComputedStyle(":hover");
-            expect(buttonHoverStyle.getPropertyValue("background-color")).toEqual(overrideStyle);
-        });
-    });
-    describe("when loading changes", () => {
-        it("should render loader with loading-in class when new value is true", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`
-        <calcite-button id="one-icon" icon-start='plus'></calcite-button>
-        <calcite-button id="two-icons" icon-start='arrow-right' icon-end='download'></calcite-button>
-        <calcite-button id="icons-and-text" icon-start='arrow-right' icon-end='download'>Go!</calcite-button>
-      `);
-            const button1 = await page.find("calcite-button[id='one-icon']");
-            const button2 = await page.find("calcite-button[id='two-icons']");
-            const button3 = await page.find("calcite-button[id='icons-and-text']");
-            await button1.setProperty("loading", true);
-            await button2.setProperty("loading", true);
-            await button3.setProperty("loading", true);
-            await page.waitForChanges();
-            const loader1 = await page.find(`calcite-button[id='one-icon'] >>> .${CSS.buttonLoader} calcite-loader`);
-            const loader2 = await page.find(`calcite-button[id='two-icons'] >>> .${CSS.buttonLoader} calcite-loader`);
-            const loader3 = await page.find(`calcite-button[id='icons-and-text'] >>> .${CSS.buttonLoader} calcite-loader`);
-            expect(loader1).toHaveClass(CSS.loadingIn);
-            expect(loader2).toHaveClass(CSS.loadingIn);
-            expect(loader3).toHaveClass(CSS.loadingIn);
-        });
-        it("should render loader with loading-out class when new value is false", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`
-        <calcite-button loading id="one-icon" icon-start='plus'></calcite-button>
-        <calcite-button loading id="two-icons" icon-start='arrow-right' icon-end='download'></calcite-button>
-        <calcite-button loading id="icons-and-text" icon-start='arrow-right' icon-end='download'>Go!</calcite-button>
-      `);
-            await page.waitForChanges();
-            const button1 = await page.find("calcite-button[id='one-icon']");
-            const button2 = await page.find("calcite-button[id='two-icons']");
-            const button3 = await page.find("calcite-button[id='icons-and-text']");
-            const loader1 = await page.find(`calcite-button[id='one-icon'] >>> .${CSS.buttonLoader} calcite-loader`);
-            const loader2 = await page.find(`calcite-button[id='two-icons'] >>> .${CSS.buttonLoader} calcite-loader`);
-            const loader3 = await page.find(`calcite-button[id='icons-and-text'] >>> .${CSS.buttonLoader} calcite-loader`);
-            await button1.setProperty("loading", false);
-            await button2.setProperty("loading", false);
-            await button3.setProperty("loading", false);
-            await page.waitForChanges();
-            expect(loader1).toHaveClass(CSS.loadingOut);
-            expect(loader2).toHaveClass(CSS.loadingOut);
-            expect(loader3).toHaveClass(CSS.loadingOut);
-        });
-        it("should remove calcite-loader from dom when new value is false", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-button loading icon-start='plus'></calcite-button>`);
-            const animationDurationInMs = 300;
-            const element = await page.find("calcite-button");
-            await element.setProperty("loading", false);
-            await page.waitForChanges();
-            await page.waitForTimeout(animationDurationInMs);
-            const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
-            expect(loader).toBeNull();
-        });
-    });
-    describe("form integration", () => {
-        async function assertOnFormButtonType(type) {
-            const page = await newE2EPage();
-            await page.setContent(html `
-        <form>
-          <calcite-button type="${type}"></calcite-button>
-        </form>
-      `);
-            await page.$eval("form", (form, type) => {
-                form.addEventListener(type, (event) => {
-                    event.preventDefault();
-                    window.called = true;
-                });
-            }, type);
-            const button = await page.find("calcite-button");
-            await button.click();
-            const called = await page.evaluate(() => window.called);
-            expect(called).toBe(true);
-        }
-        it("submits", async () => assertOnFormButtonType("submit"));
-        it("resets", async () => assertOnFormButtonType("reset"));
-    });
-});