董海洋
418 lines
13 KiB
Markdown
418 lines
13 KiB
Markdown
# Pika 组件库测试报告
|
||
|
||
> 生成时间：2026-05-30
|
||
> 测试框架：Vitest + @testing-library/react
|
||
> 覆盖率工具：@vitest/coverage-v8
|
||
|
||
---
|
||
|
||
## 一、总体概览
|
||
|
||
| 指标 | 值 |
|
||
|------|-----|
|
||
| 测试文件数 | 63 |
|
||
| 测试用例数 | 800 |
|
||
| 通过率 | **100%** |
|
||
| 语句覆盖率 (Stmts) | 82.42% |
|
||
| 分支覆盖率 (Branch) | 76.74% |
|
||
| 函数覆盖率 (Funcs) | 58.61% |
|
||
| 行覆盖率 (Lines) | 82.42% |
|
||
|
||
---
|
||
|
||
## 二、本次新增组件测试详情
|
||
|
||
### 2.1 Affix 固钉
|
||
|
||
| 指标 | 值 |
|
||
|------|-----|
|
||
| 测试文件 | `src/components/common/Affix/Affix.test.tsx` |
|
||
| 测试用例数 | 12 |
|
||
| 语句覆盖率 | 93.10% |
|
||
| 分支覆盖率 | 81.81% |
|
||
| 函数覆盖率 | 100% |
|
||
| 未覆盖行 | 51-55, 64-68 |
|
||
|
||
**测试用例清单：**
|
||
|
||
| # | 用例名 | 状态 |
|
||
|---|--------|------|
|
||
| 1 | renders with default props | ✅ |
|
||
| 2 | renders with offsetTop | ✅ |
|
||
| 3 | renders with offsetBottom | ✅ |
|
||
| 4 | does not affix without offset | ✅ |
|
||
| 5 | applies data-affixed attribute when affixed | ✅ |
|
||
| 6 | applies data-position attribute | ✅ |
|
||
| 7 | renders placeholder when affixed | ✅ |
|
||
| 8 | calls onChange when affix state changes | ✅ |
|
||
| 9 | offsetTop takes priority over offsetBottom | ✅ |
|
||
| 10 | applies data-position bottom for offsetBottom | ✅ |
|
||
| 11 | applies custom className and style | ✅ |
|
||
| 12 | uses custom getContainer for scroll listener | ✅ |
|
||
|
||
---
|
||
|
||
### 2.2 Anchor 锚点
|
||
|
||
| 指标 | 值 |
|
||
|------|-----|
|
||
| 测试文件 | `src/components/common/Anchor/Anchor.test.tsx` |
|
||
| 测试用例数 | 10 |
|
||
| 语句覆盖率 | 84.69% |
|
||
| 分支覆盖率 | 84.37% |
|
||
| 函数覆盖率 | 80% |
|
||
| 未覆盖行 | 183-202, 230-233 |
|
||
|
||
**测试用例清单：**
|
||
|
||
| # | 用例名 | 状态 |
|
||
|---|--------|------|
|
||
| 1 | renders with default props | ✅ |
|
||
| 2 | renders multiple Anchor.Link items | ✅ |
|
||
| 3 | handles click events | ✅ |
|
||
| 4 | supports direction prop | ✅ |
|
||
| 5 | marks active link with data-active | ✅ |
|
||
| 6 | renders nested Anchor.Link items | ✅ |
|
||
| 7 | calls onChange when active link changes | ✅ |
|
||
| 8 | updates URL hash when hash prop is true | ✅ |
|
||
| 9 | renders ink indicator element | ✅ |
|
||
| 10 | applies custom className and style | ✅ |
|
||
|
||
---
|
||
|
||
### 2.3 App 包裹组件
|
||
|
||
| 指标 | 值 |
|
||
|------|-----|
|
||
| 测试文件 | `src/components/common/App/App.test.tsx` |
|
||
| 测试用例数 | 8 |
|
||
| 语句覆盖率 | 100% |
|
||
| 分支覆盖率 | 100% |
|
||
| 函数覆盖率 | 50% |
|
||
| 未覆盖行 | — |
|
||
|
||
**测试用例清单：**
|
||
|
||
| # | 用例名 | 状态 |
|
||
|---|--------|------|
|
||
| 1 | renders children | ✅ |
|
||
| 2 | provides context via useApp | ✅ |
|
||
| 3 | provides message static methods | ✅ |
|
||
| 4 | provides modal static methods | ✅ |
|
||
| 5 | provides notification static methods | ✅ |
|
||
| 6 | throws when useApp is used outside App | ✅ |
|
||
| 7 | exposes useApp as a static method on App | ✅ |
|
||
| 8 | renders wrapper div | ✅ |
|
||
|
||
> 函数覆盖率 50% 是因为 message/modal/notification 的静态方法目前为 no-op 占位，待后续实际组件实现后补充。
|
||
|
||
---
|
||
|
||
### 2.4 ConfigProvider 全局配置
|
||
|
||
| 指标 | 值 |
|
||
|------|-----|
|
||
| 测试文件 | `src/components/common/ConfigProvider/ConfigProvider.test.tsx` |
|
||
| 测试用例数 | 12 |
|
||
| 语句覆盖率 | **100%** |
|
||
| 分支覆盖率 | **100%** |
|
||
| 函数覆盖率 | **100%** |
|
||
| 未覆盖行 | — |
|
||
|
||
**测试用例清单：**
|
||
|
||
| # | 用例名 | 状态 |
|
||
|---|--------|------|
|
||
| 1 | renders children | ✅ |
|
||
| 2 | applies dark theme data attribute (string algorithm) | ✅ |
|
||
| 3 | applies dark theme data attribute (array algorithm) | ✅ |
|
||
| 4 | does not set data-theme for default algorithm | ✅ |
|
||
| 5 | applies custom primary color CSS variable | ✅ |
|
||
| 6 | applies theme token as CSS variables | ✅ |
|
||
| 7 | preserves --nv- prefix in token keys | ✅ |
|
||
| 8 | provides config via useConfig hook | ✅ |
|
||
| 9 | provides default context values | ✅ |
|
||
| 10 | passes locale and zIndex through context | ✅ |
|
||
| 11 | does not set style when no CSS variables needed | ✅ |
|
||
| 12 | passes getPopupContainer through context | ✅ |
|
||
|
||
---
|
||
|
||
### 2.5 BackTop 回到顶部
|
||
|
||
| 指标 | 值 |
|
||
|------|-----|
|
||
| 测试文件 | `src/components/common/BackTop/BackTop.test.tsx` |
|
||
| 测试用例数 | 10 |
|
||
| 语句覆盖率 | 98.03% |
|
||
| 分支覆盖率 | 93.75% |
|
||
| 函数覆盖率 | 100% |
|
||
| 未覆盖行 | 72-73 |
|
||
|
||
**测试用例清单：**
|
||
|
||
| # | 用例名 | 状态 |
|
||
|---|--------|------|
|
||
| 1 | renders with default props | ✅ |
|
||
| 2 | is hidden by default (no data-visible) | ✅ |
|
||
| 3 | becomes visible after scroll exceeds visibilityHeight | ✅ |
|
||
| 4 | remains hidden when scroll is below threshold | ✅ |
|
||
| 5 | fires onClick when clicked | ✅ |
|
||
| 6 | calls window.scrollTo to scroll to top | ✅ |
|
||
| 7 | renders custom children | ✅ |
|
||
| 8 | applies custom className and style | ✅ |
|
||
| 9 | uses custom target container | ✅ |
|
||
| 10 | removes scroll listener on unmount | ✅ |
|
||
|
||
---
|
||
|
||
### 2.6 Watermark 水印
|
||
|
||
| 指标 | 值 |
|
||
|------|-----|
|
||
| 测试文件 | `src/components/common/Watermark/Watermark.test.tsx` |
|
||
| 测试用例数 | 8 |
|
||
| 语句覆盖率 | 73.42% |
|
||
| 分支覆盖率 | 90.62% |
|
||
| 函数覆盖率 | 66.66% |
|
||
| 未覆盖行 | 179, 245-257, 262 |
|
||
|
||
**测试用例清单：**
|
||
|
||
| # | 用例名 | 状态 |
|
||
|---|--------|------|
|
||
| 1 | renders children | ✅ |
|
||
| 2 | renders with text content | ✅ |
|
||
| 3 | renders with multiple content lines | ✅ |
|
||
| 4 | applies custom font settings | ✅ |
|
||
| 5 | applies custom zIndex | ✅ |
|
||
| 6 | renders without content or image | ✅ |
|
||
| 7 | applies custom gap and offset | ✅ |
|
||
| 8 | applies custom rotate | ✅ |
|
||
|
||
> 覆盖率较低是因为图片水印的异步加载逻辑在 jsdom 中难以完全模拟。
|
||
|
||
---
|
||
|
||
### 2.7 Drawer 抽屉
|
||
|
||
| 指标 | 值 |
|
||
|------|-----|
|
||
| 测试文件 | `src/components/feedback/drawer/Drawer.test.tsx` |
|
||
| 测试用例数 | 9 |
|
||
| 语句覆盖率 | 97.10% |
|
||
| 分支覆盖率 | 62.50% |
|
||
| 函数覆盖率 | 100% |
|
||
| 未覆盖行 | 67-69, 107-108 |
|
||
|
||
**测试用例清单：**
|
||
|
||
| # | 用例名 | 状态 |
|
||
|---|--------|------|
|
||
| 1 | renders when open is true | ✅ |
|
||
| 2 | does not render when open is false | ✅ |
|
||
| 3 | renders title | ✅ |
|
||
| 4 | calls onClose when close button clicked | ✅ |
|
||
| 5 | calls onClose when mask clicked and maskClosable is true | ✅ |
|
||
| 6 | does not close when maskClosable is false | ✅ |
|
||
| 7 | closes on ESC key when keyboard is true | ✅ |
|
||
| 8 | renders with different placements | ✅ |
|
||
| 9 | renders footer | ✅ |
|
||
|
||
---
|
||
|
||
### 2.8 List 列表
|
||
|
||
| 指标 | 值 |
|
||
|------|-----|
|
||
| 测试文件 | `src/components/data-display/list/List.test.tsx` |
|
||
| 测试用例数 | 15 |
|
||
| 语句覆盖率 | 95.98% |
|
||
| 分支覆盖率 | 91.42% |
|
||
| 函数覆盖率 | 100% |
|
||
| 未覆盖行 | 194-203 |
|
||
|
||
**测试用例清单：**
|
||
|
||
| # | 用例名 | 状态 |
|
||
|---|--------|------|
|
||
| 1 | renders with default props | ✅ |
|
||
| 2 | renders data items via renderItem | ✅ |
|
||
| 3 | renders children directly | ✅ |
|
||
| 4 | supports size prop | ✅ |
|
||
| 5 | supports bordered prop | ✅ |
|
||
| 6 | renders header and footer | ✅ |
|
||
| 7 | renders empty state when data is empty | ✅ |
|
||
| 8 | renders custom empty content | ✅ |
|
||
| 9 | renders loading state | ✅ |
|
||
| 10 | renders grid mode | ✅ |
|
||
| 11 | renders ListItem with extra | ✅ |
|
||
| 12 | renders ListItem with actions | ✅ |
|
||
| 13 | passes context from List to ListItem | ✅ |
|
||
| 14 | renders ListItemMeta with avatar, title, description | ✅ |
|
||
| 15 | applies data-size attribute | ✅ |
|
||
|
||
---
|
||
|
||
## 三、全量组件覆盖率汇总
|
||
|
||
### 3.1 通用组件 (common)
|
||
|
||
| 组件 | Stmts | Branch | Funcs | Lines |
|
||
|------|-------|--------|-------|-------|
|
||
| Affix | 93.10% | 81.81% | 100% | 93.10% |
|
||
| Anchor | 84.69% | 84.37% | 80% | 84.69% |
|
||
| App | 100% | 100% | 50% | 100% |
|
||
| BackTop | 98.03% | 93.75% | 100% | 98.03% |
|
||
| Button | 84.12% | 73.23% | 81.81% | 84.12% |
|
||
| ConfigProvider | 100% | 100% | 100% | 100% |
|
||
| FloatButton | 50.07% | 48.83% | 30% | 50.07% |
|
||
| Icon | 48.33% | 68.42% | 53.84% | 48.33% |
|
||
| Typography | 67.09% | 55% | 58.82% | 67.09% |
|
||
| Watermark | 73.42% | 90.62% | 66.66% | 73.42% |
|
||
|
||
### 3.2 数据展示组件 (data-display)
|
||
|
||
| 组件 | Stmts | Branch | Funcs | Lines |
|
||
|------|-------|--------|-------|-------|
|
||
| Avatar | 93.28% | 43.75% | 100% | 93.28% |
|
||
| Badge | 98.85% | 76.47% | 100% | 98.85% |
|
||
| Calendar | 97.59% | 80.61% | 82.35% | 97.59% |
|
||
| Card | 99.70% | 82.35% | 100% | 99.70% |
|
||
| Carousel | 88.19% | 64.51% | 66.66% | 88.19% |
|
||
| Collapse | 98.10% | 83.33% | 66.66% | 98.10% |
|
||
| Descriptions | 98.20% | 87.87% | 100% | 98.20% |
|
||
| Empty | 100% | 80% | 100% | 100% |
|
||
| Image | 87.95% | 80.35% | 50% | 87.95% |
|
||
| List | 95.98% | 91.42% | 100% | 95.98% |
|
||
| Popover | 91.39% | 82.95% | 31.25% | 91.39% |
|
||
| QRCode | 94.27% | 97.14% | 100% | 94.27% |
|
||
| Segmented | 98.04% | 83.33% | 100% | 98.04% |
|
||
| Statistic | 99.71% | 76.19% | 100% | 99.71% |
|
||
| Table | 87.99% | 59.44% | 76% | 87.99% |
|
||
| Tag | 98.75% | 85.18% | 100% | 98.75% |
|
||
| Timeline | 100% | 93.75% | 100% | 100% |
|
||
| Tooltip | 91.10% | 81.92% | 31.25% | 91.10% |
|
||
| Tour | 84.29% | 84.61% | 35% | 84.29% |
|
||
| Tree | 85.61% | 79.61% | 64% | 85.61% |
|
||
|
||
### 3.3 数据录入组件 (data-entry)
|
||
|
||
| 组件 | Stmts | Branch | Funcs | Lines |
|
||
|------|-------|--------|-------|-------|
|
||
| AutoComplete | 67.41% | 66.66% | 60% | 67.41% |
|
||
| Cascader | 68.53% | 77.27% | 37.5% | 68.53% |
|
||
| Checkbox | 98.61% | 80% | 100% | 98.61% |
|
||
| DatePicker | 56.06% | 33.33% | 8.33% | 56.06% |
|
||
| Form | 72.23% | 71.87% | 35% | 72.23% |
|
||
| Input | 71.07% | 52.63% | 0% | 71.07% |
|
||
| InputNumber | 78.91% | 47.36% | 66.66% | 78.91% |
|
||
| Mention | 64.57% | 72% | 100% | 64.57% |
|
||
| Radio | 100% | 92.85% | 100% | 100% |
|
||
| RangePicker | 0% | 0% | 0% | 0% |
|
||
| Rate | 87.70% | 56.52% | 71.42% | 87.70% |
|
||
| Select | 54.62% | 35.71% | 12.5% | 54.62% |
|
||
| Slider | 89.41% | 75.86% | 80% | 89.41% |
|
||
| Switch | 92.66% | 66.66% | 0% | 92.66% |
|
||
| TextArea | 89.71% | 50% | 100% | 89.71% |
|
||
| TimePicker | 55.13% | 45.45% | 12.5% | 55.13% |
|
||
| Transfer | 73.99% | 84.21% | 36.36% | 73.99% |
|
||
| TreeSelect | 62.05% | 91.42% | 37.5% | 62.05% |
|
||
| Upload | 58.05% | 88.23% | 17.64% | 58.05% |
|
||
|
||
### 3.4 反馈组件 (feedback)
|
||
|
||
| 组件 | Stmts | Branch | Funcs | Lines |
|
||
|------|-------|--------|-------|-------|
|
||
| Alert | 100% | 100% | 100% | 100% |
|
||
| Drawer | 97.10% | 62.50% | 100% | 97.10% |
|
||
| Message | 88.13% | 79.16% | 71.42% | 88.13% |
|
||
| Modal | 95.25% | 79.62% | 100% | 95.25% |
|
||
| Notification | 88.97% | 73.33% | 70.83% | 88.97% |
|
||
| Popconfirm | 95.13% | 71.42% | 100% | 95.13% |
|
||
| Progress | 82.05% | 59.64% | 80% | 82.05% |
|
||
| Result | 100% | 100% | 100% | 100% |
|
||
| Spin | 95.58% | 85.10% | 100% | 95.58% |
|
||
|
||
### 3.5 布局组件 (layout)
|
||
|
||
| 组件 | Stmts | Branch | Funcs | Lines |
|
||
|------|-------|--------|-------|-------|
|
||
| Layout | 100% | 80% | 50% | 100% |
|
||
|
||
### 3.6 导航组件 (nav)
|
||
|
||
| 组件 | Stmts | Branch | Funcs | Lines |
|
||
|------|-------|--------|-------|-------|
|
||
| Breadcrumb | 100% | 100% | 100% | 100% |
|
||
| Dropdown | 97.05% | 91.89% | 66.66% | 97.05% |
|
||
| Menu | 97.08% | 93.54% | 60% | 97.08% |
|
||
| Pagination | 100% | 90.47% | 77.77% | 100% |
|
||
| Steps | 100% | 100% | 100% | 100% |
|
||
| Tabs | 100% | 92% | 100% | 100% |
|
||
|
||
---
|
||
|
||
## 四、100% 覆盖率组件
|
||
|
||
以下组件实现了语句/分支/函数/行 **全部 100%** 覆盖率：
|
||
|
||
- ✅ ConfigProvider
|
||
- ✅ Alert
|
||
- ✅ Result
|
||
- ✅ Breadcrumb
|
||
- ✅ Steps
|
||
|
||
---
|
||
|
||
## 五、覆盖率改进建议
|
||
|
||
### 5.1 优先改进（覆盖率 < 60%）
|
||
|
||
| 组件 | Stmts | 建议补充的测试 |
|
||
|------|-------|---------------|
|
||
| RangePicker | 0% | 完全没有测试文件，需要新建 |
|
||
| Icon (Icon.tsx) | 0% | 自定义图标组件未测试 |
|
||
| FloatButton | 50.07% | FloatButtonGroup 和 BackTop 变体未覆盖 |
|
||
| Select | 54.62% | 下拉展开/搜索/多选逻辑未覆盖 |
|
||
| DatePicker | 56.06% | 日期选择面板交互未覆盖 |
|
||
| TimePicker | 55.13% | 时间选择面板交互未覆盖 |
|
||
| Upload | 58.05% | 文件上传/拖拽/删除逻辑未覆盖 |
|
||
|
||
### 5.2 中等改进（覆盖率 60%-80%）
|
||
|
||
| 组件 | Stmts | 建议补充的测试 |
|
||
|------|-------|---------------|
|
||
| AutoComplete | 67.41% | 下拉建议列表交互 |
|
||
| Cascader | 68.53% | 级联面板展开交互 |
|
||
| Form | 72.23% | 表单验证/提交/重置逻辑 |
|
||
| Watermark | 73.42% | 图片水印异步加载 |
|
||
| Input | 71.07% | 前缀/后缀/密码切换 |
|
||
| Transfer | 73.99% | 穿梭框选择/搜索逻辑 |
|
||
| InputNumber | 78.91% | 步进器增减逻辑 |
|
||
| Typography | 67.09% | 复制/编辑/省略交互 |
|
||
| Mention | 64.57% | @提及下拉交互 |
|
||
| TreeSelect | 62.05% | 树形选择展开交互 |
|
||
|
||
---
|
||
|
||
## 六、运行命令
|
||
|
||
```bash
|
||
# 运行全量测试
|
||
pnpm exec vitest run
|
||
|
||
# 运行指定组件测试
|
||
pnpm exec vitest run src/components/common/Affix
|
||
|
||
# 运行覆盖率报告
|
||
pnpm exec vitest run --coverage
|
||
|
||
# 运行 lint 检查
|
||
pnpm exec eslint src/components/
|
||
```
|
||
|
||
---
|
||
|
||
> **Pika 组件库测试报告完成。800 个测试用例全部通过，整体语句覆盖率 82.42%。**
|