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

# PisellFind 组件测试用例文档

## 测试环境

- React 版本：^18.0.0
- Ant Design 版本：^5.0.0
- 测试框架：Jest + React Testing Library
- 依赖组件：PisellLookup
- 浏览器：Chrome 最新版、Safari 最新版、Firefox 最新版

## 测试策略

由于 PisellFind 是基于 PisellLookup 的薄封装组件，测试重点在于：

1. 默认配置是否正确
2. Props 透传是否正确
3. Ref 方法是否正常透出
4. 用户可以覆盖默认配置

**注意：** PisellLookup 的所有功能已在其自身测试中覆盖，PisellFind 主要测试封装层逻辑。

---

## 测试用例分类

### 一、默认配置测试

#### 1.1 默认触发器类型

| 用例编号   | 测试项             | 测试步骤                                                       | 预期结果     | 优先级 |
|--------|-----------------|------------------------------------------------------------|----------|-----|
| TF-001 | 默认使用 button 触发器 | 1. 渲染 PisellFind<br>2. 不设置 triggerType<br>3. 观察渲染结果        | 显示按钮触发器  | P0  |
| TF-002 | 可覆盖为 input 触发器  | 1. 设置 triggerType="input"<br>2. 渲染 PisellFind<br>3. 观察渲染结果 | 显示输入框触发器 | P0  |

#### 1.2 默认确认按钮

| 用例编号   | 测试项        | 测试步骤                                                  | 预期结果            | 优先级 |
|--------|------------|-------------------------------------------------------|-----------------|-----|
| TF-003 | 默认不显示确认按钮  | 1. 渲染 PisellFind<br>2. 点击按钮打开 Modal<br>3. 观察输入框       | 输入框中无 Lookup 按钮 | P0  |
| TF-004 | 输入即搜索      | 1. 打开 PisellFind<br>2. 输入内容<br>3. 等待防抖时间              | 自动触发 onSearch   | P0  |
| TF-005 | 可覆盖为显示确认按钮 | 1. 设置 showConfirmButton={true}<br>2. 打开查找<br>3. 观察输入框 | 显示 Lookup 按钮    | P1  |

#### 1.3 默认搜索历史

| 用例编号   | 测试项      | 测试步骤                                               | 预期结果                            | 优先级 |
|--------|----------|----------------------------------------------------|---------------------------------|-----|
| TF-006 | 默认开启搜索历史 | 1. 渲染 PisellFind<br>2. 打开查找<br>3. 搜索内容             | 搜索历史被保存                         | P0  |
| TF-007 | 历史记录显示   | 1. 搜索后关闭<br>2. 再次打开<br>3. 观察界面                     | 显示搜索历史                          | P0  |
| TF-008 | 可覆盖为关闭历史 | 1. 设置 showHistory={false}<br>2. 打开查找               | 不显示搜索历史                         | P1  |
| TF-009 | 历史存储 Key | 1. 不设置 historyKey<br>2. 搜索内容<br>3. 检查 localStorage | 使用 'pisell_find_history' 作为 key | P1  |

#### 1.4 默认结果展示

| 用例编号   | 测试项      | 测试步骤                                               | 预期结果             | 优先级 |
|--------|----------|----------------------------------------------------|------------------|-----|
| TF-010 | 默认不展示结果区 | 1. 渲染 PisellFind<br>2. 不设置 resultRender<br>3. 搜索内容 | Modal 中不显示搜索结果区域 | P0  |
| TF-011 | 可配置结果渲染  | 1. 设置 resultRender<br>2. 搜索内容                      | 在 Modal 中显示结果    | P1  |

### 二、Props 透传测试

#### 2.1 基础 Props 透传

| 用例编号   | 测试项            | 测试步骤                                         | 预期结果     | 优先级 |
|--------|----------------|----------------------------------------------|----------|-----|
| TF-012 | placeholder 透传 | 1. 设置 placeholder="搜索商品"<br>2. 渲染 PisellFind | 输入框显示占位符 | P0  |
| TF-013 | disabled 透传    | 1. 设置 disabled={true}<br>2. 渲染 PisellFind    | 按钮/输入框禁用 | P0  |
| TF-014 | size 透传        | 1. 设置 size="large"<br>2. 渲染 PisellFind       | 显示大号尺寸   | P1  |
| TF-015 | className 透传   | 1. 设置 className="custom"<br>2. 渲染 PisellFind | 包含自定义类名  | P1  |
| TF-016 | style 透传       | 1. 设置 style={{...}}<br>2. 渲染 PisellFind      | 应用自定义样式  | P1  |

#### 2.2 展示配置透传

| 用例编号   | 测试项            | 测试步骤                                   | 预期结果             | 优先级 |
|--------|----------------|----------------------------------------|------------------|-----|
| TF-017 | displayType 透传 | 1. 设置 displayType="drawer"<br>2. 点击触发器 | 打开 Drawer        | P0  |
| TF-018 | modalWidth 透传  | 1. 设置 modalWidth={1000}<br>2. 打开 Modal | Modal 宽度为 1000px | P1  |
| TF-019 | mask 透传        | 1. 设置 mask={true}<br>2. 打开 Modal       | 显示遮罩层            | P1  |

#### 2.3 事件回调透传

| 用例编号   | 测试项         | 测试步骤                         | 预期结果               | 优先级 |
|--------|-------------|------------------------------|--------------------|-----|
| TF-020 | onSearch 回调 | 1. 设置 onSearch 回调<br>2. 搜索内容 | 触发 onSearch，参数为关键词 | P0  |
| TF-021 | onChange 回调 | 1. 设置 onChange 回调<br>2. 输入内容 | 触发 onChange，参数为新值  | P0  |
| TF-022 | onOpen 回调   | 1. 设置 onOpen 回调<br>2. 打开查找   | 触发 onOpen          | P1  |
| TF-023 | onClose 回调  | 1. 设置 onClose 回调<br>2. 关闭查找  | 触发 onClose         | P1  |

### 三、Ref 方法测试

| 用例编号   | 测试项                 | 测试步骤                                             | 预期结果         | 优先级 |
|--------|---------------------|--------------------------------------------------|--------------|-----|
| TF-024 | ref.open() 方法       | 1. 获取 ref<br>2. 调用 ref.current.open()            | 打开查找面板       | P0  |
| TF-025 | ref.close() 方法      | 1. 打开查找<br>2. 调用 ref.current.close()             | 关闭查找面板       | P0  |
| TF-026 | ref.setKeyword() 方法 | 1. 调用 ref.current.setKeyword('test')<br>2. 观察输入框 | 输入框显示 'test' | P1  |
| TF-027 | ref.getKeyword() 方法 | 1. 输入内容<br>2. 调用 ref.current.getKeyword()        | 返回当前关键词      | P1  |

### 四、使用场景测试

#### 4.1 列表页查找

| 用例编号   | 测试项    | 测试步骤                                                            | 预期结果             | 优先级 |
|--------|--------|-----------------------------------------------------------------|------------------|-----|
| TF-028 | 过滤列表数据 | 1. 渲染列表页<br>2. 使用 PisellFind<br>3. 在 onSearch 中过滤数据<br>4. 输入关键词 | 列表数据被过滤          | P0  |
| TF-029 | 实时过滤   | 1. 输入关键词<br>2. 观察列表变化                                           | 列表实时更新（300ms 防抖） | P0  |
| TF-030 | 清空恢复   | 1. 搜索后清空关键词<br>2. 观察列表                                          | 列表恢复显示所有数据       | P0  |

#### 4.2 表格查找

| 用例编号   | 测试项    | 测试步骤                                                            | 预期结果    | 优先级 |
|--------|--------|-----------------------------------------------------------------|---------|-----|
| TF-031 | 过滤表格数据 | 1. 渲染表格页<br>2. 使用 PisellFind<br>3. 在 onSearch 中过滤数据<br>4. 输入关键词 | 表格数据被过滤 | P0  |
| TF-032 | 保持表格功能 | 1. 过滤后的表格<br>2. 测试排序、分页等功能                                      | 表格功能正常  | P1  |

#### 4.3 卡片流查找

| 用例编号   | 测试项    | 测试步骤                                                             | 预期结果    | 优先级 |
|--------|--------|------------------------------------------------------------------|---------|-----|
| TF-033 | 过滤卡片数据 | 1. 渲染卡片列表<br>2. 使用 PisellFind<br>3. 在 onSearch 中过滤数据<br>4. 输入关键词 | 卡片列表被过滤 | P0  |

### 五、模式切换测试

| 用例编号   | 测试项               | 测试步骤                                                          | 预期结果      | 优先级 |
|--------|-------------------|---------------------------------------------------------------|-----------|-----|
| TF-034 | Button 模式默认行为     | 1. triggerType="button"<br>2. 点击按钮<br>3. 观察展示方式               | 打开 Modal  | P0  |
| TF-035 | Input 模式默认行为      | 1. triggerType="input"<br>2. 聚焦输入框<br>3. 观察展示方式               | Inline 展示 | P0  |
| TF-036 | 可强制指定 displayType | 1. triggerType="button"<br>2. displayType="drawer"<br>3. 点击按钮 | 打开 Drawer | P1  |

### 六、与 PisellLookup 对比测试

| 用例编号   | 测试项    | 测试步骤                                  | 预期结果                                         | 优先级 |
|--------|--------|---------------------------------------|----------------------------------------------|-----|
| TF-037 | 默认配置差异 | 1. 对比 PisellFind 和 PisellLookup 的默认行为 | triggerType、showConfirmButton、showHistory 不同 | P0  |
| TF-038 | 功能完全一致 | 1. 测试所有 Lookup 的功能<br>2. 在 Find 中验证   | 所有功能正常工作                                     | P0  |

### 七、边界场景测试

| 用例编号   | 测试项    | 测试步骤                             | 预期结果      | 优先级 |
|--------|--------|----------------------------------|-----------|-----|
| TF-039 | 空数据搜索  | 1. 数据源为空数组<br>2. 搜索内容            | 不报错，返回空数组 | P1  |
| TF-040 | 特殊字符搜索 | 1. 输入特殊字符<br>2. 触发 onSearch      | 正确传递特殊字符  | P1  |
| TF-041 | 超长关键词  | 1. 输入 1000 个字符<br>2. 触发 onSearch | 正确传递，不报错  | P2  |

### 八、性能测试

| 用例编号   | 测试项    | 测试步骤                                            | 预期结果              | 优先级 |
|--------|--------|-------------------------------------------------|-------------------|-----|
| TF-042 | 防抖性能   | 1. 快速输入多个字符<br>2. 观察 onSearch 调用次数              | 防抖生效，减少调用         | P1  |
| TF-043 | 大数据量过滤 | 1. 绑定 10000 条数据<br>2. 在 onSearch 中过滤<br>3. 观察性能 | 过滤逻辑由外部处理，组件无性能问题 | P2  |

---

## 自动化测试用例（需编写单元测试）

### 组件渲染测试

```typescript
describe('PisellFind - Render', () => {
  test('TF-001: 应该默认渲染 Button 触发器', () => {
    // 测试默认 triggerType='button'
  });
  
  test('TF-002: 应该支持切换为 Input 触发器', () => {
    // 测试 triggerType='input'
  });
});
```

### 默认配置测试

```typescript
describe('PisellFind - Default Config', () => {
  test('TF-003: 应该默认不显示确认按钮', () => {
    // 验证 showConfirmButton=false
  });
  
  test('TF-006: 应该默认开启搜索历史', () => {
    // 验证 showHistory=true
  });
  
  test('TF-010: 应该默认不展示结果区', () => {
    // 验证不提供 resultRender
  });
});
```

### Props 透传测试

```typescript
describe('PisellFind - Props Pass Through', () => {
  test('TF-012: 应该正确透传 placeholder', () => {
    // 验证 placeholder 传递给 PisellLookup
  });
  
  test('TF-013: 应该正确透传 disabled', () => {
    // 验证 disabled 传递给 PisellLookup
  });
  
  test('TF-020: 应该正确透传 onSearch 回调', () => {
    // 验证 onSearch 正常触发
  });
});
```

### Ref 方法测试

```typescript
describe('PisellFind - Ref Methods', () => {
  test('TF-024: 应该支持 ref.open() 方法', () => {
    // 测试打开查找
  });
  
  test('TF-025: 应该支持 ref.close() 方法', () => {
    // 测试关闭查找
  });
  
  test('TF-026: 应该支持 ref.setKeyword() 方法', () => {
    // 测试设置关键词
  });
  
  test('TF-027: 应该支持 ref.getKeyword() 方法', () => {
    // 测试获取关键词
  });
});
```

### 使用场景测试

```typescript
describe('PisellFind - Use Cases', () => {
  test('TF-028: 应该支持过滤列表数据', () => {
    // 模拟列表过滤场景
  });
  
  test('TF-029: 应该支持实时过滤', () => {
    // 测试实时搜索效果
  });
});
```

---

## Bug 汇总

> **说明**：此部分用于记录人工测试发现的 Bug，由测试人员填写。

### Bug 模板

| Bug ID   | 发现日期 | 严重程度 | Bug 描述 | 复现步骤             | 预期结果 | 实际结果 | 状态  | 修复日期 | 备注 |
|----------|------|------|--------|------------------|------|------|-----|------|----|
| BUG-F001 | -    | -    | 示例 Bug | 1. 步骤1<br>2. 步骤2 | 预期结果 | 实际结果 | 待修复 | -    | -  |

### 已发现的 Bug

_（此处由测试人员填写发现的 Bug）_

| Bug ID | 发现日期 | 严重程度 | Bug 描述 | 复现步骤 | 预期结果 | 实际结果 | 状态 | 修复日期 | 备注 |
|--------|------|------|--------|------|------|------|----|------|----|
| -      | -    | -    | 暂无     | -    | -    | -    | -  | -    | -  |

---

## 测试进度

- [ ] 默认配置测试（9个用例）
- [ ] Props 透传测试（8个用例）
- [ ] Ref 方法测试（4个用例）
- [ ] 使用场景测试（6个用例）
- [ ] 模式切换测试（3个用例）
- [ ] 与 PisellLookup 对比测试（2个用例）
- [ ] 边界场景测试（3个用例）
- [ ] 性能测试（2个用例）

**总计：37 个测试用例**

---

## 测试重点

### 重点 1：默认配置正确性

- ✅ triggerType='button'
- ✅ showConfirmButton=false
- ✅ showHistory=true
- ✅ resultRender=undefined

### 重点 2：Props 透传完整性

- ✅ 所有 PisellLookup 的 Props 都能正常工作
- ✅ 用户可以覆盖任何默认配置

### 重点 3：Ref 方法可用性

- ✅ ref.open/close/getKeyword/setKeyword 都正常工作

### 重点 4：实际场景可用性

- ✅ 列表过滤场景
- ✅ 表格过滤场景
- ✅ 卡片流过滤场景

---

## 测试总结

_（测试完成后填写）_

- 测试开始日期：
- 测试结束日期：
- 通过用例数：
- 失败用例数：
- Bug 总数：
- 测试结论：
