Files
yys-editor/src/__tests__/layer-management
rookie4show 9227a61c85 fix: 修复保存后刷新网页图层全变成1的问题
问题原因:
1. LogicFlow 的 render() 方法不会自动应用节点的 zIndex 属性
2. 切换标签时,LogicFlow Label 插件对空 _label 数组处理有误导致渲染失败
3. 渲染失败后节点 zIndex 被重置为默认值 1

解决方案:
1. 在 App.vue 中,render() 后立即从保存的数据中恢复每个节点的 zIndex
2. 在 normalizeGraphData() 中清理空的 _label 数组,避免 Label 插件报错
3. 简化 FlowEditor.vue 中的 normalizeAllNodes(),移除不必要的重新分配逻辑
4. 清理调试日志,保持代码整洁

测试:
- 添加节点并调整图层顺序
- 切换标签页
- 刷新浏览器
- 确认图层顺序保持不变
2026-02-13 19:28:21 +08:00
..

图层管理测试

📁 文件说明

活跃的测试

  • real-scenario.spec.ts - 真实场景测试(推荐使用)
    • 使用真实的 LogicFlow 实例
    • 模拟真实的用户操作流程
    • 能够发现真实的代码问题

📦 已废弃的测试(仅供参考)

  • mock-test.spec.ts.bak - Mock 测试

    • 使用模拟类MockLogicFlow
    • 只能验证理想逻辑
    • 无法发现真实代码的问题
  • integration-test.spec.ts.bak - 组件集成测试

    • 尝试挂载 Vue 组件
    • 因为缺少浏览器 API 而失败
  • unit-test.spec.ts.bak - 单元测试

    • 测试单个函数
    • 覆盖范围有限

🚀 运行测试

# 运行图层管理测试
npm test -- layer-management

# 只运行真实场景测试
npm test -- real-scenario

# 监听模式
npm run test:watch -- layer-management

# 查看详细输出
npm test -- layer-management --reporter=verbose

📊 测试结果

当前状态9 个测试)

  • 通过: 5/9
  • 失败: 4/9

发现的问题

  1. zIndex 不会保存到数据中

    • getGraphRawData() 返回的数据中没有 zIndex
    • 导致导出/导入数据会丢失图层信息
  2. 置底操作逻辑错误

    • 置底后 zIndex 变成 998/996
    • 应该是比所有节点都小的值

📝 测试场景

通过的测试

  1. 场景1: 创建节点并验证 zIndex 分配
  2. 场景2: 置顶操作(模拟右键菜单)
  3. 场景4: 上移一层操作
  4. 场景5: 下移一层操作
  5. 场景8: 边界情况 - 最顶层节点继续置顶

失败的测试

  1. 场景3: 置底操作(模拟右键菜单)
  2. 场景6: 数据预览验证(模拟 Toolbar.handlePreviewData
  3. 场景7: 完整用户流程测试
  4. 场景9: 边界情况 - 最底层节点继续置底

🔧 如何修复

参考 ../README-测试报告.md 中的解决方案。


📚 相关文档