diff --git a/src/pages/Header.test.tsx b/src/pages/Header.test.tsx index 52cdd1e..d4dece8 100644 --- a/src/pages/Header.test.tsx +++ b/src/pages/Header.test.tsx @@ -224,4 +224,84 @@ describe("Header – GrantFox FWC26", () => { const ellipsis = container.querySelector(".breadcrumb-ellipsis"); expect(ellipsis).not.toBeNull(); }); + + // ── maxLabelLength truncation tests ───────────────────────────────────── + // + // The Header passes maxLabelLength={28} to Breadcrumb, so long first and + // last crumb labels are truncated with a middle-ellipsis. These tests + // verify that the truncation is visible and that the full label is + // preserved in `title` / `aria-label`. + + it("truncates the first crumb label when it exceeds maxLabelLength", () => { + const longItems: BreadcrumbItem[] = [ + { + label: "A Very Long Root Segment Name That Keeps Going", + href: "/very-long-root-segment", + }, + { + label: "Short", + href: "/very-long-root-segment/short", + isCurrent: true, + }, + ]; + + render(
); + + const link = screen.getByRole("link", { + name: "A Very Long Root Segment Name That Keeps Going", + }); + // Visual text should be truncated (contain …) + expect(link.textContent).toContain("\u2026"); + // Full label preserved in title and aria-label + expect(link.getAttribute("title")).toBe( + "A Very Long Root Segment Name That Keeps Going", + ); + expect(link.getAttribute("aria-label")).toBe( + "A Very Long Root Segment Name That Keeps Going", + ); + }); + + it("truncates the current-page crumb label when it exceeds maxLabelLength", () => { + const longItems: BreadcrumbItem[] = [ + { + label: "Home", + href: "/", + }, + { + label: "A Very Long Current Page Title Indeed That Should Be Truncated", + href: "/long", + isCurrent: true, + }, + ]; + + render(
); + + const current = document.querySelector( + '[aria-current="page"]', + ); + expect(current).not.toBeNull(); + // Visual text should be truncated + expect(current?.textContent).toContain("\u2026"); + // Full label preserved in title and aria-label + expect(current?.getAttribute("title")).toBe( + "A Very Long Current Page Title Indeed That Should Be Truncated", + ); + expect(current?.getAttribute("aria-label")).toBe( + "A Very Long Current Page Title Indeed That Should Be Truncated", + ); + }); + + it("does not truncate short crumb labels", () => { + const shortItems: BreadcrumbItem[] = [ + { label: "Home", href: "/" }, + { label: "Settings", href: "/settings", isCurrent: true }, + ]; + + render(
); + + const link = screen.getByRole("link", { name: "Home" }); + expect(link.textContent).toBe("Home"); + // No aria-label override when not truncated + expect(link.getAttribute("aria-label")).toBeNull(); + }); }); \ No newline at end of file diff --git a/src/pages/Header.tsx b/src/pages/Header.tsx index 2ec9a30..8ee2878 100644 --- a/src/pages/Header.tsx +++ b/src/pages/Header.tsx @@ -40,7 +40,7 @@ export default function Header({ breadcrumbItems }: HeaderProps) {
- +
);