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

package/dist/collection/components/ic-top-navigation/ic-top-navigation.mobile.e2e.js

@@ -0,0 +1,242 @@
+import { newE2EPage } from "@stencil/core/testing";
+const pageWidth = 640;
+const pageHeight = 480;
+const searchBarVisibleHeight = 40;
+const searchBarHiddenHeight = 0;
+describe("ic-top-navigation on mobile", () => {
+  it("renders", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName" status="alpha"
+    version="v0.0.7"></ic-top-navigation>`);
+    await page.setViewport({
+      width: pageWidth,
+      height: pageHeight,
+    });
+    const menuBtn = await page.find("ic-top-navigation >>> .menu-button-container ic-button");
+    expect(menuBtn).not.toBeNull();
+  });
+  it("should open and close menu", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName" status="alpha"
+    version="v0.0.7"></ic-top-navigation>`);
+    await page.setViewport({
+      width: pageWidth,
+      height: pageHeight,
+    });
+    const menuBtn = await page.find("ic-top-navigation >>> .menu-button-container ic-button");
+    expect(menuBtn).not.toBeNull();
+    const icNavigationMenuOpened = await page.spyOnEvent("icNavigationMenuOpened");
+    await menuBtn.click();
+    await page.waitForChanges();
+    let menu = await page.find("ic-top-navigation >>> ic-navigation-menu");
+    expect(menu).not.toBeNull();
+    expect(icNavigationMenuOpened).toHaveReceivedEvent();
+    const activeElId = await page.$eval("ic-top-navigation", (el) => {
+      const menu = el.shadowRoot.querySelector("ic-navigation-menu");
+      return menu.shadowRoot.activeElement.id;
+    });
+    expect(activeElId).toBe("menu-close-button");
+    const icNavigationMenuClosed = await page.spyOnEvent("icNavigationMenuClosed");
+    await page.evaluate(() => {
+      const navbar = document.querySelector("ic-top-navigation");
+      const menu = navbar.shadowRoot.querySelector("ic-navigation-menu");
+      const closeBtn = menu.shadowRoot.querySelector("ic-button");
+      closeBtn.click();
+    });
+    await page.waitForChanges();
+    menu = await page.find("ic-top-navigation >>> ic-navigation-menu");
+    expect(menu).toBeNull();
+    expect(icNavigationMenuClosed).toHaveReceivedEvent();
+  });
+  it("should close menu when nav item clicked", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName" status="alpha"
+    version="v0.0.7">
+      <ic-navigation-item
+        label="Navigation"
+        slot="navigation"
+      ></ic-navigation-item>
+    </ic-top-navigation>`);
+    await page.setViewport({
+      width: pageWidth,
+      height: pageHeight,
+    });
+    const menuBtn = await page.find("ic-top-navigation >>> .menu-button-container ic-button");
+    expect(menuBtn).not.toBeNull();
+    const icNavigationMenuOpened = await page.spyOnEvent("icNavigationMenuOpened");
+    await menuBtn.click();
+    await page.waitForChanges();
+    let menu = await page.find("ic-top-navigation >>> ic-navigation-menu");
+    expect(menu).not.toBeNull();
+    expect(icNavigationMenuOpened).toHaveReceivedEvent();
+    const icNavigationMenuClosed = await page.spyOnEvent("icNavigationMenuClosed");
+    const navItem = await page.find("ic-navigation-item");
+    await navItem.click();
+    await page.waitForChanges();
+    menu = await page.find("ic-top-navigation >>> ic-navigation-menu");
+    expect(menu).toBeNull();
+    expect(icNavigationMenuClosed).toHaveReceivedEvent();
+  });
+  it("should keep tab focus in menu - button as last el", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName" status="alpha"
+    version="v0.0.7">
+      <ic-navigation-button
+        label="button1"
+        slot="buttons"
+        onclick="alert('test')"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+          />
+        </svg>
+      </ic-navigation-button>
+    </ic-top-navigation>`);
+    await page.setViewport({
+      width: pageWidth,
+      height: pageHeight,
+    });
+    const menuBtn = await page.find("ic-top-navigation >>> .menu-button-container ic-button");
+    expect(menuBtn).not.toBeNull();
+    await menuBtn.click();
+    await page.waitForChanges();
+    const menu = await page.find("ic-top-navigation >>> ic-navigation-menu");
+    expect(menu).not.toBeNull();
+    let activeElId = await page.$eval("ic-top-navigation", (el) => {
+      const menu = el.shadowRoot.querySelector("ic-navigation-menu");
+      return menu.shadowRoot.activeElement.id;
+    });
+    expect(activeElId).toBe("menu-close-button");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    activeElId = await page.$eval("ic-navigation-button", (el) => {
+      const button = el.shadowRoot.querySelector("ic-button");
+      return button.shadowRoot.activeElement.getAttribute("aria-label");
+    });
+    expect(activeElId).toBe("button1");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    activeElId = await page.$eval("ic-top-navigation", (el) => {
+      const menu = el.shadowRoot.querySelector("ic-navigation-menu");
+      return menu.shadowRoot.activeElement.id;
+    });
+    expect(activeElId).toBe("menu-close-button");
+    page.keyboard.down("Shift");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    activeElId = await page.$eval("ic-navigation-button", (el) => {
+      const button = el.shadowRoot.querySelector("ic-button");
+      return button.shadowRoot.activeElement.getAttribute("aria-label");
+    });
+    expect(activeElId).toBe("button1");
+  });
+  it("should keep tab focus in menu - nav item as last el", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName" status="alpha"
+    version="v0.0.7">
+    <ic-navigation-item
+      label="Navigation"
+      href="/"
+      slot="navigation"
+    ></ic-navigation-item>  
+    </ic-top-navigation>`);
+    await page.setViewport({
+      width: pageWidth,
+      height: pageHeight,
+    });
+    const menuBtn = await page.find("ic-top-navigation >>> .menu-button-container ic-button");
+    expect(menuBtn).not.toBeNull();
+    await menuBtn.click();
+    await page.waitForChanges();
+    const menu = await page.find("ic-top-navigation >>> ic-navigation-menu");
+    expect(menu).not.toBeNull();
+    let activeElId = await page.$eval("ic-top-navigation", (el) => {
+      const menu = el.shadowRoot.querySelector("ic-navigation-menu");
+      return menu.shadowRoot.activeElement.id;
+    });
+    expect(activeElId).toBe("menu-close-button");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    activeElId = await page.$eval("ic-navigation-item", (el) => {
+      return el.shadowRoot.activeElement.textContent;
+    });
+    expect(activeElId).toBe("Navigation");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    activeElId = await page.$eval("ic-top-navigation", (el) => {
+      const menu = el.shadowRoot.querySelector("ic-navigation-menu");
+      return menu.shadowRoot.activeElement.id;
+    });
+    expect(activeElId).toBe("menu-close-button");
+    page.keyboard.down("Shift");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    activeElId = await page.$eval("ic-navigation-item", (el) => {
+      return el.shadowRoot.activeElement.textContent;
+    });
+    expect(activeElId).toBe("Navigation");
+  });
+  it("should toggle search bar when clicking on button", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName" status="alpha"
+    version="v0.0.7">
+    <ic-search-bar slot="search" label="Search" placeholder="Search" focusOnLoad="true"></ic-search-bar>
+    </ic-top-navigation>`);
+    await page.setViewport({
+      width: pageWidth,
+      height: pageHeight,
+    });
+    const searchBtn = await page.find("ic-top-navigation >>> .search-actions-container ic-button");
+    expect(searchBtn).not.toBeNull();
+    await searchBtn.click();
+    await page.waitForChanges();
+    let searchBarHeight = await page.$eval("ic-search-bar", (el) => {
+      return el.clientHeight;
+    });
+    expect(searchBarHeight).toBe(searchBarVisibleHeight);
+    await searchBtn.click();
+    await page.waitForChanges();
+    searchBarHeight = await page.$eval("ic-search-bar", (el) => {
+      return el.clientHeight;
+    });
+    expect(searchBarHeight).toBe(searchBarHiddenHeight);
+  });
+  it("should hide search bar when loses focus", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName" status="alpha"
+      version="v0.0.7">
+        <ic-search-bar slot="search" label="Search" placeholder="Search" focusOnLoad="true"></ic-search-bar>
+      </ic-top-navigation>
+      <span id='othercontent'>some other content</span>`);
+    await page.setViewport({
+      width: pageWidth,
+      height: pageHeight,
+    });
+    const searchBtn = await page.find("ic-top-navigation >>> .search-actions-container ic-button");
+    expect(searchBtn).not.toBeNull();
+    await searchBtn.click();
+    await page.waitForChanges();
+    let searchBarHeight = await page.$eval("ic-search-bar", (el) => {
+      return el.clientHeight;
+    });
+    expect(searchBarHeight).toBe(searchBarVisibleHeight);
+    // Test hides when another page element clicked
+    const spanEl = await page.find("#othercontent");
+    await spanEl.click();
+    await page.waitForChanges();
+    searchBarHeight = await page.$eval("ic-search-bar", (el) => {
+      return el.clientHeight;
+    });
+    expect(searchBarHeight).toBe(searchBarHiddenHeight);
+  });
+});
+//# sourceMappingURL=ic-top-navigation.mobile.e2e.js.map

package/dist/collection/components/ic-top-navigation/ic-top-navigation.mobile.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-top-navigation.mobile.e2e.js","sourceRoot":"","sources":["../../../src/components/ic-top-navigation/ic-top-navigation.mobile.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\nconst pageWidth = 640;\nconst pageHeight = 480;\nconst searchBarVisibleHeight = 40;\nconst searchBarHiddenHeight = 0;\n\ndescribe(\"ic-top-navigation on mobile\", () => {\n  it(\"renders\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\"></ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const menuBtn = await page.find(\n      \"ic-top-navigation >>> .menu-button-container ic-button\"\n    );\n    expect(menuBtn).not.toBeNull();\n  });\n\n  it(\"should open and close menu\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\"></ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const menuBtn = await page.find(\n      \"ic-top-navigation >>> .menu-button-container ic-button\"\n    );\n    expect(menuBtn).not.toBeNull();\n\n    const icNavigationMenuOpened = await page.spyOnEvent(\n      \"icNavigationMenuOpened\"\n    );\n    await menuBtn.click();\n    await page.waitForChanges();\n    let menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).not.toBeNull();\n    expect(icNavigationMenuOpened).toHaveReceivedEvent();\n\n    const activeElId = await page.$eval(\"ic-top-navigation\", (el) => {\n      const menu = el.shadowRoot.querySelector(\"ic-navigation-menu\");\n      return menu.shadowRoot.activeElement.id;\n    });\n\n    expect(activeElId).toBe(\"menu-close-button\");\n\n    const icNavigationMenuClosed = await page.spyOnEvent(\n      \"icNavigationMenuClosed\"\n    );\n\n    await page.evaluate(() => {\n      const navbar = document.querySelector(\"ic-top-navigation\");\n      const menu = navbar.shadowRoot.querySelector(\"ic-navigation-menu\");\n      const closeBtn = menu.shadowRoot.querySelector(\"ic-button\");\n      closeBtn.click();\n    });\n\n    await page.waitForChanges();\n    menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).toBeNull();\n    expect(icNavigationMenuClosed).toHaveReceivedEvent();\n  });\n\n  it(\"should close menu when nav item clicked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\">\n      <ic-navigation-item\n        label=\"Navigation\"\n        slot=\"navigation\"\n      ></ic-navigation-item>\n    </ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const menuBtn = await page.find(\n      \"ic-top-navigation >>> .menu-button-container ic-button\"\n    );\n    expect(menuBtn).not.toBeNull();\n\n    const icNavigationMenuOpened = await page.spyOnEvent(\n      \"icNavigationMenuOpened\"\n    );\n    await menuBtn.click();\n    await page.waitForChanges();\n\n    let menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).not.toBeNull();\n    expect(icNavigationMenuOpened).toHaveReceivedEvent();\n\n    const icNavigationMenuClosed = await page.spyOnEvent(\n      \"icNavigationMenuClosed\"\n    );\n\n    const navItem = await page.find(\"ic-navigation-item\");\n\n    await navItem.click();\n    await page.waitForChanges();\n\n    menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).toBeNull();\n    expect(icNavigationMenuClosed).toHaveReceivedEvent();\n  });\n\n  it(\"should keep tab focus in menu - button as last el\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\">\n      <ic-navigation-button\n        label=\"button1\"\n        slot=\"buttons\"\n        onclick=\"alert('test')\"\n      >\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n          />\n        </svg>\n      </ic-navigation-button>\n    </ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const menuBtn = await page.find(\n      \"ic-top-navigation >>> .menu-button-container ic-button\"\n    );\n    expect(menuBtn).not.toBeNull();\n\n    await menuBtn.click();\n    await page.waitForChanges();\n    const menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).not.toBeNull();\n\n    let activeElId = await page.$eval(\"ic-top-navigation\", (el) => {\n      const menu = el.shadowRoot.querySelector(\"ic-navigation-menu\");\n      return menu.shadowRoot.activeElement.id;\n    });\n\n    expect(activeElId).toBe(\"menu-close-button\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-navigation-button\", (el) => {\n      const button = el.shadowRoot.querySelector(\"ic-button\");\n      return button.shadowRoot.activeElement.getAttribute(\"aria-label\");\n    });\n\n    expect(activeElId).toBe(\"button1\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-top-navigation\", (el) => {\n      const menu = el.shadowRoot.querySelector(\"ic-navigation-menu\");\n      return menu.shadowRoot.activeElement.id;\n    });\n\n    expect(activeElId).toBe(\"menu-close-button\");\n\n    page.keyboard.down(\"Shift\");\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-navigation-button\", (el) => {\n      const button = el.shadowRoot.querySelector(\"ic-button\");\n      return button.shadowRoot.activeElement.getAttribute(\"aria-label\");\n    });\n\n    expect(activeElId).toBe(\"button1\");\n  });\n\n  it(\"should keep tab focus in menu - nav item as last el\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\">\n    <ic-navigation-item\n      label=\"Navigation\"\n      href=\"/\"\n      slot=\"navigation\"\n    ></ic-navigation-item>  \n    </ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const menuBtn = await page.find(\n      \"ic-top-navigation >>> .menu-button-container ic-button\"\n    );\n    expect(menuBtn).not.toBeNull();\n\n    await menuBtn.click();\n    await page.waitForChanges();\n    const menu = await page.find(\"ic-top-navigation >>> ic-navigation-menu\");\n    expect(menu).not.toBeNull();\n\n    let activeElId = await page.$eval(\"ic-top-navigation\", (el) => {\n      const menu = el.shadowRoot.querySelector(\"ic-navigation-menu\");\n      return menu.shadowRoot.activeElement.id;\n    });\n\n    expect(activeElId).toBe(\"menu-close-button\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-navigation-item\", (el) => {\n      return el.shadowRoot.activeElement.textContent;\n    });\n\n    expect(activeElId).toBe(\"Navigation\");\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-top-navigation\", (el) => {\n      const menu = el.shadowRoot.querySelector(\"ic-navigation-menu\");\n      return menu.shadowRoot.activeElement.id;\n    });\n\n    expect(activeElId).toBe(\"menu-close-button\");\n\n    page.keyboard.down(\"Shift\");\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    activeElId = await page.$eval(\"ic-navigation-item\", (el) => {\n      return el.shadowRoot.activeElement.textContent;\n    });\n\n    expect(activeElId).toBe(\"Navigation\");\n  });\n\n  it(\"should toggle search bar when clicking on button\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\">\n    <ic-search-bar slot=\"search\" label=\"Search\" placeholder=\"Search\" focusOnLoad=\"true\"></ic-search-bar>\n    </ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const searchBtn = await page.find(\n      \"ic-top-navigation >>> .search-actions-container ic-button\"\n    );\n    expect(searchBtn).not.toBeNull();\n\n    await searchBtn.click();\n    await page.waitForChanges();\n\n    let searchBarHeight = await page.$eval(\"ic-search-bar\", (el) => {\n      return el.clientHeight;\n    });\n\n    expect(searchBarHeight).toBe(searchBarVisibleHeight);\n\n    await searchBtn.click();\n    await page.waitForChanges();\n\n    searchBarHeight = await page.$eval(\"ic-search-bar\", (el) => {\n      return el.clientHeight;\n    });\n\n    expect(searchBarHeight).toBe(searchBarHiddenHeight);\n  });\n\n  it(\"should hide search bar when loses focus\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n      version=\"v0.0.7\">\n        <ic-search-bar slot=\"search\" label=\"Search\" placeholder=\"Search\" focusOnLoad=\"true\"></ic-search-bar>\n      </ic-top-navigation>\n      <span id='othercontent'>some other content</span>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    const searchBtn = await page.find(\n      \"ic-top-navigation >>> .search-actions-container ic-button\"\n    );\n    expect(searchBtn).not.toBeNull();\n\n    await searchBtn.click();\n    await page.waitForChanges();\n\n    let searchBarHeight = await page.$eval(\"ic-search-bar\", (el) => {\n      return el.clientHeight;\n    });\n\n    expect(searchBarHeight).toBe(searchBarVisibleHeight);\n\n    // Test hides when another page element clicked\n    const spanEl = await page.find(\"#othercontent\");\n    await spanEl.click();\n    await page.waitForChanges();\n\n    searchBarHeight = await page.$eval(\"ic-search-bar\", (el) => {\n      return el.clientHeight;\n    });\n\n    expect(searchBarHeight).toBe(searchBarHiddenHeight);\n  });\n});\n"]}

package/dist/collection/components/ic-top-navigation/ic-top-navigation.spec.js

@@ -0,0 +1,286 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { DEVICE_SIZES } from "../../utils/helpers";
+import { Button } from "../ic-button/ic-button";
+import { NavigationItem } from "../ic-navigation-item/ic-navigation-item";
+import { NavigationMenu } from "../ic-navigation-menu/ic-navigation-menu";
+import { SearchBar } from "../ic-search-bar/ic-search-bar";
+import { TopNavigation } from "./ic-top-navigation";
+import { TextField } from "../ic-text-field/ic-text-field";
+import { waitForTimeout } from "../../testspec.setup";
+const waitForSearchFocus = async () => {
+  //delay to account for 100ms delay in search bar focus
+  await waitForTimeout(200);
+};
+describe("ic-top-navigation", () => {
+  it("renders with app title", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation app-title="ApplicationName"></ic-top-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-app-title");
+  });
+  it("renders with app icon & title", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation app-title="ApplicationName">
+        <svg
+          slot="app-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+          />
+        </svg>
+      </ic-top-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-app-icon-and-title");
+  });
+  it("renders with custom title link url", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation app-title="ApplicationName" href="https://www.google.co.uk/">
+      </ic-top-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-custom-title-link-url");
+  });
+  it("renders with Title, Version & Status", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation
+        app-title="ApplicationName"
+        status="alpha"
+        version="v0.0.7"
+      ></ic-top-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-title-version-status");
+  });
+  it("renders with search", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation
+        app-title="ApplicationName"
+        status="alpha"
+        version="v0.0.7"
+      >
+      <ic-search-bar slot="search" label="Search" placeholder="Search">
+      </ic-top-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-search");
+  });
+  it("renders with buttons", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation
+        app-title="ApplicationName"
+        status="alpha"
+        version="v0.0.7"
+      >
+        <ic-navigation-button
+          label="button1"
+          slot="buttons"
+          onclick="alert('test')"
+        >
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+            />
+          </svg>
+        </ic-navigation-button>
+      </ic-top-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-buttons");
+  });
+  it("renders with navigation", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation, NavigationItem],
+      html: `<ic-top-navigation
+        app-title="ApplicationName"
+        status="alpha"
+        version="v0.0.7"
+      >
+        <ic-navigation-item label="Navigation 1" slot=navigation href="/"></ic-navigation-item>
+      </ic-top-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-navigation");
+  });
+  it("tests app title updates", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation app-title="ApplicationName"></ic-top-navigation>`,
+    });
+    const appTitle = await page.root.shadowRoot.querySelector("h1");
+    expect(appTitle.textContent).toEqual("ApplicationName");
+    page.root.appTitle = "New Application Name";
+    await page.waitForChanges();
+    expect(appTitle.textContent).toEqual("New Application Name");
+  });
+  it("tests form in search slot", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation app-title="ApplicationName">
+      <form role="search" slot="search">
+        <ic-search-bar slot="search" label="Search" placeholder="Search">
+        </ic-search-bar>
+      </form>
+      </ic-top-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("form-in-search-slot");
+  });
+  it("renders with slotted app-title content", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation
+        status="alpha"
+        version="v0.0.7"
+      >
+      <a slot="app-title" href="/">App Title</a>
+      </ic-top-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-slotted-app-title-content");
+  });
+  it("tests behaviour on small device", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation, Button, NavigationMenu, SearchBar, TextField],
+      html: `<ic-top-navigation
+      app-title="ApplicationName"
+      status="alpha"
+      version="v0.0.7"
+    >
+    <ic-search-bar label="Search" placeholder="Search" slot="search"></ic-search-bar>
+    </ic-top-navigation>`,
+    });
+    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    await page.waitForChanges();
+    let searchBtn = page.root.shadowRoot.querySelector("#search-toggle-button");
+    expect(searchBtn).not.toBeNull();
+    searchBtn.click();
+    await page.waitForChanges();
+    await waitForSearchFocus();
+    let menuButton = page.root.shadowRoot.querySelector("#menu-button");
+    expect(menuButton).not.toBeNull();
+    expect(page.rootInstance.searchButtonClick).toBe(false);
+    page.rootInstance.searchButtonMouseDownHandler();
+    expect(page.rootInstance.searchButtonClick).toBe(true);
+    searchBtn.click();
+    await page.waitForChanges();
+    await waitForSearchFocus();
+    expect(page.rootInstance.searchButtonClick).toBe(false);
+    menuButton.click();
+    await page.waitForChanges();
+    let menu = page.root.shadowRoot.querySelector("ic-navigation-menu");
+    expect(menu).not.toBeNull();
+    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);
+    await page.waitForChanges();
+    menu = page.root.shadowRoot.querySelector("ic-navigation-menu");
+    expect(menu).toBeNull();
+    searchBtn = page.root.shadowRoot.querySelector("#search-toggle-button");
+    expect(searchBtn).toBeNull();
+    menuButton = page.root.shadowRoot.querySelector("#menu-button");
+    expect(menuButton).toBeNull();
+  });
+  it("tests hiding of mobile search bar on resize", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation, Button, NavigationMenu, SearchBar, TextField],
+      html: `<ic-top-navigation
+      app-title="ApplicationName"
+      status="alpha"
+      version="v0.0.7"
+    >
+    <ic-search-bar label="Search" placeholder="Search" slot="search"></ic-search-bar>
+    </ic-top-navigation>`,
+    });
+    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    await page.waitForChanges();
+    const searchBtn = page.root.shadowRoot.querySelector("#search-toggle-button");
+    expect(searchBtn).not.toBeNull();
+    searchBtn.click();
+    await page.waitForChanges();
+    await waitForSearchFocus();
+    expect(page.rootInstance.mobileSearchBarVisible).toBe(true);
+    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);
+    await page.waitForChanges();
+    await waitForSearchFocus();
+    expect(page.rootInstance.mobileSearchBarVisible).toBe(false);
+  });
+  it("should test nav bar menu visibility", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation, Button, NavigationMenu, SearchBar, TextField],
+      html: `<ic-top-navigation
+      app-title="ApplicationName"
+      status="alpha"
+      version="v0.0.7"
+    >
+    <ic-search-bar label="Search" placeholder="Search" slot="search"></ic-search-bar>
+    </ic-top-navigation>`,
+    });
+    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    await page.waitForChanges();
+    const menuButton = page.root.shadowRoot.querySelector("#menu-button");
+    expect(menuButton).not.toBeNull();
+    expect(page.rootInstance.navMenuVisible).toBe(false);
+    menuButton.click();
+    await page.waitForChanges();
+    expect(page.rootInstance.navMenuVisible).toBe(true);
+    await page.rootInstance.navBarMenuCloseHandler();
+    await page.waitForChanges();
+    expect(page.rootInstance.navMenuVisible).toBe(false);
+  });
+  it("should test search value change", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation
+      app-title="ApplicationName"
+      status="alpha"
+      version="v0.0.7"
+    >
+    </ic-top-navigation>`,
+    });
+    //test search value change
+    await page.rootInstance.searchValueChangeHandler({
+      detail: { value: "hi!" },
+    });
+    expect(page.rootInstance.searchValue).toBe("hi!");
+    //test search input blur
+    page.rootInstance.mobileSearchBarVisible = true;
+    page.rootInstance.searchButtonClick = false;
+    await page.rootInstance.searchInputBlurHandler({
+      detail: { value: "hi again!" },
+    });
+    expect(page.rootInstance.searchValue).toBe("hi again!");
+  });
+  it("should test theme change", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation],
+      html: `<ic-top-navigation
+      app-title="ApplicationName"
+      status="alpha"
+      version="v0.0.7"
+    >
+    </ic-top-navigation>`,
+    });
+    await page.rootInstance.themeChangeHandler({ detail: { mode: "dark" } });
+    await page.waitForChanges();
+    expect(page.rootInstance.foregroundColor).toBe("dark");
+    await page.rootInstance.themeChangeHandler({ detail: { mode: "light" } });
+    await page.waitForChanges();
+    expect(page.rootInstance.foregroundColor).toBe("light");
+    //call runResizeObserver
+    await page.rootInstance.runResizeObserver();
+    //test disconnected callback
+    page.setContent("");
+  });
+});
+//# sourceMappingURL=ic-top-navigation.spec.js.map

package/dist/collection/components/ic-top-navigation/ic-top-navigation.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-top-navigation.spec.js","sourceRoot":"","sources":["../../../src/components/ic-top-navigation/ic-top-navigation.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DEVICE_SIZES } from \"../../utils/helpers\";\nimport { Button } from \"../ic-button/ic-button\";\nimport { NavigationItem } from \"../ic-navigation-item/ic-navigation-item\";\nimport { NavigationMenu } from \"../ic-navigation-menu/ic-navigation-menu\";\nimport { SearchBar } from \"../ic-search-bar/ic-search-bar\";\nimport { TopNavigation } from \"./ic-top-navigation\";\nimport { TextField } from \"../ic-text-field/ic-text-field\";\nimport { waitForTimeout } from \"../../testspec.setup\";\n\nconst waitForSearchFocus = async () => {\n  //delay to account for 100ms delay in search bar focus\n  await waitForTimeout(200);\n};\n\ndescribe(\"ic-top-navigation\", () => {\n  it(\"renders with app title\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation app-title=\"ApplicationName\"></ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-app-title\");\n  });\n\n  it(\"renders with app icon & title\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation app-title=\"ApplicationName\">\n        <svg\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n          />\n        </svg>\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-app-icon-and-title\");\n  });\n\n  it(\"renders with custom title link url\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation app-title=\"ApplicationName\" href=\"https://www.google.co.uk/\">\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-custom-title-link-url\");\n  });\n\n  it(\"renders with Title, Version & Status\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n        app-title=\"ApplicationName\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      ></ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-title-version-status\");\n  });\n\n  it(\"renders with search\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n        app-title=\"ApplicationName\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n      <ic-search-bar slot=\"search\" label=\"Search\" placeholder=\"Search\">\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-search\");\n  });\n\n  it(\"renders with buttons\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n        app-title=\"ApplicationName\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <ic-navigation-button\n          label=\"button1\"\n          slot=\"buttons\"\n          onclick=\"alert('test')\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path\n              d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n            />\n          </svg>\n        </ic-navigation-button>\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-buttons\");\n  });\n\n  it(\"renders with navigation\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation, NavigationItem],\n      html: `<ic-top-navigation\n        app-title=\"ApplicationName\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <ic-navigation-item label=\"Navigation 1\" slot=navigation href=\"/\"></ic-navigation-item>\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-navigation\");\n  });\n\n  it(\"tests app title updates\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation app-title=\"ApplicationName\"></ic-top-navigation>`,\n    });\n    const appTitle = await page.root.shadowRoot.querySelector(\"h1\");\n\n    expect(appTitle.textContent).toEqual(\"ApplicationName\");\n    page.root.appTitle = \"New Application Name\";\n    await page.waitForChanges();\n\n    expect(appTitle.textContent).toEqual(\"New Application Name\");\n  });\n\n  it(\"tests form in search slot\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation app-title=\"ApplicationName\">\n      <form role=\"search\" slot=\"search\">\n        <ic-search-bar slot=\"search\" label=\"Search\" placeholder=\"Search\">\n        </ic-search-bar>\n      </form>\n      </ic-top-navigation>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"form-in-search-slot\");\n  });\n\n  it(\"renders with slotted app-title content\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n      <a slot=\"app-title\" href=\"/\">App Title</a>\n      </ic-top-navigation>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-slotted-app-title-content\");\n  });\n\n  it(\"tests behaviour on small device\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation, Button, NavigationMenu, SearchBar, TextField],\n      html: `<ic-top-navigation\n      app-title=\"ApplicationName\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n    >\n    <ic-search-bar label=\"Search\" placeholder=\"Search\" slot=\"search\"></ic-search-bar>\n    </ic-top-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    await page.waitForChanges();\n\n    let searchBtn = page.root.shadowRoot.querySelector(\n      \"#search-toggle-button\"\n    ) as HTMLElement;\n    expect(searchBtn).not.toBeNull();\n\n    searchBtn.click();\n    await page.waitForChanges();\n    await waitForSearchFocus();\n\n    let menuButton = page.root.shadowRoot.querySelector(\n      \"#menu-button\"\n    ) as HTMLElement;\n    expect(menuButton).not.toBeNull();\n    expect(page.rootInstance.searchButtonClick).toBe(false);\n    page.rootInstance.searchButtonMouseDownHandler();\n    expect(page.rootInstance.searchButtonClick).toBe(true);\n\n    searchBtn.click();\n    await page.waitForChanges();\n    await waitForSearchFocus();\n    expect(page.rootInstance.searchButtonClick).toBe(false);\n\n    menuButton.click();\n    await page.waitForChanges();\n\n    let menu = page.root.shadowRoot.querySelector(\"ic-navigation-menu\");\n    expect(menu).not.toBeNull();\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);\n    await page.waitForChanges();\n\n    menu = page.root.shadowRoot.querySelector(\"ic-navigation-menu\");\n    expect(menu).toBeNull();\n\n    searchBtn = page.root.shadowRoot.querySelector(\n      \"#search-toggle-button\"\n    ) as HTMLElement;\n    expect(searchBtn).toBeNull();\n    menuButton = page.root.shadowRoot.querySelector(\n      \"#menu-button\"\n    ) as HTMLElement;\n    expect(menuButton).toBeNull();\n  });\n\n  it(\"tests hiding of mobile search bar on resize\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation, Button, NavigationMenu, SearchBar, TextField],\n      html: `<ic-top-navigation\n      app-title=\"ApplicationName\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n    >\n    <ic-search-bar label=\"Search\" placeholder=\"Search\" slot=\"search\"></ic-search-bar>\n    </ic-top-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    await page.waitForChanges();\n    const searchBtn = page.root.shadowRoot.querySelector(\n      \"#search-toggle-button\"\n    ) as HTMLElement;\n    expect(searchBtn).not.toBeNull();\n\n    searchBtn.click();\n    await page.waitForChanges();\n    await waitForSearchFocus();\n    expect(page.rootInstance.mobileSearchBarVisible).toBe(true);\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);\n    await page.waitForChanges();\n    await waitForSearchFocus();\n    expect(page.rootInstance.mobileSearchBarVisible).toBe(false);\n  });\n\n  it(\"should test nav bar menu visibility\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation, Button, NavigationMenu, SearchBar, TextField],\n      html: `<ic-top-navigation\n      app-title=\"ApplicationName\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n    >\n    <ic-search-bar label=\"Search\" placeholder=\"Search\" slot=\"search\"></ic-search-bar>\n    </ic-top-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    await page.waitForChanges();\n\n    const menuButton = page.root.shadowRoot.querySelector(\n      \"#menu-button\"\n    ) as HTMLElement;\n    expect(menuButton).not.toBeNull();\n    expect(page.rootInstance.navMenuVisible).toBe(false);\n    menuButton.click();\n    await page.waitForChanges();\n    expect(page.rootInstance.navMenuVisible).toBe(true);\n    await page.rootInstance.navBarMenuCloseHandler();\n    await page.waitForChanges();\n    expect(page.rootInstance.navMenuVisible).toBe(false);\n  });\n\n  it(\"should test search value change\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n      app-title=\"ApplicationName\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n    >\n    </ic-top-navigation>`,\n    });\n\n    //test search value change\n    await page.rootInstance.searchValueChangeHandler({\n      detail: { value: \"hi!\" },\n    });\n    expect(page.rootInstance.searchValue).toBe(\"hi!\");\n\n    //test search input blur\n    page.rootInstance.mobileSearchBarVisible = true;\n    page.rootInstance.searchButtonClick = false;\n    await page.rootInstance.searchInputBlurHandler({\n      detail: { value: \"hi again!\" },\n    });\n    expect(page.rootInstance.searchValue).toBe(\"hi again!\");\n  });\n\n  it(\"should test theme change\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation],\n      html: `<ic-top-navigation\n      app-title=\"ApplicationName\"\n      status=\"alpha\"\n      version=\"v0.0.7\"\n    >\n    </ic-top-navigation>`,\n    });\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n    expect(page.rootInstance.foregroundColor).toBe(\"dark\");\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"light\" } });\n    await page.waitForChanges();\n    expect(page.rootInstance.foregroundColor).toBe(\"light\");\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n\n    //test disconnected callback\n    page.setContent(\"\");\n  });\n});\n"]}

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

@@ -0,0 +1,36 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("ic-typograpghy", () => {
+  it("should test truncation", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-typography max-lines="3">
+      Body of text that is truncated to three lines. Click the 'See more' link to
+      expand the text, then click 'See less' to truncate the text once more!
+      <br>
+      This is the text that should appear on a second line but may extend further depending on the viewport size.
+      <br>
+      And this text should be on a third line.
+    </ic-typography>`);
+    await page.waitForChanges();
+    await page.setViewport({
+      width: 640,
+      height: 480,
+    });
+    let truncBtn = await page.find("ic-typography >>> button.trunc-btn");
+    let btnText = truncBtn.innerText;
+    expect(truncBtn).not.toBeNull();
+    expect(btnText).toBe("See more");
+    truncBtn.click();
+    await page.waitForChanges();
+    btnText = truncBtn.innerText;
+    expect(btnText).toBe("See less");
+    await page.waitForChanges();
+    await page.setViewport({
+      width: 1600,
+      height: 480,
+    });
+    await page.waitForChanges();
+    truncBtn = await page.find("ic-typography >>> button.trunc-btn");
+    expect(truncBtn).toBeNull();
+  });
+});
+//# sourceMappingURL=ic-typography.e2e.js.map