---
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
- 性能指标达标
- 浏览器兼容性良好
