AgentHub/client/src/components/run/__tests__/ChatFilePreview.test.tsx

/**
 * @file ChatFilePreview.test.tsx
 * @description Where a Chat pane's file preview reads from: a file under the
 * pane's folder through the lane's git file read, a memory file under
 * `~/.claude` through the config pages' read, a dropped text file through the
 * drop route, an image read outside the folder through the session's image
 * route, a text file read or written outside it through the session's file route, a Windows path like a POSIX one, anything else by path only; the
 * list dialog previewing the file picked in it; and the skills dialog finding
 * each skill's SKILL.md by name.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { FileListModal, FilePreview, SkillListModal, displayName } from "../ChatFilePreview";
import { api } from "../../../lib/api";

vi.mock("../../../lib/api", async (importOriginal) => {
  const actual = await importOriginal<Record<string, unknown>>();
  return {
    ...actual,
    api: {
      lanes: {
        gitFile: vi.fn().mockResolvedValue({
          available: true,
          path: "src/a.ts",
          rev: "work",
          binary: false,
          truncated: false,
          lines: ["export const a = 1;"],
        }),
        gitRawUrl: () => "",
      },
      artifacts: {
        pinFile: vi.fn().mockResolvedValue({ item: { id: 1 } }),
        uploadFile: vi.fn().mockResolvedValue({ item: { id: 2 } }),
      },
      sessions: {
        readImageUrl: (id: string, p: string) => `/img/${id}?path=${p}`,
        readFile: vi.fn((_id: string, p: string) =>
          p.endsWith(".md")
            ? Promise.resolve({ text: "# Audit report", truncated: false })
            : Promise.reject(new Error("404"))
        ),
      },
      ccConfig: {
        skills: vi.fn().mockResolvedValue({
          items: [{ scope: "user", name: "xlsx", file: "/h/.claude/skills/xlsx/SKILL.md" }],
        }),
        plugins: vi.fn().mockResolvedValue({
          plugins: [
            {
              name: "agenthub",
              contributes: {
                items: {
                  skills: [
                    {
                      name: "file-headers",
                      description: null,
                      file: "/h/.claude/plugins/cache/a/skills/file-headers/SKILL.md",
                    },
                  ],
                  commands: [],
                },
              },
            },
          ],
        }),
        file: vi
          .fn()
          .mockResolvedValue({ ok: true, file: "", text: "Launch notes", size: 12, mtime: 0 }),
      },
    },
  };
});

const scope = { laneId: 4, laneCwd: "/w", cwd: "/w", sessionId: "s1" };

describe("FilePreview", () => {
  it("reads a workspace file through the lane", async () => {
    render(<FilePreview path="/w/src/a.ts" scope={scope} onClose={() => {}} />);
    expect(
      await screen.findByText(
        (_t, el) => el?.tagName === "CODE" && !!el.textContent?.includes("export const a = 1;")
      )
    ).toBeTruthy();
    expect(vi.mocked(api.lanes.gitFile)).toHaveBeenCalledWith(4, "src/a.ts");
  });

  it("reads a memory file through the config read", async () => {
    const mem = "/h/.claude/projects/-w/memory/launch.md";
    render(<FilePreview path={mem} scope={scope} onClose={() => {}} />);
    expect(await screen.findByText("Launch notes")).toBeTruthy();
    expect(vi.mocked(api.ccConfig.file)).toHaveBeenCalledWith(mem);
  });

  it("reads Windows paths the same way", async () => {
    const win = { laneId: 4, laneCwd: "D:\\w", cwd: "D:\\w", sessionId: "s1" };
    render(<FilePreview path={"D:\\w\\src\\a.ts"} scope={win} onClose={() => {}} />);
    expect(
      await screen.findByText(
        (_t, el) => el?.tagName === "CODE" && !!el.textContent?.includes("export const a = 1;")
      )
    ).toBeTruthy();
    expect(vi.mocked(api.lanes.gitFile)).toHaveBeenCalledWith(4, "src/a.ts");
    cleanup();
    const tool = "C:\\Users\\k\\.claude\\projects\\D--w\\s1\\tool-results\\b.txt";
    render(<FilePreview path={tool} scope={win} onClose={() => {}} />);
    expect(await screen.findByText("Launch notes")).toBeTruthy();
    expect(vi.mocked(api.ccConfig.file)).toHaveBeenCalledWith(tool);
    expect(screen.getByText("b")).toBeTruthy(); // the name, not the whole path
  });

  it("reads a dropped text file through the drop route", async () => {
    const fetchMock = vi.fn().mockResolvedValue(new Response("a long paste"));
    vi.stubGlobal("fetch", fetchMock);
    const drop = "C:\\Users\\k\\.claude\\agenthub\\drops\\0123456789abcdef-pasted-text.txt";
    render(<FilePreview path={drop} scope={scope} onClose={() => {}} />);
    expect(await screen.findByText("a long paste")).toBeTruthy();
    expect(fetchMock).toHaveBeenCalledWith("/api/run/drop/0123456789abcdef-pasted-text.txt");
    vi.unstubAllGlobals();
  });

  it("shows an image it read outside the folder through the session, its path if refused", () => {
    render(<FilePreview path="/h/.cache/shot.png" scope={scope} onClose={() => {}} />);
    const img = screen.getByAltText("shot.png") as HTMLImageElement;
    expect(img.getAttribute("src")).toBe("/img/s1?path=/h/.cache/shot.png");
    fireEvent.error(img);
    expect(screen.getByText("No preview for this file here")).toBeTruthy();
  });

  it("reads a text file it wrote outside the folder through the session", async () => {
    const report = "/home/a/Documents/audit/REPORT_ssh_ec2.md";
    render(<FilePreview path={report} scope={scope} onClose={() => {}} />);
    expect(await screen.findByText("Audit report")).toBeTruthy();
    expect(vi.mocked(api.sessions.readFile)).toHaveBeenCalledWith("s1", report);
  });

  it("shows only the path of a file it may not read", async () => {
    render(<FilePreview path="/etc/hosts" scope={scope} onClose={() => {}} />);
    expect(await screen.findByText("No preview for this file here")).toBeTruthy();
  });
});

describe("FileListModal", () => {
  it("previews the file picked in the list", async () => {
    const drop = "/tmp/agenthub-drops-1000/0123456789abcdef-minutes.xlsx";
    expect(displayName(drop)).toBe("minutes.xlsx");
    render(
      <FileListModal
        title="Uploads"
        paths={[drop, "/w/src/a.ts"]}
        scope={scope}
        onClose={() => {}}
      />
    );
    expect(screen.getByText("No preview for this file here")).toBeTruthy();
    fireEvent.click(screen.getByRole("button", { name: "a.ts" }));
    expect(
      await screen.findByText(
        (_t, el) => el?.tagName === "CODE" && !!el.textContent?.includes("export const a = 1;")
      )
    ).toBeTruthy();
  });
});

describe("SkillListModal", () => {
  it("lists the skills by name and previews each one's SKILL.md", async () => {
    render(
      <SkillListModal
        title="Skills"
        names={["agenthub:file-headers", "xlsx", "simplify"]}
        scope={scope}
        onClose={() => {}}
      />
    );
    // A plugin's skill first, read through the config read.
    expect(await screen.findByRole("button", { name: "agenthub:file-headers" })).toBeTruthy();
    await screen.findByText("Launch notes");
    expect(vi.mocked(api.ccConfig.file)).toHaveBeenCalledWith(
      "/h/.claude/plugins/cache/a/skills/file-headers/SKILL.md"
    );
    fireEvent.click(screen.getByRole("button", { name: "xlsx" }));
    await screen.findByText("Launch notes");
    expect(vi.mocked(api.ccConfig.file)).toHaveBeenCalledWith("/h/.claude/skills/xlsx/SKILL.md");
    // A built-in skill has no file.
    fireEvent.click(screen.getByRole("button", { name: "simplify" }));
    expect(screen.getByText("No preview for this file here")).toBeTruthy();
  });
});

describe("the artifact view", () => {
  const html = (lines: string[]) =>
    vi.mocked(api.lanes.gitFile).mockResolvedValueOnce({
      available: true,
      path: "page.html",
      rev: "work",
      binary: false,
      truncated: false,
      lines,
    } as never);

  it("runs a page in a sandbox with scripts but no same origin, and shows its code", async () => {
    html(["<button>go</button>"]);
    render(<FilePreview path="/w/page.html" scope={scope} onClose={() => {}} />);
    const frame = (await screen.findByTestId("artifact-frame")) as HTMLIFrameElement;
    expect(frame.getAttribute("sandbox")).toContain("allow-scripts");
    expect(frame.getAttribute("sandbox")).not.toContain("allow-same-origin");
    expect(frame.getAttribute("srcdoc")).toContain("<button>go</button>");
    fireEvent.click(screen.getByTestId("artifact-tab-code"));
    expect(screen.queryByTestId("artifact-frame")).toBeNull();
    expect(
      await screen.findByText(
        (_t, el) => el?.tagName === "CODE" && !!el.textContent?.includes("<button>go</button>")
      )
    ).toBeTruthy();
    cleanup();
  });

  it("shows a page as a modal over the screen, closed by Esc", async () => {
    const onClose = vi.fn();
    render(<FilePreview path="/w/page.html" scope={scope} onClose={onClose} modal />);
    const dialog = await screen.findByRole("dialog", { name: "page.html" });
    expect(dialog.parentElement?.parentElement).toBe(document.body);
    expect(await screen.findByTestId("artifact-frame")).toBeInTheDocument();
    expect(screen.queryByTestId("artifact-expand")).toBeNull();
    fireEvent.keyDown(screen.getByTestId("artifact-tab-code"), { key: "Escape" });
    expect(onClose).toHaveBeenCalled();
  });

  it("steps back to an older version the conversation wrote", async () => {
    html(["<p>two</p>"]);
    const tool = (id: string, input: Record<string, unknown>, name = "Write") => ({
      type: "assistant" as const,
      timestamp: null,
      content: [{ type: "tool_use" as const, id, name, input }],
    });
    const messages = [
      tool("1", { file_path: "/w/page.html", content: "<p>one</p>" }),
      tool("2", { file_path: "/w/page.html", old_string: "one", new_string: "two" }, "Edit"),
    ];
    render(
      <FilePreview
        path="/w/page.html"
        scope={scope}
        onClose={() => {}}
        messages={messages as never}
      />
    );
    const versions = await screen.findByTestId("artifact-versions");
    expect(versions.textContent).toContain("2");
    expect(
      ((await screen.findByTestId("artifact-frame")) as HTMLIFrameElement).getAttribute("srcdoc")
    ).toContain("two");
    fireEvent.click(versions.querySelector("button")!);
    await vi.waitFor(() =>
      expect(screen.getByTestId("artifact-frame").getAttribute("srcdoc")).toContain("<p>one</p>")
    );
    cleanup();
  });

  it("saves a workspace file to the Artifacts library by its path", async () => {
    html(["<p>x</p>"]);
    render(<FilePreview path="/w/page.html" scope={scope} onClose={() => {}} />);
    await screen.findByTestId("artifact-frame");
    fireEvent.click(screen.getByTestId("artifact-share"));
    await vi.waitFor(() =>
      expect(api.artifacts.pinFile).toHaveBeenCalledWith({
        laneId: 4,
        path: "page.html",
        title: "page.html",
        sessionId: "s1",
      })
    );
    cleanup();
  });
});