自动化测试规范

工程化规范和自动化测试规范是前端开发中不可或缺的两个重要方面。工程化规范能够提升代码的可维护性和团队协作效率，而自动化测试规范则确保代码质量和功能的稳定性。两者结合使用，可以显著提高开发效率和项目交付质量。

工程化规范的必要性

工程化规范是团队协作的基础，能够统一代码风格、目录结构和开发流程。没有规范的工程化，团队协作会变得混乱，代码维护成本也会大幅增加。例如，不同开发者可能使用不同的缩进方式（空格或制表符），导致代码库中出现风格不一致的问题。

// 不规范示例：混合缩进
function foo() {
  console.log('hello');
    console.log('world'); // 制表符缩进
}

通过引入工程化工具（如 ESLint、Prettier），可以自动格式化代码并强制执行团队约定的规范。

// 规范示例：统一缩进（2个空格）
function foo() {
  console.log('hello');
  console.log('world');
}

代码风格规范

代码风格规范包括命名约定、缩进规则、引号使用等细节。以下是一些常见的规范：

1. 变量命名：使用驼峰命名法（camelCase）
2. 常量命名：使用全大写字母和下划线（UPPER_CASE）
3. 函数命名：使用动词开头（getUserInfo）
4. 缩进：统一使用 2 个空格
5. 引号：统一使用单引号（'）

// 规范示例
const MAX_COUNT = 10;

function getUserInfo(userId) {
  return {
    id: userId,
    name: 'John Doe'
  };
}

目录结构规范

清晰的目录结构能够提高项目的可维护性。一个典型的前端项目目录结构如下：

src/
├── assets/        # 静态资源
├── components/    # 公共组件
├── pages/         # 页面组件
├── store/         # 状态管理
├── utils/         # 工具函数
├── styles/        # 全局样式
└── index.js       # 入口文件

提交信息规范

Git 提交信息也需要规范化，推荐使用 Conventional Commits 规范：

feat: 添加用户登录功能
fix: 修复首页加载异常问题
docs: 更新 README 文档
chore: 更新依赖包

自动化测试规范的必要性

自动化测试是保证代码质量的重要手段，能够快速发现回归问题。前端测试通常包括单元测试、组件测试和端到端测试。

单元测试规范

单元测试针对最小可测试单元（通常是函数）进行测试。使用 Jest 作为测试框架的示例：

// utils/sum.js
function sum(a, b) {
  return a + b;
}

// tests/sum.test.js
test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

单元测试应遵循以下规范：

1. 测试文件与被测文件同名，后缀为 .test.js
2. 每个测试用例描述清晰
3. 测试覆盖率应达到 80% 以上

组件测试规范

组件测试验证 UI 组件的行为。使用 React Testing Library 的示例：

// components/Button.jsx
function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

// tests/Button.test.jsx
import { render, screen, fireEvent } from '@testing-library/react';

test('calls onClick when clicked', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Click me</Button>);
  
  fireEvent.click(screen.getByText('Click me'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

组件测试规范：

1. 测试用户交互行为而非实现细节
2. 避免直接测试组件内部状态
3. 模拟用户操作流程

端到端测试规范

端到端测试验证整个应用的工作流程。使用 Cypress 的示例：

// tests/e2e/login.spec.js
describe('Login', () => {
  it('should login successfully', () => {
    cy.visit('/login');
    cy.get('#username').type('testuser');
    cy.get('#password').type('password123');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

端到端测试规范：

1. 测试关键用户流程
2. 使用有意义的测试数据
3. 避免依赖实现细节的选择器

测试覆盖率要求

不同类型的测试应有不同的覆盖率要求：

1. 单元测试：80% 以上
2. 组件测试：70% 以上
3. 端到端测试：50% 以上

使用 Jest 生成覆盖率报告：

// package.json
{
  "scripts": {
    "test:coverage": "jest --coverage"
  }
}

CI/CD 集成规范

自动化测试应集成到 CI/CD 流程中，确保每次提交都运行测试。GitHub Actions 配置示例：

# .github/workflows/test.yml
name: Test
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm test
      - run: npm run test:coverage

测试数据管理规范

测试数据管理是测试规范的重要组成部分：

1. 使用工厂函数创建测试数据
2. 避免硬编码敏感数据
3. 测试数据应易于维护

// tests/factories/user.js
export function createUser(overrides = {}) {
  return {
    id: 1,
    name: 'Test User',
    email: 'test@example.com',
    ...overrides
  };
}

测试代码质量规范

测试代码也应遵循代码质量规范：

1. 避免重复代码
2. 使用清晰的描述
3. 保持测试独立

// 不推荐：重复代码
test('adds 1 + 2', () => {
  expect(sum(1, 2)).toBe(3);
});

test('adds 2 + 3', () => {
  expect(sum(2, 3)).toBe(5);
});

// 推荐：使用参数化测试
describe.each([
  [1, 2, 3],
  [2, 3, 5]
])('sum(%i, %i)', (a, b, expected) => {
  test(`returns ${expected}`, () => {
    expect(sum(a, b)).toBe(expected);
  });
});

性能测试规范

性能测试应纳入自动化测试流程：

1. 关键路径加载时间
2. 内存使用情况
3. 渲染性能

// tests/performance/homepage.spec.js
describe('Homepage Performance', () => {
  it('should load within 2 seconds', () => {
    const start = performance.now();
    cy.visit('/');
    cy.get('#main-content').should('be.visible');
    const end = performance.now();
    expect(end - start).to.be.lessThan(2000);
  });
});

可访问性测试规范

可访问性测试确保应用对所有用户可用：

1. 键盘导航
2. 屏幕阅读器兼容性
3. 颜色对比度

// tests/a11y/button.spec.js
describe('Button Accessibility', () => {
  it('should be focusable', () => {
    cy.visit('/');
    cy.get('button').first().focus();
    cy.focused().should('have.attr', 'role', 'button');
  });
});

测试环境管理规范

测试环境应与生产环境尽可能一致：

1. 使用相同的数据库版本
2. 模拟第三方服务
3. 环境变量管理

// cypress.config.js
module.exports = {
  e2e: {
    baseUrl: process.env.TEST_URL || 'http://localhost:3000'
  }
}

测试报告规范

测试报告应包含足够的信息：

1. 测试通过率
2. 失败原因
3. 相关截图

# Jest 配置
module.exports = {
  reporters: [
    'default',
    ['jest-html-reporters', {
      publicPath: './test-reports'
    }]
  ]
}

测试维护规范

测试代码需要定期维护：

1. 删除过时测试
2. 更新失效测试
3. 重构重复测试

// 定期检查测试有效性
describe('Legacy Feature', () => {
  it.skip('should be removed in next version', () => {
    // 标记为跳过，准备移除
  });
});