/** * @file WorkspaceTree.test.tsx * @description Tests for the sidebar's workspace list: one flat row per * workspace in the stored order, a row expanding to its sessions (remembered), * a live session opening its pane and an ended one its transcript, the * workspace's OWN sessions only, a session's state dot, rename and archive, * selection * by URL, Alt+arrow reordering kept in localStorage, double-click rename, the * search, the row menu's items by kind and tool, and the status dot. * @author Nguyễn Ngọc Trí Vĩ */ import { describe, it, expect, vi, beforeEach } from "vitest"; import { render, screen, waitFor, within, fireEvent } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { MemoryRouter, Route, Routes, useLocation } from "react-router-dom"; import type { Lane, Session } from "../../lib/types"; function lane(id: number, cwd: string, extra: Partial = {}): Lane { return { id, title: "", cwd, branch: null, kind: "adopted", tool: "claude", router_profile: null, source_repo: null, pipeline: "default", session_id: null, run_id: null, stage: "idle", stage_since: null, status: "idle", needs_action: null, liveness: "idle", pipeline_nodes: [], ...extra, } as unknown as Lane; } const session = (id: string, name: string) => ({ id, name, cwd: "/r", status: "completed", started_at: "2026-09-30T10:00:00Z" }) as Session; let lanes: Lane[] = []; vi.mock("../../lib/api", async (importOriginal) => { const actual = await importOriginal>(); return { ...actual, api: { lanes: { list: vi.fn(async () => ({ lanes, counts: {} })), update: vi.fn(async () => ({ lane: lanes[0] })), action: vi.fn(async () => ({ ok: true })), routerList: vi.fn(async () => ({ routers: [] })), }, sessions: { list: vi.fn(async () => ({ sessions: [session("s-live", "Live one"), session("s-old", "Old one")], })), patch: vi.fn(async () => ({ session: {} })), }, run: { list: vi.fn(async () => ({ items: [{ id: "agenthub-lane-1-2", laneId: 1, status: "running", sessionId: "s-live" }], })), cwds: vi.fn(async () => ({ items: [] })), }, aiTools: { list: vi.fn(async () => ({ tools: [], default: "claude" })), iconUrl: () => "", }, aiRouters: { list: vi.fn(async () => ({ routers: [] })) }, }, }; }); import { api } from "../../lib/api"; import { WorkspaceTree } from "../WorkspaceTree"; import { workspaceDot } from "../lanes/WorkspaceRow"; function Where() { const loc = useLocation(); return {loc.pathname + loc.search}; } function renderTree(at = "/") { return render( } /> ); } const rowIds = () => screen.getAllByTestId(/^workspace-row-\d+$/).map((el) => el.dataset.testid); beforeEach(() => { localStorage.clear(); vi.clearAllMocks(); vi.mocked(api.sessions.list).mockImplementation(async () => ({ sessions: [session("s-live", "Live one"), session("s-old", "Old one")], total: 2, limit: 20, offset: 0, })); lanes = [ lane(1, "/r", { title: "Repo" }), lane(2, "/r/sub", { title: "Sub" }), lane(3, "/tmp/plain", { kind: "managed", tool: "codex" }), ]; }); describe("WorkspaceTree", () => { it("lists every workspace on one flat level, collapsed", async () => { renderTree(); await screen.findByTestId("workspace-row-3"); expect(rowIds()).toEqual(["workspace-row-1", "workspace-row-2", "workspace-row-3"]); expect(screen.getByTestId("workspace-row-3")).toHaveTextContent("plain"); expect(screen.queryByTestId("workspace-sessions-1")).toBeNull(); expect(api.sessions.list).not.toHaveBeenCalled(); }); it("expands a workspace to its sessions and remembers it", async () => { const user = userEvent.setup(); renderTree(); await user.click(await screen.findByTestId("workspace-toggle-1")); const list = await screen.findByTestId("workspace-sessions-1"); expect(within(list).getByText("Live one")).toBeInTheDocument(); // Its OWN sessions only — never the rest of its folder. expect(api.sessions.list).toHaveBeenCalledTimes(1); expect(api.sessions.list).toHaveBeenCalledWith({ lane: 1, archived: false, limit: 20 }); expect(JSON.parse(localStorage.getItem("agenthub.sidebar.projects")!).expanded).toEqual({ "1": true, }); }); it("renames a session on double-click + Enter, and archives one from its row", async () => { const user = userEvent.setup(); renderTree(); await user.click(await screen.findByTestId("workspace-toggle-1")); await user.dblClick(await screen.findByTestId("workspace-session-s-old")); const input = screen.getByTestId("workspace-session-rename-s-old"); await user.clear(input); await user.type(input, "Better name{Enter}"); expect(api.sessions.patch).toHaveBeenCalledWith("s-old", { name: "Better name" }); await user.click(screen.getByTestId("workspace-session-archive-s-live")); expect(api.sessions.patch).toHaveBeenCalledWith("s-live", { archived: true }); }); it("dots a session waiting for the user amber and a failed one red", async () => { vi.mocked(api.sessions.list).mockImplementation(async () => ({ sessions: [ { ...session("s-wait", "Waiting"), status: "active", awaiting_input_since: "2026-09-30T10:00:00Z", } as Session, { ...session("s-bad", "Broke"), status: "error" } as Session, ], total: 2, limit: 20, offset: 0, })); const user = userEvent.setup(); renderTree(); await user.click(await screen.findByTestId("workspace-toggle-1")); expect(await screen.findByTestId("workspace-session-dot-s-wait")).toHaveClass( "bg-status-warning" ); expect(screen.getByTestId("workspace-session-dot-s-bad")).toHaveClass("bg-status-danger"); }); it("opens a live session's pane and an ended session's transcript, resuming nothing", async () => { const user = userEvent.setup(); renderTree(); await user.click(await screen.findByTestId("workspace-toggle-1")); const live = await screen.findByTestId("workspace-session-s-live"); await waitFor(() => expect(live).toHaveAttribute("data-live", "true")); await user.click(live); expect(screen.getByTestId("where").textContent).toBe("/workspace?lane=1&run=agenthub-lane-1-2"); // Ctrl+click asks for a second pane. fireEvent.click(live, { ctrlKey: true }); expect(screen.getByTestId("where").textContent).toBe( "/workspace?lane=1&run=agenthub-lane-1-2&pane=1" ); await user.click(screen.getByTestId("workspace-session-s-old")); expect(screen.getByTestId("where").textContent).toBe("/sessions/s-old"); expect(api.lanes.action).not.toHaveBeenCalled(); }); it("selects by URL, and a click selects and expands", async () => { const user = userEvent.setup(); renderTree("/workspace?lane=2"); expect(await screen.findByTestId("workspace-open-2")).toHaveAttribute("aria-current", "true"); await user.click(screen.getByTestId("workspace-open-1")); expect(screen.getByTestId("where").textContent).toBe("/workspace?lane=1"); expect(await screen.findByTestId("workspace-sessions-1")).toBeInTheDocument(); }); it("reorders with Alt+ArrowUp and keeps the order in localStorage", async () => { renderTree(); fireEvent.keyDown(await screen.findByTestId("workspace-open-2"), { key: "ArrowUp", altKey: true, }); expect(JSON.parse(localStorage.getItem("agenthub.workspace.laneOrder")!)).toEqual([2, 1, 3]); expect(rowIds()).toEqual(["workspace-row-2", "workspace-row-1", "workspace-row-3"]); }); it("renames on double-click + Enter, and Escape cancels without a call", async () => { const user = userEvent.setup(); renderTree(); await user.dblClick(await screen.findByTestId("workspace-open-2")); const input = screen.getByTestId("workspace-rename-2"); await user.clear(input); await user.type(input, " Renamed {Enter}"); expect(api.lanes.update).toHaveBeenCalledWith(2, { title: "Renamed" }); vi.mocked(api.lanes.update).mockClear(); await user.dblClick(screen.getByTestId("workspace-open-2")); await user.type(screen.getByTestId("workspace-rename-2"), "x{Escape}"); expect(api.lanes.update).not.toHaveBeenCalled(); }); it("filters workspaces by search", async () => { const user = userEvent.setup(); renderTree(); await screen.findByTestId("workspace-row-1"); await user.click(screen.getByRole("button", { name: "Search workspaces and sessions" })); await user.type(screen.getByRole("searchbox"), "plain"); expect(rowIds()).toEqual(["workspace-row-3"]); }); it("filters by tool, remembered, and offers the filter only with two tools", async () => { const user = userEvent.setup(); const { unmount } = renderTree(); await screen.findByTestId("workspace-row-1"); await user.selectOptions(screen.getByLabelText("Filter by tool"), "codex"); expect(rowIds()).toEqual(["workspace-row-3"]); expect(JSON.parse(localStorage.getItem("agenthub.sidebar.projects")!).tool).toBe("codex"); await user.selectOptions(screen.getByLabelText("Filter by tool"), ""); expect(rowIds()).toEqual(["workspace-row-1", "workspace-row-2", "workspace-row-3"]); unmount(); // One tool only: no filter, and a stale stored one is ignored. localStorage.setItem("agenthub.sidebar.projects", JSON.stringify({ tool: "codex" })); lanes = lanes.filter((l) => l.tool === "claude"); renderTree(); await screen.findByTestId("workspace-row-1"); expect(screen.queryByLabelText("Filter by tool")).toBeNull(); expect(rowIds()).toEqual(["workspace-row-1", "workspace-row-2"]); }); it("reorders within a tool filter without losing the hidden workspaces' places", async () => { localStorage.setItem("agenthub.workspace.laneOrder", JSON.stringify([1, 3, 2])); localStorage.setItem("agenthub.sidebar.projects", JSON.stringify({ tool: "claude" })); renderTree(); fireEvent.keyDown(await screen.findByTestId("workspace-open-2"), { key: "ArrowUp", altKey: true, }); expect(JSON.parse(localStorage.getItem("agenthub.workspace.laneOrder")!)).toEqual([2, 3, 1]); expect(rowIds()).toEqual(["workspace-row-2", "workspace-row-1"]); }); it("finds a workspace by one of its session names, showing only the matches", async () => { vi.mocked(api.sessions.list).mockImplementation(async (params) => ({ sessions: (params as { lane?: number }).lane === 2 ? [session("s-x", "Fix login bug"), session("s-y", "Docs")] : [session("s-live", "Live one"), session("s-old", "Old one")], total: 2, limit: 20, offset: 0, })); const user = userEvent.setup(); renderTree(); await screen.findByTestId("workspace-row-1"); await user.click(screen.getByRole("button", { name: "Search workspaces and sessions" })); await user.type(screen.getByRole("searchbox"), "login"); await waitFor(() => expect(rowIds()).toEqual(["workspace-row-2"])); expect(screen.getByTestId("workspace-session-s-x")).toBeVisible(); expect(screen.queryByTestId("workspace-session-s-y")).toBeNull(); // A workspace whose NAME matches keeps all of its sessions. await user.clear(screen.getByRole("searchbox")); await user.type(screen.getByRole("searchbox"), "sub"); await waitFor(() => expect(rowIds()).toEqual(["workspace-row-2"])); expect(screen.getByTestId("workspace-session-s-y")).toBeInTheDocument(); }); it("offers Reset only on a managed workspace and the readme run only on claude", async () => { const user = userEvent.setup(); renderTree(); await user.click(await screen.findByTestId("workspace-menu-1")); let menu = screen.getByTestId("workspace-row-menu-1"); expect(within(menu).queryByText("Reset worktree…")).toBeNull(); expect(within(menu).getByText("Create/update readme file")).toBeInTheDocument(); expect(within(menu).getByText("Delete workspace…")).toBeInTheDocument(); await user.keyboard("{Escape}"); await user.click(screen.getByTestId("workspace-menu-3")); menu = screen.getByTestId("workspace-row-menu-3"); expect(within(menu).getByText("Reset worktree…")).toBeInTheDocument(); expect(within(menu).queryByText("Create/update readme file")).toBeNull(); }); }); describe("workspaceDot", () => { it("maps needs-you, dead/error, running, active and idle", () => { expect(workspaceDot(lane(1, "/a", { needs_action: "x", status: "running" }))).toBe( "bg-status-warning" ); expect(workspaceDot(lane(1, "/a", { liveness: "dead" }))).toBe("bg-status-danger"); expect(workspaceDot(lane(1, "/a", { status: "error" }))).toBe("bg-status-danger"); expect(workspaceDot(lane(1, "/a", { status: "running" }))).toContain("animate-pulse-slow"); expect(workspaceDot(lane(1, "/a", { liveness: "active" }))).toBe("bg-status-success"); expect(workspaceDot(lane(1, "/a"))).toBe("bg-surface-4"); }); });