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

# Selector 组件测试用例文档

## 1. 测试概述

### 1.1 测试目标

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

### 1.2 测试范围

- 基础功能测试
- 属性配置测试
- 交互行为测试
- 样式渲染测试
- 校验功能测试
- 响应式布局测试
- 联动功能测试（SelectorGroup）
- 边界条件测试
- 兼容性测试
- 性能测试

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

**期望结果：**

- 组件成功渲染
- 显示默认的选择器样式

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

---

#### 测试用例 2.1.2：带数据源的渲染

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

1. 传入 dataSource 数组，包含 3 个选项
2. 检查是否渲染了 3 个选项

**期望结果：**

- 渲染 3 个选项项
- 每个选项显示正确的标题

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

---

#### 测试用例 2.1.3：空数据源处理

**测试目的：** 验证空数据源时的表现  
**测试步骤：**

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

**期望结果：**

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

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

---

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

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

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

1. 传入 `defaultValue={1}` 和 `mode="single"`
2. 检查初始状态
3. 点击其他选项
4. 检查值是否更新

**期望结果：**

- 初始值为 1
- 点击后值正确更新
- onChange 回调被正确触发

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

---

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

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

1. 传入 `value={1}` 和 `mode="single"`
2. 外部改变 value 值为 2
3. 检查选项状态是否更新

**期望结果：**

- 选项状态随 value 值变化
- onChange 回调被正确触发

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

---

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

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

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

**期望结果：**

- 使用 value 值（受控模式优先）
- 不使用 defaultValue 值

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

---

### 2.3 选择模式测试

#### 测试用例 2.3.1：单选模式 - 基础选择

**测试目的：** 验证单选模式基础功能  
**测试步骤：**

1. 设置 `mode="single"` 和 `valueType="primitive"`
2. 点击选项 1
3. 点击选项 2
4. 再次点击选项 2

**期望结果：**

- 点击选项 1 后，选项 1 被选中
- 点击选项 2 后，选项 1 取消选中，选项 2 被选中
- 再次点击选项 2，选项 2 取消选中（允许取消选择）

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

---

#### 测试用例 2.3.2：单选模式 - primitive 值类型

**测试目的：** 验证单选模式下 primitive 值类型返回单个值  
**测试步骤：**

1. 设置 `mode="single"` 和 `valueType="primitive"`
2. 选择选项（id=1）
3. 检查 onChange 回调的值

**期望结果：**

- onChange 回调接收到的值为 `1`（单个 id）

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

---

#### 测试用例 2.3.3：单选模式 - object 值类型

**测试目的：** 验证单选模式下 object 值类型返回对象  
**测试步骤：**

1. 设置 `mode="single"` 和 `valueType="object"`
2. 选择选项（id=1）
3. 检查 onChange 回调的值

**期望结果：**

- onChange 回调接收到的值为 `{ value: 1, quantity: 1 }`

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

---

#### 测试用例 2.3.4：多选模式 - 基础选择

**测试目的：** 验证多选模式基础功能  
**测试步骤：**

1. 设置 `mode="multiple"` 和 `valueType="primitive"`
2. 点击选项 1
3. 点击选项 2
4. 再次点击选项 1

**期望结果：**

- 可以同时选择多个选项
- 再次点击已选中的选项可以取消选中
- 选项状态正确更新

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

---

#### 测试用例 2.3.5：多选模式 - primitive 值类型

**测试目的：** 验证多选模式下 primitive 值类型返回数组  
**测试步骤：**

1. 设置 `mode="multiple"` 和 `valueType="primitive"`
2. 选择选项 1 和 2
3. 检查 onChange 回调的值

**期望结果：**

- onChange 回调接收到的值为 `[1, 2]`（id 数组）

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

---

#### 测试用例 2.3.6：多选模式 - object 值类型

**测试目的：** 验证多选模式下 object 值类型返回对象数组  
**测试步骤：**

1. 设置 `mode="multiple"` 和 `valueType="object"`
2. 选择选项 1 和 2
3. 检查 onChange 回调的值

**期望结果：**

- onChange 回调接收到的值为 `[{ value: 1, quantity: 1 }, { value: 2, quantity: 1 }]`

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

---

### 2.4 数量选择测试

#### 测试用例 2.4.1：数量选择器显示条件

**测试目的：** 验证数量选择器的显示条件  
**测试步骤：**

1. 选项配置 `ruleConfig.min=1` 或 `ruleConfig.max=10`
2. 检查是否显示数量选择器

**期望结果：**

- 当选项配置了 min 或 max 时，显示数量选择器
- 当 `showStepper=false` 时，不显示数量选择器
- 当 `showStepper='auto'` 且选项没有 min/max 时，不显示数量选择器

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

---

#### 测试用例 2.4.2：数量选择器 - 增减数量

**测试目的：** 验证数量选择器的增减功能  
**测试步骤：**

1. 选择选项，显示数量选择器
2. 点击 + 按钮
3. 点击 - 按钮
4. 检查数量变化

**期望结果：**

- 点击 + 按钮，数量增加 1
- 点击 - 按钮，数量减少 1
- onChange 回调被正确触发

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

---

#### 测试用例 2.4.3：数量选择器 - 最小值限制

**测试目的：** 验证数量选择器的最小值限制  
**测试步骤：**

1. 选项配置 `ruleConfig.min=2`
2. 组级配置 `ruleConfig.min=3`
3. 选择选项并尝试减少数量

**期望结果：**

- 数量不能小于选项级 min（2）
- 当选项数量 < 2 时，- 按钮禁用或数量不能继续减少
- 组级 min 不影响单个选项的最小值

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

---

#### 测试用例 2.4.4：数量选择器 - 最大值限制

**测试目的：** 验证数量选择器的最大值限制  
**测试步骤：**

1. 选项配置 `ruleConfig.max=5`
2. 组级配置 `ruleConfig.max=10`
3. 选择选项并尝试增加数量

**期望结果：**

- 数量不能大于选项级 max（5）
- 当数量达到 max 时，+ 按钮禁用
- 剩余可选数量正确计算

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

---

#### 测试用例 2.4.5：数量选择器 - 输入框功能

**测试目的：** 验证数量选择器的输入框功能  
**测试步骤：**

1. 点击数量选择器的数字
2. 输入新值
3. 点击确认或关闭弹窗

**期望结果：**

- 点击数字后打开输入弹窗
- 可以输入新值
- 点击确认后值生效
- 输入的值会被限制在 min 和 max 范围内

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

---

#### 测试用例 2.4.6：达到最大值时禁用未选中选项

**测试目的：** 验证达到组级最大值时，未选中的选项被禁用  
**测试步骤：**

1. 设置组级 `ruleConfig.max=3`
2. 选择选项 1，数量设为 3
3. 检查选项 2 和 3 的状态

**期望结果：**

- 选项 2 和 3 被禁用
- 禁用状态下显示禁用样式
- 无法点击禁用的选项

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

---

### 2.5 Variant 变体测试

#### 测试用例 2.5.1：Default Variant - Preset 1

**测试目的：** 验证 Default Variant Preset 1 的渲染  
**测试步骤：**

1. 设置 `variant="default"` 和 `preset={{ variant: '1' }}`
2. 检查布局和样式

**期望结果：**

- 单列布局，选项垂直排列
- 显示默认指示器（outlined）

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

---

#### 测试用例 2.5.2：Default Variant - Preset 2

**测试目的：** 验证 Default Variant Preset 2 的渲染  
**测试步骤：**

1. 设置 `variant="default"` 和 `preset={{ variant: '2' }}`
2. 检查布局和样式

**期望结果：**

- Flex 自适应布局，选项横向排列
- 使用 `autoFlex` 布局类名

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

---

#### 测试用例 2.5.3：Card Variant - Preset 1

**测试目的：** 验证 Card Variant Preset 1 的渲染  
**测试步骤：**

1. 设置 `variant="card"` 和 `preset={{ variant: '1' }}`
2. 检查布局和样式

**期望结果：**

- 固定宽度网格（209px），outlined 指示器
- 使用 `responsive210` 响应式布局
- 断点配置正确

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

---

#### 测试用例 2.5.4：Card Variant - Preset 2

**测试目的：** 验证 Card Variant Preset 2 的渲染  
**测试步骤：**

1. 设置 `variant="card"` 和 `preset={{ variant: '2' }}`
2. 检查指示器样式

**期望结果：**

- 固定宽度网格（209px），filled 指示器
- 指示器自动使用 filled variant

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

---

#### 测试用例 2.5.5：Card Variant - Preset 4

**测试目的：** 验证 Card Variant Preset 4 的渲染  
**测试步骤：**

1. 设置 `variant="card"` 和 `preset={{ variant: '4' }}`
2. 检查布局和样式

**期望结果：**

- 大尺寸网格（325px），最多 4 列
- 使用 `responsive330` 响应式布局
- 断点配置正确

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

---

#### 测试用例 2.5.6：Media Variant - Preset 1

**测试目的：** 验证 Media Variant Preset 1 的渲染  
**测试步骤：**

1. 设置 `variant="media"` 和 `preset={{ variant: '1' }}`
2. 检查布局和样式

**期望结果：**

- 小尺寸，无指示器，圆形/方形
- Flex 自适应布局

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

---

#### 测试用例 2.5.7：Media Variant - Preset 2

**测试目的：** 验证 Media Variant Preset 2 的渲染  
**测试步骤：**

1. 设置 `variant="media"` 和 `preset={{ variant: '2' }}`
2. 检查指示器样式

**期望结果：**

- 大尺寸，有指示器，圆形
- 指示器自动使用 filled variant
- 选中时显示指示器

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

---

#### 测试用例 2.5.8：Select Variant - 单选模式

**测试目的：** 验证 Select Variant 单选模式  
**测试步骤：**

1. 设置 `variant="select"` 和 `mode="single"`
2. 检查渲染结果
3. 点击下拉框选择选项

**期望结果：**

- 渲染为 Ant Design Select 组件
- 单选模式下可以正常选择
- onChange 回调被正确触发

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

---

#### 测试用例 2.5.9：Select Variant - 多选模式

**测试目的：** 验证 Select Variant 多选模式  
**测试步骤：**

1. 设置 `variant="select"` 和 `mode="multiple"`
2. 检查渲染结果
3. 选择多个选项

**期望结果：**

- 渲染为 Ant Design Select 组件（multiple 模式）
- 可以多选
- 显示 maxTagCount 限制的标签数量

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

---

#### 测试用例 2.5.10：Select Variant - 清空功能

**测试目的：** 验证 Select Variant 的清空功能  
**测试步骤：**

1. 设置 `variant="select"`
2. 选择选项
3. 点击清空按钮

**期望结果：**

- 可以清空已选择的值
- 清空后值变为 undefined 或 []

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


---

#### 测试用例 2.5.11：Select Variant - 搜索功能

**测试目的：** 验证 Select Variant 的搜索功能  
**测试步骤：**

1. 设置 `variant="select"`
2. 打开下拉框
3. 输入关键词搜索

**期望结果：**

- 可以通过输入关键词搜索选项
- 搜索结果正确过滤

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


---

### 2.6 Indicator 指示器测试

#### 测试用例 2.6.1：Outlined 样式 - 单选模式

**测试目的：** 验证 Outlined 样式在单选模式下的显示  
**测试步骤：**

1. 设置 `indicatorProps={{ variant: 'outlined' }}` 和 `mode="single"`
2. 检查指示器样式

**期望结果：**

- 显示圆形单选按钮
- 选中时显示内部圆点
- 未选中时显示空圆

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

---

#### 测试用例 2.6.2：Outlined 样式 - 多选模式

**测试目的：** 验证 Outlined 样式在多选模式下的显示  
**测试步骤：**

1. 设置 `indicatorProps={{ variant: 'outlined' }}` 和 `mode="multiple"`
2. 检查指示器样式

**期望结果：**

- 显示方形复选框
- 选中时显示勾选图标
- 未选中时显示空方框

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

---

#### 测试用例 2.6.3：Filled 样式 - 单选模式

**测试目的：** 验证 Filled 样式在单选模式下的显示  
**测试步骤：**

1. 设置 `indicatorProps={{ variant: 'filled' }}` 和 `mode="single"`
2. 检查指示器样式

**期望结果：**

- 选中时显示填充背景
- 显示勾选图标

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

---

#### 测试用例 2.6.4：Filled 样式 - 多选模式

**测试目的：** 验证 Filled 样式在多选模式下的显示  
**测试步骤：**

1. 设置 `indicatorProps={{ variant: 'filled' }}` 和 `mode="multiple"`
2. 检查指示器样式

**期望结果：**

- 选中时显示填充背景
- 显示勾选图标

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

---

#### 测试用例 2.6.5：隐藏指示器

**测试目的：** 验证隐藏指示器的功能  
**测试步骤：**

1. 设置 `indicatorProps={{ show: false }}`
2. 检查是否显示指示器

**期望结果：**

- 不显示指示器
- 选项内容正常显示

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

---

#### 测试用例 2.6.6：自定义指示器渲染

**测试目的：** 验证自定义指示器渲染功能  
**测试步骤：**

1. 设置 `indicatorProps={{ render: (props) => <CustomIndicator {...props} /> }}`
2. 检查是否使用自定义指示器

**期望结果：**

- 使用自定义指示器组件
- 正确传递 props（option, selected, disabled, actions）

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

---

### 2.7 校验功能测试

#### 测试用例 2.7.1：必填校验 - 未选择

**测试目的：** 验证必填校验功能  
**测试步骤：**

1. 设置 `ruleConfig={{ required: 1 }}`
2. 不选择任何选项
3. 调用 validate 方法

**期望结果：**

- 显示错误提示
- 标题旁显示红色错误标签
- errors 数组包含 required 类型错误

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

---

#### 测试用例 2.7.2：必填校验 - 已选择

**测试目的：** 验证必填校验通过时的显示  
**测试步骤：**

1. 设置 `ruleConfig={{ required: 1 }}`
2. 选择选项
3. 调用 validate 方法

**期望结果：**

- 校验通过
- 标题旁显示绿色成功标签（如果 validated 为 true）
- errors 数组为空

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

---

#### 测试用例 2.7.3：组级最小值校验

**测试目的：** 验证组级最小值校验  
**测试步骤：**

1. 设置 `ruleConfig={{ min: 3 }}`
2. 选择选项，总数量为 2
3. 调用 validate 方法

**期望结果：**

- 显示错误提示："至少选择 3 个"
- errors 数组包含 min 类型错误

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

---

#### 测试用例 2.7.4：组级最大值校验

**测试目的：** 验证组级最大值校验  
**测试步骤：**

1. 设置 `ruleConfig={{ max: 5 }}`
2. 选择选项，总数量为 6
3. 调用 validate 方法

**期望结果：**

- 显示错误提示："最多选择 5 个"
- errors 数组包含 max 类型错误

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

---

#### 测试用例 2.7.5：选项级最小值校验

**测试目的：** 验证选项级最小值校验  
**测试步骤：**

1. 选项配置 `ruleConfig={{ min: 2 }}`
2. 选择该选项，数量为 1
3. 调用 validate 方法

**期望结果：**

- 显示错误提示："选项 XXX 至少选择 2 个"
- errors 数组包含 optionMin 类型错误
- 错误包含 _key 字段

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

---

#### 测试用例 2.7.6：选项级最大值校验

**测试目的：** 验证选项级最大值校验  
**测试步骤：**

1. 选项配置 `ruleConfig={{ max: 3 }}`
2. 选择该选项，数量为 4
3. 调用 validate 方法

**期望结果：**

- 显示错误提示："选项 XXX 最多选择 3 个"
- errors 数组包含 optionMax 类型错误
- 错误包含 _key 字段

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

---

#### 测试用例 2.7.7：互斥校验

**测试目的：** 验证互斥组校验  
**测试步骤：**

1. 设置 `ruleConfig={{ mutex: [[1, 2, 3]] }}`
2. 选择选项 1
3. 选择选项 2（同组）

**期望结果：**

- 选择选项 2 时，选项 1 自动取消选中
- 同组内只能选择一个选项

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

---

#### 测试用例 2.7.8：自定义校验器

**测试目的：** 验证自定义校验器功能  
**测试步骤：**

1. 设置 `ruleConfig={{ customValidator: async (value) => { if (!value) throw new Error('自定义错误'); } }}`
2. 不选择任何选项
3. 调用 validate 方法

**期望结果：**

- 自定义校验器被调用
- 抛出错误时，错误信息正确显示
- errors 数组包含自定义错误

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

---

#### 测试用例 2.7.9：自动校验

**测试目的：** 验证自动校验功能  
**测试步骤：**

1. 设置 `ruleConfig={{ autoValidate: true }}`
2. 选择或取消选择选项

**期望结果：**

- 每次选择变化时自动触发校验
- 错误状态实时更新

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

---

### 2.8 响应式布局测试

#### 测试用例 2.8.1：响应式布局 - responsive210（最小宽度 209px）

**测试目的：** 验证 responsive210 响应式布局  
**测试步骤：**

1. 设置 `variant="card"` 和 `preset={{ variant: '1' }}`
2. 在不同容器宽度下测试：
   - 宽度 < 420px
   - 420px ≤ 宽度 < 630px
   - 630px ≤ 宽度 < 841px
   - 841px ≤ 宽度 ≤ 1366px
   - 宽度 > 1366px

**期望结果：**

- 宽度 < 420px：一行一列栅格布局
- 420px ≤ 宽度 < 630px：一行两列栅格布局
- 630px ≤ 宽度 < 841px：一行三列栅格布局
- 841px ≤ 宽度 ≤ 1366px：一行四列栅格布局
- 宽度 > 1366px：一行五列栅格布局

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


---

#### 测试用例 2.8.2：响应式布局 - responsive330（最小宽度 325px）

**测试目的：** 验证 responsive330 响应式布局  
**测试步骤：**

1. 设置 `variant="card"` 和 `preset={{ variant: '4' }}`
2. 在不同容器宽度下测试：
   - 宽度 < 660px
   - 660px ≤ 宽度 < 995px
   - 995px ≤ 宽度 ≤ 1366px
   - 宽度 > 1366px

**期望结果：**

- 宽度 < 660px：一行一列栅格布局
- 660px ≤ 宽度 < 995px：一行两列栅格布局
- 995px ≤ 宽度 ≤ 1366px：一行三列栅格布局
- 宽度 > 1366px：一行四列栅格布局

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

---

#### 测试用例 2.8.3：自动 Flex 布局

**测试目的：** 验证自动 Flex 布局  
**测试步骤：**

1. 设置 `variant="default"` 和 `preset={{ variant: '2' }}`
2. 检查布局类名和样式

**期望结果：**

- 使用 `pisell-pro-selector_layout-auto-flex` 类名
- 选项宽度由内容决定
- 一行可容纳的选项数量随容器宽度增加而增加
- 使用 Flex 布局，`flexWrap: 'wrap'` 实现自动换行

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

---

#### 测试用例 2.8.4：高度自适应

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

1. 设置横向布局的 Card Variant
2. 检查选项高度

**期望结果：**

- 组件高度由内容决定
- 当一行多列时，同行的几个 option 高度一致

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

---

### 2.9 Header 头部测试

#### 测试用例 2.9.1：标题显示

**测试目的：** 验证标题显示功能  
**测试步骤：**

1. 传入 `title="选择主菜"` 或 `headerProps={{ title: { text: '选择主菜' } }}`
2. 检查是否显示标题

**期望结果：**

- 显示标题文本
- 标题样式正确

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

---

#### 测试用例 2.9.2：标题隐藏

**测试目的：** 验证标题隐藏功能  
**测试步骤：**

1. 设置 `headerProps={{ title: { visible: false } }}`
2. 检查是否显示标题

**期望结果：**

- 不显示标题

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

---

#### 测试用例 2.9.3：提示文本显示

**测试目的：** 验证提示文本显示功能  
**测试步骤：**

1. 设置 `headerProps={{ tip: { text: '请至少选择一个选项' } }}`
2. 检查是否显示提示文本

**期望结果：**

- 显示提示文本
- 提示文本样式正确

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

---

#### 测试用例 2.9.4：提示文本自动生成

**测试目的：** 验证提示文本自动生成功能  
**测试步骤：**

1. 设置 `ruleConfig={{ min: 1, max: 5 }}`
2. 不设置 tip.text
3. 检查提示文本

**期望结果：**

- 自动生成提示文本："至少选择 1 个，最多选择 5 个"

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

---

#### 测试用例 2.9.5：错误提示显示

**测试目的：** 验证错误提示显示功能  
**测试步骤：**

1. 设置 `ruleConfig={{ required: 1 }}`
2. 不选择任何选项
3. 调用 validate 方法

**期望结果：**

- 显示错误提示文本
- 错误提示文本颜色为红色（#D92D20）

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

---

#### 测试用例 2.9.6：图标显示

**测试目的：** 验证图标显示功能  
**测试步骤：**

1. 设置 `headerProps={{ icon: { icon: <Icon /> } }}`
2. 检查是否显示图标

**期望结果：**

- 显示图标
- 图标位置正确（标题左侧）

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

---

#### 测试用例 2.9.7：额外内容渲染

**测试目的：** 验证额外内容渲染功能  
**测试步骤：**

1. 设置 `headerProps={{ renderExtra: (props) => <Button>操作</Button> }}`
2. 检查是否显示额外内容

**期望结果：**

- 显示额外内容
- renderExtra 函数接收正确的 props（dataSource, values）

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

---

### 2.10 自定义渲染测试

#### 测试用例 2.10.1：自定义选项渲染

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

1. 设置 `renderItem={(props) => <CustomItem {...props} />}`
2. 检查是否使用自定义渲染

**期望结果：**

- 使用自定义渲染函数
- 正确传递 props（dataSource, actions, optionItemValue, indicator, numberSelector, values, quantityInfo）

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

---

#### 测试用例 2.10.2：自定义选项渲染 - React 元素

**测试目的：** 验证传入 React 元素作为 renderItem  
**测试步骤：**

1. 设置 `renderItem={<CustomItem />}`
2. 检查是否使用该元素

**期望结果：**

- 直接使用传入的 React 元素

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

---

### 2.11 禁用状态测试

#### 测试用例 2.11.1：组件级禁用

**测试目的：** 验证组件级禁用功能  
**测试步骤：**

1. 设置 `disabled={true}`
2. 尝试点击选项

**期望结果：**

- 所有选项不可点击
- 指示器显示禁用样式
- 数量选择器不可操作

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

---

#### 测试用例 2.11.2：选项级禁用

**测试目的：** 验证选项级禁用功能  
**测试步骤：**

1. 选项配置 `disabled={true}`
2. 尝试点击该选项

**期望结果：**

- 该选项不可点击
- 其他选项可以正常点击
- 禁用选项显示禁用样式

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

---

#### 测试用例 2.11.3：达到最大值时自动禁用

**测试目的：** 验证达到最大值时自动禁用未选中选项  
**测试步骤：**

1. 设置组级 `ruleConfig.max=3`
2. 选择选项，总数量达到 3
3. 检查未选中选项的状态

**期望结果：**

- 未选中的选项自动禁用
- 已选中的选项可以继续操作（减少数量）

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

---

### 2.12 SelectorGroup 联动功能测试

#### 测试用例 2.12.1：分组显示/隐藏 - show 规则

**测试目的：** 验证分组显示/隐藏功能  
**测试步骤：**

1. 配置 `linkageRules` 中的 `show` 规则
2. 触发规则条件
3. 检查分组是否显示/隐藏

**期望结果：**

- 根据 `show` 规则控制分组显示/隐藏
- 分组隐藏时，如果 `preserve=false`，该分组的值会被清除

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

---

#### 测试用例 2.12.2：选项禁用 - allowOnly 规则

**测试目的：** 验证选项禁用功能  
**测试步骤：**

1. 配置 `linkageRules` 中的 `allowOnly` 规则
2. 触发规则条件
3. 检查选项是否被禁用

**期望结果：**

- 根据 `allowOnly` 规则禁用不允许的选项
- 选项禁用时，UI 上显示禁用状态
- 已选择的值如果不在 allowOnly 列表中，会被清除

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

---

#### 测试用例 2.12.3：必选其一 - requireOneOf 规则

**测试目的：** 验证必选其一功能  
**测试步骤：**

1. 配置 `linkageRules` 中的 `requireOneOf` 规则
2. 不选择指定选项
3. 调用 validate 方法

**期望结果：**

- 未满足 `requireOneOf` 时，显示错误提示
- errors 数组包含 requireOneOf 类型错误

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

---

#### 测试用例 2.12.4：SelectorGroup - 受控模式

**测试目的：** 验证 SelectorGroup 受控模式  
**测试步骤：**

1. 设置 `value={{ group1: 1, group2: [1, 2] }}`
2. 外部改变 value
3. 检查各分组的值是否更新

**期望结果：**

- 各分组的值随 value 变化
- onChange 回调被正确触发

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

---

#### 测试用例 2.12.5：SelectorGroup - 非受控模式

**测试目的：** 验证 SelectorGroup 非受控模式  
**测试步骤：**

1. 设置 `defaultValue={{ group1: 1 }}`
2. 在各分组中选择选项
3. 检查 onChange 回调的值

**期望结果：**

- 初始值正确设置
- onChange 回调接收所有分组的值

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

---

#### 测试用例 2.12.6：SelectorGroup - validate 方法

**测试目的：** 验证 SelectorGroup validate 方法  
**测试步骤：**

1. 调用 `ref.current.validate()`
2. 检查校验结果

**期望结果：**

- 校验所有分组
- 返回所有分组的错误信息
- 如果有错误，滚动到第一个错误位置（如果 `scrollToFirstError=true`）

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

---

#### 测试用例 2.12.7：SelectorGroup - reset 方法

**测试目的：** 验证 SelectorGroup reset 方法  
**测试步骤：**

1. 选择一些选项
2. 调用 `ref.current.reset()`
3. 检查值是否重置

**期望结果：**

- 如果有 defaultValue，重置到 defaultValue
- 如果没有 defaultValue，清空所有值
- 清除所有错误

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

---

#### 测试用例 2.12.8：SelectorGroup - 标签页导航

**测试目的：** 验证 SelectorGroup 标签页导航功能  
**测试步骤：**

1. 设置 `tabProps={{ visible: true }}`
2. 检查是否显示标签页
3. 切换标签页

**期望结果：**

- 显示标签页导航
- 可以切换不同分组
- 切换时正确显示对应分组的内容

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

---

### 2.13 Ref 方法测试

#### 测试用例 2.13.1：validate 方法

**测试目的：** 验证 validate 方法  
**测试步骤：**

1. 调用 `ref.current.validate()`
2. 检查返回值

**期望结果：**

- 返回 Promise
- 校验通过时 resolve
- 校验失败时 reject，并包含错误信息

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

---

#### 测试用例 2.13.2：reset 方法

**测试目的：** 验证 reset 方法  
**测试步骤：**

1. 选择一些选项
2. 调用 `ref.current.reset()`
3. 检查值是否重置

**期望结果：**

- 如果有 defaultValue，重置到 defaultValue
- 如果没有 defaultValue，清空值
- 清除错误状态

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

---

#### 测试用例 2.13.3：clear 方法

**测试目的：** 验证 clear 方法  
**测试步骤：**

1. 选择一些选项
2. 调用 `ref.current.clear()`
3. 检查值是否清空

**期望结果：**

- 清空所有值
- 单选模式：值变为 undefined
- 多选模式：值变为 []

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

---

#### 测试用例 2.13.4：getErrors 方法

**测试目的：** 验证 getErrors 方法  
**测试步骤：**

1. 调用 validate 方法产生错误
2. 调用 `ref.current.getErrors()`
3. 检查返回的错误数组

**期望结果：**

- 返回当前错误数组
- 错误格式正确

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

---

## 3. 边界条件测试

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

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

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

**期望结果：**

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

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

---

### 测试用例 3.2：单个选项

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

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

**期望结果：**

- 正常显示单个选项
- 可以正常选择
- 布局正常

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

---

### 测试用例 3.3：大量选项

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

1. 传入 100 个选项
2. 检查渲染和性能

**期望结果：**

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

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

---

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

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

1. 传入 `value={999}`，但选项中没有 id=999 的选项
2. 检查渲染

**期望结果：**

- 不报错
- 不选中任何选项（或显示警告）

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

---

### 测试用例 3.5：快速连续点击

**测试目的：** 验证快速连续点击时的表现  
**测试步骤：**

1. 快速连续点击选项
2. 检查状态更新

**期望结果：**

- 状态正确更新
- 不出现竞态条件
- onChange 回调正确触发

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

---

### 测试用例 3.6：数量边界值

**测试目的：** 验证数量边界值处理  
**测试步骤：**

1. 设置 `ruleConfig.min=1` 和 `ruleConfig.max=10`
2. 尝试设置数量为 0、1、10、11

**期望结果：**

- 数量不能小于 min
- 数量不能大于 max
- 边界值正确处理

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

---

### 测试用例 3.7：fieldNames 自定义字段名

**测试目的：** 验证自定义字段名功能  
**测试步骤：**

1. 设置 `fieldNames={{ value: 'id', label: 'name', cover: 'image' }}`
2. 传入数据源使用自定义字段名
3. 检查是否正确读取字段

**期望结果：**

- 正确读取自定义字段名
- 选项正确显示

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

---

## 4. 兼容性测试

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

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

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

**期望结果：**

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

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

---

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

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

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

**期望结果：**

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

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

---

## 5. 性能测试

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

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

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

**期望结果：**

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

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

---

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

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

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

**期望结果：**

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

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

---

### 测试用例 5.3：大量选项滚动性能

**测试目的：** 验证大量选项时的滚动性能  
**测试步骤：**

1. 渲染包含 500 个选项的组件
2. 滚动列表
3. 检查滚动流畅度

**期望结果：**

- 滚动流畅
- 无明显卡顿

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

---

## 6. 可访问性测试

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

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

1. 使用 Tab 键导航
2. 使用 Enter/Space 键选择选项

**期望结果：**

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

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

---

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

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

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

**期望结果：**

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

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

---

## 7. 测试总结

### 7.1 测试用例统计

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

### 7.2 测试优先级

- **P0（高优先级）**：基础渲染、受控/非受控模式、选择模式、数量选择、校验功能、禁用状态
- **P1（中优先级）**：Variant 变体、Preset 预设、响应式布局、Header 头部、自定义渲染、SelectorGroup 联动
- **P2（低优先级）**：边界条件、性能测试、可访问性、已知问题修复

### 7.3 测试覆盖率目标

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

## 8. 测试执行计划

### 8.1 自动化测试

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

### 8.2 人工测试

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

### 8.3 测试报告

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