theo-agent-dashboard

ToolResultRenderer.test.tsx (6249B)

---

 import { describe, it, expect, beforeAll } from "vitest";
 import { render } from "@testing-library/react";
 import { detectContentType, extractPreamble, getOperationCategory, ToolResultRenderer } from "./ToolResultRenderer";
 
 // Mock canvas for @git-diff-view/react
 beforeAll(() => {
   HTMLCanvasElement.prototype.getContext = vi.fn(() => ({
     measureText: vi.fn(() => ({ width: 0 })),
     fillText: vi.fn(),
     fillRect: vi.fn(),
     clearRect: vi.fn(),
     createImageData: vi.fn(),
     putImageData: vi.fn(),
     getImageData: vi.fn(() => ({ data: [] })),
     setTransform: vi.fn(),
     resetTransform: vi.fn(),
     drawImage: vi.fn(),
     save: vi.fn(),
     restore: vi.fn(),
     beginPath: vi.fn(),
     closePath: vi.fn(),
     moveTo: vi.fn(),
     lineTo: vi.fn(),
     clip: vi.fn(),
     stroke: vi.fn(),
     fill: vi.fn(),
     rect: vi.fn(),
     arc: vi.fn(),
     font: "",
     fillStyle: "",
     strokeStyle: "",
     lineWidth: 1,
     globalAlpha: 1,
     textAlign: "start" as CanvasTextAlign,
     textBaseline: "alphabetic" as CanvasTextBaseline,
   })) as any;
 });
 
 describe("detectContentType", () => {
   it("detects pure JSON object", () => {
     expect(detectContentType('{"key": "value", "count": 42}')).toBe("json");
   });
 
   it("detects pure JSON array", () => {
     expect(detectContentType("[1, 2, 3]")).toBe("json");
   });
 
   it("detects JSON with short preamble", () => {
     const content = 'Here are the results:\n{"status": "ok", "count": 5}';
     expect(detectContentType(content)).toBe("json");
   });
 
   it("detects unified diff", () => {
     const diff = `--- a/file.ts
 +++ b/file.ts
 @@ -1,3 +1,4 @@
  line1
 +added line
  line2
  line3`;
     expect(detectContentType(diff)).toBe("diff");
   });
 
   it("detects diff even with curly braces in code", () => {
     const diff = `--- a/file.ts
 +++ b/file.ts
 @@ -1,3 +1,4 @@
  const x = {
    key: "value"
  };
 +// new comment`;
     expect(detectContentType(diff)).toBe("diff");
   });
 
   it("returns markdown for plain text", () => {
     expect(detectContentType("Hello world, this is plain text.")).toBe("markdown");
   });
 
   it("returns markdown for malformed JSON", () => {
     expect(detectContentType("{not valid json")).toBe("markdown");
   });
 
   it("returns markdown for empty string", () => {
     expect(detectContentType("")).toBe("markdown");
   });
 
   it("returns markdown for fenced code blocks", () => {
     const content = '```javascript\nconst x = 1;\n```';
     expect(detectContentType(content)).toBe("markdown");
   });
 
   it("handles JSON with nested objects", () => {
     const json = '{"outer": {"inner": {"deep": true}}}';
     expect(detectContentType(json)).toBe("json");
   });
 
   it("handles JSON with preamble text containing newlines", () => {
     const content = 'Ran the health check.\nResults:\n{"status": "healthy", "uptime": 999}';
     expect(detectContentType(content)).toBe("json");
   });
 });
 
 describe("extractPreamble", () => {
   it("returns empty string when content is pure JSON", () => {
     const result = extractPreamble('{"key": "value"}');
     expect(result.preamble).toBe("");
     expect(result.jsonContent).toBe('{"key": "value"}');
   });
 
   it("extracts preamble before JSON", () => {
     const content = 'Here are the results:\n{"status": "ok"}';
     const result = extractPreamble(content);
     expect(result.preamble).toBe("Here are the results:");
     expect(result.jsonContent).toBe('{"status": "ok"}');
   });
 
   it("returns full content as preamble when no JSON found", () => {
     const result = extractPreamble("Just plain text");
     expect(result.preamble).toBe("Just plain text");
     expect(result.jsonContent).toBeNull();
   });
 
   it("handles empty string", () => {
     const result = extractPreamble("");
     expect(result.preamble).toBe("");
     expect(result.jsonContent).toBeNull();
   });
 });
 
 describe("getOperationCategory", () => {
   it("returns READ for read_file", () => {
     const result = getOperationCategory("read_file");
     expect(result.label).toBe("READ");
     expect(result.color).toBe("blue");
   });
 
   it("returns WRITE for write_file", () => {
     const result = getOperationCategory("write_file");
     expect(result.label).toBe("WRITE");
     expect(result.color).toBe("green");
   });
 
   it("returns PATCH for patch", () => {
     const result = getOperationCategory("patch");
     expect(result.label).toBe("PATCH");
     expect(result.color).toBe("yellow");
   });
 
   it("returns SEARCH for search_files", () => {
     const result = getOperationCategory("search_files");
     expect(result.label).toBe("SEARCH");
     expect(result.color).toBe("purple");
   });
 
   it("returns EXEC for terminal", () => {
     const result = getOperationCategory("terminal");
     expect(result.label).toBe("EXEC");
     expect(result.color).toBe("orange");
   });
 
   it("returns gray with tool name for unknown tools", () => {
     const result = getOperationCategory("custom_tool");
     expect(result.label).toBe("custom_tool");
     expect(result.color).toBe("gray");
   });
 });
 
 describe("ToolResultRenderer", () => {
   it("renders JSON content with JsonView", () => {
     const { container } = render(<ToolResultRenderer content='{"key": "value"}' />);
     expect(container.querySelector("[data-testid='json-tree']")).toBeTruthy();
   });
 
   it("renders JSON with preamble", () => {
     const { container } = render(<ToolResultRenderer content='Results:\n{"key": "value"}' />);
     expect(container.textContent).toContain("Results:");
     expect(container.querySelector("[data-testid='json-tree']")).toBeTruthy();
   });
 
   it("renders diff content with DiffView", () => {
     const diff = `--- a/file.ts\n+++ b/file.ts\n@@ -1,3 +1,4 @@\n line1\n+added\n line2\n line3`;
     const { container } = render(<ToolResultRenderer content={diff} />);
     expect(container.querySelector("[data-testid='diff-view']")).toBeTruthy();
   });
 
   it("renders plain text with MarkdownRenderer", () => {
     const { container } = render(<ToolResultRenderer content="Hello world" />);
     expect(container.textContent).toContain("Hello world");
   });
 
   it("passes toolName prop through", () => {
     const { container } = render(<ToolResultRenderer content="test" toolName="read_file" />);
     expect(container.textContent).toContain("test");
   });
 });