@fpkit/acss 0.5.11 → 0.5.13

package/src/components/breadcrumbs/breadcrumb.test.tsx

@@ -0,0 +1,490 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { Breadcrumb, CustomRoute } from "./breadcrumb";
+
+describe("Breadcrumb", () => {
+  // ============================================================================
+  // CORE FUNCTIONALITY TESTS
+  // ============================================================================
+
+  describe("Core Functionality", () => {
+    it("renders a navigation element with breadcrumb list", () => {
+      render(<Breadcrumb currentRoute="/products/shirts" />);
+      const nav = screen.getByRole("navigation");
+      expect(nav).toBeInTheDocument();
+
+      const list = nav.querySelector("ol");
+      expect(list).toBeInTheDocument();
+    });
+
+    it("returns null when currentRoute is undefined", () => {
+      const { container } = render(<Breadcrumb currentRoute={undefined} />);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it("returns null when currentRoute is empty string", () => {
+      const { container } = render(<Breadcrumb currentRoute="" />);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it("renders home/start route link correctly", () => {
+      render(<Breadcrumb currentRoute="/products" />);
+      const homeLink = screen.getByRole("link", { name: "Home" });
+      expect(homeLink).toBeInTheDocument();
+      expect(homeLink).toHaveAttribute("href", "/");
+    });
+
+    it("parses path segments correctly from currentRoute", () => {
+      render(<Breadcrumb currentRoute="/products/shirts/blue-shirt" />);
+
+      expect(screen.getByText("products")).toBeInTheDocument();
+      expect(screen.getByText("shirts")).toBeInTheDocument();
+      expect(screen.getByText("blue-shirt")).toBeInTheDocument();
+    });
+
+    it("handles paths with leading slashes", () => {
+      render(<Breadcrumb currentRoute="/products" />);
+      expect(screen.getByText("products")).toBeInTheDocument();
+    });
+
+    it("handles paths with trailing slashes", () => {
+      render(<Breadcrumb currentRoute="/products/shirts/" />);
+      expect(screen.getByText("products")).toBeInTheDocument();
+      expect(screen.getByText("shirts")).toBeInTheDocument();
+    });
+
+    it("handles encoded URI components correctly", () => {
+      render(<Breadcrumb currentRoute="/products/learning%20in%20public" />);
+
+      expect(screen.getByText("products")).toBeInTheDocument();
+
+      // Text is truncated, so use aria-label to verify full decoded text
+      const element = screen.getByText(/learning in pub/);
+      expect(element).toHaveAttribute("aria-label", "learning in public");
+    });
+  });
+
+  // ============================================================================
+  // CUSTOM ROUTES TESTS
+  // ============================================================================
+
+  describe("Custom Routes", () => {
+    const customRoutes: CustomRoute[] = [
+      {
+        path: "products",
+        name: "All Products",
+        url: "/products",
+      },
+      {
+        path: "shirts",
+        name: "Shirts & Tops",
+        url: "/products/shirts",
+      },
+    ];
+
+    it("maps path segments to custom route names", () => {
+      render(
+        <Breadcrumb
+          currentRoute="/products/shirts"
+          routes={customRoutes}
+        />
+      );
+
+      expect(screen.getByText("All Products")).toBeInTheDocument();
+      expect(screen.getByText("Shirts & Tops")).toBeInTheDocument();
+    });
+
+    it("uses custom URLs when provided", () => {
+      render(
+        <Breadcrumb
+          currentRoute="/products/shirts"
+          routes={customRoutes}
+        />
+      );
+
+      const productsLink = screen.getByRole("link", { name: "All Products" });
+      expect(productsLink).toHaveAttribute("href", "/products");
+
+      const shirtsSpan = screen.getByText("Shirts & Tops");
+      expect(shirtsSpan).toBeInTheDocument();
+    });
+
+    it("falls back to path segment when no custom route found", () => {
+      render(
+        <Breadcrumb
+          currentRoute="/products/pants"
+          routes={customRoutes}
+        />
+      );
+
+      expect(screen.getByText("All Products")).toBeInTheDocument();
+      expect(screen.getByText("pants")).toBeInTheDocument(); // No custom route
+    });
+
+    it("handles partial custom route mappings", () => {
+      const partialRoutes: CustomRoute[] = [
+        {
+          path: "products",
+          name: "Products",
+          url: "/products",
+        },
+      ];
+
+      render(
+        <Breadcrumb
+          currentRoute="/products/shirts/item-123"
+          routes={partialRoutes}
+        />
+      );
+
+      expect(screen.getByText("Products")).toBeInTheDocument();
+      expect(screen.getByText("shirts")).toBeInTheDocument();
+      expect(screen.getByText("item-123")).toBeInTheDocument();
+    });
+  });
+
+  // ============================================================================
+  // ACCESSIBILITY TESTS
+  // ============================================================================
+
+  describe("Accessibility", () => {
+    it("renders semantic nav element with proper aria-label", () => {
+      render(
+        <Breadcrumb
+          currentRoute="/products"
+          ariaLabel="Page navigation"
+        />
+      );
+
+      const nav = screen.getByRole("navigation", { name: "Page navigation" });
+      expect(nav).toBeInTheDocument();
+    });
+
+    it("uses default aria-label of 'Breadcrumb' when not provided", () => {
+      render(<Breadcrumb currentRoute="/products" />);
+
+      const nav = screen.getByRole("navigation", { name: "Breadcrumb" });
+      expect(nav).toBeInTheDocument();
+    });
+
+    it("uses ordered list (ol) for breadcrumb list", () => {
+      render(<Breadcrumb currentRoute="/products/shirts" />);
+
+      const nav = screen.getByRole("navigation");
+      const list = nav.querySelector("ol");
+      expect(list).toBeInTheDocument();
+    });
+
+    it("marks last segment with aria-current='page'", () => {
+      render(<Breadcrumb currentRoute="/products/shirts" />);
+
+      const currentPage = screen.getByText("shirts");
+      expect(currentPage).toHaveAttribute("aria-current", "page");
+    });
+
+    it("hides spacers from screen readers with aria-hidden", () => {
+      render(<Breadcrumb currentRoute="/products/shirts" />);
+
+      const nav = screen.getByRole("navigation");
+      const spacers = nav.querySelectorAll('[aria-hidden="true"]');
+
+      // Should have at least 2 spacers (one for each segment)
+      expect(spacers.length).toBeGreaterThan(0);
+    });
+
+    it("does not render anchor tags with href='#'", () => {
+      render(<Breadcrumb currentRoute="/products/shirts" />);
+
+      const nav = screen.getByRole("navigation");
+      const invalidLinks = nav.querySelectorAll('a[href="#"]');
+
+      expect(invalidLinks.length).toBe(0);
+    });
+
+    it("provides full text in aria-label when truncated", () => {
+      const longName = "this-is-a-very-long-product-name";
+      render(
+        <Breadcrumb
+          currentRoute={`/products/${longName}`}
+          truncateLength={10}
+        />
+      );
+
+      const truncatedElement = screen.getByText(/this-is-a-/);
+      expect(truncatedElement).toHaveAttribute("aria-label", longName);
+    });
+
+    it("does not add aria-label when text is not truncated", () => {
+      render(
+        <Breadcrumb
+          currentRoute="/products/shirt"
+          truncateLength={20}
+        />
+      );
+
+      const element = screen.getByText("shirt");
+      expect(element).not.toHaveAttribute("aria-label");
+    });
+  });
+
+  // ============================================================================
+  // TRUNCATION TESTS
+  // ============================================================================
+
+  describe("Text Truncation", () => {
+    it("truncates text beyond default truncateLength (15)", () => {
+      const longName = "verylongproductname";
+      render(<Breadcrumb currentRoute={`/products/${longName}`} />);
+
+      // Should be truncated to 15 chars + "..."
+      expect(screen.getByText("verylongproduct...")).toBeInTheDocument();
+    });
+
+    it("respects custom truncateLength prop", () => {
+      const longName = "verylongname";
+      render(
+        <Breadcrumb
+          currentRoute={`/products/${longName}`}
+          truncateLength={5}
+        />
+      );
+
+      expect(screen.getByText("veryl...")).toBeInTheDocument();
+    });
+
+    it("does not truncate text shorter than truncateLength", () => {
+      render(
+        <Breadcrumb
+          currentRoute="/products/shirt"
+          truncateLength={15}
+        />
+      );
+
+      expect(screen.getByText("shirt")).toBeInTheDocument();
+    });
+
+    it("truncates both intermediate and current page segments", () => {
+      render(
+        <Breadcrumb
+          currentRoute="/verylongfirstsegment/verylongsecondsegment"
+          truncateLength={10}
+        />
+      );
+
+      expect(screen.getByText("verylongfi...")).toBeInTheDocument();
+      expect(screen.getByText("verylongse...")).toBeInTheDocument();
+    });
+  });
+
+  // ============================================================================
+  // EDGE CASES TESTS
+  // ============================================================================
+
+  describe("Edge Cases", () => {
+    it("skips last segment if length <= 3 characters", () => {
+      render(<Breadcrumb currentRoute="/products/shirts/abc" />);
+
+      // "abc" should be skipped (last segment with length 3)
+      expect(screen.queryByText("abc")).not.toBeInTheDocument();
+      expect(screen.getByText("products")).toBeInTheDocument();
+      expect(screen.getByText("shirts")).toBeInTheDocument();
+    });
+
+    it("skips duplicate consecutive segments", () => {
+      const { container } = render(
+        <Breadcrumb currentRoute="/products/products" />
+      );
+
+      const nav = container.querySelector("nav");
+      const productLinks = nav?.querySelectorAll('a[href="products"]');
+
+      // Should only have one "products" link (first occurrence)
+      expect(productLinks?.length).toBeLessThanOrEqual(1);
+    });
+
+    it("handles single segment path", () => {
+      render(<Breadcrumb currentRoute="/about" />);
+
+      expect(screen.getByRole("link", { name: "Home" })).toBeInTheDocument();
+      expect(screen.getByText("about")).toBeInTheDocument();
+    });
+
+    it("handles deep nesting (many segments)", () => {
+      render(
+        <Breadcrumb currentRoute="/level1/level2/level3/level4/level5" />
+      );
+
+      expect(screen.getByText("level1")).toBeInTheDocument();
+      expect(screen.getByText("level2")).toBeInTheDocument();
+      expect(screen.getByText("level3")).toBeInTheDocument();
+      expect(screen.getByText("level4")).toBeInTheDocument();
+      expect(screen.getByText("level5")).toBeInTheDocument();
+    });
+
+    it("handles special characters in segments", () => {
+      render(<Breadcrumb currentRoute="/products/t-shirts/blue" />);
+
+      expect(screen.getByText("t-shirts")).toBeInTheDocument();
+    });
+  });
+
+  // ============================================================================
+  // INTEGRATION TESTS
+  // ============================================================================
+
+  describe("Props Integration", () => {
+    it("spreads linkProps to Link components", () => {
+      const handleClick = vi.fn();
+
+      render(
+        <Breadcrumb
+          currentRoute="/products/shirts"
+          linkProps={{
+            onClick: handleClick,
+            "data-testid": "breadcrumb-link",
+          }}
+        />
+      );
+
+      const links = screen.getAllByTestId("breadcrumb-link");
+      expect(links.length).toBeGreaterThan(0);
+
+      // Click first link
+      links[0].click();
+      expect(handleClick).toHaveBeenCalled();
+    });
+
+    it("uses custom startRoute and startRouteUrl", () => {
+      render(
+        <Breadcrumb
+          currentRoute="/products"
+          startRoute="Dashboard"
+          startRouteUrl="/dashboard"
+        />
+      );
+
+      const startLink = screen.getByRole("link", { name: "Dashboard" });
+      expect(startLink).toBeInTheDocument();
+      expect(startLink).toHaveAttribute("href", "/dashboard");
+    });
+
+    it("renders custom spacer element", () => {
+      render(
+        <Breadcrumb
+          currentRoute="/products/shirts"
+          spacer={<span data-testid="custom-spacer">→</span>}
+        />
+      );
+
+      const spacers = screen.getAllByTestId("custom-spacer");
+      expect(spacers.length).toBeGreaterThan(0);
+      expect(spacers[0]).toHaveTextContent("→");
+    });
+
+    it("applies custom id to nav element", () => {
+      render(
+        <Breadcrumb
+          currentRoute="/products"
+          id="custom-breadcrumb"
+        />
+      );
+
+      const nav = screen.getByRole("navigation");
+      expect(nav).toHaveAttribute("id", "custom-breadcrumb");
+    });
+
+    it("applies custom className via classes prop", () => {
+      render(
+        <Breadcrumb
+          currentRoute="/products"
+          classes="custom-breadcrumb-class"
+        />
+      );
+
+      const nav = screen.getByRole("navigation");
+      expect(nav).toHaveClass("custom-breadcrumb-class");
+    });
+
+    it("applies custom inline styles", () => {
+      render(
+        <Breadcrumb
+          currentRoute="/products"
+          styles={{ padding: "1rem", backgroundColor: "lightgray" }}
+        />
+      );
+
+      const nav = screen.getByRole("navigation");
+      expect(nav).toHaveStyle({ padding: "1rem" });
+    });
+  });
+
+  // ============================================================================
+  // SUB-COMPONENT EXPORTS TESTS
+  // ============================================================================
+
+  describe("Sub-component Exports", () => {
+    it("exports Nav sub-component", () => {
+      expect(Breadcrumb.Nav).toBeDefined();
+    });
+
+    it("exports List sub-component", () => {
+      expect(Breadcrumb.List).toBeDefined();
+    });
+
+    it("exports Item sub-component", () => {
+      expect(Breadcrumb.Item).toBeDefined();
+    });
+
+    it("allows custom composition with sub-components", () => {
+      render(
+        <Breadcrumb.Nav aria-label="Custom breadcrumb">
+          <Breadcrumb.Item>
+            <a href="/">Home</a>
+          </Breadcrumb.Item>
+          <Breadcrumb.Item>
+            <span>Current Page</span>
+          </Breadcrumb.Item>
+        </Breadcrumb.Nav>
+      );
+
+      expect(screen.getByRole("navigation")).toBeInTheDocument();
+      expect(screen.getByText("Home")).toBeInTheDocument();
+      expect(screen.getByText("Current Page")).toBeInTheDocument();
+    });
+  });
+
+  // ============================================================================
+  // SNAPSHOT TESTS
+  // ============================================================================
+
+  describe("Snapshot Tests", () => {
+    it("matches snapshot for simple breadcrumb", () => {
+      const { container } = render(
+        <Breadcrumb currentRoute="/products/shirts" />
+      );
+      expect(container).toMatchSnapshot();
+    });
+
+    it("matches snapshot with custom routes", () => {
+      const routes: CustomRoute[] = [
+        { path: "products", name: "All Products", url: "/products" },
+      ];
+
+      const { container } = render(
+        <Breadcrumb currentRoute="/products/shirts" routes={routes} />
+      );
+      expect(container).toMatchSnapshot();
+    });
+
+    it("matches snapshot with truncation", () => {
+      const { container } = render(
+        <Breadcrumb
+          currentRoute="/products/verylongproductname"
+          truncateLength={10}
+        />
+      );
+      expect(container).toMatchSnapshot();
+    });
+  });
+});