@ukic/web-components 3.0.0-alpha.11 → 3.0.0-alpha.13

package/dist/collection/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.js

@@ -1,337 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { ToggleButtonGroup } from "../ic-toggle-button-group";
-import { ToggleButton } from "../../ic-toggle-button/ic-toggle-button";
-import { Button } from "../../ic-button/ic-button";
-const keyboard = (key) => {
-    return new KeyboardEvent("keydown", { key: key });
-};
-describe("ic-toggle-button-group component snapshot tests", () => {
-    it("should render and update disabled", async () => {
-        const page = await newSpecPage({
-            components: [ToggleButtonGroup, ToggleButton, Button],
-            html: `<ic-toggle-button-group select-type="single" disabled>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-            </ic-toggle-button-group>`,
-        });
-        expect(page.root)
-            .toEqualHtml(`<ic-toggle-button-group aria-label="Toggle button group" class="ic-toggle-button-group-disabled" disabled="" role="group" select-type="single" tabindex="0" variant="default">
-      <mock:shadow-root>
-        <slot></slot>
-      </mock:shadow-root>
-      <ic-toggle-button class="expand-toggle-group-child ic-toggle-button-disabled ic-toggle-button-medium" id="0" label="Toggle" tabindex="-1" variant="default">
-        <mock:shadow-root>
-          <ic-button aria-pressed="false" class="ic-button-disabled ic-button-size-medium ic-button-variant-secondary" exportparts="button">
-            <mock:shadow-root>
-              <button aria-disabled="true" aria-label="Toggle, unticked, Toggle button group" class="button" disabled="" part="button" type="button">
-                <slot></slot>
-              </button>
-            </mock:shadow-root>
-            Toggle
-            <slot></slot>
-          </ic-button>
-        </mock:shadow-root>
-      </ic-toggle-button>
-      <ic-toggle-button class="expand-toggle-group-child ic-toggle-button-disabled ic-toggle-button-medium" id="1" label="Toggle" tabindex="-1" variant="default">
-        <mock:shadow-root>
-          <ic-button aria-pressed="false" class="ic-button-disabled ic-button-size-medium ic-button-variant-secondary" exportparts="button">
-            <mock:shadow-root>
-              <button aria-disabled="true" aria-label="Toggle, unticked, Toggle button group" class="button" disabled="" part="button" type="button">
-                <slot></slot>
-              </button>
-            </mock:shadow-root>
-            Toggle
-            <slot></slot>
-          </ic-button>
-        </mock:shadow-root>
-      </ic-toggle-button>
-      <ic-toggle-button class="expand-toggle-group-child ic-toggle-button-disabled ic-toggle-button-medium" id="2" label="Toggle" tabindex="-1" variant="default">
-        <mock:shadow-root>
-          <ic-button aria-pressed="false" class="ic-button-disabled ic-button-size-medium ic-button-variant-secondary" exportparts="button">
-            <mock:shadow-root>
-              <button aria-disabled="true" aria-label="Toggle, unticked, Toggle button group" class="button" disabled="" part="button" type="button">
-                <slot></slot>
-              </button>
-            </mock:shadow-root>
-            Toggle
-            <slot></slot>
-          </ic-button>
-        </mock:shadow-root>
-      </ic-toggle-button>
-    </ic-toggle-button-group>`);
-        page.rootInstance.disabled = false;
-        await page.waitForChanges();
-        expect(page.root)
-            .toEqualHtml(`<ic-toggle-button-group aria-label="Toggle button group" role="group" select-type="single" tabindex="0" variant="default">
-      <mock:shadow-root>
-        <slot></slot>
-      </mock:shadow-root>
-      <ic-toggle-button class="expand-toggle-group-child ic-toggle-button-medium" id="0" label="Toggle" tabindex="-1" variant="default">
-        <mock:shadow-root>
-          <ic-button aria-pressed="false" class="ic-button-size-medium ic-button-variant-secondary" exportparts="button">
-            <mock:shadow-root>
-              <button aria-label="Toggle, unticked, Toggle button group" class="button" part="button" type="button">
-                <slot></slot>
-              </button>
-            </mock:shadow-root>
-            Toggle
-            <slot></slot>
-          </ic-button>
-        </mock:shadow-root>
-      </ic-toggle-button>
-      <ic-toggle-button class="expand-toggle-group-child ic-toggle-button-medium" id="1" label="Toggle" tabindex="-1" variant="default">
-        <mock:shadow-root>
-          <ic-button aria-pressed="false" class="ic-button-size-medium ic-button-variant-secondary" exportparts="button">
-            <mock:shadow-root>
-              <button aria-label="Toggle, unticked, Toggle button group" class="button" part="button" type="button">
-                <slot></slot>
-              </button>
-            </mock:shadow-root>
-            Toggle
-            <slot></slot>
-          </ic-button>
-        </mock:shadow-root>
-      </ic-toggle-button>
-      <ic-toggle-button class="expand-toggle-group-child ic-toggle-button-medium" id="2" label="Toggle" tabindex="-1" variant="default">
-        <mock:shadow-root>
-          <ic-button aria-pressed="false" class="ic-button-size-medium ic-button-variant-secondary" exportparts="button">
-            <mock:shadow-root>
-              <button aria-label="Toggle, unticked, Toggle button group" class="button" part="button" type="button">
-                <slot></slot>
-              </button>
-            </mock:shadow-root>
-            Toggle
-            <slot></slot>
-          </ic-button>
-        </mock:shadow-root>
-      </ic-toggle-button>
-    </ic-toggle-button-group>`);
-    });
-    it("should render and update full-width", async () => {
-        const page = await newSpecPage({
-            components: [ToggleButtonGroup, ToggleButton, Button],
-            html: `<ic-toggle-button-group select-type="single" full-width>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-            </ic-toggle-button-group>`,
-        });
-        expect(page.root).toMatchSnapshot();
-        page.rootInstance.fullWidth = false;
-        await page.waitForChanges();
-        expect(page.root).toMatchSnapshot();
-    });
-    it("should render and update loading", async () => {
-        const page = await newSpecPage({
-            components: [ToggleButtonGroup, ToggleButton, Button],
-            html: `<ic-toggle-button-group select-type="single" loading>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-            </ic-toggle-button-group>`,
-        });
-        expect(page.root).toMatchSnapshot();
-        page.rootInstance.loading = false;
-        await page.waitForChanges();
-        expect(page.root).toMatchSnapshot();
-    });
-    it("should render and update monochrome", async () => {
-        const page = await newSpecPage({
-            components: [ToggleButtonGroup, ToggleButton, Button],
-            html: `<ic-toggle-button-group select-type="single" monochrome>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-            </ic-toggle-button-group>`,
-        });
-        expect(page.root).toMatchSnapshot();
-        page.rootInstance.monochrome = false;
-        await page.waitForChanges();
-        expect(page.root).toMatchSnapshot();
-    });
-    it("should render and update size", async () => {
-        const page = await newSpecPage({
-            components: [ToggleButtonGroup, ToggleButton, Button],
-            html: `<ic-toggle-button-group select-type="single" size="small">
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-            </ic-toggle-button-group>`,
-        });
-        expect(page.root).toMatchSnapshot();
-        page.rootInstance.size = "large";
-        await page.waitForChanges();
-        expect(page.root).toMatchSnapshot();
-    });
-    it("should render and update variant", async () => {
-        const page = await newSpecPage({
-            components: [ToggleButtonGroup, ToggleButton, Button],
-            html: `<ic-toggle-button-group select-type="single" variant="icon">
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-            </ic-toggle-button-group>`,
-        });
-        expect(page.root).toMatchSnapshot();
-        page.rootInstance.variant = "default";
-        await page.waitForChanges();
-        expect(page.root).toMatchSnapshot();
-    });
-});
-describe("ic-toggle-button-group component unit tests", () => {
-    it("should getAllToggleButtons and return an array of slotted ic-toggle-buttons", async () => {
-        const page = await newSpecPage({
-            components: [ToggleButtonGroup, ToggleButton, Button],
-            html: `<ic-toggle-button-group select-type="single" size="small">
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-            </ic-toggle-button-group>`,
-        });
-        const toggleButtonArray = page.rootInstance.getAllToggleButtons();
-        await page.waitForChanges();
-        expect(toggleButtonArray.length).toBe(3);
-    });
-    it("should test when the toggle button group receives focus, it should cause the first toggle button inside the group to get focused (when select method is 'single' and no item is already selected)", async () => {
-        const page = await newSpecPage({
-            components: [ToggleButtonGroup, ToggleButton, Button],
-            html: `<ic-toggle-button-group select-type="single">
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-            </ic-toggle-button-group>`,
-        });
-        const toggleGroup = (await document.querySelector("ic-toggle-button-group"));
-        const buttons = await Array.from(toggleGroup.querySelectorAll("ic-toggle-button"));
-        await page.waitForChanges();
-        toggleGroup.focus();
-        await page.waitForChanges();
-        expect(buttons[0].checked).toBeFalsy();
-    });
-    it("should test that focusing group when an ic-toggle-button selected should not select first option", async () => {
-        const page = await newSpecPage({
-            components: [ToggleButtonGroup, ToggleButton, Button],
-            html: `<ic-toggle-button-group select-type="single">
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-            </ic-toggle-button-group>`,
-        });
-        const toggleGroup = (await document.querySelector("ic-toggle-button-group"));
-        const buttons = await Array.from(toggleGroup.querySelectorAll("ic-toggle-button"));
-        await page.waitForChanges();
-        buttons[1].checked = true;
-        toggleGroup.focus();
-        await page.waitForChanges();
-        expect(buttons[0].checked).toBeFalsy();
-        expect(buttons[1].checked).toBeTruthy();
-    });
-    it("should test that focusing the toggle-button-group focuses, but does not not select, the first ic-toggle-button when select method is 'multi'", async () => {
-        const page = await newSpecPage({
-            components: [ToggleButtonGroup, ToggleButton, Button],
-            html: `<ic-toggle-button-group select-type="multi">
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-            </ic-toggle-button-group>`,
-        });
-        const toggleGroup = (await document.querySelector("ic-toggle-button-group"));
-        const buttons = await Array.from(toggleGroup.querySelectorAll("ic-toggle-button"));
-        await page.waitForChanges();
-        toggleGroup.focus();
-        await page.waitForChanges();
-        expect(buttons[0].checked).toBeFalsy();
-    });
-    it("should test that focusing the toggle-button-group focuses, but does not not select, the first ic-toggle-button when select method is 'multi'", async () => {
-        const page = await newSpecPage({
-            components: [ToggleButtonGroup, ToggleButton, Button],
-            html: `<ic-toggle-button-group select-type="multi">
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-            </ic-toggle-button-group>`,
-        });
-        const eventSpy = jest.fn();
-        page.win.addEventListener("icChange", eventSpy);
-        const toggleGroup = (await document.querySelector("ic-toggle-button-group"));
-        const buttons = await Array.from(toggleGroup.querySelectorAll("ic-toggle-button"));
-        await page.waitForChanges();
-        buttons[0].checked = true;
-        buttons[1].checked = true;
-        const customEv = new CustomEvent("icToggleChecked", {});
-        page.rootInstance.selectHandler(customEv);
-        await page.waitForChanges();
-        expect(eventSpy).toHaveBeenCalled();
-    });
-    it("should test handleKeyDown function", async () => {
-        const page = await newSpecPage({
-            components: [ToggleButtonGroup, ToggleButton, Button],
-            html: `<ic-toggle-button-group select-method="auto">
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-            </ic-toggle-button-group>`,
-        });
-        const firstButton = (await document.querySelector("#0"));
-        const secondButton = (await document.querySelector("#1"));
-        const thirdButton = (await document.querySelector("#2"));
-        expect(firstButton.checked).toBeFalsy();
-        await firstButton.click();
-        expect(firstButton.checked).toBeTruthy();
-        await page.waitForChanges();
-        page.rootInstance.handleKeyDown(keyboard("ArrowLeft"));
-        expect(thirdButton.checked).toBeTruthy();
-        expect(firstButton.checked).toBeFalsy();
-        await page.waitForChanges();
-        await firstButton.click();
-        page.rootInstance.handleKeyDown(keyboard("ArrowUp"));
-        expect(thirdButton.checked).toBeTruthy();
-        expect(firstButton.checked).toBeFalsy();
-        await page.waitForChanges();
-        await firstButton.click();
-        page.rootInstance.handleKeyDown(keyboard("ArrowDown"));
-        expect(secondButton.checked).toBeTruthy();
-        expect(firstButton.checked).toBeFalsy();
-        await page.waitForChanges();
-        await firstButton.click();
-        page.rootInstance.handleKeyDown(keyboard("ArrowLeft"));
-        expect(thirdButton.checked).toBeTruthy();
-        expect(firstButton.checked).toBeFalsy();
-        secondButton.disabled = true;
-        await page.waitForChanges();
-        await firstButton.click();
-        page.rootInstance.handleKeyDown(keyboard("ArrowRight"));
-        expect(thirdButton.checked).toBeTruthy();
-        expect(firstButton.checked).toBeFalsy();
-        // for coverage
-        page.rootInstance.handleKeyDown(keyboard("Tab"));
-        document.dispatchEvent(keyboard("Tab"));
-    });
-    it("should test handleKeyDown on disabled toggle-button-group", async () => {
-        const page = await newSpecPage({
-            components: [ToggleButtonGroup, ToggleButton, Button],
-            html: `<ic-toggle-button-group disabled>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-            </ic-toggle-button-group>`,
-        });
-        const mockEvent = new FocusEvent("focus");
-        expect(page.rootInstance.handleHostFocus(mockEvent)).toBeNull();
-        await page.rootInstance.disconnectedCallback();
-    });
-    it("should test that setting the theme prop on toggle-button-group sets the theme on all toggle buttons", async () => {
-        const page = await newSpecPage({
-            components: [ToggleButtonGroup, ToggleButton, Button],
-            html: `<ic-toggle-button-group theme="dark">
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-              <ic-toggle-button label="Toggle"></ic-toggle-button>
-            </ic-toggle-button-group>`,
-        });
-        const toggleGroup = (await document.querySelector("ic-toggle-button-group"));
-        const buttons = await Array.from(toggleGroup.querySelectorAll("ic-toggle-button"));
-        await page.rootInstance.watchThemeHandler("dark");
-        await page.waitForChanges();
-        expect(buttons[0].theme).toBe("dark");
-        expect(buttons[1].theme).toBe("dark");
-        expect(buttons[2].theme).toBe("dark");
-    });
-});
-//# sourceMappingURL=ic-toggle-button-group.spec.js.map

package/dist/collection/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ic-toggle-button-group.spec.js","sourceRoot":"","sources":["../../../../src/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { ToggleButtonGroup } from \"../ic-toggle-button-group\";\nimport { ToggleButton } from \"../../ic-toggle-button/ic-toggle-button\";\nimport { Button } from \"../../ic-button/ic-button\";\n\nconst keyboard = (key: string): KeyboardEvent => {\n  return new KeyboardEvent(\"keydown\", { key: key });\n};\n\ndescribe(\"ic-toggle-button-group component snapshot tests\", () => {\n  it(\"should render and update disabled\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\" disabled>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-toggle-button-group aria-label=\"Toggle button group\" class=\"ic-toggle-button-group-disabled\" disabled=\"\" role=\"group\" select-type=\"single\" tabindex=\"0\" variant=\"default\">\n      <mock:shadow-root>\n        <slot></slot>\n      </mock:shadow-root>\n      <ic-toggle-button class=\"expand-toggle-group-child ic-toggle-button-disabled ic-toggle-button-medium\" id=\"0\" label=\"Toggle\" tabindex=\"-1\" variant=\"default\">\n        <mock:shadow-root>\n          <ic-button aria-pressed=\"false\" class=\"ic-button-disabled ic-button-size-medium ic-button-variant-secondary\" exportparts=\"button\">\n            <mock:shadow-root>\n              <button aria-disabled=\"true\" aria-label=\"Toggle, unticked, Toggle button group\" class=\"button\" disabled=\"\" part=\"button\" type=\"button\">\n                <slot></slot>\n              </button>\n            </mock:shadow-root>\n            Toggle\n            <slot></slot>\n          </ic-button>\n        </mock:shadow-root>\n      </ic-toggle-button>\n      <ic-toggle-button class=\"expand-toggle-group-child ic-toggle-button-disabled ic-toggle-button-medium\" id=\"1\" label=\"Toggle\" tabindex=\"-1\" variant=\"default\">\n        <mock:shadow-root>\n          <ic-button aria-pressed=\"false\" class=\"ic-button-disabled ic-button-size-medium ic-button-variant-secondary\" exportparts=\"button\">\n            <mock:shadow-root>\n              <button aria-disabled=\"true\" aria-label=\"Toggle, unticked, Toggle button group\" class=\"button\" disabled=\"\" part=\"button\" type=\"button\">\n                <slot></slot>\n              </button>\n            </mock:shadow-root>\n            Toggle\n            <slot></slot>\n          </ic-button>\n        </mock:shadow-root>\n      </ic-toggle-button>\n      <ic-toggle-button class=\"expand-toggle-group-child ic-toggle-button-disabled ic-toggle-button-medium\" id=\"2\" label=\"Toggle\" tabindex=\"-1\" variant=\"default\">\n        <mock:shadow-root>\n          <ic-button aria-pressed=\"false\" class=\"ic-button-disabled ic-button-size-medium ic-button-variant-secondary\" exportparts=\"button\">\n            <mock:shadow-root>\n              <button aria-disabled=\"true\" aria-label=\"Toggle, unticked, Toggle button group\" class=\"button\" disabled=\"\" part=\"button\" type=\"button\">\n                <slot></slot>\n              </button>\n            </mock:shadow-root>\n            Toggle\n            <slot></slot>\n          </ic-button>\n        </mock:shadow-root>\n      </ic-toggle-button>\n    </ic-toggle-button-group>`);\n\n    page.rootInstance.disabled = false;\n\n    await page.waitForChanges();\n    expect(page.root)\n      .toEqualHtml(`<ic-toggle-button-group aria-label=\"Toggle button group\" role=\"group\" select-type=\"single\" tabindex=\"0\" variant=\"default\">\n      <mock:shadow-root>\n        <slot></slot>\n      </mock:shadow-root>\n      <ic-toggle-button class=\"expand-toggle-group-child ic-toggle-button-medium\" id=\"0\" label=\"Toggle\" tabindex=\"-1\" variant=\"default\">\n        <mock:shadow-root>\n          <ic-button aria-pressed=\"false\" class=\"ic-button-size-medium ic-button-variant-secondary\" exportparts=\"button\">\n            <mock:shadow-root>\n              <button aria-label=\"Toggle, unticked, Toggle button group\" class=\"button\" part=\"button\" type=\"button\">\n                <slot></slot>\n              </button>\n            </mock:shadow-root>\n            Toggle\n            <slot></slot>\n          </ic-button>\n        </mock:shadow-root>\n      </ic-toggle-button>\n      <ic-toggle-button class=\"expand-toggle-group-child ic-toggle-button-medium\" id=\"1\" label=\"Toggle\" tabindex=\"-1\" variant=\"default\">\n        <mock:shadow-root>\n          <ic-button aria-pressed=\"false\" class=\"ic-button-size-medium ic-button-variant-secondary\" exportparts=\"button\">\n            <mock:shadow-root>\n              <button aria-label=\"Toggle, unticked, Toggle button group\" class=\"button\" part=\"button\" type=\"button\">\n                <slot></slot>\n              </button>\n            </mock:shadow-root>\n            Toggle\n            <slot></slot>\n          </ic-button>\n        </mock:shadow-root>\n      </ic-toggle-button>\n      <ic-toggle-button class=\"expand-toggle-group-child ic-toggle-button-medium\" id=\"2\" label=\"Toggle\" tabindex=\"-1\" variant=\"default\">\n        <mock:shadow-root>\n          <ic-button aria-pressed=\"false\" class=\"ic-button-size-medium ic-button-variant-secondary\" exportparts=\"button\">\n            <mock:shadow-root>\n              <button aria-label=\"Toggle, unticked, Toggle button group\" class=\"button\" part=\"button\" type=\"button\">\n                <slot></slot>\n              </button>\n            </mock:shadow-root>\n            Toggle\n            <slot></slot>\n          </ic-button>\n        </mock:shadow-root>\n      </ic-toggle-button>\n    </ic-toggle-button-group>`);\n  });\n\n  it(\"should render and update full-width\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\" full-width>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    page.rootInstance.fullWidth = false;\n\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render and update loading\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\" loading>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    page.rootInstance.loading = false;\n\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render and update monochrome\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\" monochrome>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    page.rootInstance.monochrome = false;\n\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render and update size\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\" size=\"small\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    page.rootInstance.size = \"large\";\n\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render and update variant\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\" variant=\"icon\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    page.rootInstance.variant = \"default\";\n\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot();\n  });\n});\n\ndescribe(\"ic-toggle-button-group component unit tests\", () => {\n  it(\"should getAllToggleButtons and return an array of slotted ic-toggle-buttons\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\" size=\"small\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const toggleButtonArray = page.rootInstance.getAllToggleButtons();\n    await page.waitForChanges();\n    expect(toggleButtonArray.length).toBe(3);\n  });\n  it(\"should test when the toggle button group receives focus, it should cause the first toggle button inside the group to get focused (when select method is 'single' and no item is already selected)\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.waitForChanges();\n    toggleGroup.focus();\n\n    await page.waitForChanges();\n\n    expect(buttons[0].checked).toBeFalsy();\n  });\n  it(\"should test that focusing group when an ic-toggle-button selected should not select first option\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"single\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.waitForChanges();\n\n    buttons[1].checked = true;\n\n    toggleGroup.focus();\n\n    await page.waitForChanges();\n\n    expect(buttons[0].checked).toBeFalsy();\n    expect(buttons[1].checked).toBeTruthy();\n  });\n  it(\"should test that focusing the toggle-button-group focuses, but does not not select, the first ic-toggle-button when select method is 'multi'\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"multi\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.waitForChanges();\n\n    toggleGroup.focus();\n\n    await page.waitForChanges();\n\n    expect(buttons[0].checked).toBeFalsy();\n  });\n  it(\"should test that focusing the toggle-button-group focuses, but does not not select, the first ic-toggle-button when select method is 'multi'\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-type=\"multi\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const eventSpy = jest.fn();\n    page.win.addEventListener(\"icChange\", eventSpy);\n\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.waitForChanges();\n    buttons[0].checked = true;\n    buttons[1].checked = true;\n\n    const customEv = new CustomEvent(\"icToggleChecked\", {});\n\n    page.rootInstance.selectHandler(customEv);\n\n    await page.waitForChanges();\n\n    expect(eventSpy).toHaveBeenCalled();\n  });\n  it(\"should test handleKeyDown function\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group select-method=\"auto\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const firstButton = (await document.querySelector(\n      \"#0\"\n    )) as HTMLIcToggleButtonElement;\n    const secondButton = (await document.querySelector(\n      \"#1\"\n    )) as HTMLIcToggleButtonElement;\n    const thirdButton = (await document.querySelector(\n      \"#2\"\n    )) as HTMLIcToggleButtonElement;\n\n    expect(firstButton.checked).toBeFalsy();\n    await firstButton.click();\n    expect(firstButton.checked).toBeTruthy();\n\n    await page.waitForChanges();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowLeft\"));\n    expect(thirdButton.checked).toBeTruthy();\n    expect(firstButton.checked).toBeFalsy();\n\n    await page.waitForChanges();\n    await firstButton.click();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowUp\"));\n    expect(thirdButton.checked).toBeTruthy();\n    expect(firstButton.checked).toBeFalsy();\n\n    await page.waitForChanges();\n    await firstButton.click();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowDown\"));\n    expect(secondButton.checked).toBeTruthy();\n    expect(firstButton.checked).toBeFalsy();\n\n    await page.waitForChanges();\n    await firstButton.click();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowLeft\"));\n    expect(thirdButton.checked).toBeTruthy();\n    expect(firstButton.checked).toBeFalsy();\n\n    secondButton.disabled = true;\n\n    await page.waitForChanges();\n    await firstButton.click();\n    page.rootInstance.handleKeyDown(keyboard(\"ArrowRight\"));\n    expect(thirdButton.checked).toBeTruthy();\n    expect(firstButton.checked).toBeFalsy();\n\n    // for coverage\n    page.rootInstance.handleKeyDown(keyboard(\"Tab\"));\n    document.dispatchEvent(keyboard(\"Tab\"));\n  });\n  it(\"should test handleKeyDown on disabled toggle-button-group\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group disabled>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const mockEvent = new FocusEvent(\"focus\");\n\n    expect(page.rootInstance.handleHostFocus(mockEvent)).toBeNull();\n\n    await page.rootInstance.disconnectedCallback();\n  });\n  it(\"should test that setting the theme prop on toggle-button-group sets the theme on all toggle buttons\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButtonGroup, ToggleButton, Button],\n      html: `<ic-toggle-button-group theme=\"dark\">\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n              <ic-toggle-button label=\"Toggle\"></ic-toggle-button>\n            </ic-toggle-button-group>`,\n    });\n\n    const toggleGroup = (await document.querySelector(\n      \"ic-toggle-button-group\"\n    )) as HTMLIcToggleButtonGroupElement;\n    const buttons = await Array.from(\n      toggleGroup.querySelectorAll(\"ic-toggle-button\")\n    );\n    await page.rootInstance.watchThemeHandler(\"dark\");\n    await page.waitForChanges();\n\n    expect(buttons[0].theme).toBe(\"dark\");\n    expect(buttons[1].theme).toBe(\"dark\");\n    expect(buttons[2].theme).toBe(\"dark\");\n  });\n});\n"]}