/** * @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 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: () => "", }, sessions: { readImageUrl: (id: string, p: string) => `/img/${id}?path=${p}` }, 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("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("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("shows only the path of a file it may not read", () => { render( {}} />); expect(screen.getByText("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("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(); }); });