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

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

@@ -1,69 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, renders, hidden } from "../../tests/commonTests";
-describe("calcite-graph", () => {
-    it("renders", async () => renders(`<calcite-graph></calcite-graph>`, { display: "block" }));
-    it("honors hidden attribute", async () => hidden("calcite-graph"));
-    it("is accessible", async () => accessible(`<calcite-graph></calcite-graph>`));
-    it("is accessible: with data", async () => {
-        const html = "<calcite-graph></calcite-graph>";
-        const page = await newE2EPage({
-            html
-        });
-        await page.$eval("calcite-graph", (elm) => {
-            elm.data = [
-                [0, 4],
-                [1, 7],
-                [4, 6],
-                [6, 2]
-            ];
-        });
-        await page.waitForChanges();
-        await accessible(html, page);
-    });
-    it("has property defaults", async () => defaults("calcite-graph", [
-        {
-            propertyName: "data",
-            defaultValue: []
-        }
-    ]));
-    it("draws an area graph", async () => {
-        const dimensionsStyle = `style="height:100px; width:300px;"`;
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-graph ${dimensionsStyle}></calcite-graph>`);
-        await page.$eval("calcite-graph", (elm) => {
-            elm.data = [
-                [0, 4],
-                [1, 7],
-                [4, 6],
-                [6, 2]
-            ];
-        });
-        await page.waitForChanges();
-        const path = await page.find("calcite-graph >>> path");
-        const d = path.getAttribute("d");
-        expect(d).toBe("M 0,60 L 0,20 L 0,20 C 16.666666666666664,-10.000000000000014 33.333333333333336,-40 50,-40 C 100,-40 150,-33.33333333333334 200,-20 C 233.33333333333334,-11.111111111111114 266.66666666666663,24.444444444444443 300,60 L 300,60 Z");
-    });
-    it("uses color-stops when provided", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-graph></calcite-graph>`);
-        await page.$eval("calcite-graph", (elm) => {
-            elm.data = [
-                [0, 4],
-                [1, 7],
-                [4, 6],
-                [6, 2]
-            ];
-            elm.colorStops = [
-                { offset: 0, color: "red" },
-                { offset: 0.5, color: "green" },
-                { offset: 1, color: "blue" }
-            ];
-        });
-        await page.waitForChanges();
-        const linearGradient = await page.find("calcite-graph >>> linearGradient");
-        const linearGradientId = linearGradient.getAttribute("id");
-        const path = await page.find("calcite-graph >>> path");
-        const fill = path.getAttribute("fill");
-        expect(fill).toBe(`url(#${linearGradientId})`);
-    });
-});

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

@@ -1,30 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { accessible, hidden, renders } from "../../tests/commonTests";
-import { CSS } from "./resources";
-describe("calcite-handle", () => {
-    it("renders", async () => renders("calcite-handle", { display: "flex" }));
-    it("honors hidden attribute", async () => hidden("calcite-handle"));
-    it("is accessible", async () => accessible(`<calcite-handle></calcite-handle>`));
-    it("activates when focused and spacebar is pressed", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-handle></calcite-handle>");
-        const handle = await page.find("calcite-handle");
-        const button = await page.find(`calcite-handle >>> .${CSS.handle}`);
-        expect(await handle.getProperty("activated")).toBe(false);
-        await button.focus();
-        await page.keyboard.press(" ");
-        await page.waitForChanges();
-        expect(await handle.getProperty("activated")).toBe(true);
-    });
-    it("fires calciteHandleNudge event when focused and up or down key is pressed", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-handle></calcite-handle>");
-        const eventSpy = await page.spyOnEvent("calciteHandleNudge");
-        const button = await page.find(`calcite-handle >>> .${CSS.handle}`);
-        await button.focus();
-        await page.keyboard.press(" ");
-        await page.keyboard.press("ArrowUp");
-        await page.keyboard.press("ArrowDown");
-        expect(eventSpy).toHaveReceivedEventTimes(2);
-    });
-});

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

@@ -1,75 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, reflects, renders, hidden } from "../../tests/commonTests";
-import { CSS } from "./resources";
-import { scaleToPx } from "./utils";
-describe("calcite-icon", () => {
-    it("honors hidden attribute", async () => hidden("calcite-icon"));
-    it("has defaults", async () => defaults("calcite-icon", [
-        { propertyName: "flipRtl", defaultValue: false },
-        { propertyName: "scale", defaultValue: "m" }
-    ]));
-    it("reflects", async () => reflects("calcite-icon", [
-        { propertyName: "flipRtl", value: true },
-        { propertyName: "scale", value: "m" }
-    ]));
-    it("is accessible", async () => accessible(`<calcite-icon icon="a-z" text-label="sort options"></calcite-icon>`));
-    it("flips icon when enabled and in RTL", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-icon icon="a-z"></calcite-icon>`);
-        const icon = await page.find(`calcite-icon`);
-        const flipRtlIconSelector = `calcite-icon >>> .${CSS.flipRtl}`;
-        expect(await page.find(flipRtlIconSelector)).toBeNull();
-        icon.setProperty("dir", "rtl");
-        icon.setProperty("flipRtl", true);
-        await page.waitForChanges();
-        expect(await page.find(flipRtlIconSelector)).toBeTruthy();
-    });
-    describe("rendering", () => {
-        it("basic", async () => renders("calcite-icon", { display: "inline-flex" }));
-        it("uses path data to render icon", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-icon icon="a-z"></calcite-icon>`);
-            await page.waitForChanges();
-            const path = await page.find(`calcite-icon >>> path`);
-            expect(path.getAttribute("d")).toBeTruthy();
-        });
-        it("supports both camelcase and kebab case for icon name", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-icon icon="a-z"></calcite-icon>`);
-            await page.waitForChanges();
-            const icon = await page.find(`calcite-icon`);
-            const path = await page.find(`calcite-icon >>> path`);
-            const iconPathData = path.getAttribute("d");
-            icon.setProperty("icon", "aZ");
-            await page.waitForChanges();
-            expect(path.getAttribute("d")).toBe(iconPathData);
-        });
-        it("loads icon when it's close to viewport", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-icon icon="a-z" style="margin-top: 1000px"></calcite-icon>`);
-            await page.waitForChanges();
-            const icon = await page.find(`calcite-icon`);
-            const path = await page.find(`calcite-icon >>> path`);
-            expect(path.getAttribute("d")).toBeFalsy();
-            icon.setProperty("style", null);
-            await page.waitForChanges();
-            expect(path.getAttribute("d")).toBeTruthy();
-        });
-        describe("scales", () => {
-            const scales = ["s", "m", "l"];
-            scales.forEach((scale) => it(`${scale} scale`, async () => {
-                const page = await newE2EPage();
-                await page.setContent(`<calcite-icon icon="a-z" scale="${scale}"></calcite-icon>`);
-                const calciteIcon = await page.find(`calcite-icon`);
-                const calciteIconComputedStyle = await calciteIcon.getComputedStyle();
-                const svg = await page.find(`calcite-icon >>> svg`);
-                const sizeInPx = scaleToPx[scale];
-                expect(calciteIconComputedStyle.height).toBe(`${sizeInPx}px`);
-                expect(calciteIconComputedStyle.width).toBe(`${sizeInPx}px`);
-                expect(svg.getAttribute("width")).toBe("100%");
-                expect(svg.getAttribute("height")).toBe("100%");
-                expect(svg.getAttribute("viewBox")).toBe(`0 0 ${sizeInPx} ${sizeInPx}`);
-            }));
-        });
-    });
-});

package/dist/collection/components/icon/utils.spec.js

@@ -1,61 +0,0 @@
-import { fetchIcon, iconCache, normalizeIconName, requestCache, scaleToPx } from "./utils";
-describe("utils", () => {
-    describe("scaleToPx", () => {
-        it("maps scale values to sizes", () => {
-            expect(scaleToPx["s"]).toBe(16);
-            expect(scaleToPx["m"]).toBe(24);
-            expect(scaleToPx["l"]).toBe(32);
-        });
-    });
-    describe("fetchIcon", () => {
-        it("avoids fetching if icon data is available", async () => {
-            expect(Object.keys(requestCache)).toHaveLength(0);
-            expect(Object.keys(iconCache)).toHaveLength(0);
-            const smallBanana = {
-                icon: "banana",
-                scale: "s"
-            };
-            const mediumBanana = {
-                icon: "banana",
-                scale: "m"
-            };
-            const circle = {
-                icon: "circleF",
-                scale: "s"
-            };
-            const circleKebab = {
-                icon: "circle-f",
-                scale: "m"
-            };
-            const circleCamel = {
-                icon: "circleF",
-                scale: "m"
-            };
-            await fetchIcon(smallBanana);
-            expect(Object.keys(requestCache)).toHaveLength(1);
-            expect(Object.keys(iconCache)).toHaveLength(1);
-            await fetchIcon(mediumBanana);
-            expect(Object.keys(requestCache)).toHaveLength(2);
-            expect(Object.keys(iconCache)).toHaveLength(2);
-            await fetchIcon(circle);
-            expect(Object.keys(requestCache)).toHaveLength(3);
-            expect(Object.keys(iconCache)).toHaveLength(3);
-            await fetchIcon(circleKebab);
-            expect(Object.keys(requestCache)).toHaveLength(4);
-            expect(Object.keys(iconCache)).toHaveLength(4);
-            await fetchIcon(smallBanana);
-            await fetchIcon(mediumBanana);
-            await fetchIcon(circleCamel);
-            expect(Object.keys(requestCache)).toHaveLength(4);
-            expect(Object.keys(iconCache)).toHaveLength(4);
-        });
-        it("normalizes icon name", () => {
-            // used internally by fetchIcon
-            expect(normalizeIconName("aZ")).toBe("aZ");
-            expect(normalizeIconName("a-z")).toBe("aZ");
-            expect(normalizeIconName("2d-explore")).toBe("i2DExplore");
-            expect(normalizeIconName("2d-explore")).toBe("i2DExplore");
-            expect(normalizeIconName("2DExplore")).toBe("i2DExplore");
-        });
-    });
-});

package/dist/collection/components/inline-editable/inline-editable.e2e.js

@@ -1,327 +0,0 @@
-import { accessible, disabled, labelable, renders, hidden } from "../../tests/commonTests";
-import { newE2EPage } from "@stencil/core/testing";
-import { CSS } from "./resources";
-import { html } from "../../../support/formatting";
-describe("calcite-inline-editable", () => {
-    it("renders", () => renders(html `
-        <calcite-inline-editable>
-          <calcite-input />
-        </calcite-inline-editable>
-      `, { display: "block" }));
-    it("honors hidden attribute", async () => hidden("calcite-inline-editable"));
-    it("can be disabled", () => disabled(html `
-        <calcite-inline-editable>
-          <calcite-input />
-        </calcite-inline-editable>
-      `, { focusTarget: { tab: "calcite-inline-editable", click: "calcite-input" } }));
-    describe("rendering permutations", () => {
-        let page;
-        beforeEach(async () => {
-            page = await newE2EPage();
-            await page.setContent(`
-      <calcite-inline-editable>
-        <calcite-input/>
-      </calcite-inline-editable>
-      `);
-        });
-        it("renders default props when none are provided", async () => {
-            const element = await page.find("calcite-inline-editable");
-            await page.waitForChanges();
-            expect(element).not.toHaveAttribute("controls");
-            expect(element).not.toHaveAttribute("editing-enabled");
-            expect(element).not.toHaveAttribute("loading");
-        });
-        it(`should set all internal calcite-button types to 'button'`, async () => {
-            const page = await newE2EPage({
-                html: html `<calcite-inline-editable controls editing-enabled>
-          <calcite-input />
-        </calcite-inline-editable>`
-            });
-            const buttons = await page.findAll("calcite-inline-editable >>> calcite-button");
-            expect(buttons).toHaveLength(3);
-            for (const button of buttons) {
-                expect(await button.getProperty("type")).toBe("button");
-            }
-        });
-        it("uses a wrapping label's scale when none are provided", async () => {
-            page = await newE2EPage();
-            await page.setContent(`
-      <calcite-label scale="l">
-        <calcite-inline-editable>
-          <calcite-input/>
-        </calcite-inline-editable>
-      </calcite-label>
-      `);
-            await page.waitForChanges();
-            const element = await page.find("calcite-inline-editable");
-            expect(element).toEqualAttribute("scale", "l");
-        });
-        it("uses a child input's scale when none are provided", async () => {
-            page = await newE2EPage();
-            await page.setContent(`
-      <calcite-label>
-        <calcite-inline-editable>
-          <calcite-input scale="l"/>
-        </calcite-inline-editable>
-      </calcite-label>
-      `);
-            await page.waitForChanges();
-            const element = await page.find("calcite-inline-editable");
-            expect(element).toEqualAttribute("scale", "l");
-        });
-        it("renders requested props when valid props are provided", async () => {
-            page = await newE2EPage();
-            await page.setContent(`
-      <calcite-inline-editable controls editing-enabled loading disabled scale="l" >
-        <calcite-input/>
-      </calcite-inline-editable>
-      `);
-            await page.waitForChanges();
-            const element = await page.find("calcite-inline-editable");
-            expect(element).toEqualAttribute("scale", "l");
-            expect(element).toHaveAttribute("controls");
-            expect(element).toHaveAttribute("editing-enabled");
-            expect(element).toHaveAttribute("loading");
-            expect(element).toHaveAttribute("disabled");
-        });
-    });
-    describe("does not have controls", () => {
-        let page;
-        beforeEach(async () => {
-            page = await newE2EPage();
-            await page.setContent(`
-      <calcite-inline-editable>
-        <calcite-input value="John Doe"/>
-      </calcite-inline-editable>
-      `);
-        });
-        it("enables editing when enable button is clicked", async () => {
-            const calciteInternalInlineEditableEnableEditingChange = await page.spyOnEvent("calciteInternalInlineEditableEnableEditingChange");
-            const element = await page.find("calcite-inline-editable");
-            const enableEditingButton = await page.find(`calcite-inline-editable >>> .${CSS.enableEditingButton}`);
-            await enableEditingButton.click();
-            expect(element).toHaveAttribute("editing-enabled");
-            expect(calciteInternalInlineEditableEnableEditingChange).toHaveReceivedEventTimes(1);
-        });
-        it("enables editing when the child input is clicked", async () => {
-            const calciteInternalInlineEditableEnableEditingChange = await page.spyOnEvent("calciteInternalInlineEditableEnableEditingChange");
-            const element = await page.find("calcite-inline-editable");
-            await element.click();
-            expect(element).toHaveAttribute("editing-enabled");
-            expect(calciteInternalInlineEditableEnableEditingChange).toHaveReceivedEventTimes(1);
-        });
-        it("disables editing when the child input loses focus", async () => {
-            const element = await page.find("calcite-inline-editable");
-            const input = await page.find("calcite-input");
-            const enableEditingButton = await page.find(`calcite-inline-editable >>> .${CSS.enableEditingButton}`);
-            await enableEditingButton.click();
-            expect(element).toHaveAttribute("editing-enabled");
-            input.triggerEvent("calciteInternalInputBlur");
-            await page.waitForChanges();
-            expect(element).not.toHaveAttribute("editing-enabled");
-        });
-        describe("accessibility", () => {
-            it("is accessible", async () => accessible(html `
-          <calcite-label>
-            Label
-            <calcite-inline-editable>
-              <calcite-input value="John Doe"></calcite-input>
-            </calcite-inline-editable>
-          </calcite-label>
-        `));
-            it("is accessible when editing is enabled", async () => accessible(html `
-          <calcite-label>
-            Label
-            <calcite-inline-editable editing-enabled>
-              <calcite-input value="John Doe"></calcite-input>
-            </calcite-inline-editable>
-          </calcite-label>
-        `));
-        });
-    });
-    describe("has controls", () => {
-        let page;
-        beforeEach(async () => {
-            page = await newE2EPage();
-            await page.setContent(`
-      <calcite-inline-editable controls>
-        <calcite-input value="John Doe"/>
-      </calcite-inline-editable>
-      `);
-        });
-        it("enables editing when enable button is clicked", async () => {
-            const calciteInternalInlineEditableEnableEditingChange = await page.spyOnEvent("calciteInternalInlineEditableEnableEditingChange");
-            const element = await page.find("calcite-inline-editable");
-            const enableEditingButton = await page.find(`calcite-inline-editable >>> .${CSS.enableEditingButton}`);
-            await enableEditingButton.click();
-            expect(element).toHaveAttribute("editing-enabled");
-            expect(calciteInternalInlineEditableEnableEditingChange).toHaveReceivedEventTimes(1);
-        });
-        it("enables editing when the child input is clicked", async () => {
-            const calciteInternalInlineEditableEnableEditingChange = await page.spyOnEvent("calciteInternalInlineEditableEnableEditingChange");
-            const element = await page.find("calcite-inline-editable");
-            await element.click();
-            expect(element).toHaveAttribute("editing-enabled");
-            expect(calciteInternalInlineEditableEnableEditingChange).toHaveReceivedEventTimes(1);
-        });
-        it("restores input value after cancel button is clicked", async () => {
-            const calciteInlineEditableEditCancel = await page.spyOnEvent("calciteInlineEditableEditCancel");
-            const element = await page.find("calcite-inline-editable");
-            const input = await element.find("calcite-input");
-            await element.click();
-            const cancelEditingButton = await page.find(`calcite-inline-editable >>> .${CSS.cancelEditingButton}`);
-            expect(await input.getProperty("value")).toBe("John Doe");
-            await page.$eval("calcite-input", (element) => {
-                const input = element.shadowRoot.querySelector("input");
-                input.setSelectionRange(input.value.length, input.value.length);
-            });
-            await input.type("typo");
-            expect(await input.getProperty("value")).toBe("John Doetypo");
-            const cancelEvent = page.waitForEvent("calciteInlineEditableEditCancel");
-            await cancelEditingButton.click();
-            await cancelEvent;
-            expect(await input.getProperty("value")).toBe("John Doe");
-            expect(calciteInlineEditableEditCancel).toHaveReceivedEventTimes(1);
-        });
-        it("restores input value after escape key is pressed", async () => {
-            const calciteInlineEditableEditCancel = await page.spyOnEvent("calciteInlineEditableEditCancel");
-            const element = await page.find("calcite-inline-editable");
-            const input = await element.find("calcite-input");
-            await element.click();
-            expect(await input.getProperty("value")).toBe("John Doe");
-            await page.$eval("calcite-input", (element) => {
-                const input = element.shadowRoot.querySelector("input");
-                input.setSelectionRange(input.value.length, input.value.length);
-            });
-            await input.type("typo");
-            expect(await input.getProperty("value")).toBe("John Doetypo");
-            await page.keyboard.press("Escape");
-            await calciteInlineEditableEditCancel;
-            expect(await input.getProperty("value")).toBe("John Doe");
-            expect(calciteInlineEditableEditCancel).toHaveReceivedEventTimes(1);
-        });
-        it("emits cancel event only once when editing is cancelled with x button or esc key", async () => {
-            const element = await page.find("calcite-inline-editable");
-            const input = await page.find("calcite-input");
-            const cancelEvent = await page.spyOnEvent("calciteInlineEditableEditCancel");
-            await element.click();
-            const cancelEditingButton = await page.find(`calcite-inline-editable >>> .${CSS.cancelEditingButton}`);
-            await input.type("one");
-            await cancelEditingButton.click();
-            await cancelEvent;
-            expect(cancelEvent).toHaveReceivedEventTimes(1);
-            // should not emit on hover after editing is cancelled, refers to: https://github.com/Esri/calcite-components/issues/4350
-            await element.hover();
-            input.triggerEvent("calciteInternalInputBlur");
-            await page.waitForChanges();
-            await input.click();
-            await input.type("two");
-            await page.keyboard.press("Escape");
-            await cancelEvent;
-            expect(cancelEvent).toHaveReceivedEventTimes(2);
-        });
-        it("does not disable editing when input focus is lost", async () => {
-            const element = await page.find("calcite-inline-editable");
-            const input = await page.find("calcite-input");
-            const enableEditingButton = await page.find(`calcite-inline-editable >>> .${CSS.enableEditingButton}`);
-            await enableEditingButton.click();
-            expect(element).toHaveAttribute("editing-enabled");
-            input.triggerEvent("calciteInternalInputBlur");
-            await page.waitForChanges();
-            expect(element).toHaveAttribute("editing-enabled");
-        });
-        it("emits a confirm changes event when the save button is clicked", async () => {
-            const calciteInlineEditableEditConfirm = await page.spyOnEvent("calciteInlineEditableEditConfirm");
-            const element = await page.find("calcite-inline-editable");
-            const input = await page.find("calcite-input");
-            const enableEditingButton = await page.find(`calcite-inline-editable >>> .${CSS.enableEditingButton}`);
-            await enableEditingButton.click();
-            const confirmChangesButton = await page.find("calcite-inline-editable >>> .confirm-changes-button");
-            await page.$eval("calcite-input", (element) => {
-                const input = element.shadowRoot.querySelector("input");
-                input.setSelectionRange(input.value.length, input.value.length);
-            });
-            await input.type("Moe");
-            await confirmChangesButton.click();
-            expect(calciteInlineEditableEditConfirm).toHaveReceivedEventTimes(1);
-            expect(await input.getProperty("value")).toBe("John DoeMoe");
-            expect(element).toHaveAttribute("editing-enabled");
-        });
-        it("disables editing when afterConfirm resolves successfully", async () => {
-            const element = await page.find("calcite-inline-editable");
-            const afterConfirm = () => new Promise((resolve) => global.setTimeout(resolve, 100));
-            // https://github.com/ionic-team/stencil/issues/1174
-            await page.exposeFunction("afterConfirm", afterConfirm);
-            await page.$eval("calcite-inline-editable", (el) => {
-                el.afterConfirm = afterConfirm;
-            });
-            const calciteInlineEditableEditConfirm = await page.spyOnEvent("calciteInlineEditableEditConfirm");
-            const input = await page.find("calcite-input");
-            const enableEditingButton = await page.find(`calcite-inline-editable >>> .${CSS.enableEditingButton}`);
-            await enableEditingButton.click();
-            const confirmChangesButton = await page.find("calcite-inline-editable >>> .confirm-changes-button");
-            await page.$eval("calcite-input", (element) => {
-                const input = element.shadowRoot.querySelector("input");
-                input.setSelectionRange(input.value.length, input.value.length);
-            });
-            await input.type("Moe");
-            await confirmChangesButton.click();
-            expect(calciteInlineEditableEditConfirm).toHaveReceivedEventTimes(1);
-            await page.waitForChanges();
-            expect(await input.getProperty("value")).toBe("John DoeMoe");
-            expect(element).not.toHaveAttribute("editing-enabled");
-        });
-        it("does not disable editing when afterConfirm resolves unsuccessfully", async () => {
-            const element = await page.find("calcite-inline-editable");
-            const afterConfirm = () => new Promise((_resolve, reject) => global.setTimeout(reject, 100));
-            // https://github.com/ionic-team/stencil/issues/1174
-            await page.exposeFunction("afterConfirm", afterConfirm);
-            await page.$eval("calcite-inline-editable", (el) => {
-                el.afterConfirm = afterConfirm;
-            });
-            const calciteInlineEditableEditConfirm = await page.spyOnEvent("calciteInlineEditableEditConfirm");
-            const input = await page.find("calcite-input");
-            const enableEditingButton = await page.find(`calcite-inline-editable >>> .${CSS.enableEditingButton}`);
-            await enableEditingButton.click();
-            const confirmChangesButton = await page.find("calcite-inline-editable >>> .confirm-changes-button");
-            await page.$eval("calcite-input", (element) => {
-                const input = element.shadowRoot.querySelector("input");
-                input.setSelectionRange(input.value.length, input.value.length);
-            });
-            await input.type("Moe");
-            await confirmChangesButton.click();
-            expect(calciteInlineEditableEditConfirm).toHaveReceivedEventTimes(1);
-            await page.waitForChanges();
-            expect(await input.getProperty("value")).toBe("John DoeMoe");
-            expect(element).toHaveAttribute("editing-enabled");
-        });
-        describe("accessibility", () => {
-            it("is accessible", async () => accessible(html `
-          <calcite-label controls>
-            Label
-            <calcite-inline-editable>
-              <calcite-input value="John Doe"></calcite-input>
-            </calcite-inline-editable>
-          </calcite-label>
-        `));
-            it("is accessible when editing is enabled", async () => accessible(html `
-          <calcite-label controls editing-enabled>
-            Label
-            <calcite-inline-editable editing-enabled>
-              <calcite-input value="John Doe"></calcite-input>
-            </calcite-inline-editable>
-          </calcite-label>
-        `));
-            describe("labelable", () => {
-                it("default", async () => labelable(`<calcite-inline-editable controls>
-              <calcite-input value="John Doe"></calcite-input>
-            </calcite-inline-editable>`));
-                it("when editing is enabled", async () => labelable(`<calcite-inline-editable controls editing-enabled>
-            <calcite-input value="John Doe"></calcite-input>
-          </calcite-inline-editable>`, {
-                    focusTargetSelector: "calcite-input"
-                }));
-            });
-        });
-    });
-});