AgentHub/client/src/components/__tests__/WorkspaceTree.test.tsx

/**
 * @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, 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ĩ <vinnt@smartgift.vn>
 */

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> = {}): 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<Record<string, unknown>>();
  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")],
        })),
      },
      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 <span data-testid="where">{loc.pathname + loc.search}</span>;
}

function renderTree(at = "/") {
  return render(
    <MemoryRouter initialEntries={[at]}>
      <Routes>
        <Route
          path="*"
          element={
            <>
              <WorkspaceTree />
              <Where />
            </>
          }
        />
      </Routes>
    </MemoryRouter>
  );
}

const rowIds = () => screen.getAllByTestId(/^workspace-row-\d+$/).map((el) => el.dataset.testid);

beforeEach(() => {
  localStorage.clear();
  vi.clearAllMocks();
  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();
    expect(api.sessions.list).toHaveBeenCalledWith({ cwd: "/r", tool: "claude", limit: 20 });
    expect(JSON.parse(localStorage.getItem("agenthub.sidebar.projects")!).expanded).toEqual({
      "1": true,
    });
  });

  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");
    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("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");
  });
});