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

# PisellContactBrief 组件测试用例文档

## 测试概览

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

---

## 一、基础渲染测试（PisellContactBrief）

| 测试项          | 测试步骤                                                                                     | 预期结果                                           | 测试类型 |
|--------------|------------------------------------------------------------------------------------------|------------------------------------------------|------|
| 根节点渲染        | 传入 name="张三"                                                                             | 存在 `.pisell-contact-brief-wrap` 且内含 EntityCard | 自动化  |
| 姓名渲染         | 传入 name="张三"                                                                             | 页面显示「张三」                                       | 自动化  |
| 电话渲染         | 传入 name、phone="+86 138 0000 0000"                                                        | 页面显示该电话（副标题区）                                  | 自动化  |
| 邮箱渲染         | 传入 name、email="a@b.com"                                                                  | 页面显示该邮箱（次级文案）                                  | 自动化  |
| 头像渲染         | 传入 avatar="https://..."                                                                  | EntityCard 媒体区显示头像                             | 自动化  |
| 无头像占位        | 不传 avatar，传 name                                                                         | 显示默认占位 Avatar                                  | 自动化  |
| 扩展字段渲染       | 传入 extraFields=[{ key: 'birthday', label: '生日' }]、extraData={{ birthday: '1990-01-01' }} | 次级区显示「1990-01-01」                              | 自动化  |
| className 透传 | 传入 className="custom"                                                                    | 根或 EntityCard 应用 custom                        | 自动化  |
| style 透传     | 传入 style                                                                                 | 样式应用到卡片                                        | 自动化  |

---

## 二、显隐与默认值测试

| 测试项                | 测试步骤                     | 预期结果         | 测试类型 |
|--------------------|--------------------------|--------------|------|
| showAvatar 默认 true | 传入 name，不传 showAvatar    | 显示媒体区（占位或头像） | 自动化  |
| showAvatar=false   | 传入 name、showAvatar=false | 不显示媒体区       | 自动化  |
| showPhone 默认 true  | 传入 phone，不传 showPhone    | 显示电话         | 自动化  |
| showPhone=false    | 传入 phone、showPhone=false | 不显示电话        | 自动化  |
| showEmail=false    | 传入 email、showEmail=false | 不显示邮箱        | 自动化  |

---

## 三、布局测试

| 测试项                  | 测试步骤                      | 预期结果             | 测试类型 |
|----------------------|---------------------------|------------------|------|
| layout 默认 horizontal | 不传 layout                 | EntityCard 为横向排布 | 自动化  |
| layout=vertical      | 传入 layout="vertical"      | EntityCard 为竖向排布 | 自动化  |
| primaryLineClamp     | 传入 primaryLineClamp={1}   | 主文案单行省略          | 自动化  |
| secondaryLineClamp   | 传入 secondaryLineClamp={2} | 次级最多 2 行         | 自动化  |

---

## 四、编辑弹窗测试

| 测试项                    | 测试步骤                                                | 预期结果                             | 测试类型 |
|------------------------|-----------------------------------------------------|----------------------------------|------|
| 编辑图标存在                 | 渲染卡片                                                | 存在编辑图标（如 EditOutlined 或对应 class） | 自动化  |
| 点击编辑打开弹窗               | 点击编辑图标                                              | Modal 出现，标题为编辑相关文案               | 自动化  |
| 弹窗表单含 name/phone/email | 打开编辑弹窗                                              | 表单项包含姓名、电话、邮箱                    | 自动化  |
| 弹窗含 extraFields 表单项    | extraFields=[{ key: 'birthday', label: '生日' }]，打开编辑 | 表单中有「生日」项                        | 自动化  |
| 提交回调 onSubmit          | 打开编辑、填写后保存，onSubmit 为 jest.fn()                     | onSubmit 被调用，参数含表单值              | 自动化  |
| 取消关闭弹窗                 | 打开编辑后点击取消                                           | 弹窗关闭                             | 自动化  |

---

## 五、左滑删除测试

| 测试项   | 测试步骤                           | 预期结果                    | 测试类型 |
|-------|--------------------------------|-------------------------|------|
| 未开启左滑 | 不传 swipeToDelete 或 false       | 无左滑删除层                  | 自动化  |
| 开启左滑  | swipeToDelete=true、onDelete 传入 | 存在左滑容器（由 EntityCard 提供） | 自动化  |

---

## 六、CreateButton 测试

| 测试项             | 测试步骤                                  | 预期结果                                 | 测试类型 |
|-----------------|---------------------------------------|--------------------------------------|------|
| CreateButton 渲染 | 渲染 PisellContactBrief.CreateButton    | 存在「Add Contact」或对应多语言文案、占位头像、plus 图标 | 自动化  |
| 点击打开新建弹窗        | 不传 onClick，点击 CreateButton            | 新建弹窗打开，标题为新建相关                       | 自动化  |
| 自定义 onClick     | 传入 onClick（jest.fn()），点击 CreateButton | onClick 被调用，不打开内置弹窗                  | 自动化  |
| 新建提交 onCreate   | 打开新建弹窗、填写后保存，onCreate 为 jest.fn()     | onCreate 被调用，参数含 name 等              | 自动化  |

---

## 七、BaseCard 透传与事件测试

| 测试项          | 测试步骤                          | 预期结果           | 测试类型 |
|--------------|-------------------------------|----------------|------|
| clickable 透传 | 传入 clickable=false            | 卡片不响应点击（或无点击态） | 自动化  |
| disabled 透传  | 传入 disabled=true              | 禁用态生效          | 自动化  |
| onClick 触发   | 传入 onClick（jest.fn()），点击卡片内容区 | onClick 被调用    | 自动化  |

---

## 八、人工测试点

| 测试项     | 测试步骤                       | 预期结果                      |
|---------|----------------------------|---------------------------|
| 横向布局视觉  | layout=horizontal，姓名+电话+邮箱 | 头像在左，文案在右，编辑图标在右端，间距合理    |
| 竖向布局视觉  | layout=vertical            | 头像在上、文案在下，居中对齐            |
| 无头像占位样式 | 不传 avatar                  | 占位圆形区域与设计稿一致              |
| 编辑弹窗样式  | 点击编辑                       | 弹窗标题、表单项、取消/保存按钮布局正确      |
| 新建弹窗样式  | 点击 CreateButton            | 弹窗标题为「新建联系人」类文案，表单为空      |
| 扩展字段在弹窗 | extraFields 含多字段，打开编辑      | 表单项顺序与 extraFields 一致     |
| 文本换行    | 宽度收窄，电话/邮箱较长               | 文本换行，与右侧保持约 8px 间距        |
| 左滑删除手势  | 移动端或模拟 touch，左滑卡片          | 露出删除按钮，点击触发 onDelete      |
| 多语言     | 切换语言后渲染                    | Add Contact、编辑、保存等文案随语言变化 |

---

## Bug 汇总

### 待修复的 Bug

| Bug ID | 描述 | 优先级 | 状态 | 发现时间 |
|--------|----|-----|----|------|
| -      | -  | -   | -  | -    |

### 已修复的 Bug

| Bug ID | 描述 | 优先级 | 修复时间 | 修复方案 |
|--------|----|-----|------|------|
| -      | -  | -   | -    | -    |
