test(21-02): add failing tests for ChatMarkdownMessage and ChatCodeBlock

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(
+      <ChatMarkdownMessage content="Hello world" />,
+    );
+    expect(html).toContain("<p>");
+    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(
+      <ChatMarkdownMessage content={content} />,
+    );
+    expect(html).toContain("hljs");
+  });
+
+  it("renders a copy button with aria-label='Copy code'", () => {
+    const content = "```typescript\nconst x = 1;\n```";
+    const html = renderToStaticMarkup(
+      <ChatMarkdownMessage content={content} />,
+    );
+    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(
+      <ChatMarkdownMessage content={content} />,
+    );
+    expect(html).toContain("typescript");
   });
 });