Testing Trophy 2026: піраміда vs кубок тестування

+---------------------------------------+
       |             End-to-End                |  <- Висока впевненість (Confidence),
       |        (Playwright / Cypress)         |     але висока вартість і повільний CI
       +---------------------------------------+
       |                                       |
       |             INTEGRATION               |  <- Золота середина (The Sweet Spot):
       |      (Vitest + React Testing Lib)     |     максимальний ROI, реальний DOM,
       |                                       |     мережеві перехоплювачі (MSW)
       +---------------------------------------+
       |                 Unit                  |  <- Чисті функції, утиліти,
       |               (Vitest)                |     математика, складні стейт-машини
       +---------------------------------------+
       |            STATIC ANALYSIS            |  <- Нульова вартість рантайму:
       |    (TypeScript Strict, ESLint, Oxlint)|     типи, контракти, синтаксис
       +---------------------------------------+

{
  "compilerOptions": {
    "target": "ES2023",
    "lib": ["DOM", "DOM.Iterable", "ES2023"],
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "strict": true,
    "noImplicitOverride": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "noFallthroughCasesInSwitch": true,
    "useUnknownInCatchVariables": true,
    "skipLibCheck": true,
    "isolatedModules": true
  }
}

import { describe, it, expect } from 'vitest';

export interface CartItem {
  id: string;
  priceInCents: number;
  quantity: number;
  category: 'electronics' | 'groceries' | 'apparel';
}

export interface DiscountPolicy {
  bulkThreshold: number;
  bulkDiscountPercentage: number;
}

export function calculateOrderTotal(
  items: readonly CartItem[],
  policy: DiscountPolicy
): number {
  return items.reduce((total, item) => {
    const rawCost = item.priceInCents * item.quantity;
    if (item.quantity >= policy.bulkThreshold) {
      const discount = Math.round(rawCost * (policy.bulkDiscountPercentage / 100));
      return total + (rawCost - discount);
    }
    return total + rawCost;
  }, 0);
}

describe('calculateOrderTotal (Pure Unit Logic)', () => {
  const policy: DiscountPolicy = {
    bulkThreshold: 5,
    bulkDiscountPercentage: 10,
  };

  it('застосовує оптову знижку при досягненні граничної кількості', () => {
    const items: readonly CartItem[] = [
      { id: '1', priceInCents: 1000, quantity: 5, category: 'apparel' },
    ];
    // 5 * 1000 = 5000; знижка 10% = 500; разом = 4500
    expect(calculateOrderTotal(items, policy)).toBe(4500);
  });

  it('не застосовує знижку, якщо кількість суворо менша за поріг', () => {
    const items: readonly CartItem[] = [
      { id: '2', priceInCents: 1000, quantity: 4, category: 'apparel' },
    ];
    expect(calculateOrderTotal(items, policy)).toBe(4000);
  });

  it('коректно обробляє порожній кошик', () => {
    expect(calculateOrderTotal([], policy)).toBe(0);
  });
});

import { describe, it, expect, beforeAll, afterAll, afterEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { http, HttpResponse } from 'msw';
import { setupServer } from 'msw/node';
import React, { useState } from 'react';

// Реальний інтерфейс даних
interface OrderRequest {
  couponCode: string;
  itemsCount: number;
}

// Мережеві обробники MSW v2
const server = setupServer(
  http.post('/api/checkout', async ({ request }) => {
    const body = (await request.json()) as OrderRequest;
    if (body.couponCode === 'INVALID2026') {
      return HttpResponse.json(
        { error: 'Промокод недійсний або прострочений' },
        { status: 422 }
      );
    }
    return HttpResponse.json({ orderId: 'ORD-98765', status: 'confirmed' });
  })
);

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

// Тестований компонент: перевіряємо спільну роботу форми, стану та мережевої відповіді
function CartCheckoutForm({ itemsCount }: { itemsCount: number }) {
  const [coupon, setCoupon] = useState('');
  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
  const [errorMessage, setErrorMessage] = useState('');

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setStatus('loading');
    setErrorMessage('');

    try {
      const res = await fetch('/api/checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ couponCode: coupon, itemsCount }),
      });

      if (!res.ok) {
        const err = (await res.json()) as { error: string };
        setErrorMessage(err.error);
        setStatus('error');
        return;
      }

      setStatus('success');
    } catch {
      setErrorMessage('Мережева помилка під час звернення до сервера');
      setStatus('error');
    }
  };

  return (
    <form onSubmit={handleSubmit} aria-label="Форма оформлення замовлення">
      <label htmlFor="coupon-input">Промокод на знижку</label>
      <input
        id="coupon-input"
        type="text"
        value={coupon}
        onChange={(e) => setCoupon(e.target.value)}
      />
      <button type="submit" disabled={status === 'loading'}>
        {status === 'loading' ? 'Оформлення...' : 'Підтвердити замовлення'}
      </button>

      {status === 'success' && <p role="status">Замовлення успішно сформовано!</p>}
      {status === 'error' && <p role="alert">{errorMessage}</p>}
    </form>
  );
}

describe('Інтеграція: Оформлення замовлення та валідація промокоду', () => {
  it('відображає помилку валідації при невірному промокоді', async () => {
    const user = userEvent.setup();
    render(<CartCheckoutForm itemsCount={3} />);

    const input = screen.getByLabelText(/промокод на знижку/i);
    const submitBtn = screen.getByRole('button', { name: /підтвердити замовлення/i });

    await user.type(input, 'INVALID2026');
    await user.click(submitBtn);

    const errorAlert = await screen.findByRole('alert');
    expect(errorAlert).toHaveTextContent('Промокод недійсний або прострочений');
  });

  it('переводить форму в стан успіху при коректному запиті', async () => {
    const user = userEvent.setup();
    render(<CartCheckoutForm itemsCount={3} />);

    const input = screen.getByLabelText(/промокод на знижку/i);
    const submitBtn = screen.getByRole('button', { name: /підтвердити замовлення/i });

    await user.type(input, 'SUMMER2026');
    await user.click(submitBtn);

    const successMessage = await screen.findByRole('status');
    expect(successMessage).toHaveTextContent('Замовлення успішно сформовано!');
  });
});