/** * @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ĩ */ 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>(); 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( {}} />); 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( {}} />); 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( {}} />); 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( {}} />); 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( {}} />); 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( {}} />); 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( {}} />); 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( {}} />); 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( {}} /> ); 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( {}} /> ); // 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([""]); render( {}} />); 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(""); 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("") ) ).toBeTruthy(); cleanup(); }); it("steps back to an older version the conversation wrote", async () => { html(["

two

"]); const tool = (id: string, input: Record, 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: "

one

" }), tool("2", { file_path: "/w/page.html", old_string: "one", new_string: "two" }, "Edit"), ]; render( {}} 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")!); expect(screen.getByTestId("artifact-frame").getAttribute("srcdoc")).toContain("

one

"); cleanup(); }); it("saves a workspace file to the Artifacts library by its path", async () => { html(["

x

"]); render( {}} />); 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(); }); });