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

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

@@ -0,0 +1,470 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { DEVICE_SIZES } from "../../utils/helpers";
+import { Button } from "../ic-button/ic-button";
+import { NavigationGroup } from "../ic-navigation-group/ic-navigation-group";
+import { NavigationItem } from "../ic-navigation-item/ic-navigation-item";
+import { SideNavigation } from "./ic-side-navigation";
+describe("ic-side-navigation", () => {
+  it("renders with app-title", async () => {
+    const page = await newSpecPage({
+      components: [SideNavigation],
+      html: `<ic-side-navigation app-title="ACME"></ic-side-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-app-title");
+  });
+  it("renders with app title, version and status", async () => {
+    const page = await newSpecPage({
+      components: [SideNavigation],
+      html: `<ic-side-navigation version="v0.0.0" status="BETA" app-title="ACME" status="BETA"></ic-side-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-app-title-version-status");
+  });
+  it("renders with primary navigation items", async () => {
+    const page = await newSpecPage({
+      components: [SideNavigation, NavigationItem],
+      html: `
+        <ic-side-navigation version="v0.0.0" app-title="ACME" status="BETA">
+          <ic-navigation-item slot="primary-navigation" href="/" label="Home">
+            <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"
+              />
+            </svg>
+          </ic-navigation-item>
+        </ic-side-navigation>
+      `,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-primary-navigation-items");
+  });
+  it("renders with secondary navigation items", async () => {
+    const page = await newSpecPage({
+      components: [SideNavigation, NavigationItem],
+      html: `
+        <ic-side-navigation version="v0.0.0" status="BETA" app-title="ACME">
+        <ic-navigation-item slot="secondary-navigation" href="/" label="a11y">
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-navigation-item>
+        </ic-side-navigation>
+      `,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-secondary-navigation-items");
+  });
+  it("renders with slotted navigation item", async () => {
+    const page = await newSpecPage({
+      components: [SideNavigation, NavigationItem],
+      html: `<ic-side-navigation app-title="ACME">
+        <ic-navigation-item slot="primary-navigation">
+            <a
+              slot="navigation-item"
+              class="active"
+              href="/child-item-2"
+              aria-label="Daily Tippers"
+            >
+              <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>
+              Daily Tippers
+            </a>
+          </ic-navigation-item>
+      </ic-side-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("slotted-navigation-item");
+  });
+  it("renders with slotted navigation item - collapsed icon labels true", async () => {
+    const page = await newSpecPage({
+      components: [SideNavigation, NavigationItem],
+      html: `<ic-side-navigation app-title="ACME" collapsed-icon-labels="true">
+        <ic-navigation-item slot="primary-navigation">
+            <a
+              slot="navigation-item"
+              class="active"
+              href="/child-item-2"
+              aria-label="Daily Tippers"
+            >
+              <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>
+              Daily Tippers
+            </a>
+          </ic-navigation-item>
+          <ic-navigation-item slot="secondary-navigation" href="/" label="a11y">
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-navigation-item>
+      </ic-side-navigation>`,
+    });
+    expect(page.root).toMatchSnapshot("slotted-navigation-item-collapsed-icon-labels");
+    expect(page.rootInstance.menuExpanded).toBe(false);
+    await page.rootInstance.toggleMenuExpanded();
+    await page.waitForChanges();
+    await new Promise((r) => setTimeout(r, 2000));
+    expect(page.rootInstance.menuExpanded).toBe(true);
+    expect(page.root).toMatchSnapshot("slotted-navigation-item-collapsed-icon-labels-menu-toggle");
+  });
+  it("tests menu toggle slotted nav items - collapsed icon labels false", async () => {
+    const page = await newSpecPage({
+      components: [SideNavigation, NavigationItem],
+      html: `<ic-side-navigation app-title="ACME" collapsed-icon-labels="false">
+        <ic-navigation-item slot="primary-navigation">
+            <a
+              slot="navigation-item"
+              class="active"
+              href="/child-item-2"
+              aria-label="Daily Tippers"
+            >
+              <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>
+              Daily Tippers
+            </a>
+          </ic-navigation-item>
+      </ic-side-navigation>`,
+    });
+    expect(page.rootInstance.menuExpanded).toBe(false);
+    await page.rootInstance.toggleMenuExpanded();
+    await page.waitForChanges();
+    await new Promise((r) => setTimeout(r, 2000));
+    expect(page.rootInstance.menuExpanded).toBe(true);
+  });
+  it("renders expanded", async () => {
+    const page = await newSpecPage({
+      components: [SideNavigation, NavigationItem],
+      html: `<ic-side-navigation app-title="ACME" expanded="true"></ic-side-navigation>`,
+    });
+    await page.waitForChanges();
+    await new Promise((r) => setTimeout(r, 2000));
+    expect(page.root).toMatchSnapshot("renders-expanded");
+  });
+  it("renders with primary navigation items and collapsed icon labels", async () => {
+    const page = await newSpecPage({
+      components: [SideNavigation, NavigationItem],
+      html: `
+        <ic-side-navigation version="v0.0.0" app-title="ACME" status="BETA" collapsed-icon-labels="true">
+          <ic-navigation-item slot="primary-navigation" href="/" label="Home">
+            <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"
+              />
+            </svg>
+          </ic-navigation-item>
+        </ic-side-navigation>
+      `,
+    });
+    expect(page.root).toMatchSnapshot("primary-navigation-items-and-collapsed-icon-labels");
+  });
+  it("should test resizing", async () => {
+    const page = await newSpecPage({
+      components: [SideNavigation],
+      html: `<ic-side-navigation version="v0.0.0" status="BETA" app-title="ACME" collapsed-icon-labels="true">
+    </ic-side-navigation>`,
+    });
+    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);
+    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);
+    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.M);
+    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);
+    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.XL);
+  });
+  it("tests menu toggle", async () => {
+    const page = await newSpecPage({
+      components: [SideNavigation, NavigationItem, Button],
+      html: `<ic-side-navigation app-title="ACME" version="v0.0.0" status="BETA">
+      <ic-navigation-item slot="primary-navigation">
+      <a
+        slot="navigation-item"
+        class="active"
+        href="/child-item-2"
+        aria-label="Daily Tippers"
+      >
+        <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>
+        Daily Tippers
+      </a>
+    </ic-navigation-item></ic-side-navigation>`,
+    });
+    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);
+    await page.waitForChanges();
+    expect(page.rootInstance.menuOpen).toBe(false);
+    await page.rootInstance.toggleMenu();
+    await page.waitForChanges();
+    expect(page.rootInstance.menuOpen).toBe(true);
+    await page.rootInstance.toggleMenu();
+    await page.waitForChanges();
+    await new Promise((r) => setTimeout(r, 2000));
+    expect(page.rootInstance.menuOpen).toBe(false);
+  });
+  it("should test resizing - collapsed icon labels false", async () => {
+    const page = await newSpecPage({
+      components: [SideNavigation, NavigationItem],
+      html: `<ic-side-navigation version="v0.0.0" status="BETA" app-title="ACME" collapsed-icon-labels="false">
+      <ic-navigation-item slot="primary-navigation">
+      <a
+        slot="navigation-item"
+        class="active"
+        href="/child-item-2"
+        aria-label="Daily Tippers"
+      >
+        <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>
+        Daily Tippers
+      </a>
+    </ic-navigation-item>
+    </ic-side-navigation>`,
+    });
+    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);
+    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.M);
+  });
+  it("should test transitionend event", async () => {
+    const page = await newSpecPage({
+      components: [SideNavigation, NavigationItem],
+      html: `
+        <ic-side-navigation version="v0.0.0" status="BETA" app-title="ACME" collapsed-icon-labels="true">
+        <ic-navigation-item slot="primary-navigation" href="/" label="Home">
+            <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"
+              />
+            </svg>
+          </ic-navigation-item>
+        <ic-navigation-item slot="secondary-navigation" href="/" label="a11y">
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-navigation-item>
+        </ic-side-navigation>
+      `,
+    });
+    expect(page.rootInstance.menuExpanded).toBe(false);
+    await page.rootInstance.toggleMenuExpanded();
+    await new Promise((r) => setTimeout(r, 2000));
+    page.root.dispatchEvent(new window.window.Event("transitionend", {
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.menuExpanded).toBe(true);
+  });
+  it("should test theme change", async () => {
+    const page = await newSpecPage({
+      components: [SideNavigation],
+      html: `<ic-side-navigation version="v0.0.0" status="BETA" app-title="ACME">
+    </ic-side-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("");
+  });
+  it("renders with slotted primary secondary navigation and expanded", async () => {
+    const page = await newSpecPage({
+      components: [SideNavigation, NavigationItem, NavigationGroup],
+      html: `<ic-side-navigation app-title="Application Name" version="v0.0.0" status="BETA" expanded="true">
+      <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-navigation-item slot="primary-navigation">
+        <a
+          slot="navigation-item"
+          class="active"
+          href="/child-item-2"
+          aria-label="Daily Tippers"
+        >
+          <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>
+          Daily Tippers
+        </a>
+      </ic-navigation-item>
+      <ic-navigation-group
+        slot="primary-navigation"
+        label="Second navigation group"
+        expandable="true"
+      >
+        <ic-navigation-item>
+          <a
+            slot="navigation-item"
+            href="/child-item-2"
+            aria-label="Daily Tippers"
+          >
+            <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>
+            Daily Tippers
+          </a>
+        </ic-navigation-item>
+      </ic-navigation-group>
+      <ic-navigation-item slot="secondary-navigation">
+        <a
+          slot="navigation-item"
+          href="/bar"
+          aria-label="bar"
+        >
+          <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>
+          bar
+        </a>
+      </ic-navigation-item>
+    </ic-side-navigation>
+    `,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-slotted-primary-secondary-navigation-and-expanded");
+  });
+});
+//# sourceMappingURL=ic-side-navigation.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-side-navigation.spec.js","sourceRoot":"","sources":["../../../src/components/ic-side-navigation/ic-side-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 { NavigationGroup } from \"../ic-navigation-group/ic-navigation-group\";\nimport { NavigationItem } from \"../ic-navigation-item/ic-navigation-item\";\nimport { SideNavigation } from \"./ic-side-navigation\";\n\ndescribe(\"ic-side-navigation\", () => {\n  it(\"renders with app-title\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation],\n      html: `<ic-side-navigation app-title=\"ACME\"></ic-side-navigation>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-app-title\");\n  });\n\n  it(\"renders with app title, version and status\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation],\n      html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\" status=\"BETA\"></ic-side-navigation>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-app-title-version-status\");\n  });\n\n  it(\"renders with primary navigation items\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `\n        <ic-side-navigation version=\"v0.0.0\" app-title=\"ACME\" status=\"BETA\">\n          <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\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              />\n            </svg>\n          </ic-navigation-item>\n        </ic-side-navigation>\n      `,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-primary-navigation-items\");\n  });\n\n  it(\"renders with secondary navigation items\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `\n        <ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\">\n        <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\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 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-navigation-item>\n        </ic-side-navigation>\n      `,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-secondary-navigation-items\"\n    );\n  });\n\n  it(\"renders with slotted navigation item\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `<ic-side-navigation app-title=\"ACME\">\n        <ic-navigation-item slot=\"primary-navigation\">\n            <a\n              slot=\"navigation-item\"\n              class=\"active\"\n              href=\"/child-item-2\"\n              aria-label=\"Daily Tippers\"\n            >\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              Daily Tippers\n            </a>\n          </ic-navigation-item>\n      </ic-side-navigation>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"slotted-navigation-item\");\n  });\n\n  it(\"renders with slotted navigation item - collapsed icon labels true\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `<ic-side-navigation app-title=\"ACME\" collapsed-icon-labels=\"true\">\n        <ic-navigation-item slot=\"primary-navigation\">\n            <a\n              slot=\"navigation-item\"\n              class=\"active\"\n              href=\"/child-item-2\"\n              aria-label=\"Daily Tippers\"\n            >\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              Daily Tippers\n            </a>\n          </ic-navigation-item>\n          <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\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 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-navigation-item>\n      </ic-side-navigation>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"slotted-navigation-item-collapsed-icon-labels\"\n    );\n\n    expect(page.rootInstance.menuExpanded).toBe(false);\n    await page.rootInstance.toggleMenuExpanded();\n    await page.waitForChanges();\n    await new Promise((r) => setTimeout(r, 2000));\n    expect(page.rootInstance.menuExpanded).toBe(true);\n    expect(page.root).toMatchSnapshot(\n      \"slotted-navigation-item-collapsed-icon-labels-menu-toggle\"\n    );\n  });\n\n  it(\"tests menu toggle slotted nav items - collapsed icon labels false\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `<ic-side-navigation app-title=\"ACME\" collapsed-icon-labels=\"false\">\n        <ic-navigation-item slot=\"primary-navigation\">\n            <a\n              slot=\"navigation-item\"\n              class=\"active\"\n              href=\"/child-item-2\"\n              aria-label=\"Daily Tippers\"\n            >\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              Daily Tippers\n            </a>\n          </ic-navigation-item>\n      </ic-side-navigation>`,\n    });\n\n    expect(page.rootInstance.menuExpanded).toBe(false);\n    await page.rootInstance.toggleMenuExpanded();\n    await page.waitForChanges();\n    await new Promise((r) => setTimeout(r, 2000));\n    expect(page.rootInstance.menuExpanded).toBe(true);\n  });\n\n  it(\"renders expanded\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `<ic-side-navigation app-title=\"ACME\" expanded=\"true\"></ic-side-navigation>`,\n    });\n\n    await page.waitForChanges();\n    await new Promise((r) => setTimeout(r, 2000));\n    expect(page.root).toMatchSnapshot(\"renders-expanded\");\n  });\n\n  it(\"renders with primary navigation items and collapsed icon labels\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `\n        <ic-side-navigation version=\"v0.0.0\" app-title=\"ACME\" status=\"BETA\" collapsed-icon-labels=\"true\">\n          <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\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              />\n            </svg>\n          </ic-navigation-item>\n        </ic-side-navigation>\n      `,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"primary-navigation-items-and-collapsed-icon-labels\"\n    );\n  });\n\n  it(\"should test resizing\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation],\n      html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\" collapsed-icon-labels=\"true\">\n    </ic-side-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.M);\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.XL);\n  });\n\n  it(\"tests menu toggle\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem, Button],\n      html: `<ic-side-navigation app-title=\"ACME\" version=\"v0.0.0\" status=\"BETA\">\n      <ic-navigation-item slot=\"primary-navigation\">\n      <a\n        slot=\"navigation-item\"\n        class=\"active\"\n        href=\"/child-item-2\"\n        aria-label=\"Daily Tippers\"\n      >\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        Daily Tippers\n      </a>\n    </ic-navigation-item></ic-side-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);\n    await page.waitForChanges();\n    expect(page.rootInstance.menuOpen).toBe(false);\n    await page.rootInstance.toggleMenu();\n    await page.waitForChanges();\n    expect(page.rootInstance.menuOpen).toBe(true);\n    await page.rootInstance.toggleMenu();\n    await page.waitForChanges();\n    await new Promise((r) => setTimeout(r, 2000));\n    expect(page.rootInstance.menuOpen).toBe(false);\n  });\n\n  it(\"should test resizing - collapsed icon labels false\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\" collapsed-icon-labels=\"false\">\n      <ic-navigation-item slot=\"primary-navigation\">\n      <a\n        slot=\"navigation-item\"\n        class=\"active\"\n        href=\"/child-item-2\"\n        aria-label=\"Daily Tippers\"\n      >\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        Daily Tippers\n      </a>\n    </ic-navigation-item>\n    </ic-side-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.M);\n  });\n\n  it(\"should test transitionend event\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `\n        <ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\" collapsed-icon-labels=\"true\">\n        <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\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              />\n            </svg>\n          </ic-navigation-item>\n        <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\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 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-navigation-item>\n        </ic-side-navigation>\n      `,\n    });\n\n    expect(page.rootInstance.menuExpanded).toBe(false);\n    await page.rootInstance.toggleMenuExpanded();\n    await new Promise((r) => setTimeout(r, 2000));\n\n    page.root.dispatchEvent(\n      new window.window.Event(\"transitionend\", {\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.menuExpanded).toBe(true);\n  });\n\n  it(\"should test theme change\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation],\n      html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\">\n    </ic-side-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  it(\"renders with slotted primary secondary navigation and expanded\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem, NavigationGroup],\n      html: `<ic-side-navigation app-title=\"Application Name\" version=\"v0.0.0\" status=\"BETA\" expanded=\"true\">\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-navigation-item slot=\"primary-navigation\">\n        <a\n          slot=\"navigation-item\"\n          class=\"active\"\n          href=\"/child-item-2\"\n          aria-label=\"Daily Tippers\"\n        >\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          Daily Tippers\n        </a>\n      </ic-navigation-item>\n      <ic-navigation-group\n        slot=\"primary-navigation\"\n        label=\"Second navigation group\"\n        expandable=\"true\"\n      >\n        <ic-navigation-item>\n          <a\n            slot=\"navigation-item\"\n            href=\"/child-item-2\"\n            aria-label=\"Daily Tippers\"\n          >\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            Daily Tippers\n          </a>\n        </ic-navigation-item>\n      </ic-navigation-group>\n      <ic-navigation-item slot=\"secondary-navigation\">\n        <a\n          slot=\"navigation-item\"\n          href=\"/bar\"\n          aria-label=\"bar\"\n        >\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          bar\n        </a>\n      </ic-navigation-item>\n    </ic-side-navigation>\n    `,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-slotted-primary-secondary-navigation-and-expanded\"\n    );\n  });\n});\n"]}

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

@@ -0,0 +1,89 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Skeleton } from "./ic-skeleton";
+beforeAll(() => {
+  jest.spyOn(console, "warn").mockImplementation(jest.fn());
+});
+describe("ic-skeleton", () => {
+  it("should render with default height and width", async () => {
+    const page = await newSpecPage({
+      components: [Skeleton],
+      html: `<ic-skeleton></ic-skeleton>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-skeleton aria-disabled="true" class="skeleton" style="height: 93px; width: 260px;">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+    </ic-skeleton>
+    `);
+  });
+  it("should render with supplied height", async () => {
+    const page = await newSpecPage({
+      components: [Skeleton],
+      html: `<ic-skeleton style="height: 100px;"></ic-skeleton>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-skeleton aria-disabled="true" class="skeleton" style="height: 100px; width: 260px;">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+    </ic-skeleton>
+    `);
+  });
+  it("should render with supplied width", async () => {
+    const page = await newSpecPage({
+      components: [Skeleton],
+      html: `<ic-skeleton style="width: 300px;"></ic-skeleton>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-skeleton aria-disabled="true" class="skeleton" style="width: 300px; height: 93px;">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+    </ic-skeleton>
+    `);
+  });
+  it("should render with supplied height and width", async () => {
+    const page = await newSpecPage({
+      components: [Skeleton],
+      html: `<ic-skeleton style="height: 100px; width: 300px;"></ic-skeleton>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-skeleton aria-disabled="true" class="skeleton" style="height: 100px; width: 300px;">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+    </ic-skeleton>
+    `);
+  });
+  it("should render circular variant", async () => {
+    const page = await newSpecPage({
+      components: [Skeleton],
+      html: `<ic-skeleton variant="circle"></ic-skeleton>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-skeleton aria-disabled="true" class="circle skeleton" variant="circle" style="height: 25px; width: 25px;">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+    </ic-skeleton>
+    `);
+  });
+  it("should render text variant", async () => {
+    const page = await newSpecPage({
+      components: [Skeleton],
+      html: `<ic-skeleton variant="text"><ic-typography>Test</ic-typography></ic-skeleton>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-skeleton aria-disabled="true" class="skeleton" variant="text">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+      <ic-typography>
+        Test
+      </ic-typography>
+    </ic-skeleton>
+    `);
+  });
+});
+//# sourceMappingURL=ic-skeleton.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-skeleton.spec.js","sourceRoot":"","sources":["../../../src/components/ic-skeleton/ic-skeleton.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,SAAS,CAAC,GAAG,EAAE;EACb,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;AAC5D,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;EAC3B,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;IAC3D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,6BAA6B;KACpC,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;IAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,oDAAoD;KAC3D,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;IACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,mDAAmD;KAC1D,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;IAC5D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,kEAAkE;KACzE,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,8CAA8C;KACrD,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;IAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,+EAA+E;KACtF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Skeleton } from \"./ic-skeleton\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-skeleton\", () => {\n  it(\"should render with default height and width\", async () => {\n    const page = await newSpecPage({\n      components: [Skeleton],\n      html: `<ic-skeleton></ic-skeleton>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-skeleton aria-disabled=\"true\" class=\"skeleton\" style=\"height: 93px; width: 260px;\">\n      <mock:shadow-root>\n        <slot></slot>\n      </mock:shadow-root>\n    </ic-skeleton>\n    `);\n  });\n\n  it(\"should render with supplied height\", async () => {\n    const page = await newSpecPage({\n      components: [Skeleton],\n      html: `<ic-skeleton style=\"height: 100px;\"></ic-skeleton>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-skeleton aria-disabled=\"true\" class=\"skeleton\" style=\"height: 100px; width: 260px;\">\n      <mock:shadow-root>\n        <slot></slot>\n      </mock:shadow-root>\n    </ic-skeleton>\n    `);\n  });\n\n  it(\"should render with supplied width\", async () => {\n    const page = await newSpecPage({\n      components: [Skeleton],\n      html: `<ic-skeleton style=\"width: 300px;\"></ic-skeleton>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-skeleton aria-disabled=\"true\" class=\"skeleton\" style=\"width: 300px; height: 93px;\">\n      <mock:shadow-root>\n        <slot></slot>\n      </mock:shadow-root>\n    </ic-skeleton>\n    `);\n  });\n\n  it(\"should render with supplied height and width\", async () => {\n    const page = await newSpecPage({\n      components: [Skeleton],\n      html: `<ic-skeleton style=\"height: 100px; width: 300px;\"></ic-skeleton>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-skeleton aria-disabled=\"true\" class=\"skeleton\" style=\"height: 100px; width: 300px;\">\n      <mock:shadow-root>\n        <slot></slot>\n      </mock:shadow-root>\n    </ic-skeleton>\n    `);\n  });\n\n  it(\"should render circular variant\", async () => {\n    const page = await newSpecPage({\n      components: [Skeleton],\n      html: `<ic-skeleton variant=\"circle\"></ic-skeleton>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-skeleton aria-disabled=\"true\" class=\"circle skeleton\" variant=\"circle\" style=\"height: 25px; width: 25px;\">\n      <mock:shadow-root>\n        <slot></slot>\n      </mock:shadow-root>\n    </ic-skeleton>\n    `);\n  });\n\n  it(\"should render text variant\", async () => {\n    const page = await newSpecPage({\n      components: [Skeleton],\n      html: `<ic-skeleton variant=\"text\"><ic-typography>Test</ic-typography></ic-skeleton>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-skeleton aria-disabled=\"true\" class=\"skeleton\" variant=\"text\">\n      <mock:shadow-root>\n        <slot></slot>\n      </mock:shadow-root>\n      <ic-typography>\n        Test\n      </ic-typography>\n    </ic-skeleton>\n    `);\n  });\n});\n"]}