@ukic/web-components 2.6.0 → 2.8.0

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

@@ -145,63 +145,144 @@ describe("ic-dialog", () => {
     dialogDisplay = (await dialog.getComputedStyle()).display;
     expect(dialogDisplay).toBe("flex");
   });
-  it("should test dialog content overflow", async () => {
+  it("should be able to tab to dynamically added interactive element", 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>
+    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>
     `);
-    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,
+    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);
-    dialog = await page.find("ic-dialog");
-    overflow = dialog.getAttribute("data-overflow");
-    expect(overflow).toBe("false");
+    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 +1 @@
-{"version":3,"file":"ic-dialog.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-dialog/test/basic/ic-dialog.e2e.ts"],"names":[],"mappings":"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","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 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.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    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"]}
+{"version":3,"file":"ic-dialog.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-dialog/test/basic/ic-dialog.e2e.ts"],"names":[],"mappings":"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","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-dialog/test/basic/ic-dialog.spec.js

@@ -8,6 +8,9 @@ const setupDialogMethods = (page) => {
   page.rootInstance.dialogEl.showModal = jest.fn(function mock() {
     this.open = true;
   });
+  page.rootInstance.dialogEl.show = jest.fn(function mock() {
+    this.open = true;
+  });
   page.rootInstance.dialogEl.close = jest.fn(function mock() {
     this.open = false;
   });
@@ -453,43 +456,6 @@ describe("ic-dialog component", () => {
     await page.waitForChanges();
     expect(page.rootInstance.dialogRendered).toBe(true);
   });
-  it("should set appropriate data-overflow attribute", async () => {
-    const page = await newSpecPage({
-      components: [Dialog, TextField, Button],
-      html: `<ic-dialog heading="Dialog heading"></ic-dialog>`,
-    });
-    setupDialogMethods(page);
-    const dialog = document.querySelector("ic-dialog");
-    await dialog.showDialog();
-    dialog.open = true;
-    await page.waitForChanges();
-    //delay for setTimeout in code
-    await waitForTimeout(DIALOG_DELAY_MS);
-    page.rootInstance.dialogEl.clientHeight = 100;
-    page.rootInstance.dialogEl.scrollHeight = 100;
-    await page.waitForChanges();
-    //delay for setTimeout in code
-    await waitForTimeout(DIALOG_DELAY_MS);
-    page.rootInstance.resizeObserverCallback();
-    expect(page.rootInstance.el.getAttribute("data-overflow")).toBe("false");
-    await dialog.hideDialog();
-    dialog.open = false;
-    await page.waitForChanges();
-    //delay for setTimeout in code
-    await waitForTimeout(DIALOG_DELAY_MS);
-    await dialog.showDialog();
-    dialog.open = true;
-    await page.waitForChanges();
-    //delay for setTimeout in code
-    await waitForTimeout(DIALOG_DELAY_MS);
-    page.rootInstance.dialogEl.clientHeight = 50;
-    page.rootInstance.dialogEl.scrollHeight = 100;
-    await page.waitForChanges();
-    //delay for setTimeout in code
-    await waitForTimeout(DIALOG_DELAY_MS);
-    page.rootInstance.resizeObserverCallback();
-    expect(page.rootInstance.el.getAttribute("data-overflow")).toBe("true");
-  });
   it("should correctly pass onclick functions to two default buttons", async () => {
     const page = await newSpecPage({
       components: [Dialog, Button],
@@ -503,7 +469,6 @@ describe("ic-dialog component", () => {
     ];
     await page.waitForChanges();
     expect(page.rootInstance.dialogRendered).toBe(false);
-    await dialog.showDialog();
     dialog.open = true;
     await page.waitForChanges();
     //delay for setTimeout in code
@@ -514,7 +479,6 @@ describe("ic-dialog component", () => {
     //delay for setTimeout in code
     await waitForTimeout(DIALOG_DELAY_MS);
     expect(page.rootInstance.dialogRendered).toBe(false);
-    await dialog.showDialog();
     dialog.open = true;
     await page.waitForChanges();
     //delay for setTimeout in code
@@ -574,5 +538,56 @@ describe("ic-dialog component", () => {
     await waitForTimeout(DIALOG_DELAY_MS);
     expect(page.rootInstance.dialogRendered).toBe(false);
   });
+  it("should render with the close button", async () => {
+    const page = await newSpecPage({
+      components: [Dialog, Button],
+      html: '<ic-dialog heading="Dialog with close button test"></ic-dialog>',
+    });
+    setupDialogMethods(page);
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render without the close button", async () => {
+    const page = await newSpecPage({
+      components: [Dialog, Button],
+      html: '<ic-dialog heading="Dialog hide close button test" hide-close-button="true"></ic-dialog>',
+    });
+    setupDialogMethods(page);
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should call this.getInteractiveElements() when slot content changes", async () => {
+    const page = await newSpecPage({
+      components: [Dialog, Button],
+      html: '<ic-dialog heading="Dialog heading" disable-height-constraint="true"></ic-dialog>',
+    });
+    const contentAreaSlot = document
+      .querySelector("ic-dialog")
+      .shadowRoot.querySelector(".content-area slot");
+    jest
+      .spyOn(page.rootInstance, "getInteractiveElements")
+      .mockImplementation();
+    await page.rootInstance.refreshInteractiveElementsOnSlotChange();
+    contentAreaSlot.dispatchEvent(new Event("slotchange"));
+    expect(page.rootInstance.getInteractiveElements).toBeCalledTimes(1);
+  });
+  it("should call dialog.show() disableHeightConstraint is set and showDialog is called", async () => {
+    const page = await newSpecPage({
+      components: [Dialog, Button],
+      html: '<ic-dialog heading="Dialog heading" disable-height-constraint="true"></ic-dialog>',
+    });
+    setupDialogMethods(page);
+    const dialog = document.querySelector("ic-dialog");
+    dialog.buttonProps = [
+      { label: "Cancel", onclick: "this.hideDialog()" },
+      { label: "Options", onclick: "this.hideDialog()" },
+      { label: "Confirm", onclick: "this.hideDialog()" },
+    ];
+    await page.waitForChanges();
+    expect(page.rootInstance.dialogRendered).toBe(false);
+    await dialog.showDialog();
+    await page.waitForChanges();
+    //delay for setTimeout in code
+    await waitForTimeout(DIALOG_DELAY_MS);
+    expect(page.rootInstance.dialogEl.show).toBeCalled();
+  });
 });
 //# sourceMappingURL=ic-dialog.spec.js.map