diff --git a/src/ui/layout/Breadcrumbs.test.tsx b/src/ui/layout/Breadcrumbs.test.tsx new file mode 100644 index 00000000..8cf2d0ad --- /dev/null +++ b/src/ui/layout/Breadcrumbs.test.tsx @@ -0,0 +1,68 @@ +// @vitest-environment jsdom +import { describe, it, expect, vi } from "vitest"; +import { render, screen } from "@testing-library/react"; +import { Breadcrumbs } from "./Breadcrumbs.js"; + +vi.mock("@/i18n/provider.js", () => ({ + useTranslation: () => ({ t: (k: string) => k }), +})); + +// Suppress SCSS import errors in jsdom +vi.mock("./Breadcrumbs.scss", () => ({})); + +describe("Breadcrumbs", () => { + it("renders the nav with data-testid breadcrumbs", () => { + render(); + expect(screen.getByTestId("breadcrumbs")).toBeTruthy(); + }); + + it("last crumb rendered as has aria-current='page'", () => { + render(); + const span = screen.getByText("Flights"); + expect(span.tagName.toLowerCase()).toBe("span"); + expect(span.getAttribute("aria-current")).toBe("page"); + }); + + it("last crumb rendered as (with url) has aria-current='page'", () => { + render( + , + ); + const link = screen.getByText("Results"); + expect(link.tagName.toLowerCase()).toBe("a"); + expect(link.getAttribute("aria-current")).toBe("page"); + }); + + it("non-last crumb rendered as does NOT have aria-current", () => { + render( + , + ); + const link = screen.getByText("Online Board"); + expect(link.tagName.toLowerCase()).toBe("a"); + expect(link.getAttribute("aria-current")).toBeNull(); + }); + + it("non-last crumb rendered as does NOT have aria-current", () => { + // The home crumb (index 0) has url so it won't be a span, but we can + // check an intermediate span by using items without url at non-last position + render( + , + ); + const intermediate = screen.getByText("Intermediate"); + expect(intermediate.getAttribute("aria-current")).toBeNull(); + }); +}); diff --git a/src/ui/layout/Breadcrumbs.tsx b/src/ui/layout/Breadcrumbs.tsx index f9e3ec96..3e8eb8d6 100644 --- a/src/ui/layout/Breadcrumbs.tsx +++ b/src/ui/layout/Breadcrumbs.tsx @@ -46,7 +46,13 @@ export const Breadcrumbs: FC = ({ items = [] }) => { className={`breadcrumbs__item${isLast ? " breadcrumbs__item--active" : ""}`} > {showAsLink ? ( - {item.label} + + {item.label} + ) : (