AgentHub/client/src/pages/__tests__/Users.test.tsx

/**
 * @file Users.test.tsx
 * @description The Users page: local mode and a member are sent home; an
 * analyst reads the table with no account controls; an admin adds a user only
 * with their own password typed (the confirm stays disabled until then), sees
 * a wrong password reported in the edit dialog, opens ONE Edit per row (no
 * separate role/password/workspace/disable buttons any more), and sees the
 * display name and email under a username; right-clicking a row opens that
 * user's home in Files (an admin) — an analyst's menu only copies; clicking a
 * user's name expands their detail under the row (`?user=`), with spend and
 * pool share, and a second click folds it.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { beforeEach, describe, expect, it, vi } from "vitest";
import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { MemoryRouter, Route, Routes, useLocation } from "react-router-dom";
import type { AuthState, ServerUserUsage } from "../../lib/api";

let authState: AuthState = { mode: "local" };
vi.mock("../../components/AuthGate", () => ({
  useAuth: () => ({ state: authState, logout: async () => {} }),
}));

const usage = { cost: 0, tokens: 0 };
const row = (id: number, username: string, role: ServerUserUsage["role"]): ServerUserUsage => ({
  id,
  username,
  role,
  disabled: false,
  workspaces: 0,
  sessions: 0,
  last7d: usage,
  last30d: usage,
});
const users = vi.hoisted(() => ({
  list: vi.fn(),
  audit: vi.fn(),
  storage: vi.fn(),
  create: vi.fn(),
  update: vi.fn(),
  setPassword: vi.fn(),
  assignWorkspace: vi.fn(),
  get: vi.fn(),
  details: vi.fn(),
  avatarUrl: vi.fn(),
  // No S3 here: the members' tmux card stays hidden.
  tmux: vi.fn(async () => ({ available: false, users: [] })),
}));

vi.mock("../../lib/api", async (importOriginal) => {
  const actual = await importOriginal<Record<string, unknown>>();
  return {
    ...actual,
    api: {
      users,
      lanes: { list: vi.fn(async () => ({ lanes: [], counts: {} })) },
      accountPool: {
        list: vi.fn(async () => ({ accounts: [], codex: [], blockPercent: 90 })),
        profiles: vi.fn(async () => ({ profiles: [] })),
      },
      aiTools: {
        list: vi.fn(async () => ({ tools: [], default: null })),
        ompSharing: vi.fn(async () => ({ available: false })),
        iconUrl: (id: string) => `/api/ai-tools/${id}/icon`,
      },
    },
  };
});

import { Users } from "../Users";

function FilesProbe() {
  return <div data-testid="files">{useLocation().search}</div>;
}

function renderPage() {
  return render(
    <MemoryRouter initialEntries={["/users"]}>
      <Routes>
        <Route path="/users" element={<Users />} />
        <Route path="/" element={<div data-testid="home" />} />
        <Route path="/files" element={<FilesProbe />} />
      </Routes>
    </MemoryRouter>
  );
}

beforeEach(() => {
  for (const fn of Object.values(users)) fn.mockReset();
  users.list.mockResolvedValue({
    users: [row(1, "boss", "admin"), row(2, "mia", "developer")],
  });
  users.audit.mockResolvedValue({ entries: [] });
  users.storage.mockResolvedValue({ storage: {}, measuring: false });
  users.get.mockImplementation(async (id: number) => ({
    user: { id, username: "x", role: "developer", disabled: false },
    workspaces: [],
  }));
});

const details = {
  user: {
    id: 2,
    username: "mia",
    role: "developer",
    disabled: false,
    displayName: "Mia Tran",
    logins: 1,
    lastLoginAt: null,
  },
  sessions: { total: 3, active: 1, firstAt: null, lastAt: null },
  usage: {
    today: { cost: 1, tokens: 10 },
    last7d: { cost: 2, tokens: 20 },
    last30d: { cost: 4, tokens: 40 },
    daily: [{ date: "2026-10-27", cost: 4, tokens: 40 }],
    byTool: [{ key: "codex", cost: 4, tokens: 40, sessions: 1 }],
    byModel: [{ key: "gpt-5.5", cost: 4, tokens: 40, sessions: 1 }],
  },
  workspaces: [],
  panes: [],
  recentSessions: [],
  pool: {
    claude: {
      pin: "team-1",
      group: null,
      accounts: [
        {
          name: "team-1",
          kind: "token",
          email: null,
          expired: false,
          allowed: true,
          pinned: true,
          quota: null,
          quotaPercent: null,
          full: false,
          livePanes: 0,
          spend5h: 0,
          spend7d: 10,
          userSpend5h: 0,
          userSpend7d: 2.5,
          userTokens5h: 0,
          userTokens7d: 99,
          userRuns7d: 2,
          userLivePanes: 0,
          userLastAt: null,
        },
      ],
    },
  },
  audit: [],
};

describe("Users page", () => {
  it("expands a user's detail under their row, and folds it again", async () => {
    authState = { mode: "server", user: { id: 1, username: "boss", role: "admin" } };
    users.details.mockResolvedValue(details);
    renderPage();
    fireEvent.click(await screen.findByRole("button", { name: "mia" }));
    const pool = await screen.findByTestId("user-pool-account");
    expect(users.details).toHaveBeenCalledWith(2);
    const page = screen.getByTestId("user-detail");
    expect(within(screen.getByTestId("users-table")).getByTestId("user-detail")).toBe(page);
    expect(within(pool).getByText("team-1")).toBeTruthy();
    expect(within(pool).getByText(/25%/)).toBeTruthy();
    fireEvent.click(screen.getByRole("button", { name: "mia" }));
    await waitFor(() => expect(screen.queryByTestId("user-detail")).toBeNull());
  });

  it("sends local mode and a member home", async () => {
    authState = { mode: "local" };
    renderPage();
    expect(await screen.findByTestId("home")).toBeTruthy();
    authState = { mode: "server", user: { id: 2, username: "mia", role: "developer" } };
    renderPage();
    expect((await screen.findAllByTestId("home")).length).toBeGreaterThan(0);
    expect(users.list).not.toHaveBeenCalled();
  });

  it("shows each user's home size, and re-measures on Refresh", async () => {
    authState = { mode: "server", user: { id: 1, username: "boss", role: "admin" } };
    users.storage.mockResolvedValue({
      storage: {
        1: null,
        2: {
          bytes: 3 * 1024 ** 3,
          files: 1200,
          partial: false,
          measuredAt: "2026-10-14T09:00:00Z",
        },
      },
      measuring: false,
    });
    renderPage();
    expect(await screen.findByText("3.0 GB")).toBeTruthy();
    expect(screen.getByText("Storage")).toBeTruthy();
    expect(users.storage).toHaveBeenLastCalledWith(false);
    fireEvent.click(screen.getByRole("button", { name: /Refresh/ }));
    await waitFor(() => expect(users.storage).toHaveBeenLastCalledWith(true));
  });

  it("shows an analyst the accounts with no controls", async () => {
    authState = { mode: "server", user: { id: 3, username: "ana", role: "analyst" } };
    renderPage();
    expect(await screen.findByText("mia")).toBeTruthy();
    expect(screen.queryByRole("button", { name: "Add user" })).toBeNull();
    expect(screen.queryByRole("button", { name: "Reset password" })).toBeNull();
    expect(screen.getByText("Analysts can view accounts but not change them.")).toBeTruthy();
  });

  it("adds a user only with the admin's own password", async () => {
    authState = { mode: "server", user: { id: 1, username: "boss", role: "admin" } };
    users.create.mockResolvedValue({
      user: { id: 9, username: "neo", role: "developer", disabled: false },
    });
    const ue = userEvent.setup();
    renderPage();
    await ue.click(await screen.findByRole("button", { name: "Add user" }));
    const dialog = await screen.findByRole("dialog");
    await ue.type(screen.getByLabelText("Username"), "neo");
    await ue.type(screen.getByLabelText("Password"), "neo-pass-123");
    const confirm = Array.from(dialog.querySelectorAll("button")).find(
      (b) => b.textContent === "Add user"
    )!;
    expect(confirm.hasAttribute("disabled")).toBe(true);
    await ue.type(screen.getByLabelText("Your password"), "boss-pass");
    expect(confirm.hasAttribute("disabled")).toBe(false);
    // The pool board reads the user list too; count the page's own reload.
    const before = users.list.mock.calls.length;
    await ue.click(confirm);
    await waitFor(() =>
      expect(users.create).toHaveBeenCalledWith(
        { username: "neo", password: "neo-pass-123", role: "developer" },
        "boss-pass"
      )
    );
    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
    expect(users.list).toHaveBeenCalledTimes(before + 1); // reloaded after the change
  });

  it("reports a wrong password in the edit dialog and keeps it open", async () => {
    authState = { mode: "server", user: { id: 1, username: "boss", role: "admin" } };
    users.update.mockRejectedValue(
      Object.assign(new Error("your password is wrong"), { code: "EREAUTH" })
    );
    const ue = userEvent.setup();
    renderPage();
    await screen.findByText("mia");
    await ue.click(screen.getAllByRole("button", { name: "Edit user" })[1]!);
    await ue.type(screen.getByLabelText("New password"), "mia-new-pass-1");
    await ue.type(screen.getByLabelText("Your password"), "wrong{Enter}");
    expect(await screen.findByRole("alert")).toHaveProperty(
      "textContent",
      "Your password is wrong."
    );
    expect(screen.getByRole("dialog")).toBeTruthy();
    expect(users.update).toHaveBeenCalledWith(2, { password: "mia-new-pass-1" }, "wrong");
  });

  it("offers one Edit per row and no separate account buttons", async () => {
    authState = { mode: "server", user: { id: 1, username: "boss", role: "admin" } };
    renderPage();
    await screen.findByText("mia");
    expect(screen.getAllByRole("button", { name: "Edit user" })).toHaveLength(2);
    for (const name of ["Change role", "Reset password", "Give a workspace", "Disable"])
      expect(screen.queryByRole("button", { name })).toBeNull();
  });

  it("shows the display name first, with @username beside it, and the email", async () => {
    authState = { mode: "server", user: { id: 1, username: "boss", role: "admin" } };
    users.list.mockResolvedValue({
      users: [{ ...row(2, "mia", "developer"), displayName: "Mia Tran", email: "mia@x.vn" }],
    });
    renderPage();
    expect(await screen.findByText("Mia Tran")).toBeTruthy();
    expect(screen.getByText("@mia")).toBeTruthy();
    expect(screen.getByText("mia@x.vn")).toBeTruthy();
  });

  it("opens a row's menu on right-click: Open home for an admin, copy only for an analyst", async () => {
    authState = { mode: "server", user: { id: 1, username: "boss", role: "admin" } };
    renderPage();
    fireEvent.contextMenu((await screen.findByText("mia")).closest("tr")!);
    const menu = screen.getByTestId("users-row-menu");
    expect(within(menu).getByRole("menuitem", { name: "Copy username" })).toBeTruthy();
    fireEvent.click(within(menu).getByRole("menuitem", { name: "Open home in Files" }));
    expect((await screen.findByTestId("files")).textContent).toBe("?home=mia");
  });

  it("gives an analyst's row menu no admin actions", async () => {
    authState = { mode: "server", user: { id: 3, username: "ana", role: "analyst" } };
    renderPage();
    fireEvent.contextMenu((await screen.findByText("mia")).closest("tr")!);
    const menu = screen.getByTestId("users-row-menu");
    expect(within(menu).queryByRole("menuitem", { name: "Open home in Files" })).toBeNull();
    expect(within(menu).queryByRole("menuitem", { name: "Edit" })).toBeNull();
  });
});