Tdd Workflow

affaan-m/ECC/docs/ja-JP/skills/tdd-workflow

作者 affaan-mef648e01899ba3e8dc6371642deaaf64b4477775無授權條款275K 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫4 天前更新

新機能の作成、バグ修正、コードのリファクタリング時にこのスキルを使用します。ユニット、統合、E2Eテストを含む80%以上のカバレッジでテスト駆動開発を強制します。

僅含說明Software Development
AI 產生的概覽

強制採用測試驅動開發，涵蓋單元、整合與端對端測試，覆蓋率至少 80%。

功能
這個技能提供一套逐步的 TDD 工作流程，用於開發新功能、修正錯誤與重構程式碼。它要求先寫測試再實作，從使用者旅程產生測試案例，執行測試確認失敗，撰寫最小實作，重構，並檢查覆蓋率。它提供單元測試、API 整合測試與 Playwright 端對端測試的範例模式，以及外部服務模擬、覆蓋率門檻、常見測試錯誤與持續測試的指引。
適用情境
適用於建立新功能或元件、修正錯誤、重構既有程式碼或新增 API 端點時。它面向需要測試覆蓋率與測試先行流程的開發工作。
執行需求
僅為說明性內容，未附帶指令碼。假定使用 JavaScript/TypeScript 專案，搭配 Jest 或 Vitest 等測試執行器、用於端對端測試的 Playwright，以及執行測試與覆蓋率的 npm 指令碼。

テスト駆動開発ワークフロー

このスキルは、すべてのコード開発が包括的なテストカバレッジを備えたTDDの原則に従うことを保証します。

有効化するタイミング

  • 新機能や機能の作成
  • バグや問題の修正
  • 既存コードのリファクタリング
  • APIエンドポイントの追加
  • 新しいコンポーネントの作成

コア原則

1. コードの前にテスト

常にテストを最初に書き、次にテストに合格するコードを実装します。

2. カバレッジ要件

  • 最低80%のカバレッジ（ユニット + 統合 + E2E）
  • すべてのエッジケースをカバー
  • エラーシナリオのテスト
  • 境界条件の検証

3. テストタイプ

ユニットテスト
  • 個々の関数とユーティリティ
  • コンポーネントロジック
  • 純粋関数
  • ヘルパーとユーティリティ
統合テスト
  • APIエンドポイント
  • データベース操作
  • サービス間相互作用
  • 外部API呼び出し
E2Eテスト (Playwright)
  • クリティカルなユーザーフロー
  • 完全なワークフロー
  • ブラウザ自動化
  • UI相互作用

TDDワークフローステップ

ステップ1：ユーザージャーニーを書く

[役割]として、[行動]をしたい、それによって[利益]を得られるようにするため
例：ユーザーとして、セマンティックに市場を検索したい、それによって正確なキーワードなしでも関連する市場を見つけられるようにするため。

ステップ2：テストケースを生成

各ユーザージャーニーについて、包括的なテストケースを作成：

typescript
describe('Semantic Search', () => {  it('returns relevant markets for query', async () => {    // テスト実装  })
  it('handles empty query gracefully', async () => {    // エッジケースのテスト  })
  it('falls back to substring search when Redis unavailable', async () => {    // フォールバック動作のテスト  })
  it('sorts results by similarity score', async () => {    // ソートロジックのテスト  })})

ステップ3：テストを実行（失敗するはず）

bash
npm test# テストは失敗するはず - まだ実装していない

ステップ4：コードを実装

テストに合格する最小限のコードを書く：

typescript
// テストにガイドされた実装export async function searchMarkets(query: string) {  // 実装はここ}

ステップ5：テストを再実行

bash
npm test# テストは今度は成功するはず

ステップ6：リファクタリング

テストをグリーンに保ちながらコード品質を向上：

  • 重複を削除
  • 命名を改善
  • パフォーマンスを最適化
  • 可読性を向上

ステップ7：カバレッジを確認

bash
npm run test:coverage# 80%以上のカバレッジを達成したことを確認

テストパターン

ユニットテストパターン (Jest/Vitest)

typescript
import { render, screen, fireEvent } from '@testing-library/react'import { Button } from './Button'
describe('Button Component', () => {  it('renders with correct text', () => {    render(<Button>Click me</Button>)    expect(screen.getByText('Click me')).toBeInTheDocument()  })
  it('calls onClick when clicked', () => {    const handleClick = jest.fn()    render(<Button onClick={handleClick}>Click</Button>)
    fireEvent.click(screen.getByRole('button'))
    expect(handleClick).toHaveBeenCalledTimes(1)  })
  it('is disabled when disabled prop is true', () => {    render(<Button disabled>Click</Button>)    expect(screen.getByRole('button')).toBeDisabled()  })})

API統合テストパターン

typescript
import { NextRequest } from 'next/server'import { GET } from './route'
describe('GET /api/markets', () => {  it('returns markets successfully', async () => {    const request = new NextRequest('http://localhost/api/markets')    const response = await GET(request)    const data = await response.json()
    expect(response.status).toBe(200)    expect(data.success).toBe(true)    expect(Array.isArray(data.data)).toBe(true)  })
  it('validates query parameters', async () => {    const request = new NextRequest('http://localhost/api/markets?limit=invalid')    const response = await GET(request)
    expect(response.status).toBe(400)  })
  it('handles database errors gracefully', async () => {    // データベース障害をモック    const request = new NextRequest('http://localhost/api/markets')    // エラー処理のテスト  })})

E2Eテストパターン (Playwright)

typescript
import { test, expect } from '@playwright/test'
test('user can search and filter markets', async ({ page }) => {  // 市場ページに移動  await page.goto('/')  await page.click('a[href="/markets"]')
  // ページが読み込まれたことを確認  await expect(page.locator('h1')).toContainText('Markets')
  // 市場を検索  await page.fill('input[placeholder="Search markets"]', 'election')
  // デバウンスと結果を待つ  await page.waitForTimeout(600)
  // 検索結果が表示されることを確認  const results = page.locator('[data-testid="market-card"]')  await expect(results).toHaveCount(5, { timeout: 5000 })
  // 結果に検索語が含まれることを確認  const firstResult = results.first()  await expect(firstResult).toContainText('election', { ignoreCase: true })
  // ステータスでフィルタリング  await page.click('button:has-text("Active")')
  // フィルタリングされた結果を確認  await expect(results).toHaveCount(3)})
test('user can create a new market', async ({ page }) => {  // 最初にログイン  await page.goto('/creator-dashboard')
  // 市場作成フォームに入力  await page.fill('input[name="name"]', 'Test Market')  await page.fill('textarea[name="description"]', 'Test description')  await page.fill('input[name="endDate"]', '2025-12-31')
  // フォームを送信  await page.click('button[type="submit"]')
  // 成功メッセージを確認  await expect(page.locator('text=Market created successfully')).toBeVisible()
  // 市場ページへのリダイレクトを確認  await expect(page).toHaveURL(/\/markets\/test-market/)})

テストファイル構成

src/├── components/│   ├── Button/│   │   ├── Button.tsx│   │   ├── Button.test.tsx          # ユニットテスト│   │   └── Button.stories.tsx       # Storybook│   └── MarketCard/│       ├── MarketCard.tsx│       └── MarketCard.test.tsx├── app/│   └── api/│       └── markets/│           ├── route.ts│           └── route.test.ts         # 統合テスト└── e2e/    ├── markets.spec.ts               # E2Eテスト    ├── trading.spec.ts    └── auth.spec.ts

外部サービスのモック

Supabaseモック

typescript
jest.mock('@/lib/supabase', () => ({  supabase: {    from: jest.fn(() => ({      select: jest.fn(() => ({        eq: jest.fn(() => Promise.resolve({          data: [{ id: 1, name: 'Test Market' }],          error: null        }))      }))    }))  }}))

Redisモック

typescript
jest.mock('@/lib/redis', () => ({  searchMarketsByVector: jest.fn(() => Promise.resolve([    { slug: 'test-market', similarity_score: 0.95 }  ])),  checkRedisHealth: jest.fn(() => Promise.resolve({ connected: true }))}))

OpenAIモック

typescript
jest.mock('@/lib/openai', () => ({  generateEmbedding: jest.fn(() => Promise.resolve(    new Array(1536).fill(0.1) // 1536次元埋め込みをモック  ))}))

テストカバレッジ検証

カバレッジレポートを実行

bash
npm run test:coverage

カバレッジ閾値

json
{  "jest": {    "coverageThresholds": {      "global": {        "branches": 80,        "functions": 80,        "lines": 80,        "statements": 80      }    }  }}

避けるべき一般的なテストの誤り

FAIL: 誤り：実装の詳細をテスト

typescript
// 内部状態をテストしないexpect(component.state.count).toBe(5)

PASS: 正解：ユーザーに見える動作をテスト

typescript
// ユーザーが見るものをテストexpect(screen.getByText('Count: 5')).toBeInTheDocument()

FAIL: 誤り：脆弱なセレクタ

typescript
// 簡単に壊れるawait page.click('.css-class-xyz')

PASS: 正解：セマンティックセレクタ

typescript
// 変更に強いawait page.click('button:has-text("Submit")')await page.click('[data-testid="submit-button"]')

FAIL: 誤り：テストの分離なし

typescript
// テストが互いに依存test('creates user', () => { /* ... */ })test('updates same user', () => { /* 前のテストに依存 */ })

PASS: 正解：独立したテスト

typescript
// 各テストが独自のデータをセットアップtest('creates user', () => {  const user = createTestUser()  // テストロジック})
test('updates user', () => {  const user = createTestUser()  // 更新ロジック})

継続的テスト

開発中のウォッチモード

bash
npm test -- --watch# ファイル変更時に自動的にテストが実行される

プリコミットフック

bash
# すべてのコミット前に実行npm test && npm run lint

CI/CD統合

yaml
# GitHub Actions- name: Run Tests  run: npm test -- --coverage- name: Upload Coverage  uses: codecov/codecov-action@v3

ベストプラクティス

  1. テストを最初に書く - 常にTDD
  2. テストごとに1つのアサート - 単一の動作に焦点
  3. 説明的なテスト名 - テスト内容を説明
  4. Arrange-Act-Assert - 明確なテスト構造
  5. 外部依存関係をモック - ユニットテストを分離
  6. エッジケースをテスト - null、undefined、空、大きい値
  7. エラーパスをテスト - ハッピーパスだけでなく
  8. テストを高速に保つ - ユニットテスト各50ms未満
  9. テスト後にクリーンアップ - 副作用なし
  10. カバレッジレポートをレビュー - ギャップを特定

成功指標

  • 80%以上のコードカバレッジを達成
  • すべてのテストが成功（グリーン）
  • スキップまたは無効化されたテストなし
  • 高速なテスト実行（ユニットテストは30秒未満）
  • E2Eテストがクリティカルなユーザーフローをカバー
  • テストが本番前にバグを検出

覚えておいてください：テストはオプションではありません。テストは自信を持ってリファクタリングし、迅速に開発し、本番の信頼性を可能にする安全網です。

來源與署名

來源：affaan-m/ECC位於docs/ja-JP/skills/tdd-workflow提交ef648e0

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 affaan-m/ECC 的技能

Unified Notifications Ops

affaan-m

設計統一的通知策略，對來自 GitHub、Linear、鉤子與聊天工具的通知進行分類、路由、去重與升級。

Productivity & Workflow275K4 天前更新

Verification Loop

affaan-m

執行六階段程式碼驗證流程，並產出 PASS/FAIL 就緒報告。

Software Development275K4 天前更新

Ui To Vue

affaan-m

將批次 UI 設計截圖轉換為使用 Vant、Element Plus 或 Ant Design Vue 的 Vue 3 元件。

Software Development275K4 天前更新

Unified Memory

affaan-m

指導代理透過本機 ECC Memory Vault 在不同執行框架之間共享持久脈絡與交接資訊。

AI & Agents275K4 天前更新

Visa Doc Translate

affaan-m

透過 OCR 將簽證文件影像翻譯成英文，並產出原圖與譯文對照的雙語 PDF。

Documents & Office275K4 天前更新

Team Builder

affaan-m

互動式挑選器：探索可用的代理角色，讓使用者最多選五個，平行執行同一任務並彙整結果。

AI & Agents275K4 天前更新

更多Software Development技能

Playground

anthropics

精選

建立自成一體的互動式 HTML 遊樂場，包含控制項、即時預覽與可複製的提示詞輸出。

Software Development37K今天更新

M5 Onboard

anthropics

精選

透過 USB 偵測 M5Stack ESP32 開發板，燒錄 UIFlow 2.0 韌體並安裝 MicroPython 應用程式套件。

Software Development37K今天更新

Cardputer Buddy

anthropics

精選

指導迭代 Cardputer-Adv 的 MicroPython 應用程式套件：新增應用程式、透過 USB 序列埠推送檔案、查看日誌並執行 REPL 指令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精選

依據從遠端來源取得的 Web Interface Guidelines 審查 UI 程式碼，並以 file:line 形式回報問題。

Software Development32K5 週前更新

Vercel React Native Skills

vercel-labs

精選

React Native 與 Expo 最佳實務規則，涵蓋清單效能、動畫、導覽、UI 模式、狀態與 monorepo 設定。

Software Development32K5 週前更新

Vercel React Best Practices

vercel-labs

精選

Vercel 的 React 與 Next.js 效能指南，以 70 條規則的形式用於撰寫、審查與重構程式碼。

Software Development32K5 週前更新