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

# GraphicTextCard 测试用例文档

## 一、测试概述

### 测试范围
- 组件基础功能
- 4 种样式变体
- 3 种尺寸
- 4 种状态
- 图形区域（图片/图标）
- 角标功能
- 插槽功能
- 文本配置
- 宽度模式
- 事件处理
- 状态管理
- 可访问性
- 自适应规则

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

---

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

### 2.1 组件渲染

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 基础渲染 | 使用必填 prop `text` 和 `image` 或 `icon` 渲染组件 | 组件正常渲染，显示图形和文本内容 | 自动化 |
| 空文本渲染 | text 设置为空字符串 | 组件正常渲染，不显示文本 | 自动化 |
| ReactNode 文本 | text 传入 JSX 元素 | 正确渲染 JSX 内容 | 自动化 |
| 仅图片 | 只传 image，不传 icon | 显示图片，不显示图标 | 自动化 |
| 仅图标 | 只传 icon，不传 image | 显示图标，不显示图片 | 自动化 |
| 图片优先 | 同时传 image 和 icon | 优先显示图片，不显示图标 | 自动化 |

### 2.2 文本内容

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

---

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

### 3.1 样式 1 - 垂直布局-图片 (vertical-image)

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 默认样式 | variant="vertical-image" + image | 图片在上，文本在下，垂直布局 | 人工 |
| Active 状态 | variant="vertical-image" + active.value=true | 文本颜色变为主题色 | 人工 |
| Hover 状态 | variant="vertical-image" + 鼠标悬停 | 有悬停效果 | 人工 |
| Disabled 状态 | variant="vertical-image" + disabled.value=true | 图形和文本半透明 | 人工 |

### 3.2 样式 2 - 垂直布局-图标 (vertical-icon)

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 默认样式 | variant="vertical-icon" + icon | 图标在上，文本在下，垂直布局 | 人工 |
| Active 状态 | variant="vertical-icon" + active.value=true | 图标和文本颜色变为主题色 | 人工 |
| Hover 状态 | variant="vertical-icon" + 鼠标悬停 | 有悬停效果 | 人工 |
| Disabled 状态 | variant="vertical-icon" + disabled.value=true | 图标和文本半透明 | 人工 |

### 3.3 样式 3 - 横向布局 (horizontal)

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 默认样式 | variant="horizontal" + image/icon | 图形在左，文本在右，横向布局，上下居中对齐 | 人工 |
| Active 状态 | variant="horizontal" + active.value=true | 背景为主题色，文字为白色 | 人工 |
| Hover 状态 | variant="horizontal" + 鼠标悬停 | 背景变深 | 人工 |
| Disabled 状态 | variant="horizontal" + disabled.value=true | 图形和文本半透明 | 人工 |

### 3.4 样式 4 - 卡片式 (card)

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 默认样式 | variant="card" + image | 图片在上，文本在下，带边框和背景 | 人工 |
| Active 状态 | variant="card" + active.value=true | 边框色为主题色 | 人工 |
| Hover 状态 | variant="card" + 鼠标悬停 | 有悬停效果 | 人工 |
| Disabled 状态 | variant="card" + disabled.value=true | 图形和文本半透明 | 人工 |

---

## 四、尺寸测试用例

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| Small 尺寸 | size="small" | 图形区域和文本尺寸较小 | 人工 |
| Default 尺寸 | size="default" | 图形区域和文本尺寸默认 | 人工 |
| Large 尺寸 | size="large" | 图形区域和文本尺寸较大 | 人工 |
| 尺寸切换 | 动态切换 size | 样式平滑过渡 | 人工 |
| 图形尺寸计算 | 不设置 graphicConfig.width/height | 根据 variant 和 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 图片显示

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 图片渲染 | image="https://example.com/image.png" | 显示图片 | 人工 |
| 图片尺寸 | graphicConfig.width=100, height=100 | 图片尺寸为 100x100 | 人工 |
| 图片圆角 | graphicConfig.borderRadius=8 | 图片圆角为 8px | 人工 |
| 图片背景 | graphicConfig.background="#f0f0f0" | 图片区域有背景色 | 人工 |
| 图片边框 | graphicConfig.border="1px solid #ccc" | 图片区域有边框 | 人工 |

### 6.2 图标显示

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| ReactNode 图标 | icon=<HomeOutlined /> | 显示 ReactNode 图标 | 人工 |
| 图标 URL | icon="https://example.com/icon.png" | 显示图标图片 | 人工 |
| 图标大小 | graphicConfig.iconSize=32 | 图标大小为 32px | 人工 |
| 图标颜色 | graphicConfig.iconColor="#1890ff" | 图标颜色为蓝色 | 人工 |
| 图标背景 | graphicConfig.background="#f0f0f0" | 图标区域有背景色 | 人工 |

### 6.3 图形区域插槽

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 插槽优先级 | graphicSlot + image + icon | 优先显示 graphicSlot | 自动化 |
| 自定义图形 | graphicSlot=<div>自定义</div> | 显示自定义内容 | 人工 |

---

## 七、角标测试用例

### 7.1 红点角标

#### 测试用例 7.1.1：红点角标

**测试目的：** 验证红点角标的渲染和配置  
**测试步骤：**

1. 设置 `badge={{ type: 'dot' }}`
2. 检查是否显示红点角标
3. 设置 `badge={{ type: 'dot', color: 'blue', offset: [-10, 0], size: 'small' }}`
4. 检查位置、颜色、偏移、大小是否生效

**期望结果：**

- 显示红点角标
- 通过 offset 控制位置（向左偏移）
- 颜色为蓝色
- 大小为 small

**测试类型：** 自动化测试 + 人工测试

---

### 7.2 数字角标

#### 测试用例 7.2.1：数字角标

**测试目的：** 验证数字角标的渲染和配置  
**测试步骤：**

1. 设置 `badge={{ type: 'number', content: 99 }}`
2. 检查是否显示数字 99
3. 设置 `badge={{ type: 'number', content: 999 }}`
4. 检查大数字是否正确显示
5. 设置 `badge={{ type: 'number', content: 0, showZero: false }}`
6. 检查 0 是否不显示
7. 设置 `badge={{ type: 'number', content: 0, showZero: true }}`
8. 检查 0 是否显示

**期望结果：**

- 显示数字 99
- 大数字正确显示
- showZero=false 时，0 不显示
- showZero=true 时，0 显示

**测试类型：** 自动化测试 + 人工测试

---

### 7.3 文本角标

#### 测试用例 7.3.1：文本角标

**测试目的：** 验证文本角标的渲染和配置  
**测试步骤：**

1. 设置 `badge={{ type: 'text', content: 'New' }}`
2. 检查是否显示文本 "New"
3. 设置 `badge={{ type: 'text', content: 'Very Long Text' }}`
4. 检查长文本是否正确显示

**期望结果：**

- 显示文本 "New"
- 长文本正常显示

**测试类型：** 自动化测试 + 人工测试

---

### 7.4 角标位置（通过 offset 控制）

#### 测试用例 7.4.1：角标位置（通过 offset 控制）

**测试目的：** 验证角标的不同位置（通过 offset 控制）  
**测试步骤：**

1. 不设置 offset，检查默认位置（右上角）
2. 设置 `offset: [-10, 0]`，检查是否向左偏移
3. 设置 `offset: [0, 10]`，检查是否向下偏移
4. 设置 `offset: [-10, 10]`，检查是否向左下偏移

**期望结果：**

- 不设置 offset 时，角标在右上角（默认位置）
- offset 正数向右/下偏移，负数向左/上偏移
- 角标位置正确对应设置的 offset 值

**测试类型：** 人工测试

---

### 7.5 角标大小

#### 测试用例 7.5.1：角标大小

**测试目的：** 验证角标大小控制  
**测试步骤：**

1. 设置 `badge={{ type: 'number', content: 99, size: 'small' }}`
2. 检查角标大小是否为 small
3. 设置 `badge={{ type: 'number', content: 99, size: 'default' }}`
4. 检查角标大小是否为 default
5. 设置 `badge={{ type: 'number', content: 99 }}`（不设置 size）
6. 检查角标是否使用默认大小
7. 设置 `badge={{ type: 'dot', size: 'small' }}`
8. 检查红点角标大小是否生效

**期望结果：**

- 角标大小正确对应设置的 size 值
- size='small' 时显示小尺寸角标
- size='default' 时显示默认尺寸角标
- 不设置 size 时使用默认尺寸

**测试类型：** 自动化测试 + 人工测试

---

### 7.6 角标显示零值

#### 测试用例 7.6.1：角标显示零值

**测试目的：** 验证角标 showZero 配置  
**测试步骤：**

1. 设置 `badge={{ type: 'number', content: 0, showZero: false }}`
2. 检查角标是否不显示
3. 设置 `badge={{ type: 'number', content: 0, showZero: true }}`
4. 检查角标是否显示 0
5. 设置 `badge={{ type: 'number', content: 0 }}`（不设置 showZero）
6. 检查角标是否不显示（默认 showZero=false）
7. 设置 `badge={{ type: 'number', content: 1, showZero: false }}`
8. 检查非零值是否正常显示

**期望结果：**

- showZero=false 时，content 为 0 不显示角标
- showZero=true 时，content 为 0 显示角标
- 不设置 showZero 时，默认不显示零值
- 非零值不受 showZero 影响，正常显示

**测试类型：** 自动化测试 + 人工测试

---

## 八、插槽功能测试

### 8.1 前置插槽

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 前置插槽渲染 | prefixSlot=<div>前置</div> | 显示在图形区域前 | 人工 |
| 无前置插槽 | 不传 prefixSlot | 不显示前置插槽 | 自动化 |

### 8.2 后置插槽

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 后置插槽渲染 | suffixSlot=<div>后置</div> | 显示在文本内容后 | 人工 |
| 无后置插槽 | 不传 suffixSlot | 不显示后置插槽 | 自动化 |

---

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

### 9.1 字体样式

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 字体大小 | textConfig.fontSize=18 | 文本字体大小为 18px | 人工 |
| 字体粗细 | textConfig.fontWeight='bold' | 文本字体加粗 | 人工 |
| 文本颜色 | textConfig.color="#ff0000" | 文本颜色为红色 | 人工 |

### 9.2 文本对齐

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 左对齐 | textConfig.textAlign='left' | 文本左对齐 | 人工 |
| 居中对齐 | textConfig.textAlign='center' | 文本居中对齐 | 人工 |
| 右对齐 | textConfig.textAlign='right' | 文本右对齐 | 人工 |

### 9.3 文本省略

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 单行省略 | textConfig.maxLines=1, ellipsis=true | 超出 1 行显示省略号 | 人工 |
| 多行省略 | textConfig.maxLines=2, ellipsis=true | 超出 2 行显示省略号 | 人工 |
| 禁用省略 | ellipsis=false | 不显示省略号 | 人工 |

---

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

### 10.1 自动宽度（auto）

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 自动宽度 | widthMode="auto" | 内容撑满，不超过 maxWidth | 人工 |
| 最大宽度限制 | widthMode="auto", maxWidth=300 | 最大宽度为 300px | 人工 |

### 10.2 固定宽度（fixed）

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 固定宽度 | widthMode="fixed", width=200 | 宽度固定为 200px | 人工 |
| 文本省略 | widthMode="fixed", width=100 + 长文本 | 文本超出显示省略号 | 人工 |

### 10.3 撑满容器（full）

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 撑满容器 | widthMode="full" | 宽度为 100% | 人工 |
| 文本省略 | widthMode="full" + 长文本 | 文本超出显示省略号 | 人工 |

---

## 十一、自适应规则测试用例

### 11.1 宽度自适应

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 默认固定宽度 | 不设置 widthMode | 宽度默认为固定宽度 | 人工 |
| 文本省略 | 文本超出宽度 | 文本区域显示省略号 | 人工 |

### 11.2 布局对齐

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 横向布局对齐 | variant="horizontal" | 内容上下居中对齐 | 人工 |
| 竖向布局对齐 | variant="vertical-image" 或 "vertical-icon" | 内容左右居中对齐 | 人工 |

---

## 十二、事件处理测试用例

### 12.1 点击事件

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 正常点击 | clickable=true, 点击组件 | onClick 事件触发 | 自动化 |
| 禁用点击 | clickable=false | onClick 事件不触发 | 自动化 |
| Disabled 状态点击 | disabled.value=true + 点击 | onClick 事件不触发 | 自动化 |
| Loading 状态点击 | loading.value=true + 点击 | onClick 事件不触发 | 自动化 |

---

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

### 13.1 ARIA 属性

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| role 属性 | clickable=true | role="button" | 自动化 |
| aria-disabled | disabled.value=true | aria-disabled="true" | 自动化 |
| tabIndex | disabled.value=true | tabIndex=-1 | 自动化 |
| tabIndex | disabled.value=false | tabIndex=0 | 自动化 |

---

## 十四、边界条件测试用例

### 14.1 空值处理

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 空文本 | text="" | 组件正常渲染，不显示文本 | 自动化 |
| 无图形 | 不传 image 和 icon | 图形区域不显示 | 自动化 |
| 无角标 | 不传 badge | 不显示角标 | 自动化 |

### 14.2 极端值

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 极大数字角标 | badge.content=99999 | 角标正常显示 | 人工 |
| 极小图形尺寸 | graphicConfig.width=1, height=1 | 图形区域正常渲染 | 人工 |
| 极大图形尺寸 | graphicConfig.width=1000, height=1000 | 图形区域正常渲染 | 人工 |

---

## 十五、性能测试用例

### 15.1 渲染性能

| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 大量组件渲染 | 渲染 100 个组件 | 渲染时间 < 1s | 自动化 |
| 状态切换性能 | 频繁切换 active 状态 | 无卡顿 | 人工 |

---

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

### 16.1 浏览器兼容性

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

---

## 十七、综合测试用例

### 17.1 完整配置

**测试目的：** 验证所有配置项同时使用  
**测试步骤：**

1. 设置所有配置项：
   - variant="vertical-icon"
   - size="large"
   - image="https://example.com/image.png"
   - badge={{ type: 'number', content: 99, size: 'small', offset: [5, 5] }}
   - textConfig={{ fontSize: 18, fontWeight: 'bold', color: '#1890ff' }}
   - active={{ value: true }}
   - onClick={() => console.log('clicked')}

2. 检查所有配置是否生效

**期望结果：**

- 所有配置项都正确应用
- 组件正常渲染和交互

**测试类型：** 人工测试

---

## 十八、测试总结

### 测试覆盖范围

- ✅ 基础功能：组件渲染、文本显示
- ✅ 样式变体：4 种样式变体
- ✅ 尺寸：3 种尺寸
- ✅ 状态：4 种状态（default、hover、active、disabled）
- ✅ 图形区域：图片、图标、图形配置
- ✅ 角标：红点、数字、文本、位置、大小、零值显示
- ✅ 插槽：前置、后置、图形区域插槽
- ✅ 文本配置：字体样式、对齐、省略
- ✅ 宽度模式：auto、fixed、full
- ✅ 自适应规则：宽度、对齐方式
- ✅ 事件处理：点击事件
- ✅ 可访问性：ARIA 属性
- ✅ 边界条件：空值、极端值
- ✅ 性能：渲染性能
- ✅ 兼容性：浏览器兼容性

### 测试通过标准

- 所有自动化测试用例通过率 100%
- 所有人工测试用例功能正常
- 无严重 bug
- 性能指标达标
- 浏览器兼容性良好
