前端 TDD 工作流

Name: fec-tdd-workflow
Rating: 5 (15 reviews)
Author: bovinphang

Purpose

用“先写失败测试，再实现最小代码，再重构”的节奏交付前端功能，避免只在实现后补覆盖率。

识别可观察行为：用户能看到的 UI、组件契约、hook/composable 返回值、路由守卫结果、API client 输出或错误状态。
先写一个最小失败测试：
- 纯逻辑优先单元测试。
- 组件交互优先 Testing Library / Vue Test Utils。
- 跨页关键流程优先 Playwright / Cypress。
运行该测试并确认失败原因正确，失败应来自行为尚未实现，而不是语法、导入或测试环境错误。
写刚好能通过测试的最小实现，不顺手扩大范围。
重新运行测试，确认变绿。
在测试保持通过的前提下重构命名、边界和重复逻辑。
对 bug 修复，保留能复现问题的回归测试。
每轮只扩大一个可观察行为；新需求、新边界和新异常路径各自进入下一轮。

修复缺陷时先让测试失败，再让它通过。若无法先失败，说明测试没有覆盖原始问题，需要收窄输入、断言或测试层级。