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

package/dist/collection/components/radio-button-group/radio-button-group.e2e.js

@@ -1,384 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, hidden, reflects, renders } from "../../tests/commonTests";
-import { html } from "../../../support/formatting";
-describe("calcite-radio-button-group", () => {
-    it("renders", async () => renders("calcite-radio-button-group", { display: "flex" }));
-    it("is accessible", async () => accessible(`<calcite-radio-button-group><calcite-label><calcite-radio-button></calcite-radio-button>Label</calcite-label></calcite-radio-button-group>`));
-    it("has defaults", async () => defaults("calcite-radio-button-group", [
-        { propertyName: "layout", defaultValue: "horizontal" },
-        { propertyName: "scale", defaultValue: "m" }
-    ]));
-    it("honors hidden attribute", async () => {
-        await hidden("calcite-radio-button-group");
-        const page = await newE2EPage();
-        await page.setContent(html `
-      <calcite-radio-button-group name="first">
-        <calcite-label>
-          1-1
-          <calcite-radio-button value="first"></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          1-2
-          <calcite-radio-button value="second"></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          1-3
-          <calcite-radio-button value="third"></calcite-radio-button>
-        </calcite-label>
-      </calcite-radio-button-group>
-      <calcite-radio-button-group name="second" hidden>
-        <calcite-label>
-          2-1
-          <calcite-radio-button value="first"></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          2-2
-          <calcite-radio-button value="second"></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          2-3
-          <calcite-radio-button value="third"></calcite-radio-button>
-        </calcite-label>
-      </calcite-radio-button-group>
-      <calcite-radio-button-group name="third">
-        <calcite-label>
-          3-1
-          <calcite-radio-button value="first"></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          3-2
-          <calcite-radio-button value="second"></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          3-3
-          <calcite-radio-button value="third"></calcite-radio-button>
-        </calcite-label>
-      </calcite-radio-button-group>
-    `);
-        const firstElement = await page.find("calcite-radio-button");
-        await firstElement.click();
-        await firstElement.press("Tab");
-        await page.waitForChanges();
-        const selected = await page.find("calcite-radio-button[focused]");
-        const name = await selected.getProperty("name");
-        const value = await selected.getProperty("value");
-        expect(name).toBe("third");
-        expect(value).toBe("first");
-    });
-    it("reflects", async () => reflects("calcite-radio-button-group", [
-        { propertyName: "disabled", value: true },
-        { propertyName: "hidden", value: true },
-        { propertyName: "layout", value: "horizontal" },
-        { propertyName: "name", value: "reflects-name" },
-        { propertyName: "required", value: true },
-        { propertyName: "scale", value: "m" }
-    ]));
-    it("has a radio input for form compatibility", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html `
-      <calcite-radio-button-group name="hidden-input">
-        <calcite-label>
-          1
-          <calcite-radio-button value="1"></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          2
-          <calcite-radio-button value="2" checked></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          3
-          <calcite-radio-button value="3"></calcite-radio-button>
-        </calcite-label>
-      </calcite-radio-button-group>
-    `);
-        const radioInputs = await page.findAll("calcite-radio-button");
-        expect(radioInputs).toHaveLength(3);
-        for (let i = 0; i < radioInputs.length; i++) {
-            const name = radioInputs[i].getAttribute("name");
-            const value = radioInputs[i].getAttribute("value");
-            expect(name).toBe("hidden-input");
-            expect(value).toBe((i + 1).toString());
-        }
-    });
-    it("does not require an item to be checked", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html `
-      <calcite-radio-button-group name="none-checked">
-        <calcite-label>
-          1
-          <calcite-radio-button value="1"></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          2
-          <calcite-radio-button value="2"></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          3
-          <calcite-radio-button value="3"></calcite-radio-button>
-        </calcite-label>
-      </calcite-radio-button-group>
-    `);
-        const radioButtons = await page.findAll("calcite-radio-button");
-        for (let i = 0; i < radioButtons.length; i++) {
-            expect(await radioButtons[i].getProperty("checked")).toBe(false);
-            expect(radioButtons[i].getAttribute("checked")).toBe(null);
-        }
-    });
-    it("when multiple items are checked, last one wins", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html `<calcite-radio-button-group name="multiple-checked">
-        <calcite-label>
-          1
-          <calcite-radio-button value="1" checked></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          2
-          <calcite-radio-button value="2" checked></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          3
-          <calcite-radio-button value="3" checked></calcite-radio-button>
-        </calcite-label>
-      </calcite-radio-button-group>`);
-        await page.waitForChanges();
-        const checkedItems = await page.findAll("calcite-radio-button[checked]");
-        expect(checkedItems).toHaveLength(1);
-        const selectedValue = await checkedItems[0].getProperty("value");
-        expect(selectedValue).toBe("3");
-    });
-    it("selects item with left and arrow keys", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html `
-      <calcite-radio-button-group name="keyboard">
-        <calcite-label>
-          1
-          <calcite-radio-button value="1" checked></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          2
-          <calcite-radio-button value="2"></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          3
-          <calcite-radio-button value="3"></calcite-radio-button>
-        </calcite-label>
-      </calcite-radio-button-group>
-    `);
-        const element = await page.find("calcite-radio-button-group");
-        const firstElement = await element.find("calcite-radio-button[checked]");
-        await firstElement.click();
-        await element.press("ArrowRight");
-        await page.waitForChanges();
-        let selected = await element.find("calcite-radio-button[checked]");
-        let value = await selected.getProperty("value");
-        expect(value).toBe("2");
-        await element.press("ArrowRight");
-        selected = await element.find("calcite-radio-button[checked]");
-        value = await selected.getProperty("value");
-        expect(value).toBe("3");
-        await element.press("ArrowRight");
-        selected = await element.find("calcite-radio-button[checked]");
-        value = await selected.getProperty("value");
-        expect(value).toBe("1");
-        await element.press("ArrowLeft");
-        selected = await element.find("calcite-radio-button[checked]");
-        value = await selected.getProperty("value");
-        expect(value).toBe("3");
-        await element.press("ArrowLeft");
-        selected = await element.find("calcite-radio-button[checked]");
-        value = await selected.getProperty("value");
-        expect(value).toBe("2");
-        await element.press("ArrowLeft");
-        selected = await element.find("calcite-radio-button[checked]");
-        value = await selected.getProperty("value");
-        expect(value).toBe("1");
-    });
-    it("selects item with up and down keys", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html `
-      <calcite-radio-button-group name="up-down-keys">
-        <calcite-label>
-          1
-          <calcite-radio-button value="1" checked></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          2
-          <calcite-radio-button value="2"></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          3
-          <calcite-radio-button value="3"></calcite-radio-button>
-        </calcite-label>
-      </calcite-radio-button-group>
-    `);
-        const element = await page.find("calcite-radio-button-group");
-        const firstElement = await element.find("calcite-radio-button[checked]");
-        await firstElement.click();
-        await element.press("ArrowDown");
-        let selected = await element.find("calcite-radio-button[checked]");
-        let value = await selected.getProperty("value");
-        expect(value).toBe("2");
-        await element.press("ArrowDown");
-        selected = await element.find("calcite-radio-button[checked]");
-        value = await selected.getProperty("value");
-        expect(value).toBe("3");
-        await element.press("ArrowDown");
-        selected = await element.find("calcite-radio-button[checked]");
-        value = await selected.getProperty("value");
-        expect(value).toBe("1");
-        await element.press("ArrowUp");
-        selected = await element.find("calcite-radio-button[checked]");
-        value = await selected.getProperty("value");
-        expect(value).toBe("3");
-        await element.press("ArrowUp");
-        selected = await element.find("calcite-radio-button[checked]");
-        value = await selected.getProperty("value");
-        expect(value).toBe("2");
-        await element.press("ArrowUp");
-        selected = await element.find("calcite-radio-button[checked]");
-        value = await selected.getProperty("value");
-        expect(value).toBe("1");
-    });
-    it("clicking a radio updates its checked status", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html `
-      <calcite-radio-button-group name="radio">
-        <calcite-label>
-          1
-          <calcite-radio-button id="first" value="one" checked></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          2
-          <calcite-radio-button id="second" value="two"></calcite-radio-button>
-        </calcite-label>
-      </calcite-radio-button-group>
-    `);
-        const first = await page.find("calcite-radio-button#first");
-        const second = await page.find("calcite-radio-button#second");
-        await second.click();
-        await page.waitForChanges();
-        expect(await first.getProperty("checked")).toBe(false);
-        expect(await second.getProperty("checked")).toBe(true);
-        await first.click();
-        await page.waitForChanges();
-        expect(await first.getProperty("checked")).toBe(true);
-        expect(await second.getProperty("checked")).toBe(false);
-    });
-    it("programmatically checking a radio button updates the group's state correctly", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html `
-      <calcite-radio-button-group name="radio">
-        <calcite-label>
-          1
-          <calcite-radio-button id="first" value="one" checked></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          2
-          <calcite-radio-button id="second" value="two"></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          3
-          <calcite-radio-button id="third" value="three"></calcite-radio-button>
-        </calcite-label>
-      </calcite-radio-button-group>
-    `);
-        await page.evaluate(() => {
-            const second = document.querySelector("calcite-radio-button#second");
-            second.checked = true;
-        });
-        await page.waitForChanges();
-        const checkedItems = await page.findAll("calcite-radio-button[checked]");
-        expect(checkedItems).toHaveLength(1);
-        const selectedValue = await checkedItems[0].getProperty("value");
-        expect(selectedValue).toBe("two");
-    });
-    it("programmatically un-checking a radio button updates the group's state correctly", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html `
-      <calcite-radio-button-group name="radio">
-        <calcite-label>
-          1
-          <calcite-radio-button id="first" value="one" checked></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          2
-          <calcite-radio-button id="second" value="two"></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          3
-          <calcite-radio-button id="third" value="three"></calcite-radio-button>
-        </calcite-label>
-      </calcite-radio-button-group>
-    `);
-        await page.evaluate(() => {
-            const second = document.querySelector("calcite-radio-button#first");
-            second.checked = false;
-        });
-        await page.waitForChanges();
-        const checkedItems = await page.findAll("calcite-radio-button[checked]");
-        expect(checkedItems).toHaveLength(0);
-    });
-    it(`has a role of 'radiogroup'`, async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-radio-button-group></calcite-radio-button-group>");
-        const element = await page.find("calcite-radio-button-group");
-        const role = element.getAttribute("role");
-        expect(role).toEqualText("radiogroup");
-    });
-    it("radio-buttons receive necessary props", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html `
-      <calcite-radio-button-group name="radio">
-        <calcite-label>
-          1
-          <calcite-radio-button value="one" checked></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          2
-          <calcite-radio-button value="two"></calcite-radio-button>
-        </calcite-label>
-      </calcite-radio-button-group>
-    `);
-        const radio = await page.find("calcite-radio-button");
-        const name = await radio.getProperty("name");
-        const scale = await radio.getProperty("scale");
-        const required = await radio.getProperty("required");
-        expect(name).toBe("radio");
-        expect(scale).toBe("m");
-        expect(required).toBe(false);
-    });
-    it("appropriately triggers the custom change event", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html `
-      <calcite-radio-button-group name="changeEvent">
-        <calcite-label>
-          1
-          <calcite-radio-button value="one" checked></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          2
-          <calcite-radio-button value="two"></calcite-radio-button>
-        </calcite-label>
-        <calcite-label>
-          3
-          <calcite-radio-button value="three"></calcite-radio-button>
-        </calcite-label>
-      </calcite-radio-button-group>
-    `);
-        const group = await page.find("calcite-radio-button-group");
-        const firstRadio = await page.find('calcite-radio-button[value="one"]');
-        const secondRadio = await page.find('calcite-radio-button[value="two"]');
-        const thirdRadio = await page.find('calcite-radio-button[value="three"]');
-        const changeEvent = await group.spyOnEvent("calciteRadioButtonGroupChange");
-        expect(changeEvent).toHaveReceivedEventTimes(0);
-        await firstRadio.click();
-        expect(changeEvent).toHaveReceivedEventTimes(1);
-        expect(changeEvent).toHaveReceivedEventDetail("one");
-        await secondRadio.click();
-        expect(changeEvent).toHaveReceivedEventTimes(2);
-        expect(changeEvent).toHaveReceivedEventDetail("two");
-        await thirdRadio.click();
-        expect(changeEvent).toHaveReceivedEventTimes(3);
-        expect(changeEvent).toHaveReceivedEventDetail("three");
-    });
-});

package/dist/collection/components/radio-group/radio-group.e2e.js

@@ -1,258 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { disabled, focusable, formAssociated, labelable, renders, hidden } from "../../tests/commonTests";
-import { html } from "../../../support/formatting";
-describe("calcite-radio-group", () => {
-    it("renders", () => renders("calcite-radio-group", { display: "flex" }));
-    it("honors hidden attribute", async () => hidden("calcite-radio-group"));
-    it("is labelable", async () => labelable(html `<calcite-radio-group>
-        <calcite-radio-group-item value="1"></calcite-radio-group-item>
-        <calcite-radio-group-item value="2"></calcite-radio-group-item>
-        <calcite-radio-group-item value="3"></calcite-radio-group-item>
-      </calcite-radio-group>`, { focusTargetSelector: "calcite-radio-group-item" }));
-    it("can be disabled", () => disabled(html `<calcite-radio-group>
-        <calcite-radio-group-item value="1"></calcite-radio-group-item>
-        <calcite-radio-group-item value="2"></calcite-radio-group-item>
-        <calcite-radio-group-item value="3"></calcite-radio-group-item>
-      </calcite-radio-group>`, { focusTarget: "child" }));
-    it("sets value from selected item", async () => {
-        const page = await newE2EPage();
-        await page.setContent(html `
-      <calcite-radio-group>
-        <calcite-radio-group-item id="child-1" value="1" checked>one</calcite-radio-group-item>
-        <calcite-radio-group-item id="child-2" value="2">two</calcite-radio-group-item>
-        <calcite-radio-group-item id="child-3" value="3">three</calcite-radio-group-item>
-      </calcite-radio-group>
-    `);
-        const element = await page.find("calcite-radio-group");
-        const value = await element.getProperty("value");
-        expect(value).toBe("1");
-    });
-    it("does not require an item to be checked", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-radio-group>
-          <calcite-radio-group-item value="1"></calcite-radio-group-item>
-          <calcite-radio-group-item value="2"></calcite-radio-group-item>
-          <calcite-radio-group-item value="3"></calcite-radio-group-item>
-        </calcite-radio-group>`);
-        const element = await page.find("calcite-radio-group");
-        const selected = await element.getProperty("selectedItem");
-        expect(selected).not.toBeDefined();
-    });
-    it("when multiple items are checked, last one wins", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-radio-group>
-          <calcite-radio-group-item value="1" checked>one</calcite-radio-group-item>
-          <calcite-radio-group-item value="2" checked>two</calcite-radio-group-item>
-          <calcite-radio-group-item value="3" checked>three</calcite-radio-group-item>
-        </calcite-radio-group>`);
-        const element = await page.find("calcite-radio-group");
-        const selected = await element.getProperty("selectedItem");
-        expect(selected).toBeDefined();
-        const selectedItems = await element.findAll("calcite-radio-group-item[checked]");
-        expect(selectedItems).toHaveLength(1);
-        const selectedValue = await selectedItems[0].getProperty("value");
-        expect(selectedValue).toBe("3");
-    });
-    it("allows items to be selected", async () => {
-        async function getSelectedItemValue(page) {
-            return page.$eval("calcite-radio-group", (radioGroup) => radioGroup.selectedItem.value);
-        }
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-radio-group>
-          <calcite-radio-group-item value="1">one</calcite-radio-group-item>
-          <calcite-radio-group-item value="2">two</calcite-radio-group-item>
-          <calcite-radio-group-item value="3">three</calcite-radio-group-item>
-        </calcite-radio-group>`);
-        const element = await page.find("calcite-radio-group");
-        const eventSpy = await element.spyOnEvent("calciteRadioGroupChange");
-        expect(eventSpy).not.toHaveReceivedEvent();
-        const [first, second, third] = await page.findAll("calcite-radio-group-item");
-        await first.click();
-        expect(eventSpy).toHaveReceivedEventTimes(1);
-        expect(eventSpy).toHaveReceivedEventDetail("1");
-        expect(await getSelectedItemValue(page)).toBe("1");
-        // does not emit from programmatic changes
-        third.setProperty("checked", true);
-        await page.waitForChanges();
-        expect(eventSpy).toHaveReceivedEventTimes(1);
-        expect(await getSelectedItemValue(page)).toBe("3");
-        await second.click();
-        expect(eventSpy).toHaveReceivedEventTimes(2);
-        expect(eventSpy).toHaveReceivedEventDetail("2");
-        expect(await getSelectedItemValue(page)).toBe("2");
-    });
-    it("does not emit extraneous events (edge case from #3210)", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<calcite-radio-group>
-          <calcite-radio-group-item value="1">one</calcite-radio-group-item>
-          <calcite-radio-group-item value="2">two</calcite-radio-group-item>
-        </calcite-radio-group>`);
-        const timesCalled = await page.evaluate(async () => {
-            let calls = 0;
-            const radioGroup = document.querySelector("calcite-radio-group");
-            const waitForFrame = async () => await new Promise((resolve) => requestAnimationFrame(() => resolve()));
-            document.addEventListener("calciteRadioGroupChange", () => calls++);
-            let [first, second] = Array.from(document.querySelectorAll("calcite-radio-group-item"));
-            first.checked = true;
-            await waitForFrame();
-            second.click();
-            await waitForFrame();
-            radioGroup.remove();
-            await waitForFrame();
-            document.body.innerHTML = `
-      <calcite-radio-group>
-          <calcite-radio-group-item value="1">one</calcite-radio-group-item>
-          <calcite-radio-group-item value="2">two</calcite-radio-group-item>
-        </calcite-radio-group>
-      `;
-            [first, second] = Array.from(document.querySelectorAll("calcite-radio-group-item"));
-            second.checked = true;
-            await waitForFrame();
-            first.click();
-            await waitForFrame();
-            return calls;
-        });
-        expect(timesCalled).toBe(2);
-    });
-    describe("keyboard navigation", () => {
-        it("selects item with left and arrow keys", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-radio-group>
-          <calcite-radio-group-item value="1" checked>one</calcite-radio-group-item>
-          <calcite-radio-group-item value="2">two</calcite-radio-group-item>
-          <calcite-radio-group-item value="3">three</calcite-radio-group-item>
-        </calcite-radio-group>`);
-            const element = await page.find("calcite-radio-group");
-            const spy = await element.spyOnEvent("calciteRadioGroupChange");
-            const firstElement = await element.find("calcite-radio-group-item[checked]");
-            await firstElement.click();
-            await element.press("ArrowRight");
-            await page.waitForChanges();
-            let selected = await element.find("calcite-radio-group-item[checked]");
-            let value = await selected.getProperty("value");
-            expect(value).toBe("2");
-            await element.press("ArrowRight");
-            selected = await element.find("calcite-radio-group-item[checked]");
-            value = await selected.getProperty("value");
-            expect(value).toBe("3");
-            await element.press("ArrowRight");
-            selected = await element.find("calcite-radio-group-item[checked]");
-            value = await selected.getProperty("value");
-            expect(value).toBe("1");
-            await element.press("ArrowLeft");
-            selected = await element.find("calcite-radio-group-item[checked]");
-            value = await selected.getProperty("value");
-            expect(value).toBe("3");
-            await element.press("ArrowLeft");
-            selected = await element.find("calcite-radio-group-item[checked]");
-            value = await selected.getProperty("value");
-            expect(value).toBe("2");
-            await element.press("ArrowLeft");
-            selected = await element.find("calcite-radio-group-item[checked]");
-            value = await selected.getProperty("value");
-            expect(value).toBe("1");
-            expect(spy).toHaveReceivedEventTimes(6);
-        });
-        it("selects item with up and down keys", async () => {
-            const page = await newE2EPage();
-            await page.setContent(`<calcite-radio-group>
-          <calcite-radio-group-item value="1" checked>one</calcite-radio-group-item>
-          <calcite-radio-group-item value="2">two</calcite-radio-group-item>
-          <calcite-radio-group-item value="3">three</calcite-radio-group-item>
-        </calcite-radio-group>`);
-            const element = await page.find("calcite-radio-group");
-            const spy = await element.spyOnEvent("calciteRadioGroupChange");
-            const firstElement = await element.find("calcite-radio-group-item[checked]");
-            await firstElement.click();
-            await element.press("ArrowDown");
-            let selected = await element.find("calcite-radio-group-item[checked]");
-            let value = await selected.getProperty("value");
-            expect(value).toBe("2");
-            await element.press("ArrowDown");
-            selected = await element.find("calcite-radio-group-item[checked]");
-            value = await selected.getProperty("value");
-            expect(value).toBe("3");
-            await element.press("ArrowDown");
-            selected = await element.find("calcite-radio-group-item[checked]");
-            value = await selected.getProperty("value");
-            expect(value).toBe("1");
-            await element.press("ArrowUp");
-            selected = await element.find("calcite-radio-group-item[checked]");
-            value = await selected.getProperty("value");
-            expect(value).toBe("3");
-            await element.press("ArrowUp");
-            selected = await element.find("calcite-radio-group-item[checked]");
-            value = await selected.getProperty("value");
-            expect(value).toBe("2");
-            await element.press("ArrowUp");
-            selected = await element.find("calcite-radio-group-item[checked]");
-            value = await selected.getProperty("value");
-            expect(value).toBe("1");
-            expect(spy).toHaveReceivedEventTimes(6);
-        });
-    });
-    describe("WAI-ARIA Roles, States, and Properties", () => {
-        it(`has a role of 'radiogroup'`, async () => {
-            const page = await newE2EPage();
-            await page.setContent("<calcite-radio-group></calcite-radio-group>");
-            const element = await page.find("calcite-radio-group");
-            const role = element.getAttribute("role");
-            expect(role).toEqualText("radiogroup");
-        });
-    });
-    it("renders requested props", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-radio-group scale='l' layout='vertical' appearance='outline' width='full'></calcite-radio-group>");
-        const element = await page.find("calcite-radio-group");
-        expect(element).toEqualAttribute("scale", "l");
-        expect(element).toEqualAttribute("layout", "vertical");
-        expect(element).toEqualAttribute("appearance", "outline");
-        expect(element).toEqualAttribute("width", "full");
-    });
-    it("renders default props", async () => {
-        const page = await newE2EPage();
-        await page.setContent("<calcite-radio-group></calcite-radio-group>");
-        const element = await page.find("calcite-radio-group");
-        expect(element).toEqualAttribute("scale", "m");
-        expect(element).toEqualAttribute("layout", "horizontal");
-        expect(element).toEqualAttribute("appearance", "solid");
-        expect(element).toEqualAttribute("width", "auto");
-    });
-    describe("setFocus()", () => {
-        it("focuses the first item if there is no selection", async () => focusable(html `
-          <calcite-radio-group>
-            <calcite-radio-group-item id="child-1" value="1">one</calcite-radio-group-item>
-            <calcite-radio-group-item id="child-2" value="2">two</calcite-radio-group-item>
-            <calcite-radio-group-item id="child-3" value="3">three</calcite-radio-group-item>
-          </calcite-radio-group>
-        `, {
-            focusTargetSelector: "#child-1"
-        }));
-        it("focuses the selected item", async () => focusable(html `
-          <calcite-radio-group>
-            <calcite-radio-group-item id="child-1" value="1">one</calcite-radio-group-item>
-            <calcite-radio-group-item id="child-2" value="2">two</calcite-radio-group-item>
-            <calcite-radio-group-item id="child-3" value="3" checked>three</calcite-radio-group-item>
-          </calcite-radio-group>
-        `, {
-            focusTargetSelector: "#child-3"
-        }));
-    });
-    describe("is form-associated", () => {
-        const formAssociatedOptions = { testValue: "2" };
-        it("unselected value", () => formAssociated(html `
-          <calcite-radio-group>
-            <calcite-radio-group-item id="child-1" value="1">one</calcite-radio-group-item>
-            <calcite-radio-group-item id="child-2" value="2">two</calcite-radio-group-item>
-            <calcite-radio-group-item id="child-3" value="3">three</calcite-radio-group-item>
-          </calcite-radio-group>
-        `, formAssociatedOptions));
-        it("selected-value", () => formAssociated(html `
-          <calcite-radio-group>
-            <calcite-radio-group-item id="child-1" value="1">one</calcite-radio-group-item>
-            <calcite-radio-group-item id="child-2" value="2" checked>two</calcite-radio-group-item>
-            <calcite-radio-group-item id="child-3" value="3">three</calcite-radio-group-item>
-          </calcite-radio-group>
-        `, formAssociatedOptions));
-    });
-});