Как подтверждается безопасность данных?

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

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

1. Test Coverage (Покрытие Кодом)

Покрытие показывает, какой процент кода был выполнен тестами. Это важная метрика, но не гарантирует качество.

// jest.config.js
module.exports = {
  collectCoverageFrom: [
    "src/**/*.{ts,tsx}",
    "!src/**/*.d.ts",
    "!src/index.tsx",
  ],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80,
    },
  },
};

Типы покрытия:

• Lines: процент строк кода, выполненных
• Statements: процент инструкций, выполненных
• Branches: процент условных ветвлений, покрытых
• Functions: процент функций, протестированных

// Плохо: покрытие 100%, но не тестирует ошибки
function add(a, b) {
  return a + b;
}

test("add works", () => {
  expect(add(1, 2)).toBe(3);
});

// Хорошо: тестирует граничные случаи
function add(a, b) {
  if (typeof a !== "number" || typeof b !== "number") {
    throw new Error("Arguments must be numbers");
  }
  return a + b;
}

test("add works with valid numbers", () => {
  expect(add(1, 2)).toBe(3);
});

test("add throws error with invalid arguments", () => {
  expect(() => add("a", 2)).toThrow("Arguments must be numbers");
});

2. Качество Тестов

Качество важнее количества. Хорошие тесты:

// Плохо: непонятное имя, множество утверждений
test("it works", () => {
  const result = calculate(5, 3);
  expect(result).toBe(8);
  expect(result).toBeGreaterThan(0);
  expect(typeof result).toBe("number");
});

// Хорошо: ясное имя, одна логика
describe("calculate", () => {
  test("should return sum of two numbers", () => {
    expect(calculate(5, 3)).toBe(8);
  });

  test("should return positive number when adding positive numbers", () => {
    expect(calculate(5, 3)).toBeGreaterThan(0);
  });

  test("should return a number", () => {
    expect(typeof calculate(5, 3)).toBe("number");
  });
});

3. Тестирование UI компонентов

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

describe("Button Component", () => {
  test("renders button with correct text", () => {
    render(<Button>Click me</Button>);
    expect(screen.getByText("Click me")).toBeInTheDocument();
  });

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

  test("disables button when disabled prop is true", () => {
    render(<Button disabled>Click</Button>);
    expect(screen.getByRole("button")).toBeDisabled();
  });
});

4. E2E Тестирование (Playwright)

import { test, expect } from "@playwright/test";

test("user can navigate and interact with page", async ({ page }) => {
  await page.goto("http://localhost:3000");
  
  // Check if button exists
  const button = await page.locator("button:has-text(\"Click me\")");
  await expect(button).toBeVisible();
  
  // Click and verify result
  await button.click();
  await expect(page.locator("text=Clicked!")).toBeVisible();
});

5. Метрики Производительности

// Performance API
test("component renders in acceptable time", () => {
  const start = performance.now();
  render(<ExpensiveComponent data={largeDataSet} />);
  const end = performance.now();
  
  expect(end - start).toBeLessThan(100); // ms
});

// Web Vitals
export function reportWebVitals(metric) {
  console.log(`${metric.name}: ${metric.value}`);
  // LCP: Largest Contentful Paint (< 2.5s)
  // FID: First Input Delay (< 100ms)
  // CLS: Cumulative Layout Shift (< 0.1)
}

6. Интеграционное Тестирование

test("full user flow with API calls", async () => {
  server.use(
    rest.get("/api/users", (req, res, ctx) => {
      return res(
        ctx.json([
          { id: 1, name: "John" },
          { id: 2, name: "Jane" },
        ])
      );
    })
  );

  render(<UserList />);
  await waitFor(() => {
    expect(screen.getByText("John")).toBeInTheDocument();
  });
});

7. Метрики Успеха

• Coverage >= 80-90% (с приоритетом на критичный код)
• Все E2E тесты проходят перед продакшеном
• Performance метрики в норме (Core Web Vitals)
• Нет критичных ошибок в консоли браузера
• Доступность (a11y) проверена с axe-core

8. Инструменты для Оценки

• Jest — unit тесты и покрытие
• Testing Library — компонент тесты
• Playwright — E2E тесты
• Lighthouse — производительность и доступность
• axe-core — проверка доступности

Помни, что тесты — это инвестиция в надежность. Хорошо покрытый код дает уверенность при рефакторинге и расширении функционала.