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

# TextCard 测试用例文档

## 一、测试概述

### 测试范围
- 组件基础功能
- 6 种样式变体
- 3 种尺寸
- 4 种状态
- 图标、标签、角标功能
- 插槽功能
- 文本配置
- 宽度模式
- 事件处理
- 状态管理
- 可访问性

### 测试方法
- 人工测试（UI 交互、视觉验证）
- 自动化测试（单元测试、快照测试）

---

## 二、基础功能测试用例

### 2.1 组件渲染

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 基础渲染 | 使用必填 prop `text` 渲染组件 | 组件正常渲染，显示文本内容 | 自动化 |
| 空文本渲染 | text 设置为空字符串 | 组件正常渲染，不显示文本 | 自动化 |
| ReactNode 文本 | text 传入 JSX 元素 | 正确渲染 JSX 内容 | 自动化 |

### 2.2 文本内容

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 文本显示 | 设置 text="Tab title" | 正确显示文本内容 | 人工 |
| 长文本省略（单行） | 设置超长文本，maxLines=1 | 文本超出显示省略号 | 人工 |
| 长文本省略（多行） | 设置超长文本，maxLines=2 | 文本超出 2 行显示省略号 | 人工 |
| 禁用省略 | ellipsis=false | 文本不显示省略号，完整显示 | 人工 |

---

## 三、样式变体测试用例

### 3.1 样式 1 - 纯文本 (text)

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 默认样式 | variant="text" | 无背景，无边框，无 padding | 人工 |
| Active 状态 | variant="text" + active.value=true | 文本颜色变为主题色，字体加粗 | 人工 |
| Hover 状态 | variant="text" + 鼠标悬停 | 文本颜色变为浅紫色 | 人工 |
| Disabled 状态 | variant="text" + disabled.value=true | 文本半透明，颜色变灰 | 人工 |

### 3.2 样式 2 - 圆角背景 (filled)

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 默认样式 | variant="filled" | 无背景，有 padding，圆角 40px | 人工 |
| Active 状态 | variant="filled" + active.value=true | 主题色背景，白色文字 | 人工 |
| Hover 状态 | variant="filled" + 鼠标悬停 | 灰色背景 #F2F4F7 | 人工 |
| 圆角效果 | variant="filled" | 边框圆角为 40px（胶囊形） | 人工 |

### 3.3 样式 3 - 浅色背景 (light)

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 默认样式 | variant="light" | 无背景，深灰文字 #475467 | 人工 |
| Active 状态 | variant="light" + active.value=true | 浅紫背景，主题色文字，字体加粗 | 人工 |
| Hover 状态 | variant="light" + 鼠标悬停 | 灰色背景 #F2F4F7 | 人工 |

### 3.4 样式 4 - 描边 (outlined)

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 默认样式 | variant="outlined" | 灰色边框，无背景 | 人工 |
| Active 状态 | variant="outlined" + active.value=true | 主题色边框，主题色文字 | 人工 |
| Hover 状态 | variant="outlined" + 鼠标悬停 | 边框颜色变浅紫 | 人工 |

### 3.5 样式 5 - 渐变 (gradient)

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 默认样式 | variant="gradient" | 无背景 | 人工 |
| Active 状态 | variant="gradient" + active.value=true | 渐变背景（紫色），白色文字 | 人工 |
| 渐变方向 | variant="gradient" + active | 渐变方向为 135deg | 人工 |

### 3.6 样式 6 - 虚线 (dashed)

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 默认样式 | variant="dashed" | 灰色虚线边框 | 人工 |
| Active 状态 | variant="dashed" + active.value=true | 主题色虚线边框，浅紫背景 | 人工 |
| Hover 状态 | variant="dashed" + 鼠标悬停 | 边框颜色变浅紫 | 人工 |

---

## 四、尺寸测试用例

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| Small 尺寸 | size="small" | padding: 8px 12px, fontSize: 14px, gap: 8px, borderRadius: 4px | 人工 |
| Default 尺寸 | size="default" | padding: 12px 16px, fontSize: 14px, gap: 12px, borderRadius: 6px | 人工 |
| Large 尺寸 | size="large" | padding: 16px 20px, fontSize: 16px, gap: 16px, borderRadius: 8px | 人工 |
| 尺寸切换 | 动态切换 size | 样式平滑过渡 | 人工 |

---

## 五、状态测试用例

### 5.1 Active 状态

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| Active 样式 | active.value=true | 应用 active 样式（根据 variant 不同） | 人工 |
| Active 类名 | active.className="custom-active" | 添加自定义类名 | 自动化 |
| Active 样式覆盖 | active.style={color: 'red'} | 自定义样式生效 | 人工 |
| Active onChange | 点击组件触发 active.onChange | onChange 回调被调用，参数为 true | 自动化 |
| Active extra | active.extra=<Icon /> | 渲染 extra 内容 | 人工 |

### 5.2 Disabled 状态

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| Disabled 样式 | disabled.value=true | 透明度 0.4，颜色变灰，cursor: not-allowed | 人工 |
| Disabled 点击 | disabled.value=true + 点击 | 点击事件不触发 | 自动化 |
| Disabled tabIndex | disabled.value=true | tabIndex=-1，无法键盘聚焦 | 人工 |
| Disabled extra | disabled.extra=<span>禁用</span> | 渲染 extra 内容 | 人工 |

### 5.3 Loading 状态

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| Loading 样式 | loading.value=true | 透明度 0.6，cursor: wait | 人工 |
| Loading 点击 | loading.value=true + 点击 | 点击事件不触发 | 自动化 |
| Loading extra | loading.extra=<Spin /> | 渲染加载图标 | 人工 |

### 5.4 状态优先级

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| Loading > Disabled | loading=true + disabled=true | 显示 loading 状态 | 自动化 |
| Loading > Active | loading=true + active=true | 显示 loading 状态 | 自动化 |
| Disabled > Active | disabled=true + active=true | 显示 disabled 状态 | 自动化 |

---

## 六、图标测试用例

### 6.1 前置图标

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 图标渲染 | prefixIcon=<BellIcon /> | 图标显示在文本前面 | 人工 |
| 图标大小 | iconConfig.size=20 | 图标大小为 20px | 人工 |
| 图标颜色 | iconConfig.color="#ff0000" | 图标颜色为红色 | 人工 |
| 无图标 | 不传 prefixIcon | 不显示前置图标 | 自动化 |

### 6.2 后置图标

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 图标渲染 | suffixIcon=<ChevronIcon /> | 图标显示在文本后面 | 人工 |
| 图标大小 | iconConfig.size=16 | 前后图标大小统一为 16px | 人工 |
| 无图标 | 不传 suffixIcon | 不显示后置图标 | 自动化 |

### 6.3 前后图标组合

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 同时显示 | prefixIcon + suffixIcon | 前后图标都正常显示 | 人工 |
| 间距正确 | 前后图标 + 文本 | 间距根据 size 正确设置 | 人工 |

---

## 七、标签测试用例

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 标签渲染 | tag=<Tag>标签</Tag> | 标签显示在后置位置 | 人工 |
| 标签样式 | tagConfig.style={marginLeft: 8} | 自定义样式生效 | 人工 |
| 标签+后置图标 | tag + suffixIcon | 标签在前，图标在后 | 人工 |
| 无标签 | 不传 tag | 不显示标签 | 自动化 |

---

## 八、角标测试用例

### 8.1 红点角标

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 红点显示 | badge.type="dot" | 显示红点角标 | 人工 |
| 红点位置 | badge.position="top-right" | 角标在右上角 | 人工 |
| 红点颜色 | badge.color="blue" | 角标颜色为蓝色 | 人工 |
| 红点偏移 | badge.offset=[5, 5] | 角标偏移 5px | 人工 |

### 8.2 数字角标

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 数字显示 | badge.type="number", content=99 | 显示数字 99 | 人工 |
| 大数字 | badge.content=999 | 正确显示大数字 | 人工 |
| 零显示 | badge.content=0 | 显示 0 | 人工 |

### 8.3 文本角标

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 文本显示 | badge.type="text", content="New" | 显示文本 "New" | 人工 |
| 长文本 | badge.content="Very Long Text" | 文本正常显示 | 人工 |

### 8.4 角标位置

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 右上角 | badge.position="top-right" | 角标在右上角 | 人工 |
| 左上角 | badge.position="top-left" | 角标在左上角 | 人工 |
| 右下角 | badge.position="bottom-right" | 角标在右下角 | 人工 |
| 左下角 | badge.position="bottom-left" | 角标在左下角 | 人工 |

---

## 九、插槽测试用例

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 前置插槽 | prefixSlot=<div>Custom</div> | 显示自定义前置内容，替换 prefixIcon | 人工 |
| 后置插槽 | suffixSlot=<div>Custom</div> | 显示自定义后置内容，替换 tag 和 suffixIcon | 人工 |
| 插槽优先级 | prefixSlot + prefixIcon | prefixSlot 优先显示 | 自动化 |

---

## 十、文本配置测试用例

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 字体大小 | textConfig.fontSize=18 | 文本字体大小为 18px | 人工 |
| 字体粗细 | textConfig.fontWeight="bold" | 文本加粗 | 人工 |
| 文本颜色 | textConfig.color="#ff0000" | 文本颜色为红色 | 人工 |
| 最大行数 | textConfig.maxLines=2 | 文本最多显示 2 行 | 人工 |
| 禁用省略 | textConfig.ellipsis=false | 不显示省略号 | 人工 |

---

## 十一、宽度模式测试用例

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 自动宽度 | widthMode="auto" | 宽度跟随内容，最大 400px | 人工 |
| 固定宽度 | widthMode="fixed", width=200 | 宽度固定为 200px | 人工 |
| 撑满容器 | widthMode="full" | 宽度 100%，最小 28px | 人工 |
| 最大宽度 | widthMode="auto", maxWidth=300 | 最大宽度为 300px | 人工 |
| 超长文本 | widthMode="auto" + 超长文本 | 达到最大宽度后显示省略号 | 人工 |

---

## 十二、事件测试用例

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| onClick 触发 | clickable=true + 点击 | onClick 回调被调用 | 自动化 |
| onClick 参数 | 点击后检查回调参数 | 参数为 event 对象 | 自动化 |
| 不可点击 | clickable=false + 点击 | onClick 不触发 | 自动化 |
| Disabled 不触发 | disabled.value=true + 点击 | onClick 不触发 | 自动化 |
| Loading 不触发 | loading.value=true + 点击 | onClick 不触发 | 自动化 |

---

## 十三、可访问性测试用例

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| role 属性 | 检查 DOM | role="button" | 自动化 |
| aria-disabled | disabled.value=true | aria-disabled="true" | 自动化 |
| tabIndex | 正常状态 | tabIndex=0 | 自动化 |
| tabIndex disabled | disabled.value=true | tabIndex=-1 | 自动化 |
| 键盘导航 | Tab 键聚焦 | 组件可聚焦 | 人工 |

---

## 十四、自定义渲染测试用例

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| render 函数 | render={(props) => <div>{props.text}</div>} | 使用自定义渲染 | 人工 |
| render 优先级 | render 函数存在 | 忽略其他内容配置 | 自动化 |

---

## 十五、边界情况测试用例

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 空文本 | text="" | 正常渲染，不报错 | 自动化 |
| 超长文本 | text="很长很长的文本..." | 正确显示省略号 | 人工 |
| 特殊字符 | text="<>&\"'" | 特殊字符正确转义显示 | 人工 |
| 无 Props | 仅传 text | 使用所有默认值正常渲染 | 自动化 |
| 所有 Props | 传入所有 props | 正常渲染，不冲突 | 人工 |

---

## 十六、性能测试用例

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 多次渲染 | 快速切换 props | 无性能问题，渲染流畅 | 人工 |
| 大量实例 | 渲染 100 个组件 | 页面不卡顿 | 人工 |
| 内存泄漏 | 挂载/卸载多次 | 无内存泄漏 | 自动化 |

---

## 十七、兼容性测试用例

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| Chrome | 在 Chrome 浏览器测试 | 所有功能正常 | 人工 |
| Firefox | 在 Firefox 浏览器测试 | 所有功能正常 | 人工 |
| Safari | 在 Safari 浏览器测试 | 所有功能正常 | 人工 |
| Edge | 在 Edge 浏览器测试 | 所有功能正常 | 人工 |

---

## 十八、Bug 汇总

**说明**：此部分由人工测试人员填写发现的 Bug

### Bug 列表

| Bug ID | 发现时间 | Bug 描述 | 优先级 | 状态 | 修复时间 | 备注 |
|--------|---------|---------|--------|------|---------|------|
| - | - | - | - | - | - | - |

### Bug 模板

```
Bug ID: #001
发现时间: 2024-01-01
Bug 描述: [详细描述问题]
复现步骤:
  1. [步骤1]
  2. [步骤2]
  3. [步骤3]
预期结果: [应该显示什么]
实际结果: [实际显示什么]
优先级: P0/P1/P2/P3
状态: 待修复/修复中/已修复/已验证
修复时间: 
修复说明: 
```

---

## 十九、测试总结

### 测试统计

- **总测试用例数**: 120+
- **自动化测试用例**: 30+
- **人工测试用例**: 90+
- **覆盖率目标**: 90%+

### 测试结论

测试完成后填写：

- [ ] 所有测试用例通过
- [ ] 发现 Bug 已修复
- [ ] 组件可以发布

### 测试签名

- 测试人员: ___________
- 测试时间: ___________
- 审核人员: ___________
- 审核时间: ___________
