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

# PisellSuperTabs 测试用例文档

## 1. 测试概述

本文档列出 PisellSuperTabs 组件的所有测试用例，包括自动化测试和人工测试点。

## 2. 功能测试用例

### 2.1 基础渲染测试

#### TC-2.1.1 组件正常渲染
- **测试目标**：验证组件能够正常渲染
- **前置条件**：无
- **测试步骤**：
  1. 渲染组件
  2. 检查组件是否存在于 DOM 中
- **预期结果**：组件成功渲染，class 包含 `pisell-super-tabs`

#### TC-2.1.2 自定义 className
- **测试目标**：验证自定义 className 能够正确应用
- **前置条件**：无
- **测试步骤**：
  1. 传入 `className="custom-tabs"`
  2. 检查 DOM 节点的 class
- **预期结果**：DOM 节点包含 `pisell-super-tabs` 和 `custom-tabs`

#### TC-2.1.3 自定义 style
- **测试目标**：验证自定义 style 能够正确应用
- **前置条件**：无
- **测试步骤**：
  1. 传入 `style={{ width: '500px' }}`
  2. 检查 DOM 节点的 style
- **预期结果**：DOM 节点的 width 为 500px

### 2.2 数据源测试

#### TC-2.2.1 空数据源
- **测试目标**：验证空数据源时的渲染
- **前置条件**：无
- **测试步骤**：
  1. 传入空数组 `dataSource={[]}`
  2. 检查渲染结果
- **预期结果**：组件正常渲染，无 TabItem

#### TC-2.2.2 正常数据源
- **测试目标**：验证正常数据源的渲染
- **前置条件**：无
- **测试步骤**：
  1. 传入 3 个 Tab 数据
  2. 检查 TabItem 数量
- **预期结果**：渲染 3 个 TabItem

#### TC-2.2.3 嵌套数据源
- **测试目标**：验证带 children 的嵌套数据
- **前置条件**：无
- **测试步骤**：
  1. 传入带 children 字段的数据
  2. 检查第一级渲染
- **预期结果**：只渲染第一级数据（children 由 Card 组件处理）

#### TC-2.2.4 rowKey 字段自定义（字符串）
- **测试目标**：验证自定义 rowKey 字段名
- **前置条件**：无
- **测试步骤**：
  1. 数据源使用 `id` 字段作为 key
  2. 传入 `rowKey="id"`
  3. 检查渲染的 key 值
- **预期结果**：使用 `id` 字段作为 key

#### TC-2.2.5 rowKey 函数自定义
- **测试目标**：验证 rowKey 函数模式
- **前置条件**：无
- **测试步骤**：
  1. 传入 `rowKey={(record, index) => `item-${index}`}`
  2. 检查渲染的 key 值
- **预期结果**：使用函数返回值作为 key

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

#### TC-2.3.1 非受控模式（无 value）
- **测试目标**：验证非受控模式的基本功能
- **前置条件**：无
- **测试步骤**：
  1. 不传 `value`，只传 `defaultValue="tab1"`
  2. 检查初始激活状态
  3. 点击其他 Tab
  4. 检查激活状态是否切换
- **预期结果**：初始激活 tab1，点击后能够切换

#### TC-2.3.2 受控模式（传 value）
- **测试目标**：验证受控模式的基本功能
- **前置条件**：无
- **测试步骤**：
  1. 传入 `value="tab1"` 和 `onChange`
  2. 检查初始激活状态
  3. 点击其他 Tab
  4. 在 onChange 中更新 value
  5. 检查激活状态是否切换
- **预期结果**：初始激活 tab1，点击后触发 onChange，更新 value 后切换

#### TC-2.3.3 defaultValue 初始化
- **测试目标**：验证 defaultValue 的初始化
- **前置条件**：无
- **测试步骤**：
  1. 传入 `defaultValue="tab2"`
  2. 检查初始激活状态
- **预期结果**：初始激活 tab2

#### TC-2.3.4 onChange 回调触发
- **测试目标**：验证 onChange 回调的参数
- **前置条件**：无
- **测试步骤**：
  1. 传入 onChange 回调
  2. 点击 Tab
  3. 检查回调参数
- **预期结果**：回调参数包含 key 和 item

### 2.4 自定义渲染测试

#### TC-2.4.1 renderItem 基础渲染
- **测试目标**：验证 renderItem 能够正确渲染
- **前置条件**：无
- **测试步骤**：
  1. 传入自定义 renderItem
  2. 检查渲染结果
- **预期结果**：使用自定义渲染函数的内容

#### TC-2.4.2 renderItem 接收正确参数
- **测试目标**：验证 renderItem 的参数
- **前置条件**：无
- **测试步骤**：
  1. 在 renderItem 中捕获参数
  2. 检查 item、index、active 参数
- **预期结果**：参数正确传递

#### TC-2.4.3 renderItem 激活状态传递
- **测试目标**：验证激活状态传递给 renderItem
- **前置条件**：无
- **测试步骤**：
  1. 设置 value="tab1"
  2. 在 renderItem 中检查 active 参数
- **预期结果**：tab1 的 active 为 true，其他为 false

### 2.5 布局功能测试（gridProps）

#### TC-2.5.1 横向布局
- **测试目标**：验证横向布局
- **前置条件**：无
- **测试步骤**：
  1. 传入 `gridProps={{ direction: 'horizontal' }}`
  2. 检查 Grid 组件的 direction
- **预期结果**：Grid 使用横向布局

#### TC-2.5.2 竖向布局
- **测试目标**：验证竖向布局
- **前置条件**：无
- **测试步骤**：
  1. 传入 `gridProps={{ direction: 'vertical' }}`
  2. 检查 Grid 组件的 direction
- **预期结果**：Grid 使用竖向布局

#### TC-2.5.3 间距设置
- **测试目标**：验证间距设置
- **前置条件**：无
- **测试步骤**：
  1. 传入 `gridProps={{ gap: 16 }}`
  2. 检查 Grid 组件的 gap
- **预期结果**：Grid 使用 16px 间距

#### TC-2.5.4 一行 N 个
- **测试目标**：验证 columns 配置
- **前置条件**：无
- **测试步骤**：
  1. 传入 `gridProps={{ columns: 4, wrap: 'wrap' }}`
  2. 检查布局
- **预期结果**：每行显示 4 个 TabItem

#### TC-2.5.5 等分布局
- **测试目标**：验证等分布局
- **前置条件**：无
- **测试步骤**：
  1. 传入 `gridProps={{ equalWidth: true }}`
  2. 检查 TabItem 宽度
- **预期结果**：所有 TabItem 等分容器宽度

### 2.6 滚动功能测试（scrollViewProps）

#### TC-2.6.1 横向滚动
- **测试目标**：验证横向滚动
- **前置条件**：TabItem 数量较多
- **测试步骤**：
  1. 传入 `scrollViewProps={{ overflow: 'x' }}`
  2. 检查滚动行为
- **预期结果**：支持横向滚动

#### TC-2.6.2 竖向滚动
- **测试目标**：验证竖向滚动
- **前置条件**：TabItem 数量较多
- **测试步骤**：
  1. 传入 `scrollViewProps={{ overflow: 'y', height: '300px' }}`
  2. 检查滚动行为
- **预期结果**：支持竖向滚动

#### TC-2.6.3 滚动条样式
- **测试目标**：验证滚动条样式
- **前置条件**：无
- **测试步骤**：
  1. 传入 `scrollViewProps={{ scrollbarStyle: 'thin' }}`
  2. 检查滚动条样式
- **预期结果**：使用细滚动条样式

#### TC-2.6.4 滚动按钮
- **测试目标**：验证滚动按钮显示
- **前置条件**：无
- **测试步骤**：
  1. 传入 `scrollViewProps={{ scrollActionsConfig: { show: true, type: 'lrArrows' } }}`
  2. 检查滚动按钮
- **预期结果**：显示左右滚动按钮

### 2.7 交互测试

#### TC-2.7.1 点击切换 Tab
- **测试目标**：验证点击切换功能
- **前置条件**：无
- **测试步骤**：
  1. 渲染 3 个 Tab
  2. 点击第 2 个 Tab
  3. 检查激活状态
- **预期结果**：第 2 个 Tab 被激活

#### TC-2.7.2 点击事件冒泡
- **测试目标**：验证点击事件是否正确处理
- **前置条件**：无
- **测试步骤**：
  1. 为 TabItem 添加内部点击事件
  2. 点击 TabItem
  3. 检查事件触发顺序
- **预期结果**：正确处理事件冒泡

## 3. 性能测试用例

### 3.1 大数据量渲染

#### TC-3.1.1 100 个 TabItem
- **测试目标**：验证大量 TabItem 的渲染性能
- **前置条件**：无
- **测试步骤**：
  1. 渲染 100 个 TabItem
  2. 测量渲染时间
- **预期结果**：渲染流畅，无明显卡顿

#### TC-3.1.2 频繁切换
- **测试目标**：验证频繁切换的性能
- **前置条件**：无
- **测试步骤**：
  1. 快速连续点击不同的 Tab
  2. 观察性能
- **预期结果**：切换流畅，无卡顿

### 3.2 内存测试

#### TC-3.2.1 组件卸载清理
- **测试目标**：验证组件卸载时的内存清理
- **前置条件**：无
- **测试步骤**：
  1. 挂载组件
  2. 卸载组件
  3. 检查是否有内存泄漏
- **预期结果**：无内存泄漏

## 4. 兼容性测试用例

### 4.1 Props 组合测试

#### TC-4.1.1 gridProps + scrollViewProps
- **测试目标**：验证两者同时使用
- **前置条件**：无
- **测试步骤**：
  1. 同时传入 gridProps 和 scrollViewProps
  2. 检查渲染结果
- **预期结果**：两者配置都生效

#### TC-4.1.2 受控模式 + 自定义渲染
- **测试目标**：验证受控模式和自定义渲染的兼容性
- **前置条件**：无
- **测试步骤**：
  1. 同时使用 value、onChange 和 renderItem
  2. 检查功能
- **预期结果**：功能正常

### 4.2 边界情况测试

#### TC-4.2.1 dataSource 为 undefined
- **测试目标**：验证 undefined 数据源
- **前置条件**：无
- **测试步骤**：
  1. 不传 dataSource
  2. 检查渲染
- **预期结果**：组件正常渲染，无报错

#### TC-4.2.2 value 不存在于 dataSource
- **测试目标**：验证无效的 value
- **前置条件**：无
- **测试步骤**：
  1. value 设置为 dataSource 中不存在的值
  2. 检查渲染
- **预期结果**：无 Tab 被激活，无报错

#### TC-4.2.3 rowKey 字段不存在
- **测试目标**：验证无效的 rowKey
- **前置条件**：无
- **测试步骤**：
  1. rowKey 设置为数据中不存在的字段
  2. 检查控制台警告
- **预期结果**：开发环境下显示警告，使用 index 作为 fallback

## 5. 人工测试用例

### 5.1 视觉测试

#### MT-5.1.1 样式一致性
- **测试内容**：检查组件样式是否符合设计稿
- **测试方法**：对比 Figma 设计稿
- **关注点**：
  - TabItem 间距
  - 激活状态样式
  - 过渡动画

#### MT-5.1.2 响应式布局
- **测试内容**：检查不同屏幕尺寸下的表现
- **测试方法**：调整浏览器窗口大小
- **关注点**：
  - 横向布局在小屏幕下的滚动
  - 竖向布局在大屏幕下的表现

### 5.2 交互体验测试

#### MT-5.2.1 滚动流畅度
- **测试内容**：检查滚动是否流畅
- **测试方法**：滚动 TabItem 列表
- **关注点**：
  - 横向滚动流畅度
  - 竖向滚动流畅度
  - 滚动按钮点击反馈

#### MT-5.2.2 点击反馈
- **测试内容**：检查点击反馈是否及时
- **测试方法**：点击不同的 Tab
- **关注点**：
  - 激活状态切换速度
  - 动画效果流畅度

### 5.3 真实场景测试

#### MT-5.3.1 顶部横向导航
- **测试内容**：作为顶部导航使用
- **测试方法**：配置横向布局 + 横向滚动
- **关注点**：
  - 滚动按钮是否显示
  - 激活状态是否明显

#### MT-5.3.2 侧边竖向菜单
- **测试内容**：作为侧边菜单使用
- **测试方法**：配置竖向布局 + 竖向滚动
- **关注点**：
  - 高度是否正确
  - 滚动是否正常

#### MT-5.3.3 底部图标导航
- **测试内容**：作为底部导航使用
- **测试方法**：配置等分布局
- **关注点**：
  - 是否等分宽度
  - 图标是否居中

#### MT-5.3.4 多级嵌套导航
- **测试内容**：测试嵌套数据的渲染
- **测试方法**：传入带 children 的数据
- **关注点**：
  - 第一级是否正常渲染
  - children 是否由 Card 处理

### 5.4 与 PisellCards 集成测试

#### MT-5.4.1 配合 TabCard 使用
- **测试内容**：与 PisellCards.TabCard 集成
- **测试方法**：在 renderItem 中使用 TabCard
- **关注点**：
  - active 状态传递是否正确
  - 样式是否正常

#### MT-5.4.2 配合自定义 Card 使用
- **测试内容**：与自定义 Card 组件集成
- **测试方法**：在 renderItem 中使用自定义组件
- **关注点**：
  - 渲染是否正常
  - 点击事件是否正常

## 6. 可访问性测试用例

### 6.1 键盘导航

#### AT-6.1.1 Tab 键导航
- **测试内容**：使用 Tab 键导航
- **测试方法**：按 Tab 键切换焦点
- **关注点**：焦点顺序是否正确

#### AT-6.1.2 方向键导航
- **测试内容**：使用方向键导航（预留）
- **测试方法**：按方向键切换 Tab
- **关注点**：是否支持方向键

### 6.2 屏幕阅读器

#### AT-6.2.1 ARIA 属性
- **测试内容**：检查 ARIA 属性（预留）
- **测试方法**：使用屏幕阅读器测试
- **关注点**：是否正确读取内容

## 7. Bug 汇总

### 7.1 已知问题

暂无

### 7.2 待修复 Bug

> 此区域用于记录人工测试过程中发现的 Bug，格式如下：

```
#### Bug-001: [Bug 标题]
- **发现时间**：YYYY-MM-DD
- **严重程度**：高/中/低
- **测试用例**：MT-X.X.X
- **复现步骤**：
  1. ...
  2. ...
- **预期结果**：...
- **实际结果**：...
- **修复状态**：待修复/已修复
- **修复说明**：...
```

---

**测试说明**：
1. 所有 TC 开头的用例建议编写自动化测试
2. 所有 MT 开头的用例需要人工测试
3. 所有 AT 开头的用例为可访问性测试（预留）
4. 发现 Bug 请记录在"Bug 汇总"模块
