106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
import { render, screen } from "@testing-library/react";
|
|
|
|
import { Breadcrumb, BreadcrumbItem } from "./Breadcrumb";
|
|
|
|
describe("Tests for Breadcrumb component", () => {
|
|
test("Should render correctly with no items", () => {
|
|
render(
|
|
<Breadcrumb>
|
|
<div>Dummy Child</div>
|
|
</Breadcrumb>
|
|
);
|
|
|
|
const breadcrumbNav = screen.getByRole("navigation");
|
|
expect(breadcrumbNav).toBeInTheDocument();
|
|
|
|
const separators = screen.queryAllByText("/");
|
|
expect(separators).toHaveLength(0);
|
|
});
|
|
|
|
test("Should render correctly with custom list props", () => {
|
|
render(
|
|
<Breadcrumb>
|
|
<BreadcrumbItem href="/" listProps={{ className: "custom-list" }}>
|
|
Home
|
|
</BreadcrumbItem>
|
|
<BreadcrumbItem href="/about" listProps={{ className: "custom-list" }}>
|
|
About
|
|
</BreadcrumbItem>
|
|
<BreadcrumbItem href="/contact" listProps={{ className: "custom-list" }}>
|
|
Contact
|
|
</BreadcrumbItem>
|
|
</Breadcrumb>
|
|
);
|
|
|
|
const customListItems = document.querySelectorAll(".custom-list");
|
|
expect(customListItems.length).toBe(3);
|
|
});
|
|
|
|
test("Should generate correct hrefs and labels", () => {
|
|
render(
|
|
<Breadcrumb>
|
|
<BreadcrumbItem href="/category">Category</BreadcrumbItem>
|
|
<BreadcrumbItem href="/category/item">Item</BreadcrumbItem>
|
|
</Breadcrumb>
|
|
);
|
|
|
|
const categoryLink = screen.getByText("Category");
|
|
const itemLink = screen.getByText("Item");
|
|
|
|
expect(categoryLink.getAttribute("href")).toBe("/category");
|
|
expect(itemLink.getAttribute("href")).toBe("/category/item");
|
|
});
|
|
|
|
test("Should /category be a anchor tag", async () => {
|
|
render(
|
|
<Breadcrumb>
|
|
<BreadcrumbItem href="/category">Category</BreadcrumbItem>
|
|
<BreadcrumbItem href="/category/item">Item</BreadcrumbItem>
|
|
</Breadcrumb>
|
|
);
|
|
|
|
const categoryLink = screen.getByText("Category");
|
|
const categoryAnchor = categoryLink.closest("a");
|
|
const categoryItem = categoryAnchor?.parentElement;
|
|
|
|
expect(categoryAnchor).toBeInTheDocument();
|
|
expect(categoryItem?.tagName).toBe("LI");
|
|
expect(categoryAnchor?.getAttribute("href")).toBe("/category");
|
|
});
|
|
|
|
test("Should not render separators when there is only one item", () => {
|
|
render(
|
|
<Breadcrumb>
|
|
<BreadcrumbItem href="/">Home</BreadcrumbItem>
|
|
</Breadcrumb>
|
|
);
|
|
|
|
const separators = screen.queryAllByText("/");
|
|
expect(separators).toHaveLength(0);
|
|
});
|
|
|
|
test("Should render breadcrumbs with correct order when rendered in reverse order", () => {
|
|
render(
|
|
<Breadcrumb>
|
|
<BreadcrumbItem href="/contact">Contact</BreadcrumbItem>
|
|
<BreadcrumbItem href="/about">About</BreadcrumbItem>
|
|
<BreadcrumbItem href="/">Home</BreadcrumbItem>
|
|
</Breadcrumb>
|
|
);
|
|
|
|
const breadcrumbList = screen.getByRole("list");
|
|
const breadcrumbItems = screen.getAllByRole("listitem");
|
|
|
|
expect(breadcrumbItems).toHaveLength(3);
|
|
expect(breadcrumbList).toContainElement(breadcrumbItems[2]);
|
|
expect(breadcrumbList).toContainElement(breadcrumbItems[1]);
|
|
expect(breadcrumbList).toContainElement(breadcrumbItems[0]);
|
|
expect(breadcrumbItems[2]).toHaveTextContent("Home");
|
|
expect(breadcrumbItems[1]).toHaveTextContent("About");
|
|
expect(breadcrumbItems[0]).toHaveTextContent("Contact");
|
|
|
|
const separators = screen.getAllByText("/");
|
|
expect(separators).toHaveLength(2);
|
|
});
|
|
});
|