前端工程化系列八：自动化测试

// vitest.config.ts
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    environment: 'node', // 单元测试使用 node 环境，避免 DOM 依赖
    globals: true,        // 启用全局 API，简化测试代码

    // 覆盖率配置：基于 v8 引擎的原生覆盖率统计
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
      include: ['src/**/*.{js,ts}'],
      exclude: ['**/*.test.{js,ts}', '**/node_modules/**'],

      // 覆盖率阈值：根据代码类型差异化设置
      thresholds: {
        global: { branches: 70, functions: 80, lines: 80, statements: 80 },
        'src/utils/': { branches: 90, functions: 95, lines: 90, statements: 90 }
      }
    },

    // 并发执行配置：充分利用多核 CPU 性能
    pool: 'threads',
    poolOptions: {
      threads: { singleThread: false, minThreads: 2, maxThreads: 8 }
    }
  }
})

// utils/format.test.ts
import { describe, it, expect, vi } from 'vitest'
import { formatPrice, debounce } from './format'

describe('formatPrice', () => {
  it('should format price correctly', () => {
    expect(formatPrice(1234.56)).toBe('¥1,234.56')
    expect(formatPrice(0)).toBe('¥0.00')
    expect(formatPrice(null)).toBe('¥0.00')
  })

  it('should handle edge cases', () => {
    expect(formatPrice(-100)).toBe('-¥100.00')
    expect(formatPrice(Infinity)).toBe('¥∞')
  })
})

describe('debounce', () => {
  it('should delay function execution', async () => {
    const mockFn = vi.fn()
    const debouncedFn = debounce(mockFn, 100)

    debouncedFn()
    debouncedFn()
    debouncedFn()

    expect(mockFn).not.toHaveBeenCalled()

    await new Promise(resolve => setTimeout(resolve, 150))
    expect(mockFn).toHaveBeenCalledTimes(1)
  })
})

// vitest.config.ts - 组件测试配置
export default defineConfig({
  test: {
    environment: 'jsdom',  // 启用 jsdom 模拟浏览器 DOM API
    setupFiles: ['./src/test/setup.ts'],
    globals: true,

    // 组件测试专用配置
    css: true,           // 支持 CSS 文件导入
    mockReset: true,     // 每次测试后重置 mock
    restoreMocks: true,  // 恢复原始实现
  }
})

// src/test/setup.ts
import '@testing-library/jest-dom'        // 扩展 DOM 断言方法
import { cleanup } from '@testing-library/react'
import { afterEach, vi } from 'vitest'

// 每个测试后自动清理 DOM，避免测试间相互影响
afterEach(() => {
  cleanup()
  vi.clearAllMocks()  // 清理所有 mock 状态
})

// 模拟浏览器 API（根据项目需求添加）
Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: vi.fn().mockImplementation(query => ({
    matches: false,
    media: query,
    addEventListener: vi.fn(),
    removeEventListener: vi.fn(),
  })),
})

// components/LoginForm.test.tsx
import { describe, it, expect, vi } from 'vitest'
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
import { LoginForm } from './LoginForm'

describe('LoginForm', () => {
  it('should show validation errors', async () => {
    const mockOnSubmit = vi.fn()
    render(<LoginForm onSubmit={mockOnSubmit} />)

    // 测试表单验证
    fireEvent.click(screen.getByRole('button', { name: '登录' }))

    await waitFor(() => {
      expect(screen.getByText('请输入用户名')).toBeInTheDocument()
      expect(screen.getByText('请输入密码')).toBeInTheDocument()
    })

    expect(mockOnSubmit).not.toHaveBeenCalled()
  })

  it('should submit form with valid data', async () => {
    const mockOnSubmit = vi.fn()
    render(<LoginForm onSubmit={mockOnSubmit} />)

    // 填写表单
    fireEvent.change(screen.getByLabelText('用户名'), {
      target: { value: 'testuser' }
    })
    fireEvent.change(screen.getByLabelText('密码'), {
      target: { value: 'password123' }
    })

    fireEvent.click(screen.getByRole('button', { name: '登录' }))

    await waitFor(() => {
      expect(mockOnSubmit).toHaveBeenCalledWith({
        username: 'testuser',
        password: 'password123'
      })
    })
  })
})

// src/test/mocks/handlers.ts - API Mock 配置
import { http, HttpResponse } from 'msw'

export const handlers = [
  // 登录接口 Mock
  http.post('/api/auth/login', async ({ request }) => {
    const { username, password } = await request.json()

    // 模拟业务逻辑：验证用户凭据
    if (username === 'demo@example.com' && password === 'password123') {
      return HttpResponse.json({
        token: 'mock-jwt-token-12345',
        user: { id: 1, username: 'demo@example.com', role: 'user' },
        expires: Date.now() + 3600000  // 1小时过期
      }, { status: 200 })
    }

    // 模拟错误响应
    return HttpResponse.json(
      { code: 'AUTH_FAILED', message: '用户名或密码错误' },
      { status: 401 }
    )
  }),

  // 用户信息接口 Mock
  http.get('/api/user/profile', ({ request }) => {
    const authHeader = request.headers.get('Authorization')

    if (!authHeader || !authHeader.startsWith('Bearer ')) {
      return HttpResponse.json(
        { code: 'UNAUTHORIZED', message: '未授权访问' },
        { status: 401 }
      )
    }

    return HttpResponse.json({
      id: 1,
      username: 'demo@example.com',
      email: 'demo@example.com',
      avatar: 'https://avatars.example.com/1',
      preferences: { theme: 'light', language: 'zh-CN' }
    })
  })
]

// src/test/mocks/server.ts
import { setupServer } from 'msw/node'
import { handlers } from './handlers'

export const server = setupServer(...handlers)

// 扩展服务器配置，支持测试期间动态修改Mock行为
export function mockApiError(endpoint, errorResponse) {
  server.use(
    http.all(endpoint, () => {
      return HttpResponse.json(errorResponse, { status: 500 })
    })
  )
}

// features/auth/auth.integration.test.ts
import { describe, it, expect, beforeAll, afterEach, afterAll } from 'vitest'
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
import { server } from '../../test/mocks/server'
import { AuthProvider } from './AuthProvider'
import { LoginPage } from './LoginPage'

beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

describe('Authentication Integration', () => {
  it('完整登录流程验证：表单提交 → API调用 → 状态更新 → 路由跳转', async () => {
    render(
      <MemoryRouter>
        <AuthProvider>
          <LoginPage />
        </AuthProvider>
      </MemoryRouter>
    )

    // 1. 表单交互验证
    const usernameInput = screen.getByLabelText('邮箱')
    const passwordInput = screen.getByLabelText('密码')
    const submitButton = screen.getByRole('button', { name: '登录' })

    await fireEvent.type(usernameInput, 'demo@example.com')
    await fireEvent.type(passwordInput, 'password123')
    fireEvent.click(submitButton)

    // 2. 加载状态验证
    expect(screen.getByText('登录中...')).toBeInTheDocument()

    // 3. 登录成功后状态验证
    await waitFor(() => {
      expect(screen.getByText('欢迎回来')).toBeInTheDocument()
    }, { timeout: 3000 })

    // 4. 持久化状态验证
    expect(localStorage.getItem('auth-token')).toBe('mock-jwt-token-12345')
  })
})

// playwright.config.ts - E2E测试配置
import { defineConfig, devices } from '@playwright/test'

export default defineConfig({
  testDir: './e2e',
  timeout: 30000,          // 单个测试超时时间
  fullyParallel: true,     // 并行执行以提升效率
  retries: process.env.CI ? 2 : 0,    // CI环境启用重试机制
  workers: process.env.CI ? 2 : 4,    // 控制并发数

  use: {
    baseURL: 'http://localhost:3000',
    trace: 'retain-on-failure',        // 失败时保留执行轨迹
    screenshot: 'only-on-failure',     // 仅在失败时截图
    video: 'retain-on-failure',       // 失败时保留视频
  },

  // 多浏览器覆盖（按重要性排序）
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
  ],

  // 自动启动开发服务器
  webServer: {
    command: 'npm run preview',  // 使用production build
    port: 4173,
    reuseExistingServer: !process.env.CI
  }
})

// e2e/critical-paths.spec.ts - 关键业务路径测试
import { test, expect } from '@playwright/test'

test.describe('关键业务路径', () => {
  test('用户注册登录流程 @critical', async ({ page }) => {
    // 1. 访问登录页面
    await page.goto('/login')

    // 2. 跳转到注册页面
    await page.click('text=立即注册')
    await expect(page).toHaveURL('/register')

    // 3. 填写注册信息
    await page.fill('[name="email"]', 'e2e-test@example.com')
    await page.fill('[name="password"]', 'Test123456!')
    await page.click('[type="submit"]')

    // 4. 验证注册成功，自动跳转到首页
    await expect(page).toHaveURL('/', { timeout: 10000 })
    await expect(page.locator('.user-menu')).toBeVisible()
  })

  test('购物车到下单流程 @critical', async ({ page, context }) => {
    // 模拟已登录状态
    await context.addCookies([{
      name: 'auth-token',
      value: 'test-token-123',
      domain: 'localhost',
      path: '/'
    }])

    await page.goto('/products')

    // 添加商品到购物车
    await page.locator('[data-testid="product-card"]').first().click()
    await page.click('[data-testid="add-to-cart"]')

    // 进入购物车并结算
    await page.click('[data-testid="cart-icon"]')
    await page.click('text=立即结算')

    // 验证到达支付页面
    await expect(page.locator('.payment-form')).toBeVisible()
  })
})

// playwright.config.ts 中添加视觉测试配置
export default defineConfig({
  // ... 其他配置
  use: {
    // 确保截图的一致性
    locale: 'zh-CN',
    timezoneId: 'Asia/Shanghai',
  },
  expect: {
    // 视觉对比配置
    toHaveScreenshot: {
      threshold: 0.2,        // 允许的像素差异阈值
      mode: 'strict',        // 严格模式，确保像素级一致
    },
  },
})

// e2e/visual-regression.spec.ts
import { test } from '@playwright/test'

test.describe('视觉回归测试', () => {
  test('首页视觉一致性验证', async ({ page }) => {
    await page.goto('/')

    // 等待关键内容加载完成
    await page.waitForLoadState('networkidle')

    // 隐藏动态内容，确保截图稳定
    await page.addStyleTag({
      content: '.dynamic-timestamp, .live-counter { visibility: hidden !important; }'
    })

    // 使用 Playwright 内置的视觉对比
    await expect(page).toHaveScreenshot('homepage.png', {
      fullPage: true
    })
  })

  test('组件库样式回归检测', async ({ page }) => {
    await page.goto('/components/button')

    // 测试按钮组件的各种状态
    const buttonStates = ['default', 'hover', 'active', 'disabled']

    for (const state of buttonStates) {
      const button = page.locator('[data-testid="primary-button"]')

      if (state === 'hover') {
        await button.hover()
      } else if (state === 'disabled') {
        await page.evaluate(() => {
          document.querySelector('[data-testid="primary-button"]').disabled = true
        })
      }

      await expect(button).toHaveScreenshot(`button-${state}.png`)
    }
  })

  test('响应式布局验证', async ({ page }) => {
    const viewports = [
      { width: 375, height: 667, name: 'mobile' },
      { width: 768, height: 1024, name: 'tablet' },
      { width: 1920, height: 1080, name: 'desktop' }
    ]

    for (const viewport of viewports) {
      await page.setViewportSize({ width: viewport.width, height: viewport.height })
      await page.goto('/')
      await page.waitForLoadState('networkidle')

      await expect(page).toHaveScreenshot(`homepage-${viewport.name}.png`, {
        fullPage: true
      })
    }
  })
})

# .github/workflows/pr-check.yml
name: PR Quality Check

on:
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      # 并行执行快速测试
      - name: Unit Tests
        run: pnpm test:unit --run

      - name: Component Tests (Changed files)
        run: |
          # 只测试变更相关的组件
          CHANGED_FILES=$(git diff --name-only origin/main...HEAD | grep -E '\.(tsx?|jsx?)$' | head -20)
          if [ ! -z "$CHANGED_FILES" ]; then
            pnpm test:component --run --related $CHANGED_FILES
          fi

      - name: Integration Tests (Critical paths)
        run: pnpm test:integration --run --testPathPattern="critical"

      - name: Type Check
        run: pnpm type-check

      - name: Lint
        run: pnpm lint --max-warnings 0

      # 上传覆盖率报告
      - name: Upload coverage
        uses: codecov/codecov-action@v3
        with:
          file: ./coverage/lcov.info

# .github/workflows/main-validation.yml
name: Main Branch Validation

on:
  push:
    branches: [main]

jobs:
  full-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      # 完整测试套件
      - name: Full Test Suite
        run: |
          pnpm test:unit --run --coverage
          pnpm test:component --run
          pnpm test:integration --run

      # 构建验证
      - name: Build Check
        run: pnpm build

      # 关键路径E2E测试
      - name: E2E Critical Paths
        run: |
          pnpm dev &
          sleep 30
          pnpm test:e2e --project=chromium --grep="@critical"

      # 通知相关团队
      - name: Notify on failure
        if: failure()
        run: |
          curl -X POST $SLACK_WEBHOOK \
            -H 'Content-type: application/json' \
            --data '{"text":"🚨 主分支测试失败！请立即检查"}'

# .github/workflows/pre-release.yml
name: Pre-Release Testing

on:
  workflow_dispatch:  # 手动触发
  push:
    tags:
      - 'v*'

jobs:
  comprehensive-test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        browser: [chromium, firefox, webkit]
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Build for production
        run: pnpm build

      # 启动生产版本进行测试
      - name: Start production server
        run: |
          pnpm preview &
          sleep 30

      # 完整E2E测试
      - name: E2E Tests (${{ matrix.browser }})
        run: pnpm test:e2e --project=${{ matrix.browser }}

      # 性能测试
      - name: Performance Testing
        if: matrix.browser == 'chromium'
        run: pnpm test:performance

      # 视觉回归测试
      - name: Visual Regression
        if: matrix.browser == 'chromium'
        run: pnpm test:visual

      # 上传测试报告
      - name: Upload test results
        uses: actions/upload-artifact@v3
        if: always()
        with:
          name: test-results-${{ matrix.browser }}
          path: |
            playwright-report/
            test-results/

# .github/workflows/nightly.yml
name: Nightly Health Check

on:
  schedule:
    - cron: '0 2 * * *'  # 每天凌晨2点执行

jobs:
  health-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      # 完整测试套件 + 额外检查
      - name: Comprehensive Testing
        run: |
          pnpm test --run --coverage
          pnpm test:e2e
          pnpm test:performance --extended
          pnpm test:accessibility
          pnpm test:security

      # 依赖安全检查
      - name: Security Audit
        run: pnpm audit --audit-level moderate

      # 包大小分析
      - name: Bundle Size Analysis
        run: pnpm analyze:bundle

      # 代码质量报告
      - name: Code Quality Report
        run: |
          pnpm lint --format json > lint-report.json
          pnpm test:coverage --reporter json > coverage-report.json

      # 发送周报
      - name: Send Weekly Report
        if: github.event.schedule == '0 2 * * 1'  # 周一执行
        run: |
          python scripts/generate-health-report.py
          python scripts/send-weekly-report.py

jobs:
  test:
    strategy:
      matrix:
        shard: [1, 2, 3, 4]  # 将测试分片并行执行
    steps:
      - name: Run tests
        run: pnpm test --shard=${{ matrix.shard }}/4

- name: Cache test results
  uses: actions/cache@v3
  with:
    path: |
      node_modules/.cache
      .vitest
    key: test-cache-${{ hashFiles('**/package.json') }}-${{ hashFiles('**/*.test.*') }}

- name: E2E Tests with retry
  run: |
    for i in {1..3}; do
      pnpm test:e2e && break
      echo "Attempt $i failed, retrying..."
      sleep 10
    done

- name: Skip tests for docs changes
  run: |
    CHANGED_FILES=$(git diff --name-only HEAD~1)
    if echo "$CHANGED_FILES" | grep -q -E '\.(md|txt)$' && ! echo "$CHANGED_FILES" | grep -q -E '\.(js|ts|tsx?)$'; then
      echo "Only documentation changed, skipping tests"
      exit 0
    fi
    pnpm test

// scripts/test-metrics.js
const metrics = {
  testDuration: process.env.TEST_DURATION,
  testCount: process.env.TEST_COUNT,
  failureRate: process.env.FAILURE_RATE,
  coverage: process.env.COVERAGE_PERCENT
}

// 发送到监控系统
await sendMetrics('test-pipeline', metrics)

// 告警规则
if (metrics.testDuration > 600) {  // 10分钟
  await sendAlert('测试执行时间过长')
}

if (metrics.failureRate > 0.05) {  // 5%
  await sendAlert('测试失败率过高')
}

// 根据代码变更智能选择测试
const changedFiles = getChangedFiles()
const testPlan = generateTestPlan(changedFiles)

// 高风险变更 = 执行更多测试
if (testPlan.riskLevel === 'high') {
  await runFullTestSuite()
} else {
  await runTargetedTests(testPlan.selectedTests)
}

// 1. 通过埋点数据分析高频路径
const criticalPaths = analytics.getTopUserFlows(0.8) // 80%用户会经过的路径

// 2. 通过业务影响评估
const businessCritical = [
  'payment/process',
  'auth/login',
  'cart/checkout'
]

// 3. 通过技术依赖分析
const techCritical = dependencies.findHighDependency() // 被大量模块依赖的代码

// ❌ 错误：为了覆盖率而测试
test('getUserName returns user name', () => {
  const user = { name: 'John' }
  expect(getUserName(user)).toBe('John') // 测试了显而易见的逻辑
})

// ✅ 正确：测试有意义的业务逻辑
test('getUserName handles edge cases correctly', () => {
  expect(getUserName(null)).toBe('Anonymous')
  expect(getUserName({})).toBe('Anonymous')
  expect(getUserName({ name: '' })).toBe('Anonymous')
  expect(getUserName({ name: '   ' })).toBe('Anonymous')
})

// 测试发现bug数 / 线上bug数
const testEffectiveness = testBugsFound / productionBugs

// 不同测试层级的问题发现成本
const costByTestLevel = {
  unit: 1,      // 基准成本
  integration: 5,
  e2e: 50,
  production: 500 // 生产环境修复成本
}

// 测试维护时间 / 功能开发时间
const maintenanceRatio = testMaintenanceTime / featureDevelopmentTime

// 目标：维护成本不超过开发成本的30%
const targetRatio = 0.3

function calculateTestROI(testLevel) {
  const bugPreventionValue = estimatedBugCost * bugsPrevented
  const testingCost = developmentTime * hourlyRate + maintenanceCost
  const roi = (bugPreventionValue - testingCost) / testingCost

  return {
    roi,
    breakEvenBugs: testingCost / estimatedBugCost,
    recommendation: roi > 0.5 ? 'invest' : 'optimize'
  }
}