$npx -y skills add zhukunpenglinyutong/ai-max --skill tdd-workflow在编写新功能、修复 bug 或重构代码时使用此 skill。强制执行测试驱动开发,覆盖率要求 80% 以上,包括单元测试、集成测试和 E2E 测试。
| 1 | # 测试驱动开发工作流 |
| 2 | |
| 3 | 此 skill 确保所有代码开发遵循 TDD 原则并具有全面的测试覆盖。 |
| 4 | |
| 5 | ## 何时激活 |
| 6 | |
| 7 | - 编写新功能或特性 |
| 8 | - 修复 bug 或问题 |
| 9 | - 重构现有代码 |
| 10 | - 添加 API 端点 |
| 11 | - 创建新组件 |
| 12 | |
| 13 | ## 核心原则 |
| 14 | |
| 15 | ### 1. 代码之前先写测试 |
| 16 | 始终先写测试,然后实现代码使测试通过。 |
| 17 | |
| 18 | ### 2. 覆盖率要求 |
| 19 | - 最低 80% 覆盖率(单元 + 集成 + E2E) |
| 20 | - 覆盖所有边界情况 |
| 21 | - 测试错误场景 |
| 22 | - 验证边界条件 |
| 23 | |
| 24 | ### 3. 测试类型 |
| 25 | |
| 26 | #### 单元测试 |
| 27 | - 独立的函数和工具 |
| 28 | - 组件逻辑 |
| 29 | - 纯函数 |
| 30 | - 辅助函数和工具 |
| 31 | |
| 32 | #### 集成测试 |
| 33 | - API 端点 |
| 34 | - 数据库操作 |
| 35 | - 服务交互 |
| 36 | - 外部 API 调用 |
| 37 | |
| 38 | #### E2E 测试(Playwright) |
| 39 | - 关键用户流程 |
| 40 | - 完整工作流 |
| 41 | - 浏览器自动化 |
| 42 | - UI 交互 |
| 43 | |
| 44 | ## TDD 工作流步骤 |
| 45 | |
| 46 | ### 步骤 1:编写用户旅程 |
| 47 | ``` |
| 48 | 作为 [角色],我想要 [动作],以便 [收益] |
| 49 | |
| 50 | 示例: |
| 51 | 作为用户,我想要语义搜索市场, |
| 52 | 以便即使没有精确关键词也能找到相关市场。 |
| 53 | ``` |
| 54 | |
| 55 | ### 步骤 2:生成测试用例 |
| 56 | 为每个用户旅程创建全面的测试用例: |
| 57 | |
| 58 | ```typescript |
| 59 | describe('Semantic Search', () => { |
| 60 | it('returns relevant markets for query', async () => { |
| 61 | // 测试实现 |
| 62 | }) |
| 63 | |
| 64 | it('handles empty query gracefully', async () => { |
| 65 | // 测试边界情况 |
| 66 | }) |
| 67 | |
| 68 | it('falls back to substring search when Redis unavailable', async () => { |
| 69 | // 测试回退行为 |
| 70 | }) |
| 71 | |
| 72 | it('sorts results by similarity score', async () => { |
| 73 | // 测试排序逻辑 |
| 74 | }) |
| 75 | }) |
| 76 | ``` |
| 77 | |
| 78 | ### 步骤 3:运行测试(它们应该失败) |
| 79 | ```bash |
| 80 | npm test |
| 81 | # 测试应该失败 - 我们还没有实现 |
| 82 | ``` |
| 83 | |
| 84 | ### 步骤 4:实现代码 |
| 85 | 编写最少的代码使测试通过: |
| 86 | |
| 87 | ```typescript |
| 88 | // 由测试指导的实现 |
| 89 | export async function searchMarkets(query: string) { |
| 90 | // 这里是实现 |
| 91 | } |
| 92 | ``` |
| 93 | |
| 94 | ### 步骤 5:再次运行测试 |
| 95 | ```bash |
| 96 | npm test |
| 97 | # 测试现在应该通过 |
| 98 | ``` |
| 99 | |
| 100 | ### 步骤 6:重构 |
| 101 | 在保持测试绿色的情况下改进代码质量: |
| 102 | - 消除重复 |
| 103 | - 改进命名 |
| 104 | - 优化性能 |
| 105 | - 增强可读性 |
| 106 | |
| 107 | ### 步骤 7:验证覆盖率 |
| 108 | ```bash |
| 109 | npm run test:coverage |
| 110 | # 验证达到 80%+ 覆盖率 |
| 111 | ``` |
| 112 | |
| 113 | ## 测试模式 |
| 114 | |
| 115 | ### 单元测试模式(Jest/Vitest) |
| 116 | ```typescript |
| 117 | import { render, screen, fireEvent } from '@testing-library/react' |
| 118 | import { Button } from './Button' |
| 119 | |
| 120 | describe('Button Component', () => { |
| 121 | it('renders with correct text', () => { |
| 122 | render(<Button>Click me</Button>) |
| 123 | expect(screen.getByText('Click me')).toBeInTheDocument() |
| 124 | }) |
| 125 | |
| 126 | it('calls onClick when clicked', () => { |
| 127 | const handleClick = jest.fn() |
| 128 | render(<Button onClick={handleClick}>Click</Button>) |
| 129 | |
| 130 | fireEvent.click(screen.getByRole('button')) |
| 131 | |
| 132 | expect(handleClick).toHaveBeenCalledTimes(1) |
| 133 | }) |
| 134 | |
| 135 | it('is disabled when disabled prop is true', () => { |
| 136 | render(<Button disabled>Click</Button>) |
| 137 | expect(screen.getByRole('button')).toBeDisabled() |
| 138 | }) |
| 139 | }) |
| 140 | ``` |
| 141 | |
| 142 | ### API 集成测试模式 |
| 143 | ```typescript |
| 144 | import { NextRequest } from 'next/server' |
| 145 | import { GET } from './route' |
| 146 | |
| 147 | describe('GET /api/markets', () => { |
| 148 | it('returns markets successfully', async () => { |
| 149 | const request = new NextRequest('http://localhost/api/markets') |
| 150 | const response = await GET(request) |
| 151 | const data = await response.json() |
| 152 | |
| 153 | expect(response.status).toBe(200) |
| 154 | expect(data.success).toBe(true) |
| 155 | expect(Array.isArray(data.data)).toBe(true) |
| 156 | }) |
| 157 | |
| 158 | it('validates query parameters', async () => { |
| 159 | const request = new NextRequest('http://localhost/api/markets?limit=invalid') |
| 160 | const response = await GET(request) |
| 161 | |
| 162 | expect(response.status).toBe(400) |
| 163 | }) |
| 164 | |
| 165 | it('handles database errors gracefully', async () => { |
| 166 | // 模拟数据库失败 |
| 167 | const request = new NextRequest('http://localhost/api/markets') |
| 168 | // 测试错误处理 |
| 169 | }) |
| 170 | }) |
| 171 | ``` |
| 172 | |
| 173 | ### E2E 测试模式(Playwright) |
| 174 | ```typescript |
| 175 | import { test, expect } from '@playwright/test' |
| 176 | |
| 177 | test('user can search and filter markets', async ({ page }) => { |
| 178 | // 导航到市场页面 |
| 179 | await page.goto('/') |
| 180 | await page.click('a[href="/markets"]') |
| 181 | |
| 182 | // 验证页面加载 |
| 183 | await expect(page.locator('h1')).toContainText('Markets') |
| 184 | |
| 185 | // 搜索市场 |
| 186 | await page.fill('input[placeholder="Search markets"]', 'election') |
| 187 | |
| 188 | // 等待防抖和结果 |
| 189 | await page.waitForTimeout(600) |
| 190 | |
| 191 | // 验证搜索结果显示 |
| 192 | const results = page.locator('[data-testid="market-card"]') |
| 193 | await expect(results).toHaveCount(5, { timeout: 5000 }) |
| 194 | |
| 195 | // 验证结果包含搜索词 |
| 196 | const firstResult = results.first() |
| 197 | await expect(firstResult).toContainText('election', { ignoreCase: true }) |
| 198 | |
| 199 | // 按状态过滤 |
| 200 | await page.click('button:has-text("Active")') |
| 201 | |
| 202 | // 验证过滤后的结果 |
| 203 | await expect(results).toHaveCount(3) |
| 204 | }) |
| 205 | |
| 206 | test('user can create a new market', async ({ page }) => { |
| 207 | // 先登录 |
| 208 | await page.goto('/creator-dashboard') |
| 209 | |
| 210 | // 填写市场创建表单 |
| 211 | await page.fill('input[name="name"]', 'Test Market') |
| 212 | await page.fill('textarea[name="description"]', 'Test description') |
| 213 | await page.fill('input[name="endDate"]', '2025-12-31') |
| 214 | |
| 215 | // 提交表单 |
| 216 | await page.click('button[type="submit"]') |
| 217 | |
| 218 | // 验证成功消息 |
| 219 | await expect(page.locator('text=Market created successfully')).toBeVisible() |
| 220 | |
| 221 | // 验证重定向到市场页面 |
| 222 | await expect(page).toHaveURL(/\/markets\/test-market/) |
| 223 | }) |
| 224 | ``` |
| 225 | |
| 226 | ## 测试文件组织 |
| 227 | |
| 228 | ``` |
| 229 | src/ |
| 230 | ├── components/ |
| 231 | │ ├── Button/ |
| 232 | │ │ ├── Button.tsx |
| 233 | │ │ ├── Button.test.tsx # 单元测试 |
| 234 | │ │ └── Button.stories.tsx # Storybook |
| 235 | │ └── MarketCard/ |
| 236 | │ ├── MarketCard.tsx |
| 237 | │ └── MarketCard.test.tsx |
| 238 | ├── app/ |
| 239 | │ └── api/ |
| 240 | │ └── markets/ |
| 241 | │ ├── route.ts |
| 242 | │ └── route.test.ts # 集成测试 |
| 243 | └── e2e/ |
| 244 | ├── markets.spec.ts # E2E 测试 |
| 245 | ├── trading.spec.ts |
| 246 | └── auth.spec.ts |
| 247 | ``` |
| 248 | |
| 249 | ## 模拟外部服务 |
| 250 | |
| 251 | ### Supabase 模拟 |
| 252 | ```typescript |
| 253 | jest.mock('@/lib/supabase', () => ({ |
| 254 | supabase: { |
| 255 | from: jest.fn(() => ({ |
| 256 | select: jest.fn(() => ({ |
| 257 | eq: jest.fn(() => Promise.resolve({ |
| 258 | da |