Как оценивались результаты тестирования?

Оценка результатов тестирования в фронтенд-разработке

Оценка результатов тестирования - ключевой процесс обеспечения качества. Расскажу о методологиях и метриках, которые используются на практике.

Виды тестирования

Unit тесты

Тестируют отдельные функции и компоненты в изоляции:

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

describe('Button Component', () => {
  it('should render button with text', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByRole('button')).toHaveTextContent('Click me');
  });
  
  it('should call onClick handler when clicked', () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click</Button>);
    screen.getByRole('button').click();
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

Integration тесты

Тестируют взаимодействие нескольких компонентов:

describe('UserForm Integration', () => {
  it('should submit form with user data', async () => {
    const mockSubmit = jest.fn();
    render(<UserForm onSubmit={mockSubmit} />);
    
    await userEvent.type(
      screen.getByLabelText('Email'),
      'test@example.com'
    );
    await userEvent.click(screen.getByRole('button', { name: /submit/i }));
    
    expect(mockSubmit).toHaveBeenCalledWith({
      email: 'test@example.com'
    });
  });
});

E2E тесты

Тестируют полный user journey через весь интерфейс:

// Playwright E2E тест
import { test, expect } from '@playwright/test';

test('user can login and view dashboard', async ({ page }) => {
  await page.goto('http://localhost:3000/login');
  await page.fill('input[name="email"]', 'user@test.com');
  await page.fill('input[name="password"]', 'password123');
  await page.click('button:has-text("Login")');
  
  await expect(page).toHaveURL('http://localhost:3000/dashboard');
  await expect(page.locator('h1')).toContainText('Dashboard');
});

Метрики качества

Test Coverage

Процент кода, покрытого тестами:

// В package.json
"jest": {
  "collectCoverageFrom": [
    "src/**/*.{js,jsx,ts,tsx}",
    "!src/**/*.d.ts",
    "!src/index.tsx"
  ],
  "coverageThreshold": {
    "global": {
      "branches": 80,
      "functions": 80,
      "lines": 80,
      "statements": 80
    }
  }
}

Процент покрытия для разных слоёв кода:

UIComponents:     95%+ (critical, must test all states)
Hooks:            90%+ (must cover happy path + errors)
Utils/Helpers:    90%+ (must cover edge cases)
Pages:            70%+ (E2E тесты более важны)
Types:            N/A (no tests needed)

Performance метрики

// Lighthouse в CI/CD
const auditResult = {
  performance: 90,
  accessibility: 95,
  bestPractices: 92,
  seo: 90,
  pwa: 80
};

// Core Web Vitals
const cwv = {
  LCP: '< 2.5s',  // Largest Contentful Paint
  FID: '< 100ms', // First Input Delay
  CLS: '< 0.1'    // Cumulative Layout Shift
};

Система оценок тестов

Красная зона (Failed)

Тесты падают, код не готов к отправке:

// FAILED: 5 failed, 45 passed
const result = {
  status: 'FAILED',
  failedCount: 5,
  totalTests: 50,
  coverage: 75,
  action: 'Исправить код, пока все тесты не пройдут'
};

Жёлтая зона (Warning)

Тесты проходят, но покрытие низкое:

const result = {
  status: 'WARNING',
  failedCount: 0,
  coverage: 78,
  minRequired: 80,
  action: 'Добавить тесты для критических путей'
};

Зелёная зона (Success)

Всё хорошо, можно мёржить:

const result = {
  status: 'SUCCESS',
  failedCount: 0,
  totalTests: 120,
  coverage: 92,
  performance: 90,
  action: 'Код готов к мёржу и деплою'
};

Процесс оценки в CI/CD

// GitHub Actions пример
name: Run Tests
on: [pull_request, push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      
      - name: Install dependencies
        run: npm ci
      
      - name: Run unit tests
        run: npm run test:coverage
      
      - name: Check coverage threshold
        run: |
          coverage=$(npm run test:coverage | grep 'Statements' | grep -o '[0-9]*' | head -1)
          if [ $coverage -lt 80 ]; then
            echo "Coverage is $coverage%, but minimum is 80%"
            exit 1
          fi
      
      - name: Run E2E tests
        run: npm run test:e2e
      
      - name: Upload coverage
        uses: codecov/codecov-action@v3

Критерии принятия (DoD)

Оценка результатов включает проверку:

1. Функциональность: все требования реализованы и работают
2. Покрытие: минимум 90% для критических путей
3. Performance: нет регрессии по скорости
4. Accessibility: a11y оценка >= 95
5. Cross-browser: тесты на Chrome, Firefox, Safari, Edge
6. Mobile: responsive дизайн работает на мобильных

Инструменты для оценки

const testingTools = {
  unitTests: ['Jest', 'Vitest'],
  componentTests: ['React Testing Library', '@testing-library/react'],
  e2eTests: ['Playwright', 'Cypress'],
  coverage: ['Istanbul', 'nyc'],
  performance: ['Lighthouse', 'Web Vitals'],
  accessibility: ['axe-core', 'jest-axe'],
  cicd: ['GitHub Actions', 'Jenkins', 'GitLab CI']
};

Выводы

Оценка результатов тестирования - это многоуровневый процесс:

1. Все тесты должны проходить без ошибок
2. Покрытие кода должно быть >= 80-90%
3. Performance и accessibility должны соответствовать стандартам
4. CI/CD должен автоматизировать процесс оценки
5. Метрики должны отслеживаться и улучшаться с течением времени