La Pirámide de Testing

¿Qué es la Pirámide de Testing?

La Pirámide de Testing es un framework que te ayuda a crear una suite de tests balanceada y eficiente. Sugiere tener muchos tests unitarios rápidos y económicos en la base, menos tests de integración en el medio, y aún menos tests end-to-end lentos y costosos en la cima.

La Pirámide de Testing Tradicional

¿Por Qué Esta Forma?

// Comparación de velocidad
Suite de Tests Unitarios:     0.5 segundos  ✓
Tests de Integración:          15 segundos   ⚡
Suite de Tests E2E:            5 minutos     🐌

Desarrollador ejecuta tests: Cada pocos minutos
Pipeline CI/CD:               Cada commit

Tests rápidos = Más testing = Mejor código

Pirámide de Testing en la Práctica

// Ejemplo: Funcionalidad de Carrito de Compras E-commerce

// ✅ TESTS UNITARIOS (Muchos) - Testear funciones puras
// cart.js
export function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
}

export function applyDiscount(total, discountPercent) {
  return total * (1 - discountPercent / 100);
}

// cart.test.js
describe('Cálculos del carrito', () => {
  test('calcula el total correctamente', () => {
    const items = [
      { price: 10, quantity: 2 },
      { price: 5, quantity: 3 }
    ];
    expect(calculateTotal(items)).toBe(35);
  });

  test('aplica descuento correctamente', () => {
    expect(applyDiscount(100, 10)).toBe(90);
    expect(applyDiscount(100, 0)).toBe(100);
  });

  test('maneja carrito vacío', () => {
    expect(calculateTotal([])).toBe(0);
  });
});

// ⚡ TESTS DE INTEGRACIÓN (Moderados) - Testear componentes trabajando juntos
// CartComponent.test.jsx
describe('Integración Componente Carrito', () => {
  test('actualiza total cuando se agregan items', () => {
    render();
    
    // Agregar items
    fireEvent.click(screen.getByText('Agregar Item 1'));
    fireEvent.click(screen.getByText('Agregar Item 2'));
    
    // Verificar que el total se actualizó
    expect(screen.getByText(/Total: $35/)).toBeInTheDocument();
  });

  test('aplica código de descuento', async () => {
    render();
    
    // Ingresar código de descuento
    fireEvent.change(screen.getByPlaceholderText('Código de descuento'), {
      target: { value: 'SAVE10' }
    });
    fireEvent.click(screen.getByText('Aplicar'));
    
    // Verificar que se aplicó el descuento
    await waitFor(() => {
      expect(screen.getByText(/Descuento: 10%/)).toBeInTheDocument();
    });
  });
});

// 🌐 TESTS E2E (Pocos) - Testear flujos críticos de usuario
// checkout.e2e.test.js
describe('Flujo de Checkout E2E', () => {
  test('usuario puede completar compra', async () => {
    // Navegar a la tienda
    await page.goto('http://localhost:3000');
    
    // Agregar items al carrito
    await page.click('[data-testid="add-product-1"]');
    await page.click('[data-testid="add-product-2"]');
    
    // Ir a checkout
    await page.click('[data-testid="cart-button"]');
    await page.click('[data-testid="checkout-button"]');
    
    // Llenar información de envío
    await page.fill('[name="email"]', 'user@example.com');
    await page.fill('[name="address"]', '123 Main St');
    
    // Enviar pago
    await page.fill('[name="cardNumber"]', '4242424242424242');
    await page.click('[data-testid="submit-payment"]');
    
    // Verificar éxito
    await expect(page.locator('text=Orden confirmada')).toBeVisible();
  });
});

El Trofeo de Testing (Alternativa Moderna)

Qué Testear en Cada Nivel

Anti-Patrón: El Cono de Helado

Construyendo Tu Estrategia de Testing

// Enfoque paso a paso para testear una nueva funcionalidad

// 1. Comienza con tests unitarios para lógica de negocio
describe('OrderProcessor', () => {
  test('calcula total de orden con impuesto', () => {
    const processor = new OrderProcessor({ taxRate: 0.08 });
    const order = { subtotal: 100 };
    expect(processor.calculateTotal(order)).toBe(108);
  });
});

// 2. Agrega tests de integración para comportamiento de componentes
describe('CheckoutForm', () => {
  test('envía orden cuando el formulario es válido', async () => {
    const onSubmit = jest.fn();
    render();
    
    // Llenar formulario...
    fireEvent.click(screen.getByText('Realizar Orden'));
    
    await waitFor(() => {
      expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
        email: 'test@example.com',
        total: 108
      }));
    });
  });
});

// 3. Agrega UN test E2E para la ruta crítica
test('usuario puede completar checkout', async () => {
  // Flujo completo de usuario desde carrito hasta confirmación
  await page.goto('/cart');
  await page.click('text=Checkout');
  // ... llenar todos los formularios ...
  await page.click('text=Realizar Orden');
  await expect(page.locator('text=Gracias')).toBeVisible();
});