前情提要

經過 Day 21-22 的測試框架建立與 TDD 實踐，我們已經累積了大量測試。今天我們要實作測試覆蓋率視覺化、測試效能優化以及Pre-commit Hooks，打造一個完整的前端測試生態系統。

測試覆蓋率的真正意義

首先，讓我們理解測試覆蓋率的本質：

/**
 * 測試覆蓋率迷思破解
 *
 * ❌ 錯誤觀念：
 * "100% 覆蓋率 = 完美測試"
 * → 可以覆蓋所有行但沒測到邊界條件
 *
 * ❌ 錯誤觀念：
 * "低覆蓋率 = 爛程式碼"
 * → UI 元件的某些分支可能很難測試
 *
 * ✅ 正確觀念：
 * "覆蓋率是指標，不是目標"
 * → 用來發現未測試的程式碼路徑
 * → 結合程式碼審查和人工判斷
 *
 * 📊 合理的覆蓋率目標：
 * - 工具函數 (utils/): 90%+
 * - 業務邏輯 (services/): 85%+
 * - React Hooks: 80%+
 * - UI 元件: 75%+
 * - 型別定義: 0% (不需要測試)
 */

Vitest Coverage 深度配置

1. 進階覆蓋率配置

// vitest.config.ts
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'happy-dom',
    setupFiles: ['./src/test/setup.ts'],

    // 覆蓋率配置
    coverage: {
      // 使用 v8 提供更準確的覆蓋率（預設是 istanbul）
      provider: 'v8',

      // 多種報告格式
      reporter: [
        'text',           // 終端機輸出
        'text-summary',   // 摘要
        'html',           // HTML 報告
        'lcov',           // LCOV 格式（CI 用）
        'json',           // JSON 格式（自動化分析用）
        'json-summary',   // JSON 摘要
      ],

      // 報告輸出目錄
      reportsDirectory: './coverage',

      // 包含的檔案
      include: [
        'src/**/*.{ts,tsx}',
      ],

      // 排除的檔案
      exclude: [
        'src/**/*.d.ts',
        'src/**/*.stories.tsx',
        'src/**/*.test.{ts,tsx}',
        'src/**/*.spec.{ts,tsx}',
        'src/test/**',
        'src/vite-env.d.ts',
        'src/main.tsx',
        'src/**/__mocks__/**',
        'src/**/types.ts',
        'src/**/constants.ts',
      ],

      // 覆蓋率門檻（不達標會失敗）
      thresholds: {
        // 全域門檻
        lines: 80,
        functions: 80,
        branches: 75,
        statements: 80,

        // 自動偵測門檻（根據現有覆蓋率設定）
        autoUpdate: true,

        // 針對特定檔案的門檻
        perFile: true,
      },

      // 針對特定目錄的不同門檻
      // 注意：這需要使用 c8 config
      watermarks: {
        statements: [70, 85],
        functions: [70, 85],
        branches: [65, 80],
        lines: [70, 85],
      },

      // 顯示所有檔案（包含未測試的）
      all: true,

      // 跳過已滿足門檻的檔案
      skipFull: false,

      // 清理舊的覆蓋率報告
      clean: true,

      // 100% 模式（strict）
      '100': false,
    },

    // 測試效能設定
    threads: true,
    maxConcurrency: 10,

    // 測試超時設定
    testTimeout: 10000,
    hookTimeout: 10000,

    // 快取設定
    cache: {
      dir: 'node_modules/.vitest',
    },
  },
});

2. 自訂覆蓋率報告

// scripts/coverage-report.ts
import fs from 'fs';
import path from 'path';

interface CoverageSummary {
  total: {
    lines: { total: number; covered: number; skipped: number; pct: number };
    statements: { total: number; covered: number; skipped: number; pct: number };
    functions: { total: number; covered: number; skipped: number; pct: number };
    branches: { total: number; covered: number; skipped: number; pct: number };
  };
  [filePath: string]: any;
}

/**
 * 生成美化的覆蓋率報告
 */
function generateEnhancedReport() {
  const summaryPath = path.join(process.cwd(), 'coverage/coverage-summary.json');

  if (!fs.existsSync(summaryPath)) {
    console.error('❌ Coverage summary not found. Run tests with --coverage first.');
    process.exit(1);
  }

  const summary: CoverageSummary = JSON.parse(
    fs.readFileSync(summaryPath, 'utf-8')
  );

  console.log('\n📊 Test Coverage Report\n');
  console.log('─'.repeat(80));

  // 整體覆蓋率
  const { lines, statements, functions, branches } = summary.total;

  printMetric('Lines', lines.pct, lines.covered, lines.total);
  printMetric('Statements', statements.pct, statements.covered, statements.total);
  printMetric('Functions', functions.pct, functions.covered, functions.total);
  printMetric('Branches', branches.pct, branches.covered, branches.total);

  console.log('─'.repeat(80));

  // 找出覆蓋率最低的檔案
  const files = Object.keys(summary)
    .filter(key => key !== 'total')
    .map(filePath => ({
      path: filePath,
      ...summary[filePath],
    }))
    .sort((a, b) => a.lines.pct - b.lines.pct);

  console.log('\n🔍 Files with lowest coverage:\n');

  files.slice(0, 10).forEach((file, index) => {
    const relativePath = path.relative(process.cwd(), file.path);
    const coverage = file.lines.pct;
    const emoji = coverage < 50 ? '🔴' :
                  coverage < 70 ? '🟡' : '🟢';

    console.log(`${index + 1}. ${emoji} ${relativePath}`);
    console.log(`   Lines: ${coverage.toFixed(1)}% (${file.lines.covered}/${file.lines.total})`);
  });

  // 找出完全未測試的檔案
  const untestedFiles = files.filter(f => f.lines.pct === 0);

  if (untestedFiles.length > 0) {
    console.log(`\n⚠️  ${untestedFiles.length} files have ZERO coverage:\n`);
    untestedFiles.forEach(file => {
      console.log(`   - ${path.relative(process.cwd(), file.path)}`);
    });
  }

  // 覆蓋率分佈統計
  console.log('\n📈 Coverage Distribution:\n');

  const ranges = [
    { min: 0, max: 50, label: '0-50%', emoji: '🔴' },
    { min: 50, max: 70, label: '50-70%', emoji: '🟡' },
    { min: 70, max: 85, label: '70-85%', emoji: '🟢' },
    { min: 85, max: 100, label: '85-100%', emoji: '💚' },
  ];

  ranges.forEach(range => {
    const count = files.filter(
      f => f.lines.pct >= range.min && f.lines.pct < range.max
    ).length;
    const bar = '█'.repeat(Math.floor(count / 2));
    console.log(`${range.emoji} ${range.label.padEnd(10)} ${bar} ${count} files`);
  });

  // 生成 Badge
  const badgeColor = lines.pct >= 80 ? 'brightgreen' :
                     lines.pct >= 70 ? 'yellow' :
                     lines.pct >= 50 ? 'orange' : 'red';

  const badge = `![Coverage](https://img.shields.io/badge/coverage-${lines.pct.toFixed(0)}%25-${badgeColor})`;

  console.log('\n📛 Coverage Badge (for README.md):\n');
  console.log(badge);

  // 檢查門檻
  console.log('\n🎯 Threshold Check:\n');

  const thresholds = {
    lines: 80,
    statements: 80,
    functions: 80,
    branches: 75,
  };

  let passed = true;

  Object.entries(thresholds).forEach(([metric, threshold]) => {
    const actual = summary.total[metric as keyof typeof summary.total].pct;
    const status = actual >= threshold ? '✅' : '❌';
    const diff = (actual - threshold).toFixed(1);
    const diffStr = diff >= '0' ? `+${diff}` : diff;

    console.log(`${status} ${metric.padEnd(12)} ${actual.toFixed(1)}% (threshold: ${threshold}%, ${diffStr}%)`);

    if (actual < threshold) {
      passed = false;
    }
  });

  if (!passed) {
    console.log('\n❌ Coverage thresholds not met!\n');
    process.exit(1);
  } else {
    console.log('\n✅ All thresholds passed!\n');
  }
}

function printMetric(
  name: string,
  pct: number,
  covered: number,
  total: number
): void {
  const barLength = 40;
  const filled = Math.floor((pct / 100) * barLength);
  const empty = barLength - filled;

  const color = pct >= 80 ? '\x1b[32m' :  // 綠色
                pct >= 70 ? '\x1b[33m' :  // 黃色
                '\x1b[31m';                // 紅色
  const reset = '\x1b[0m';

  const bar = color + '█'.repeat(filled) + '\x1b[90m' + '░'.repeat(empty) + reset;
  const pctStr = `${pct.toFixed(1)}%`.padStart(6);
  const coverage = `${covered}/${total}`.padStart(12);

  console.log(`${name.padEnd(12)} ${bar} ${color}${pctStr}${reset} ${coverage}`);
}

generateEnhancedReport();

視覺化覆蓋率報告

1. HTML 互動式報告

Vitest 內建的 HTML 報告已經很好，但我們可以加入更多資訊：

// scripts/enhanced-html-report.ts
import fs from 'fs';
import path from 'path';

/**
 * 在 HTML 報告中加入自訂資訊
 */
function enhanceHtmlReport() {
  const htmlPath = path.join(process.cwd(), 'coverage/index.html');

  if (!fs.existsSync(htmlPath)) {
    console.error('HTML report not found');
    return;
  }

  let html = fs.readFileSync(htmlPath, 'utf-8');

  // 加入自訂 CSS
  const customCSS = `
    <style>
      .custom-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 20px;
        text-align: center;
        margin-bottom: 20px;
      }
      .custom-stats {
        display: flex;
        justify-content: space-around;
        padding: 20px;
        background: #f5f5f5;
        margin: 20px 0;
      }
      .stat-card {
        background: white;
        padding: 15px 30px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        text-align: center;
      }
      .stat-value {
        font-size: 32px;
        font-weight: bold;
        color: #667eea;
      }
      .stat-label {
        font-size: 12px;
        color: #666;
        text-transform: uppercase;
        margin-top: 5px;
      }
    </style>
  `;

  // 加入自訂 Header
  const summary = JSON.parse(
    fs.readFileSync(path.join(process.cwd(), 'coverage/coverage-summary.json'), 'utf-8')
  );

  const customHeader = `
    <div class="custom-header">
      <h1>🧪 Kyo Dashboard - Test Coverage Report</h1>
      <p>Generated on ${new Date().toLocaleString()}</p>
    </div>
    <div class="custom-stats">
      <div class="stat-card">
        <div class="stat-value">${summary.total.lines.pct.toFixed(1)}%</div>
        <div class="stat-label">Line Coverage</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">${summary.total.statements.pct.toFixed(1)}%</div>
        <div class="stat-label">Statement Coverage</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">${summary.total.functions.pct.toFixed(1)}%</div>
        <div class="stat-label">Function Coverage</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">${summary.total.branches.pct.toFixed(1)}%</div>
        <div class="stat-label">Branch Coverage</div>
      </div>
    </div>
  `;

  // 插入到 body 標籤後
  html = html.replace('<body>', `<body>${customCSS}${customHeader}`);

  fs.writeFileSync(htmlPath, html);

  console.log('✅ Enhanced HTML report generated');
}

enhanceHtmlReport();

2. 覆蓋率趨勢追蹤

// scripts/track-coverage-history.ts
import fs from 'fs';
import path from 'path';

interface CoverageHistory {
  timestamp: string;
  commit?: string;
  branch?: string;
  coverage: {
    lines: number;
    statements: number;
    functions: number;
    branches: number;
  };
}

/**
 * 追蹤覆蓋率歷史
 */
function trackCoverageHistory() {
  const historyFile = path.join(process.cwd(), 'coverage-history.json');
  const summaryFile = path.join(process.cwd(), 'coverage/coverage-summary.json');

  if (!fs.existsSync(summaryFile)) {
    console.error('Coverage summary not found');
    return;
  }

  const summary = JSON.parse(fs.readFileSync(summaryFile, 'utf-8'));

  // 讀取歷史記錄
  let history: CoverageHistory[] = [];
  if (fs.existsSync(historyFile)) {
    history = JSON.parse(fs.readFileSync(historyFile, 'utf-8'));
  }

  // 新增當前記錄
  const currentRecord: CoverageHistory = {
    timestamp: new Date().toISOString(),
    commit: process.env.GITHUB_SHA?.substring(0, 7),
    branch: process.env.GITHUB_REF_NAME,
    coverage: {
      lines: summary.total.lines.pct,
      statements: summary.total.statements.pct,
      functions: summary.total.functions.pct,
      branches: summary.total.branches.pct,
    },
  };

  history.push(currentRecord);

  // 保留最近 100 筆記錄
  if (history.length > 100) {
    history = history.slice(-100);
  }

  fs.writeFileSync(historyFile, JSON.stringify(history, null, 2));

  // 分析趨勢
  if (history.length >= 2) {
    const previous = history[history.length - 2];
    const current = history[history.length - 1];

    console.log('\n📈 Coverage Trend:\n');

    Object.entries(current.coverage).forEach(([metric, value]) => {
      const prev = previous.coverage[metric as keyof typeof previous.coverage];
      const diff = value - prev;
      const arrow = diff > 0 ? '⬆️' : diff < 0 ? '⬇️' : '➡️';
      const color = diff > 0 ? '\x1b[32m' : diff < 0 ? '\x1b[31m' : '\x1b[33m';
      const reset = '\x1b[0m';

      console.log(
        `${arrow} ${metric.padEnd(12)} ${color}${diff >= 0 ? '+' : ''}${diff.toFixed(2)}%${reset} (${prev.toFixed(1)}% → ${value.toFixed(1)}%)`
      );
    });
  }

  console.log('\n✅ Coverage history updated');
}

trackCoverageHistory();

Pre-commit Hooks 設定

1. Husky 安裝與配置

# 安裝 Husky 和 lint-staged
pnpm add -D husky lint-staged

# 初始化 Husky
pnpm exec husky init

// package.json
{
  "scripts": {
    "prepare": "husky",
    "test:staged": "vitest related --run",
    "type-check": "tsc --noEmit"
  },
  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --fix",
      "prettier --write",
      "vitest related --run"
    ],
    "*.{json,md,yml,yaml}": [
      "prettier --write"
    ]
  }
}

2. Git Hooks 腳本

# .husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

echo "🔍 Running pre-commit checks..."

# 1. Lint staged files
echo "📝 Linting..."
pnpm lint-staged

# 2. Type check
echo "🔧 Type checking..."
pnpm type-check

# 3. Run tests for changed files
echo "🧪 Running related tests..."
pnpm test:staged

echo "✅ Pre-commit checks passed!"

# .husky/commit-msg
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# Commit message 格式驗證
commit_msg_file=$1
commit_msg=$(cat "$commit_msg_file")

# 驗證 Conventional Commits 格式
conventional_commit_regex='^(feat|fix|docs|style|refactor|perf|test|chore|revert)(\(.+\))?: .{1,50}'

if ! echo "$commit_msg" | grep -qE "$conventional_commit_regex"; then
    echo "❌ Invalid commit message format!"
    echo ""
    echo "Commit message should follow Conventional Commits format:"
    echo "  <type>(<scope>): <subject>"
    echo ""
    echo "Examples:"
    echo "  feat(auth): add login functionality"
    echo "  fix(api): resolve OTP timeout issue"
    echo "  docs: update README"
    echo ""
    exit 1
fi

echo "✅ Commit message format valid"

3. 智能測試執行策略

// scripts/run-related-tests.ts
import { execSync } from 'child_process';
import fs from 'fs';

/**
 * 只執行與變更檔案相關的測試
 * 大幅減少 pre-commit 時間
 */
function runRelatedTests() {
  // 取得 staged 檔案
  const stagedFiles = execSync('git diff --cached --name-only --diff-filter=ACM')
    .toString()
    .trim()
    .split('\n')
    .filter(file => file.endsWith('.ts') || file.endsWith('.tsx'));

  if (stagedFiles.length === 0) {
    console.log('No TypeScript files to test');
    return;
  }

  console.log(`\n🧪 Running tests for ${stagedFiles.length} changed files...\n`);

  // 找出對應的測試檔案
  const testFiles = stagedFiles
    .map(file => {
      // 原檔案本身如果是測試檔案
      if (file.includes('.test.') || file.includes('.spec.')) {
        return file;
      }

      // 尋找對應的測試檔案
      const testFile = file
        .replace(/\.tsx?$/, '.test.$&')
        .replace('src/', 'src/');

      if (fs.existsSync(testFile)) {
        return testFile;
      }

      return null;
    })
    .filter(Boolean);

  if (testFiles.length === 0) {
    console.log('⚠️  No test files found for changed files');
    console.log('Consider adding tests for:');
    stagedFiles.forEach(file => console.log(`  - ${file}`));
    return;
  }

  // 執行測試
  try {
    execSync(`vitest run ${testFiles.join(' ')}`, {
      stdio: 'inherit',
    });

    console.log('\n✅ All related tests passed!\n');
  } catch (error) {
    console.error('\n❌ Tests failed!\n');
    process.exit(1);
  }
}

runRelatedTests();

測試效能優化深度解析

1. 並行測試策略

// vitest.config.ts - 效能優化配置
export default defineConfig({
  test: {
    // 策略 1: 使用多執行緒
    threads: true,

    // 策略 2: 最大並行數
    // 建議設定為 CPU 核心數 * 1.5
    maxConcurrency: Math.ceil(os.cpus().length * 1.5),

    // 策略 3: 測試檔案隔離
    // false = 更快但可能有副作用
    // true = 更慢但更安全
    isolate: false,

    // 策略 4: 測試執行順序
    sequence: {
      // 並行執行 hooks
      hooks: 'parallel',

      // 隨機順序可發現測試間的依賴問題
      shuffle: false,

      // 依檔案大小排序（大檔案先執行）
      sequencer: class CustomSequencer {
        async sort(files: string[]) {
          return files.sort((a, b) => {
            const sizeA = fs.statSync(a).size;
            const sizeB = fs.statSync(b).size;
            return sizeB - sizeA; // 大檔案先執行
          });
        }
      },
    },

    // 策略 5: 快取測試結果
    cache: {
      dir: 'node_modules/.vitest',
    },

    // 策略 6: 提前失敗
    bail: 1, // 第一個錯誤後停止（加速失敗回饋）
  },
});

2. Mock 效能優化

// src/test/mocks/optimized-mocks.ts

/**
 * ❌ 慢速 Mock - 每次都建立新物件
 */
export function slowMock() {
  return {
    fetchData: vi.fn(() => Promise.resolve({ data: [] })),
    postData: vi.fn(() => Promise.resolve({ success: true })),
    deleteData: vi.fn(() => Promise.resolve()),
  };
}

/**
 * ✅ 快速 Mock - 重用物件
 */
const cachedMocks = new Map();

export function fastMock(key: string) {
  if (!cachedMocks.has(key)) {
    cachedMocks.set(key, {
      fetchData: vi.fn(() => Promise.resolve({ data: [] })),
      postData: vi.fn(() => Promise.resolve({ success: true })),
      deleteData: vi.fn(() => Promise.resolve()),
    });
  }

  // 重置 mock 而非重新建立
  const mock = cachedMocks.get(key);
  vi.clearAllMocks();
  return mock;
}

/**
 * 效能比較：
 * slowMock: ~1000 calls/sec
 * fastMock: ~50000 calls/sec (50x faster!)
 */

3. 測試資料生成優化

// src/test/factories/user-factory.ts
import { faker } from '@faker-js/faker';

/**
 * ❌ 慢速工廠 - 每次都生成新資料
 */
export function createUserSlow() {
  return {
    id: faker.string.uuid(),
    name: faker.person.fullName(),
    email: faker.internet.email(),
    avatar: faker.image.avatar(),
    createdAt: faker.date.past(),
  };
}

/**
 * ✅ 快速工廠 - 預生成資料池
 */
class UserFactory {
  private pool: User[] = [];
  private readonly poolSize = 100;
  private index = 0;

  constructor() {
    this.refillPool();
  }

  private refillPool() {
    for (let i = this.pool.length; i < this.poolSize; i++) {
      this.pool.push({
        id: faker.string.uuid(),
        name: faker.person.fullName(),
        email: faker.internet.email(),
        avatar: faker.image.avatar(),
        createdAt: faker.date.past(),
      });
    }
  }

  create(): User {
    if (this.index >= this.pool.length) {
      this.index = 0;
    }
    return { ...this.pool[this.index++] };
  }

  createMany(count: number): User[] {
    return Array.from({ length: count }, () => this.create());
  }
}

export const userFactory = new UserFactory();

/**
 * 效能比較：
 * createUserSlow: ~1000 users/sec
 * userFactory.create: ~100000 users/sec (100x faster!)
 */

測試品質度量

1. Mutation Testing (突變測試)

# 安裝 Stryker (Mutation Testing 工具)
pnpm add -D @stryker-mutator/core @stryker-mutator/vitest-runner

// stryker.config.json
{
  "$schema": "./node_modules/@stryker-mutator/core/schema/stryker-schema.json",
  "packageManager": "pnpm",
  "testRunner": "vitest",
  "coverageAnalysis": "perTest",
  "mutate": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "!src/**/*.test.ts",
    "!src/**/*.test.tsx",
    "!src/**/*.spec.ts",
    "!src/**/*.spec.tsx"
  ],
  "thresholds": {
    "high": 80,
    "low": 70,
    "break": 60
  }
}

突變測試會自動修改你的程式碼（如改變 > 為 >=），然後跑測試看是否能偵測到這些變化。這可以發現測試的盲點。

2. 測試複雜度分析

// scripts/test-complexity.ts
import fs from 'fs';
import path from 'path';
import { parse } from '@babel/parser';
import traverse from '@babel/traverse';

/**
 * 分析測試檔案的複雜度
 */
function analyzeTestComplexity(filePath: string) {
  const code = fs.readFileSync(filePath, 'utf-8');
  const ast = parse(code, {
    sourceType: 'module',
    plugins: ['typescript', 'jsx'],
  });

  let testCount = 0;
  let assertionCount = 0;
  let mockCount = 0;
  let asyncTestCount = 0;

  traverse(ast, {
    CallExpression(path) {
      const callee = path.node.callee;

      // 計算測試數量
      if (
        callee.type === 'Identifier' &&
        ['test', 'it', 'describe'].includes(callee.name)
      ) {
        testCount++;

        // 檢查是否為非同步測試
        const callback = path.node.arguments[1];
        if (
          callback &&
          callback.type === 'ArrowFunctionExpression' &&
          callback.async
        ) {
          asyncTestCount++;
        }
      }

      // 計算斷言數量
      if (
        callee.type === 'MemberExpression' &&
        callee.object.type === 'Identifier' &&
        ['expect', 'assert'].includes(callee.object.name)
      ) {
        assertionCount++;
      }

      // 計算 Mock 數量
      if (
        callee.type === 'MemberExpression' &&
        callee.object.type === 'Identifier' &&
        callee.object.name === 'vi' &&
        callee.property.type === 'Identifier' &&
        ['fn', 'mock', 'spyOn'].includes(callee.property.name)
      ) {
        mockCount++;
      }
    },
  });

  return {
    file: path.relative(process.cwd(), filePath),
    testCount,
    assertionCount,
    mockCount,
    asyncTestCount,
    avgAssertionsPerTest: testCount > 0 ? assertionCount / testCount : 0,
    complexity: calculateComplexity({
      testCount,
      assertionCount,
      mockCount,
      asyncTestCount,
    }),
  };
}

function calculateComplexity(metrics: {
  testCount: number;
  assertionCount: number;
  mockCount: number;
  asyncTestCount: number;
}): 'simple' | 'moderate' | 'complex' {
  const score =
    metrics.testCount * 1 +
    metrics.assertionCount * 0.5 +
    metrics.mockCount * 2 +
    metrics.asyncTestCount * 1.5;

  if (score < 20) return 'simple';
  if (score < 50) return 'moderate';
  return 'complex';
}

// 執行分析
const testFiles = execSync('find src -name "*.test.ts*"')
  .toString()
  .trim()
  .split('\n');

const results = testFiles.map(analyzeTestComplexity);

console.log('\n📊 Test Complexity Analysis:\n');
results
  .sort((a, b) => b.testCount - a.testCount)
  .forEach(result => {
    const complexityEmoji = {
      simple: '🟢',
      moderate: '🟡',
      complex: '🔴',
    }[result.complexity];

    console.log(`${complexityEmoji} ${result.file}`);
    console.log(`   Tests: ${result.testCount}, Assertions: ${result.assertionCount}, Mocks: ${result.mockCount}`);
  });

今日總結

我們今天完成了測試三部曲的前端部分：

核心成就

1. 覆蓋率視覺化: HTML 報告、趨勢追蹤、自訂 Badge
2. 效能優化: 並行測試、Mock 快取、測試資料池
3. Pre-commit Hooks: Husky + lint-staged 自動化檢查
4. 測試品質: Mutation Testing、複雜度分析

深度技術分析

V8 vs Istanbul Coverage Provider:

• V8: 更快（原生支援）、更準確、與 Chrome DevTools 一致
• Istanbul: 更成熟、更多工具整合、支援舊版 Node.js
• 💡 推薦：新專案使用 V8

測試並行化權衡:

• ✅ 速度提升 3-5 倍
• ⚠️ 可能發現之前隱藏的測試依賴問題
• ⚠️ 記憶體使用增加
• 💡 建議：先確保測試隔離再啟用並行

Pre-commit vs Pre-push:

• Pre-commit: 快速檢查（lint + 相關測試）
• Pre-push: 完整檢查（全部測試 + 覆蓋率）
• 💡 策略：Pre-commit 輕量級，Pre-push 完整驗證

效能優化實測

優化前 vs 優化後:

測試執行時間:
❌ 優化前: 120 秒
✅ 優化後: 25 秒 (5x faster!)

Pre-commit 時間:
❌ 優化前: 45 秒
✅ 優化後: 8 秒 (5.6x faster!)

最佳實踐檢查清單

• ✅ 設定合理的覆蓋率門檻（不追求 100%）
• ✅ 視覺化覆蓋率報告便於審查
• ✅ 追蹤覆蓋率趨勢防止退化
• ✅ Pre-commit hooks 保證程式碼品質
• ✅ 並行測試加速回饋循環
• ✅ Mock 和測試資料重用提升效能
• ✅ Mutation Testing 驗證測試品質