---
title: 测试用例
order: 4
category: pro
---

# PisellSteps 测试用例文档

## 1. 测试概述

### 1.1 测试目标

- 验证 PisellSteps 组件的所有功能正常运行
- 确保组件在各种场景下的表现符合预期
- 保证组件的稳定性和可靠性

### 1.2 测试范围

- 基础功能测试
- 属性配置测试
- 交互行为测试
- 样式渲染测试
- 边界条件测试
- 兼容性测试
- 滚动模式测试

### 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. 渲染 PisellSteps 组件，不传入任何 props
2. 检查组件是否成功挂载

**期望结果：**

- 组件成功渲染
- 显示默认的步骤条样式

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

---

#### 测试用例 2.1.2：带 items 的渲染

**测试目的：** 验证传入步骤数据后能正确渲染  
**测试步骤：**

1. 传入 items 数组，包含 3 个步骤
2. 检查是否渲染了 3 个步骤

**期望结果：**

- 渲染 3 个步骤项
- 每个步骤显示正确的标题和描述

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

---

#### 测试用例 2.1.3：设计模式默认数据

**测试目的：** 验证设计模式下显示默认数据  
**测试步骤：**

1. 设置 `__designMode="design"`
2. 不传入 items

**期望结果：**

- 显示 3 个默认步骤
- 标题为"步骤一"、"步骤二"、"步骤三"

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

---

### 2.2 受控/非受控模式测试

#### 测试用例 2.2.1：非受控模式

**测试目的：** 验证非受控模式正常工作  
**测试步骤：**

1. 传入 `defaultCurrent={1}`
2. 检查初始状态

**期望结果：**

- 当前步骤为索引 1（第二步）
- 第一步显示为完成状态
- 第二步显示为进行中状态
- 第三步显示为等待状态

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

---

#### 测试用例 2.2.2：受控模式

**测试目的：** 验证受控模式正常工作  
**测试步骤：**

1. 传入 `current={1}`
2. 外部改变 current 值为 2
3. 检查步骤状态是否更新

**期望结果：**

- 步骤状态随 current 值变化
- onChange 回调被正确触发

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

---

#### 测试用例 2.2.3：受控与非受控冲突

**测试目的：** 验证同时传入 current 和 defaultCurrent 时的行为  
**测试步骤：**

1. 同时传入 `current={1}` 和 `defaultCurrent={0}`
2. 检查使用哪个值

**期望结果：**

- 使用 current 值（受控模式优先）
- 不使用 defaultCurrent 值

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

---

### 2.3 步骤类型测试

#### 测试用例 2.3.1：默认类型

**测试目的：** 验证默认类型步骤条  
**测试步骤：**

1. 不传入 type 或传入 `type="default"`
2. 检查渲染样式

**期望结果：**

- 显示默认样式步骤条
- 包含数字序号
- 有完整的标题和描述

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

---

#### 测试用例 2.3.2：点状类型

**测试目的：** 验证点状类型步骤条（通过 progressDot）  
**测试步骤：**

1. 传入 `progressDot={true}` 或 `progressDot`
2. 检查渲染样式

**期望结果：**

- 显示点状样式
- 标识区为小圆点
- 样式更精简

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

---

#### 测试用例 2.3.3：导航类型

**测试目的：** 验证导航类型步骤条  
**测试步骤：**

1. 传入 `type="navigation"`
2. 检查渲染样式

**期望结果：**

- 显示导航样式
- 步骤项更加突出
- 适合作为导航使用

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

---

### 2.4 尺寸测试

#### 测试用例 2.4.1：小尺寸

**测试目的：** 验证小尺寸步骤条  
**测试步骤：**

1. 传入 `size="small"`
2. 测量图标和文字大小

**期望结果：**

- 图标尺寸为 24px
- 标题字体为 14px
- 描述字体为 12px

**测试类型：** 人工测试 + 快照测试

---

#### 测试用例 2.4.2：默认尺寸

**测试目的：** 验证默认尺寸步骤条  
**测试步骤：**

1. 传入 `size="default"` 或不传入
2. 测量图标和文字大小

**期望结果：**

- 图标尺寸为 32px
- 标题字体为 16px
- 描述字体为 14px

**测试类型：** 人工测试 + 快照测试

---

#### 测试用例 2.4.3：大尺寸

**测试目的：** 验证大尺寸步骤条  
**测试步骤：**

1. 传入 `size="large"`
2. 测量图标和文字大小

**期望结果：**

- 图标尺寸为 40px
- 标题字体为 18px
- 描述字体为 16px

**测试类型：** 人工测试 + 快照测试

---

### 2.5 方向测试

#### 测试用例 2.5.1：横向布局

**测试目的：** 验证横向布局  
**测试步骤：**

1. 传入 `direction="horizontal"`
2. 检查布局方向

**期望结果：**

- 步骤从左到右排列
- 连接器为水平线条

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

---

#### 测试用例 2.5.2：竖向布局

**测试目的：** 验证竖向布局  
**测试步骤：**

1. 传入 `direction="vertical"`
2. 检查布局方向

**期望结果：**

- 步骤从上到下排列
- 连接器为垂直线条
- 适合时间轴场景

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

---

### 2.6 步骤状态测试

#### 测试用例 2.6.1：等待状态

**测试目的：** 验证等待状态显示  
**测试步骤：**

1. 设置步骤 status 为 'wait'
2. 检查样式

**期望结果：**

- 图标背景为灰色
- 文字颜色为灰色
- 连接器为灰色

**测试类型：** 自动化测试 + 快照测试

---

#### 测试用例 2.6.2：进行中状态

**测试目的：** 验证进行中状态显示  
**测试步骤：**

1. 设置步骤 status 为 'process'
2. 检查样式

**期望结果：**

- 图标背景为主题色（紫色）
- 图标内容为白色
- 文字颜色为黑色

**测试类型：** 自动化测试 + 快照测试

---

#### 测试用例 2.6.3：完成状态

**测试目的：** 验证完成状态显示  
**测试步骤：**

1. 设置步骤 status 为 'finish'
2. 检查样式

**期望结果：**

- 图标显示勾选图标
- 图标背景为浅紫色
- 连接器为紫色

**测试类型：** 自动化测试 + 快照测试

---

#### 测试用例 2.6.4：错误状态

**测试目的：** 验证错误状态显示  
**测试步骤：**

1. 设置步骤 status 为 'error'
2. 检查样式

**期望结果：**

- 图标背景为红色
- 显示错误提示
- 文字可能为红色

**测试类型：** 自动化测试 + 快照测试

---

### 2.7 点击交互测试

#### 测试用例 2.7.1：不可点击（默认）

**测试目的：** 验证默认情况下步骤不可点击  
**测试步骤：**

1. 不传入 clickable 或传入 `clickable={false}`
2. 点击任意步骤
3. 检查当前步骤是否改变

**期望结果：**

- 点击步骤无响应
- 当前步骤不变
- onChange 不被触发

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

---

#### 测试用例 2.7.2：可点击

**测试目的：** 验证开启点击后能切换步骤  
**测试步骤：**

1. 传入 `clickable={true}`
2. 点击已完成的步骤
3. 检查当前步骤是否改变

**期望结果：**

- 可以点击已完成步骤
- 当前步骤切换成功
- onChange 被正确触发

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

---

#### 测试用例 2.7.3：禁止点击已完成

**测试目的：** 验证禁止点击已完成步骤的配置  
**测试步骤：**

1. 传入 `clickable={true}` 和 `allowClickFinished={false}`
2. 点击已完成的步骤
3. 检查是否能点击

**期望结果：**

- 无法点击已完成步骤
- 当前步骤不变

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

---

#### 测试用例 2.7.4：禁用特定步骤

**测试目的：** 验证单个步骤的 disabled 属性  
**测试步骤：**

1. 在 items 中设置某步骤 `disabled: true`
2. 开启 clickable
3. 点击禁用的步骤

**期望结果：**

- 禁用步骤无法点击
- 其他步骤可以正常点击

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

---

#### 测试用例 2.7.5：步骤自定义点击事件

**测试目的：** 验证单个步骤的 onClick 回调  
**测试步骤：**

1. 为某个步骤设置 onClick 回调
2. 点击该步骤
3. 检查回调是否触发

**期望结果：**

- 点击步骤时触发自定义回调
- 同时触发组件的 onChange（如果有）

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

---

#### 测试用例 2.7.6：allowClickFinished 控制已完成步骤点击

**测试目的：** 验证 allowClickFinished 属性控制已完成步骤是否可点击  
**测试步骤：**

1. 设置 `clickable={true}` 和 `allowClickFinished={false}`
2. 当前步骤为第3步
3. 点击已完成的第1步

**期望结果：**

- allowClickFinished=false 时，无法点击已完成步骤
- allowClickFinished=true 时，可以点击已完成步骤

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

---

#### 测试用例 2.7.7：点击当前步骤

**测试目的：** 验证点击当前步骤不会触发 onChange  
**测试步骤：**

1. 当前步骤为第2步
2. 点击第2步

**期望结果：**

- onChange 不被触发
- 当前步骤不变

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

---

#### 测试用例 2.7.8：点击等待状态步骤

**测试目的：** 验证等待状态的步骤默认不可点击  
**测试步骤：**

1. 当前步骤为第1步
2. 点击等待状态的第3步

**期望结果：**

- 等待状态的步骤不可点击
- onChange 不被触发

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

---

#### 测试用例 2.7.9：点击错误状态步骤

**测试目的：** 验证错误状态的步骤可以点击（用于修正）  
**测试步骤：**

1. 设置某步骤 status 为 'error'
2. 点击该错误步骤

**期望结果：**

- 错误状态的步骤可以点击
- onChange 被触发

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

---

### 2.8 动态步骤测试

#### 测试用例 2.8.1：隐藏步骤

**测试目的：** 验证 hidden 属性能隐藏步骤  
**测试步骤：**

1. 在 items 中设置某步骤 `hidden: true`
2. 检查渲染结果

**期望结果：**

- 隐藏的步骤不显示
- 其他步骤正常显示
- 步骤序号自动调整

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

---

#### 测试用例 2.8.2：动态添加步骤

**测试目的：** 验证动态添加步骤  
**测试步骤：**

1. 初始渲染 3 个步骤
2. 动态添加第 4 个步骤
3. 检查更新

**期望结果：**

- 新步骤成功显示
- 不影响已有步骤

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

---

#### 测试用例 2.8.3：动态删除步骤

**测试目的：** 验证动态删除步骤  
**测试步骤：**

1. 初始渲染 4 个步骤
2. 删除第 2 个步骤
3. 检查更新

**期望结果：**

- 步骤被删除
- 其他步骤位置调整
- current 索引可能需要调整

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

---

### 2.9 进度百分比测试

#### 测试用例 2.9.1：percent 属性传递

**测试目的：** 验证 percent 属性正确传递给 Ant Design Steps  
**测试步骤：**

1. 传入 `percent={75}`
2. 检查是否传递给底层组件

**期望结果：**

- percent 值正确传递
- 在步骤条上显示进度

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

---

### 2.10 自定义样式测试

#### 测试用例 2.10.1：自定义类名

**测试目的：** 验证 className 属性  
**测试步骤：**

1. 传入 `className="custom-steps"`
2. 检查 DOM 元素

**期望结果：**

- 根元素包含自定义类名
- 可以通过 CSS 自定义样式

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

---

#### 测试用例 2.10.2：自定义 style

**测试目的：** 验证 style 属性  
**测试步骤：**

1. 传入 `style={{ padding: '20px' }}`
2. 检查内联样式

**期望结果：**

- 应用自定义样式
- 不影响其他样式

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

---

#### 测试用例 2.10.3：项目间距

**测试目的：** 验证 itemGap 属性  
**测试步骤：**

1. 传入 `itemGap={20}`
2. 检查间距

**期望结果：**

- 标识区和文本区间距为 20px
- 通过 CSS 变量设置

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

---

### 2.11 自定义图标测试

#### 测试用例 2.11.1：单个步骤自定义图标

**测试目的：** 验证步骤项的 icon 属性  
**测试步骤：**

1. 在 items 中设置 `icon: <UserOutlined />` 或 `icon: '✓'`
2. 检查是否显示自定义图标

**期望结果：**

- 显示自定义图标
- 不显示默认序号

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

---

#### 测试用例 2.11.2：不同步骤不同图标

**测试目的：** 验证每个步骤可以有不同图标  
**测试步骤：**

1. 为 3 个步骤分别设置不同图标
2. 检查渲染

**期望结果：**

- 每个步骤显示各自的图标
- 图标样式正确

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

---

#### 测试用例 2.11.3：步骤副标题

**测试目的：** 验证步骤项的 subTitle 属性  
**测试步骤：**

1. 在 items 中设置 `subTitle: '副标题'`
2. 检查是否显示副标题

**期望结果：**

- 显示副标题
- 位置正确

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

---

### 2.12 响应式测试

#### 测试用例 2.12.1：桌面端显示

**测试目的：** 验证桌面端显示效果  
**测试步骤：**

1. 在宽屏设备上渲染
2. 检查布局

**期望结果：**

- 步骤完整显示
- 间距合适
- 无滚动条

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

---

#### 测试用例 2.12.2：平板端显示

**测试目的：** 验证平板端显示效果  
**测试步骤：**

1. 在 768px 宽度设备上渲染
2. 检查布局

**期望结果：**

- 步骤间距缩小
- 可能出现横向滚动
- 触摸滚动流畅

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

---

#### 测试用例 2.12.3：移动端显示

**测试目的：** 验证移动端显示效果  
**测试步骤：**

1. 在 480px 宽度设备上渲染
2. 检查布局

**期望结果：**

- 描述文字隐藏
- 图标缩小
- 标题文字缩小
- 支持横向滚动

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

---

#### 测试用例 2.12.4：响应式开关

**测试目的：** 验证 responsive 属性  
**测试步骤：**

1. 传入 `responsive={false}`
2. 在小屏设备上测试

**期望结果：**

- 不启用响应式适配
- 保持原始样式
- 可能出现布局问题

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

---

#### 测试用例 2.12.5：移动端模式 - current

**测试目的：** 验证 mobileMode="current" 时显示当前步骤视图  
**测试步骤：**

1. 传入 `mobileMode="current"`
2. 检查是否显示移动端当前步骤视图

**期望结果：**

- 显示当前步骤信息
- 不显示完整步骤条
- 显示步骤标题和描述

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

---

#### 测试用例 2.12.6：移动端模式 - auto

**测试目的：** 验证 mobileMode="auto" 时自动切换显示模式  
**测试步骤：**

1. 传入 `mobileMode="auto"` 和 `mobileBreakpoint={744}`
2. 在窗口宽度小于 744px 时检查
3. 在窗口宽度大于 744px 时检查

**期望结果：**

- 窗口宽度 < 744px 时显示当前步骤视图
- 窗口宽度 >= 744px 时显示完整步骤条

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

---

#### 测试用例 2.12.7：自定义移动端断点

**测试目的：** 验证 mobileBreakpoint 属性  
**测试步骤：**

1. 传入 `mobileBreakpoint={600}`
2. 在不同窗口宽度下测试

**期望结果：**

- 断点设置正确
- 响应式切换正常

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

---

### 2.13 布局配置测试

#### 测试用例 2.13.1：栅格布局

**测试目的：** 验证栅格布局功能  
**测试步骤：**

1. 传入 `gridLayout={true}` 和 `gridColumns={3}`
2. 检查布局

**期望结果：**

- 步骤以栅格形式排列
- 每行显示 3 个步骤
- 添加栅格布局类名

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

---

#### 测试用例 2.13.2：自定义间距

**测试目的：** 验证 itemGap 属性  
**测试步骤：**

1. 传入 `itemGap={16}`
2. 检查间距

**期望结果：**

- 标识区和文本区间距为 16px
- 通过 CSS 变量设置

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

---

#### 测试用例 2.13.3：标签放置位置

**测试目的：** 验证 labelPlacement 属性  
**测试步骤：**

1. 传入 `labelPlacement="horizontal"` 或 `"vertical"`
2. 检查标签位置

**期望结果：**

- 标签位置正确
- 传递给 Ant Design Steps

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

---

### 2.14 起始步骤索引测试

#### 测试用例 2.15.1：initial 属性

**测试目的：** 验证 initial 属性设置起始步骤索引  
**测试步骤：**

1. 传入 `initial={1}` 和 `current={2}`
2. 检查步骤显示

**期望结果：**

- 起始索引为 1
- 当前步骤正确显示
- 步骤状态正确计算

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

---

### 2.16 点状步骤条测试

#### 测试用例 2.16.1：progressDot 属性

**测试目的：** 验证 progressDot 属性  
**测试步骤：**

1. 传入 `progressDot={true}` 或 `progressDot`
2. 检查点状步骤条显示

**期望结果：**

- 显示点状步骤条
- 点样式正确
- 注意：dot 模式通过 progressDot 属性控制，不需要设置 type="dot"

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

---

### 2.17 锚链接功能测试

#### 测试用例 2.17.1：启用锚链接

**测试目的：** 验证 enableAnchor 属性  
**测试步骤：**

1. 传入 `enableAnchor={true}`
2. 切换步骤
3. 检查是否滚动到锚点

**期望结果：**

- 步骤切换时自动滚动
- 滚动到对应的锚点元素

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

---

#### 测试用例 2.17.2：自定义锚链接容器

**测试目的：** 验证 anchorContainer 属性  
**测试步骤：**

1. 传入 `anchorContainer="#container"`
2. 切换步骤
3. 检查滚动容器

**期望结果：**

- 在指定容器内滚动
- 不在 window 上滚动

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

---

### 2.18 低代码属性测试

#### 测试用例 2.18.1：__id 属性

**测试目的：** 验证低代码引擎的 __id 属性  
**测试步骤：**

1. 传入 `__id="test-id"`
2. 检查 DOM 元素

**期望结果：**

- 添加 data-id 属性
- 值为 "test-id"

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

---

#### 测试用例 2.18.2：data-component 属性

**测试目的：** 验证 data-component 属性  
**测试步骤：**

1. 渲染组件
2. 检查 DOM 元素

**期望结果：**

- 添加 data-component="pisell-steps" 属性

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

---

### 2.19 步骤状态优先级测试

#### 测试用例 2.19.1：状态优先级规则

**测试目的：** 验证步骤状态计算的优先级  
**测试步骤：**

1. 设置步骤1有自定义 status='error'
2. 设置全局 status='process'
3. 当前步骤为1
4. 检查步骤1的状态

**期望结果：**

- 步骤1显示 error 状态（item.status 优先级最高）
- 步骤2显示 process 状态（使用全局 status）
- 步骤3显示 wait 状态（自动计算）

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

---

## 3. 边界条件测试

### 测试用例 3.1：空数据

**测试目的：** 验证没有步骤数据时的表现  
**测试步骤：**

1. 传入空数组 `items={[]}`
2. 检查渲染

**期望结果：**

- 不报错
- 显示空状态或不显示内容

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

---

### 测试用例 3.2：单个步骤

**测试目的：** 验证只有一个步骤时的表现  
**测试步骤：**

1. 传入只有 1 个元素的数组
2. 检查渲染

**期望结果：**

- 正常显示单个步骤
- 没有连接器

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

---

### 测试用例 3.3：大量步骤

**测试目的：** 验证步骤数量很多时的表现  
**测试步骤：**

1. 传入 20 个步骤
2. 检查渲染和性能

**期望结果：**

- 能够正常渲染
- 支持滚动
- 无性能问题

**测试类型：** 人工测试 + 性能测试

---

### 测试用例 3.4：current 超出范围

**测试目的：** 验证 current 值超出步骤范围时的表现  
**测试步骤：**

1. 传入 `current={10}`，但只有 3 个步骤
2. 检查渲染

**期望结果：**

- 不报错
- 所有步骤显示为完成状态

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

---

### 测试用例 3.5：current 为负数

**测试目的：** 验证 current 为负数时的表现  
**测试步骤：**

1. 传入 `current={-1}`
2. 检查渲染

**期望结果：**

- 不报错
- 所有步骤显示为等待状态

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

---

### 测试用例 3.6：percent 超出范围

**测试目的：** 验证 percent 值超出 0-100 范围时的表现  
**测试步骤：**

1. 传入 `percent={150}`
2. 检查显示

**期望结果：**

- 不报错
- 可能显示 "150%" 或限制为 100%

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

---

## 4. 兼容性测试

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

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

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

**期望结果：**

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

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

---

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

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

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

**期望结果：**

- 响应式布局正常
- 触摸交互流畅

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

---

## 5. 性能测试

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

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

1. 渲染包含 100 个步骤的组件
2. 测量首次渲染时间
3. 测量重新渲染时间

**期望结果：**

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

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

---

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

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

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

**期望结果：**

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

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

---

## 6. 可访问性测试

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

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

1. 使用 Tab 键导航
2. 使用 Enter 键选择步骤

**期望结果：**

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

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

---

### 测试用例 6.2：屏幕阅读器

**测试目的：** 验证屏幕阅读器支持  
**测试步骤：**

1. 使用屏幕阅读器访问组件
2. 检查是否能正确读取信息

**期望结果：**

- 能够读取步骤标题和状态
- 语义化标签正确

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

---

### 2.20 滚动模式测试

#### 测试用例 2.20.1：启用滚动模式

**测试目的：** 验证 enableScrollMode 属性  
**测试步骤：**

1. 传入 `enableScrollMode={true}`
2. 检查是否渲染滚动视图

**期望结果：**

- 渲染 PisellScrollView 组件
- 显示 `.pisell-steps-scroll-view` 容器
- 步骤条在滚动容器内

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

---

#### 测试用例 2.20.2：滚动模式下的水平布局强制

**测试目的：** 验证滚动模式下步骤条保持水平布局  
**测试步骤：**

1. 传入 `enableScrollMode={true}` 和 `direction="vertical"`
2. 检查步骤条布局

**期望结果：**

- 即使设置 direction="vertical"，也保持水平布局
- 不应用 Ant Design 的响应式垂直切换
- 步骤条始终横向排列

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

---

#### 测试用例 2.20.3：自定义滚动箭头配置

**测试目的：** 验证 scrollActionsConfig 属性  
**测试步骤：**

1. 传入以下配置：
   ```
    - `show: true`
    - `type: 'lrArrows'`
    - `scrollDistance: 300`
   ```
2. 检查滚动箭头显示

**期望结果：**

- 显示左右箭头
- 每次点击滚动 300px
- 箭头样式正确

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

---

#### 测试用例 2.20.4：隐藏滚动箭头

**测试目的：** 验证 scrollActionsConfig.show 为 false 时隐藏箭头  
**测试步骤：**

1. 传入 `scrollActionsConfig={{ show: false, type: 'lrArrows' }}`
2. 检查箭头是否隐藏

**期望结果：**

- 滚动视图存在
- 不显示滚动箭头
- 仍可通过鼠标/触摸滚动

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

---

#### 测试用例 2.20.5：rArrows 箭头类型

**测试目的：** 验证仅右箭头类型  
**测试步骤：**

1. 传入 `scrollActionsConfig={{ show: true, type: 'rArrows' }}`
2. 检查箭头显示

**期望结果：**

- 仅显示右侧箭头
- 左侧无箭头

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

---

#### 测试用例 2.20.6：滚动模式下步骤状态

**测试目的：** 验证滚动模式下步骤状态正确显示  
**测试步骤：**

1. 传入 `enableScrollMode={true}` 和 `current={2}`
2. 检查各步骤状态

**期望结果：**

- 索引 0、1 的步骤为完成状态
- 索引 2 的步骤为进行中状态
- 索引 3+ 的步骤为等待状态

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

---

#### 测试用例 2.20.7：滚动模式下点击功能

**测试目的：** 验证滚动模式下点击切换步骤  
**测试步骤：**

1. 传入 `enableScrollMode={true}`、`clickable={true}` 和 `current={2}`
2. 点击已完成的步骤
3. 检查 onChange 是否触发

**期望结果：**

- 点击已完成步骤可以切换
- onChange 回调被正确触发
- 当前步骤更新

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

---

#### 测试用例 2.20.8：滚动模式禁用响应式

**测试目的：** 验证滚动模式下禁用 Ant Design 响应式  
**测试步骤：**

1. 传入 `enableScrollMode={true}` 和 `responsive={true}`
2. 缩小窗口宽度
3. 检查步骤条是否变为垂直布局

**期望结果：**

- 步骤条保持水平布局
- 不会自动切换为垂直布局
- 显示滚动箭头

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

---

#### 测试用例 2.20.9：滚动模式与移动端模式

**测试目的：** 验证滚动模式与移动端模式的优先级  
**测试步骤：**

1. 传入 `enableScrollMode={true}` 和 `mobileMode="current"`
2. 检查显示模式

**期望结果：**

- mobileMode="current" 优先级更高
- 显示移动端当前步骤视图
- 不显示滚动模式

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

---

#### 测试用例 2.20.10：滚动箭头动态显示

**测试目的：** 验证滚动箭头根据内容溢出动态显示  
**测试步骤：**

1. 启用滚动模式
2. 逐步增加步骤数量
3. 观察箭头出现时机

**期望结果：**

- 内容未溢出时不显示箭头
- 内容溢出时显示箭头
- 宽度变化时自动更新箭头显示状态

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

---

#### 测试用例 2.20.11：自定义滚动距离

**测试目的：** 验证 scrollDistance 属性  
**测试步骤：**

1. 传入 `scrollActionsConfig={{ show: true, type: 'lrArrows', scrollDistance: 500 }}`
2. 点击箭头
3. 测量滚动距离

**期望结果：**

- 每次点击滚动 500px
- 滚动动画流畅

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

---

## 7. 测试总结

### 7.1 测试用例统计

- **总用例数**：90+
- **自动化测试**：60+
- **人工测试**：30+
- **性能测试**：2
- **兼容性测试**：2

### 7.2 测试优先级

- **P0（高优先级）**：基础渲染、受控/非受控模式、步骤状态、点击交互、allowClickFinished
- **P1（中优先级）**：样式配置、自定义图标、响应式布局、移动端模式、栅格布局、锚链接、滚动模式
- **P2（低优先级）**：边界条件、性能测试、可访问性、低代码属性

### 7.3 测试覆盖率目标

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

## 8. 测试执行计划

### 8.1 自动化测试

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

### 8.2 人工测试

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

### 8.3 测试报告

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