@ukic/canary-web-components 2.0.0-canary.0

package/dist/collection/components/ic-page-header/test/basic/ic-page-header.spec.js

@@ -0,0 +1,284 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { PageHeader } from "../../ic-page-header";
+import { DEVICE_SIZES } from "../../../../utils/helpers";
+import { mockDeviceSize } from "../../../../testspec.setup";
+import { Button } from "../../../ic-button/ic-button";
+import * as helpers from "../../../../utils/helpers";
+import { BreadcrumbGroup } from "../../../ic-breadcrumb-group/ic-breadcrumb-group";
+import { Breadcrumb } from "../../../ic-breadcrumb/ic-breadcrumb";
+describe("simple ic-page-header renders", () => {
+  it("should render with a heading & sub-heading", async () => {
+    const page = await newSpecPage({
+      components: [PageHeader],
+      html: `<ic-page-header heading="Page header" subheading="This is a simple page header component and this is the text."></ic-page-header>`,
+    });
+    expect(page.root).toMatchSnapshot("should render with a heading & sub-heading");
+  });
+  it("should return null for slot 'tabs'", async () => {
+    expect(helpers.getSlot(undefined, "tabs")).toBeNull();
+  });
+});
+describe("ic-page-header component renders additional functionality", () => {
+  it("should render actions", async () => {
+    const page = await newSpecPage({
+      components: [PageHeader],
+      html: `
+      <ic-page-header
+        heading="Page header"
+        subheading="This is a simple page header component and this is the text."
+      >
+        <ic-button slot="actions" variant="tertiary">Filter coffee</ic-button>
+        <ic-button slot="actions" variant="primary"
+          >Create coffee
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-button>
+      </ic-page-header>`,
+    });
+    expect(page.root).toMatchSnapshot("should render actions");
+  });
+  it("should render an input field", async () => {
+    const page = await newSpecPage({
+      components: [PageHeader],
+      html: `
+      <ic-page-header
+        heading="Page header"
+        subheading="This is a simple page header component and this is the text."
+      >
+        <ic-status-tag slot="heading-adornment" label="Beta"></ic-status-tag>
+        <ic-text-field slot="input" placeholder="Enter your input" hide-label />
+      </ic-page-header>`,
+    });
+    expect(page.root).toMatchSnapshot("should render an input field");
+  });
+  it("should render a stepper", async () => {
+    const page = await newSpecPage({
+      components: [PageHeader],
+      html: `
+      <ic-page-header heading="Create a coffee">
+        <ic-stepper slot="stepper">
+          <ic-step step-title="Warm kettle" step-type="completed"></ic-step>
+          <ic-step
+            step-title="Warm milk"
+            step-subtitle="Optional"
+            step-type="completed"
+          ></ic-step>
+          <ic-step step-title="Pour milk" step-type="current"></ic-step>
+        </ic-stepper>
+      </ic-page-header>`,
+    });
+    expect(page.root).toMatchSnapshot("should render a stepper");
+  });
+  it("should render tabs", async () => {
+    const page = await newSpecPage({
+      components: [PageHeader],
+      html: `
+      <ic-page-header heading="Coffee recipes" subheading="This is a simple page header component and this is the text.">
+        <ic-status-tag slot="heading-adornment" label="Beta"></ic-status-tag>
+        <ic-navigation-item
+          slot="tabs"
+          label="All recipes"
+          href="/all-recipes"
+          selected
+        ></ic-navigation-item>
+        <ic-navigation-item
+          slot="tabs"
+          label="Favourites"
+          href="/favourites"
+        ></ic-navigation-item>
+      </ic-page-header>`,
+    });
+    expect(page.root).toMatchSnapshot("should render tabs");
+  });
+  it("should render actions, input & tabs", async () => {
+    const page = await newSpecPage({
+      components: [PageHeader],
+      html: `
+      <ic-page-header heading="Coffee recipes" subheading="This is a simple page header component and this is the text.">
+        <ic-status-tag slot="heading-adornment" label="Beta"></ic-status-tag>
+        <ic-button slot="actions" variant="tertiary">Filter coffee</ic-button>
+        <ic-button slot="actions" variant="primary"
+          >Create coffee
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-button>
+        <ic-navigation-item
+          slot="tabs"
+          label="All recipes"
+          href="/all-recipes"
+          selected
+        ></ic-navigation-item>
+        <ic-navigation-item
+          slot="tabs"
+          label="Favourites"
+          href="/favourites"
+        ></ic-navigation-item>
+        <ic-text-field slot="input" placeholder="Enter your input" hide-label />
+      </ic-page-header>`,
+    });
+    expect(page.root).toMatchSnapshot("should render actions, input & tabs");
+  });
+  it("should render actions, input & stepper", async () => {
+    const page = await newSpecPage({
+      components: [PageHeader],
+      html: `
+      <ic-page-header heading="Coffee recipes" subheading="This is a simple page header component and this is the text.">
+        <ic-stepper slot="stepper">
+          <ic-step step-title="Warm kettle" step-type="completed"></ic-step>
+          <ic-step
+            step-title="Warm milk"
+            step-subtitle="Optional"
+            step-type="completed"
+          ></ic-step>
+          <ic-step step-title="Pour milk" step-type="current"></ic-step>
+        </ic-stepper>
+        <ic-status-tag slot="heading-adornment" label="Beta"></ic-status-tag>
+        <ic-button slot="actions" variant="tertiary">Filter coffee</ic-button>
+        <ic-button slot="actions" variant="primary"
+          >Create coffee
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-button>
+        <ic-text-field slot="input" placeholder="Enter your input" hide-label />
+      </ic-page-header>`,
+    });
+    expect(page.root).toMatchSnapshot("should render actions, input & stepper");
+  });
+  it("should render with breadcrumbs", async () => {
+    const page = await newSpecPage({
+      components: [PageHeader, BreadcrumbGroup, Breadcrumb],
+      html: `
+      <ic-page-header heading="Coffee recipes" subheading="This is a simple page header component and this is the text.">
+        <ic-breadcrumb-group slot="breadcrumbs">
+          <ic-breadcrumb
+            page-title="Breadcrumb 1"
+            href="/breadcrumb-1"
+          ></ic-breadcrumb>
+          <ic-breadcrumb
+            current="true"
+            page-title="Breadcrumb 2"
+            href="/breadcrumb-2"
+          ></ic-breadcrumb>
+        </ic-breadcrumb-group>          
+      </ic-page-header>`,
+    });
+    expect(page.root).toMatchSnapshot("should render with breadcrumbs");
+  });
+});
+describe("resizeObserver for ic-page-header", () => {
+  it("should set the deviceSize prop correctly in resizeObserver", async () => {
+    const page = await newSpecPage({
+      components: [PageHeader, Button],
+      html: `
+    <ic-page-header
+        heading="Page header"
+        sub-heading="This is a page header component with additional functionality and this is the text."
+        reverse-order
+      >
+        <ic-button slot="actions" variant="primary"
+          >Create coffee
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-button>
+        <ic-button slot="actions" variant="tertiary">Filter coffee</ic-button>
+      </ic-page-header>
+    `,
+    });
+    await page.waitForChanges();
+    page.rootInstance.areButtonsReversed = true;
+    await page.waitForChanges();
+    mockDeviceSize(DEVICE_SIZES.S);
+    await page.rootInstance.resizeObserverCallback();
+    await page.waitForChanges();
+    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);
+    mockDeviceSize(DEVICE_SIZES.M);
+    await page.rootInstance.resizeObserverCallback();
+    await page.waitForChanges();
+    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.M);
+    mockDeviceSize(DEVICE_SIZES.L);
+    await page.rootInstance.resizeObserverCallback();
+    await page.waitForChanges();
+    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.L);
+    mockDeviceSize(DEVICE_SIZES.XL);
+    await page.rootInstance.resizeObserverCallback();
+    await page.waitForChanges();
+    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.XL);
+  });
+  it("shouldn't call the resizeObserver if the resizeObserver is null", async () => {
+    const page = await newSpecPage({
+      components: [PageHeader, Button],
+      html: `
+    <ic-page-header
+        heading="Page header"
+        sub-heading="This is a page header component with additional functionality and this is the text."
+        reverse-order
+      >
+        <ic-button slot="actions" variant="primary"
+          >Create coffee
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-button>
+        <ic-button slot="actions" variant="tertiary">Filter coffee</ic-button>
+      </ic-page-header>
+    `,
+    });
+    await page.rootInstance.runResizeObserver();
+    page.setContent("");
+  });
+});
+//# sourceMappingURL=ic-page-header.spec.js.map

package/dist/collection/components/ic-page-header/test/basic/ic-page-header.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-page-header.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-page-header/test/basic/ic-page-header.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAElE,QAAQ,CAAC,+BAA+B,EAAE,GAAG,EAAE;EAC7C,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;IAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,mIAAmI;KAC1I,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAC/B,4CAA4C,CAC7C,CAAC;EACJ,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;IAClD,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;EACxD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,2DAA2D,EAAE,GAAG,EAAE;EACzE,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;IACrC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;wBAsBY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,uBAAuB,CAAC,CAAC;EAC7D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;wBAOY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,8BAA8B,CAAC,CAAC;EACpE,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;IACvC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;;wBAWY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,yBAAyB,CAAC,CAAC;EAC/D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oBAAoB,EAAE,KAAK,IAAI,EAAE;IAClC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;;;;;wBAcY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,oBAAoB,CAAC,CAAC;EAC1D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;IACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAgCY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,qCAAqC,CAAC,CAAC;EAC3E,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA8BY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,wCAAwC,CAAC,CAAC;EAC9E,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,UAAU,CAAC;MACrD,IAAI,EAAE;;;;;;;;;;;;;wBAaY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,gCAAgC,CAAC,CAAC;EACtE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,mCAAmC,EAAE,GAAG,EAAE;EACjD,EAAE,CAAC,4DAA4D,EAAE,KAAK,IAAI,EAAE;IAC1E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC;MAChC,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;KAwBP;KACA,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,IAAI,CAAC,YAAY,CAAC,kBAAkB,GAAG,IAAI,CAAC;IAC5C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAE/B,MAAM,IAAI,CAAC,YAAY,CAAC,sBAAsB,EAAE,CAAC;IACjD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAE1D,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAE/B,MAAM,IAAI,CAAC,YAAY,CAAC,sBAAsB,EAAE,CAAC;IACjD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAE1D,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAE/B,MAAM,IAAI,CAAC,YAAY,CAAC,sBAAsB,EAAE,CAAC;IACjD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAE1D,cAAc,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAEhC,MAAM,IAAI,CAAC,YAAY,CAAC,sBAAsB,EAAE,CAAC;IACjD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;EAC7D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,iEAAiE,EAAE,KAAK,IAAI,EAAE;IAC/E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC;MAChC,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;KAwBP;KACA,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,YAAY,CAAC,iBAAiB,EAAE,CAAC;IAE5C,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;EACtB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { PageHeader } from \"../../ic-page-header\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\nimport { mockDeviceSize } from \"../../../../testspec.setup\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport * as helpers from \"../../../../utils/helpers\";\nimport { BreadcrumbGroup } from \"../../../ic-breadcrumb-group/ic-breadcrumb-group\";\nimport { Breadcrumb } from \"../../../ic-breadcrumb/ic-breadcrumb\";\n\ndescribe(\"simple ic-page-header renders\", () => {\n  it(\"should render with a heading & sub-heading\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `<ic-page-header heading=\"Page header\" subheading=\"This is a simple page header component and this is the text.\"></ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render with a heading & sub-heading\"\n    );\n  });\n\n  it(\"should return null for slot 'tabs'\", async () => {\n    expect(helpers.getSlot(undefined, \"tabs\")).toBeNull();\n  });\n});\n\ndescribe(\"ic-page-header component renders additional functionality\", () => {\n  it(\"should render actions\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header\n        heading=\"Page header\"\n        subheading=\"This is a simple page header component and this is the text.\"\n      >\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\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=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render actions\");\n  });\n\n  it(\"should render an input field\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header\n        heading=\"Page header\"\n        subheading=\"This is a simple page header component and this is the text.\"\n      >\n        <ic-status-tag slot=\"heading-adornment\" label=\"Beta\"></ic-status-tag>\n        <ic-text-field slot=\"input\" placeholder=\"Enter your input\" hide-label />\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render an input field\");\n  });\n\n  it(\"should render a stepper\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header heading=\"Create a coffee\">\n        <ic-stepper slot=\"stepper\">\n          <ic-step step-title=\"Warm kettle\" step-type=\"completed\"></ic-step>\n          <ic-step\n            step-title=\"Warm milk\"\n            step-subtitle=\"Optional\"\n            step-type=\"completed\"\n          ></ic-step>\n          <ic-step step-title=\"Pour milk\" step-type=\"current\"></ic-step>\n        </ic-stepper>\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render a stepper\");\n  });\n\n  it(\"should render tabs\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header heading=\"Coffee recipes\" subheading=\"This is a simple page header component and this is the text.\">\n        <ic-status-tag slot=\"heading-adornment\" label=\"Beta\"></ic-status-tag>\n        <ic-navigation-item\n          slot=\"tabs\"\n          label=\"All recipes\"\n          href=\"/all-recipes\"\n          selected\n        ></ic-navigation-item>\n        <ic-navigation-item\n          slot=\"tabs\"\n          label=\"Favourites\"\n          href=\"/favourites\"\n        ></ic-navigation-item>\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render tabs\");\n  });\n\n  it(\"should render actions, input & tabs\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header heading=\"Coffee recipes\" subheading=\"This is a simple page header component and this is the text.\">\n        <ic-status-tag slot=\"heading-adornment\" label=\"Beta\"></ic-status-tag>\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\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=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n        <ic-navigation-item\n          slot=\"tabs\"\n          label=\"All recipes\"\n          href=\"/all-recipes\"\n          selected\n        ></ic-navigation-item>\n        <ic-navigation-item\n          slot=\"tabs\"\n          label=\"Favourites\"\n          href=\"/favourites\"\n        ></ic-navigation-item>\n        <ic-text-field slot=\"input\" placeholder=\"Enter your input\" hide-label />\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render actions, input & tabs\");\n  });\n\n  it(\"should render actions, input & stepper\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header heading=\"Coffee recipes\" subheading=\"This is a simple page header component and this is the text.\">\n        <ic-stepper slot=\"stepper\">\n          <ic-step step-title=\"Warm kettle\" step-type=\"completed\"></ic-step>\n          <ic-step\n            step-title=\"Warm milk\"\n            step-subtitle=\"Optional\"\n            step-type=\"completed\"\n          ></ic-step>\n          <ic-step step-title=\"Pour milk\" step-type=\"current\"></ic-step>\n        </ic-stepper>\n        <ic-status-tag slot=\"heading-adornment\" label=\"Beta\"></ic-status-tag>\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\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=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n        <ic-text-field slot=\"input\" placeholder=\"Enter your input\" hide-label />\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render actions, input & stepper\");\n  });\n\n  it(\"should render with breadcrumbs\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader, BreadcrumbGroup, Breadcrumb],\n      html: `\n      <ic-page-header heading=\"Coffee recipes\" subheading=\"This is a simple page header component and this is the text.\">\n        <ic-breadcrumb-group slot=\"breadcrumbs\">\n          <ic-breadcrumb\n            page-title=\"Breadcrumb 1\"\n            href=\"/breadcrumb-1\"\n          ></ic-breadcrumb>\n          <ic-breadcrumb\n            current=\"true\"\n            page-title=\"Breadcrumb 2\"\n            href=\"/breadcrumb-2\"\n          ></ic-breadcrumb>\n        </ic-breadcrumb-group>          \n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with breadcrumbs\");\n  });\n});\n\ndescribe(\"resizeObserver for ic-page-header\", () => {\n  it(\"should set the deviceSize prop correctly in resizeObserver\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader, Button],\n      html: `\n    <ic-page-header\n        heading=\"Page header\"\n        sub-heading=\"This is a page header component with additional functionality and this is the text.\"\n        reverse-order\n      >\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\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=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n      </ic-page-header>\n    `,\n    });\n\n    await page.waitForChanges();\n\n    page.rootInstance.areButtonsReversed = true;\n    await page.waitForChanges();\n\n    mockDeviceSize(DEVICE_SIZES.S);\n\n    await page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);\n\n    mockDeviceSize(DEVICE_SIZES.M);\n\n    await page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.M);\n\n    mockDeviceSize(DEVICE_SIZES.L);\n\n    await page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.L);\n\n    mockDeviceSize(DEVICE_SIZES.XL);\n\n    await page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.XL);\n  });\n\n  it(\"shouldn't call the resizeObserver if the resizeObserver is null\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader, Button],\n      html: `\n    <ic-page-header\n        heading=\"Page header\"\n        sub-heading=\"This is a page header component with additional functionality and this is the text.\"\n        reverse-order\n      >\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\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=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n      </ic-page-header>\n    `,\n    });\n\n    await page.rootInstance.runResizeObserver();\n\n    page.setContent(\"\");\n  });\n});\n"]}