74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
|
import { render, screen } from "@testing-library/react";
|
||
|
|
import { describe, expect, it } from "vitest";
|
||
|
|
import { MessageItem } from "./MessageItem";
|
||
|
|
|
||
|
|
describe("MessageItem component (Story 178 AC3)", () => {
|
||
|
|
it("renders user message as a bubble", () => {
|
||
|
|
render(<MessageItem msg={{ role: "user", content: "Hello there!" }} />);
|
||
|
|
|
||
|
|
expect(screen.getByText("Hello there!")).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it("renders assistant message with markdown-body class", () => {
|
||
|
|
render(
|
||
|
|
<MessageItem
|
||
|
|
msg={{ role: "assistant", content: "Here is my response." }}
|
||
|
|
/>,
|
||
|
|
);
|
||
|
|
|
||
|
|
expect(screen.getByText("Here is my response.")).toBeInTheDocument();
|
||
|
|
const text = screen.getByText("Here is my response.");
|
||
|
|
expect(text.closest(".markdown-body")).toBeTruthy();
|
||
|
|
});
|
||
|
|
|
||
|
|
it("renders tool message as collapsible details", () => {
|
||
|
|
render(
|
||
|
|
<MessageItem
|
||
|
|
msg={{
|
||
|
|
role: "tool",
|
||
|
|
content: "tool output content",
|
||
|
|
tool_call_id: "toolu_1",
|
||
|
|
}}
|
||
|
|
/>,
|
||
|
|
);
|
||
|
|
|
||
|
|
expect(screen.getByText(/Tool Output/)).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it("renders tool call badges for assistant messages with tool_calls", () => {
|
||
|
|
render(
|
||
|
|
<MessageItem
|
||
|
|
msg={{
|
||
|
|
role: "assistant",
|
||
|
|
content: "I will read the file.",
|
||
|
|
tool_calls: [
|
||
|
|
{
|
||
|
|
id: "toolu_1",
|
||
|
|
type: "function",
|
||
|
|
function: {
|
||
|
|
name: "Read",
|
||
|
|
arguments: '{"file_path":"src/main.rs"}',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}}
|
||
|
|
/>,
|
||
|
|
);
|
||
|
|
|
||
|
|
expect(screen.getByText("I will read the file.")).toBeInTheDocument();
|
||
|
|
expect(screen.getByText("Read(src/main.rs)")).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it("is wrapped in React.memo (has displayName or $$typeof memo)", () => {
|
||
|
|
// React.memo wraps the component — verify the export is memoized
|
||
|
|
// by checking that the component has a memo wrapper
|
||
|
|
const { type } = { type: MessageItem };
|
||
|
|
// React.memo returns an object with $$typeof === Symbol(react.memo)
|
||
|
|
// biome-ignore lint/suspicious/noExplicitAny: checking React internals for test
|
||
|
|
expect((type as any).$$typeof).toBeDefined();
|
||
|
|
// biome-ignore lint/suspicious/noExplicitAny: checking React internals for test
|
||
|
|
const typeofStr = String((type as any).$$typeof);
|
||
|
|
expect(typeofStr).toContain("memo");
|
||
|
|
});
|
||
|
|
});
|