xiaozhi/jk-rag-platform/docs/TESTING_GUIDE.md

🧪 ChatInterface 功能测试指南

生成时间: 2026-04-10 15:25
测试环境: Mock 数据模式 ✅
测试页面: /chat-test

---

🚀 快速开始

1. 访问测试页面

启动项目后，在浏览器中访问：

http://localhost:3100/chat-test

或访问主项目首页后，手动在地址栏输入 /chat-test

注意: 项目启动端口为 3100（根据 vite.config.ts 配置）

---

✅ 测试用例清单

测试用例 1: 基础对话流程 (P0)

步骤:

1. 打开测试页面
2. 在输入框中输入 "你好"
3. 点击发送按钮

期望结果:

• ✅ 用户消息显示在右侧（蓝色背景）
• ✅ AI 助手消息显示在左侧（白色背景）
• ✅ 消息自动滚动到底部
• ✅ 加载状态显示正常

---

测试用例 2: Markdown 渲染 (P0) 🔥

步骤:

1. 在输入框中输入 "请用 Markdown 格式列出 HTML 的基本标签"
2. 点击发送

期望结果:

• ✅ 看到格式化的标题（# H1, ## H2）
• ✅ 看到无序列表（- 项目）
• ✅ 看到有序列表（1. 第一项）
• ✅ 看到引用块（> 引用内容）
• ✅ 看到加粗（**粗体**）和斜体（*斜体*）
• ✅ 看到链接和表格

Mock 数据关键词: 输入包含 "Markdown" 或 "列表"

---

测试用例 3: LaTeX 公式渲染 (P0) 🔥

步骤:

1. 在输入框中输入 "什么是质能方程"
2. 点击发送

期望结果:

• ✅ 看到行内公式：$E = mc^2$ 正确渲染
• ✅ 看到块级公式居中显示
• ✅ 看到分式、上下标等数学符号

Mock 数据关键词: 输入包含 "公式"、"方程"、"数学"

测试示例:

输入：请写出二次方程的求根公式
期望输出：
$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

---

测试用例 4: 代码高亮 (P1) 🔥

步骤:

1. 在输入框中输入 "写一个 Python 的 Hello World"
2. 点击发送

期望结果:

• ✅ 看到带语法高亮的代码块
• ✅ Python 关键字显示不同颜色（如 print, def, class）
• ✅ 字符串显示为绿色/橙色
• ✅ 看到代码复制按钮

Mock 数据关键词: 输入包含 "代码"、"Python"、"Java"、"JavaScript"

测试示例:

def hello_world():
    print("Hello, World!")
    return True

---

测试用例 5: Mermaid 图表 (P2)

步骤:

1. 在输入框中输入 "画一个流程图"
2. 点击发送

期望结果:

• ✅ 看到渲染后的流程图
• ✅ 节点和箭头显示正确
• ✅ 点击图表可以全屏查看 SVG

Mock 数据关键词: 输入包含 "流程图"、"图表"

---

测试用例 6: 多轮对话上下文 (P1)

步骤:

1. 第一轮：输入 "什么是 RAG"
2. 等待 AI 回复
3. 第二轮：输入 "它有什么优点"

期望结果:

• ✅ 第二轮回复能理解上下文（提到 RAG）
• ✅ 对话历史正确保存
• ✅ 消息列表正确显示多轮对话

---

测试用例 7: 错误处理 (P1)

步骤:

1. 断网或模拟服务器错误
2. 发送消息

期望结果:

• ✅ 显示错误提示 Toast
• ✅ Loading 状态正确关闭
• ✅ 可以重新发送

---

📊 Mock 数据说明

当前使用 Mock 数据模式 (USE_MOCK = true)，所有 API 请求都会返回预设的模拟数据。

Mock 数据位置

• 认证相关: src/mock/authApi.ts
• 知识库相关: src/mock/knowledgeApi.ts
• 应用相关: src/mock/applicationApi.ts
• 审核相关: src/mock/auditApi.ts
• 概览相关: src/mock/overviewApi.ts

切换到真实 API

如需切换到真实后端 API，修改：

// src/apis/api.ts
const USE_MOCK = false; // 改为 false

---

🐛 问题排查

问题 1: Markdown 渲染失败

症状: 看到纯文本而不是格式化内容 排查:

1. 检查是否已安装依赖：npm list react-markdown
2. 检查导入路径是否正确
3. 查看浏览器控制台错误

问题 2: LaTeX 公式显示为纯文本

症状: $E=mc^2$ 未渲染为公式 排查:

1. 检查 KaTeX CSS 是否加载：katex/dist/katex.min.css
2. 检查 preprocessLaTeX 函数是否正确处理
3. 查看公式语法是否正确（如 $ 两侧不能有空格）

问题 3: 代码块无高亮

症状: 代码显示为纯文本 排查:

1. 检查 rehype-highlight 是否安装
2. 确认代码块语法正确（使用 ```language 标记）
3. 查看浏览器控制台是否有 CSS 加载错误

---

📝 测试报告模板

测试完成后，请填写以下报告：

## 测试报告

**测试时间**: 2026-04-10
**测试人员**: [你的名字]
**测试环境**: Chrome v120 / macOS

### 通过情况
- [x] 基础对话流程
- [x] Markdown 渲染
- [ ] LaTeX 公式渲染
- [ ] 代码高亮
- [ ] Mermaid 图表

### 发现的问题
1. [描述问题]
2. [复现步骤]

### 性能指标
- 首字响应时间：___ ms
- 页面加载时间：___ ms

---

🎯 下一步

测试通过后：

1. 将 ChatInterface 集成到主应用
2. 完善 SSE 流式输出
3. 迁移侧边栏等高级功能

---

测试指南生成完毕 - 祝测试顺利！