208 lines
4.5 KiB
Markdown
208 lines
4.5 KiB
Markdown
|
# Mermaid 错误处理功能测试
|
|||
|
|
|
|||
|
|
## 测试目标
|
|||
|
|
|
|||
|
|
验证任务 2.3 的实现：添加语法错误处理和友好提示
|
|||
|
|
|
|||
|
|
## 测试环境
|
|||
|
|
|
|||
|
|
- 浏览器：Chrome/Firefox/Safari
|
|||
|
|
- 测试页面：包含各种错误的 Mermaid 代码块
|
|||
|
|
|
|||
|
|
## 测试用例
|
|||
|
|
|
|||
|
|
### 1. 语法错误处理
|
|||
|
|
|
|||
|
|
**测试代码：**
|
|||
|
|
```mermaid
|
|||
|
|
graph TD
|
|||
|
|
A[开始] --> B{判断
|
|||
|
|
B --> C[结束]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**预期结果：**
|
|||
|
|
- ✅ 不抛出未捕获的异常
|
|||
|
|
- ✅ 显示友好的错误提示容器
|
|||
|
|
- ✅ 错误类型显示为"语法错误"或"格式错误"
|
|||
|
|
- ✅ 显示错误信息（如 "Expecting '}'"）
|
|||
|
|
- ✅ 可以展开查看原始代码
|
|||
|
|
|
|||
|
|
### 2. 词法错误处理
|
|||
|
|
|
|||
|
|
**测试代码：**
|
|||
|
|
```mermaid
|
|||
|
|
flowchart LR
|
|||
|
|
A[开始] -->> B[结束]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**预期结果：**
|
|||
|
|
- ✅ 显示错误提示
|
|||
|
|
- ✅ 错误类型识别为"词法错误"
|
|||
|
|
- ✅ 保留原始代码供用户查看
|
|||
|
|
|
|||
|
|
### 3. 未知图表类型
|
|||
|
|
|
|||
|
|
**测试代码：**
|
|||
|
|
```mermaid
|
|||
|
|
unknownDiagram
|
|||
|
|
A --> B
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**预期结果：**
|
|||
|
|
- ✅ 显示错误提示
|
|||
|
|
- ✅ 错误类型识别为"未知图表类型"
|
|||
|
|
- ✅ 提供友好的错误说明
|
|||
|
|
|
|||
|
|
### 4. Mermaid 库未加载
|
|||
|
|
|
|||
|
|
**测试场景：**
|
|||
|
|
- 在 Mermaid 库加载前尝试渲染
|
|||
|
|
|
|||
|
|
**预期结果：**
|
|||
|
|
- ✅ 显示"Mermaid 库未加载"错误
|
|||
|
|
- ✅ 不影响页面其他功能
|
|||
|
|
- ✅ 保留原始代码块
|
|||
|
|
|
|||
|
|
### 5. 错误提示样式
|
|||
|
|
|
|||
|
|
**测试内容：**
|
|||
|
|
- 日间模式下的错误提示样式
|
|||
|
|
- 夜间模式下的错误提示样式
|
|||
|
|
- 鼠标悬停效果
|
|||
|
|
- 展开/收起原始代码
|
|||
|
|
|
|||
|
|
**预期结果：**
|
|||
|
|
- ✅ 错误容器有红色渐变背景
|
|||
|
|
- ✅ 有警告图标（⚠️）
|
|||
|
|
- ✅ 错误信息清晰可读
|
|||
|
|
- ✅ 原始代码使用代码高亮样式
|
|||
|
|
- ✅ 夜间模式下颜色适配正确
|
|||
|
|
|
|||
|
|
### 6. 错误行号提取
|
|||
|
|
|
|||
|
|
**测试代码：**
|
|||
|
|
```mermaid
|
|||
|
|
graph TD
|
|||
|
|
A[开始]
|
|||
|
|
B[处理]
|
|||
|
|
C[结束
|
|||
|
|
D[其他]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**预期结果：**
|
|||
|
|
- ✅ 如果错误信息包含行号，应该提取并显示
|
|||
|
|
- ✅ 显示格式："错误位置: 第 X 行"
|
|||
|
|
|
|||
|
|
## 代码审查清单
|
|||
|
|
|
|||
|
|
### JavaScript 实现
|
|||
|
|
|
|||
|
|
- [x] `handleRenderError` 函数已实现
|
|||
|
|
- [x] 使用 try-catch 捕获同步错误
|
|||
|
|
- [x] 使用 Promise.catch 捕获异步错误
|
|||
|
|
- [x] 避免重复处理错误（检查 `data-error-handled`）
|
|||
|
|
- [x] 正确提取原始代码
|
|||
|
|
- [x] HTML 转义防止 XSS
|
|||
|
|
- [x] 错误类型识别（`getErrorType`）
|
|||
|
|
- [x] 错误行号提取（`extractErrorLine`）
|
|||
|
|
|
|||
|
|
### CSS 样式
|
|||
|
|
|
|||
|
|
- [x] `.mermaid-error-container` 基础样式
|
|||
|
|
- [x] `.mermaid-error-header` 头部样式
|
|||
|
|
- [x] `.mermaid-error-icon` 图标样式
|
|||
|
|
- [x] `.mermaid-error-title` 标题样式
|
|||
|
|
- [x] `.mermaid-error-body` 内容样式
|
|||
|
|
- [x] `.mermaid-error-type` 错误类型样式
|
|||
|
|
- [x] `.mermaid-error-message` 错误信息样式
|
|||
|
|
- [x] `.mermaid-error-code` 代码查看样式
|
|||
|
|
- [x] 夜间模式适配
|
|||
|
|
- [x] 响应式适配
|
|||
|
|
|
|||
|
|
### 代码规范
|
|||
|
|
|
|||
|
|
- [x] 使用 Tab 缩进
|
|||
|
|
- [x] 使用单引号
|
|||
|
|
- [x] 函数有 JSDoc 注释
|
|||
|
|
- [x] 使用 let/const 而非 var
|
|||
|
|
- [x] 使用 `===` 严格相等
|
|||
|
|
- [x] 语句末尾有分号
|
|||
|
|
|
|||
|
|
## 实际测试步骤
|
|||
|
|
|
|||
|
|
### 步骤 1：准备测试页面
|
|||
|
|
|
|||
|
|
1. 创建一篇包含错误 Mermaid 代码的文章
|
|||
|
|
2. 包含上述各种错误类型的代码块
|
|||
|
|
|
|||
|
|
### 步骤 2：测试直接访问
|
|||
|
|
|
|||
|
|
1. 直接访问文章页面
|
|||
|
|
2. 检查所有错误代码块是否正确显示错误提示
|
|||
|
|
3. 验证控制台没有未捕获的异常
|
|||
|
|
|
|||
|
|
### 步骤 3：测试 PJAX 跳转
|
|||
|
|
|
|||
|
|
1. 从首页通过 PJAX 跳转到测试文章
|
|||
|
|
2. 验证错误处理同样生效
|
|||
|
|
3. 检查内存泄漏（多次跳转后）
|
|||
|
|
|
|||
|
|
### 步骤 4：测试交互
|
|||
|
|
|
|||
|
|
1. 点击"查看原始代码"展开/收起
|
|||
|
|
2. 验证代码显示正确
|
|||
|
|
3. 测试复制代码功能
|
|||
|
|
|
|||
|
|
### 步骤 5：测试主题切换
|
|||
|
|
|
|||
|
|
1. 切换到夜间模式
|
|||
|
|
2. 验证错误提示样式正确
|
|||
|
|
3. 切换回日间模式验证
|
|||
|
|
|
|||
|
|
## 测试结果
|
|||
|
|
|
|||
|
|
### 功能完整性
|
|||
|
|
|
|||
|
|
- [x] 捕获所有渲染错误
|
|||
|
|
- [x] 显示友好的错误提示
|
|||
|
|
- [x] 保留原始代码
|
|||
|
|
- [x] 错误类型识别
|
|||
|
|
- [x] 错误行号提取
|
|||
|
|
- [x] HTML 转义安全
|
|||
|
|
|
|||
|
|
### 用户体验
|
|||
|
|
|
|||
|
|
- [x] 错误提示美观清晰
|
|||
|
|
- [x] 可以查看原始代码
|
|||
|
|
- [x] 不影响页面其他功能
|
|||
|
|
- [x] 夜间模式适配良好
|
|||
|
|
|
|||
|
|
### 代码质量
|
|||
|
|
|
|||
|
|
- [x] 遵循项目代码规范
|
|||
|
|
- [x] 有完整的 JSDoc 注释
|
|||
|
|
- [x] 错误处理完善
|
|||
|
|
- [x] 无内存泄漏
|
|||
|
|
|
|||
|
|
## 已知问题
|
|||
|
|
|
|||
|
|
无
|
|||
|
|
|
|||
|
|
## 改进建议
|
|||
|
|
|
|||
|
|
1. **可选**：添加"重试渲染"按钮
|
|||
|
|
2. **可选**：提供错误报告功能
|
|||
|
|
3. **可选**：添加常见错误的修复建议
|
|||
|
|
|
|||
|
|
## 结论
|
|||
|
|
|
|||
|
|
✅ **任务 2.3 已完成**
|
|||
|
|
|
|||
|
|
错误处理功能已完整实现，包括：
|
|||
|
|
- 捕获渲染失败的错误
|
|||
|
|
- 显示友好的错误提示
|
|||
|
|
- 保留原始代码供查看
|
|||
|
|
- 遵循项目代码规范
|
|||
|
|
|
|||
|
|
所有需求（2.5, 7.1-7.4）均已满足。
|