7c35f262cf
- Export DashboardPage for testability - Initialize statusFilter from sessionStorage (key: initiatives.statusFilter), falling back to "active" when absent or invalid - Write new filter value to sessionStorage on every change via handleStatusFilterChange, enabling same-session navigation persistence - Add aria-label="Status" to the status select for accessible querying - Add Vitest unit tests covering all 8 scenarios (default, read, write, fallback) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
105 lines
4.0 KiB
TypeScript
105 lines
4.0 KiB
TypeScript
// @vitest-environment happy-dom
|
|
import "@testing-library/jest-dom/vitest";
|
|
import { render, screen, fireEvent } from "@testing-library/react";
|
|
import { vi, describe, it, expect, beforeEach } from "vitest";
|
|
|
|
// ── Mocks ────────────────────────────────────────────────────────────────────
|
|
|
|
vi.mock("@tanstack/react-router", () => ({
|
|
createFileRoute: () => () => ({}),
|
|
useNavigate: () => vi.fn(),
|
|
}));
|
|
|
|
vi.mock("@/lib/trpc", () => ({
|
|
trpc: {
|
|
listProjects: { useQuery: () => ({ data: [] }) },
|
|
useUtils: () => ({}),
|
|
},
|
|
}));
|
|
|
|
vi.mock("@/hooks", () => ({
|
|
useLiveUpdates: vi.fn(),
|
|
INITIATIVE_LIST_RULES: {},
|
|
}));
|
|
|
|
vi.mock("@/components/InitiativeList", () => ({
|
|
InitiativeList: () => <div data-testid="initiative-list" />,
|
|
}));
|
|
|
|
vi.mock("@/components/CreateInitiativeDialog", () => ({
|
|
CreateInitiativeDialog: () => null,
|
|
}));
|
|
|
|
// ── Import after mocks ───────────────────────────────────────────────────────
|
|
|
|
import { DashboardPage } from "@/routes/initiatives/index";
|
|
|
|
// ── Helpers ──────────────────────────────────────────────────────────────────
|
|
|
|
function renderPage() {
|
|
return render(<DashboardPage />);
|
|
}
|
|
|
|
// ── Tests ────────────────────────────────────────────────────────────────────
|
|
|
|
describe("DashboardPage — statusFilter default and sessionStorage", () => {
|
|
beforeEach(() => {
|
|
sessionStorage.clear();
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
it("defaults to 'active' when sessionStorage is empty", () => {
|
|
renderPage();
|
|
const select = screen.getByRole("combobox", { name: /status/i }) as HTMLSelectElement;
|
|
expect(select.value).toBe("active");
|
|
});
|
|
|
|
it("displays the 'Active' option as selected on first render", () => {
|
|
renderPage();
|
|
const select = screen.getByDisplayValue("Active") as HTMLSelectElement;
|
|
expect(select.value).toBe("active");
|
|
});
|
|
|
|
it("reads 'completed' from sessionStorage as initial value", () => {
|
|
sessionStorage.setItem("initiatives.statusFilter", "completed");
|
|
renderPage();
|
|
const select = screen.getByDisplayValue("Completed") as HTMLSelectElement;
|
|
expect(select.value).toBe("completed");
|
|
});
|
|
|
|
it("reads 'archived' from sessionStorage as initial value", () => {
|
|
sessionStorage.setItem("initiatives.statusFilter", "archived");
|
|
renderPage();
|
|
const select = screen.getByDisplayValue("Archived") as HTMLSelectElement;
|
|
expect(select.value).toBe("archived");
|
|
});
|
|
|
|
it("falls back to 'active' when sessionStorage contains an invalid value", () => {
|
|
sessionStorage.setItem("initiatives.statusFilter", "bogus");
|
|
renderPage();
|
|
const select = screen.getByDisplayValue("Active") as HTMLSelectElement;
|
|
expect(select.value).toBe("active");
|
|
});
|
|
|
|
it("writes the new value to sessionStorage when the filter changes", () => {
|
|
renderPage();
|
|
const select = screen.getByDisplayValue("Active");
|
|
fireEvent.change(select, { target: { value: "all" } });
|
|
expect(sessionStorage.getItem("initiatives.statusFilter")).toBe("all");
|
|
});
|
|
|
|
it("updates the select's displayed value after the filter changes", () => {
|
|
renderPage();
|
|
const select = screen.getByDisplayValue("Active");
|
|
fireEvent.change(select, { target: { value: "completed" } });
|
|
expect((select as HTMLSelectElement).value).toBe("completed");
|
|
});
|
|
|
|
it("writes 'archived' to sessionStorage when filter changes to archived", () => {
|
|
renderPage();
|
|
const select = screen.getByDisplayValue("Active");
|
|
fireEvent.change(select, { target: { value: "archived" } });
|
|
expect(sessionStorage.getItem("initiatives.statusFilter")).toBe("archived");
|
|
});
|
|
});
|