AgentHub/client/src/pages/__tests__/CcConfig.contextMenu.test.tsx

/**
 * @file Covers the right-click menus on the Claude Code config page: a menu
 * item runs the SAME action as the card's button — a plugin's uninstall still
 * takes two clicks before it reaches the API, and a profile's delete calls the
 * same endpoint the trash button does.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { describe, it, expect, vi, afterEach } from "vitest";
import { render, screen, act } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { MemoryRouter } from "react-router-dom";
import { settleConfirm } from "../../lib/confirm";

const ccConfigMock = vi.hoisted(() => {
  const r = (value: unknown) => vi.fn().mockResolvedValue(value);
  return {
    overview: r({
      roots: {
        claudeHome: "/home/.claude",
        projectClaudeDir: "/repo/.claude",
        projectRoot: "/repo",
      },
      counts: {
        skills: { user: 0, project: 0 },
        agents: { user: 0, project: 0 },
        commands: { user: 0, project: 0 },
        outputStyles: { user: 0, project: 0 },
        mcpServers: { user: 0, project: 0 },
        hooks: {},
        plugins: 1,
        marketplaces: 0,
        keybindings: 0,
        settingsFiles: 0,
        memory: 0,
      },
    }),
    skills: r({ items: [] }),
    agents: r({ items: [] }),
    commands: r({ items: [] }),
    outputStyles: r({ items: [] }),
    memory: r({ items: [] }),
    plugins: r({
      manifestPath: "/home/.claude/plugins/installed_plugins.json",
      manifestExists: true,
      plugins: [{ key: "ponytail@ponytail", name: "ponytail", enabled: true, version: "4.9.0" }],
    }),
    marketplaces: r({ items: [] }),
    mcp: r({ user: [], projectScoped: [] }),
    hooks: r({ hooks: [] }),
    settings: r({ sources: [] }),
    keybindings: r({ groups: [] }),
    statusline: r({}),
    hookScripts: r({ items: [] }),
    backups: r({ items: [] }),
    file: r({ ok: true, file: "", size: 0, mtime: 0, truncated: false, text: "" }),
    pluginsAvailable: r({ installed: [], available: [] }),
    updateAllStatus: r({ batch: null }),
    pluginAction: r({ ok: true }),
    profiles: r({
      items: [
        { name: "work", label: "Work", active: true, accountUuid: "u1", email: "a@b.c" },
        { name: "spare", label: "Spare", active: false, accountUuid: "u2", email: "d@e.f" },
      ],
      active: { accountUuid: "u1", email: "a@b.c" },
    }),
    profileUsage: r({ name: "x", refreshed: false, fiveHour: null, sevenDay: null }),
    deleteProfile: r({ ok: true }),
  };
});

vi.mock("../../lib/api", async (importOriginal) => {
  const actual = await importOriginal<Record<string, unknown>>();
  return {
    ...actual,
    api: { ...(actual.api as Record<string, unknown>), ccConfig: ccConfigMock },
  };
});

vi.mock("../../lib/eventBus", () => ({
  eventBus: {
    subscribe: () => () => {},
    publish: () => {},
    onConnection: () => () => {},
    connected: true,
    setConnected: () => {},
  },
}));

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

async function settle() {
  await act(async () => {
    await new Promise((res) => setTimeout(res, 0));
    await new Promise((res) => setTimeout(res, 0));
  });
}

afterEach(() => vi.clearAllMocks());

describe("CcConfig — right-click menus", () => {
  it("uninstalls a plugin from its menu only on the second click, like the button", async () => {
    const user = userEvent.setup();
    render(
      <MemoryRouter>
        <CcConfig />
      </MemoryRouter>
    );
    await settle();
    await user.click(screen.getByRole("tab", { name: /plugins/i }));
    await settle();

    await user.pointer({
      keys: "[MouseRight]",
      target: screen.getByTestId("plugin-card-ponytail@ponytail"),
    });
    const item = screen.getByTestId("plugin-menu-uninstall");
    await user.click(item);
    expect(ccConfigMock.pluginAction).not.toHaveBeenCalled();
    expect(item).toHaveTextContent(/click again/i);

    await user.click(item);
    await settle();
    expect(ccConfigMock.pluginAction).toHaveBeenCalledWith("ponytail@ponytail", "uninstall");
    expect(screen.queryByTestId("plugin-menu")).toBeNull();
  });

  it("deletes a saved profile from its menu through the same API as the trash button", async () => {
    const user = userEvent.setup();
    render(
      <MemoryRouter>
        <CcConfig />
      </MemoryRouter>
    );
    await settle();
    await user.click(screen.getByRole("button", { name: /profile/i }));
    await settle();

    await user.pointer({ keys: "[MouseRight]", target: screen.getByTestId("profile-row-spare") });
    await user.click(screen.getByTestId("profile-menu-delete"));
    await settle();
    // A saved login is never deleted on one click: it asks first.
    expect(ccConfigMock.deleteProfile).not.toHaveBeenCalled();
    await act(async () => settleConfirm(true));
    await settle();
    expect(ccConfigMock.deleteProfile).toHaveBeenCalledWith("spare");
  });

  it("offers no delete for the only saved copy of the live account", async () => {
    const user = userEvent.setup();
    render(
      <MemoryRouter>
        <CcConfig />
      </MemoryRouter>
    );
    await settle();
    await user.click(screen.getByRole("button", { name: /profile/i }));
    await settle();

    await user.pointer({ keys: "[MouseRight]", target: screen.getByTestId("profile-row-work") });
    expect(screen.getByTestId("profile-menu")).toBeInTheDocument();
    expect(screen.queryByTestId("profile-menu-delete")).toBeNull();
  });
});