Skip to content

Conversation

haozang54-source
Copy link

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

closes #ActionSheet测试覆盖率提升

💡 需求背景和解决方案

背景:
ActionSheet 组件缺乏完善的单元测试覆盖,现有测试覆盖率仅为 50%,无法保证组件功能的稳定性和可靠性。为提升代码质量和组件稳定性,需要对 ActionSheet 组件进行全面的测试覆盖率提升,达到 95%+ 的覆盖率目标。

解决方案:

  1. 重构测试文件结构:按照标准的 props、events、slots 结构组织测试用例
  2. 新增子组件测试:为 ActionSheetList、ActionSheetGrid、ActionSheetMethod 创建独立测试文件
  3. 全面覆盖组件 API:测试所有 props、events 和交互场景
  4. 解决 vi.mock 初始化问题:使用动态 mocking 避免测试执行错误
  5. 提升测试覆盖率:达到行覆盖率、分支覆盖率、函数覆盖率、语句覆盖率均 95%+ 的目标

API 覆盖范围:

ActionSheet 主组件:

  • Props: visible, items, theme, showCancel, cancelText, description, align, count, popupProps
  • Events: onSelected, onCancel, onClose, onVisibleChange
  • 主题模式: list/grid 主题切换
  • 状态管理: 可见性控制、选项处理

ActionSheetList 子组件:

  • Props: items, align, onSelected
  • 列表渲染: 字符串/对象数组处理
  • 交互功能: 点击选择、禁用状态

ActionSheetGrid 子组件:

  • Props: items, count, onSelected
  • 网格布局: 多列显示、图标支持
  • Badge 集成: 徽章数量显示

ActionSheetMethod 命令式调用:

  • Methods: show(), close()
  • 配置选项: 动态配置支持
  • 生命周期: 显示/隐藏管理

📝 更新日志

测试覆盖率提升:

  • test(action-sheet): 重构主组件测试文件,新增 42 个全面测试用例
  • test(action-sheet): 新增 ActionSheetList 子组件独立测试文件 (15 个测试用例)
  • test(action-sheet): 新增 ActionSheetGrid 子组件独立测试文件 (14 个测试用例)
  • test(action-sheet): 新增 ActionSheetMethod 命令式调用测试文件 (7 个测试用例)
  • test(action-sheet): 新增模块导出测试文件 (4 个测试用例)
  • test(action-sheet): 使用动态 mocking 解决 vi.mock 初始化问题
  • test(action-sheet): 新增边界情况和异常值处理测试
  • test(action-sheet): 新增 Popup 组件集成和交互测试

测试覆盖率成果:

  • 行覆盖率:100% ✅ (目标 95%+)

  • 分支覆盖率:96.55% ✅ (目标 95%+)

  • 函数覆盖率:100% ✅ (目标 95%+)

  • 语句覆盖率:100% ✅ (目标 95%+)

  • 测试用例数:82 个 (全部通过)

  • 本条 PR 不需要纳入 Changelog

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

📊 测试覆盖率详情

测试文件结构:

src/action-sheet/__tests__/
├── index.test.tsx              # ActionSheet 主组件测试 (42 tests)
├── ActionSheetList.test.tsx    # ActionSheetList 子组件测试 (15 tests)
├── ActionSheetGrid.test.tsx    # ActionSheetGrid 子组件测试 (14 tests)
├── ActionSheetMethod.test.tsx  # ActionSheetMethod 命令式调用测试 (7 tests)
└── index-exports.test.tsx      # 模块导出测试 (4 tests)

测试场景覆盖:

ActionSheet 主组件测试 (42 个测试用例):

  • ✅ Props 测试:visible, items, theme, showCancel, cancelText, description, align, count, popupProps
  • ✅ Events 测试:onSelected, onCancel, onClose, onVisibleChange 回调
  • ✅ 主题切换:list/grid 主题模式完整测试
  • ✅ 状态管理:可见性控制、受控组件行为
  • ✅ 边界情况:空数据、undefined、null 值处理
  • ✅ 组件行为:可见性变化、项目更新、样式类应用
  • ✅ 默认属性:默认值处理、最小配置渲染
  • ✅ 属性验证:布尔、数字、字符串、对象类型验证

ActionSheetList 子组件测试 (15 个测试用例):

  • ✅ Props 测试:items, align, onSelected
  • ✅ 渲染测试:字符串数组、对象数组处理
  • ✅ 交互测试:点击选择、禁用状态
  • ✅ 样式测试:对齐方式、活跃状态
  • ✅ Badge 集成:徽章显示、数量处理

ActionSheetGrid 子组件测试 (14 个测试用例):

  • ✅ Props 测试:items, count, onSelected
  • ✅ 网格布局:多列显示、响应式处理
  • ✅ 图标支持:图标渲染、图标类型
  • ✅ 交互功能:点击选择、禁用处理
  • ✅ Badge 功能:徽章集成、样式处理

ActionSheetMethod 命令式调用测试 (7 个测试用例):

  • ✅ 方法导出:show(), close() 函数可用性
  • ✅ 配置处理:空配置、完整配置支持
  • ✅ 生命周期:显示/隐藏状态管理
  • ✅ 多次调用:连续调用处理
  • ✅ 调用序列:显示-隐藏序列测试

模块导出测试 (4 个测试用例):

  • ✅ 默认导出:ActionSheet 组件导出
  • ✅ 命名导出:ActionSheetMethod 导出
  • ✅ 类型导出:TypeScript 类型定义
  • ✅ 完整性检查:所有导出项验证

关键功能验证:

  1. 组件渲染:基础渲染、样式类正确应用、主题切换
  2. 状态管理:可见性控制、受控/非受控模式
  3. 交互功能:选项点击、取消操作、禁用状态
  4. 子组件集成:List/Grid 子组件正确渲染和交互
  5. Popup 集成:弹窗显示/隐藏、遮罩交互
  6. 命令式调用:show/close 方法正确执行
  7. 边界情况:空数据、异常值稳定处理
  8. TypeScript 支持:类型定义完整、类型安全

🎯 测试执行结果

✓ src/action-sheet/__tests__/index.test.tsx (42 tests) 
✓ src/action-sheet/__tests__/ActionSheetList.test.tsx (15 tests)
✓ src/action-sheet/__tests__/ActionSheetGrid.test.tsx (14 tests)
✓ src/action-sheet/__tests__/ActionSheetMethod.test.tsx (7 tests)
✓ src/action-sheet/__tests__/index-exports.test.tsx (4 tests)

Test Files  5 passed (5)
Tests  82 passed (82)

Coverage Report:
File                           | % Stmts | % Branch | % Funcs | % Lines
-------------------------------|---------|----------|---------|--------
action-sheet/ActionSheet.tsx  |   100   |  96.55   |   100   |   100
action-sheet/ActionSheetList.tsx|  100   |   100    |   100   |   100
action-sheet/ActionSheetGrid.tsx|  100   |   100    |   100   |   100
action-sheet/ActionSheetMethod.tsx| 100   |   100    |   100   |   100
action-sheet/index.ts          |   100   |   100    |   100   |   100

🔧 技术改进

解决的技术问题:

  1. vi.mock 初始化错误:使用 beforeEach 中的动态 mocking 替代顶层 vi.mock,避免 "Cannot access before initialization" 错误
  2. 多元素匹配问题:使用 unmount() 方法和独立渲染避免测试间的 DOM 污染
  3. 组件 mocking 策略:创建功能完整的 mock 组件,确保测试覆盖真实交互场景
  4. TypeScript 类型安全:所有测试用例都有完整的类型定义和类型检查

测试质量保证:

  • 所有测试用例都有明确的测试目标和断言
  • 使用真实的用户交互模拟(fireEvent)
  • 完整的边界情况和异常处理测试
  • 遵循 AAA 模式(Arrange, Act, Assert)
  • 测试用例命名清晰,易于理解和维护

📈 覆盖率提升对比

提升前:

  • 语句覆盖率:50%
  • 分支覆盖率:83.33%
  • 函数覆盖率:20%
  • 行覆盖率:50%

提升后:

  • 语句覆盖率:100% ⬆️ (+50%)
  • 分支覆盖率:96.55% ⬆️ (+13.22%)
  • 函数覆盖率:100% ⬆️ (+80%)
  • 行覆盖率:100% ⬆️ (+50%)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant