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

# TextCard 测试用例文档

## 1. 测试概述

### 1.1 测试目标

- 验证 TextCard 组件的所有功能正常运行
- 确保组件在各种场景下的表现符合预期
- 保证组件的稳定性和可靠性
- 验证组件在不同样式、尺寸、状态下的正确渲染

### 1.2 测试范围

- 基础功能测试
- 6 种样式变体测试（text、filled、light、outlined、gradient、dashed）
- 3 种尺寸测试（small、default、large）
- 4 种状态测试（default、hover、active、disabled）
- 图标、标签、角标功能测试
- 插槽功能测试
- 文本配置测试
- 宽度模式测试
- 交互行为测试
- 自适应规则测试
- 边界条件测试
- 兼容性测试
- 性能测试

### 1.3 测试环境

- React 版本：18.x
- TypeScript 版本：5.x
- Ant Design 版本：5.x
- 测试框架：Vitest + React Testing Library
- 测试工具：@testing-library/react, @testing-library/user-event, @testing-library/jest-dom

## 2. 功能测试用例

### 2.1 基础渲染测试

#### 测试用例 2.1.1：默认渲染

**测试目的：** 验证组件能够正常渲染  
**测试步骤：**

1. 渲染 TextCard 组件，传入必填 prop `text="Tab title"`
2. 检查组件是否成功挂载
3. 检查文本内容是否正确显示

**期望结果：**

- 组件成功渲染
- 显示文本内容 "Tab title"
- 使用默认样式变体（text）
- 使用默认尺寸（default）

**测试类型：** 自动化测试

---

#### 测试用例 2.1.2：ReactNode 文本渲染

**测试目的：** 验证传入 ReactNode 作为文本内容  
**测试步骤：**

1. 传入 `text={<span className="custom-text">Custom</span>}`
2. 检查是否渲染了 ReactNode 内容

**期望结果：**

- 正确渲染 ReactNode 内容
- 自定义类名生效

**测试类型：** 自动化测试

---

#### 测试用例 2.1.3：空文本处理

**测试目的：** 验证空文本时的表现  
**测试步骤：**

1. 传入 `text=""`
2. 检查渲染

**期望结果：**

- 不报错
- 组件正常渲染，不显示文本内容

**测试类型：** 自动化测试

---

### 2.2 样式变体测试

#### 测试用例 2.2.1：样式 1 - 纯文本（text）

**测试目的：** 验证 text 样式变体的渲染和交互  
**测试步骤：**

1. 设置 `variant="text"`
2. 检查默认状态样式
3. 设置 `active={{ value: true }}`，检查激活状态
4. 鼠标悬停，检查 hover 状态
5. 设置 `disabled={{ value: true }}`，检查禁用状态

**期望结果：**

- 默认状态：无背景，无边框，无 padding，文本颜色为默认色
- Active 状态：文本颜色变为主题色（`var(--theme-color)`），字体加粗（font-weight: 600）
- Hover 状态：文本颜色变为浅紫色（`var(--theme-color-light)`）
- Disabled 状态：文本半透明（opacity: 0.4），颜色变灰

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

---

#### 测试用例 2.2.2：样式 2 - 圆角背景（filled）

**测试目的：** 验证 filled 样式变体的渲染和交互  
**测试步骤：**

1. 设置 `variant="filled"`
2. 检查默认状态样式
3. 设置 `active={{ value: true }}`，检查激活状态
4. 鼠标悬停，检查 hover 状态

**期望结果：**

- 默认状态：无背景，有 padding，圆角 40px（胶囊形）
- Active 状态：主题色背景（`var(--theme-color)`），白色文字
- Hover 状态：灰色背景（#F2F4F7）

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

---

#### 测试用例 2.2.3：样式 3 - 浅色背景（light）

**测试目的：** 验证 light 样式变体的渲染和交互  
**测试步骤：**

1. 设置 `variant="light"`
2. 检查默认状态样式
3. 设置 `active={{ value: true }}`，检查激活状态
4. 鼠标悬停，检查 hover 状态

**期望结果：**

- 默认状态：无背景，深灰文字（#475467）
- Active 状态：浅紫背景（`var(--theme-color-bg)`），主题色文字，字体加粗
- Hover 状态：灰色背景（#F2F4F7）

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

---

#### 测试用例 2.2.4：样式 4 - 描边（outlined）

**测试目的：** 验证 outlined 样式变体的渲染和交互  
**测试步骤：**

1. 设置 `variant="outlined"`
2. 检查默认状态样式
3. 设置 `active={{ value: true }}`，检查激活状态
4. 鼠标悬停，检查 hover 状态

**期望结果：**

- 默认状态：透明背景，灰色文字（#475467）
- Active 状态：灰色背景（#F2F4F7），黑色文字
- Hover 状态：浅灰背景（#F9FAFB），黑色文字

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

---

#### 测试用例 2.2.5：样式 5 - 渐变（gradient）

**测试目的：** 验证 gradient 样式变体的渲染和交互  
**测试步骤：**

1. 设置 `variant="gradient"`
2. 检查默认状态样式
3. 设置 `active={{ value: true }}`，检查激活状态
4. 鼠标悬停，检查 hover 状态

**期望结果：**

- 默认状态：透明背景，灰色文字（#667085）
- Active 状态：白色背景，阴影效果，黑色文字（#101828）
- Hover 状态：文字颜色变为黑色

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

---

#### 测试用例 2.2.6：样式 6 - 虚线（dashed）

**测试目的：** 验证 dashed 样式变体的渲染和交互  
**测试步骤：**

1. 设置 `variant="dashed"`
2. 检查默认状态样式
3. 设置 `active={{ value: true }}`，检查激活状态
4. 鼠标悬停，检查 hover 状态

**期望结果：**

- 默认状态：透明背景，灰色文字（#475467）
- Active 状态：白色背景，上左右三边有边框，主题色文字，圆角 8px 8px 0 0
- Hover 状态：文字颜色变为黑色

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

---

### 2.3 尺寸测试

#### 测试用例 2.3.1：Small 尺寸

**测试目的：** 验证 small 尺寸的渲染  
**测试步骤：**

1. 设置 `size="small"`
2. 检查 padding、fontSize、gap、borderRadius

**期望结果：**

- padding: 8px 12px
- fontSize: 14px
- lineHeight: 22px
- gap: 8px
- borderRadius: 4px

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

---

#### 测试用例 2.3.2：Default 尺寸

**测试目的：** 验证 default 尺寸的渲染  
**测试步骤：**

1. 设置 `size="default"` 或不设置 size（默认值）
2. 检查 padding、fontSize、gap、borderRadius

**期望结果：**

- padding: 12px 16px
- fontSize: 14px
- lineHeight: 22px
- gap: 12px
- borderRadius: 6px

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

---

#### 测试用例 2.3.3：Large 尺寸

**测试目的：** 验证 large 尺寸的渲染  
**测试步骤：**

1. 设置 `size="large"`
2. 检查 padding、fontSize、gap、borderRadius

**期望结果：**

- padding: 16px 20px
- fontSize: 16px
- lineHeight: 24px
- gap: 16px
- borderRadius: 8px

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

---

### 2.4 状态测试

#### 测试用例 2.4.1：Active 状态

**测试目的：** 验证 active 状态的渲染和交互  
**测试步骤：**

1. 设置 `active={{ value: true }}`
2. 检查样式、类名、data 属性
3. 设置 `active={{ value: true, style: { color: 'red' }, className: 'custom-active' }}`
4. 检查自定义样式和类名是否生效
5. 设置 `active={{ value: true, extra: <div>Extra</div> }}`
6. 检查 extra 内容是否渲染

**期望结果：**

- 应用 active 样式（根据 variant 不同）
- 添加 `text-card--active` 类名
- 设置 `data-active="true"` 属性
- 自定义样式和类名生效
- extra 内容正确渲染

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

---

#### 测试用例 2.4.2：Disabled 状态

**测试目的：** 验证 disabled 状态的渲染和交互  
**测试步骤：**

1. 设置 `disabled={{ value: true }}`
2. 检查样式、类名、aria 属性
3. 尝试点击组件
4. 检查 tabIndex 属性

**期望结果：**

- 透明度 0.4，颜色变灰，cursor: not-allowed
- 添加 `text-card--disabled` 类名
- 设置 `data-disabled="true"` 和 `aria-disabled="true"` 属性
- tabIndex 为 -1，无法键盘聚焦
- 点击事件不触发

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

---

#### 测试用例 2.4.3：Loading 状态

**测试目的：** 验证 loading 状态的渲染和交互  
**测试步骤：**

1. 设置 `loading={{ value: true }}`
2. 检查样式、类名
3. 尝试点击组件
4. 设置 `loading={{ value: true, extra: <Spin /> }}`
5. 检查 extra 内容是否渲染

**期望结果：**

- 透明度 0.6，cursor: wait
- 添加 `text-card--loading` 类名
- 设置 `data-loading="true"` 属性
- 点击事件不触发
- extra 内容正确渲染

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

---

#### 测试用例 2.4.4：状态优先级

**测试目的：** 验证状态优先级规则（loading > disabled > active）  
**测试步骤：**

1. 同时设置 `loading={{ value: true, extra: <div>Loading</div> }}`、`disabled={{ value: true, extra: <div>Disabled</div> }}`、`active={{ value: true, extra: <div>Active</div> }}`
2. 检查显示哪个状态的 extra 内容
3. 移除 loading，检查显示哪个状态
4. 移除 disabled，检查显示哪个状态

**期望结果：**

- 同时存在时，显示 loading 的 extra
- 只有 disabled 和 active 时，显示 disabled 的 extra
- 只有 active 时，显示 active 的 extra

**测试类型：** 自动化测试

---

### 2.5 图标功能测试

#### 测试用例 2.5.1：前置图标

**测试目的：** 验证前置图标的渲染和配置  
**测试步骤：**

1. 设置 `prefixIcon={<BellOutlined />}`
2. 检查图标是否显示在文本前面
3. 设置 `iconConfig={{ size: 20, color: '#ff0000' }}`
4. 检查图标大小和颜色是否生效

**期望结果：**

- 图标显示在文本前面
- 图标大小为 20px
- 图标颜色为红色
- 图标容器有正确的类名 `text-card__icon--prefix`

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

---

#### 测试用例 2.5.2：后置图标

**测试目的：** 验证后置图标的渲染和配置  
**测试步骤：**

1. 设置 `suffixIcon={<DownOutlined />}`
2. 检查图标是否显示在文本后面
3. 设置 `iconConfig={{ size: 16 }}`
4. 检查图标大小是否生效

**期望结果：**

- 图标显示在文本后面
- 图标大小为 16px
- 图标容器有正确的类名 `text-card__icon--suffix`

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

---

#### 测试用例 2.5.3：前后图标组合

**测试目的：** 验证同时显示前后图标  
**测试步骤：**

1. 同时设置 `prefixIcon` 和 `suffixIcon`
2. 检查两个图标是否都正常显示
3. 检查间距是否正确

**期望结果：**

- 前后图标都正常显示
- 间距根据 size 正确设置（gap 属性）

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

---

### 2.6 标签功能测试

#### 测试用例 2.6.1：后置标签

**测试目的：** 验证后置标签的渲染和配置  
**测试步骤：**

1. 设置 `tag={<Tag color="blue">2</Tag>}`
2. 检查标签是否显示在后置位置
3. 设置 `tagConfig={{ style: { marginLeft: 8 } }}`
4. 检查自定义样式是否生效

**期望结果：**

- 标签显示在后置位置（文本后面）
- 自定义样式生效
- 标签容器有正确的类名 `text-card__tag`

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

---

#### 测试用例 2.6.2：标签与后置图标组合

**测试目的：** 验证标签和后置图标同时显示时的顺序  
**测试步骤：**

1. 同时设置 `tag` 和 `suffixIcon`
2. 检查显示顺序

**期望结果：**

- 标签在前，图标在后
- 顺序：文本 -> 标签 -> 后置图标

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

---

### 2.7 角标功能测试

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

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

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

**期望结果：**

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

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

---

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

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

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 显示

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

---

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

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

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

**期望结果：**

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

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

---

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

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

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

**期望结果：**

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

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

---

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

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

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 时使用默认尺寸

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

---

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

**测试目的：** 验证角标 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 影响，正常显示

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

---

### 2.8 插槽功能测试

#### 测试用例 2.8.1：前置插槽

**测试目的：** 验证前置插槽的渲染和优先级  
**测试步骤：**

1. 同时设置 `prefixSlot={<div>Custom</div>}` 和 `prefixIcon={<BellOutlined />}`
2. 检查显示哪个内容

**期望结果：**

- 显示前置插槽内容
- 不显示前置图标
- 插槽优先级高于图标

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

---

#### 测试用例 2.8.2：后置插槽

**测试目的：** 验证后置插槽的渲染和优先级  
**测试步骤：**

1. 同时设置 `suffixSlot={<div>Custom</div>}`、`tag={<Tag>Tag</Tag>}` 和 `suffixIcon={<DownOutlined />}`
2. 检查显示哪个内容

**期望结果：**

- 显示后置插槽内容
- 不显示标签和后置图标
- 插槽优先级高于标签和图标

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

---

### 2.9 文本配置测试

#### 测试用例 2.9.1：字体样式配置

**测试目的：** 验证文本字体样式配置  
**测试步骤：**

1. 设置 `textConfig={{ fontSize: 18, fontWeight: 'bold', color: '#ff0000' }}`
2. 检查字体大小、粗细、颜色是否生效

**期望结果：**

- 字体大小为 18px
- 字体加粗
- 文本颜色为红色

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

---

#### 测试用例 2.9.2：文本省略（单行）

**测试目的：** 验证单行文本省略功能  
**测试步骤：**

1. 设置超长文本和 `textConfig={{ maxLines: 1, ellipsis: true }}`
2. 检查是否显示省略号

**期望结果：**

- 文本超出部分显示省略号
- 使用 `text-overflow: ellipsis` 和 `white-space: nowrap`

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

---

#### 测试用例 2.9.3：文本省略（多行）

**测试目的：** 验证多行文本省略功能  
**测试步骤：**

1. 设置超长文本和 `textConfig={{ maxLines: 2, ellipsis: true }}`
2. 检查是否显示省略号

**期望结果：**

- 文本超出 2 行后显示省略号
- 使用 `-webkit-line-clamp: 2` 和 `-webkit-box-orient: vertical`

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

---

#### 测试用例 2.9.4：文本对齐

**测试目的：** 验证文本对齐配置  
**测试步骤：**

1. 分别设置 `textConfig={{ textAlign: 'left' }}`、`'center'`、`'right'`
2. 检查文本对齐方式

**期望结果：**

- 文本对齐方式正确对应设置的值

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

---

### 2.10 宽度模式测试

#### 测试用例 2.10.1：自动宽度（auto）

**测试目的：** 验证自动宽度模式  
**测试步骤：**

1. 设置 `widthMode="auto"` 和 `maxWidth={300}`
2. 检查宽度设置

**期望结果：**

- width 为 'auto'
- maxWidth 为 300px
- 内容超出最大宽度时显示省略号

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

---

#### 测试用例 2.10.2：固定宽度（fixed）

**测试目的：** 验证固定宽度模式  
**测试步骤：**

1. 设置 `widthMode="fixed"` 和 `width={200}`
2. 检查宽度设置

**期望结果：**

- width 为 200px
- 宽度固定不变

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

---

#### 测试用例 2.10.3：撑满容器（full）

**测试目的：** 验证撑满容器宽度模式  
**测试步骤：**

1. 设置 `widthMode="full"`
2. 检查宽度设置

**期望结果：**

- width 为 '100%'
- minWidth 为 28px

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

---

### 2.11 自适应规则测试

#### 测试用例 2.11.1：宽度自适应规则

**测试目的：** 验证宽度自适应规则  
**测试步骤：**

1. 默认宽度模式（auto），检查最大宽度限制
2. 设置超长文本，检查是否显示省略号
3. 设置 `widthMode="full"`，检查最小宽度限制

**期望结果：**

- 默认最大宽度为 400px
- 超过最大宽度时，文本区域显示省略号
- full 模式下最小宽度为 28px

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

---

#### 测试用例 2.11.2：水平对齐规则

**测试目的：** 验证水平排列时的对齐规则  
**测试步骤：**

1. 多个 TextCard 水平排列
2. 检查内容对齐方式

**期望结果：**

- 水平排列时，内容默认居中对齐

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

---

#### 测试用例 2.11.3：垂直对齐规则

**测试目的：** 验证垂直排列时的对齐规则  
**测试步骤：**

1. 多个 TextCard 垂直排列
2. 检查内容对齐方式

**期望结果：**

- 垂直排列时，内容默认左对齐

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

---

### 2.12 交互行为测试

#### 测试用例 2.12.1：悬停交互

**测试目的：** 验证悬停状态的交互  
**测试步骤：**

1. 鼠标悬停在组件上
2. 检查样式变化
3. 检查指针样式

**期望结果：**

- 展示悬停状态样式（根据 variant 不同）
- 指针变为手型（cursor: pointer）
- 可点击状态下才显示手型

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

---

#### 测试用例 2.12.2：点击交互

**测试目的：** 验证点击事件的交互  
**测试步骤：**

1. 点击组件
2. 检查 onClick 回调是否触发
3. 检查 active.onChange 是否触发（如果提供）
4. 检查选中状态是否切换

**期望结果：**

- 触发点击事件（onClick 回调被调用）
- 如果提供了 active.onChange 且未激活，触发 onChange(true)
- 切换选中状态（如果使用受控模式）

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

---

#### 测试用例 2.12.3：选中状态交互

**测试目的：** 验证选中状态的样式应用  
**测试步骤：**

1. 设置 `active={{ value: true }}`
2. 检查是否应用选中样式

**期望结果：**

- 应用选中样式（如边框高亮、背景色变化等，根据 variant 不同）

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

---

#### 测试用例 2.12.4：禁用状态下的交互

**测试目的：** 验证禁用状态下的交互限制  
**测试步骤：**

1. 设置 `disabled={{ value: true }}`
2. 尝试点击组件
3. 尝试键盘导航

**期望结果：**

- 点击事件不触发
- 无法键盘聚焦（tabIndex=-1）
- 指针变为 not-allowed

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

---

#### 测试用例 2.12.5：加载状态下的交互

**测试目的：** 验证加载状态下的交互限制  
**测试步骤：**

1. 设置 `loading={{ value: true }}`
2. 尝试点击组件

**期望结果：**

- 点击事件不触发
- 指针变为 wait

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

---

#### 测试用例 2.12.6：不可点击状态

**测试目的：** 验证 clickable=false 时的交互  
**测试步骤：**

1. 设置 `clickable={false}`
2. 尝试点击组件
3. 检查指针样式

**期望结果：**

- 点击事件不触发
- 指针为默认样式（不是手型）
- 不添加 `text-card--clickable` 类名

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

---

### 2.13 自定义渲染测试

#### 测试用例 2.13.1：自定义渲染函数

**测试目的：** 验证自定义渲染函数功能  
**测试步骤：**

1. 设置 `render={(props) => <div className="custom-render">{props.text}</div>}`
2. 检查是否使用自定义渲染

**期望结果：**

- 使用自定义渲染函数
- 忽略其他内容配置（图标、标签等）
- 正确传递 props

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

---

### 2.14 可访问性测试

#### 测试用例 2.14.1：role 属性

**测试目的：** 验证 role 属性设置  
**测试步骤：**

1. 检查 DOM 元素的 role 属性

**期望结果：**

- role="button"

**测试类型：** 自动化测试

---

#### 测试用例 2.14.2：aria-disabled 属性

**测试目的：** 验证 aria-disabled 属性设置  
**测试步骤：**

1. 设置 `disabled={{ value: true }}`
2. 检查 aria-disabled 属性

**期望结果：**

- aria-disabled="true"

**测试类型：** 自动化测试

---

#### 测试用例 2.14.3：tabIndex 属性

**测试目的：** 验证 tabIndex 属性设置  
**测试步骤：**

1. 正常状态下检查 tabIndex
2. disabled 状态下检查 tabIndex

**期望结果：**

- 正常状态：tabIndex=0
- disabled 状态：tabIndex=-1

**测试类型：** 自动化测试

---

#### 测试用例 2.14.4：键盘导航

**测试目的：** 验证键盘导航功能  
**测试步骤：**

1. 使用 Tab 键聚焦组件
2. 使用 Enter/Space 键触发点击

**期望结果：**

- 可以通过键盘导航
- 焦点状态清晰
- 可以键盘触发点击

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

---

## 3. 边界条件测试

### 测试用例 3.1：空文本

**测试目的：** 验证空文本时的表现  
**测试步骤：**

1. 传入 `text=""`
2. 检查渲染

**期望结果：**

- 不报错
- 组件正常渲染

**测试类型：** 自动化测试

---

### 测试用例 3.2：超长文本

**测试目的：** 验证超长文本时的表现  
**测试步骤：**

1. 传入超长文本（超过 400px 宽度）
2. 检查是否显示省略号

**期望结果：**

- 正确显示省略号
- 不出现布局问题

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

---

### 测试用例 3.3：特殊字符

**测试目的：** 验证特殊字符的处理  
**测试步骤：**

1. 传入包含特殊字符的文本：`text="<>&\"'"`
2. 检查是否正确转义显示

**期望结果：**

- 特殊字符正确转义显示
- 不出现 XSS 问题

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

---

### 测试用例 3.4：所有 Props 组合

**测试目的：** 验证所有 props 同时使用时的表现  
**测试步骤：**

1. 传入所有可能的 props
2. 检查是否正常渲染，不冲突

**期望结果：**

- 正常渲染
- 各功能不冲突
- 优先级正确（插槽 > 图标/标签，loading > disabled > active）

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

---

### 测试用例 3.5：快速切换状态

**测试目的：** 验证快速切换状态时的表现  
**测试步骤：**

1. 快速切换 active、disabled、loading 状态
2. 检查状态更新是否正确

**期望结果：**

- 状态正确更新
- 不出现竞态条件
- 样式正确应用

**测试类型：** 自动化测试

---

## 4. 兼容性测试

### 测试用例 4.1：不同浏览器测试

**测试目的：** 验证在不同浏览器中的兼容性  
**测试范围：**

- Chrome（最新版本）
- Firefox（最新版本）
- Safari（最新版本）
- Edge（最新版本）

**期望结果：**

- 所有浏览器中显示一致
- 功能正常
- 样式正确

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

---

### 测试用例 4.2：不同设备测试

**测试目的：** 验证在不同设备上的表现  
**测试范围：**

- 桌面设备（1920x1080）
- 笔记本（1366x768）
- 平板（768x1024）
- 手机（375x667）

**期望结果：**

- 响应式布局正常
- 触摸交互流畅
- 布局在不同尺寸下正确显示

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

---

## 5. 性能测试

### 测试用例 5.1：渲染性能

**测试目的：** 验证组件渲染性能  
**测试步骤：**

1. 渲染包含 100 个 TextCard 的列表
2. 测量首次渲染时间
3. 测量重新渲染时间

**期望结果：**

- 首次渲染时间 < 200ms
- 重新渲染时间 < 100ms

**测试类型：** 性能测试

---

### 测试用例 5.2：内存占用

**测试目的：** 验证组件内存占用  
**测试步骤：**

1. 渲染和销毁组件多次
2. 监测内存变化

**期望结果：**

- 无明显内存泄漏
- 销毁后内存释放

**测试类型：** 性能测试

---

### 测试用例 5.3：大量实例性能

**测试目的：** 验证大量实例时的性能  
**测试步骤：**

1. 渲染 1000 个 TextCard 实例
2. 检查页面是否卡顿
3. 检查交互是否流畅

**期望结果：**

- 页面不卡顿
- 交互流畅
- 无性能问题

**测试类型：** 性能测试

---

## 6. 测试总结

### 6.1 测试用例统计

- **总用例数**：150+
- **自动化测试**：80+
- **人工测试**：70+
- **性能测试**：3
- **兼容性测试**：2

### 6.2 测试优先级

- **P0（高优先级）**：基础渲染、样式变体、尺寸、状态、交互行为、自适应规则
- **P1（中优先级）**：图标、标签、角标、插槽、文本配置、宽度模式
- **P2（低优先级）**：边界条件、性能测试、可访问性、自定义渲染

### 6.3 测试覆盖率目标

- 代码覆盖率：≥ 85%
- 分支覆盖率：≥ 80%
- 函数覆盖率：≥ 85%
- 行覆盖率：≥ 85%
- 功能覆盖率：100%

## 7. 测试执行计划

### 7.1 自动化测试

- 使用 Vitest + React Testing Library
- 每次代码提交前自动运行
- CI/CD 集成

### 7.2 人工测试

- 新功能开发完成后进行
- 重大版本发布前全面测试
- 定期回归测试

### 7.3 测试报告

- 记录测试结果
- 标注未通过的用例
- 提供修复建议

## 8. Bug 汇总

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

### Bug 列表

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

### Bug 模板

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

## 9. 测试结论

测试完成后填写：

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

### 测试签名

- 测试人员: ___________
- 测试时间: ___________
- 审核人员: ___________
- 审核时间: ___________
---
title: 测试用例
order: 4
category: atom
---

# TextCard 组件测试用例文档

## 1. 测试概述

### 1.1 测试目标

- 验证 TextCard 组件的所有功能正常运行
- 确保组件在各种场景下的表现符合预期
- 保证组件的稳定性和可靠性
- 验证组件在不同样式、尺寸、状态下的正确渲染

### 1.2 测试范围

- 基础功能测试
- 6 种样式变体测试（text、filled、light、outlined、gradient、dashed）
- 3 种尺寸测试（small、default、large）
- 4 种状态测试（default、hover、active、disabled）
- 图标、标签、角标功能测试
- 插槽功能测试
- 文本配置测试
- 宽度模式测试
- 交互行为测试
- 自适应规则测试
- 边界条件测试
- 兼容性测试
- 性能测试

### 1.3 测试环境

- React 版本：18.x
- TypeScript 版本：5.x
- Ant Design 版本：5.x
- 测试框架：Vitest + React Testing Library
- 测试工具：@testing-library/react, @testing-library/user-event, @testing-library/jest-dom

## 2. 功能测试用例

### 2.1 基础渲染测试

#### 测试用例 2.1.1：默认渲染

**测试目的：** 验证组件能够正常渲染  
**测试步骤：**

1. 渲染 TextCard 组件，传入必填 prop `text="Tab title"`
2. 检查组件是否成功挂载
3. 检查文本内容是否正确显示

**期望结果：**

- 组件成功渲染
- 显示文本内容 "Tab title"
- 使用默认样式变体（text）
- 使用默认尺寸（default）

**测试类型：** 自动化测试

---

#### 测试用例 2.1.2：ReactNode 文本渲染

**测试目的：** 验证传入 ReactNode 作为文本内容  
**测试步骤：**

1. 传入 `text={<span className="custom-text">Custom</span>}`
2. 检查是否渲染了 ReactNode 内容

**期望结果：**

- 正确渲染 ReactNode 内容
- 自定义类名生效

**测试类型：** 自动化测试

---

#### 测试用例 2.1.3：空文本处理

**测试目的：** 验证空文本时的表现  
**测试步骤：**

1. 传入 `text=""`
2. 检查渲染

**期望结果：**

- 不报错
- 组件正常渲染，不显示文本内容

**测试类型：** 自动化测试

---

### 2.2 样式变体测试

#### 测试用例 2.2.1：样式 1 - 纯文本（text）

**测试目的：** 验证 text 样式变体的渲染和交互  
**测试步骤：**

1. 设置 `variant="text"`
2. 检查默认状态样式
3. 设置 `active={{ value: true }}`，检查激活状态
4. 鼠标悬停，检查 hover 状态
5. 设置 `disabled={{ value: true }}`，检查禁用状态

**期望结果：**

- 默认状态：无背景，无边框，无 padding，文本颜色为默认色
- Active 状态：文本颜色变为主题色（`var(--theme-color)`），字体加粗（font-weight: 600）
- Hover 状态：文本颜色变为浅紫色（`var(--theme-color-light)`）
- Disabled 状态：文本半透明（opacity: 0.4），颜色变灰

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

---

#### 测试用例 2.2.2：样式 2 - 圆角背景（filled）

**测试目的：** 验证 filled 样式变体的渲染和交互  
**测试步骤：**

1. 设置 `variant="filled"`
2. 检查默认状态样式
3. 设置 `active={{ value: true }}`，检查激活状态
4. 鼠标悬停，检查 hover 状态

**期望结果：**

- 默认状态：无背景，有 padding，圆角 40px（胶囊形）
- Active 状态：主题色背景（`var(--theme-color)`），白色文字
- Hover 状态：灰色背景（#F2F4F7）

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

---

#### 测试用例 2.2.3：样式 3 - 浅色背景（light）

**测试目的：** 验证 light 样式变体的渲染和交互  
**测试步骤：**

1. 设置 `variant="light"`
2. 检查默认状态样式
3. 设置 `active={{ value: true }}`，检查激活状态
4. 鼠标悬停，检查 hover 状态

**期望结果：**

- 默认状态：无背景，深灰文字（#475467）
- Active 状态：浅紫背景（`var(--theme-color-bg)`），主题色文字，字体加粗
- Hover 状态：灰色背景（#F2F4F7）

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

---

#### 测试用例 2.2.4：样式 4 - 描边（outlined）

**测试目的：** 验证 outlined 样式变体的渲染和交互  
**测试步骤：**

1. 设置 `variant="outlined"`
2. 检查默认状态样式
3. 设置 `active={{ value: true }}`，检查激活状态
4. 鼠标悬停，检查 hover 状态

**期望结果：**

- 默认状态：透明背景，灰色文字（#475467）
- Active 状态：灰色背景（#F2F4F7），黑色文字
- Hover 状态：浅灰背景（#F9FAFB），黑色文字

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

---

#### 测试用例 2.2.5：样式 5 - 渐变（gradient）

**测试目的：** 验证 gradient 样式变体的渲染和交互  
**测试步骤：**

1. 设置 `variant="gradient"`
2. 检查默认状态样式
3. 设置 `active={{ value: true }}`，检查激活状态
4. 鼠标悬停，检查 hover 状态

**期望结果：**

- 默认状态：透明背景，灰色文字（#667085）
- Active 状态：白色背景，阴影效果，黑色文字（#101828）
- Hover 状态：文字颜色变为黑色

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

---

#### 测试用例 2.2.6：样式 6 - 虚线（dashed）

**测试目的：** 验证 dashed 样式变体的渲染和交互  
**测试步骤：**

1. 设置 `variant="dashed"`
2. 检查默认状态样式
3. 设置 `active={{ value: true }}`，检查激活状态
4. 鼠标悬停，检查 hover 状态

**期望结果：**

- 默认状态：透明背景，灰色文字（#475467）
- Active 状态：白色背景，上左右三边有边框，主题色文字，圆角 8px 8px 0 0
- Hover 状态：文字颜色变为黑色

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

---

### 2.3 尺寸测试

#### 测试用例 2.3.1：Small 尺寸

**测试目的：** 验证 small 尺寸的渲染  
**测试步骤：**

1. 设置 `size="small"`
2. 检查 padding、fontSize、gap、borderRadius

**期望结果：**

- padding: 8px 12px
- fontSize: 14px
- lineHeight: 22px
- gap: 8px
- borderRadius: 4px

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

---

#### 测试用例 2.3.2：Default 尺寸

**测试目的：** 验证 default 尺寸的渲染  
**测试步骤：**

1. 设置 `size="default"` 或不设置 size（默认值）
2. 检查 padding、fontSize、gap、borderRadius

**期望结果：**

- padding: 12px 16px
- fontSize: 14px
- lineHeight: 22px
- gap: 12px
- borderRadius: 6px

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

---

#### 测试用例 2.3.3：Large 尺寸

**测试目的：** 验证 large 尺寸的渲染  
**测试步骤：**

1. 设置 `size="large"`
2. 检查 padding、fontSize、gap、borderRadius

**期望结果：**

- padding: 16px 20px
- fontSize: 16px
- lineHeight: 24px
- gap: 16px
- borderRadius: 8px

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

---

### 2.4 状态测试

#### 测试用例 2.4.1：Active 状态

**测试目的：** 验证 active 状态的渲染和交互  
**测试步骤：**

1. 设置 `active={{ value: true }}`
2. 检查样式、类名、data 属性
3. 设置 `active={{ value: true, style: { color: 'red' }, className: 'custom-active' }}`
4. 检查自定义样式和类名是否生效
5. 设置 `active={{ value: true, extra: <div>Extra</div> }}`
6. 检查 extra 内容是否渲染

**期望结果：**

- 应用 active 样式（根据 variant 不同）
- 添加 `text-card--active` 类名
- 设置 `data-active="true"` 属性
- 自定义样式和类名生效
- extra 内容正确渲染

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

---

#### 测试用例 2.4.2：Disabled 状态

**测试目的：** 验证 disabled 状态的渲染和交互  
**测试步骤：**

1. 设置 `disabled={{ value: true }}`
2. 检查样式、类名、aria 属性
3. 尝试点击组件
4. 检查 tabIndex 属性

**期望结果：**

- 透明度 0.4，颜色变灰，cursor: not-allowed
- 添加 `text-card--disabled` 类名
- 设置 `data-disabled="true"` 和 `aria-disabled="true"` 属性
- tabIndex 为 -1，无法键盘聚焦
- 点击事件不触发

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

---

#### 测试用例 2.4.3：Loading 状态

**测试目的：** 验证 loading 状态的渲染和交互  
**测试步骤：**

1. 设置 `loading={{ value: true }}`
2. 检查样式、类名
3. 尝试点击组件
4. 设置 `loading={{ value: true, extra: <Spin /> }}`
5. 检查 extra 内容是否渲染

**期望结果：**

- 透明度 0.6，cursor: wait
- 添加 `text-card--loading` 类名
- 设置 `data-loading="true"` 属性
- 点击事件不触发
- extra 内容正确渲染

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

---

#### 测试用例 2.4.4：状态优先级

**测试目的：** 验证状态优先级规则（loading > disabled > active）  
**测试步骤：**

1. 同时设置 `loading={{ value: true, extra: <div>Loading</div> }}`、`disabled={{ value: true, extra: <div>Disabled</div> }}`、`active={{ value: true, extra: <div>Active</div> }}`
2. 检查显示哪个状态的 extra 内容
3. 移除 loading，检查显示哪个状态
4. 移除 disabled，检查显示哪个状态

**期望结果：**

- 同时存在时，显示 loading 的 extra
- 只有 disabled 和 active 时，显示 disabled 的 extra
- 只有 active 时，显示 active 的 extra

**测试类型：** 自动化测试

---

### 2.5 图标功能测试

#### 测试用例 2.5.1：前置图标

**测试目的：** 验证前置图标的渲染和配置  
**测试步骤：**

1. 设置 `prefixIcon={<BellOutlined />}`
2. 检查图标是否显示在文本前面
3. 设置 `iconConfig={{ size: 20, color: '#ff0000' }}`
4. 检查图标大小和颜色是否生效

**期望结果：**

- 图标显示在文本前面
- 图标大小为 20px
- 图标颜色为红色
- 图标容器有正确的类名 `text-card__icon--prefix`

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

---

#### 测试用例 2.5.2：后置图标

**测试目的：** 验证后置图标的渲染和配置  
**测试步骤：**

1. 设置 `suffixIcon={<DownOutlined />}`
2. 检查图标是否显示在文本后面
3. 设置 `iconConfig={{ size: 16 }}`
4. 检查图标大小是否生效

**期望结果：**

- 图标显示在文本后面
- 图标大小为 16px
- 图标容器有正确的类名 `text-card__icon--suffix`

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

---

#### 测试用例 2.5.3：前后图标组合

**测试目的：** 验证同时显示前后图标  
**测试步骤：**

1. 同时设置 `prefixIcon` 和 `suffixIcon`
2. 检查两个图标是否都正常显示
3. 检查间距是否正确

**期望结果：**

- 前后图标都正常显示
- 间距根据 size 正确设置（gap 属性）

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

---

### 2.6 标签功能测试

#### 测试用例 2.6.1：后置标签

**测试目的：** 验证后置标签的渲染和配置  
**测试步骤：**

1. 设置 `tag={<Tag color="blue">2</Tag>}`
2. 检查标签是否显示在后置位置
3. 设置 `tagConfig={{ style: { marginLeft: 8 } }}`
4. 检查自定义样式是否生效

**期望结果：**

- 标签显示在后置位置（文本后面）
- 自定义样式生效
- 标签容器有正确的类名 `text-card__tag`

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

---

#### 测试用例 2.6.2：标签与后置图标组合

**测试目的：** 验证标签和后置图标同时显示时的顺序  
**测试步骤：**

1. 同时设置 `tag` 和 `suffixIcon`
2. 检查显示顺序

**期望结果：**

- 标签在前，图标在后
- 顺序：文本 -> 标签 -> 后置图标

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

---

### 2.7 角标功能测试

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

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

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

**期望结果：**

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

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

---

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

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

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 显示

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

---

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

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

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

**期望结果：**

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

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

---

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

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

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

**期望结果：**

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

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

---

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

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

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 时使用默认尺寸

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

---

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

**测试目的：** 验证角标 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 影响，正常显示

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

---

### 2.8 插槽功能测试

#### 测试用例 2.8.1：前置插槽

**测试目的：** 验证前置插槽的渲染和优先级  
**测试步骤：**

1. 同时设置 `prefixSlot={<div>Custom</div>}` 和 `prefixIcon={<BellOutlined />}`
2. 检查显示哪个内容

**期望结果：**

- 显示前置插槽内容
- 不显示前置图标
- 插槽优先级高于图标

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

---

#### 测试用例 2.8.2：后置插槽

**测试目的：** 验证后置插槽的渲染和优先级  
**测试步骤：**

1. 同时设置 `suffixSlot={<div>Custom</div>}`、`tag={<Tag>Tag</Tag>}` 和 `suffixIcon={<DownOutlined />}`
2. 检查显示哪个内容

**期望结果：**

- 显示后置插槽内容
- 不显示标签和后置图标
- 插槽优先级高于标签和图标

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

---

### 2.9 文本配置测试

#### 测试用例 2.9.1：字体样式配置

**测试目的：** 验证文本字体样式配置  
**测试步骤：**

1. 设置 `textConfig={{ fontSize: 18, fontWeight: 'bold', color: '#ff0000' }}`
2. 检查字体大小、粗细、颜色是否生效

**期望结果：**

- 字体大小为 18px
- 字体加粗
- 文本颜色为红色

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

---

#### 测试用例 2.9.2：文本省略（单行）

**测试目的：** 验证单行文本省略功能  
**测试步骤：**

1. 设置超长文本和 `textConfig={{ maxLines: 1, ellipsis: true }}`
2. 检查是否显示省略号

**期望结果：**

- 文本超出部分显示省略号
- 使用 `text-overflow: ellipsis` 和 `white-space: nowrap`

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

---

#### 测试用例 2.9.3：文本省略（多行）

**测试目的：** 验证多行文本省略功能  
**测试步骤：**

1. 设置超长文本和 `textConfig={{ maxLines: 2, ellipsis: true }}`
2. 检查是否显示省略号

**期望结果：**

- 文本超出 2 行后显示省略号
- 使用 `-webkit-line-clamp: 2` 和 `-webkit-box-orient: vertical`

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

---

#### 测试用例 2.9.4：文本对齐

**测试目的：** 验证文本对齐配置  
**测试步骤：**

1. 分别设置 `textConfig={{ textAlign: 'left' }}`、`'center'`、`'right'`
2. 检查文本对齐方式

**期望结果：**

- 文本对齐方式正确对应设置的值

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

---

### 2.10 宽度模式测试

#### 测试用例 2.10.1：自动宽度（auto）

**测试目的：** 验证自动宽度模式  
**测试步骤：**

1. 设置 `widthMode="auto"` 和 `maxWidth={300}`
2. 检查宽度设置

**期望结果：**

- width 为 'auto'
- maxWidth 为 300px
- 内容超出最大宽度时显示省略号

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

---

#### 测试用例 2.10.2：固定宽度（fixed）

**测试目的：** 验证固定宽度模式  
**测试步骤：**

1. 设置 `widthMode="fixed"` 和 `width={200}`
2. 检查宽度设置

**期望结果：**

- width 为 200px
- 宽度固定不变

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

---

#### 测试用例 2.10.3：撑满容器（full）

**测试目的：** 验证撑满容器宽度模式  
**测试步骤：**

1. 设置 `widthMode="full"`
2. 检查宽度设置

**期望结果：**

- width 为 '100%'
- minWidth 为 28px

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

---

### 2.11 自适应规则测试

#### 测试用例 2.11.1：宽度自适应规则

**测试目的：** 验证宽度自适应规则  
**测试步骤：**

1. 默认宽度模式（auto），检查最大宽度限制
2. 设置超长文本，检查是否显示省略号
3. 设置 `widthMode="full"`，检查最小宽度限制

**期望结果：**

- 默认最大宽度为 400px
- 超过最大宽度时，文本区域显示省略号
- full 模式下最小宽度为 28px

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

---

#### 测试用例 2.11.2：水平对齐规则

**测试目的：** 验证水平排列时的对齐规则  
**测试步骤：**

1. 多个 TextCard 水平排列
2. 检查内容对齐方式

**期望结果：**

- 水平排列时，内容默认居中对齐

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

---

#### 测试用例 2.11.3：垂直对齐规则

**测试目的：** 验证垂直排列时的对齐规则  
**测试步骤：**

1. 多个 TextCard 垂直排列
2. 检查内容对齐方式

**期望结果：**

- 垂直排列时，内容默认左对齐

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

---

### 2.12 交互行为测试

#### 测试用例 2.12.1：悬停交互

**测试目的：** 验证悬停状态的交互  
**测试步骤：**

1. 鼠标悬停在组件上
2. 检查样式变化
3. 检查指针样式

**期望结果：**

- 展示悬停状态样式（根据 variant 不同）
- 指针变为手型（cursor: pointer）
- 可点击状态下才显示手型

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

---

#### 测试用例 2.12.2：点击交互

**测试目的：** 验证点击事件的交互  
**测试步骤：**

1. 点击组件
2. 检查 onClick 回调是否触发
3. 检查 active.onChange 是否触发（如果提供）
4. 检查选中状态是否切换

**期望结果：**

- 触发点击事件（onClick 回调被调用）
- 如果提供了 active.onChange 且未激活，触发 onChange(true)
- 切换选中状态（如果使用受控模式）

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

---

#### 测试用例 2.12.3：选中状态交互

**测试目的：** 验证选中状态的样式应用  
**测试步骤：**

1. 设置 `active={{ value: true }}`
2. 检查是否应用选中样式

**期望结果：**

- 应用选中样式（如边框高亮、背景色变化等，根据 variant 不同）

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

---

#### 测试用例 2.12.4：禁用状态下的交互

**测试目的：** 验证禁用状态下的交互限制  
**测试步骤：**

1. 设置 `disabled={{ value: true }}`
2. 尝试点击组件
3. 尝试键盘导航

**期望结果：**

- 点击事件不触发
- 无法键盘聚焦（tabIndex=-1）
- 指针变为 not-allowed

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

---

#### 测试用例 2.12.5：加载状态下的交互

**测试目的：** 验证加载状态下的交互限制  
**测试步骤：**

1. 设置 `loading={{ value: true }}`
2. 尝试点击组件

**期望结果：**

- 点击事件不触发
- 指针变为 wait

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

---

#### 测试用例 2.12.6：不可点击状态

**测试目的：** 验证 clickable=false 时的交互  
**测试步骤：**

1. 设置 `clickable={false}`
2. 尝试点击组件
3. 检查指针样式

**期望结果：**

- 点击事件不触发
- 指针为默认样式（不是手型）
- 不添加 `text-card--clickable` 类名

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

---

### 2.13 自定义渲染测试

#### 测试用例 2.13.1：自定义渲染函数

**测试目的：** 验证自定义渲染函数功能  
**测试步骤：**

1. 设置 `render={(props) => <div className="custom-render">{props.text}</div>}`
2. 检查是否使用自定义渲染

**期望结果：**

- 使用自定义渲染函数
- 忽略其他内容配置（图标、标签等）
- 正确传递 props

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

---

### 2.14 可访问性测试

#### 测试用例 2.14.1：role 属性

**测试目的：** 验证 role 属性设置  
**测试步骤：**

1. 检查 DOM 元素的 role 属性

**期望结果：**

- role="button"

**测试类型：** 自动化测试

---

#### 测试用例 2.14.2：aria-disabled 属性

**测试目的：** 验证 aria-disabled 属性设置  
**测试步骤：**

1. 设置 `disabled={{ value: true }}`
2. 检查 aria-disabled 属性

**期望结果：**

- aria-disabled="true"

**测试类型：** 自动化测试

---

#### 测试用例 2.14.3：tabIndex 属性

**测试目的：** 验证 tabIndex 属性设置  
**测试步骤：**

1. 正常状态下检查 tabIndex
2. disabled 状态下检查 tabIndex

**期望结果：**

- 正常状态：tabIndex=0
- disabled 状态：tabIndex=-1

**测试类型：** 自动化测试

---

#### 测试用例 2.14.4：键盘导航

**测试目的：** 验证键盘导航功能  
**测试步骤：**

1. 使用 Tab 键聚焦组件
2. 使用 Enter/Space 键触发点击

**期望结果：**

- 可以通过键盘导航
- 焦点状态清晰
- 可以键盘触发点击

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

---

## 3. 边界条件测试

### 测试用例 3.1：空文本

**测试目的：** 验证空文本时的表现  
**测试步骤：**

1. 传入 `text=""`
2. 检查渲染

**期望结果：**

- 不报错
- 组件正常渲染

**测试类型：** 自动化测试

---

### 测试用例 3.2：超长文本

**测试目的：** 验证超长文本时的表现  
**测试步骤：**

1. 传入超长文本（超过 400px 宽度）
2. 检查是否显示省略号

**期望结果：**

- 正确显示省略号
- 不出现布局问题

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

---

### 测试用例 3.3：特殊字符

**测试目的：** 验证特殊字符的处理  
**测试步骤：**

1. 传入包含特殊字符的文本：`text="<>&\"'"`
2. 检查是否正确转义显示

**期望结果：**

- 特殊字符正确转义显示
- 不出现 XSS 问题

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

---

### 测试用例 3.4：所有 Props 组合

**测试目的：** 验证所有 props 同时使用时的表现  
**测试步骤：**

1. 传入所有可能的 props
2. 检查是否正常渲染，不冲突

**期望结果：**

- 正常渲染
- 各功能不冲突
- 优先级正确（插槽 > 图标/标签，loading > disabled > active）

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

---

### 测试用例 3.5：快速切换状态

**测试目的：** 验证快速切换状态时的表现  
**测试步骤：**

1. 快速切换 active、disabled、loading 状态
2. 检查状态更新是否正确

**期望结果：**

- 状态正确更新
- 不出现竞态条件
- 样式正确应用

**测试类型：** 自动化测试

---

## 4. 兼容性测试

### 测试用例 4.1：不同浏览器测试

**测试目的：** 验证在不同浏览器中的兼容性  
**测试范围：**

- Chrome（最新版本）
- Firefox（最新版本）
- Safari（最新版本）
- Edge（最新版本）

**期望结果：**

- 所有浏览器中显示一致
- 功能正常
- 样式正确

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

---

### 测试用例 4.2：不同设备测试

**测试目的：** 验证在不同设备上的表现  
**测试范围：**

- 桌面设备（1920x1080）
- 笔记本（1366x768）
- 平板（768x1024）
- 手机（375x667）

**期望结果：**

- 响应式布局正常
- 触摸交互流畅
- 布局在不同尺寸下正确显示

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

---

## 5. 性能测试

### 测试用例 5.1：渲染性能

**测试目的：** 验证组件渲染性能  
**测试步骤：**

1. 渲染包含 100 个 TextCard 的列表
2. 测量首次渲染时间
3. 测量重新渲染时间

**期望结果：**

- 首次渲染时间 < 200ms
- 重新渲染时间 < 100ms

**测试类型：** 性能测试

---

### 测试用例 5.2：内存占用

**测试目的：** 验证组件内存占用  
**测试步骤：**

1. 渲染和销毁组件多次
2. 监测内存变化

**期望结果：**

- 无明显内存泄漏
- 销毁后内存释放

**测试类型：** 性能测试

---

### 测试用例 5.3：大量实例性能

**测试目的：** 验证大量实例时的性能  
**测试步骤：**

1. 渲染 1000 个 TextCard 实例
2. 检查页面是否卡顿
3. 检查交互是否流畅

**期望结果：**

- 页面不卡顿
- 交互流畅
- 无性能问题

**测试类型：** 性能测试

---

## 6. 测试总结

### 6.1 测试用例统计

- **总用例数**：150+
- **自动化测试**：80+
- **人工测试**：70+
- **性能测试**：3
- **兼容性测试**：2

### 6.2 测试优先级

- **P0（高优先级）**：基础渲染、样式变体、尺寸、状态、交互行为、自适应规则
- **P1（中优先级）**：图标、标签、角标、插槽、文本配置、宽度模式
- **P2（低优先级）**：边界条件、性能测试、可访问性、自定义渲染

### 6.3 测试覆盖率目标

- 代码覆盖率：≥ 85%
- 分支覆盖率：≥ 80%
- 函数覆盖率：≥ 85%
- 行覆盖率：≥ 85%
- 功能覆盖率：100%

## 7. 测试执行计划

### 7.1 自动化测试

- 使用 Vitest + React Testing Library
- 每次代码提交前自动运行
- CI/CD 集成

### 7.2 人工测试

- 新功能开发完成后进行
- 重大版本发布前全面测试
- 定期回归测试

### 7.3 测试报告

- 记录测试结果
- 标注未通过的用例
- 提供修复建议