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% |
树形选择展开交互 |
六、运行命令
Pika 组件库测试报告完成。800 个测试用例全部通过,整体语句覆盖率 82.42%。