---
title: 测试文档
order: 4
category: atom
---

# PisellMetricCard 组件测试用例文档

## 测试概览

本文档列出 PisellMetricCard 组件的所有测试用例点。

---

## 一、基础渲染测试

| 测试项 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 标题渲染 | `title="Total Sales"` | 显示标题 "Total Sales" | 自动化 |
| 数值渲染 | `value={1580}` | 显示数值 "1580" | 自动化 |
| 完整卡片渲染 | 传入所有基础 props | 卡片正常渲染，无报错 | 自动化 |
| 空值处理 | `value={null}` | 显示 "-" | 自动化 |
| 副标题渲染 | `subtitle="Last 30 days"`, `showSubtitle={true}` | 显示副标题 | 人工 |

---

## 二、数值格式化测试

| 测试项 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 小数精度 | `value={1234.567}`, `precision={2}` | 显示 "1234.57" | 自动化 |
| 千分位分隔 | `value={1234567}`, `useGrouping={true}` | 显示 "1,234,567" | 自动化 |
| 货币符号 | `value={1580}`, `showCurrencySymbol={true}`, `currencySymbol="$"` | 显示 "$1580" | 自动化 |
| 货币+千分位 | 货币符号 + 千分位 + 精度 | 显示 "$1,234.56" | 自动化 |
| 整数隐藏小数 | `value={100}`, `precision={2}`, `hideDecimalForWholeNumbers={true}` | 显示 "100" 而非 "100.00" | 自动化 |
| 自定义格式化 | 使用 `formatter` 函数 | 按自定义规则格式化 | 自动化 |

---

## 三、环比功能测试

| 测试项 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 环比显示 | `comparison={120}`, `showComparison={true}` | 显示环比信息 | 人工 |
| 正向趋势 | `comparison={120}` | 显示绿色 "+120" 和上升箭头 | 人工 |
| 负向趋势 | `comparison={-230}` | 显示红色 "-230" 和下降箭头 | 人工 |
| 零值趋势 | `comparison={0}` | 不显示环比信息 | 自动化 |
| 环比前缀 | `comparisonText="vs. last month"` | 显示自定义前缀文本 | 人工 |
| 隐藏趋势箭头 | `showTrendIcon={false}` | 不显示箭头图标 | 人工 |
| 环比格式化 | 环比数值 + 货币符号 | 显示 "+$120" | 人工 |
| 环比空值 | `comparison={null}` | 不显示环比信息 | 自动化 |

---

## 四、趋势箭头测试

| 测试项 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 上升箭头 | `comparison={120}`, `showTrendIcon={true}` | 显示绿色上升箭头 ↑ | 人工 |
| 下降箭头 | `comparison={-230}`, `showTrendIcon={true}` | 显示红色下降箭头 ↓ | 人工 |
| 箭头颜色 | 正向/负向趋势 | 箭头颜色与环比文本颜色一致 | 人工 |
| 自定义颜色 | `positiveColor="#00ff00"`, `negativeColor="#ff0000"` | 使用自定义颜色 | 人工 |

---

## 五、样式配置测试

### 5.1 卡片容器样式

| 测试项 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 边框 | `bordered={true/false}` | 显示/隐藏边框 | 人工 |
| 圆角 | `borderRadius={20}` | 圆角为 20px | 人工 |
| 内边距 | `padding={24}` | 内边距为 24px | 人工 |
| 背景色 | `background="#f5f5f5"` | 背景色为浅灰色 | 人工 |
| 卡片宽度 | `width="100%"` | 宽度撑满父容器 | 人工 |
| 卡片宽度（数值） | `width={280}` | 宽度为 280px | 人工 |
| 悬停效果 | `hoverable={true}` | 鼠标悬停时背景色变化 | 人工 |

### 5.2 标题样式

| 测试项 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 标题字号 | `titleSize={16}` | 标题字号为 16px | 人工 |
| 标题字重 | `titleWeight={600}` | 标题字体加粗 | 人工 |
| 标题颜色 | `titleColor="#000000"` | 标题颜色为黑色 | 人工 |

### 5.3 数值样式

| 测试项 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 数值字号 | `valueSize={36}` | 数值字号为 36px | 人工 |
| 数值字重 | `valueWeight={700}` | 数值字体加粗 | 人工 |
| 数值颜色 | `valueColor="#1890ff"` | 数值颜色为蓝色 | 人工 |

### 5.4 环比样式

| 测试项 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 环比字号 | `comparisonSize={12}` | 环比字号为 12px | 人工 |
| 正向颜色 | `positiveColor="#52c41a"` | 正向趋势为绿色 | 人工 |
| 负向颜色 | `negativeColor="#ff4d4f"` | 负向趋势为红色 | 人工 |

---

## 六、功能开关测试

| 测试项 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 显示副标题 | `showSubtitle={true}` + subtitle 有值 | 显示副标题 | 人工 |
| 隐藏副标题 | `showSubtitle={false}` | 不显示副标题 | 人工 |
| 显示环比 | `showComparison={true}` + comparison 有值 | 显示环比信息 | 人工 |
| 隐藏环比 | `showComparison={false}` | 不显示环比信息 | 人工 |
| 显示标签 | `showTag={true}` + tag 有值 | 显示标签 | 人工 |
| 隐藏标签 | `showTag={false}` | 不显示标签 | 人工 |
| 显示提示 | `showTooltip={true}` + tooltip 有值 | 标题旁显示问号图标 | 人工 |
| 提示悬停 | 鼠标悬停在问号图标上 | 显示提示内容 | 人工 |
| 加载状态 | `loading={true}` | 显示骨架屏 | 人工 |

---

## 七、标签和提示测试

| 测试项 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 标签插槽 | `tag={<Tag color="green">Hot</Tag>}`, `showTag={true}` | 显示绿色 Hot 标签 | 人工 |
| 提示信息 | `tooltip="This is a tooltip"`, `showTooltip={true}` | 鼠标悬停显示提示 | 人工 |
| 提示插槽 | tooltip 传入复杂 ReactNode | 正确显示自定义内容 | 人工 |

---

## 八、交互测试

| 测试项 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 点击回调 | `onClick={() => console.log('clicked')}` | 点击卡片触发回调 | 人工 |
| 悬停效果 | `hoverable={true}` | 鼠标悬停时背景色变化 | 人工 |
| 禁用悬停 | `hoverable={false}` | 鼠标悬停时无背景色变化 | 人工 |

---

## 九、边界情况测试

| 测试项 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 超大数值 | `value={999999999999}` | 正确显示（可能需要千分位） | 人工 |
| 超小数值 | `value={0.0001}` | 正确显示 | 人工 |
| 负数值 | `value={-1234}` | 显示 "-1234" | 自动化 |
| 极长标题 | title 为很长的字符串 | 正确换行或截断 | 人工 |
| 特殊字符 | title 包含特殊字符 | 正确显示 | 人工 |
| 字符串数值 | `value="1234"` | 正确转换并显示 | 自动化 |
| 无效数值 | `value="abc"` | 显示 "-" | 自动化 |

---

## 十、组合场景测试

| 测试项 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 完整配置 | 所有功能开关 + 所有样式配置 | 正确显示所有元素 | 人工 |
| 货币+环比 | 货币格式化 + 环比显示 | 主数值和环比都显示货币符号 | 人工 |
| 副标题+提示+标签 | 同时显示副标题、提示、标签 | 所有元素正确排列 | 人工 |
| 多卡片并排 | 多个 MetricCard 并排显示 | 布局正确，无样式冲突 | 人工 |
| 响应式布局 | 不同屏幕尺寸 | 卡片自适应显示 | 人工 |

---

## 十一、性能测试

| 测试项 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 渲染性能 | 渲染 100 个卡片 | 无明显卡顿 | 人工 |
| 更新性能 | 频繁更新 value | 无内存泄漏 | 人工 |
| 格式化性能 | 复杂格式化函数 | 格式化耗时 < 50ms | 自动化 |

---

## 十二、无障碍性测试

| 测试项 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 语义化标签 | 检查 HTML 结构 | 使用语义化标签 | 人工 |
| 键盘导航 | Tab 键导航 | 可聚焦元素正确 | 人工 |
| 屏幕阅读器 | 使用屏幕阅读器 | 正确读取内容 | 人工 |

---

## Bug 汇总

### 待修复的 Bug

| Bug ID | 描述 | 优先级 | 状态 | 发现时间 |
|--------|------|--------|------|---------|
| - | - | - | - | - |

### 已修复的 Bug

| Bug ID | 描述 | 优先级 | 修复时间 | 修复方案 |
|--------|------|--------|---------|---------|
| - | - | - | - | - |

---

## 测试统计

| 类别 | 总数 | 已通过 | 未通过 | 待测试 |
|------|------|--------|--------|--------|
| 自动化测试 | 15 | 0 | 0 | 15 |
| 人工测试 | 60+ | 0 | 0 | 60+ |
| 总计 | 75+ | 0 | 0 | 75+ |

---

## 测试环境

- **浏览器**：Chrome、Firefox、Safari、Edge
- **设备**：桌面、平板、手机
- **框架版本**：React 18+
- **Ant Design 版本**：5.x

---

## 测试说明

1. **自动化测试**：使用 Vitest 编写单元测试，覆盖核心逻辑和边界情况
2. **人工测试**：在实际应用场景中测试 UI 表现和交互效果
3. **回归测试**：每次修改后重新测试相关用例
4. **Bug 记录**：发现 Bug 后及时记录到"Bug 汇总"部分
5. **测试更新**：随着功能迭代，持续更新测试用例

---

## 下一步

- [ ] 完成所有自动化测试用例编写
- [ ] 执行人工测试并记录结果
- [ ] 修复发现的 Bug
- [ ] 补充遗漏的测试用例
- [ ] 达到 80% 以上的测试覆盖率
