yys-editor/src/__tests__/SUMMARY.md

测试文件整理完成 ✅

📁 新的文件结构

src/__tests__/
├── README.md                          # 📖 测试文件总览（从这里开始）
├── TEST-RULES.md                      # 📋 测试规范文档（必读）
├── README-测试报告.md                  # 📊 测试报告和问题分析
├── setup.ts                           # ⚙️ 测试环境配置
├── layer-management/                  # 📂 图层管理测试
│   ├── README.md                      # 图层管理测试说明
│   ├── real-scenario.spec.ts          # ✅ 真实场景测试（活跃）
│   ├── mock-test.spec.ts.bak          # 🗄️ Mock 测试（已废弃）
│   ├── integration-test.spec.ts.bak   # 🗄️ 集成测试（已废弃）
│   └── unit-test.spec.ts.bak          # 🗄️ 单元测试（已废弃）
├── schema.test.ts                     # Schema 验证测试
└── useStore.test.ts                   # Store 测试

---

✨ 主要改进

1. 文件组织

• ✅ 创建了 layer-management/ 目录，集中管理图层相关测试
• ✅ 将 Mock 测试重命名为 .bak，标记为已废弃
• ✅ 保留了真实场景测试作为推荐方案

2. 文档完善

• ✅ README.md - 测试文件总览和快速开始
• ✅ TEST-RULES.md - 详细的测试规范和最佳实践
• ✅ README-测试报告.md - 当前测试结果和问题分析
• ✅ layer-management/README.md - 图层管理测试说明

3. 测试规范

明确了测试原则：

✅ 推荐：真实场景测试

// 使用真实的 LogicFlow 实例
const lf = new LogicFlow({ ... })
const node = lf.addNode({ ... })
lf.setElementZIndex(node.id, 'top')

// 能发现真实问题！
const graphData = lf.getGraphRawData()
expect(graphData.nodes[0].zIndex).toBeDefined() // ❌ 失败！

❌ 不推荐：Mock 测试

// 使用模拟类
class MockLogicFlow { ... }

// 只能验证理想逻辑，无法发现真实问题

---

🚀 快速开始

运行测试

# 运行所有测试
npm test

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

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

# 监听模式
npm run test:watch

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

查看文档

1. 先看 README.md - 了解整体结构
2. 再看 TEST-RULES.md - 学习测试规范
3. 参考 layer-management/real-scenario.spec.ts - 学习如何编写测试

---

📊 当前测试状态

图层管理测试（9 个测试）

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

发现的真实问题

1. zIndex 不会保存到数据中

   • getGraphRawData() 返回的数据中没有 zIndex
   • 导致导出/导入会丢失图层信息

2. 置底操作逻辑错误

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

这些问题是通过真实场景测试发现的，Mock 测试无法发现！

---

🎯 测试原则总结

为什么要用真实场景测试？

对比项	Mock 测试	真实场景测试
能否发现真实问题	❌ 不能	✅ 能
测试可靠性	⚠️ 低	✅ 高
接近用户体验	❌ 不接近	✅ 接近
维护成本	⚠️ 高（需要同步更新 Mock）	✅ 低

何时使用 Mock？

只在以下情况使用：

• 外部 API 调用（HTTP 请求）
• 时间相关的测试（定时器）
• 文件系统操作
• 难以复现的场景（网络错误）

核心业务逻辑必须使用真实场景测试！

---

📚 文档导航

必读文档

1. README.md - 从这里开始
2. TEST-RULES.md - 测试规范（必读）
3. README-测试报告.md - 当前问题分析

模块文档

• layer-management/README.md - 图层管理测试

示例代码

• layer-management/real-scenario.spec.ts - 真实场景测试示例

---

🔧 下一步

1. 修复发现的问题

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

• 修复 zIndex 持久化问题
• 修复置底操作逻辑

2. 添加更多真实场景测试

参考 layer-management/real-scenario.spec.ts，为其他功能添加测试：

• 节点拖拽
• 节点复制粘贴
• 节点分组
• 数据导入导出

3. 提高测试覆盖率

目标：

• 核心功能：80%+ 覆盖率
• 用户关键路径：100% 覆盖率

---

✅ 完成清单

• 创建 layer-management/ 目录
• 移动并重命名测试文件
• 废弃 Mock 测试（重命名为 .bak）
• 创建 README.md（总览）
• 创建 TEST-RULES.md（规范）
• 创建 layer-management/README.md（模块说明）
• 验证测试可以正常运行
• 更新测试报告

---

🎉 总结

现在你有了：

1. 清晰的文件结构 - 测试文件按模块组织
2. 完善的文档 - 从入门到进阶的完整指南
3. 真实场景测试 - 能够发现真实代码问题
4. 测试规范 - 明确的最佳实践

最重要的是：真实场景测试已经发现了 2 个真实的 bug，这是 Mock 测试无法做到的！