136 lines
5.6 KiB
TypeScript
136 lines
5.6 KiB
TypeScript
import { describe, it, expect, vi, beforeEach } from "vitest";
|
|
import { render, screen, fireEvent, within } from "@testing-library/react";
|
|
|
|
// usePathname is mockable per-test so we can exercise the auto-expand behaviour.
|
|
let mockPathname = "/dashboard";
|
|
vi.mock("next/navigation", () => ({ usePathname: () => mockPathname }));
|
|
|
|
import { Sidebar } from "@/components/layout/sidebar";
|
|
|
|
beforeEach(() => {
|
|
mockPathname = "/dashboard";
|
|
});
|
|
|
|
function headerButton(label: string) {
|
|
return screen.getByRole("button", { name: new RegExp(`^${label}`, "i") });
|
|
}
|
|
|
|
describe("Sidebar collapsible sections", () => {
|
|
it("renders section headings as toggle buttons, collapsed by default", () => {
|
|
// ADMIN sees a Purchasing-less layout? No — render a MANAGER who has
|
|
// Purchasing + Administration headed sections.
|
|
render(<Sidebar userRole="MANAGER" />);
|
|
|
|
const purchasing = headerButton("Purchasing");
|
|
const administration = headerButton("Administration");
|
|
|
|
expect(purchasing).toHaveAttribute("aria-expanded", "false");
|
|
expect(administration).toHaveAttribute("aria-expanded", "false");
|
|
|
|
// Collapsed → section links are not in the DOM.
|
|
expect(screen.queryByRole("link", { name: /Cost Centres/i })).not.toBeInTheDocument();
|
|
});
|
|
|
|
it("expands a section and reveals its links when its header is clicked", () => {
|
|
render(<Sidebar userRole="MANAGER" />);
|
|
|
|
const purchasing = headerButton("Purchasing");
|
|
fireEvent.click(purchasing);
|
|
|
|
expect(purchasing).toHaveAttribute("aria-expanded", "true");
|
|
expect(screen.getByRole("link", { name: /Cost Centres/i })).toBeInTheDocument();
|
|
});
|
|
|
|
it("collapses other sections when one is opened (single-open accordion)", () => {
|
|
render(<Sidebar userRole="MANAGER" />);
|
|
|
|
const purchasing = headerButton("Purchasing");
|
|
const administration = headerButton("Administration");
|
|
|
|
fireEvent.click(purchasing);
|
|
expect(purchasing).toHaveAttribute("aria-expanded", "true");
|
|
|
|
fireEvent.click(administration);
|
|
expect(administration).toHaveAttribute("aria-expanded", "true");
|
|
// Opening Administration collapses Purchasing.
|
|
expect(purchasing).toHaveAttribute("aria-expanded", "false");
|
|
});
|
|
|
|
it("toggles a section closed when its header is clicked again", () => {
|
|
render(<Sidebar userRole="MANAGER" />);
|
|
|
|
const purchasing = headerButton("Purchasing");
|
|
fireEvent.click(purchasing);
|
|
expect(purchasing).toHaveAttribute("aria-expanded", "true");
|
|
|
|
fireEvent.click(purchasing);
|
|
expect(purchasing).toHaveAttribute("aria-expanded", "false");
|
|
});
|
|
|
|
it("auto-expands the section containing the active route on mount", () => {
|
|
mockPathname = "/admin/vessels"; // Cost Centres lives under Administration (manager mgmt → Purchasing)
|
|
render(<Sidebar userRole="MANAGER" />);
|
|
|
|
// /admin/vessels is in the Purchasing management block for a MANAGER.
|
|
const purchasing = headerButton("Purchasing");
|
|
expect(purchasing).toHaveAttribute("aria-expanded", "true");
|
|
expect(screen.getByRole("link", { name: /Cost Centres/i })).toBeInTheDocument();
|
|
});
|
|
|
|
it("keeps the PPMS brand outside any collapsible section", () => {
|
|
render(<Sidebar userRole="MANAGER" />);
|
|
// Brand text is always visible regardless of section state.
|
|
expect(screen.getByText("PPMS")).toBeInTheDocument();
|
|
});
|
|
|
|
it("renders the always-visible main links outside the sections", () => {
|
|
render(<Sidebar userRole="MANAGER" />);
|
|
expect(screen.getByRole("link", { name: /Dashboard/i })).toBeInTheDocument();
|
|
expect(screen.getByRole("link", { name: /My Profile/i })).toBeInTheDocument();
|
|
});
|
|
|
|
it("scopes revealed links to the opened section", () => {
|
|
render(<Sidebar userRole="MANAGER" />);
|
|
const administration = headerButton("Administration");
|
|
fireEvent.click(administration);
|
|
|
|
// Vendors appears under Administration for a manager.
|
|
const adminVendors = screen.getByRole("link", { name: /Vendors/i });
|
|
expect(adminVendors).toBeInTheDocument();
|
|
expect(within(adminVendors).queryByText("Vendors")).toBeTruthy();
|
|
});
|
|
});
|
|
|
|
describe("Purchase Order links under Purchasing", () => {
|
|
it("renders the renamed PO links inside the Purchasing section (not top-level)", () => {
|
|
render(<Sidebar userRole="MANAGER" />);
|
|
|
|
// Collapsed by default → PO links are not in the DOM until Purchasing opens.
|
|
expect(screen.queryByRole("link", { name: /New Purchase Order/i })).not.toBeInTheDocument();
|
|
|
|
fireEvent.click(headerButton("Purchasing"));
|
|
|
|
expect(screen.getByRole("link", { name: /New Purchase Order/i })).toBeInTheDocument();
|
|
expect(screen.getByRole("link", { name: /Closed Purchase Orders/i })).toBeInTheDocument();
|
|
expect(screen.getByRole("link", { name: /Import Purchase Order/i })).toBeInTheDocument();
|
|
expect(screen.getByRole("link", { name: /Purchase Order History/i })).toBeInTheDocument();
|
|
});
|
|
|
|
it("auto-expands Purchasing when a PO route is active", () => {
|
|
mockPathname = "/po/new";
|
|
render(<Sidebar userRole="MANAGER" />);
|
|
|
|
expect(headerButton("Purchasing")).toHaveAttribute("aria-expanded", "true");
|
|
expect(screen.getByRole("link", { name: /New Purchase Order/i })).toBeInTheDocument();
|
|
});
|
|
|
|
it("drops the old PO labels", () => {
|
|
render(<Sidebar userRole="MANAGER" />);
|
|
fireEvent.click(headerButton("Purchasing"));
|
|
|
|
// Old labels were "New PO" / "Import PO" / "History".
|
|
expect(screen.queryByRole("link", { name: /^New PO$/i })).not.toBeInTheDocument();
|
|
expect(screen.queryByRole("link", { name: /^Import PO$/i })).not.toBeInTheDocument();
|
|
expect(screen.queryByRole("link", { name: /^History$/i })).not.toBeInTheDocument();
|
|
});
|
|
});
|