AgentHub/client/src/pages/__tests__/screens.snapshot.test.tsx

/**
 * @file screens.snapshot.test.tsx
 * @description Render snapshot tests for every routed screen. Each page is
 * rendered inside a MemoryRouter with the API layer mocked to a deterministic
 * loaded-empty state (empty collections + zeroed scalars) so snapshots capture
 * real structure / layout / i18n without noisy chart DOM or live data. The
 * system clock and timezone are pinned so any relative/absolute timestamps are
 * stable across machines and CI.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

// Pin timezone before anything reads it, so date formatting is machine-stable
// (referenced via globalThis so the browser-targeted tsconfig doesn't need node types).
const nodeProcess = (
  globalThis as unknown as { process?: { env: Record<string, string | undefined> } }
).process;
if (nodeProcess) nodeProcess.env.TZ = "UTC";

import { describe, it, expect, vi, beforeEach, afterEach, beforeAll, afterAll } from "vitest";
import type { ReactNode } from "react";
import { render, act, screen, fireEvent } from "@testing-library/react";
import { MemoryRouter, Routes, Route } from "react-router-dom";
import i18n from "i18next";

// ── Mock the API layer with deterministic, crash-safe empty fixtures ──────────
// Keep the module's other named exports (RUN_EFFORT_CHOICES, etc.) real and
// override only `api`.
vi.mock("../../lib/api", async (importOriginal) => {
  const actual = await importOriginal<Record<string, unknown>>();
  const r = (value: unknown) => vi.fn().mockResolvedValue(value);
  // One installed plugin that actually contributes something, so the Claude Code
  // tab renders PluginCard's contribution chips instead of an empty list.
  const demoPlugin = {
    key: "agenthub@sg",
    name: "agenthub",
    marketplace: "sg",
    scope: "user",
    version: "1.4.6",
    installPath: "/home/test/.claude/plugins/agenthub",
    installedAt: "2026-05-01T12:00:00.000Z",
    lastUpdated: "2026-06-01T09:30:00.000Z",
    gitCommitSha: "a1b2c3d",
    installPathExists: true,
    enabled: true,
    contributes: {
      skills: 2,
      agents: 1,
      commands: 1,
      outputStyles: 0,
      hooks: 3,
      items: {
        skills: [
          {
            name: "ship-feature",
            description: "Implement a feature safely end-to-end.",
            file: "/home/test/.claude/plugins/agenthub/skills/ship-feature/SKILL.md",
          },
          {
            name: "file-headers",
            description: "Authorship header policy.",
            file: "/home/test/.claude/plugins/agenthub/skills/file-headers/SKILL.md",
          },
        ],
        agents: [
          {
            name: "qc-local",
            description: "Local browser QC.",
            file: "/home/test/.claude/plugins/agenthub/agents/qc-local.md",
          },
        ],
        commands: [
          {
            name: "agenthub-doctor",
            description: null,
            file: "/home/test/.claude/plugins/agenthub/plugins/agenthub/commands/agenthub-doctor.md",
          },
        ],
        outputStyles: [],
      },
      pluginJson: { name: "agenthub", description: "The dashboard as a plugin.", version: "1.4.6" },
    },
  };

  const items = { items: [] };
  const cost = {
    total_cost: 0,
    breakdown: [],
    daily_costs: [],
    feature_costs: {},
    unpriced_models: [],
  };
  const emptyWorkflow = {
    stats: {
      totalSessions: 0,
      totalAgents: 0,
      totalSubagents: 0,
      avgSubagents: 0,
      successRate: 0,
      avgDepth: 0,
      avgDurationSec: 0,
      totalCompactions: 0,
      avgCompactions: 0,
      topFlow: null,
    },
    orchestration: {
      sessionCount: 0,
      mainCount: 0,
      subagentTypes: [],
      edges: [],
      outcomes: [],
      compactions: { total: 0, sessions: 0 },
    },
    toolFlow: { transitions: [], toolCounts: [] },
    effectiveness: [],
    patterns: { patterns: [], soloSessionCount: 0, soloPercentage: 0 },
    modelDelegation: { mainModels: [], subagentModels: [], tokensByModel: [] },
    errorPropagation: {
      byDepth: [],
      byType: [],
      eventErrors: [],
      sessionsWithErrors: 0,
      totalSessions: 0,
      errorRate: 0,
    },
    concurrency: { aggregateLanes: [] },
    complexity: [],
    compaction: {
      totalCompactions: 0,
      tokensRecovered: 0,
      perSession: [],
      sessionsWithCompactions: 0,
      totalSessions: 0,
    },
    cooccurrence: [],
  };
  const analytics = {
    tokens: { total_input: 0, total_output: 0, total_cache_read: 0, total_cache_write: 0 },
    tool_usage: [],
    daily_events: [],
    daily_sessions: [],
    agent_types: [],
    event_types: [],
    avg_events_per_session: 0,
    total_subagents: 0,
    overview: {
      total_sessions: 0,
      active_sessions: 0,
      active_agents: 0,
      total_agents: 0,
      total_events: 0,
    },
    agents_by_status: {},
    sessions_by_status: {},
  };
  const settingsInfo = {
    db: {
      path: "/tmp/test.db",
      size: 0,
      counts: {},
      pragmas: {
        journal_mode: "wal",
        synchronous: 1,
        auto_vacuum: 0,
        encoding: "UTF-8",
        foreign_keys: 1,
        busy_timeout: 5000,
      },
      load_stats: { m5: 0, m15: 0, h1: 0 },
    },
    hooks: { installed: true, path: "/tmp/settings.json", hooks: {} },
    server: {
      uptime: 0,
      node_version: "v22.0.0",
      platform: "linux",
      ws_connections: 0,
      memory: { rss: 0, heapTotal: 0, heapUsed: 0, external: 0 },
      cpu_load: [0, 0, 0],
      arch: "x64",
      total_mem: 0,
      free_mem: 0,
      cpus: 1,
    },
    transcript_cache: { size: 0, maxSize: 100, hits: 0, misses: 0, keys: [] },
  };
  const session = {
    id: "sess-1",
    name: "Test Session",
    status: "active",
    cwd: "/test",
    model: "claude-opus-4-6",
    started_at: "2026-06-10T12:00:00.000Z",
    ended_at: null,
    metadata: null,
  };
  const stats = {
    total_sessions: 0,
    active_sessions: 0,
    active_agents: 0,
    total_agents: 0,
    total_events: 0,
    events_today: 0,
    ws_connections: 0,
    agents_by_status: {},
    sessions_by_status: {},
  };

  const sampleWorkflowRun = {
    run_id: "wf_sample1",
    session_id: "sess-1",
    task_id: "task-1",
    name: "review-changes",
    status: "completed",
    default_model: "claude-opus-4-6",
    started_at: "2026-06-10T12:30:00.000Z",
    ended_at: "2026-06-10T12:35:00.000Z",
    duration_ms: 300000,
    agent_count: 2,
    total_tokens: 48000,
    total_tool_calls: 9,
    phases: [{ title: "Review" }, { title: "Verify" }],
    progress: [
      { type: "workflow_phase", index: 1, title: "Review" },
      { type: "workflow_phase", index: 2, title: "Verify" },
      {
        type: "workflow_agent",
        agentId: "a1",
        agentType: "reviewer",
        state: "done",
        label: "review:bugs",
        phaseTitle: "Review",
        tokens: 22000,
        toolCalls: 5,
        durationMs: 120000,
        lastToolName: "Read",
        resultPreview: "Found 3 issues",
      },
      {
        type: "workflow_agent",
        agentId: "a2",
        agentType: "verifier",
        state: "done",
        label: "verify:bugs",
        phaseTitle: "Verify",
        tokens: 26000,
        toolCalls: 4,
        durationMs: 180000,
        lastToolName: "Bash",
        resultPreview: "All confirmed",
      },
    ],
    script_path: null,
    journal_path: "/x/wf_sample1.json",
    source: "journal",
    created_at: "2026-06-10T12:30:00.000Z",
    updated_at: "2026-06-10T12:35:00.000Z",
  };

  return {
    ...actual,
    api: {
      stats: { get: r(stats), facets: r({ cwds: [] }) },
      sessions: {
        list: r({ sessions: [], total: 0, limit: 50, offset: 0 }),
        facets: r({ cwds: [], sources: ["local"] }),
        get: r({ session, agents: [], events: [], workflows: [sampleWorkflowRun] }),
        stats: r({
          session_id: "sess-1",
          total_events: 0,
          events_by_type: [],
          tools_used: [],
          error_count: 0,
          first_event_at: null,
          last_event_at: null,
          agents: { total: 0, main: 0, subagent: 0, compaction: 0, by_status: {} },
          subagent_types: [],
          tokens: {
            input_tokens: 0,
            output_tokens: 0,
            cache_read_tokens: 0,
            cache_write_tokens: 0,
          },
        }),
        transcripts: r({ transcripts: [] }),
        transcript: r({ messages: [], session_id: "sess-1" }),
      },
      agents: { list: r({ agents: [] }) },
      remoteSources: {
        list: r({ sources: [] }),
        create: r({ source: {} }),
        update: r({ source: {} }),
        remove: r({ ok: true, purged: 0 }),
        test: r({ ok: true, message: "" }),
        sync: r({ ok: true }),
      },
      events: {
        list: r({ events: [], total: 0, limit: 50, offset: 0 }),
        facets: r({ event_types: [], tool_names: [] }),
      },
      analytics: { get: r(analytics) },
      workflows: {
        get: r(emptyWorkflow),
        session: r({}),
        skillUsage: r({ skills: [], plugins: [] }),
        runs: r({
          runs: [sampleWorkflowRun],
          total: 1,
          counts: { completed: 1 },
          limit: 200,
          offset: 0,
        }),
        run: r({ workflow: sampleWorkflowRun, agents: [], events: [] }),
      },
      pricing: {
        list: r({ pricing: [] }),
        upsert: r({ pricing: {} }),
        delete: r({ ok: true }),
        totalCost: r(cost),
        sessionCost: r(cost),
      },
      settings: {
        info: r(settingsInfo),
        claudeHome: {
          get: r({ claude_home: "/home/test/.claude" }),
          set: r({ ok: true, claude_home: "/home/test/.claude" }),
        },
        clearData: r({ ok: true, cleared: {} }),
        reimport: r({ ok: true, imported: 0, skipped: 0, errors: 0 }),
        reinstallHooks: r({ ok: true, hooks: { installed: true, hooks: {} } }),
        resetPricing: r({ ok: true, pricing: [] }),
        exportData: () => "/api/settings/export",
        cleanup: r({
          ok: true,
          abandoned: 0,
          purged_sessions: 0,
          purged_events: 0,
          purged_agents: 0,
        }),
      },
      import: {
        guide: r({
          platform: "linux",
          default_projects_dir: "/home/test/.claude/projects",
          default_projects_dir_display: "~/.claude/projects",
          default_projects_dir_exists: true,
          default_projects_dir_stats: { projects: 0, jsonl_files: 0 },
          archive_command: "tar",
          supported_extensions: [".jsonl"],
          max_upload_bytes: 1000000,
          max_upload_files: 10,
          steps: [],
        }),
        rescan: r({}),
        scanPath: r({}),
      },
      ccConfig: {
        overview: r({
          roots: {
            claudeHome: "/home/test/.claude",
            projectClaudeDir: "/test/.claude",
            projectRoot: "/test",
            claudeJson: "/home/test/.claude.json",
          },
          counts: {
            skills: { user: 0, project: 0 },
            agents: { user: 0, project: 0 },
            commands: { user: 0, project: 0 },
            outputStyles: { user: 0, project: 0 },
            plugins: 0,
            pluginsEnabled: 0,
            pluginsDisabled: 0,
            marketplaces: 0,
            keybindings: 0,
            mcpServers: { user: 0, project: 0 },
            hooks: {},
            memory: 0,
            settingsFiles: 0,
          },
        }),
        skills: r(items),
        agents: r(items),
        commands: r(items),
        outputStyles: r(items),
        plugins: r({ manifestPath: "", manifestExists: false, plugins: [demoPlugin] }),
        mcp: r({ servers: [], items: [] }),
        hooks: r(items),
        settings: r(items),
        memory: r(items),
        file: r({
          scope: "user",
          name: "x",
          path: "/x",
          size: 0,
          mtime: 0,
          truncated: false,
          frontmatter: {},
          preview: "",
          content: "",
        }),
        write: r({ ok: true }),
        delete: r({ ok: true }),
        marketplaces: r({ marketplaces: [], items: [] }),
        keybindings: r({ items: [], bindings: [] }),
        statusline: r({ configured: false }),
        hookScripts: r({ items: [], scripts: [] }),
        backups: r({ items: [] }),
      },
      run: {
        list: r({ runs: [], items: [] }),
        history: r({ items: [] }),
        binary: r({ found: true, path: "/usr/bin/claude" }),
        cwds: r({ items: [] }),
        files: r({ items: [] }),
        start: r({ id: "run-1", status: "running" }),
        get: r({ id: "run-1", status: "running", messages: [], envelopes: [] }),
        send: r({ messageId: "m-1" }),
        kill: r({ ok: true }),
      },
      alerts: {
        list: r({ alerts: [], total: 0, unacked: 0, limit: 50, offset: 0 }),
        ack: r({ alert: {} }),
        ackAll: r({ ok: true, acknowledged: 0 }),
        rules: {
          list: r({ rules: [] }),
          create: r({ rule: {} }),
          update: r({ rule: {} }),
          remove: r({ ok: true }),
        },
      },
      webhooks: {
        list: r({ targets: [] }),
        providers: r({ providers: [] }),
        create: r({ target: {} }),
        update: r({ target: {} }),
        remove: r({ ok: true }),
        test: r({ ok: true, status: 200, attempts: 1, error: null }),
        deliveries: r({ deliveries: [], limit: 20, offset: 0 }),
      },
      lanes: {
        list: r({ lanes: [], counts: { total: 0, running: 0, needs_you: 0, dead: 0 } }),
        get: r({ lane: {} }),
        create: r({ lane: {} }),
        update: r({ lane: {} }),
        stage: r({ lane: {} }),
        pipelines: r({ pipelines: [] }),
        pipelineStats: r({ pipelines: [], lanes: [] }),
        // A realistic shape: `{}` would crash blockingReason on `blocked` if any
        // screen ever opened the destructive modal.
        preflight: r({
          action: "reset",
          lane: 1,
          kind: "managed",
          branch: "feat/demo",
          head: "abc1234",
          dirty: 0,
          untracked: 0,
          unpushed: 0,
          blocked: [],
          warnings: [],
        }),
        action: r({ ok: true }),
      },
      updates: { check: r({ behind: 0, ahead: 0, current: "", upstream: "" }), status: r({}) },
    },
  };
});

// eventBus: no-op pub/sub so pages mount without a live socket. onConnection +
// connected back the useSyncExternalStore(eventBus.onConnection, …) reads.
vi.mock("../../lib/eventBus", () => ({
  eventBus: {
    subscribe: () => () => {},
    publish: () => {},
    onConnection: () => () => {},
    connected: true,
    setConnected: () => {},
  },
}));

// push notifications: avoid real service-worker / Notification calls.
vi.mock("../../lib/push", () => ({
  subscribeToPush: vi.fn().mockResolvedValue(undefined),
  unsubscribeFromPush: vi.fn().mockResolvedValue(undefined),
}));

// Page components (imported after the mocks above; vi.mock is hoisted).
import { Dashboard } from "../Dashboard";
import { Sessions } from "../Sessions";
import { SessionDetail } from "../SessionDetail";
import { ActivityFeed } from "../ActivityFeed";
import { Workflows } from "../Workflows";
import { CcConfig } from "../CcConfig";
import { Workspace } from "../Workspace";
import { Settings } from "../Settings";
import { NotFound } from "../NotFound";

// jsdom lacks these browser APIs that chart / responsive components rely on.
class ObserverStub {
  observe() {}
  unobserve() {}
  disconnect() {}
  takeRecords() {
    return [];
  }
}
globalThis.ResizeObserver =
  globalThis.ResizeObserver || (ObserverStub as unknown as typeof ResizeObserver);
globalThis.IntersectionObserver =
  globalThis.IntersectionObserver || (ObserverStub as unknown as typeof IntersectionObserver);
if (!window.matchMedia) {
  window.matchMedia = (query: string) =>
    ({
      matches: false,
      media: query,
      onchange: null,
      addListener() {},
      removeListener() {},
      addEventListener() {},
      removeEventListener() {},
      dispatchEvent() {
        return false;
      },
    }) as unknown as MediaQueryList;
}
for (const fn of ["scrollIntoView", "scrollBy", "scrollTo"] as const) {
  if (!(Element.prototype as unknown as Record<string, unknown>)[fn]) {
    (Element.prototype as unknown as Record<string, unknown>)[fn] = function () {};
  }
}

// Flush pending promises (mocked API resolves) + effects so the loaded state
// is rendered before snapshotting.
async function settle() {
  await act(async () => {
    await new Promise((r) => setTimeout(r, 0));
    await new Promise((r) => setTimeout(r, 0));
  });
}

async function snapshot(ui: ReactNode, route = "/") {
  const { container } = render(<MemoryRouter initialEntries={[route]}>{ui}</MemoryRouter>);
  await settle();
  expect(container).toMatchSnapshot();
}

beforeAll(() => {
  // Fake only Date so relative/absolute times are deterministic; leave timers
  // real so setTimeout-based flushing in settle() still works.
  vi.useFakeTimers({ now: new Date("2026-06-10T13:00:00.000Z"), toFake: ["Date"] });
});

afterAll(() => {
  vi.useRealTimers();
});

beforeEach(() => {
  i18n.changeLanguage("en");
});

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

describe("screen snapshots", () => {
  it("Dashboard", async () => {
    await snapshot(<Dashboard />, "/");
  });
  it("Sessions", async () => {
    await snapshot(<Sessions />, "/sessions");
  });
  it("Session detail", async () => {
    await snapshot(
      <Routes>
        <Route path="/sessions/:id" element={<SessionDetail />} />
      </Routes>,
      "/sessions/sess-1"
    );
  });
  it("Activity feed", async () => {
    await snapshot(<ActivityFeed />, "/activity");
  });
  it("Workflows", async () => {
    await snapshot(<Workflows />, "/workflows");
  });
  it("Claude Config", async () => {
    await snapshot(<CcConfig />, "/cc-config");
  });
  it("Run", async () => {
    await snapshot(<Workspace />, "/run");
  });
  it("Settings", async () => {
    await snapshot(<Settings />, "/settings");
  });
  it("Not found", async () => {
    await snapshot(<NotFound />, "/nope");
  });
});

// The page opens on Overview; the plugin cards live behind the Plugins tab.
async function openPluginsTab() {
  render(
    <MemoryRouter initialEntries={["/cc-config"]}>
      <CcConfig />
    </MemoryRouter>
  );
  await settle();
  fireEvent.click(screen.getByTestId("cc-tab-plugins"));
  await settle();
}

// The chips are the only way into a plugin's contents, so the toggle is the
// feature: a count that cannot be opened tells you nothing about WHICH skills
// a plugin ships.
describe("plugin contribution chips", () => {
  it("expands a plugin's skills by name on click, and collapses again", async () => {
    await openPluginsTab();

    const chip = screen.getByTestId("plugin-contrib-agenthub@sg-skills");
    expect(chip).toHaveAttribute("aria-expanded", "false");
    expect(screen.queryByText("ship-feature")).toBeNull();

    fireEvent.click(chip);
    expect(chip).toHaveAttribute("aria-expanded", "true");
    expect(screen.getByText("ship-feature")).toBeInTheDocument();
    expect(screen.getByText("file-headers")).toBeInTheDocument();

    fireEvent.click(chip);
    expect(chip).toHaveAttribute("aria-expanded", "false");
    expect(screen.queryByText("ship-feature")).toBeNull();
  });

  it("shows only one surface at a time, and prefixes a command with its slash", async () => {
    await openPluginsTab();

    fireEvent.click(screen.getByTestId("plugin-contrib-agenthub@sg-skills"));
    fireEvent.click(screen.getByTestId("plugin-contrib-agenthub@sg-commands"));

    expect(screen.queryByText("ship-feature")).toBeNull();
    expect(screen.getByText("/agenthub-doctor")).toBeInTheDocument();
  });

  it("leaves hooks as a plain chip - they have no per-item list to open", async () => {
    await openPluginsTab();

    expect(screen.queryByTestId("plugin-contrib-agenthub@sg-hooks")).toBeNull();
  });
});