Day 10: 测试驱动

你：解释一下测试金字塔，什么时候写单元测试、集成测试、E2E测试

你：用 TDD 方式开发一个计算器函数

你：为 Button 组件写单元测试，测试点击事件和不同状态

import { render, fireEvent, screen } from '@testing-library/react';
import Button from './Button';
 
test('按钮点击事件', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>点击我</Button>);
 
  fireEvent.click(screen.getByText('点击我'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});
 
test('禁用状态', () => {
  render(<Button disabled>禁用按钮</Button>);
  expect(screen.getByRole('button')).toBeDisabled();
});

你：为日期格式化函数写测试，覆盖各种输入情况

你：测试用户登录函数，Mock 掉 API 调用

你：为用户注册 API 写集成测试，包含成功和失败场景

const request = require('supertest');
const app = require('../app');
 
describe('用户注册 API', () => {
  test('注册成功', async () => {
    const response = await request(app)
      .post('/api/users/register')
      .send({
        email: 'test@example.com',
        password: 'password123',
        name: '测试用户'
      });
 
    expect(response.status).toBe(201);
    expect(response.body.user.email).toBe('test@example.com');
  });
 
  test('邮箱重复注册', async () => {
    await request(app)
      .post('/api/users/register')
      .send({
        email: 'duplicate@example.com',
        password: 'password123',
        name: '用户1'
      });
 
    const response = await request(app)
      .post('/api/users/register')
      .send({
        email: 'duplicate@example.com',
        password: 'password456',
        name: '用户2'
      });
 
    expect(response.status).toBe(409);
    expect(response.body.error).toContain('邮箱已存在');
  });
});

你：测试用户 CRUD 操作，每个测试前后清理数据库

你：用 Playwright 测试完整的用户注册登录流程

const { test, expect } = require('@playwright/test');
 
test('用户注册登录流程', async ({ page }) => {
  // 访问注册页面
  await page.goto('/register');
 
  // 填写注册表单
  await page.fill('input[name="email"]', 'test@example.com');
  await page.fill('input[name="password"]', 'password123');
  await page.fill('input[name="name"]', '测试用户');
 
  // 点击注册按钮
  await page.click('button[type="submit"]');
 
  // 验证跳转到登录页
  await expect(page).toHaveURL('/login');
 
  // 登录
  await page.fill('input[name="email"]', 'test@example.com');
  await page.fill('input[name="password"]', 'password123');
  await page.click('button[type="submit"]');
 
  // 验证登录成功
  await expect(page.locator('.welcome-message')).toContainText('欢迎，测试用户');
});

你：添加视觉回归测试，对比页面截图发现 UI 变化

你：配置 Jest 测试环境，支持 ES6 模块和 React 组件测试

你：配置测试覆盖率报告，要求覆盖率达到 80%

你：创建测试数据工厂，生成各种测试用的用户数据

你：测试登录表单的各种验证规则

你：测试数据获取组件的加载、成功、错误状态

你：测试不同用户角色的页面访问权限

你：测试完整的订单支付流程，包含各种异常情况

// ❌ 不好的测试名
test('test user function', () => {});
 
// ✅ 好的测试名
test('用户登录失败时显示错误信息', () => {});

// AAA 模式：Arrange, Act, Assert
test('计算总价包含税费', () => {
  // Arrange - 准备数据
  const items = [{ price: 100 }, { price: 200 }];
  const taxRate = 0.1;
 
  // Act - 执行操作
  const total = calculateTotal(items, taxRate);
 
  // Assert - 断言结果
  expect(total).toBe(330);
});

你：确保每个测试相互独立，不依赖其他测试的结果

你：用 TDD 开发一个购物车功能

你：先写测试重现 bug，然后修复让测试通过

你：配置 CI 流水线，每次 Push 代码自动运行测试

name: Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '18'
      - run: npm install
      - run: npm test
      - run: npm run test:e2e

你：测试失败时自动发送邮件通知团队

你：测试 API 在高并发下的表现，找出性能瓶颈

你：检查长时间运行的程序是否有内存泄漏