From 63fdb7566469b626946d4f206d42edad0c033430 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 26 Feb 2025 19:41:32 -0800
Subject: [PATCH] test(breadcrumb): add unit tests

---
 .../Breadcrumb/Breadcrumb.dynamic.test.svelte |  19 +++
 .../Breadcrumb.noTrailingSlash.test.svelte    |   8 ++
 .../Breadcrumb.skeleton.test.svelte           |   6 +
 tests/{ => Breadcrumb}/Breadcrumb.test.svelte |   7 -
 tests/Breadcrumb/Breadcrumb.test.ts           | 120 ++++++++++++++++++
 tests/Breadcrumbs.test.svelte                 |  28 ----
 6 files changed, 153 insertions(+), 35 deletions(-)
 create mode 100644 tests/Breadcrumb/Breadcrumb.dynamic.test.svelte
 create mode 100644 tests/Breadcrumb/Breadcrumb.noTrailingSlash.test.svelte
 create mode 100644 tests/Breadcrumb/Breadcrumb.skeleton.test.svelte
 rename tests/{ => Breadcrumb}/Breadcrumb.test.svelte (59%)
 create mode 100644 tests/Breadcrumb/Breadcrumb.test.ts
 delete mode 100644 tests/Breadcrumbs.test.svelte

diff --git a/tests/Breadcrumb/Breadcrumb.dynamic.test.svelte b/tests/Breadcrumb/Breadcrumb.dynamic.test.svelte
new file mode 100644
index 00000000..cb430acb
--- /dev/null
+++ b/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>
diff --git a/tests/Breadcrumb/Breadcrumb.noTrailingSlash.test.svelte b/tests/Breadcrumb/Breadcrumb.noTrailingSlash.test.svelte
new file mode 100644
index 00000000..ccd89676
--- /dev/null
+++ b/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>
diff --git a/tests/Breadcrumb/Breadcrumb.skeleton.test.svelte b/tests/Breadcrumb/Breadcrumb.skeleton.test.svelte
new file mode 100644
index 00000000..4709295f
--- /dev/null
+++ b/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} />
diff --git a/tests/Breadcrumb.test.svelte b/tests/Breadcrumb/Breadcrumb.test.svelte
similarity index 59%
rename from tests/Breadcrumb.test.svelte
rename to tests/Breadcrumb/Breadcrumb.test.svelte
index 1fbb2c19..058735fa 100644
--- a/tests/Breadcrumb.test.svelte
+++ b/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} />
diff --git a/tests/Breadcrumb/Breadcrumb.test.ts b/tests/Breadcrumb/Breadcrumb.test.ts
new file mode 100644
index 00000000..5ad85014
--- /dev/null
+++ b/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");
+  });
+});
diff --git a/tests/Breadcrumbs.test.svelte b/tests/Breadcrumbs.test.svelte
deleted file mode 100644
index d3a5d540..00000000
--- a/tests/Breadcrumbs.test.svelte
+++ /dev/null
@@ -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>