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

package/dist/collection/components/ic-back-to-top/ic-back-to-top.spec.js

@@ -0,0 +1,123 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ClassificationBanner } from "../ic-classification-banner/ic-classification-banner";
+import { Footer } from "../ic-footer/ic-footer";
+import { BackToTop } from "./ic-back-to-top";
+beforeAll(() => {
+  // IntersectionObserver isn't available in test environment
+  const mockIntersectionObserver = jest.fn();
+  mockIntersectionObserver.mockReturnValue({
+    observe: jest.fn().mockReturnValue(null),
+    unobserve: jest.fn().mockReturnValue(null),
+    disconnect: jest.fn().mockReturnValue(null),
+  });
+  Object.defineProperty(global, "IntersectionObserver", {
+    value: mockIntersectionObserver,
+  });
+});
+describe("ic-back-to-top", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [BackToTop],
+      html: `<div id="topEl"><ic-back-to-top target="topEl"></ic-back-to-top></div>`,
+    });
+    expect(page.root).toMatchSnapshot("should render");
+  });
+  it("should render with footer", async () => {
+    const page = await newSpecPage({
+      components: [BackToTop, Footer],
+      html: `<div id="topEl"><ic-back-to-top target="topEl"></ic-back-to-top></div><ic-footer></ic-footer>`,
+    });
+    expect(page.root).toMatchSnapshot("should render with footer");
+  });
+  it("should render with no targetId set", async () => {
+    jest.spyOn(console, "error").mockImplementation(jest.fn());
+    const page = await newSpecPage({
+      components: [BackToTop],
+      html: `<ic-back-to-top></ic-back-to-top>`,
+    });
+    expect(page.root).toMatchSnapshot("should render with no targetId set");
+  });
+  it("should render when target starts with #", async () => {
+    const page = await newSpecPage({
+      components: [BackToTop],
+      html: `<div id="topEl"><ic-back-to-top target="#topEl"></ic-back-to-top></div>`,
+    });
+    expect(page.root).toMatchSnapshot("should render when target starts with #");
+  });
+  it("should offset due to classification banner", async () => {
+    const page = await newSpecPage({
+      components: [BackToTop, ClassificationBanner],
+      html: `<div id="topEl"><ic-back-to-top target="topEl"></ic-back-to-top><ic-classification-banner></ic-classification-banner></div>`,
+    });
+    expect(page.rootInstance.bannerOffset).toBe(true);
+  });
+  it("should scroll to 0,0 if target is null", async () => {
+    jest.spyOn(console, "error").mockImplementation(jest.fn());
+    const page = await newSpecPage({
+      components: [BackToTop],
+      html: `<div id="topEl"><ic-back-to-top></ic-back-to-top></div>`,
+    });
+    expect(page.rootInstance.isTargetElNull).toBe(true);
+    page.root.shadowRoot.querySelector("button").click();
+    expect(page.win.screenX).toBe(0);
+    expect(page.win.screenY).toBe(0);
+  });
+  it("should scroll targetEl into view", async () => {
+    const page = await newSpecPage({
+      components: [BackToTop],
+      html: `<div id="topEl"><ic-back-to-top target="topEl"></ic-back-to-top></div>`,
+    });
+    page.root.shadowRoot.querySelector("button").click();
+    expect(page.rootInstance.targetElVisible).toBe(true);
+  });
+  it("should return null targetElement when there's no target matching that given in back to top", async () => {
+    jest.spyOn(console, "error").mockImplementation(jest.fn());
+    const page = await newSpecPage({
+      components: [BackToTop],
+      html: `<div><ic-back-to-top target="topEl"></ic-back-to-top></div>`,
+    });
+    const findTarget = page.rootInstance.findTargetEl("topEl");
+    expect(findTarget).toBeNull();
+  });
+  it("should stop observing observedEl when topObserver exists", async () => {
+    const page = await newSpecPage({
+      components: [BackToTop],
+      html: `<div id="topEl"><ic-back-to-top target="topEl"></ic-back-to-top></div>`,
+    });
+    page.rootInstance.watchPropHandler(undefined, "topEl");
+    page.rootInstance.createTopObserver("topEl");
+    expect(page.rootInstance.topObserver).not.toBeNull();
+  });
+  it("should set footerVisible", async () => {
+    const page = await newSpecPage({
+      components: [BackToTop],
+      html: `<div id="topEl"><ic-back-to-top target="topEl"></ic-back-to-top></div>`,
+    });
+    page.rootInstance.footerObserverCallback([{ isIntersecting: true }]);
+    //value is false as scrollY is always 0
+    expect(page.rootInstance.footerVisible).toBe(false);
+    page.rootInstance.footerObserverCallback([{ isIntersecting: false }]);
+    expect(page.rootInstance.footerVisible).toBe(false);
+  });
+  it("should set targetElVisible", async () => {
+    const page = await newSpecPage({
+      components: [BackToTop],
+      html: `<div id="topEl"><ic-back-to-top target="topEl"></ic-back-to-top></div>`,
+    });
+    page.rootInstance.targetElObserverCallback([{ isIntersecting: true }]);
+    expect(page.rootInstance.targetElVisible).toBe(true);
+    page.rootInstance.targetElObserverCallback([{ isIntersecting: false }]);
+    expect(page.rootInstance.targetElVisible).toBe(false);
+  });
+  it("should test update of target from undefined to value", async () => {
+    jest.spyOn(console, "error").mockImplementation(jest.fn());
+    const page = await newSpecPage({
+      components: [BackToTop],
+      html: `<div id="topEl"><ic-back-to-top></ic-back-to-top></div>`,
+    });
+    page.root.target = "topEl";
+    await page.waitForChanges();
+    expect(page.rootInstance.target).toBe("topEl");
+  });
+});
+//# sourceMappingURL=ic-back-to-top.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-back-to-top.spec.js","sourceRoot":"","sources":["../../../src/components/ic-back-to-top/ic-back-to-top.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { ClassificationBanner } from \"../ic-classification-banner/ic-classification-banner\";\nimport { Footer } from \"../ic-footer/ic-footer\";\nimport { BackToTop } from \"./ic-back-to-top\";\n\nbeforeAll(() => {\n  // IntersectionObserver isn't available in test environment\n  const mockIntersectionObserver = jest.fn();\n  mockIntersectionObserver.mockReturnValue({\n    observe: jest.fn().mockReturnValue(null),\n    unobserve: jest.fn().mockReturnValue(null),\n    disconnect: jest.fn().mockReturnValue(null),\n  });\n\n  Object.defineProperty(global, \"IntersectionObserver\", {\n    value: mockIntersectionObserver,\n  });\n});\n\ndescribe(\"ic-back-to-top\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render\");\n  });\n\n  it(\"should render with footer\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop, Footer],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div><ic-footer></ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with footer\");\n  });\n\n  it(\"should render with no targetId set\", async () => {\n    jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<ic-back-to-top></ic-back-to-top>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with no targetId set\");\n  });\n\n  it(\"should render when target starts with #\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"#topEl\"></ic-back-to-top></div>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render when target starts with #\"\n    );\n  });\n\n  it(\"should offset due to classification banner\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop, ClassificationBanner],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top><ic-classification-banner></ic-classification-banner></div>`,\n    });\n\n    expect(page.rootInstance.bannerOffset).toBe(true);\n  });\n\n  it(\"should scroll to 0,0 if target is null\", async () => {\n    jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top></ic-back-to-top></div>`,\n    });\n\n    expect(page.rootInstance.isTargetElNull).toBe(true);\n\n    page.root.shadowRoot.querySelector(\"button\").click();\n    expect(page.win.screenX).toBe(0);\n    expect(page.win.screenY).toBe(0);\n  });\n\n  it(\"should scroll targetEl into view\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    page.root.shadowRoot.querySelector(\"button\").click();\n    expect(page.rootInstance.targetElVisible).toBe(true);\n  });\n\n  it(\"should return null targetElement when there's no target matching that given in back to top\", async () => {\n    jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    const findTarget = page.rootInstance.findTargetEl(\"topEl\");\n\n    expect(findTarget).toBeNull();\n  });\n\n  it(\"should stop observing observedEl when topObserver exists\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    page.rootInstance.watchPropHandler(undefined, \"topEl\");\n    page.rootInstance.createTopObserver(\"topEl\");\n    expect(page.rootInstance.topObserver).not.toBeNull();\n  });\n\n  it(\"should set footerVisible\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    page.rootInstance.footerObserverCallback([{ isIntersecting: true }]);\n    //value is false as scrollY is always 0\n    expect(page.rootInstance.footerVisible).toBe(false);\n\n    page.rootInstance.footerObserverCallback([{ isIntersecting: false }]);\n    expect(page.rootInstance.footerVisible).toBe(false);\n  });\n\n  it(\"should set targetElVisible\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    page.rootInstance.targetElObserverCallback([{ isIntersecting: true }]);\n    expect(page.rootInstance.targetElVisible).toBe(true);\n\n    page.rootInstance.targetElObserverCallback([{ isIntersecting: false }]);\n    expect(page.rootInstance.targetElVisible).toBe(false);\n  });\n\n  it(\"should test update of target from undefined to value\", async () => {\n    jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top></ic-back-to-top></div>`,\n    });\n\n    page.root.target = \"topEl\";\n    await page.waitForChanges();\n\n    expect(page.rootInstance.target).toBe(\"topEl\");\n  });\n});\n"]}

package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.spec.js

@@ -0,0 +1,118 @@
+import { Breadcrumb } from "./ic-breadcrumb";
+import { newSpecPage } from "@stencil/core/testing";
+describe("ic-breadcrumb", () => {
+  it("renders", async () => {
+    const page = await newSpecPage({
+      components: [Breadcrumb],
+      html: `<ic-breadcrumb></ic-breadcrumb>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-breadcrumb role="listitem">
+        <mock:shadow-root>
+          <div class="breadcrumb">
+            <span aria-hidden="true" class="chevron">
+              svg
+            </span>
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </ic-breadcrumb>
+    `);
+  });
+  it("renders with page-title and href", async () => {
+    const page = await newSpecPage({
+      components: [Breadcrumb],
+      html: `<ic-breadcrumb page-title="foo" href="/"></ic-breadcrumb>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-breadcrumb href="/" page-title="foo" role="listitem">
+        <mock:shadow-root>
+          <div class="breadcrumb">
+            <span aria-hidden="true" class="chevron">
+              svg
+            </span>
+            <ic-link class="breadcrumb-link" href="/">
+              foo
+            </ic-link>
+          </div>
+        </mock:shadow-root>
+      </ic-breadcrumb>
+    `);
+  });
+  it("renders with page-title, href, current", async () => {
+    const page = await newSpecPage({
+      components: [Breadcrumb],
+      html: `<ic-breadcrumb page-title="foo" href="/" current="true"></ic-breadcrumb>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-breadcrumb current="true" href="/" page-title="foo" role="listitem" aria-current="page">
+        <mock:shadow-root>
+          <div class="breadcrumb">
+            <span aria-hidden="true" class="chevron">
+              svg
+            </span>
+            <span class="current-page-container">
+              foo
+            </span>
+          </div>
+        </mock:shadow-root>
+      </ic-breadcrumb>
+    `);
+  });
+  it("renders with icon", async () => {
+    const page = await newSpecPage({
+      components: [Breadcrumb],
+      html: `
+      <ic-breadcrumb page-title="foo" href="/" current="true">
+        <svg
+          slot="icon"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </ic-breadcrumb>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-breadcrumb current="true" href="/" page-title="foo" aria-current="page" role="listitem">
+        <mock:shadow-root>
+          <div class="breadcrumb">
+            <span aria-hidden="true" class="chevron">
+              svg
+            </span>
+            <span class="current-page-container">
+              <slot name="icon"></slot>
+              foo
+            </span>
+          </div>
+        </mock:shadow-root>
+        <svg fill="none" height="24" slot="icon" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z" fill="currentColor"></path>
+        </svg>
+      </ic-breadcrumb>
+    `);
+  });
+  it("should add the 'current-page' class when current prop is true", async () => {
+    const page = await newSpecPage({
+      components: [Breadcrumb],
+      html: "<ic-breadcrumb id='ic-breadcrumb' current=true><ic-link href='/'>Link</ic-link></ic-breadcrumb>",
+    });
+    await page.rootInstance.setSlottedCurrentPageClass();
+    expect(document.querySelector("ic-breadcrumb").classList.contains("current-page")).toBeTruthy;
+  });
+  it("should call 'setFocus' when breadcrumb is focused", async () => {
+    const page = await newSpecPage({
+      components: [Breadcrumb],
+      html: `<ic-breadcrumb></ic-breadcrumb>`,
+    });
+    //Can't expect anything in this test - this is to increase code coverage only
+    await page.rootInstance.setFocus().toHaveBeenCalled;
+  });
+});
+//# sourceMappingURL=ic-breadcrumb.spec.js.map

package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-breadcrumb.spec.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb/ic-breadcrumb.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;EAC7B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,iCAAiC;KACxC,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;IAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,2DAA2D;KAClE,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;KAa7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;IACtD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,0EAA0E;KACjF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;KAa7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mBAAmB,EAAE,KAAK,IAAI,EAAE;IACjC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;;;;;;uBAeW;KAClB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;KAiB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,+DAA+D,EAAE,KAAK,IAAI,EAAE;IAC7E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,iGAAiG;KACxG,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,YAAY,CAAC,0BAA0B,EAAE,CAAC;IAErD,MAAM,CACJ,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,CAC3E,CAAC,UAAU,CAAC;EACf,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;IACjE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,iCAAiC;KACxC,CAAC,CAAC;IAEH,6EAA6E;IAC7E,MAAM,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,gBAAgB,CAAC;EACtD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { Breadcrumb } from \"./ic-breadcrumb\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-breadcrumb\", () => {\n  it(\"renders\", async () => {\n    const page = await newSpecPage({\n      components: [Breadcrumb],\n      html: `<ic-breadcrumb></ic-breadcrumb>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-breadcrumb role=\"listitem\">\n        <mock:shadow-root>\n          <div class=\"breadcrumb\">\n            <span aria-hidden=\"true\" class=\"chevron\">\n              svg\n            </span>\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </ic-breadcrumb>\n    `);\n  });\n\n  it(\"renders with page-title and href\", async () => {\n    const page = await newSpecPage({\n      components: [Breadcrumb],\n      html: `<ic-breadcrumb page-title=\"foo\" href=\"/\"></ic-breadcrumb>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-breadcrumb href=\"/\" page-title=\"foo\" role=\"listitem\">\n        <mock:shadow-root>\n          <div class=\"breadcrumb\">\n            <span aria-hidden=\"true\" class=\"chevron\">\n              svg\n            </span>\n            <ic-link class=\"breadcrumb-link\" href=\"/\">\n              foo\n            </ic-link>\n          </div>\n        </mock:shadow-root>\n      </ic-breadcrumb>\n    `);\n  });\n\n  it(\"renders with page-title, href, current\", async () => {\n    const page = await newSpecPage({\n      components: [Breadcrumb],\n      html: `<ic-breadcrumb page-title=\"foo\" href=\"/\" current=\"true\"></ic-breadcrumb>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-breadcrumb current=\"true\" href=\"/\" page-title=\"foo\" role=\"listitem\" aria-current=\"page\">\n        <mock:shadow-root>\n          <div class=\"breadcrumb\">\n            <span aria-hidden=\"true\" class=\"chevron\">\n              svg\n            </span>\n            <span class=\"current-page-container\">\n              foo\n            </span>\n          </div>\n        </mock:shadow-root>\n      </ic-breadcrumb>\n    `);\n  });\n\n  it(\"renders with icon\", async () => {\n    const page = await newSpecPage({\n      components: [Breadcrumb],\n      html: `\n      <ic-breadcrumb page-title=\"foo\" href=\"/\" current=\"true\">\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </ic-breadcrumb>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-breadcrumb current=\"true\" href=\"/\" page-title=\"foo\" aria-current=\"page\" role=\"listitem\">\n        <mock:shadow-root>\n          <div class=\"breadcrumb\">\n            <span aria-hidden=\"true\" class=\"chevron\">\n              svg\n            </span>\n            <span class=\"current-page-container\">\n              <slot name=\"icon\"></slot>\n              foo\n            </span>\n          </div>\n        </mock:shadow-root>\n        <svg fill=\"none\" height=\"24\" slot=\"icon\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\" fill=\"currentColor\"></path>\n        </svg>\n      </ic-breadcrumb>\n    `);\n  });\n\n  it(\"should add the 'current-page' class when current prop is true\", async () => {\n    const page = await newSpecPage({\n      components: [Breadcrumb],\n      html: \"<ic-breadcrumb id='ic-breadcrumb' current=true><ic-link href='/'>Link</ic-link></ic-breadcrumb>\",\n    });\n\n    await page.rootInstance.setSlottedCurrentPageClass();\n\n    expect(\n      document.querySelector(\"ic-breadcrumb\").classList.contains(\"current-page\")\n    ).toBeTruthy;\n  });\n\n  it(\"should call 'setFocus' when breadcrumb is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Breadcrumb],\n      html: `<ic-breadcrumb></ic-breadcrumb>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n});\n"]}

package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.e2e.js

@@ -0,0 +1,41 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { icBreadcrumbGroupCollapsed, icBreadcrumbGroupBack, } from "./ic-breadcrumb-group-test-examples";
+describe("ic-breadcrumb-group", () => {
+  it("displays collapsed breadcrumbs", async () => {
+    const page = await newE2EPage();
+    await page.setContent(icBreadcrumbGroupCollapsed);
+    await page.waitForChanges();
+    let visibleBreadcrumbs = await page.evaluate(() => {
+      return Array.from(document.querySelectorAll("ic-breadcrumb:not(.collapsed-breadcrumb-wrapper")).filter((b) => getComputedStyle(b).display !== "none").length;
+    });
+    expect(visibleBreadcrumbs).toBe(2);
+    const btn = await page.find("ic-breadcrumb.collapsed-breadcrumb-wrapper button");
+    expect(btn).not.toBeNull();
+    await btn.click();
+    await page.waitForChanges();
+    visibleBreadcrumbs = await page.evaluate(() => {
+      return Array.from(document.querySelectorAll("ic-breadcrumb:not(.collapsed-breadcrumb-wrapper")).filter((b) => getComputedStyle(b).display !== "none").length;
+    });
+    expect(visibleBreadcrumbs).toBe(3);
+  });
+  it("renders aria elements when back-breadcrumb-only is set", async () => {
+    const page = await newE2EPage();
+    await page.setContent(icBreadcrumbGroupBack);
+    await page.waitForChanges();
+    const describedbySpan = await page.find("ic-breadcrumb-group ic-breadcrumb[show-back-icon] >>> span.hide");
+    const icLinkNestedATag = await page.$eval("ic-breadcrumb-group", (el) => {
+      const nestedATag = el
+        .querySelector("ic-breadcrumb[show-back-icon]")
+        .shadowRoot.querySelector("ic-link")
+        .shadowRoot.querySelector("a");
+      return {
+        ariaDescribedBy: nestedATag.getAttribute("aria-describedby"),
+      };
+    });
+    expect(describedbySpan).not.toBeNull();
+    expect(describedbySpan.id).toBe("breadcrumb-2-describedby");
+    expect(icLinkNestedATag.ariaDescribedBy).toBeTruthy();
+    expect(icLinkNestedATag.ariaDescribedBy).toBe("breadcrumb-2-describedby");
+  });
+});
+//# sourceMappingURL=ic-breadcrumb-group.e2e.js.map

package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-breadcrumb-group.e2e.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb-group/ic-breadcrumb-group.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EACL,0BAA0B,EAC1B,qBAAqB,GACtB,MAAM,qCAAqC,CAAC;AAE7C,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;EACnC,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,0BAA0B,CAAC,CAAC;IAClD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,IAAI,kBAAkB,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MAChD,OAAO,KAAK,CAAC,IAAI,CACf,QAAQ,CAAC,gBAAgB,CACvB,iDAAiD,CAClD,CACF,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,MAAM,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAEnC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,IAAI,CACzB,mDAAmD,CACpD,CAAC;IAEF,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAE3B,MAAM,GAAG,CAAC,KAAK,EAAE,CAAC;IAElB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,kBAAkB,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MAC5C,OAAO,KAAK,CAAC,IAAI,CACf,QAAQ,CAAC,gBAAgB,CACvB,iDAAiD,CAClD,CACF,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,MAAM,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;EACrC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;IACtE,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAC7C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,IAAI,CACrC,iEAAiE,CAClE,CAAC;IAEF,MAAM,gBAAgB,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC,EAAE,EAAE,EAAE;MACtE,MAAM,UAAU,GAAG,EAAE;SAClB,aAAa,CAAC,+BAA+B,CAAC;SAC9C,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC;SACnC,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;MAEjC,OAAO;QACL,eAAe,EAAE,UAAU,CAAC,YAAY,CAAC,kBAAkB,CAAC;OAC7D,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IACvC,MAAM,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;IAE5D,MAAM,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,UAAU,EAAE,CAAC;IACtD,MAAM,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;EAC5E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\nimport {\n  icBreadcrumbGroupCollapsed,\n  icBreadcrumbGroupBack,\n} from \"./ic-breadcrumb-group-test-examples\";\n\ndescribe(\"ic-breadcrumb-group\", () => {\n  it(\"displays collapsed breadcrumbs\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(icBreadcrumbGroupCollapsed);\n    await page.waitForChanges();\n\n    let visibleBreadcrumbs = await page.evaluate(() => {\n      return Array.from(\n        document.querySelectorAll(\n          \"ic-breadcrumb:not(.collapsed-breadcrumb-wrapper\"\n        )\n      ).filter((b) => getComputedStyle(b).display !== \"none\").length;\n    });\n\n    expect(visibleBreadcrumbs).toBe(2);\n\n    const btn = await page.find(\n      \"ic-breadcrumb.collapsed-breadcrumb-wrapper button\"\n    );\n\n    expect(btn).not.toBeNull();\n\n    await btn.click();\n\n    await page.waitForChanges();\n\n    visibleBreadcrumbs = await page.evaluate(() => {\n      return Array.from(\n        document.querySelectorAll(\n          \"ic-breadcrumb:not(.collapsed-breadcrumb-wrapper\"\n        )\n      ).filter((b) => getComputedStyle(b).display !== \"none\").length;\n    });\n\n    expect(visibleBreadcrumbs).toBe(3);\n  });\n\n  it(\"renders aria elements when back-breadcrumb-only is set\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(icBreadcrumbGroupBack);\n    await page.waitForChanges();\n\n    const describedbySpan = await page.find(\n      \"ic-breadcrumb-group ic-breadcrumb[show-back-icon] >>> span.hide\"\n    );\n\n    const icLinkNestedATag = await page.$eval(\"ic-breadcrumb-group\", (el) => {\n      const nestedATag = el\n        .querySelector(\"ic-breadcrumb[show-back-icon]\")\n        .shadowRoot.querySelector(\"ic-link\")\n        .shadowRoot.querySelector(\"a\");\n\n      return {\n        ariaDescribedBy: nestedATag.getAttribute(\"aria-describedby\"),\n      };\n    });\n\n    expect(describedbySpan).not.toBeNull();\n    expect(describedbySpan.id).toBe(\"breadcrumb-2-describedby\");\n\n    expect(icLinkNestedATag.ariaDescribedBy).toBeTruthy();\n    expect(icLinkNestedATag.ariaDescribedBy).toBe(\"breadcrumb-2-describedby\");\n  });\n});\n"]}

package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.spec.js

@@ -0,0 +1,181 @@
+import { BreadcrumbGroup } from "./ic-breadcrumb-group";
+import { newSpecPage } from "@stencil/core/testing";
+import { Breadcrumb } from "../ic-breadcrumb/ic-breadcrumb";
+import { DEVICE_SIZES } from "../../utils/helpers";
+import * as helpers from "../../utils/helpers";
+import { waitForTimeout } from "../../testspec.setup";
+describe("ic-breadcrumb-group", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup],
+      html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,
+    });
+    expect(page.root).toMatchSnapshot("should render");
+  });
+  it("should render styling from props", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup],
+      html: `<ic-breadcrumb-group collapsed="true" back-breadcrumb-only="true"></ic-breadcrumb-group>`,
+    });
+    expect(page.root).toMatchSnapshot("should render styling from props");
+  });
+  it("should render with ic-breadcrumb", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group><ic-breadcrumb></ic-breadcrumb></ic-breadcrumb-group>`,
+    });
+    expect(page.root).toMatchSnapshot("should render with ic-breadcrumb");
+  });
+  it("should render with collapse button", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `
+        <ic-breadcrumb-group collapsed="true">
+          <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+          <ic-breadcrumb current="true" page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+        </ic-breadcrumb-group>`,
+    });
+    expect(page.root).toMatchSnapshot("should render with collapse button");
+  });
+  it("should set hasShadowDom", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup],
+      html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,
+    });
+    const element = page.root.shadowRoot.querySelector("nav");
+    expect(helpers.hasShadowDom(element)).toBe(false);
+  });
+  it("should handle the hidden collapsed breadcrumbs", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `
+        <ic-breadcrumb-group collapsed="true">
+          <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+          <ic-breadcrumb current="true" page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+        </ic-breadcrumb-group>`,
+    });
+    const collapsedEllipsis = page.doc.getElementById("collapsed-ellipsis");
+    collapsedEllipsis.click();
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot("should handle the hidden collapsed breadcrumbs");
+  });
+  it("should test collapsed behaviour on resize to small devices", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group collapsed="true">
+      <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 4" href="/breadcrumb-4"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    expect(page.root).toMatchSnapshot("should test collapsed behaviour on resize to small devices");
+  });
+  it("should test behaviour on small devices", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group>
+      <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+      <ic-breadcrumb current="true" page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    expect(page.rootInstance.backBreadcrumbOnly).toBe(true);
+    //call runResizeObserver
+    await page.rootInstance.runResizeObserver();
+  });
+  it("should test behaviour on change to medium devices", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group collapsed="true">
+          <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 4" href="/breadcrumb-4"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    page.rootInstance.expandedBreadcrumbGroup = true;
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);
+    expect(page.rootInstance.backBreadcrumbOnly).toBe(false);
+    //call runResizeObserver
+    await page.rootInstance.runResizeObserver();
+  });
+  it("should test resize observer after expanding breadcrumbs", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group collapsed="true">
+          <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 4" href="/breadcrumb-4"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    // page.rootInstance.expandedBreadcrumbGroup = true;
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    expect(page.rootInstance.expandedBreadcrumbs).toBe(false);
+    const button = page.root.querySelector("#collapsed-ellipsis");
+    button.click();
+    await page.waitForChanges();
+    //delay to test setTimeout in code
+    await waitForTimeout(100);
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);
+    await page.waitForChanges();
+    expect(page.rootInstance.expandedBreadcrumbs).toBe(true);
+    //call runResizeObserver
+    await page.rootInstance.runResizeObserver();
+  });
+  it("should test resize observer with collapsed false", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group>
+          <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 4" href="/breadcrumb-4"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    // page.rootInstance.expandedBreadcrumbGroup = true;
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    await page.waitForChanges();
+    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);
+    await page.waitForChanges();
+    // expect(true).toBeTruthy;
+    expect(page.rootInstance.expandedBreadcrumbs).toBe(false);
+    // expect(page.rootInstance.backBreadcrumbOnly).toBe(false);
+    //call runResizeObserver
+    await page.rootInstance.runResizeObserver();
+  });
+  it("should return null for last parent breadcrumb when there is only 1 breadcrumb", async () => {
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group>
+          <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    expect(page.rootInstance.getLastParentBreadcrumb()).toBeNull();
+  });
+  //this test has to go last as it changes the device size
+  it("should render collapse on already small devices", async () => {
+    const myfunc = jest.fn().mockReturnValue(DEVICE_SIZES.S);
+    Object.defineProperty(helpers, "getCurrentDeviceSize", {
+      value: myfunc,
+    });
+    const page = await newSpecPage({
+      components: [BreadcrumbGroup, Breadcrumb],
+      html: `<ic-breadcrumb-group collapsed="true">
+      <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 4" href="/breadcrumb-4"></ic-breadcrumb>
+      </ic-breadcrumb-group>`,
+    });
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot("should render collapse on already small devices");
+  });
+});
+//# sourceMappingURL=ic-breadcrumb-group.spec.js.map

package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-breadcrumb-group.spec.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb-group/ic-breadcrumb-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { BreadcrumbGroup } from \"./ic-breadcrumb-group\";\nimport { newSpecPage } from \"@stencil/core/testing\";\nimport { Breadcrumb } from \"../ic-breadcrumb/ic-breadcrumb\";\nimport { DEVICE_SIZES } from \"../../utils/helpers\";\nimport * as helpers from \"../../utils/helpers\";\nimport { waitForTimeout } from \"../../testspec.setup\";\n\ndescribe(\"ic-breadcrumb-group\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup],\n      html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render\");\n  });\n\n  it(\"should render styling from props\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup],\n      html: `<ic-breadcrumb-group collapsed=\"true\" back-breadcrumb-only=\"true\"></ic-breadcrumb-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render styling from props\");\n  });\n\n  it(\"should render with ic-breadcrumb\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group><ic-breadcrumb></ic-breadcrumb></ic-breadcrumb-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with ic-breadcrumb\");\n  });\n\n  it(\"should render with collapse button\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `\n        <ic-breadcrumb-group collapsed=\"true\">\n          <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n        </ic-breadcrumb-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with collapse button\");\n  });\n\n  it(\"should set hasShadowDom\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup],\n      html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,\n    });\n\n    const element = page.root.shadowRoot.querySelector(\"nav\");\n    expect(helpers.hasShadowDom(element)).toBe(false);\n  });\n\n  it(\"should handle the hidden collapsed breadcrumbs\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `\n        <ic-breadcrumb-group collapsed=\"true\">\n          <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n        </ic-breadcrumb-group>`,\n    });\n\n    const collapsedEllipsis: HTMLElement =\n      page.doc.getElementById(\"collapsed-ellipsis\");\n    collapsedEllipsis.click();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\n      \"should handle the hidden collapsed breadcrumbs\"\n    );\n  });\n\n  it(\"should test collapsed behaviour on resize to small devices\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group collapsed=\"true\">\n      <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n    expect(page.root).toMatchSnapshot(\n      \"should test collapsed behaviour on resize to small devices\"\n    );\n  });\n\n  it(\"should test behaviour on small devices\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group>\n      <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n      <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n    expect(page.rootInstance.backBreadcrumbOnly).toBe(true);\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n  });\n\n  it(\"should test behaviour on change to medium devices\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group collapsed=\"true\">\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    page.rootInstance.expandedBreadcrumbGroup = true;\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n    expect(page.rootInstance.backBreadcrumbOnly).toBe(false);\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n  });\n\n  it(\"should test resize observer after expanding breadcrumbs\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group collapsed=\"true\">\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    // page.rootInstance.expandedBreadcrumbGroup = true;\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n    expect(page.rootInstance.expandedBreadcrumbs).toBe(false);\n\n    const button = page.root.querySelector(\n      \"#collapsed-ellipsis\"\n    ) as HTMLButtonElement;\n    button.click();\n    await page.waitForChanges();\n    //delay to test setTimeout in code\n    await waitForTimeout(100);\n\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.expandedBreadcrumbs).toBe(true);\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n  });\n\n  it(\"should test resize observer with collapsed false\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group>\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    // page.rootInstance.expandedBreadcrumbGroup = true;\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n    await page.waitForChanges();\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n    await page.waitForChanges();\n\n    // expect(true).toBeTruthy;\n\n    expect(page.rootInstance.expandedBreadcrumbs).toBe(false);\n    // expect(page.rootInstance.backBreadcrumbOnly).toBe(false);\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n  });\n\n  it(\"should return null for last parent breadcrumb when there is only 1 breadcrumb\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group>\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    expect(page.rootInstance.getLastParentBreadcrumb()).toBeNull();\n  });\n\n  //this test has to go last as it changes the device size\n  it(\"should render collapse on already small devices\", async () => {\n    const myfunc = jest.fn().mockReturnValue(DEVICE_SIZES.S);\n    Object.defineProperty(helpers, \"getCurrentDeviceSize\", {\n      value: myfunc,\n    });\n\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group collapsed=\"true\">\n      <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\n      \"should render collapse on already small devices\"\n    );\n  });\n});\n"]}