theo-agent-dashboard

ToolCall.test.tsx (6027B)

---

 import { describe, it, expect } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/react";
 import { ToolCall } from "./ToolCall";
 import type { ToolCall as ToolCallType } from "../../store/chat";
 
 const baseToolCall: ToolCallType = {
   id: "tc1",
   name: "search",
   args: '{"query":"test"}',
   result: null,
   status: "pending",
 };
 
 describe("ToolCall", () => {
   it("renders tool name in monospace span", () => {
     const { container } = render(<ToolCall toolCall={baseToolCall} />);
     const nameSpan = container.querySelector(".font-mono");
     expect(nameSpan?.textContent).toBe("search");
   });
 
   it("renders operation badge", () => {
     const { container } = render(<ToolCall toolCall={{ ...baseToolCall, name: "read_file" }} />);
     const badge = container.querySelector(".inline-flex.uppercase");
     expect(badge?.textContent).toBe("READ");
   });
 
   it("renders SEARCH badge for search_files", () => {
     const { container } = render(<ToolCall toolCall={{ ...baseToolCall, name: "search_files" }} />);
     const badge = container.querySelector(".inline-flex.uppercase");
     expect(badge?.textContent).toBe("SEARCH");
   });
 
   it("is collapsed by default", () => {
     render(<ToolCall toolCall={{ ...baseToolCall, result: "found" }} />);
     expect(screen.queryByText("Arguments")).not.toBeInTheDocument();
     expect(screen.queryByText("Result")).not.toBeInTheDocument();
   });
 
   it("expands to show args and result on click", () => {
     render(<ToolCall toolCall={{ ...baseToolCall, result: "found it" }} />);
     fireEvent.click(screen.getByRole("button"));
     expect(screen.getByText("Arguments")).toBeInTheDocument();
     expect(screen.getByText("Result")).toBeInTheDocument();
   });
 
   it("collapses when clicked again", () => {
     render(<ToolCall toolCall={{ ...baseToolCall, result: "found it" }} />);
     fireEvent.click(screen.getByRole("button"));
     expect(screen.getByText("Arguments")).toBeInTheDocument();
     fireEvent.click(screen.getByRole("button"));
     expect(screen.queryByText("Arguments")).not.toBeInTheDocument();
   });
 
   it("shows running indicator when status is running", () => {
     render(<ToolCall toolCall={{ ...baseToolCall, status: "running" }} />);
     expect(screen.getByText("Running…")).toBeInTheDocument();
   });
 
   it("shows pending status", () => {
     render(<ToolCall toolCall={{ ...baseToolCall, status: "pending" }} />);
     expect(screen.getByText("Pending")).toBeInTheDocument();
   });
 
   it("shows complete status", () => {
     render(<ToolCall toolCall={{ ...baseToolCall, status: "complete" }} />);
     expect(screen.getByText("Done")).toBeInTheDocument();
   });
 
   it("shows error status", () => {
     render(<ToolCall toolCall={{ ...baseToolCall, status: "error" }} />);
     expect(screen.getByText("Error")).toBeInTheDocument();
   });
 
   it("applies error styling for error status", () => {
     const { container } = render(<ToolCall toolCall={{ ...baseToolCall, status: "error" }} />);
     const statusSpan = container.querySelector(".text-red-400");
     expect(statusSpan).toBeInTheDocument();
   });
 
   it("applies running styling", () => {
     const { container } = render(<ToolCall toolCall={{ ...baseToolCall, status: "running" }} />);
     const statusSpan = container.querySelector(".text-yellow-400");
     expect(statusSpan).toBeInTheDocument();
   });
 
   it("applies complete styling", () => {
     const { container } = render(<ToolCall toolCall={{ ...baseToolCall, status: "complete" }} />);
     const statusSpan = container.querySelector(".text-green-400");
     expect(statusSpan).toBeInTheDocument();
   });
 
   it("applies pending styling", () => {
     const { container } = render(<ToolCall toolCall={{ ...baseToolCall, status: "pending" }} />);
     const statusSpan = container.querySelector(".text-gray-400");
     expect(statusSpan).toBeInTheDocument();
   });
 
   it("formats JSON args when expanded", () => {
     render(<ToolCall toolCall={baseToolCall} />);
     fireEvent.click(screen.getByRole("button"));
     expect(screen.getByText(/"query":\s*"test"/)).toBeInTheDocument();
   });
 
   it("does not show result when result is null", () => {
     render(<ToolCall toolCall={baseToolCall} />);
     fireEvent.click(screen.getByRole("button"));
     expect(screen.getByText("Arguments")).toBeInTheDocument();
     expect(screen.queryByText("Result")).not.toBeInTheDocument();
   });
 
   it("shows result when result is non-null", () => {
     render(<ToolCall toolCall={{ ...baseToolCall, result: "some output" }} />);
     fireEvent.click(screen.getByRole("button"));
     expect(screen.getByText("Result")).toBeInTheDocument();
   });
 
   it("handles non-JSON args gracefully", () => {
     render(<ToolCall toolCall={{ ...baseToolCall, args: "not json" }} />);
     fireEvent.click(screen.getByRole("button"));
     expect(screen.getByText("not json")).toBeInTheDocument();
   });
 
   it("arrow rotates when expanded", () => {
     const { container } = render(<ToolCall toolCall={baseToolCall} />);
     const arrow = container.querySelector("svg");
     expect(arrow).not.toHaveClass("rotate-90");
 
     fireEvent.click(screen.getByRole("button"));
     expect(arrow).toHaveClass("rotate-90");
   });
 
   it("displays different tool names", () => {
     const { container } = render(<ToolCall toolCall={{ ...baseToolCall, name: "calculator" }} />);
     const nameSpan = container.querySelector(".font-mono");
     expect(nameSpan?.textContent).toBe("calculator");
   });
 
   it("running status shows pulse indicator", () => {
     const { container } = render(
       <ToolCall toolCall={{ ...baseToolCall, status: "running" }} />,
     );
     const pulse = container.querySelector(".animate-pulse");
     expect(pulse).toBeInTheDocument();
   });
 
   it("non-running status does not show pulse indicator", () => {
     const { container } = render(
       <ToolCall toolCall={{ ...baseToolCall, status: "complete" }} />,
     );
     const pulse = container.querySelector(".animate-pulse");
     expect(pulse).not.toBeInTheDocument();
   });
 });