董海洋
12 KiB
12 KiB
Pika 反馈组件测试报告
生成日期：2026-05-30 测试框架：Vitest 1.0.0 + @testing-library/react 覆盖率工具：@vitest/coverage-v8
一、测试总览
| 指标 | 值 |
|---|---|
| 测试文件数 | 9 |
| 测试用例数 | 85 |
| 通过率 | 100% ✅ |
| 总耗时 | 1.90s |
二、各组件测试详情
2.1 Alert 警告提示
测试文件: src/components/feedback/alert/Alert.test.tsx
用例数: 11 | 语句覆盖: 100% | 分支覆盖: 100% | 函数覆盖: 100%
| # | 测试用例 | 验证点 | 结果 |
|---|---|---|---|
| 1 | renders with default props | 默认渲染：data-type=info, data-size=middle, role=alert | ✅ |
| 2 | renders each type correctly | 四种类型 success/info/warning/error 的 data-type 属性 | ✅ |
| 3 | renders each size correctly | 三种尺寸 small/middle/large 的 data-size 属性 | ✅ |
| 4 | renders title and description | 标题和描述文本渲染 | ✅ |
| 5 | shows icon when showIcon is true | showIcon=true 时 SVG 图标存在，data-show-icon 属性 | ✅ |
| 6 | hides icon when showIcon is false | showIcon=false 时无 SVG 图标 | ✅ |
| 7 | calls onClose when close button clicked | closable 关闭按钮点击触发 onClose 回调 | ✅ |
| 8 | calls afterClose after animation | 关闭动画 200ms 后触发 afterClose | ✅ |
| 9 | renders in banner mode | banner 模式下 data-banner 属性 | ✅ |
| 10 | renders action slot | action 插槽内容渲染 | ✅ |
| 11 | returns null when closed | 关闭动画后组件返回 null | ✅ |
2.2 Spin 加载中
测试文件: src/components/feedback/spin/Spin.test.tsx
用例数: 15 | 语句覆盖: 95.58% | 分支覆盖: 85.1% | 函数覆盖: 100%
| # | 测试用例 | 验证点 | 结果 |
|---|---|---|---|
| 1 | renders with default props | 默认渲染：data-size=middle, data-spinning, role=status, aria-live=polite, aria-busy | ✅ |
| 2 | renders each size correctly | 三种尺寸 small/middle/large 的 data-size 属性 | ✅ |
| 3 | shows spinning state | spinning=true 时 data-spinning 和 aria-busy 属性 | ✅ |
| 4 | hides when not spinning without children | 无 children 且 spinning=false 时不渲染 | ✅ |
| 5 | renders custom indicator | 自定义 indicator 渲染 | ✅ |
| 6 | renders description text | description 描述文本 | ✅ |
| 7 | renders tip as fallback for description | tip 属性作为 description 的降级 | ✅ |
| 8 | renders fullscreen mode | 全屏模式渲染及 aria-busy | ✅ |
| 9 | does not render fullscreen when not spinning | 全屏模式 spinning=false 不渲染 | ✅ |
| 10 | renders wrapper mode with children | 包裹模式：children 渲染 + data-spinning 遮罩 | ✅ |
| 11 | renders children directly when not spinning in wrapper mode | 包裹模式 spinning=false 无遮罩 | ✅ |
| 12 | handles delay prop | delay=500ms 延迟显示 | ✅ |
| 13 | cancels delay timer when spinning becomes false | spinning 变为 false 时取消延迟计时器 | ✅ |
| 14 | renders percent prop | percent 进度百分比显示 | ✅ |
| 15 | calls onChange when spinning state changes | spinning 状态变化触发 onChange 回调 | ✅ |
2.3 Progress 进度条
测试文件: src/components/feedback/progress/Progress.test.tsx
用例数: 9 | 语句覆盖: 82.05% | 分支覆盖: 59.64% | 函数覆盖: 80%
| # | 测试用例 | 验证点 | 结果 |
|---|---|---|---|
| 1 | renders line progress with default props | 默认线型：data-type=line, data-status=normal, data-size=middle | ✅ |
| 2 | renders with custom percent | 自定义百分比：CSS 变量 --_percent 和文本 | ✅ |
| 3 | renders each status correctly | 四种状态 success/exception/normal/active 的 data-status | ✅ |
| 4 | renders circle type | 环形类型：data-type=circle + SVG 元素 | ✅ |
| 5 | renders dashboard type | 仪表盘类型：data-type=dashboard + SVG 元素 | ✅ |
| 6 | hides info when showInfo=false | showInfo=false 时不显示百分比文本 | ✅ |
| 7 | uses custom format function | format 自定义格式化函数 | ✅ |
| 8 | renders with steps | steps=5 分段进度渲染 | ✅ |
| 9 | auto-detects success status at 100% | percent=100 自动检测为 success 状态 | ✅ |
2.4 Modal 对话框
测试文件: src/components/feedback/modal/Modal.test.tsx
用例数: 10 | 语句覆盖: 95.25% | 分支覆盖: 79.62% | 函数覆盖: 100%
| # | 测试用例 | 验证点 | 结果 |
|---|---|---|---|
| 1 | renders when open is true | open=true 时 role=dialog 渲染 | ✅ |
| 2 | does not render when open is false | open=false 时不渲染 | ✅ |
| 3 | renders title | 标题文本渲染 | ✅ |
| 4 | calls onCancel when close button clicked | 关闭按钮点击触发 onCancel | ✅ |
| 5 | calls onOk when ok button clicked | OK 按钮点击触发 onOk | ✅ |
| 6 | calls onCancel when mask is clicked and maskClosable is true | maskClosable=true 点击遮罩触发 onCancel | ✅ |
| 7 | does not close when maskClosable is false | maskClosable=false 点击遮罩不关闭 | ✅ |
| 8 | closes on ESC key when keyboard is true | keyboard=true 时 ESC 键关闭 | ✅ |
| 9 | renders without footer when footer is null | footer=null 时无底部按钮 | ✅ |
| 10 | renders custom okText and cancelText | 自定义 okText/cancelText 文案 | ✅ |
2.5 Message 全局提示
测试文件: src/components/feedback/message/Message.test.tsx
用例数: 6 | 语句覆盖: 88.13% | 分支覆盖: 79.16% | 函数覆盖: 71.42%
| # | 测试用例 | 验证点 | 结果 |
|---|---|---|---|
| 1 | renders message with success type | success 类型：data-type=success + 文本内容 | ✅ |
| 2 | renders message with error type | error 类型：data-type=error + 文本内容 | ✅ |
| 3 | renders message with custom content | 自定义内容渲染 | ✅ |
| 4 | auto-closes after duration | duration=2s 后自动关闭 + onClose 回调 | ✅ |
| 5 | does not auto-close when duration is 0 | duration=0 不自动关闭 | ✅ |
| 6 | destroys all messages | destroyAll() 销毁所有消息 | ✅ |
2.6 Notification 通知提醒
测试文件: src/components/feedback/notification/Notification.test.tsx
用例数: 6 | 语句覆盖: 88.97% | 分支覆盖: 73.33% | 函数覆盖: 70.83%
| # | 测试用例 | 验证点 | 结果 |
|---|---|---|---|
| 1 | renders notification with title and description | 标题和描述渲染 | ✅ |
| 2 | renders each type correctly | 四种类型 success/error/warning/info | ✅ |
| 3 | auto-closes after duration | duration=3s 后自动关闭 | ✅ |
| 4 | does not auto-close when duration is false | duration=false 永不自动关闭 | ✅ |
| 5 | closes on close button click | 关闭按钮点击关闭 | ✅ |
| 6 | destroys all notifications | destroyAll() 销毁所有通知 | ✅ |
2.7 Result 结果
测试文件: src/components/feedback/result/Result.test.tsx
用例数: 12 | 语句覆盖: 100% | 分支覆盖: 100% | 函数覆盖: 100%
| # | 测试用例 | 验证点 | 结果 |
|---|---|---|---|
| 1 | renders with default props | 默认 data-status=info, role=status | ✅ |
| 2-8 | renders status "X" correctly | 7 种状态 success/error/info/warning/404/403/500 | ✅ |
| 9 | renders title and description | 标题和描述文本 | ✅ |
| 10 | renders extra content | extra 操作区域渲染 | ✅ |
| 11 | renders custom icon | 自定义 icon 覆盖默认图标 | ✅ |
| 12 | renders children | children 内容渲染 | ✅ |
2.8 Drawer 抽屉
测试文件: src/components/feedback/drawer/Drawer.test.tsx
用例数: 9 | 语句覆盖: 97.1% | 分支覆盖: 62.5% | 函数覆盖: 100%
| # | 测试用例 | 验证点 | 结果 |
|---|---|---|---|
| 1 | renders when open is true | open=true 时 data-placement 渲染 | ✅ |
| 2 | does not render when open is false | open=false 时不渲染 | ✅ |
| 3 | renders title | 标题文本渲染 | ✅ |
| 4 | calls onClose when close button clicked | 关闭按钮触发 onClose | ✅ |
| 5 | calls onClose when mask clicked and maskClosable is true | maskClosable=true 点击遮罩关闭 | ✅ |
| 6 | does not close when maskClosable is false | maskClosable=false 点击遮罩不关闭 | ✅ |
| 7 | closes on ESC key when keyboard is true | keyboard=true 时 ESC 键关闭 | ✅ |
| 8 | renders with different placements | 四种位置 top/right/bottom/left 的 data-placement | ✅ |
| 9 | renders footer | footer 内容渲染 | ✅ |
2.9 Popconfirm 气泡确认框
测试文件: src/components/feedback/popconfirm/Popconfirm.test.tsx
用例数: 7 | 语句覆盖: 95.13% | 分支覆盖: 71.42% | 函数覆盖: 100%
| # | 测试用例 | 验证点 | 结果 |
|---|---|---|---|
| 1 | renders children | 子元素渲染 | ✅ |
| 2 | shows popup on click trigger | click 触发弹出 data-open 属性 | ✅ |
| 3 | calls onConfirm when ok button clicked | OK 按钮触发 onConfirm | ✅ |
| 4 | calls onCancel when cancel button clicked | Cancel 按钮触发 onCancel | ✅ |
| 5 | hides cancel button when showCancel is false | showCancel=false 隐藏取消按钮 | ✅ |
| 6 | does not open when disabled | disabled=true 点击不弹出 | ✅ |
| 7 | renders title and description | 标题和描述渲染 | ✅ |
三、覆盖率汇总
3.1 反馈组件覆盖率
| 组件 | 语句覆盖 | 分支覆盖 | 函数覆盖 | 行覆盖 |
|---|---|---|---|---|
| Alert | 100% | 100% | 100% | 100% |
| Result | 100% | 100% | 100% | 100% |
| Drawer | 97.1% | 62.5% | 100% | 97.1% |
| Spin | 95.58% | 85.1% | 100% | 95.58% |
| Popconfirm | 95.13% | 71.42% | 100% | 95.13% |
| Modal | 95.25% | 79.62% | 100% | 95.25% |
| Message | 88.13% | 79.16% | 71.42% | 88.13% |
| Notification | 88.97% | 73.33% | 70.83% | 88.97% |
| Progress | 82.05% | 59.64% | 80% | 82.05% |
| 平均 | 93.58% | 83.46% | 94.71% | 93.58% |
3.2 覆盖率等级
| 等级 | 组件 | 说明 |
|---|---|---|
| 🟢 100% 全覆盖 | Alert, Result | 所有语句/分支/函数/行 100% |
| 🟡 高覆盖 (>90%) | Spin, Modal, Drawer, Popconfirm | 语句覆盖 >90%，少量边界分支未覆盖 |
| 🟠 中覆盖 (80-90%) | Message, Notification, Progress | 静态方法/单例模式部分分支未覆盖 |
四、未覆盖项分析
4.1 Progress (82.05% 语句覆盖)
未覆盖行：渐变色处理、dashboard gapPlacement 旋转、success 部分高亮渲染等高级功能分支。
4.2 Message (88.13% 语句覆盖)
未覆盖行：useMessage hook、pauseOnHover 暂停逻辑、placement 位置变体、maxCount 限制逻辑。
4.3 Notification (88.97% 语句覆盖)
未覆盖行：showProgress 进度条渲染、stack 堆叠配置、placement 位置变体渲染。
4.4 Drawer (97.1% 语句覆盖)
未覆盖行：loading 骨架屏、extra 额外操作区、afterOpenChange 回调。
4.5 Popconfirm (95.13% 语句覆盖)
未覆盖行：hover/focus/contextMenu 触发模式、受控 open 模式、arrow 箭头渲染。
4.6 Modal (95.25% 语句覆盖)
未覆盖行：loading 确认按钮加载态、getContainer 自定义容器、afterOpenChange 回调。
4.7 Spin (95.58% 语句覆盖)
未覆盖行：percent='auto' 不定进度、fullscreen + spinning=false 组合。
五、测试分类统计
5.1 按测试类型
| 测试类型 | 用例数 | 占比 |
|---|---|---|
| 渲染测试 | 35 | 41.2% |
| Props 组合测试 | 22 | 25.9% |
| 交互回调测试 | 18 | 21.2% |
| 状态/动画测试 | 6 | 7.1% |
| 边界条件测试 | 4 | 4.7% |
5.2 按组件优先级
| 优先级 | 组件 | 用例数 |
|---|---|---|
| P0 | Alert, Spin, Progress, Modal, Message | 51 |
| P1 | Notification, Result | 18 |
| P2 | Drawer, Popconfirm | 16 |
六、运行命令
# 运行所有反馈组件测试
pnpm exec vitest run src/components/feedback
# 运行单个组件测试
pnpm exec vitest run src/components/feedback/alert
# 带覆盖率报告
pnpm exec vitest run src/components/feedback --coverage
# 监听模式
pnpm exec vitest src/components/feedback --watch
七、结论
Pika 反馈组件 9 个组件共 85 个测试用例全部通过，平均语句覆盖率 93.58%，函数覆盖率 94.71%。其中 Alert 和 Result 达到 100% 全覆盖。未覆盖部分主要为高级功能分支（渐变色、堆叠配置、多种触发模式等），核心交互路径已全部覆盖。