test(breadcrumb): add unit tests

tests/Breadcrumb/Breadcrumb.dynamic.test.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
+
+  type BreadcrumbItemType = { href?: string; text: string };
+
+  export let items: BreadcrumbItemType[] = [
+    { href: "/", text: "Dashboard" },
+    { href: "/reports", text: "Annual reports" },
+    { href: "/reports/2019", text: "2019" },
+  ];
+</script>
+
+<Breadcrumb>
+  {#each items as item, i}
+    <BreadcrumbItem href={item.href} isCurrentPage={i === items.length - 1}>
+      {item.text}
+    </BreadcrumbItem>
+  {/each}
+</Breadcrumb>

tests/Breadcrumb/Breadcrumb.noTrailingSlash.test.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
+</script>
+
+<Breadcrumb noTrailingSlash>
+  <BreadcrumbItem href="/">Home</BreadcrumbItem>
+  <BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
+</Breadcrumb>

tests/Breadcrumb/Breadcrumb.skeleton.test.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import { Breadcrumb } from "carbon-components-svelte";
+</script>
+
+<Breadcrumb skeleton count={3} />
+<Breadcrumb noTrailingSlash skeleton count={5} />

tests/Breadcrumb/Breadcrumb.test.svelte

@@ -7,10 +7,3 @@
   <BreadcrumbItem href="/reports">Annual reports</BreadcrumbItem>
   <BreadcrumbItem href="/reports/2019" isCurrentPage>2019</BreadcrumbItem>
 </Breadcrumb>
-
-<Breadcrumb noTrailingSlash>
-  <BreadcrumbItem href="/">Home</BreadcrumbItem>
-  <BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
-</Breadcrumb>
-
-<Breadcrumb noTrailingSlash skeleton count={3} />

tests/Breadcrumb/Breadcrumb.test.ts

@@ -0,0 +1,120 @@
+import { render, screen } from "@testing-library/svelte";
+import Breadcrumb from "./Breadcrumb.test.svelte";
+import BreadcrumbNoTrailingSlash from "./Breadcrumb.noTrailingSlash.test.svelte";
+import BreadcrumbSkeleton from "./Breadcrumb.skeleton.test.svelte";
+import BreadcrumbDynamic from "./Breadcrumb.dynamic.test.svelte";
+
+describe("Breadcrumb", () => {
+  it("renders with default props", () => {
+    render(Breadcrumb);
+
+    const nav = screen.getByRole("navigation", { name: "Breadcrumb" });
+    expect(nav).toBeInTheDocument();
+
+    const list = nav.querySelector("ol");
+    expect(list).toHaveClass("bx--breadcrumb");
+    expect(list).not.toHaveClass("bx--breadcrumb--no-trailing-slash");
+
+    const items = screen.getAllByRole("listitem");
+    expect(items).toHaveLength(3);
+
+    const links = screen.getAllByRole("link");
+    expect(links).toHaveLength(3);
+
+    expect(links[0]).toHaveTextContent("Dashboard");
+    expect(links[0]).toHaveAttribute("href", "/");
+
+    expect(links[1]).toHaveTextContent("Annual reports");
+    expect(links[1]).toHaveAttribute("href", "/reports");
+
+    expect(links[2]).toHaveTextContent("2019");
+    expect(links[2]).toHaveAttribute("href", "/reports/2019");
+    expect(items[2]).toHaveClass("bx--breadcrumb-item--current");
+  });
+
+  it("renders with noTrailingSlash", () => {
+    render(BreadcrumbNoTrailingSlash);
+
+    const nav = screen.getByRole("navigation", { name: "Breadcrumb" });
+    const list = nav.querySelector("ol");
+    expect(list).toHaveClass("bx--breadcrumb--no-trailing-slash");
+
+    const items = screen.getAllByRole("listitem");
+    expect(items).toHaveLength(2);
+
+    const links = screen.getAllByRole("link");
+    expect(links[0]).toHaveTextContent("Home");
+    expect(links[0]).toHaveAttribute("href", "/");
+
+    expect(links[1]).toHaveTextContent("Profile");
+    expect(links[1]).toHaveAttribute("href", "/profile");
+    expect(items[1]).toHaveClass("bx--breadcrumb-item--current");
+  });
+
+  it("renders skeleton state", () => {
+    render(BreadcrumbSkeleton);
+
+    const skeletons = document.querySelectorAll(".bx--skeleton.bx--breadcrumb");
+    expect(skeletons).toHaveLength(2);
+
+    const firstSkeleton = skeletons[0];
+    expect(firstSkeleton).not.toHaveClass("bx--breadcrumb--no-trailing-slash");
+
+    const firstSkeletonItems = firstSkeleton.querySelectorAll(
+      ".bx--breadcrumb-item",
+    );
+    expect(firstSkeletonItems).toHaveLength(3);
+
+    const secondSkeleton = skeletons[1];
+    expect(secondSkeleton).toHaveClass("bx--breadcrumb--no-trailing-slash");
+
+    const secondSkeletonItems = secondSkeleton.querySelectorAll(
+      ".bx--breadcrumb-item",
+    );
+    expect(secondSkeletonItems).toHaveLength(5);
+  });
+
+  it("renders with dynamic items", () => {
+    render(BreadcrumbDynamic);
+
+    const items = screen.getAllByRole("listitem");
+    expect(items).toHaveLength(3);
+
+    const links = screen.getAllByRole("link");
+    expect(links[0]).toHaveTextContent("Dashboard");
+    expect(links[0]).toHaveAttribute("href", "/");
+
+    expect(links[1]).toHaveTextContent("Annual reports");
+    expect(links[1]).toHaveAttribute("href", "/reports");
+
+    expect(links[2]).toHaveTextContent("2019");
+    expect(links[2]).toHaveAttribute("href", "/reports/2019");
+    expect(items[2]).toHaveClass("bx--breadcrumb-item--current");
+  });
+
+  it("updates when dynamic items change", async () => {
+    const { rerender } = render(BreadcrumbDynamic);
+
+    let items = screen.getAllByRole("listitem");
+    expect(items).toHaveLength(3);
+
+    await rerender({
+      items: [
+        { href: "/", text: "Home" },
+        { href: "/settings", text: "Settings" },
+      ],
+    });
+
+    items = screen.getAllByRole("listitem");
+    expect(items).toHaveLength(2);
+
+    const links = screen.getAllByRole("link");
+    expect(links[0]).toHaveTextContent("Home");
+    expect(links[0]).toHaveAttribute("href", "/");
+
+    expect(links[1]).toHaveTextContent("Settings");
+    expect(links[1]).toHaveAttribute("href", "/settings");
+
+    expect(items[1]).toHaveClass("bx--breadcrumb-item--current");
+  });
+});

tests/Breadcrumbs.test.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-  type Items = { href?: string; text: string }[];
-
-  export let items: Items = [
-    { href: "/", text: "Dashboard" },
-    { href: "/reports", text: "Annual reports" },
-    { href: "/reports/2019", text: "2019" },
-  ];
-
-  import {
-    Row,
-    Column,
-    Breadcrumb,
-    BreadcrumbItem,
-  } from "carbon-components-svelte";
-</script>
-
-<Row>
-  <Column>
-    <Breadcrumb>
-      {#each items as item, i}
-        <BreadcrumbItem href={item.href} isCurrentPage={i === items.length - 1}>
-          {item.text}
-        </BreadcrumbItem>
-      {/each}
-    </Breadcrumb>
-  </Column>
-</Row>