feat:组件框架

2026-05-31 09:36:23 +08:00
parent b371a5341a
commit ba3b3ad5c8
483 changed files with 134708 additions and 1627 deletions
@@ -0,0 +1,417 @@
+# 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%。**