Back to Details

tdd-red-green-refactor

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Red-Green-Refactor (TDD) Skill: TypeScript Edition

红-绿-重构（TDD）技能：TypeScript 版本

This skill implements a structural framework for AI-assisted programming to ensure every line of code is verifiable, typed, and purposeful.
本技能为AI辅助编程实现了一个结构化框架，确保每一行代码都可验证、有类型定义且具备明确用途。

The Three-Phase Cycle

三阶段循环

Phase 1: Red (Establish Failure)

阶段1：红（确认失败）

You must prove the feature does not exist and that your test is valid.
  1. Write One Test: Create a single test case (e.g., in Vitest or Jest) for the next small piece of behavior.
  2. Execute & Fail: Run the test. It must fail.
  3. Verify: Ensure the failure is related to the missing logic (e.g., 
    ReferenceError: add is not defined
    ) and not a configuration error.
你必须证明该功能尚未存在，且测试是有效的。
  1. 编写一个测试：为下一个小功能点创建单个测试用例（例如使用Vitest或Jest）。
  2. 执行并确认失败：运行测试，测试必须失败。
  3. 验证原因：确保失败是由于缺失逻辑导致（例如 
    ReferenceError: add is not defined
    ），而非配置错误。

Phase 2: Green (Minimal Pass)

阶段2：绿（最小化通过）

Make the test pass as quickly and simply as possible.
  1. Minimal Implementation: Write the simplest code that satisfies the test. Do not build for the future; focus strictly on the current "Red" test.
  2. Run Tests: Execute the suite. All tests must be Green.
  3. Evidence: The transition from Red to Green is the "Proof of Work" for the developer.
以最快、最简单的方式让测试通过。
  1. 最小化实现：编写满足测试要求的最简代码。不要为未来需求过度设计，严格聚焦当前的“红”测试。
  2. 运行测试：执行测试套件，所有测试必须变为“绿”（通过）。
  3. 验证依据：从“红”到“绿”的转变是开发者的“工作证明”。

Phase 3: Refactor (Clean Up)

阶段3：重构（代码清理）

Improve the code structure while maintaining the "Green" state.
  1. Clean Up: Improve naming, remove duplication, and optimize the code written in Phase 2.
  2. Safety Net: Rerun the tests after every change. If they turn Red, revert the change immediately.
在保持“绿”状态的前提下优化代码结构。
  1. 代码清理：改进命名、消除重复代码、优化阶段2中编写的代码。
  2. 安全保障：每次修改后重新运行测试。如果测试变回“红”，立即撤销修改。

Core Operational Rules

核心操作规则

1. No "Horizontal Splurging"

1. 禁止“批量编写”

You are strictly forbidden from writing a large "splurge" of multiple tests at once. You must follow a strictly incremental loop:
  • Write 1 Test -> See it Fail -> Write 1 Fix -> See it Pass.
  • Repeat this loop for every sub-feature.
严格禁止一次性编写大量测试用例。必须遵循严格的增量循环：
  • 编写1个测试 → 确认失败 → 编写1个修复 → 确认通过。
  • 针对每个子功能重复此循环。

2. Impose Backpressure

2. 施加约束

Use automated assertions and strong typing (TypeScript) as backpressure to prevent the AI from "guessing" the solution or "playing in the mud" with low-quality code.
使用自动化断言和强类型（TypeScript）作为约束，防止AI“猜测”解决方案或编写低质量代码。

3. Verification of Integrity

3. 完整性验证

Never modify an existing test to make a failing implementation pass. If a test must change, it must be because the requirement changed, not because the code is difficult to write.
绝不能为了让失败的实现通过而修改现有测试。如果必须修改测试，只能是因为需求变更，而非代码难以编写。

Example Workflow (TypeScript + Vitest)

示例工作流（TypeScript + Vitest）

Step 1: Red
typescript
// math.test.ts
import { describe, it, expect } from 'vitest';
import { add } from './math';

describe('add', () => {
  it('should sum two numbers', () => {
    expect(add(2, 2)).toBe(4); // Fails: ReferenceError: add is not defined
  });
});
Step 2: Green
typescript
// math.ts
export const add = (a: any, b: any) => {
  return 4; // Passes: Minimal code to satisfy the test
};
Step 3: Refactor
typescript
// math.ts
/**
 * Sums two numbers with explicit type safety.
 */
export const add = (a: number, b: number): number => {
  return a + b; // Passes: Proper implementation with safety net
};
步骤1：红
typescript
// math.test.ts
import { describe, it, expect } from 'vitest';
import { add } from './math';

describe('add', () => {
  it('should sum two numbers', () => {
    expect(add(2, 2)).toBe(4); // Fails: ReferenceError: add is not defined
  });
});
步骤2：绿
typescript
// math.ts
export const add = (a: any, b: any) => {
  return 4; // Passes: Minimal code to satisfy the test
};
步骤3：重构
typescript
// math.ts
/**
 * Sums two numbers with explicit type safety.
 */
export const add = (a: number, b: number): number => {
  return a + b; // Passes: Proper implementation with safety net
};