@ukic/web-components 2.9.0 → 2.11.0

package/dist/collection/components/ic-dialog/test/basic/ic-dialog.e2e.js

@@ -1,288 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-beforeAll(() => {
-    jest.spyOn(console, "warn").mockImplementation(jest.fn());
-});
-const DIALOG_DELAY_MS = 300;
-describe("ic-dialog", () => {
-    it("should test focus and tab key press", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <script>
-        function showDialog() {
-          dialog = document.querySelector("ic-dialog");
-          dialog.open = true;
-        }
-      </script>
-      <ic-button id="showBtn" variant="primary" onclick="showDialog()"
-        >Launch dialog</ic-button
-      >
-      <ic-dialog
-        heading="This dialog has slotted interactive content"
-        label="slotted"
-        dismiss-label="Close"
-        size="medium"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua.
-        <ic-text-field id="text-field" label="What is your favourite coffee?">
-        </ic-text-field>
-        <ic-select
-        id="sel1"
-          label="What is your favourite coffee?"
-          placeholder="Placeholder goes here"
-        ></ic-select>
-        <ic-checkbox-group
-          style="margin: 8px 0"
-          hide-label
-          label="confirm"
-          name="confirm-checkbox"
-        >
-          <ic-checkbox label="Option" value="confirm" id="checkbox1"></ic-checkbox>
-        </ic-checkbox-group>
-       </ic-dialog>
-    `);
-        const btn = await page.find("#showBtn");
-        btn.click();
-        await page.waitForChanges();
-        await page.waitForTimeout(DIALOG_DELAY_MS);
-        let activeElement = await page.evaluate(() => document.activeElement.id);
-        expect(activeElement).toEqual("text-field");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        activeElement = await page.evaluate(() => document.activeElement.id);
-        expect(activeElement).toEqual("sel1");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        activeElement = await page.evaluate(() => document.activeElement.id);
-        expect(activeElement).toEqual("checkbox1");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        activeElement = await page.evaluate(() => document.activeElement.id);
-        expect(activeElement).toEqual("");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        activeElement = await page.evaluate(() => document.activeElement.id);
-        expect(activeElement).toEqual("");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        activeElement = await page.evaluate(() => document.activeElement.id);
-        expect(activeElement).toEqual("");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        activeElement = await page.evaluate(() => document.activeElement.id);
-        expect(activeElement).toEqual("text-field");
-    });
-    it("should hide dialog when background clicked", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <script>
-        function showDialog() {
-          dialog = document.querySelector("ic-dialog");
-          dialog.open = true;
-        }
-      </script>
-      <ic-button id="showBtn" variant="primary" onclick="showDialog()"
-        >Launch dialog</ic-button
-      >
-      <ic-dialog
-        heading="This dialog has slotted interactive content"
-        label="slotted"
-        size="medium"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua.        
-       </ic-dialog>
-    `);
-        const dialog = await page.find("ic-dialog");
-        let dialogDisplay = (await dialog.getComputedStyle()).display;
-        expect(dialogDisplay).toBe("none");
-        const btn = await page.find("#showBtn");
-        btn.click();
-        await page.waitForChanges();
-        await page.waitForTimeout(DIALOG_DELAY_MS);
-        dialogDisplay = (await dialog.getComputedStyle()).display;
-        expect(dialogDisplay).toBe("flex");
-        await page.mouse.click(10, 10);
-        await page.waitForChanges();
-        await page.waitForTimeout(DIALOG_DELAY_MS);
-        dialogDisplay = (await dialog.getComputedStyle()).display;
-        expect(dialogDisplay).toBe("none");
-    });
-    it("should not hide dialog when background clicked", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <script>
-        function showDialog() {
-          dialog = document.querySelector("ic-dialog");
-          dialog.open = true;
-        }
-      </script>
-      <ic-button id="showBtn" variant="primary" onclick="showDialog()"
-        >Launch dialog</ic-button
-      >
-      <ic-dialog
-        heading="This dialog has slotted interactive content"
-        label="slotted"
-        size="medium"
-        close-on-backdrop-click="false"
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua.        
-       </ic-dialog>
-    `);
-        const dialog = await page.find("ic-dialog");
-        let dialogDisplay = (await dialog.getComputedStyle()).display;
-        expect(dialogDisplay).toBe("none");
-        const btn = await page.find("#showBtn");
-        btn.click();
-        await page.waitForChanges();
-        await page.waitForTimeout(DIALOG_DELAY_MS);
-        dialogDisplay = (await dialog.getComputedStyle()).display;
-        expect(dialogDisplay).toBe("flex");
-        await page.mouse.click(10, 10);
-        await page.waitForChanges();
-        await page.waitForTimeout(DIALOG_DELAY_MS);
-        dialogDisplay = (await dialog.getComputedStyle()).display;
-        expect(dialogDisplay).toBe("flex");
-    });
-    it("should be able to tab to dynamically added interactive element", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<script>
-      function showSmallDialog() {
-        dialog = document.querySelector("#small-dialog");
-        dialog.showDialog();
-      }
-      function showNewBtn() {
-        var el = document.createElement("ic-button");
-        el.innerText = "foo";
-        var base = document.querySelector("#base");
-        base.after(el);
-      }
-    </script>
-    <ic-button variant="primary" id='showBtn' onclick="showSmallDialog()">
-      Launch small dialog
-    </ic-button>
-    <ic-dialog
-      heading="This is a small dialog"
-      label="Small"
-      id="small-dialog"
-    >
-      <ic-typography>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua.
-      </ic-typography>
-      <ic-button class="show" onclick="showNewBtn();">Show</ic-button>
-      <div id="base"></div>
-    </ic-dialog>
-    `);
-        const btn = await page.find("#showBtn");
-        btn.click();
-        await page.waitForChanges();
-        await page.waitForTimeout(DIALOG_DELAY_MS);
-        let focusedEl = await page.evaluate(() => {
-            const el = document.activeElement;
-            return {
-                tagName: el.tagName,
-                textContent: el.textContent,
-            };
-        });
-        expect(focusedEl.tagName).toBe("IC-BUTTON");
-        expect(focusedEl.textContent).toBe("Show");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        focusedEl = await page.evaluate(() => {
-            const dialog = document.querySelector("ic-dialog");
-            const el = dialog.shadowRoot.activeElement;
-            return {
-                tagName: el.tagName,
-                textContent: el.textContent,
-            };
-        });
-        expect(focusedEl.tagName).toBe("IC-BUTTON");
-        expect(focusedEl.textContent).toBe("Cancel");
-        const showBtn = await page.find(".show");
-        await showBtn.click();
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        focusedEl = await page.evaluate(() => {
-            const el = document.activeElement;
-            return {
-                tagName: el.tagName,
-                textContent: el.textContent,
-            };
-        });
-        expect(focusedEl.tagName).toBe("IC-BUTTON");
-        expect(focusedEl.textContent).toBe("foo");
-    });
-    it("should not tab to interactive button when hidden and tab to cancel button", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<script>
-      function showSmallDialog() {
-        dialog = document.querySelector("#small-dialog");
-        dialog.showDialog();
-      }
-      function hideNewBtn() {
-        var btn = document.querySelector("#hide-btn");
-        btn.remove();
-      }
-    </script>
-    <ic-button variant="primary" id='showBtn' onclick="showSmallDialog()">
-      Launch small dialog
-    </ic-button>
-    <ic-dialog
-      heading="This is a small dialog"
-      label="Small"
-      id="small-dialog"
-    >
-      <ic-typography>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua.
-      </ic-typography>
-      <ic-button class="hide" onclick="hideNewBtn();">Hide</ic-button>
-      <ic-button id='hide-btn'>foo</ic-button>
-      <div id="base"></div>
-    </ic-dialog>
-    `);
-        const btn = await page.find("#showBtn");
-        await btn.click();
-        await page.waitForChanges();
-        await page.waitForTimeout(DIALOG_DELAY_MS);
-        let focusedEl = await page.evaluate(() => {
-            const el = document.activeElement;
-            return {
-                tagName: el.tagName,
-                textContent: el.textContent,
-            };
-        });
-        expect(focusedEl.tagName).toBe("IC-BUTTON");
-        expect(focusedEl.textContent).toBe("Hide");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        focusedEl = await page.evaluate(() => {
-            const el = document.activeElement;
-            return {
-                tagName: el.tagName,
-                textContent: el.textContent,
-            };
-        });
-        expect(focusedEl.tagName).toBe("IC-BUTTON");
-        expect(focusedEl.textContent).toBe("foo");
-        const hideBtn = await page.find(".hide");
-        await hideBtn.click();
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        focusedEl = await page.evaluate(() => {
-            const dialog = document.querySelector("ic-dialog");
-            const el = dialog.shadowRoot.activeElement;
-            return {
-                tagName: el.tagName,
-                textContent: el.textContent,
-            };
-        });
-        expect(focusedEl.tagName).toBe("IC-BUTTON");
-        expect(focusedEl.textContent).toBe("Cancel");
-    });
-});
-//# sourceMappingURL=ic-dialog.e2e.js.map

package/dist/collection/components/ic-dialog/test/basic/ic-dialog.e2e.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ic-dialog.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-dialog/test/basic/ic-dialog.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,SAAS,CAAC,GAAG,EAAE;IACb,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;AAC5D,CAAC,CAAC,CAAC;AAEH,MAAM,eAAe,GAAG,GAAG,CAAC;AAE5B,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CACnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkCD,CACA,CAAC;QAEF,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACxC,GAAG,CAAC,KAAK,EAAE,CAAC;QAEZ,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;QAE3C,IAAI,aAAa,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;QACzE,MAAM,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAE5C,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACjC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,aAAa,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;QACrE,MAAM,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAEtC,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACjC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,aAAa,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;QACrE,MAAM,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAE3C,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACjC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,aAAa,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;QACrE,MAAM,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAElC,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACjC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,aAAa,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;QACrE,MAAM,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAElC,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACjC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,aAAa,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;QACrE,MAAM,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAElC,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACjC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,aAAa,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;QACrE,MAAM,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;QAC1D,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CACnB;;;;;;;;;;;;;;;;;;KAkBD,CACA,CAAC;QAEF,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAE5C,IAAI,aAAa,GAAG,CAAC,MAAM,MAAM,CAAC,gBAAgB,EAAE,CAAC,CAAC,OAAO,CAAC;QAC9D,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAEnC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACxC,GAAG,CAAC,KAAK,EAAE,CAAC;QAEZ,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;QAE3C,aAAa,GAAG,CAAC,MAAM,MAAM,CAAC,gBAAgB,EAAE,CAAC,CAAC,OAAO,CAAC;QAC1D,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAEnC,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QAC/B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;QAE3C,aAAa,GAAG,CAAC,MAAM,MAAM,CAAC,gBAAgB,EAAE,CAAC,CAAC,OAAO,CAAC;QAC1D,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CACnB;;;;;;;;;;;;;;;;;;;KAmBD,CACA,CAAC;QAEF,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAE5C,IAAI,aAAa,GAAG,CAAC,MAAM,MAAM,CAAC,gBAAgB,EAAE,CAAC,CAAC,OAAO,CAAC;QAC9D,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAEnC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACxC,GAAG,CAAC,KAAK,EAAE,CAAC;QAEZ,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;QAE3C,aAAa,GAAG,CAAC,MAAM,MAAM,CAAC,gBAAgB,EAAE,CAAC,CAAC,OAAO,CAAC;QAC1D,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAEnC,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QAC/B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;QAE3C,aAAa,GAAG,CAAC,MAAM,MAAM,CAAC,gBAAgB,EAAE,CAAC,CAAC,OAAO,CAAC;QAC1D,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gEAAgE,EAAE,KAAK,IAAI,EAAE;QAC9E,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BrB,CAAC,CAAC;QAEH,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACxC,GAAG,CAAC,KAAK,EAAE,CAAC;QAEZ,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;QAE3C,IAAI,SAAS,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;YACvC,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC;YAClC,OAAO;gBACL,OAAO,EAAE,EAAE,CAAC,OAAO;gBACnB,WAAW,EAAE,EAAE,CAAC,WAAW;aAC5B,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5C,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAE3C,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACjC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,SAAS,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;YACnC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;YACnD,MAAM,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC;YAC3C,OAAO;gBACL,OAAO,EAAE,EAAE,CAAC,OAAO;gBACnB,WAAW,EAAE,EAAE,CAAC,WAAW;aAC5B,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5C,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAE7C,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACzC,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC;QACtB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACjC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,SAAS,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;YACnC,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC;YAClC,OAAO;gBACL,OAAO,EAAE,EAAE,CAAC,OAAO;gBACnB,WAAW,EAAE,EAAE,CAAC,WAAW;aAC5B,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5C,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2EAA2E,EAAE,KAAK,IAAI,EAAE;QACzF,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;KA0BrB,CAAC,CAAC;QAEH,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACxC,MAAM,GAAG,CAAC,KAAK,EAAE,CAAC;QAElB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;QAE3C,IAAI,SAAS,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;YACvC,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC;YAClC,OAAO;gBACL,OAAO,EAAE,EAAE,CAAC,OAAO;gBACnB,WAAW,EAAE,EAAE,CAAC,WAAW;aAC5B,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5C,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAE3C,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACjC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,SAAS,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;YACnC,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC;YAClC,OAAO;gBACL,OAAO,EAAE,EAAE,CAAC,OAAO;gBACnB,WAAW,EAAE,EAAE,CAAC,WAAW;aAC5B,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5C,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE1C,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACzC,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC;QACtB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACjC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,SAAS,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;YACnC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;YACnD,MAAM,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC;YAC3C,OAAO;gBACL,OAAO,EAAE,EAAE,CAAC,OAAO;gBACnB,WAAW,EAAE,EAAE,CAAC,WAAW;aAC5B,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5C,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\nconst DIALOG_DELAY_MS = 300;\n\ndescribe(\"ic-dialog\", () => {\n  it(\"should test focus and tab key press\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `\n      <script>\n        function showDialog() {\n          dialog = document.querySelector(\"ic-dialog\");\n          dialog.open = true;\n        }\n      </script>\n      <ic-button id=\"showBtn\" variant=\"primary\" onclick=\"showDialog()\"\n        >Launch dialog</ic-button\n      >\n      <ic-dialog\n        heading=\"This dialog has slotted interactive content\"\n        label=\"slotted\"\n        dismiss-label=\"Close\"\n        size=\"medium\"\n      >\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n        tempor incididunt ut labore et dolore magna aliqua.\n        <ic-text-field id=\"text-field\" label=\"What is your favourite coffee?\">\n        </ic-text-field>\n        <ic-select\n        id=\"sel1\"\n          label=\"What is your favourite coffee?\"\n          placeholder=\"Placeholder goes here\"\n        ></ic-select>\n        <ic-checkbox-group\n          style=\"margin: 8px 0\"\n          hide-label\n          label=\"confirm\"\n          name=\"confirm-checkbox\"\n        >\n          <ic-checkbox label=\"Option\" value=\"confirm\" id=\"checkbox1\"></ic-checkbox>\n        </ic-checkbox-group>\n       </ic-dialog>\n    `\n    );\n\n    const btn = await page.find(\"#showBtn\");\n    btn.click();\n\n    await page.waitForChanges();\n    await page.waitForTimeout(DIALOG_DELAY_MS);\n\n    let activeElement = await page.evaluate(() => document.activeElement.id);\n    expect(activeElement).toEqual(\"text-field\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElement = await page.evaluate(() => document.activeElement.id);\n    expect(activeElement).toEqual(\"sel1\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElement = await page.evaluate(() => document.activeElement.id);\n    expect(activeElement).toEqual(\"checkbox1\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElement = await page.evaluate(() => document.activeElement.id);\n    expect(activeElement).toEqual(\"\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElement = await page.evaluate(() => document.activeElement.id);\n    expect(activeElement).toEqual(\"\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElement = await page.evaluate(() => document.activeElement.id);\n    expect(activeElement).toEqual(\"\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElement = await page.evaluate(() => document.activeElement.id);\n    expect(activeElement).toEqual(\"text-field\");\n  });\n\n  it(\"should hide dialog when background clicked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `\n      <script>\n        function showDialog() {\n          dialog = document.querySelector(\"ic-dialog\");\n          dialog.open = true;\n        }\n      </script>\n      <ic-button id=\"showBtn\" variant=\"primary\" onclick=\"showDialog()\"\n        >Launch dialog</ic-button\n      >\n      <ic-dialog\n        heading=\"This dialog has slotted interactive content\"\n        label=\"slotted\"\n        size=\"medium\"\n      >\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n        tempor incididunt ut labore et dolore magna aliqua.        \n       </ic-dialog>\n    `\n    );\n\n    const dialog = await page.find(\"ic-dialog\");\n\n    let dialogDisplay = (await dialog.getComputedStyle()).display;\n    expect(dialogDisplay).toBe(\"none\");\n\n    const btn = await page.find(\"#showBtn\");\n    btn.click();\n\n    await page.waitForChanges();\n    await page.waitForTimeout(DIALOG_DELAY_MS);\n\n    dialogDisplay = (await dialog.getComputedStyle()).display;\n    expect(dialogDisplay).toBe(\"flex\");\n\n    await page.mouse.click(10, 10);\n    await page.waitForChanges();\n    await page.waitForTimeout(DIALOG_DELAY_MS);\n\n    dialogDisplay = (await dialog.getComputedStyle()).display;\n    expect(dialogDisplay).toBe(\"none\");\n  });\n\n  it(\"should not hide dialog when background clicked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `\n      <script>\n        function showDialog() {\n          dialog = document.querySelector(\"ic-dialog\");\n          dialog.open = true;\n        }\n      </script>\n      <ic-button id=\"showBtn\" variant=\"primary\" onclick=\"showDialog()\"\n        >Launch dialog</ic-button\n      >\n      <ic-dialog\n        heading=\"This dialog has slotted interactive content\"\n        label=\"slotted\"\n        size=\"medium\"\n        close-on-backdrop-click=\"false\"\n      >\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n        tempor incididunt ut labore et dolore magna aliqua.        \n       </ic-dialog>\n    `\n    );\n\n    const dialog = await page.find(\"ic-dialog\");\n\n    let dialogDisplay = (await dialog.getComputedStyle()).display;\n    expect(dialogDisplay).toBe(\"none\");\n\n    const btn = await page.find(\"#showBtn\");\n    btn.click();\n\n    await page.waitForChanges();\n    await page.waitForTimeout(DIALOG_DELAY_MS);\n\n    dialogDisplay = (await dialog.getComputedStyle()).display;\n    expect(dialogDisplay).toBe(\"flex\");\n\n    await page.mouse.click(10, 10);\n    await page.waitForChanges();\n    await page.waitForTimeout(DIALOG_DELAY_MS);\n\n    dialogDisplay = (await dialog.getComputedStyle()).display;\n    expect(dialogDisplay).toBe(\"flex\");\n  });\n\n  it(\"should be able to tab to dynamically added interactive element\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<script>\n      function showSmallDialog() {\n        dialog = document.querySelector(\"#small-dialog\");\n        dialog.showDialog();\n      }\n      function showNewBtn() {\n        var el = document.createElement(\"ic-button\");\n        el.innerText = \"foo\";\n        var base = document.querySelector(\"#base\");\n        base.after(el);\n      }\n    </script>\n    <ic-button variant=\"primary\" id='showBtn' onclick=\"showSmallDialog()\">\n      Launch small dialog\n    </ic-button>\n    <ic-dialog\n      heading=\"This is a small dialog\"\n      label=\"Small\"\n      id=\"small-dialog\"\n    >\n      <ic-typography>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n        eiusmod tempor incididunt ut labore et dolore magna aliqua.\n      </ic-typography>\n      <ic-button class=\"show\" onclick=\"showNewBtn();\">Show</ic-button>\n      <div id=\"base\"></div>\n    </ic-dialog>\n    `);\n\n    const btn = await page.find(\"#showBtn\");\n    btn.click();\n\n    await page.waitForChanges();\n    await page.waitForTimeout(DIALOG_DELAY_MS);\n\n    let focusedEl = await page.evaluate(() => {\n      const el = document.activeElement;\n      return {\n        tagName: el.tagName,\n        textContent: el.textContent,\n      };\n    });\n\n    expect(focusedEl.tagName).toBe(\"IC-BUTTON\");\n    expect(focusedEl.textContent).toBe(\"Show\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    focusedEl = await page.evaluate(() => {\n      const dialog = document.querySelector(\"ic-dialog\");\n      const el = dialog.shadowRoot.activeElement;\n      return {\n        tagName: el.tagName,\n        textContent: el.textContent,\n      };\n    });\n\n    expect(focusedEl.tagName).toBe(\"IC-BUTTON\");\n    expect(focusedEl.textContent).toBe(\"Cancel\");\n\n    const showBtn = await page.find(\".show\");\n    await showBtn.click();\n    await page.waitForChanges();\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    focusedEl = await page.evaluate(() => {\n      const el = document.activeElement;\n      return {\n        tagName: el.tagName,\n        textContent: el.textContent,\n      };\n    });\n\n    expect(focusedEl.tagName).toBe(\"IC-BUTTON\");\n    expect(focusedEl.textContent).toBe(\"foo\");\n  });\n\n  it(\"should not tab to interactive button when hidden and tab to cancel button\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<script>\n      function showSmallDialog() {\n        dialog = document.querySelector(\"#small-dialog\");\n        dialog.showDialog();\n      }\n      function hideNewBtn() {\n        var btn = document.querySelector(\"#hide-btn\");\n        btn.remove();\n      }\n    </script>\n    <ic-button variant=\"primary\" id='showBtn' onclick=\"showSmallDialog()\">\n      Launch small dialog\n    </ic-button>\n    <ic-dialog\n      heading=\"This is a small dialog\"\n      label=\"Small\"\n      id=\"small-dialog\"\n    >\n      <ic-typography>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n        eiusmod tempor incididunt ut labore et dolore magna aliqua.\n      </ic-typography>\n      <ic-button class=\"hide\" onclick=\"hideNewBtn();\">Hide</ic-button>\n      <ic-button id='hide-btn'>foo</ic-button>\n      <div id=\"base\"></div>\n    </ic-dialog>\n    `);\n\n    const btn = await page.find(\"#showBtn\");\n    await btn.click();\n\n    await page.waitForChanges();\n    await page.waitForTimeout(DIALOG_DELAY_MS);\n\n    let focusedEl = await page.evaluate(() => {\n      const el = document.activeElement;\n      return {\n        tagName: el.tagName,\n        textContent: el.textContent,\n      };\n    });\n\n    expect(focusedEl.tagName).toBe(\"IC-BUTTON\");\n    expect(focusedEl.textContent).toBe(\"Hide\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    focusedEl = await page.evaluate(() => {\n      const el = document.activeElement;\n      return {\n        tagName: el.tagName,\n        textContent: el.textContent,\n      };\n    });\n\n    expect(focusedEl.tagName).toBe(\"IC-BUTTON\");\n    expect(focusedEl.textContent).toBe(\"foo\");\n\n    const hideBtn = await page.find(\".hide\");\n    await hideBtn.click();\n    await page.waitForChanges();\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    focusedEl = await page.evaluate(() => {\n      const dialog = document.querySelector(\"ic-dialog\");\n      const el = dialog.shadowRoot.activeElement;\n      return {\n        tagName: el.tagName,\n        textContent: el.textContent,\n      };\n    });\n\n    expect(focusedEl.tagName).toBe(\"IC-BUTTON\");\n    expect(focusedEl.textContent).toBe(\"Cancel\");\n  });\n});\n"]}

package/dist/collection/components/ic-select/test/a11y/ic-select.test.a11y.js

@@ -1,28 +0,0 @@
-import { fixture } from "@open-wc/testing-helpers";
-import { axe } from "jest-axe";
-import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
-describe("ic-select", () => {
-    it("passes accessibility", async () => {
-        const el = await fixture(`<ic-select
-        label="Select component"
-        helper-text="Helper text"
-        validation-status="error"
-        validation-text="Validation text"
-      ></ic-select>
-      <script>
-        var select = document.querySelector("ic-select");
-        var option = "Value 1";
-        select.options = [
-          { label: "Label 1", value: "Value 1" },
-          { label: "Label 2", value: "Value 2" },
-        ];
-        select.addEventListener("icChange", function (event) {
-          option = event.detail.value;
-          select.value = option;
-        });
-      </script>`);
-        checkShadowElementRendersCorrectly(el);
-        expect(await axe(el)).toHaveNoViolations();
-    });
-});
-//# sourceMappingURL=ic-select.test.a11y.js.map

package/dist/collection/components/ic-select/test/a11y/ic-select.test.a11y.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ic-select.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-select/test/a11y/ic-select.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;gBAiBb,CAAC,CAAC;QACd,kCAAkC,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"ic-select\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`<ic-select\n        label=\"Select component\"\n        helper-text=\"Helper text\"\n        validation-status=\"error\"\n        validation-text=\"Validation text\"\n      ></ic-select>\n      <script>\n        var select = document.querySelector(\"ic-select\");\n        var option = \"Value 1\";\n        select.options = [\n          { label: \"Label 1\", value: \"Value 1\" },\n          { label: \"Label 2\", value: \"Value 2\" },\n        ];\n        select.addEventListener(\"icChange\", function (event) {\n          option = event.detail.value;\n          select.value = option;\n        });\n      </script>`);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}