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.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { beforeEach, describe, expect, it, vi } from "vitest";
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { MemoryRouter, Route, Routes } 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(),
  create: vi.fn(),
  update: vi.fn(),
  setPassword: vi.fn(),
  assignWorkspace: vi.fn(),
  get: vi.fn(),
}));

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 })),
      },
    },
  };
});

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

function renderPage() {
  return render(
    <MemoryRouter initialEntries={["/users"]}>
      <Routes>
        <Route path="/users" element={<Users />} />
        <Route path="/" element={<div data-testid="home" />} />
      </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.get.mockImplementation(async (id: number) => ({
    user: { id, username: "x", role: "developer", disabled: false },
    workspaces: [],
  }));
});

describe("Users page", () => {
  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 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);
    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(2); // 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();
  });
});