diff --git a/ui/src/components/ChatMarkdownMessage.test.tsx b/ui/src/components/ChatMarkdownMessage.test.tsx index da97e046..835048cd 100644 --- a/ui/src/components/ChatMarkdownMessage.test.tsx +++ b/ui/src/components/ChatMarkdownMessage.test.tsx @@ -1,17 +1,39 @@ // @vitest-environment node -import { describe, it } from "vitest"; + +import { describe, expect, it } from "vitest"; +import { renderToStaticMarkup } from "react-dom/server"; +import { ChatMarkdownMessage } from "./ChatMarkdownMessage"; describe("ChatMarkdownMessage", () => { - describe("markdown rendering (CHAT-02)", () => { - it.todo("renders plain text as paragraph"); - it.todo("renders code blocks with hljs classes for syntax highlighting"); - it.todo("renders GFM tables"); - it.todo("renders headings, lists, and links"); + it("renders plain text as a paragraph", () => { + const html = renderToStaticMarkup( + , + ); + expect(html).toContain("

"); + expect(html).toContain("Hello world"); }); - describe("code block features (CHAT-03)", () => { - it.todo("renders language label from code fence"); - it.todo("renders copy button with aria-label"); - it.todo("extracts code text content for clipboard"); + it("renders fenced code blocks with hljs classes applied by rehype-highlight", () => { + const content = "```typescript\nconst x: number = 42;\n```"; + const html = renderToStaticMarkup( + , + ); + expect(html).toContain("hljs"); + }); + + it("renders a copy button with aria-label='Copy code'", () => { + const content = "```typescript\nconst x = 1;\n```"; + const html = renderToStaticMarkup( + , + ); + expect(html).toContain('aria-label="Copy code"'); + }); + + it("renders a language label extracted from the code fence", () => { + const content = "```typescript\nconst x = 1;\n```"; + const html = renderToStaticMarkup( + , + ); + expect(html).toContain("typescript"); }); });