@ukic/web-components 2.1.0-beta.15 → 2.1.0-beta.16

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

@@ -0,0 +1,204 @@
+import { newE2EPage } from "@stencil/core/testing";
+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.showDialog();
+        }
+      </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.showDialog();
+        }
+      </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.showDialog();
+        }
+      </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 test dialog content overflow", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <script>
+        function showDialog() {
+          dialog = document.querySelector("ic-dialog");
+          dialog.showDialog();
+        }
+      </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>
+    `);
+    await page.setViewport({
+      width: 800,
+      height: 480,
+    });
+    const btn = await page.find("#showBtn");
+    btn.click();
+    await page.waitForChanges();
+    await page.waitForTimeout(DIALOG_DELAY_MS);
+    let dialog = await page.find("ic-dialog");
+    let overflow = dialog.getAttribute("data-overflow");
+    expect(overflow).toBe("true");
+    await page.setViewport({
+      width: 800,
+      height: 800,
+    });
+    await page.waitForChanges();
+    await page.waitForTimeout(DIALOG_DELAY_MS);
+    dialog = await page.find("ic-dialog");
+    overflow = dialog.getAttribute("data-overflow");
+    expect(overflow).toBe("false");
+  });
+});
+//# sourceMappingURL=ic-dialog.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-dialog.e2e.js","sourceRoot":"","sources":["../../../src/components/ic-dialog/ic-dialog.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\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.showDialog();\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.showDialog();\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.showDialog();\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 test dialog content overflow\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `\n      <script>\n        function showDialog() {\n          dialog = document.querySelector(\"ic-dialog\");\n          dialog.showDialog();\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    await page.setViewport({\n      width: 800,\n      height: 480,\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 dialog = await page.find(\"ic-dialog\");\n\n    let overflow = dialog.getAttribute(\"data-overflow\");\n    expect(overflow).toBe(\"true\");\n\n    await page.setViewport({\n      width: 800,\n      height: 800,\n    });\n\n    await page.waitForChanges();\n    await page.waitForTimeout(DIALOG_DELAY_MS);\n\n    dialog = await page.find(\"ic-dialog\");\n\n    overflow = dialog.getAttribute(\"data-overflow\");\n    expect(overflow).toBe(\"false\");\n  });\n});\n"]}