@ukic/web-components 2.1.0-beta.9 → 2.3.0

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

@@ -0,0 +1,317 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { waitForTimeout } from "../../../../testspec.setup";
+beforeAll(() => {
+  jest.spyOn(console, "warn").mockImplementation(jest.fn());
+});
+const testTabs = `
+<ic-tab-context>
+  <ic-tab-group label="Tabs e2e label">
+    <ic-tab>Tab 1</ic-tab>
+    <ic-tab>Tab 2</ic-tab>
+    <ic-tab>Tab 3</ic-tab>
+  </ic-tab-group>
+  <ic-tab-panel>Tab panel 1</ic-tab-panel>
+  <ic-tab-panel>Tab panel 2</ic-tab-panel>
+  <ic-tab-panel>Tab panel 3</ic-tab-panel>
+</ic-tab-context>
+`;
+describe("ic-tab-context component", () => {
+  it("should display a tab panel when its corresponding tab is clicked", async () => {
+    const page = await newE2EPage({ html: testTabs });
+    const tab1 = await page.find('ic-tab[tab-id="ic-tab--1-context-default"]');
+    await tab1.click();
+    await page.waitForChanges();
+    const tabPanel1 = await page.find('ic-tab-panel[panel-id="ic-tab--1-context-default"]');
+    expect(tabPanel1).not.toHaveAttribute("hidden");
+  });
+  it("should hide the other tab panels when a tab is clicked", async () => {
+    const page = await newE2EPage({ html: testTabs });
+    const tab1 = await page.find('ic-tab[tab-id="ic-tab--1-context-default"]');
+    await tab1.click();
+    await page.waitForChanges();
+    const tabPanel0 = await page.find('ic-tab-panel[panel-id="ic-tab--0-context-default"]');
+    const tabPanel2 = await page.find('ic-tab-panel[panel-id="ic-tab--2-context-default"]');
+    expect(tabPanel0).toHaveAttribute("hidden");
+    expect(tabPanel2).toHaveAttribute("hidden");
+  });
+  it("should move focus to the next tab when the right arrow key is pressed", async () => {
+    const page = await newE2EPage({ html: testTabs });
+    const tab0 = await page.find('ic-tab[tab-id="ic-tab--0-context-default"]');
+    await tab0.click();
+    await page.waitForChanges();
+    await page.keyboard.press("ArrowRight");
+    await page.waitForChanges();
+    const activeElement = await page.evaluate(() => document.activeElement.id);
+    expect(activeElement).toEqual("ic-tab-1-context-default");
+  });
+  it("should move focus to the previous tab when the left arrow key is pressed", async () => {
+    const page = await newE2EPage({ html: testTabs });
+    const tab1 = await page.find('ic-tab[tab-id="ic-tab--1-context-default"]');
+    await tab1.click();
+    await page.waitForChanges();
+    await page.keyboard.press("ArrowLeft");
+    await page.waitForChanges();
+    const activeElement = await page.evaluate(() => document.activeElement.id);
+    expect(activeElement).toEqual("ic-tab-0-context-default");
+  });
+  it("should move focus to the first tab when the right arrow key is pressed if currently on the last tab", async () => {
+    const page = await newE2EPage({ html: testTabs });
+    const tab2 = await page.find('ic-tab[tab-id="ic-tab--2-context-default"]');
+    await tab2.click();
+    await page.waitForChanges();
+    await page.keyboard.press("ArrowRight");
+    await page.waitForChanges();
+    const activeElement = await page.evaluate(() => document.activeElement.id);
+    expect(activeElement).toEqual("ic-tab-0-context-default");
+  });
+  it("should move focus to the last tab when the left arrow key is pressed if currently on the first tab", async () => {
+    const page = await newE2EPage({ html: testTabs });
+    const tab0 = await page.find('ic-tab[tab-id="ic-tab--0-context-default"]');
+    await tab0.click();
+    await page.waitForChanges();
+    await page.keyboard.press("ArrowLeft");
+    await page.waitForChanges();
+    const activeElement = await page.evaluate(() => document.activeElement.id);
+    expect(activeElement).toEqual("ic-tab-2-context-default");
+  });
+  it("should move focus to the first tab when the Home key is pressed", async () => {
+    const page = await newE2EPage({ html: testTabs });
+    const tab2 = await page.find('ic-tab[tab-id="ic-tab--2-context-default"]');
+    await tab2.click();
+    await page.waitForChanges();
+    await page.keyboard.press("Home");
+    await page.waitForChanges();
+    const activeElement = await page.evaluate(() => document.activeElement.id);
+    expect(activeElement).toEqual("ic-tab-0-context-default");
+  });
+  it("should move focus to the last tab when the End key is pressed", async () => {
+    const page = await newE2EPage({ html: testTabs });
+    const tab0 = await page.find('ic-tab[tab-id="ic-tab--0-context-default"]');
+    await tab0.click();
+    await page.waitForChanges();
+    await page.keyboard.press("End");
+    await page.waitForChanges();
+    const activeElement = await page.evaluate(() => document.activeElement.id);
+    expect(activeElement).toEqual("ic-tab-2-context-default");
+  });
+  it("should not allow a disabled tab to be selected", async () => {
+    const page = await newE2EPage({
+      html: `
+    <ic-tab-context>
+      <ic-tab-group label="Tabs e2e label">
+        <ic-tab>Tab 1</ic-tab>
+        <ic-tab disabled>Tab 2</ic-tab>
+        <ic-tab>Tab 3</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab panel 1</ic-tab-panel>
+      <ic-tab-panel>Tab panel 2</ic-tab-panel>
+      <ic-tab-panel>Tab panel 3</ic-tab-panel>
+    </ic-tab-context>
+    `,
+    });
+    const tab0 = await page.find('ic-tab[tab-id="ic-tab--0-context-default"]');
+    await tab0.click();
+    await page.waitForChanges();
+    await page.keyboard.press("ArrowRight");
+    await page.waitForChanges();
+    const activeElement = await page.evaluate(() => document.activeElement.id);
+    expect(activeElement).toEqual("ic-tab-2-context-default");
+  });
+  it("should display the tab panels automatically using the arrow keys when using automatic activation", async () => {
+    const page = await newE2EPage({ html: testTabs });
+    const tab0 = await page.find('ic-tab[tab-id="ic-tab--0-context-default"]');
+    await tab0.click();
+    await page.waitForChanges();
+    await page.keyboard.press("ArrowRight");
+    await page.waitForChanges();
+    const tabPanel0 = await page.find('ic-tab-panel[panel-id="ic-tab--0-context-default"]');
+    const tabPanel1 = await page.find('ic-tab-panel[panel-id="ic-tab--1-context-default"]');
+    const tabPanel2 = await page.find('ic-tab-panel[panel-id="ic-tab--2-context-default"]');
+    expect(tabPanel0).toHaveAttribute("hidden");
+    expect(tabPanel1).not.toHaveAttribute("hidden");
+    expect(tabPanel2).toHaveAttribute("hidden");
+  });
+  it("should not display the tab panels automatically using the arrow keys when using manual activation", async () => {
+    const page = await newE2EPage({
+      html: `
+    <ic-tab-context activation-type="manual">
+      <ic-tab-group label="Tabs e2e label">
+        <ic-tab>Tab 1</ic-tab>
+        <ic-tab>Tab 2</ic-tab>
+        <ic-tab>Tab 3</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab panel 1</ic-tab-panel>
+      <ic-tab-panel>Tab panel 2</ic-tab-panel>
+      <ic-tab-panel>Tab panel 3</ic-tab-panel>
+    </ic-tab-context>
+    `,
+    });
+    const tab0 = await page.find('ic-tab[tab-id="ic-tab--0-context-default"]');
+    await tab0.click();
+    await page.waitForChanges();
+    await page.keyboard.press("ArrowLeft");
+    await page.waitForChanges();
+    const tabPanel0 = await page.find('ic-tab-panel[panel-id="ic-tab--0-context-default"]');
+    const tabPanel1 = await page.find('ic-tab-panel[panel-id="ic-tab--1-context-default"]');
+    const tabPanel2 = await page.find('ic-tab-panel[panel-id="ic-tab--2-context-default"]');
+    expect(tabPanel0).not.toHaveAttribute("hidden");
+    expect(tabPanel1).toHaveAttribute("hidden");
+    expect(tabPanel2).toHaveAttribute("hidden");
+  });
+  it("should set the selected tab in controlled mode to be the value that is passed in", async () => {
+    const page = await newE2EPage({
+      html: `
+    <ic-tab-context selected-tab-index="1">
+      <ic-tab-group label="Tabs e2e label">
+        <ic-tab>Tab 1</ic-tab>
+        <ic-tab>Tab 2</ic-tab>
+        <ic-tab>Tab 3</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab panel 1</ic-tab-panel>
+      <ic-tab-panel>Tab panel 2</ic-tab-panel>
+      <ic-tab-panel>Tab panel 3</ic-tab-panel>
+    </ic-tab-context>
+    `,
+    });
+    const tabPanel1 = await page.find('ic-tab-panel[panel-id="ic-tab--1-context-default"]');
+    expect(tabPanel1).not.toHaveAttribute("hidden");
+  });
+  it("should call icTabSelect event in controlled mode when clicked", async () => {
+    const page = await newE2EPage({
+      html: `
+    <ic-tab-context selected-tab-index="1">
+      <ic-tab-group label="Tabs e2e label">
+        <ic-tab>Tab 1</ic-tab>
+        <ic-tab>Tab 2</ic-tab>
+        <ic-tab>Tab 3</ic-tab>
+      </ic-tab-group>
+      <ic-tab-panel>Tab panel 1</ic-tab-panel>
+      <ic-tab-panel>Tab panel 2</ic-tab-panel>
+      <ic-tab-panel>Tab panel 3</ic-tab-panel>
+    </ic-tab-context>
+    `,
+    });
+    const tabs = await page.find("ic-tab-context");
+    const tab1 = await page.find('ic-tab[tab-id="ic-tab--1-context-default"]');
+    const tabSelect = await tabs.spyOnEvent("icTabSelect");
+    await tab1.click();
+    await page.waitForChanges();
+    expect(tabSelect).toHaveReceivedEventDetail({
+      tabIndex: 1,
+    });
+  });
+  it("should move focus to next tab if focused tab is removed", async () => {
+    const page = await newE2EPage({
+      html: `<ic-tab-context>
+          <ic-tab-group label="Example tab group">
+            <ic-tab>One</ic-tab>
+            <ic-tab>Two</ic-tab>
+            <ic-tab>Three</ic-tab>
+          </ic-tab-group>
+          <ic-tab-panel>Tab One</ic-tab-panel>
+          <ic-tab-panel>Tab Two</ic-tab-panel>
+          <ic-tab-panel>Tab Three</ic-tab-panel>
+        </ic-tab-context>
+      `,
+    });
+    const tab0 = await page.find('ic-tab[tab-id="ic-tab--0-context-default"]');
+    await tab0.click();
+    await page.waitForChanges();
+    await page.keyboard.press("ArrowRight");
+    await page.waitForChanges();
+    let focusedTabId = await page.evaluate(() => document.activeElement.id);
+    expect(focusedTabId).toBe("ic-tab-1-context-default");
+    await page.evaluate(() => {
+      const tabGroup = document.querySelector("ic-tab-group");
+      const allTabs = tabGroup.querySelectorAll("ic-tab");
+      const tabContext = document.querySelector("ic-tab-context");
+      const allTabPanels = tabContext.querySelectorAll("ic-tab-panel");
+      allTabs[allTabs.length - 2].remove();
+      allTabPanels[allTabPanels.length - 2].remove();
+    });
+    await waitForTimeout(250);
+    focusedTabId = await page.evaluate(() => document.activeElement.id);
+    expect(focusedTabId).toBe("ic-tab-1-context-default");
+    const focusedTab = await page.find('ic-tab[id="ic-tab-1-context-default"]');
+    const tabPanel = await page.find('ic-tab-panel[id*="ic-tab-panel-1-context-default"]');
+    expect(focusedTab.textContent).toBe("Three");
+    expect(tabPanel).not.toHaveAttribute("hidden");
+  });
+  it("should move focus to first tab if last tab is focused and removed", async () => {
+    const page = await newE2EPage({
+      html: `<ic-tab-context>
+          <ic-tab-group label="Example tab group">
+            <ic-tab>One</ic-tab>
+            <ic-tab>Two</ic-tab>
+            <ic-tab>Three</ic-tab>
+          </ic-tab-group>
+          <ic-tab-panel>Tab One</ic-tab-panel>
+          <ic-tab-panel>Tab Two</ic-tab-panel>
+          <ic-tab-panel>Tab Three</ic-tab-panel>
+        </ic-tab-context>
+      `,
+    });
+    const tab0 = await page.find('ic-tab[tab-id="ic-tab--0-context-default"]');
+    await tab0.click();
+    await page.waitForChanges();
+    await page.keyboard.press("ArrowRight");
+    await page.waitForChanges();
+    await page.keyboard.press("ArrowRight");
+    await page.waitForChanges();
+    let focusedTabId = await page.evaluate(() => document.activeElement.id);
+    expect(focusedTabId).toBe("ic-tab-2-context-default");
+    await page.evaluate(() => {
+      const tabGroup = document.querySelector("ic-tab-group");
+      const allTabs = tabGroup.querySelectorAll("ic-tab");
+      const tabContext = document.querySelector("ic-tab-context");
+      const allTabPanels = tabContext.querySelectorAll("ic-tab-panel");
+      allTabs[allTabs.length - 1].remove();
+      allTabPanels[allTabPanels.length - 1].remove();
+    });
+    await waitForTimeout(250);
+    focusedTabId = await page.evaluate(() => document.activeElement.id);
+    expect(focusedTabId).toBe("ic-tab-0-context-default");
+    const focusedTab = await page.find('ic-tab[id="ic-tab-0-context-default"]');
+    const tabPanel = await page.find('ic-tab-panel[id*="ic-tab-panel-0-context-default"]');
+    expect(focusedTab.textContent).toBe("One");
+    expect(tabPanel).not.toHaveAttribute("hidden");
+  });
+  it("should not trigger icTabSelect event in parent tab", async () => {
+    const page = await newE2EPage({
+      html: `<ic-tab-context id='parent'>
+          <ic-tab-group label="Example tab group">
+            <ic-tab>One</ic-tab>
+            <ic-tab>Two</ic-tab>
+            <ic-tab>Three</ic-tab>
+          </ic-tab-group>
+          <ic-tab-panel>
+            <ic-tab-context context-id='child' id='nested'>
+              <ic-tab-group label="Example tab group">
+                <ic-tab>One</ic-tab>
+                <ic-tab>Two</ic-tab>
+                <ic-tab>Three</ic-tab>
+              </ic-tab-group>
+              <ic-tab-panel>Tab One</ic-tab-panel>
+              <ic-tab-panel>Tab Two</ic-tab-panel>
+              <ic-tab-panel>Tab Three</ic-tab-panel>
+            </ic-tab-context>
+          </ic-tab-panel>
+          <ic-tab-panel>Tab Two</ic-tab-panel>
+          <ic-tab-panel>Tab Three</ic-tab-panel>
+        </ic-tab-context>
+      `,
+    });
+    const mainTabs = await page.find('ic-tab-context[context-id="default"]');
+    const nestedTabs = await page.find('ic-tab-context[context-id="child"]');
+    const parentTabSelect = await mainTabs.spyOnEvent("icTabSelect");
+    const nestedTabSelect = await nestedTabs.spyOnEvent("icTabSelect");
+    const nestedTab1 = await page.find('ic-tab-panel[panel-id="ic-tab--0-context-default"] ic-tab[tab-id="ic-tab--1-context-child"]');
+    await nestedTab1.click();
+    await page.waitForChanges();
+    expect(parentTabSelect).not.toHaveReceivedEvent();
+    expect(nestedTabSelect).toHaveReceivedEventDetail({
+      tabIndex: 1,
+    });
+  });
+});
+//# sourceMappingURL=ic-tab-context.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-tab-context.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-tab-context/test/basic/ic-tab-context.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\nimport { waitForTimeout } from \"../../../../testspec.setup\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\nconst testTabs = `\n<ic-tab-context>\n  <ic-tab-group label=\"Tabs e2e label\">\n    <ic-tab>Tab 1</ic-tab>\n    <ic-tab>Tab 2</ic-tab>\n    <ic-tab>Tab 3</ic-tab>\n  </ic-tab-group>\n  <ic-tab-panel>Tab panel 1</ic-tab-panel>\n  <ic-tab-panel>Tab panel 2</ic-tab-panel>\n  <ic-tab-panel>Tab panel 3</ic-tab-panel>\n</ic-tab-context>\n`;\n\ndescribe(\"ic-tab-context component\", () => {\n  it(\"should display a tab panel when its corresponding tab is clicked\", async () => {\n    const page = await newE2EPage({ html: testTabs });\n    const tab1 = await page.find('ic-tab[tab-id=\"ic-tab--1-context-default\"]');\n    await tab1.click();\n    await page.waitForChanges();\n    const tabPanel1 = await page.find(\n      'ic-tab-panel[panel-id=\"ic-tab--1-context-default\"]'\n    );\n    expect(tabPanel1).not.toHaveAttribute(\"hidden\");\n  });\n\n  it(\"should hide the other tab panels when a tab is clicked\", async () => {\n    const page = await newE2EPage({ html: testTabs });\n    const tab1 = await page.find('ic-tab[tab-id=\"ic-tab--1-context-default\"]');\n    await tab1.click();\n    await page.waitForChanges();\n    const tabPanel0 = await page.find(\n      'ic-tab-panel[panel-id=\"ic-tab--0-context-default\"]'\n    );\n    const tabPanel2 = await page.find(\n      'ic-tab-panel[panel-id=\"ic-tab--2-context-default\"]'\n    );\n    expect(tabPanel0).toHaveAttribute(\"hidden\");\n    expect(tabPanel2).toHaveAttribute(\"hidden\");\n  });\n\n  it(\"should move focus to the next tab when the right arrow key is pressed\", async () => {\n    const page = await newE2EPage({ html: testTabs });\n    const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n    await tab0.click();\n    await page.waitForChanges();\n    await page.keyboard.press(\"ArrowRight\");\n    await page.waitForChanges();\n    const activeElement = await page.evaluate(() => document.activeElement.id);\n    expect(activeElement).toEqual(\"ic-tab-1-context-default\");\n  });\n\n  it(\"should move focus to the previous tab when the left arrow key is pressed\", async () => {\n    const page = await newE2EPage({ html: testTabs });\n    const tab1 = await page.find('ic-tab[tab-id=\"ic-tab--1-context-default\"]');\n    await tab1.click();\n    await page.waitForChanges();\n    await page.keyboard.press(\"ArrowLeft\");\n    await page.waitForChanges();\n    const activeElement = await page.evaluate(() => document.activeElement.id);\n    expect(activeElement).toEqual(\"ic-tab-0-context-default\");\n  });\n\n  it(\"should move focus to the first tab when the right arrow key is pressed if currently on the last tab\", async () => {\n    const page = await newE2EPage({ html: testTabs });\n    const tab2 = await page.find('ic-tab[tab-id=\"ic-tab--2-context-default\"]');\n    await tab2.click();\n    await page.waitForChanges();\n    await page.keyboard.press(\"ArrowRight\");\n    await page.waitForChanges();\n    const activeElement = await page.evaluate(() => document.activeElement.id);\n    expect(activeElement).toEqual(\"ic-tab-0-context-default\");\n  });\n\n  it(\"should move focus to the last tab when the left arrow key is pressed if currently on the first tab\", async () => {\n    const page = await newE2EPage({ html: testTabs });\n    const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n    await tab0.click();\n    await page.waitForChanges();\n    await page.keyboard.press(\"ArrowLeft\");\n    await page.waitForChanges();\n    const activeElement = await page.evaluate(() => document.activeElement.id);\n    expect(activeElement).toEqual(\"ic-tab-2-context-default\");\n  });\n\n  it(\"should move focus to the first tab when the Home key is pressed\", async () => {\n    const page = await newE2EPage({ html: testTabs });\n    const tab2 = await page.find('ic-tab[tab-id=\"ic-tab--2-context-default\"]');\n    await tab2.click();\n    await page.waitForChanges();\n    await page.keyboard.press(\"Home\");\n    await page.waitForChanges();\n    const activeElement = await page.evaluate(() => document.activeElement.id);\n    expect(activeElement).toEqual(\"ic-tab-0-context-default\");\n  });\n\n  it(\"should move focus to the last tab when the End key is pressed\", async () => {\n    const page = await newE2EPage({ html: testTabs });\n    const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n    await tab0.click();\n    await page.waitForChanges();\n    await page.keyboard.press(\"End\");\n    await page.waitForChanges();\n    const activeElement = await page.evaluate(() => document.activeElement.id);\n    expect(activeElement).toEqual(\"ic-tab-2-context-default\");\n  });\n\n  it(\"should not allow a disabled tab to be selected\", async () => {\n    const page = await newE2EPage({\n      html: `\n    <ic-tab-context>\n      <ic-tab-group label=\"Tabs e2e label\">\n        <ic-tab>Tab 1</ic-tab>\n        <ic-tab disabled>Tab 2</ic-tab>\n        <ic-tab>Tab 3</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab panel 1</ic-tab-panel>\n      <ic-tab-panel>Tab panel 2</ic-tab-panel>\n      <ic-tab-panel>Tab panel 3</ic-tab-panel>\n    </ic-tab-context>\n    `,\n    });\n    const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n    await tab0.click();\n    await page.waitForChanges();\n    await page.keyboard.press(\"ArrowRight\");\n    await page.waitForChanges();\n    const activeElement = await page.evaluate(() => document.activeElement.id);\n    expect(activeElement).toEqual(\"ic-tab-2-context-default\");\n  });\n\n  it(\"should display the tab panels automatically using the arrow keys when using automatic activation\", async () => {\n    const page = await newE2EPage({ html: testTabs });\n    const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n    await tab0.click();\n    await page.waitForChanges();\n    await page.keyboard.press(\"ArrowRight\");\n    await page.waitForChanges();\n    const tabPanel0 = await page.find(\n      'ic-tab-panel[panel-id=\"ic-tab--0-context-default\"]'\n    );\n    const tabPanel1 = await page.find(\n      'ic-tab-panel[panel-id=\"ic-tab--1-context-default\"]'\n    );\n    const tabPanel2 = await page.find(\n      'ic-tab-panel[panel-id=\"ic-tab--2-context-default\"]'\n    );\n    expect(tabPanel0).toHaveAttribute(\"hidden\");\n    expect(tabPanel1).not.toHaveAttribute(\"hidden\");\n    expect(tabPanel2).toHaveAttribute(\"hidden\");\n  });\n\n  it(\"should not display the tab panels automatically using the arrow keys when using manual activation\", async () => {\n    const page = await newE2EPage({\n      html: `\n    <ic-tab-context activation-type=\"manual\">\n      <ic-tab-group label=\"Tabs e2e label\">\n        <ic-tab>Tab 1</ic-tab>\n        <ic-tab>Tab 2</ic-tab>\n        <ic-tab>Tab 3</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab panel 1</ic-tab-panel>\n      <ic-tab-panel>Tab panel 2</ic-tab-panel>\n      <ic-tab-panel>Tab panel 3</ic-tab-panel>\n    </ic-tab-context>\n    `,\n    });\n    const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n    await tab0.click();\n    await page.waitForChanges();\n    await page.keyboard.press(\"ArrowLeft\");\n    await page.waitForChanges();\n    const tabPanel0 = await page.find(\n      'ic-tab-panel[panel-id=\"ic-tab--0-context-default\"]'\n    );\n    const tabPanel1 = await page.find(\n      'ic-tab-panel[panel-id=\"ic-tab--1-context-default\"]'\n    );\n    const tabPanel2 = await page.find(\n      'ic-tab-panel[panel-id=\"ic-tab--2-context-default\"]'\n    );\n    expect(tabPanel0).not.toHaveAttribute(\"hidden\");\n    expect(tabPanel1).toHaveAttribute(\"hidden\");\n    expect(tabPanel2).toHaveAttribute(\"hidden\");\n  });\n\n  it(\"should set the selected tab in controlled mode to be the value that is passed in\", async () => {\n    const page = await newE2EPage({\n      html: `\n    <ic-tab-context selected-tab-index=\"1\">\n      <ic-tab-group label=\"Tabs e2e label\">\n        <ic-tab>Tab 1</ic-tab>\n        <ic-tab>Tab 2</ic-tab>\n        <ic-tab>Tab 3</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab panel 1</ic-tab-panel>\n      <ic-tab-panel>Tab panel 2</ic-tab-panel>\n      <ic-tab-panel>Tab panel 3</ic-tab-panel>\n    </ic-tab-context>\n    `,\n    });\n    const tabPanel1 = await page.find(\n      'ic-tab-panel[panel-id=\"ic-tab--1-context-default\"]'\n    );\n    expect(tabPanel1).not.toHaveAttribute(\"hidden\");\n  });\n\n  it(\"should call icTabSelect event in controlled mode when clicked\", async () => {\n    const page = await newE2EPage({\n      html: `\n    <ic-tab-context selected-tab-index=\"1\">\n      <ic-tab-group label=\"Tabs e2e label\">\n        <ic-tab>Tab 1</ic-tab>\n        <ic-tab>Tab 2</ic-tab>\n        <ic-tab>Tab 3</ic-tab>\n      </ic-tab-group>\n      <ic-tab-panel>Tab panel 1</ic-tab-panel>\n      <ic-tab-panel>Tab panel 2</ic-tab-panel>\n      <ic-tab-panel>Tab panel 3</ic-tab-panel>\n    </ic-tab-context>\n    `,\n    });\n    const tabs = await page.find(\"ic-tab-context\");\n    const tab1 = await page.find('ic-tab[tab-id=\"ic-tab--1-context-default\"]');\n    const tabSelect = await tabs.spyOnEvent(\"icTabSelect\");\n    await tab1.click();\n    await page.waitForChanges();\n    expect(tabSelect).toHaveReceivedEventDetail({\n      tabIndex: 1,\n    });\n  });\n\n  it(\"should move focus to next tab if focused tab is removed\", async () => {\n    const page = await newE2EPage({\n      html: `<ic-tab-context>\n          <ic-tab-group label=\"Example tab group\">\n            <ic-tab>One</ic-tab>\n            <ic-tab>Two</ic-tab>\n            <ic-tab>Three</ic-tab>\n          </ic-tab-group>\n          <ic-tab-panel>Tab One</ic-tab-panel>\n          <ic-tab-panel>Tab Two</ic-tab-panel>\n          <ic-tab-panel>Tab Three</ic-tab-panel>\n        </ic-tab-context>\n      `,\n    });\n\n    const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n    await tab0.click();\n    await page.waitForChanges();\n    await page.keyboard.press(\"ArrowRight\");\n    await page.waitForChanges();\n\n    let focusedTabId = await page.evaluate(() => document.activeElement.id);\n\n    expect(focusedTabId).toBe(\"ic-tab-1-context-default\");\n\n    await page.evaluate(() => {\n      const tabGroup = document.querySelector(\"ic-tab-group\");\n      const allTabs = tabGroup.querySelectorAll(\"ic-tab\");\n\n      const tabContext = document.querySelector(\"ic-tab-context\");\n      const allTabPanels = tabContext.querySelectorAll(\"ic-tab-panel\");\n\n      allTabs[allTabs.length - 2].remove();\n      allTabPanels[allTabPanels.length - 2].remove();\n    });\n\n    await waitForTimeout(250);\n\n    focusedTabId = await page.evaluate(() => document.activeElement.id);\n\n    expect(focusedTabId).toBe(\"ic-tab-1-context-default\");\n\n    const focusedTab = await page.find('ic-tab[id=\"ic-tab-1-context-default\"]');\n    const tabPanel = await page.find(\n      'ic-tab-panel[id*=\"ic-tab-panel-1-context-default\"]'\n    );\n\n    expect(focusedTab.textContent).toBe(\"Three\");\n    expect(tabPanel).not.toHaveAttribute(\"hidden\");\n  });\n\n  it(\"should move focus to first tab if last tab is focused and removed\", async () => {\n    const page = await newE2EPage({\n      html: `<ic-tab-context>\n          <ic-tab-group label=\"Example tab group\">\n            <ic-tab>One</ic-tab>\n            <ic-tab>Two</ic-tab>\n            <ic-tab>Three</ic-tab>\n          </ic-tab-group>\n          <ic-tab-panel>Tab One</ic-tab-panel>\n          <ic-tab-panel>Tab Two</ic-tab-panel>\n          <ic-tab-panel>Tab Three</ic-tab-panel>\n        </ic-tab-context>\n      `,\n    });\n\n    const tab0 = await page.find('ic-tab[tab-id=\"ic-tab--0-context-default\"]');\n    await tab0.click();\n    await page.waitForChanges();\n    await page.keyboard.press(\"ArrowRight\");\n    await page.waitForChanges();\n    await page.keyboard.press(\"ArrowRight\");\n    await page.waitForChanges();\n\n    let focusedTabId = await page.evaluate(() => document.activeElement.id);\n\n    expect(focusedTabId).toBe(\"ic-tab-2-context-default\");\n\n    await page.evaluate(() => {\n      const tabGroup = document.querySelector(\"ic-tab-group\");\n      const allTabs = tabGroup.querySelectorAll(\"ic-tab\");\n\n      const tabContext = document.querySelector(\"ic-tab-context\");\n      const allTabPanels = tabContext.querySelectorAll(\"ic-tab-panel\");\n\n      allTabs[allTabs.length - 1].remove();\n      allTabPanels[allTabPanels.length - 1].remove();\n    });\n\n    await waitForTimeout(250);\n\n    focusedTabId = await page.evaluate(() => document.activeElement.id);\n\n    expect(focusedTabId).toBe(\"ic-tab-0-context-default\");\n\n    const focusedTab = await page.find('ic-tab[id=\"ic-tab-0-context-default\"]');\n    const tabPanel = await page.find(\n      'ic-tab-panel[id*=\"ic-tab-panel-0-context-default\"]'\n    );\n\n    expect(focusedTab.textContent).toBe(\"One\");\n    expect(tabPanel).not.toHaveAttribute(\"hidden\");\n  });\n\n  it(\"should not trigger icTabSelect event in parent tab\", async () => {\n    const page = await newE2EPage({\n      html: `<ic-tab-context id='parent'>\n          <ic-tab-group label=\"Example tab group\">\n            <ic-tab>One</ic-tab>\n            <ic-tab>Two</ic-tab>\n            <ic-tab>Three</ic-tab>\n          </ic-tab-group>\n          <ic-tab-panel>\n            <ic-tab-context context-id='child' id='nested'>\n              <ic-tab-group label=\"Example tab group\">\n                <ic-tab>One</ic-tab>\n                <ic-tab>Two</ic-tab>\n                <ic-tab>Three</ic-tab>\n              </ic-tab-group>\n              <ic-tab-panel>Tab One</ic-tab-panel>\n              <ic-tab-panel>Tab Two</ic-tab-panel>\n              <ic-tab-panel>Tab Three</ic-tab-panel>\n            </ic-tab-context>\n          </ic-tab-panel>\n          <ic-tab-panel>Tab Two</ic-tab-panel>\n          <ic-tab-panel>Tab Three</ic-tab-panel>\n        </ic-tab-context>\n      `,\n    });\n\n    const mainTabs = await page.find('ic-tab-context[context-id=\"default\"]');\n    const nestedTabs = await page.find('ic-tab-context[context-id=\"child\"]');\n\n    const parentTabSelect = await mainTabs.spyOnEvent(\"icTabSelect\");\n    const nestedTabSelect = await nestedTabs.spyOnEvent(\"icTabSelect\");\n\n    const nestedTab1 = await page.find(\n      'ic-tab-panel[panel-id=\"ic-tab--0-context-default\"] ic-tab[tab-id=\"ic-tab--1-context-child\"]'\n    );\n\n    await nestedTab1.click();\n    await page.waitForChanges();\n\n    expect(parentTabSelect).not.toHaveReceivedEvent();\n    expect(nestedTabSelect).toHaveReceivedEventDetail({\n      tabIndex: 1,\n    });\n  });\n});\n"]}