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

# PisellActionPanel 组件测试用例文档

## 测试概览

本文档列出 PisellActionPanel 组件的测试用例点，基于 types.ts 与组件实现。

---

## 一、基础渲染测试

| 测试项 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 根节点渲染 | 传入一组一条 item | 存在 .pisell-action-panel-root | 自动化 |
| 单条操作渲染 | groups=[{ items: [{ label: '确定' }] }] | 页面显示「确定」按钮 | 自动化 |
| 多组渲染 | 传入两组，每组若干 item | 两组均渲染，顺序正确 | 自动化 |
| primary 样式 | item priority='primary' | 按钮为主按钮样式（type=primary） | 自动化 |
| danger 样式 | item priority='danger' | 按钮为危险样式（danger） | 自动化 |
| className 合并 | 传入 className="custom" | 根节点 class 包含 custom | 自动化 |
| style 透传 | 传入 style={{ padding: 16 }} | 根节点应用对应样式 | 自动化 |

---

## 二、显隐测试

| 测试项 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| item visible=false | 某条 item 设置 visible: false | 该条不渲染 | 自动化 |
| group visible=false | 某组设置 visible: false | 该组整组不渲染 | 自动化 |
| 整组 items 均不可见 | 组内所有 item visible: false | 该组不占位（过滤后组为空） | 自动化 |

---

## 三、布局与对齐测试

| 测试项 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| layout=horizontal | layout='horizontal' | 根节点含 layout-horizontal，组横向排 | 自动化 |
| layout=vertical | layout='vertical' | 根节点含 layout-vertical | 自动化 |
| align=right | align='right' | 根节点含 align-right，justify-content: flex-end | 自动化 |
| align=space-between | align='space-between' | 根节点含 align-space-between | 自动化 |

---

## 四、交互测试

| 测试项 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| 点击触发 onClick | item 配置 onClick 为 jest.fn()，点击该按钮 | onClick 被调用一次 | 自动化 |
| disabled 不触发 | item disabled: true，点击 | onClick 不触发 | 自动化 |

---

## 五、间距测试

| 测试项 | 测试步骤 | 预期结果 | 测试类型 |
|--------|---------|---------|---------|
| itemGap 生效 | 传入 itemGap={16} | Space size 为 16 | 自动化 |
| groupGap 生效 | 传入 groupGap={24} | 根节点 gap 为 24px | 自动化 |
