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

# PisellBasicGrid 测试用例文档

## 1. 布局功能测试

### 1.1 排列方向 (direction)

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-001 | horizontal（横向排列） | 设置 `direction="horizontal"`，添加多个子元素 | 子元素横向排列 | 自动化 |
| TC-002 | horizontal-reverse（横向反向） | 设置 `direction="horizontal-reverse"`，添加多个子元素 | 子元素横向反向排列 | 自动化 |
| TC-003 | vertical（竖向排列） | 设置 `direction="vertical"`，添加多个子元素 | 子元素竖向排列 | 自动化 |
| TC-004 | vertical-reverse（竖向反向） | 设置 `direction="vertical-reverse"`，添加多个子元素 | 子元素竖向反向排列 | 自动化 |
| TC-005 | 默认值 | 不设置 direction | 默认为 `horizontal` | 自动化 |

### 1.2 换行控制 (wrap)

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-006 | nowrap（不换行） | 设置 `wrap="nowrap"`，添加超出容器宽度的子元素 | 子元素不换行，可能溢出 | 自动化 |
| TC-007 | wrap（换行） | 设置 `wrap="wrap"`，添加超出容器宽度的子元素 | 子元素自动换行 | 自动化 |
| TC-008 | wrap-reverse（反向换行） | 设置 `wrap="wrap-reverse"`，添加超出容器宽度的子元素 | 子元素反向换行 | 自动化 |
| TC-009 | 默认值 | 不设置 wrap | 默认为 `nowrap` | 自动化 |

### 1.3 一行 N 个 (columns)

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-010 | columns=2 | 设置 `columns={2}`，添加多个子元素 | 每行显示 2 个元素 | 自动化 |
| TC-011 | columns=3 | 设置 `columns={3}`，添加多个子元素 | 每行显示 3 个元素 | 自动化 |
| TC-012 | columns=4 | 设置 `columns={4}`，添加多个子元素 | 每行显示 4 个元素 | 自动化 |
| TC-013 | columns + gap | 设置 `columns={3}` 和 `gap={16}` | 子元素宽度正确计算，考虑 gap 影响 | 自动化 |
| TC-014 | columns 与 equalWidth 优先级 | 同时设置 `columns={3}` 和 `equalWidth={true}` | columns 生效，equalWidth 被忽略 | 自动化 |

### 1.4 等分模式 (equalWidth)

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-015 | equalWidth=true | 设置 `equalWidth={true}`，添加多个子元素 | 子元素等分容器宽度 | 自动化 |
| TC-016 | equalWidth=false | 设置 `equalWidth={false}`，添加多个子元素 | 子元素自适应内容宽度 | 自动化 |
| TC-017 | 默认值 | 不设置 equalWidth | 默认为 `false` | 自动化 |

## 2. 间距功能测试

### 2.1 统一间距 (gap)

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-018 | gap 数字类型 | 设置 `gap={16}` | 行列间距均为 16px | 自动化 |
| TC-019 | gap 字符串类型 | 设置 `gap="1rem"` | 行列间距均为 1rem | 自动化 |
| TC-020 | gap=0 | 设置 `gap={0}` | 无间距 | 自动化 |

### 2.2 行间距 (rowGap)

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-021 | rowGap 单独设置 | 设置 `rowGap={20}`，不设置 gap | 行间距为 20px，列间距为 0 | 自动化 |
| TC-022 | rowGap 优先级 | 同时设置 `gap={16}` 和 `rowGap={20}` | 行间距为 20px，列间距为 16px | 自动化 |

### 2.3 列间距 (columnGap)

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-023 | columnGap 单独设置 | 设置 `columnGap={20}`，不设置 gap | 列间距为 20px，行间距为 0 | 自动化 |
| TC-024 | columnGap 优先级 | 同时设置 `gap={16}` 和 `columnGap={20}` | 列间距为 20px，行间距为 16px | 自动化 |

### 2.4 间距优先级

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-025 | rowGap/columnGap > gap | 同时设置 `gap={16}`、`rowGap={20}`、`columnGap={24}` | 行间距 20px，列间距 24px | 自动化 |

## 3. 对齐功能测试

### 3.1 主轴对齐 (justify)

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-026 | justify="start" | 设置 `justify="start"` | 子元素起始对齐 | 自动化 |
| TC-027 | justify="end" | 设置 `justify="end"` | 子元素末尾对齐 | 自动化 |
| TC-028 | justify="center" | 设置 `justify="center"` | 子元素居中对齐 | 自动化 |
| TC-029 | justify="between" | 设置 `justify="between"` | 子元素两端对齐 | 自动化 |
| TC-030 | justify="around" | 设置 `justify="around"` | 子元素等间距对齐 | 自动化 |
| TC-031 | justify="evenly" | 设置 `justify="evenly"` | 子元素均匀分布 | 自动化 |
| TC-032 | 默认值 | 不设置 justify | 默认为 `start` | 自动化 |

### 3.2 交叉轴对齐 (align)

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-033 | align="start" | 设置 `align="start"` | 子元素顶部对齐 | 自动化 |
| TC-034 | align="end" | 设置 `align="end"` | 子元素底部对齐 | 自动化 |
| TC-035 | align="center" | 设置 `align="center"` | 子元素居中对齐 | 自动化 |
| TC-036 | align="stretch" | 设置 `align="stretch"` | 子元素拉伸填充 | 自动化 |
| TC-037 | align="baseline" | 设置 `align="baseline"` | 子元素基线对齐 | 自动化 |
| TC-038 | 默认值 | 不设置 align | 默认为 `stretch` | 自动化 |

### 3.3 多行对齐 (alignContent)

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-039 | alignContent="start" | 设置 `alignContent="start"`，多行显示 | 行与行之间顶部对齐 | 自动化 |
| TC-040 | alignContent="end" | 设置 `alignContent="end"`，多行显示 | 行与行之间底部对齐 | 自动化 |
| TC-041 | alignContent="center" | 设置 `alignContent="center"`，多行显示 | 行与行之间居中对齐 | 自动化 |
| TC-042 | alignContent="between" | 设置 `alignContent="between"`，多行显示 | 行与行之间两端对齐 | 自动化 |
| TC-043 | alignContent="around" | 设置 `alignContent="around"`，多行显示 | 行与行之间等间距对齐 | 自动化 |
| TC-044 | alignContent="stretch" | 设置 `alignContent="stretch"`，多行显示 | 行与行之间拉伸填充 | 自动化 |
| TC-045 | 默认值 | 不设置 alignContent | 默认为 `stretch` | 自动化 |

## 4. 数据源渲染测试

### 4.1 dataSource 模式

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-046 | dataSource 正常渲染 | 传入 `dataSource={[...]}` 和 `renderItem` | 正确渲染所有数据项 | 自动化 |
| TC-047 | dataSource 为空数组 | 传入 `dataSource={[]}` | 不渲染任何内容 | 自动化 |
| TC-048 | dataSource 为 undefined | 传入 `dataSource={undefined}` | 渲染 children | 自动化 |
| TC-049 | dataSource 与 children 优先级 | 同时传入 `dataSource` 和 `children` | dataSource 生效，children 被忽略 | 自动化 |

### 4.2 renderItem 函数

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-050 | renderItem 正常渲染 | 传入 `renderItem={(item, index) => <div>{item.name}</div>}` | 每个数据项正确渲染 | 自动化 |
| TC-051 | renderItem 使用 index | 在 renderItem 中使用 index 参数 | index 值正确传递 | 自动化 |
| TC-052 | renderItem 返回 null | renderItem 返回 `null` | 该项不渲染（但占位） | 自动化 |
| TC-053 | renderItem 未定义 | 传入 dataSource 但未传入 renderItem | 不渲染任何内容 | 自动化 |

### 4.3 rowKey 功能

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-054 | rowKey 字符串 | 设置 `rowKey="id"`，数据项有 id 属性 | 使用 id 作为 key | 自动化 |
| TC-055 | rowKey 函数 | 设置 `rowKey={(item, index) => \`item-\${item.id}\`}` | 使用函数返回值作为 key | 自动化 |
| TC-056 | rowKey 未设置 | 不设置 rowKey | 使用 index 作为 key | 自动化 |
| TC-057 | rowKey 属性不存在 | 设置 `rowKey="id"`，但数据项没有 id | 使用 index 作为 key | 自动化 |

## 5. children 模式测试

### 5.1 基础渲染

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-058 | children 正常渲染 | 传入 children，不设置 dataSource | 正确渲染 children | 自动化 |
| TC-059 | children 为空 | 不传入 children，不设置 dataSource | 不渲染任何内容 | 自动化 |
| TC-060 | children 与 columns | 传入 children，设置 `columns={3}` | children 被包裹，应用 itemStyle | 自动化 |
| TC-061 | children 与 equalWidth | 传入 children，设置 `equalWidth={true}` | children 被包裹，应用 itemStyle | 自动化 |

## 6. 样式功能测试

### 6.1 className

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-062 | className 应用 | 设置 `className="custom-class"` | 容器元素有 custom-class 类名 | 自动化 |
| TC-063 | className 与默认类名 | 设置 `className="custom-class"` | 同时有默认类名和自定义类名 | 自动化 |

### 6.2 style

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-064 | style 应用 | 设置 `style={{ backgroundColor: 'red' }}` | 容器元素有红色背景 | 自动化 |
| TC-065 | style 与计算样式合并 | 设置 style，同时设置布局属性 | style 与计算样式正确合并 | 自动化 |
| TC-066 | style 优先级 | 设置 style 中的 flexDirection，同时设置 direction | style 优先级更高 | 人工测试 |

## 7. 边界情况测试

### 7.1 数据边界

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-067 | columns=1 | 设置 `columns={1}` | 每行显示 1 个元素 | 自动化 |
| TC-068 | columns 很大 | 设置 `columns={100}` | 子元素宽度很小 | 自动化 |
| TC-069 | gap 负数 | 设置 `gap={-10}` | 间距为 -10px（虽然不合理但应能处理） | 自动化 |
| TC-070 | 大量数据 | dataSource 包含 1000+ 条数据 | 能正常渲染，性能可接受 | 人工测试 |

### 7.2 组合场景

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-071 | 完整配置 | 同时设置所有布局属性 | 所有属性正确生效 | 人工测试 |
| TC-072 | 响应式场景 | 在不同屏幕尺寸下测试 | 布局正确（响应式功能预留） | 人工测试 |

## 8. 性能测试

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-073 | 大量数据渲染 | dataSource 包含 1000 条数据 | 渲染时间 < 1s | 人工测试 |
| TC-074 | 频繁更新 | 快速切换 props | 无明显卡顿 | 人工测试 |
| TC-075 | 内存泄漏 | 长时间运行，频繁创建销毁组件 | 无内存泄漏 | 人工测试 |

## 9. 兼容性测试

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-076 | Chrome 浏览器 | 在 Chrome 中测试所有功能 | 功能正常 | 人工测试 |
| TC-077 | Firefox 浏览器 | 在 Firefox 中测试所有功能 | 功能正常 | 人工测试 |
| TC-078 | Safari 浏览器 | 在 Safari 中测试所有功能 | 功能正常 | 人工测试 |
| TC-079 | Edge 浏览器 | 在 Edge 中测试所有功能 | 功能正常 | 人工测试 |
| TC-080 | 移动端浏览器 | 在移动端浏览器中测试 | 功能正常 | 人工测试 |

## 10. 低代码平台测试

| 用例编号 | 测试项 | 测试步骤 | 预期结果 | 测试类型 |
| -------- | ------ | -------- | -------- | -------- |
| TC-081 | 组件面板显示 | 在低代码平台中查看组件面板 | 组件正确显示 | 人工测试 |
| TC-082 | 属性配置 | 在低代码平台中配置组件属性 | 属性正确生效 | 人工测试 |
| TC-083 | 数据源配置 | 在低代码平台中配置 dataSource | 数据源正确绑定 | 人工测试 |
| TC-084 | 渲染插槽配置 | 在低代码平台中配置 renderItem 插槽 | 插槽正确渲染 | 人工测试 |

## 11. 测试统计

| 测试类型 | 用例数量 | 已完成 | 未完成 |
| -------- | -------- | ------ | ------ |
| 自动化测试 | 65 | 0 | 65 |
| 人工测试 | 19 | 0 | 19 |
| **总计** | **84** | **0** | **84** |

## 12. Bug 汇总

### 12.1 待修复 Bug

| Bug 编号 | 发现时间 | 发现人 | 严重程度 | Bug 描述 | 复现步骤 | 预期结果 | 实际结果 | 状态 |
| -------- | -------- | ------ | -------- | -------- | -------- | -------- | -------- | ---- |
| - | - | - | - | - | - | - | - | - |

### 12.2 已修复 Bug

| Bug 编号 | 发现时间 | 修复时间 | 修复人 | Bug 描述 | 修复方案 | 状态 |
| -------- | -------- | -------- | ------ | -------- | -------- | ---- |
| - | - | - | - | - | - | - |

---

**说明**：
- 自动化测试：可通过单元测试自动执行的测试用例
- 人工测试：需要人工验证的测试用例
- Bug 严重程度：P0（阻塞）、P1（严重）、P2（一般）、P3（轻微）
