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

/**
 * @file SnapshotView.test.tsx
 * @description The read-only `/snapshot/:token` page renders the frozen payload
 * without reading live session data, and Settings → Snapshots lists and
 * deletes snapshots behind a confirm.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { describe, it, expect, vi } from "vitest";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { MemoryRouter, Route, Routes } from "react-router-dom";
import { SnapshotView } from "../SnapshotView";
import { SnapshotSettings } from "../../components/settings/SnapshotSettings";

const stats = {
  session_id: "s1",
  total_events: 2,
  events_by_type: [],
  tools_used: [{ tool_name: "Read", count: 2 }],
  error_count: 0,
  first_event_at: "2026-10-01T10:00:00.000Z",
  last_event_at: "2026-10-01T10:00:01.000Z",
  agents: { total: 1, main: 1, subagent: 0, compaction: 0, by_status: {} },
  subagent_types: [],
  tokens: { input_tokens: 0, output_tokens: 0, cache_read_tokens: 0, cache_write_tokens: 0 },
};

const sessionStats = vi.fn();
const remove = vi.fn(() => Promise.resolve({ ok: true }));

vi.mock("../../lib/api", () => ({
  api: {
    sessions: { stats: (...a: unknown[]) => sessionStats(...a) },
    snapshots: {
      get: vi.fn(() =>
        Promise.resolve({
          snapshot: { id: 1, token: "tok", session_id: "s1", created_at: "2026-10-02T00:00:00Z" },
          payload: {
            version: 1,
            captured_at: "2026-10-02T00:00:00.000Z",
            redacted: { file_paths: true },
            session: {
              id: "s1",
              name: "Frozen session",
              status: "completed",
              cwd: "[redacted]",
              model: null,
              started_at: "2026-10-01T10:00:00.000Z",
              ended_at: null,
              metadata: null,
            },
            agents: [],
            events: [
              {
                id: 1,
                session_id: "s1",
                agent_id: null,
                event_type: "SessionStart",
                tool_name: null,
                summary: "start",
                data: null,
                created_at: "2026-10-01T10:00:00.000Z",
              },
              {
                id: 2,
                session_id: "s1",
                agent_id: null,
                event_type: "Stop",
                tool_name: null,
                summary: "stop",
                data: null,
                created_at: "2026-10-01T10:00:01.000Z",
              },
            ],
            stats,
            cost: { total_cost: 0, breakdown: [] },
          },
        })
      ),
      list: vi.fn(() =>
        Promise.resolve({
          snapshots: [
            {
              id: 7,
              token: "tok7",
              session_id: "s1",
              created_at: "2026-10-02T00:00:00Z",
              session_name: "Frozen session",
              redacted: true,
              event_count: 2,
            },
          ],
        })
      ),
      remove: (...a: unknown[]) => remove(...(a as [])),
    },
  },
}));

describe("SnapshotView", () => {
  it("renders the frozen session and its replay, never the live stats", async () => {
    render(
      <MemoryRouter initialEntries={["/snapshot/tok"]}>
        <Routes>
          <Route path="/snapshot/:token" element={<SnapshotView />} />
        </Routes>
      </MemoryRouter>
    );
    expect(await screen.findByText("Frozen session")).toBeTruthy();
    expect(screen.getByText("Paths redacted")).toBeTruthy();
    fireEvent.click(screen.getByRole("button", { name: /Replay/ }));
    expect(screen.getByTestId("event-replay")).toBeTruthy();
    expect(sessionStats).not.toHaveBeenCalled();
  });
});

describe("SnapshotSettings", () => {
  it("lists snapshots and deletes one after confirming", async () => {
    render(
      <MemoryRouter>
        <SnapshotSettings />
      </MemoryRouter>
    );
    expect(await screen.findByText("Frozen session")).toBeTruthy();
    fireEvent.click(screen.getByRole("button", { name: "Delete" }));
    const buttons = screen.getAllByRole("button", { name: "Delete" });
    fireEvent.click(buttons[buttons.length - 1]!);
    await waitFor(() => expect(remove).toHaveBeenCalledWith(7));
    await waitFor(() => expect(screen.queryByText("Frozen session")).toBeNull());
  });
});