385 lines
13 KiB
TypeScript
385 lines
13 KiB
TypeScript
// @vitest-environment jsdom
|
|
|
|
import { act } from "react";
|
|
import type { ReactNode } from "react";
|
|
import { createRoot } from "react-dom/client";
|
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
|
import { SidebarSection } from "./SidebarSection";
|
|
import { SidebarNavExpandedProvider } from "./SidebarNavItem";
|
|
import { Plus } from "lucide-react";
|
|
|
|
const sidebarState = vi.hoisted(() => ({
|
|
isMobile: false,
|
|
collapsed: false,
|
|
peeking: false,
|
|
}));
|
|
|
|
vi.mock("@/lib/router", () => ({
|
|
Link: ({ children, to, ...props }: { children: ReactNode; to: string }) => (
|
|
<a href={to} {...props}>{children}</a>
|
|
),
|
|
NavLink: ({ children, to, ...props }: { children: ReactNode; to: string }) => (
|
|
<a href={to} {...props}>{children}</a>
|
|
),
|
|
}));
|
|
|
|
vi.mock("../context/SidebarContext", () => ({
|
|
useSidebar: () => sidebarState,
|
|
}));
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
|
|
|
|
if (!globalThis.PointerEvent) {
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
(globalThis as any).PointerEvent = MouseEvent;
|
|
}
|
|
|
|
async function flushReact() {
|
|
await act(async () => {
|
|
await Promise.resolve();
|
|
await new Promise((resolve) => window.setTimeout(resolve, 0));
|
|
});
|
|
}
|
|
|
|
async function openSectionMenu(container: HTMLElement) {
|
|
const trigger = container.querySelector('button[aria-label="Projects section actions"]');
|
|
expect(trigger).not.toBeNull();
|
|
|
|
await act(async () => {
|
|
trigger?.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, button: 0 }));
|
|
trigger?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
|
});
|
|
await flushReact();
|
|
}
|
|
|
|
describe("SidebarSection", () => {
|
|
let container: HTMLDivElement;
|
|
let root: ReturnType<typeof createRoot> | null;
|
|
|
|
beforeEach(() => {
|
|
sidebarState.isMobile = false;
|
|
sidebarState.collapsed = false;
|
|
sidebarState.peeking = false;
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = null;
|
|
});
|
|
|
|
afterEach(async () => {
|
|
const currentRoot = root;
|
|
if (currentRoot) {
|
|
await act(async () => {
|
|
currentRoot.unmount();
|
|
});
|
|
}
|
|
container.remove();
|
|
document.body.innerHTML = "";
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
it("keeps static and collapsible section labels on the same text column", async () => {
|
|
const currentRoot = createRoot(container);
|
|
root = currentRoot;
|
|
|
|
await act(async () => {
|
|
currentRoot.render(
|
|
<div>
|
|
<SidebarSection label="Work">
|
|
<a href="/issues">Issues</a>
|
|
</SidebarSection>
|
|
<SidebarSection label="Projects" collapsible={{ open: true, onOpenChange: vi.fn() }}>
|
|
<a href="/projects">Projects</a>
|
|
</SidebarSection>
|
|
</div>,
|
|
);
|
|
});
|
|
await flushReact();
|
|
|
|
const workLabel = Array.from(container.querySelectorAll("span"))
|
|
.find((element) => element.textContent === "Work");
|
|
const projectsLabel = Array.from(container.querySelectorAll("span"))
|
|
.find((element) => element.textContent === "Projects");
|
|
|
|
expect(workLabel?.parentElement?.textContent).toBe("Work");
|
|
expect(projectsLabel?.parentElement?.textContent).toBe("Projects");
|
|
expect(projectsLabel?.parentElement?.querySelector("svg")).toBeNull();
|
|
expect(container.querySelector('button[aria-label="Collapse Projects"] svg')).toBeTruthy();
|
|
});
|
|
|
|
it("keeps collapse on the caret and opens the menu from the heading", async () => {
|
|
const onOpenChange = vi.fn();
|
|
const currentRoot = createRoot(container);
|
|
root = currentRoot;
|
|
|
|
await act(async () => {
|
|
currentRoot.render(
|
|
<SidebarSection
|
|
label="Projects"
|
|
collapsible={{ open: true, onOpenChange }}
|
|
menu={{
|
|
ariaLabel: "Projects section actions",
|
|
actions: [{ type: "item", label: "Browse projects", href: "/projects" }],
|
|
}}
|
|
>
|
|
<a href="/projects">Projects</a>
|
|
</SidebarSection>,
|
|
);
|
|
});
|
|
await flushReact();
|
|
|
|
await openSectionMenu(container);
|
|
|
|
expect(onOpenChange).not.toHaveBeenCalled();
|
|
expect(document.body.textContent).toContain("Browse projects");
|
|
|
|
const caret = container.querySelector('button[aria-label="Collapse Projects"]');
|
|
await act(async () => {
|
|
caret?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
|
});
|
|
|
|
expect(onOpenChange).toHaveBeenCalledWith(false);
|
|
});
|
|
|
|
it("does not apply hover background classes to static section labels", async () => {
|
|
const currentRoot = createRoot(container);
|
|
root = currentRoot;
|
|
|
|
await act(async () => {
|
|
currentRoot.render(
|
|
<SidebarSection label="Work">
|
|
<a href="/issues">Issues</a>
|
|
</SidebarSection>,
|
|
);
|
|
});
|
|
await flushReact();
|
|
|
|
const workLabel = Array.from(container.querySelectorAll("span"))
|
|
.find((element) => element.textContent === "Work");
|
|
const staticLabelControl = workLabel?.parentElement;
|
|
|
|
expect(staticLabelControl?.tagName).toBe("DIV");
|
|
expect(staticLabelControl?.getAttribute("class")).not.toContain("hover:bg-accent/50");
|
|
expect(staticLabelControl?.getAttribute("class")).not.toContain("focus-visible:bg-accent/50");
|
|
});
|
|
|
|
it("keeps section labels visible inside an expanded contextual pane", async () => {
|
|
sidebarState.collapsed = true;
|
|
const currentRoot = createRoot(container);
|
|
root = currentRoot;
|
|
|
|
await act(async () => {
|
|
currentRoot.render(
|
|
<SidebarNavExpandedProvider>
|
|
<SidebarSection label="Settings">
|
|
<a href="/settings">General</a>
|
|
</SidebarSection>
|
|
</SidebarNavExpandedProvider>,
|
|
);
|
|
});
|
|
await flushReact();
|
|
|
|
const settingsLabel = Array.from(container.querySelectorAll("span"))
|
|
.find((element) => element.textContent === "Settings");
|
|
|
|
expect(settingsLabel).toBeTruthy();
|
|
expect(settingsLabel?.getAttribute("class")).toContain("uppercase");
|
|
expect(container.querySelector(".bg-border\\/60")).toBeNull();
|
|
});
|
|
|
|
it("keeps the header action outside the label menu hit area", async () => {
|
|
const onAction = vi.fn();
|
|
const currentRoot = createRoot(container);
|
|
root = currentRoot;
|
|
|
|
await act(async () => {
|
|
currentRoot.render(
|
|
<SidebarSection
|
|
label="Projects"
|
|
menu={{
|
|
ariaLabel: "Projects section actions",
|
|
actions: [{ type: "item", label: "Browse projects", href: "/projects" }],
|
|
}}
|
|
headerAction={{
|
|
ariaLabel: "New project",
|
|
icon: Plus,
|
|
onClick: onAction,
|
|
}}
|
|
>
|
|
<a href="/projects">Projects</a>
|
|
</SidebarSection>,
|
|
);
|
|
});
|
|
await flushReact();
|
|
|
|
const sectionMenuTrigger = container.querySelector('button[aria-label="Projects section actions"]');
|
|
const newProjectButton = container.querySelector('button[aria-label="New project"]');
|
|
|
|
expect(sectionMenuTrigger?.textContent).toContain("Projects");
|
|
expect(sectionMenuTrigger?.querySelector("svg")).toBeNull();
|
|
expect(sectionMenuTrigger?.getAttribute("class")).toContain("hover:bg-accent/50");
|
|
expect(newProjectButton).toBeTruthy();
|
|
|
|
await act(async () => {
|
|
newProjectButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
|
});
|
|
await flushReact();
|
|
|
|
expect(onAction).toHaveBeenCalledTimes(1);
|
|
expect(document.body.textContent).not.toContain("Browse projects");
|
|
|
|
await openSectionMenu(container);
|
|
expect(document.body.textContent).toContain("Browse projects");
|
|
});
|
|
|
|
it("renders configured menu actions and radio choices", async () => {
|
|
const onAction = vi.fn();
|
|
const onRadioValueChange = vi.fn();
|
|
const currentRoot = createRoot(container);
|
|
root = currentRoot;
|
|
|
|
await act(async () => {
|
|
currentRoot.render(
|
|
<SidebarSection
|
|
label="Projects"
|
|
menu={{
|
|
ariaLabel: "Projects section actions",
|
|
actions: [
|
|
{ type: "item", label: "New project", onSelect: onAction },
|
|
{ type: "item", label: "Browse projects", href: "/projects" },
|
|
{ type: "separator" },
|
|
],
|
|
radioChoices: [
|
|
{ value: "top", label: "Top" },
|
|
{ value: "alphabetical", label: "Alphabetical" },
|
|
],
|
|
radioValue: "top",
|
|
onRadioValueChange,
|
|
}}
|
|
>
|
|
<a href="/projects">Projects</a>
|
|
</SidebarSection>,
|
|
);
|
|
});
|
|
await flushReact();
|
|
|
|
await openSectionMenu(container);
|
|
|
|
const newProjectItem = Array.from(document.body.querySelectorAll('[data-slot="dropdown-menu-item"]'))
|
|
.find((element) => element.textContent?.includes("New project"));
|
|
expect(newProjectItem).toBeTruthy();
|
|
const browseLink = Array.from(document.body.querySelectorAll("a"))
|
|
.find((element) => element.textContent?.includes("Browse projects"));
|
|
expect(browseLink?.getAttribute("href")).toBe("/projects");
|
|
|
|
const alphabeticalItem = Array.from(document.body.querySelectorAll('[data-slot="dropdown-menu-radio-item"]'))
|
|
.find((element) => element.textContent?.includes("Alphabetical"));
|
|
expect(alphabeticalItem).toBeTruthy();
|
|
|
|
await act(async () => {
|
|
alphabeticalItem?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
|
});
|
|
expect(onRadioValueChange).toHaveBeenCalledWith("alphabetical");
|
|
|
|
await openSectionMenu(container);
|
|
const reopenedNewProjectItem = Array.from(document.body.querySelectorAll('[data-slot="dropdown-menu-item"]'))
|
|
.find((element) => element.textContent?.includes("New project"));
|
|
|
|
await act(async () => {
|
|
reopenedNewProjectItem?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
|
});
|
|
expect(onAction).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it("replaces the header with a divider and drops the caret in the collapsed rail", async () => {
|
|
sidebarState.collapsed = true;
|
|
const currentRoot = createRoot(container);
|
|
root = currentRoot;
|
|
|
|
await act(async () => {
|
|
currentRoot.render(
|
|
<SidebarSection
|
|
label="Projects"
|
|
collapsible={{ open: true, onOpenChange: vi.fn() }}
|
|
menu={{
|
|
ariaLabel: "Projects section actions",
|
|
actions: [{ type: "item", label: "Browse projects", href: "/projects" }],
|
|
}}
|
|
>
|
|
<a href="/projects">Projects</a>
|
|
</SidebarSection>,
|
|
);
|
|
});
|
|
await flushReact();
|
|
|
|
// The clipped header text is gone; the caret/menu trigger is not rendered.
|
|
expect(container.querySelector('button[aria-label="Collapse Projects"]')).toBeNull();
|
|
expect(container.querySelector('button[aria-label="Projects section actions"]')).toBeNull();
|
|
|
|
// The label is preserved in the a11y tree (sr-only) and the items still render.
|
|
const label = Array.from(container.querySelectorAll("span"))
|
|
.find((element) => element.textContent === "Projects");
|
|
expect(label?.className).toContain("sr-only");
|
|
expect(container.querySelector('a[href="/projects"]')).toBeTruthy();
|
|
});
|
|
|
|
it("restores the full header while peeking even when collapsed", async () => {
|
|
sidebarState.collapsed = true;
|
|
sidebarState.peeking = true;
|
|
const currentRoot = createRoot(container);
|
|
root = currentRoot;
|
|
|
|
await act(async () => {
|
|
currentRoot.render(
|
|
<SidebarSection label="Projects" collapsible={{ open: true, onOpenChange: vi.fn() }}>
|
|
<a href="/projects">Projects</a>
|
|
</SidebarSection>,
|
|
);
|
|
});
|
|
await flushReact();
|
|
|
|
const label = Array.from(container.querySelectorAll("span"))
|
|
.find((element) => element.textContent === "Projects");
|
|
expect(label?.className).not.toContain("sr-only");
|
|
expect(container.querySelector('button[aria-label="Collapse Projects"]')).toBeTruthy();
|
|
});
|
|
|
|
it("keeps section header controls visible on mobile", async () => {
|
|
sidebarState.isMobile = true;
|
|
const currentRoot = createRoot(container);
|
|
root = currentRoot;
|
|
|
|
await act(async () => {
|
|
currentRoot.render(
|
|
<SidebarSection
|
|
label="Projects"
|
|
collapsible={{ open: false, onOpenChange: vi.fn() }}
|
|
menu={{
|
|
ariaLabel: "Projects section actions",
|
|
actions: [{ type: "item", label: "New project" }],
|
|
}}
|
|
headerAction={{
|
|
ariaLabel: "New project",
|
|
icon: Plus,
|
|
onClick: vi.fn(),
|
|
}}
|
|
>
|
|
<a href="/projects">Projects</a>
|
|
</SidebarSection>,
|
|
);
|
|
});
|
|
await flushReact();
|
|
|
|
const projectsLabel = Array.from(container.querySelectorAll("span"))
|
|
.find((element) => element.textContent === "Projects");
|
|
const caret = container.querySelector('button[aria-label="Expand Projects"] svg');
|
|
const action = container.querySelector('button[aria-label="New project"]');
|
|
|
|
expect(caret?.getAttribute("class")).toContain("opacity-100");
|
|
expect(caret?.getAttribute("class")).not.toContain("opacity-0");
|
|
expect(projectsLabel?.parentElement?.textContent).toBe("Projects");
|
|
expect(action?.getAttribute("class")).toContain("opacity-100");
|
|
expect(action?.getAttribute("class")).not.toContain("opacity-0");
|
|
});
|
|
});
|