补充聊天 Markdown 渲染测试

覆盖 GFM、代码块和表格展示覆盖用户纯文本与流式中间态覆盖 HTML、链接和图片安全边界
2026-09-04 11:52:12 +08:00
parent dcdd13bc1c
commit c370f9b853
1 changed files with 77 additions and 0 deletions
@@ -0,0 +1,77 @@
+// @vitest-environment jsdom
+
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { ChatMarkdownMessage } from '../src/components/ChatMarkdownMessage';
+
+describe('ChatMarkdownMessage', () => {
+  it('渲染 assistant 的 GFM 内容与代码块', () => {
+    const { container } = render(
+      <ChatMarkdownMessage
+        role="assistant"
+        text={'## 标题\n\n- 一项\n- 二项\n\n```ts\nconst answer = 42;\n```'}
+      />,
+    );
+
+    expect(container.querySelector('h2')?.textContent).toBe('标题');
+    expect(container.querySelectorAll('li')).toHaveLength(2);
+    expect(container.querySelector('pre code')?.textContent).toContain(
+      'const answer = 42;',
+    );
+  });
+
+  it('保留流式 assistant 文本并标记 streaming 状态', () => {
+    const { container } = render(
+      <ChatMarkdownMessage
+        role="assistant"
+        streaming
+        text={'正在生成 **结果'}
+      />,
+    );
+
+    expect(container.querySelector('[data-streaming="true"]')).toBeTruthy();
+    expect(container.textContent).toContain('正在生成');
+    expect(container.textContent).toContain('结果');
+  });
+
+  it('用户消息保持纯文本，不解析 Markdown', () => {
+    const { container } = render(
+      <ChatMarkdownMessage role="user" text={'**不要解析**\n`/read game`'} />,
+    );
+
+    expect(container.querySelector('strong')).toBeNull();
+    expect(container.querySelector('code')).toBeNull();
+    expect(container.textContent).toContain('**不要解析**');
+    expect(container.textContent).toContain('`/read game`');
+  });
+
+  it('不输出原始 HTML、可点击链接或图片节点', () => {
+    const { container } = render(
+      <ChatMarkdownMessage
+        role="assistant"
+        text={
+          '<script>alert(1)</script>\n\n[外链](https://example.com) ![示意图](x.png)'
+        }
+      />,
+    );
+
+    expect(container.querySelector('script')).toBeNull();
+    expect(container.querySelector('a')).toBeNull();
+    expect(container.querySelector('img')).toBeNull();
+    expect(container.textContent).toContain('外链');
+    expect(container.textContent).toContain('图片：示意图');
+  });
+
+  it('支持表格并允许窄视口横向滚动', () => {
+    const { container } = render(
+      <ChatMarkdownMessage
+        role="assistant"
+        text={'| 名称 | 状态 |\n| --- | --- |\n| demo | ready |'}
+      />,
+    );
+
+    expect(container.querySelectorAll('table th')).toHaveLength(2);
+    expect(container.querySelector('div.overflow-x-auto')).toBeTruthy();
+  });
+});