alighasami/jordium-gantt-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
jordium-gantt-vue3/docs/TaskRow-重构测试清单-20241216.md

10 KiB
Raw Permalink Blame History

TaskRow 重构测试清单

重构日期: 2024-12-16
版本: v1.6.1
重构范围: Composables 合并优化 + 组件目录重组

📋 重构概述

变更内容

  1. Composables 合并 (9个 → 5个)

    • useTaskRowDragInteraction.ts → useTaskRowEventHandlers.ts
    • useTaskRowTimer.ts → useTaskRowContextMenu.ts
    • useTaskRowProgress.ts + useTaskRowStyles.ts → useTaskRowState.ts

  2. 组件目录重组

    • 新建 src/components/TaskList/taskRow/ 目录
    • 移动 5 个 TaskRow 相关组件到新目录

  3. 引用路径更新

    • 所有导入导出路径已更新
    • 样式导入路径已修正

✅ 基础功能测试

1. 构建与编译

  • npm run build 成功执行无错误
  • TypeScript 类型检查通过
  • Vite 构建输出正常
  • CSS 文件大小未异常增长 (预期: ~153KB)
  • JS 文件大小正常 (预期: ~3577KB)

2. 开发环境启动

  • npm run dev 成功启动
  • 浏览器无控制台错误
  • 热更新正常工作
  • 样式正确加载

🎯 TaskRow 核心功能测试

3. 任务行渲染

  • 普通任务行正确显示
  • 父任务行（story 类型）正确显示
  • 叶子任务行正确显示
  • 里程碑任务行正确显示
  • 里程碑分组行正确显示

4. 折叠/展开功能

  • 点击折叠按钮可以折叠子任务
  • 点击折叠按钮可以展开子任务
  • 折叠按钮图标旋转动画正常
  • Story 类型任务可以折叠/展开
  • 有子任务的普通任务可以折叠/展开
  • 里程碑分组不显示折叠按钮
  • 点击任务行（非按钮区域）也可触发折叠/展开

5. 任务图标显示

  • 父任务图标正确显示（文件夹图标）
  • Story 任务图标正确显示（书本图标）
  • 普通任务图标正确显示（复选框图标）
  • 里程碑分组图标正确显示（红色菱形，无发光效果）
  • showTaskIcon=false 时图标隐藏且保持对齐

6. 悬停效果 (Hover)

  • 鼠标悬停在任务行上时背景色变化
  • 悬停时行放大效果 (scale 1.02)
  • 悬停时阴影效果正常
  • 悬停时 z-index 提升（浮起效果）
  • 父任务悬停效果增强
  • 里程碑分组悬停时边框加粗
  • 任务类型左边框在悬停时正确加粗
  • 里程碑图标无红色发光效果（已修复）

7. 拖拽功能

  • enableDrag=true 时可以拖拽任务行
  • 拖拽时鼠标指针变为 move
  • 拖拽时源任务行透明度降低
  • 拖拽目标位置高亮显示
  • 拖拽到其他任务后方显示蓝色下边框
  • 拖拽到任务内部（作为子任务）显示蓝色边框
  • 点击按钮、输入框等交互元素不触发拖拽
  • Splitter 拖拽时不触发行悬停效果

📊 数据显示测试

8. 列数据渲染

  • 任务名称列正确显示
  • 前置任务列格式化显示 (FS+2, SS-1 等)
  • 负责人列显示头像和姓名
  • 开始日期列正确显示
  • 结束日期列正确显示
  • 预估工时列正确显示
  • 实际工时列正确显示
  • 进度列显示百分比

9. 进度状态样式

  • 进度 0% 无特殊样式
  • 进度 1-99% 显示警告色 (warning)
  • 进度 100% 显示成功色 (success)
  • 超期且未完成显示危险色 (danger)

10. 计时器功能

  • 计时器正在运行时显示当前时长
  • 计时器格式为 HH:MM:SS
  • 停止计时后显示累计时长
  • 计时器每秒更新
  • 多个任务同时计时互不干扰

11. 徽章显示

  • 超时徽章正确显示（实际工时 > 预估工时）
  • 逾期徽章正确显示（当前日期 > 结束日期且未完成）
  • 逾期天数计算正确
  • 徽章文案国际化正确

🎨 样式与主题测试

12. 明亮模式样式

  • 任务行背景色正确
  • 父任务背景色正确
  • 里程碑分组渐变背景正确
  • 边框颜色正确
  • 文字颜色正确
  • 悬停效果颜色正确

13. 暗黑模式样式

  • 切换到暗黑模式后样式正确
  • 任务行背景色适配暗黑模式
  • 边框颜色适配暗黑模式
  • 文字颜色适配暗黑模式
  • 里程碑图标颜色适配 (#f67c7c)
  • 悬停阴影效果适配暗黑模式

14. 任务类型边框

  • Story 类型左边框为蓝色 (#409eff)
  • Task 类型左边框为橙色 (#e6a23c)
  • Milestone 类型左边框为红色 (#f56c6c)
  • 里程碑分组左边框为红色且宽度 3px
  • 悬停时边框加粗至 4-5px

🔧 交互功能测试

15. 双击事件

  • 双击任务行触发 dblclick 事件
  • 双击事件参数正确传递任务对象
  • 双击不会同时触发单击事件

16. 右键菜单

  • 右键点击任务行显示上下文菜单
  • 菜单位置跟随鼠标
  • 菜单选项正确显示（开始计时、停止计时等）
  • 点击菜单外部关闭菜单
  • 里程碑类型不显示右键菜单
  • 菜单操作触发正确的事件

17. 自定义行样式

  • taskListRowClassName 字符串模式正确应用
  • taskListRowClassName 函数模式正确计算
  • taskListRowStyle 对象模式正确应用
  • taskListRowStyle 函数模式正确计算
  • 自定义样式优先级高于默认样式

🔌 插槽与扩展测试

18. 自定义内容插槽

  • #custom-task-content 插槽正确渲染
  • 插槽接收的 props 数据完整
  • 插槽内容替换默认任务名称显示

19. 列级自定义插槽

  • #column-{key} 插槽正确渲染
  • 列插槽接收正确的 task、column、value 参数
  • 列插槽优先级高于 formatter 函数
  • 多个自定义列插槽可以共存

20. Formatter 函数

  • 列的 formatter 函数正确调用
  • Formatter 接收正确的 task 和 column 参数
  • Formatter 返回值正确显示
  • Formatter 优先级低于插槽，高于默认渲染

📱 声明式渲染模式测试

21. 声明式列配置

  • renderMode="declarative" 正确切换渲染模式
  • 声明式列配置正确解析
  • 第一列保留折叠按钮和图标
  • 列对齐方式正确应用 (left/center/right)
  • 列宽度样式正确应用
  • 自定义 cssClass 正确应用

🧪 边界条件测试

22. 空数据与异常

  • 任务数据为空时不报错
  • 缺少必需字段时有默认值或占位符
  • 子任务数组为空时正确处理
  • 日期格式异常时不崩溃
  • 进度值超出 0-100 范围时正确处理

23. 大数据量测试

  • 100+ 任务渲染性能正常
  • 虚拟滚动正常工作
  • 展开/折叠大量子任务不卡顿
  • 拖拽大列表时性能正常

24. 多语言测试

  • 中文界面文案正确
  • 英文界面文案正确
  • 切换语言后徽章文案更新
  • 日期格式跟随语言设置

🔍 Composables 单元测试

25. useTaskRowState

  • 任务缩进计算正确 (baseIndent + level * 20)
  • hasChildren 判断正确
  • 任务类型判断正确 (isStoryTask, isMilestoneGroup 等)
  • 进度样式类计算正确
  • 超时判断逻辑正确 (actualHours > estimatedHours)
  • 逾期天数计算正确（仅计算日期部分）
  • 自定义行样式计算正确

26. useTaskRowEventHandlers

  • 折叠/展开事件正确触发
  • 点击行事件正确触发
  • 双击事件正确触发且阻止冒泡
  • 悬停进入/离开事件正确触发
  • Splitter 拖拽时悬停事件被禁用
  • 拖拽鼠标按下事件正确处理
  • 拖拽悬停事件正确监听

27. useTaskRowContextMenu

  • 右键菜单显示/隐藏状态正确
  • 菜单位置计算正确
  • 删除任务事件正确触发
  • 计时器初始值正确
  • 计时器格式化正确 (HH:MM:SS)
  • 计时器更新逻辑正确
  • 组件卸载时定时器正确清理

🎭 回归测试

28. 与其他组件集成

  • TaskList 正确使用 TaskRow
  • GanttChart 中 TaskList 正常工作
  • Timeline 与 TaskList 联动正常
  • 任务行与甘特条联动高亮正常

29. Demo 验证

  • Demo 页面正常加载
  • 所有 Demo 示例正常工作
  • 自定义列 Demo 正常
  • 声明式渲染 Demo 正常
  • 大数据量 Demo 正常 (data-large-1m.json)

📝 代码质量检查

30. 代码规范

  • ESLint 无错误
  • TypeScript 严格模式通过
  • 无 any 类型滥用
  • 注释完整且准确

31. 性能优化验证

  • computed 正确使用，避免重复计算
  • toRef 仅用于会变化的 props
  • 事件监听器正确清理
  • Watch 懒加载逻辑正常（计时器）

✅ 测试通过标准

  • 所有核心功能测试通过 (1-17)
  • 所有样式测试通过 (12-14)
  • 所有交互测试通过 (15-16)
  • 声明式渲染测试通过 (21)
  • Composables 逻辑测试通过 (25-27)
  • 回归测试通过 (28-29)
  • 构建成功无警告
  • 浏览器控制台无错误

🐛 已知问题记录

问题 状态 描述 解决方案
里程碑图标红色发光 ✅ 已修复 悬停时出现不必要的红色发光效果 移除所有 filter 和 animation 属性
- - - -

📌 测试注意事项

  1. 测试环境:

    • Node.js 版本: 建议 v18+
    • 浏览器: Chrome/Edge/Firefox 最新版
    • 屏幕分辨率: 1920x1080 及以上

  2. 测试数据:

    • 使用 demo/data.json 进行常规测试
    • 使用 demo/data-large-1m.json 进行性能测试

  3. 回归测试建议:

    • 与 v1.6.0 版本对比功能一致性
    • 重点测试拖拽、计时器、右键菜单功能

  4. 性能基准:

    • 构建时间: < 10s
    • 页面加载时间: < 2s
    • 列表滚动帧率: > 30fps

测试人: _______________
测试日期: _______________
测试版本: v1.6.1
测试结果: [ ] 通过 / [ ] 不通过
备注: _______________