44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import { fireEvent, render, screen } from "@testing-library/react";
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
import { MessageBubble } from "@/components/MessageBubble";
|
|
import type { UIMessage } from "@/lib/types";
|
|
|
|
describe("MessageBubble", () => {
|
|
it("renders user messages as right-aligned pills", () => {
|
|
const message: UIMessage = {
|
|
id: "u1",
|
|
role: "user",
|
|
content: "hello",
|
|
createdAt: Date.now(),
|
|
};
|
|
|
|
const { container } = render(<MessageBubble message={message} />);
|
|
const row = container.firstElementChild;
|
|
const pill = screen.getByText("hello");
|
|
|
|
expect(row).toHaveClass("ml-auto", "flex");
|
|
expect(pill).toHaveClass("ml-auto", "w-fit", "rounded-[18px]");
|
|
});
|
|
|
|
it("renders trace messages as collapsible tool groups", () => {
|
|
const message: UIMessage = {
|
|
id: "t1",
|
|
role: "tool",
|
|
kind: "trace",
|
|
content: 'search "hk weather"',
|
|
traces: ['weather("get")', 'search "hk weather"'],
|
|
createdAt: Date.now(),
|
|
};
|
|
|
|
render(<MessageBubble message={message} />);
|
|
const toggle = screen.getByRole("button", { name: /used 2 tools/i });
|
|
|
|
expect(screen.getByText('weather("get")')).toBeInTheDocument();
|
|
expect(screen.getByText('search "hk weather"')).toBeInTheDocument();
|
|
|
|
fireEvent.click(toggle);
|
|
expect(screen.queryByText('weather("get")')).not.toBeInTheDocument();
|
|
});
|
|
});
|