elsabro 2.0.1 → 2.2.0

package/skills/testing-setup.md

@@ -0,0 +1,1218 @@
+---
+name: testing-setup
+description: Configurar testing completo con unit tests (Vitest), E2E (Playwright), mocking (MSW) y coverage
+tags: [testing, vitest, playwright, e2e, unit-tests, tdd, quality, coverage, msw]
+difficulty: intermediate
+estimated_time: 30min
+---
+
+# Skill: Testing Setup
+
+<when_to_use>
+Usar cuando el usuario menciona:
+- "agregar tests"
+- "testing"
+- "TDD"
+- "coverage"
+- "E2E"
+- "pruebas automatizadas"
+- "unit tests"
+- "integration tests"
+- "mocking"
+- "test driven development"
+</when_to_use>
+
+<pre_requisites>
+## Pre-requisitos
+- Node.js 20+
+- Proyecto existente con package.json
+- TypeScript configurado (recomendado)
+- Conocimiento basico de Jest/testing
+</pre_requisites>
+
+<tech_stack>
+## Stack Tecnologico
+| Categoria | Tecnologia | Version | Proposito |
+|-----------|------------|---------|-----------|
+| Unit Tests | Vitest | 2.x | Testing rapido con soporte nativo ESM |
+| E2E Tests | Playwright | 1.49.x | Testing cross-browser automatizado |
+| Mocking | MSW | 2.x | Mock de APIs a nivel de red |
+| Coverage | c8 | 10.x | Reporte de cobertura de codigo |
+| React Testing | @testing-library/react | 16.x | Testing de componentes React |
+| DOM Testing | @testing-library/dom | 10.x | Utilidades de testing DOM |
+| User Events | @testing-library/user-event | 14.x | Simulacion de eventos de usuario |
+| Jest DOM | @testing-library/jest-dom | 6.x | Matchers adicionales para DOM |
+</tech_stack>
+
+<project_structure>
+## Estructura de Proyecto
+```
+project/
+├── src/
+│   ├── components/
+│   │   └── Button.tsx
+│   ├── lib/
+│   │   └── utils.ts
+│   └── services/
+│       └── api.ts
+├── tests/
+│   ├── unit/
+│   │   ├── utils.test.ts
+│   │   └── components/
+│   │       └── Button.test.tsx
+│   ├── integration/
+│   │   └── api.test.ts
+│   └── e2e/
+│       ├── auth.spec.ts
+│       └── checkout.spec.ts
+├── mocks/
+│   ├── handlers.ts
+│   ├── server.ts
+│   └── browser.ts
+├── vitest.config.ts
+├── vitest.setup.ts
+├── playwright.config.ts
+└── package.json
+```
+</project_structure>
+
+<setup_steps>
+## Paso 1: Instalar Dependencias
+
+### Dependencias de Vitest (Unit/Integration Tests)
+```bash
+npm install -D vitest @vitest/coverage-v8 @vitest/ui happy-dom
+```
+
+### Dependencias de Testing Library (React)
+```bash
+npm install -D @testing-library/react @testing-library/dom @testing-library/user-event @testing-library/jest-dom
+```
+
+### Dependencias de Playwright (E2E)
+```bash
+npm install -D @playwright/test
+npx playwright install
+```
+
+### Dependencias de MSW (Mocking)
+```bash
+npm install -D msw
+```
+
+## Paso 2: Configurar Vitest
+
+### vitest.config.ts
+```typescript
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    // Ambiente de testing
+    environment: 'happy-dom',
+
+    // Archivos de setup
+    setupFiles: ['./vitest.setup.ts'],
+
+    // Incluir archivos de test
+    include: [
+      'tests/unit/**/*.{test,spec}.{ts,tsx}',
+      'tests/integration/**/*.{test,spec}.{ts,tsx}',
+      'src/**/*.{test,spec}.{ts,tsx}',
+    ],
+
+    // Excluir
+    exclude: [
+      'node_modules',
+      'tests/e2e/**/*',
+      '.next',
+      'dist',
+    ],
+
+    // Coverage
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html', 'lcov'],
+      reportsDirectory: './coverage',
+      exclude: [
+        'node_modules/',
+        'tests/',
+        'mocks/',
+        '**/*.d.ts',
+        '**/*.config.*',
+        '**/types/**',
+      ],
+      thresholds: {
+        lines: 80,
+        functions: 80,
+        branches: 80,
+        statements: 80,
+      },
+    },
+
+    // Globals para jest-dom matchers
+    globals: true,
+
+    // Reporter
+    reporter: ['verbose', 'html'],
+
+    // Timeouts
+    testTimeout: 10000,
+    hookTimeout: 10000,
+
+    // Watch mode
+    watch: false,
+
+    // Pool options
+    pool: 'forks',
+    poolOptions: {
+      forks: {
+        singleFork: true,
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@tests': path.resolve(__dirname, './tests'),
+      '@mocks': path.resolve(__dirname, './mocks'),
+    },
+  },
+});
+```
+
+### vitest.setup.ts
+```typescript
+import { expect, afterEach, beforeAll, afterAll, vi } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import * as matchers from '@testing-library/jest-dom/matchers';
+import { server } from './mocks/server';
+
+// Extender matchers de Vitest con jest-dom
+expect.extend(matchers);
+
+// Limpiar despues de cada test
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+// Configurar MSW
+beforeAll(() => {
+  server.listen({ onUnhandledRequest: 'error' });
+});
+
+afterEach(() => {
+  server.resetHandlers();
+});
+
+afterAll(() => {
+  server.close();
+});
+
+// Mock de variables de entorno
+vi.stubEnv('NODE_ENV', 'test');
+
+// Mock de window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+// Mock de ResizeObserver
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+// Mock de IntersectionObserver
+global.IntersectionObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+```
+
+## Paso 3: Configurar Playwright
+
+### playwright.config.ts
+```typescript
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  // Directorio de tests
+  testDir: './tests/e2e',
+
+  // Timeout por test
+  timeout: 30000,
+
+  // Timeout para expect
+  expect: {
+    timeout: 5000,
+  },
+
+  // Ejecutar tests en paralelo
+  fullyParallel: true,
+
+  // Fallar el build si hay test.only
+  forbidOnly: !!process.env.CI,
+
+  // Reintentos
+  retries: process.env.CI ? 2 : 0,
+
+  // Workers
+  workers: process.env.CI ? 1 : undefined,
+
+  // Reporter
+  reporter: [
+    ['html', { outputFolder: 'playwright-report' }],
+    ['json', { outputFile: 'playwright-report/results.json' }],
+    process.env.CI ? ['github'] : ['list'],
+  ],
+
+  // Configuracion global
+  use: {
+    // URL base
+    baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:3000',
+
+    // Trace on failure
+    trace: 'on-first-retry',
+
+    // Screenshot on failure
+    screenshot: 'only-on-failure',
+
+    // Video on failure
+    video: 'on-first-retry',
+
+    // Locale
+    locale: 'en-US',
+
+    // Timezone
+    timezoneId: 'America/New_York',
+  },
+
+  // Proyectos (browsers)
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+    // Mobile viewports
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    },
+  ],
+
+  // Servidor de desarrollo
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120000,
+  },
+});
+```
+
+## Paso 4: Configurar MSW (Mock Service Worker)
+
+### mocks/handlers.ts
+```typescript
+import { http, HttpResponse, delay } from 'msw';
+
+// Tipos de datos
+interface User {
+  id: string;
+  email: string;
+  name: string;
+}
+
+interface LoginRequest {
+  email: string;
+  password: string;
+}
+
+interface ApiError {
+  message: string;
+  code: string;
+}
+
+// Base URL
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001/api';
+
+// Datos de prueba
+const mockUsers: User[] = [
+  { id: '1', email: 'test@example.com', name: 'Test User' },
+  { id: '2', email: 'admin@example.com', name: 'Admin User' },
+];
+
+// Handlers
+export const handlers = [
+  // Auth handlers
+  http.post<never, LoginRequest>(`${API_BASE}/auth/login`, async ({ request }) => {
+    await delay(100); // Simular latencia
+
+    const body = await request.json();
+
+    if (body.email === 'test@example.com' && body.password === 'password123') {
+      return HttpResponse.json({
+        user: mockUsers[0],
+        token: 'mock-jwt-token',
+      });
+    }
+
+    return HttpResponse.json<ApiError>(
+      { message: 'Invalid credentials', code: 'INVALID_CREDENTIALS' },
+      { status: 401 }
+    );
+  }),
+
+  http.post(`${API_BASE}/auth/logout`, async () => {
+    await delay(50);
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.get(`${API_BASE}/auth/me`, async ({ request }) => {
+    const authHeader = request.headers.get('Authorization');
+
+    if (!authHeader || !authHeader.startsWith('Bearer ')) {
+      return HttpResponse.json<ApiError>(
+        { message: 'Unauthorized', code: 'UNAUTHORIZED' },
+        { status: 401 }
+      );
+    }
+
+    return HttpResponse.json({ user: mockUsers[0] });
+  }),
+
+  // User handlers
+  http.get(`${API_BASE}/users`, async () => {
+    await delay(100);
+    return HttpResponse.json({ users: mockUsers });
+  }),
+
+  http.get(`${API_BASE}/users/:id`, async ({ params }) => {
+    await delay(50);
+    const user = mockUsers.find(u => u.id === params.id);
+
+    if (!user) {
+      return HttpResponse.json<ApiError>(
+        { message: 'User not found', code: 'NOT_FOUND' },
+        { status: 404 }
+      );
+    }
+
+    return HttpResponse.json({ user });
+  }),
+
+  http.post<never, Partial<User>>(`${API_BASE}/users`, async ({ request }) => {
+    await delay(100);
+    const body = await request.json();
+
+    const newUser: User = {
+      id: String(mockUsers.length + 1),
+      email: body.email || '',
+      name: body.name || '',
+    };
+
+    return HttpResponse.json({ user: newUser }, { status: 201 });
+  }),
+
+  // Error simulation handler
+  http.get(`${API_BASE}/error`, async () => {
+    return HttpResponse.json<ApiError>(
+      { message: 'Internal server error', code: 'INTERNAL_ERROR' },
+      { status: 500 }
+    );
+  }),
+
+  // Network delay simulation
+  http.get(`${API_BASE}/slow`, async () => {
+    await delay(3000);
+    return HttpResponse.json({ message: 'Slow response' });
+  }),
+];
+```
+
+### mocks/server.ts
+```typescript
+import { setupServer } from 'msw/node';
+import { handlers } from './handlers';
+
+// Servidor para Node.js (tests)
+export const server = setupServer(...handlers);
+```
+
+### mocks/browser.ts
+```typescript
+import { setupWorker } from 'msw/browser';
+import { handlers } from './handlers';
+
+// Worker para browser (desarrollo)
+export const worker = setupWorker(...handlers);
+```
+
+## Paso 5: Ejemplos de Tests
+
+### tests/unit/utils.test.ts
+```typescript
+import { describe, it, expect, vi } from 'vitest';
+
+// Ejemplo de funciones a testear
+function formatCurrency(amount: number, currency = 'USD'): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency,
+  }).format(amount);
+}
+
+function validateEmail(email: string): boolean {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+}
+
+async function fetchWithRetry(
+  url: string,
+  retries = 3
+): Promise<Response> {
+  for (let i = 0; i < retries; i++) {
+    try {
+      const response = await fetch(url);
+      if (response.ok) return response;
+    } catch {
+      if (i === retries - 1) throw new Error('Max retries reached');
+    }
+  }
+  throw new Error('Max retries reached');
+}
+
+// Tests
+describe('formatCurrency', () => {
+  it('should format USD currency correctly', () => {
+    expect(formatCurrency(100)).toBe('$100.00');
+    expect(formatCurrency(1234.56)).toBe('$1,234.56');
+    expect(formatCurrency(0)).toBe('$0.00');
+  });
+
+  it('should format other currencies', () => {
+    expect(formatCurrency(100, 'EUR')).toContain('100');
+    expect(formatCurrency(100, 'GBP')).toContain('100');
+  });
+
+  it('should handle negative amounts', () => {
+    expect(formatCurrency(-50)).toBe('-$50.00');
+  });
+});
+
+describe('validateEmail', () => {
+  it('should return true for valid emails', () => {
+    expect(validateEmail('test@example.com')).toBe(true);
+    expect(validateEmail('user.name@domain.org')).toBe(true);
+    expect(validateEmail('user+tag@example.co.uk')).toBe(true);
+  });
+
+  it('should return false for invalid emails', () => {
+    expect(validateEmail('invalid')).toBe(false);
+    expect(validateEmail('no@domain')).toBe(false);
+    expect(validateEmail('@nodomain.com')).toBe(false);
+    expect(validateEmail('spaces in@email.com')).toBe(false);
+  });
+});
+
+describe('fetchWithRetry', () => {
+  it('should return response on success', async () => {
+    const mockResponse = new Response(JSON.stringify({ data: 'test' }), {
+      status: 200,
+    });
+
+    vi.spyOn(global, 'fetch').mockResolvedValueOnce(mockResponse);
+
+    const result = await fetchWithRetry('https://api.example.com/data');
+
+    expect(result).toBe(mockResponse);
+    expect(fetch).toHaveBeenCalledTimes(1);
+  });
+
+  it('should retry on failure', async () => {
+    const mockFetch = vi.spyOn(global, 'fetch');
+
+    mockFetch
+      .mockRejectedValueOnce(new Error('Network error'))
+      .mockRejectedValueOnce(new Error('Network error'))
+      .mockResolvedValueOnce(new Response('{}', { status: 200 }));
+
+    await fetchWithRetry('https://api.example.com/data');
+
+    expect(fetch).toHaveBeenCalledTimes(3);
+  });
+
+  it('should throw after max retries', async () => {
+    vi.spyOn(global, 'fetch').mockRejectedValue(new Error('Network error'));
+
+    await expect(
+      fetchWithRetry('https://api.example.com/data', 3)
+    ).rejects.toThrow('Max retries reached');
+  });
+});
+```
+
+### tests/unit/components/Button.test.tsx
+```typescript
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+// Componente de ejemplo
+interface ButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  variant?: 'primary' | 'secondary' | 'danger';
+  loading?: boolean;
+}
+
+function Button({
+  children,
+  onClick,
+  disabled = false,
+  variant = 'primary',
+  loading = false,
+}: ButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled || loading}
+      className={`btn btn-${variant}`}
+      aria-busy={loading}
+    >
+      {loading ? 'Loading...' : children}
+    </button>
+  );
+}
+
+// Tests
+describe('Button Component', () => {
+  it('should render children correctly', () => {
+    render(<Button>Click me</Button>);
+
+    expect(screen.getByRole('button')).toHaveTextContent('Click me');
+  });
+
+  it('should call onClick when clicked', async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+
+    render(<Button onClick={handleClick}>Click me</Button>);
+
+    await user.click(screen.getByRole('button'));
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not call onClick when disabled', async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+
+    render(<Button onClick={handleClick} disabled>Click me</Button>);
+
+    await user.click(screen.getByRole('button'));
+
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it('should show loading state', () => {
+    render(<Button loading>Submit</Button>);
+
+    const button = screen.getByRole('button');
+
+    expect(button).toHaveTextContent('Loading...');
+    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute('aria-busy', 'true');
+  });
+
+  it('should apply variant class', () => {
+    render(<Button variant="danger">Delete</Button>);
+
+    expect(screen.getByRole('button')).toHaveClass('btn-danger');
+  });
+});
+```
+
+### tests/integration/api.test.ts
+```typescript
+import { describe, it, expect, beforeEach } from 'vitest';
+import { server } from '@mocks/server';
+import { http, HttpResponse } from 'msw';
+
+const API_BASE = 'http://localhost:3001/api';
+
+// Servicio de API a testear
+class ApiService {
+  private baseUrl: string;
+  private token: string | null = null;
+
+  constructor(baseUrl: string) {
+    this.baseUrl = baseUrl;
+  }
+
+  setToken(token: string) {
+    this.token = token;
+  }
+
+  private async request<T>(
+    endpoint: string,
+    options: RequestInit = {}
+  ): Promise<T> {
+    const headers: HeadersInit = {
+      'Content-Type': 'application/json',
+      ...(this.token && { Authorization: `Bearer ${this.token}` }),
+      ...options.headers,
+    };
+
+    const response = await fetch(`${this.baseUrl}${endpoint}`, {
+      ...options,
+      headers,
+    });
+
+    if (!response.ok) {
+      const error = await response.json();
+      throw new Error(error.message);
+    }
+
+    return response.json();
+  }
+
+  async login(email: string, password: string) {
+    return this.request<{ user: any; token: string }>('/auth/login', {
+      method: 'POST',
+      body: JSON.stringify({ email, password }),
+    });
+  }
+
+  async getUsers() {
+    return this.request<{ users: any[] }>('/users');
+  }
+
+  async getUser(id: string) {
+    return this.request<{ user: any }>(`/users/${id}`);
+  }
+}
+
+describe('ApiService Integration', () => {
+  let api: ApiService;
+
+  beforeEach(() => {
+    api = new ApiService(API_BASE);
+  });
+
+  describe('Authentication', () => {
+    it('should login successfully with valid credentials', async () => {
+      const result = await api.login('test@example.com', 'password123');
+
+      expect(result.user).toBeDefined();
+      expect(result.user.email).toBe('test@example.com');
+      expect(result.token).toBe('mock-jwt-token');
+    });
+
+    it('should fail login with invalid credentials', async () => {
+      await expect(
+        api.login('wrong@example.com', 'wrongpassword')
+      ).rejects.toThrow('Invalid credentials');
+    });
+  });
+
+  describe('Users', () => {
+    it('should fetch all users', async () => {
+      const result = await api.getUsers();
+
+      expect(result.users).toHaveLength(2);
+      expect(result.users[0].email).toBe('test@example.com');
+    });
+
+    it('should fetch a single user by id', async () => {
+      const result = await api.getUser('1');
+
+      expect(result.user.id).toBe('1');
+      expect(result.user.email).toBe('test@example.com');
+    });
+
+    it('should handle user not found', async () => {
+      await expect(api.getUser('999')).rejects.toThrow('User not found');
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle server errors', async () => {
+      server.use(
+        http.get(`${API_BASE}/users`, () => {
+          return HttpResponse.json(
+            { message: 'Database connection failed' },
+            { status: 500 }
+          );
+        })
+      );
+
+      await expect(api.getUsers()).rejects.toThrow('Database connection failed');
+    });
+
+    it('should handle network errors', async () => {
+      server.use(
+        http.get(`${API_BASE}/users`, () => {
+          return HttpResponse.error();
+        })
+      );
+
+      await expect(api.getUsers()).rejects.toThrow();
+    });
+  });
+});
+```
+
+### tests/e2e/auth.spec.ts
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('Authentication', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('should display login form', async ({ page }) => {
+    await page.goto('/login');
+
+    await expect(page.getByRole('heading', { name: /login/i })).toBeVisible();
+    await expect(page.getByLabel(/email/i)).toBeVisible();
+    await expect(page.getByLabel(/password/i)).toBeVisible();
+    await expect(page.getByRole('button', { name: /sign in/i })).toBeVisible();
+  });
+
+  test('should show validation errors for empty form', async ({ page }) => {
+    await page.goto('/login');
+
+    await page.getByRole('button', { name: /sign in/i }).click();
+
+    await expect(page.getByText(/email is required/i)).toBeVisible();
+    await expect(page.getByText(/password is required/i)).toBeVisible();
+  });
+
+  test('should show error for invalid credentials', async ({ page }) => {
+    await page.goto('/login');
+
+    await page.getByLabel(/email/i).fill('wrong@example.com');
+    await page.getByLabel(/password/i).fill('wrongpassword');
+    await page.getByRole('button', { name: /sign in/i }).click();
+
+    await expect(page.getByText(/invalid credentials/i)).toBeVisible();
+  });
+
+  test('should login successfully and redirect', async ({ page }) => {
+    await page.goto('/login');
+
+    await page.getByLabel(/email/i).fill('test@example.com');
+    await page.getByLabel(/password/i).fill('password123');
+    await page.getByRole('button', { name: /sign in/i }).click();
+
+    // Esperar redireccion al dashboard
+    await expect(page).toHaveURL('/dashboard');
+    await expect(page.getByText(/welcome/i)).toBeVisible();
+  });
+
+  test('should logout successfully', async ({ page }) => {
+    // Login primero
+    await page.goto('/login');
+    await page.getByLabel(/email/i).fill('test@example.com');
+    await page.getByLabel(/password/i).fill('password123');
+    await page.getByRole('button', { name: /sign in/i }).click();
+
+    await expect(page).toHaveURL('/dashboard');
+
+    // Logout
+    await page.getByRole('button', { name: /logout/i }).click();
+
+    await expect(page).toHaveURL('/login');
+  });
+
+  test('should persist session after page refresh', async ({ page }) => {
+    // Login
+    await page.goto('/login');
+    await page.getByLabel(/email/i).fill('test@example.com');
+    await page.getByLabel(/password/i).fill('password123');
+    await page.getByRole('button', { name: /sign in/i }).click();
+
+    await expect(page).toHaveURL('/dashboard');
+
+    // Refresh page
+    await page.reload();
+
+    // Should still be on dashboard
+    await expect(page).toHaveURL('/dashboard');
+  });
+});
+
+test.describe('Protected Routes', () => {
+  test('should redirect to login for protected routes', async ({ page }) => {
+    await page.goto('/dashboard');
+
+    await expect(page).toHaveURL('/login');
+  });
+
+  test('should redirect back after login', async ({ page }) => {
+    // Try to access protected route
+    await page.goto('/settings');
+
+    // Should redirect to login with return URL
+    await expect(page).toHaveURL(/\/login\?.*returnUrl/);
+
+    // Login
+    await page.getByLabel(/email/i).fill('test@example.com');
+    await page.getByLabel(/password/i).fill('password123');
+    await page.getByRole('button', { name: /sign in/i }).click();
+
+    // Should redirect to original destination
+    await expect(page).toHaveURL('/settings');
+  });
+});
+```
+
+### tests/e2e/checkout.spec.ts
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('Checkout Flow', () => {
+  test.beforeEach(async ({ page }) => {
+    // Login before each test
+    await page.goto('/login');
+    await page.getByLabel(/email/i).fill('test@example.com');
+    await page.getByLabel(/password/i).fill('password123');
+    await page.getByRole('button', { name: /sign in/i }).click();
+    await expect(page).toHaveURL('/dashboard');
+  });
+
+  test('should complete checkout flow', async ({ page }) => {
+    // Add item to cart
+    await page.goto('/products');
+    await page.getByTestId('product-1').getByRole('button', { name: /add to cart/i }).click();
+
+    // Verify cart updated
+    await expect(page.getByTestId('cart-count')).toHaveText('1');
+
+    // Go to cart
+    await page.getByTestId('cart-icon').click();
+    await expect(page).toHaveURL('/cart');
+
+    // Proceed to checkout
+    await page.getByRole('button', { name: /checkout/i }).click();
+    await expect(page).toHaveURL('/checkout');
+
+    // Fill shipping info
+    await page.getByLabel(/address/i).fill('123 Main St');
+    await page.getByLabel(/city/i).fill('New York');
+    await page.getByLabel(/zip/i).fill('10001');
+
+    // Fill payment info
+    await page.getByLabel(/card number/i).fill('4242424242424242');
+    await page.getByLabel(/expiry/i).fill('12/25');
+    await page.getByLabel(/cvc/i).fill('123');
+
+    // Place order
+    await page.getByRole('button', { name: /place order/i }).click();
+
+    // Verify success
+    await expect(page).toHaveURL(/\/orders\/\d+/);
+    await expect(page.getByText(/order confirmed/i)).toBeVisible();
+  });
+
+  test('should validate payment information', async ({ page }) => {
+    await page.goto('/checkout');
+
+    // Try to submit with invalid card
+    await page.getByLabel(/card number/i).fill('1234');
+    await page.getByRole('button', { name: /place order/i }).click();
+
+    await expect(page.getByText(/invalid card number/i)).toBeVisible();
+  });
+
+  test('should handle empty cart', async ({ page }) => {
+    await page.goto('/checkout');
+
+    await expect(page.getByText(/your cart is empty/i)).toBeVisible();
+    await expect(page.getByRole('link', { name: /continue shopping/i })).toBeVisible();
+  });
+});
+
+test.describe('Visual Regression', () => {
+  test('checkout page matches snapshot', async ({ page }) => {
+    await page.goto('/login');
+    await page.getByLabel(/email/i).fill('test@example.com');
+    await page.getByLabel(/password/i).fill('password123');
+    await page.getByRole('button', { name: /sign in/i }).click();
+
+    await page.goto('/checkout');
+
+    // Wait for content to load
+    await page.waitForLoadState('networkidle');
+
+    await expect(page).toHaveScreenshot('checkout-page.png', {
+      fullPage: true,
+      mask: [page.getByTestId('dynamic-content')], // Mask dynamic content
+    });
+  });
+});
+```
+
+## Paso 6: Scripts en package.json
+
+```json
+{
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "test:unit": "vitest run tests/unit",
+    "test:integration": "vitest run tests/integration",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:codegen": "playwright codegen localhost:3000",
+    "test:e2e:report": "playwright show-report",
+    "test:all": "npm run test && npm run test:e2e",
+    "test:ci": "vitest run --coverage && playwright test"
+  }
+}
+```
+
+## Paso 7: Configuracion de CI (GitHub Actions)
+
+### .github/workflows/test.yml
+```yaml
+name: Tests
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+
+jobs:
+  unit-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run unit tests
+        run: npm run test:coverage
+
+      - name: Upload coverage
+        uses: codecov/codecov-action@v4
+        with:
+          files: ./coverage/lcov.info
+          fail_ci_if_error: true
+
+  e2e-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: Run E2E tests
+        run: npm run test:e2e
+
+      - name: Upload report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+```
+</setup_steps>
+
+<best_practices>
+## Mejores Practicas
+
+### 1. Estructura de Tests
+```typescript
+describe('Feature/Component', () => {
+  describe('Scenario/Method', () => {
+    it('should [expected behavior] when [condition]', () => {
+      // Arrange - setup
+      // Act - execute
+      // Assert - verify
+    });
+  });
+});
+```
+
+### 2. Nombres Descriptivos
+```typescript
+// MAL
+it('works', () => {});
+it('test 1', () => {});
+
+// BIEN
+it('should return empty array when no items match filter', () => {});
+it('should throw ValidationError when email is invalid', () => {});
+```
+
+### 3. Un Assert por Test (cuando posible)
+```typescript
+// Preferir multiples tests especificos
+it('should validate email format', () => {
+  expect(validateEmail('test@example.com')).toBe(true);
+});
+
+it('should reject email without domain', () => {
+  expect(validateEmail('test@')).toBe(false);
+});
+```
+
+### 4. Evitar Tests Fragiles
+```typescript
+// MAL - depende de implementacion
+expect(result).toEqual({ id: 1, name: 'Test', createdAt: '2024-01-01' });
+
+// BIEN - verifica lo importante
+expect(result.id).toBe(1);
+expect(result.name).toBe('Test');
+expect(result.createdAt).toBeDefined();
+```
+
+### 5. Data Builders para Tests
+```typescript
+// tests/factories/user.ts
+export function createUser(overrides: Partial<User> = {}): User {
+  return {
+    id: '1',
+    email: 'test@example.com',
+    name: 'Test User',
+    ...overrides,
+  };
+}
+
+// Uso en test
+const user = createUser({ name: 'Custom Name' });
+```
+</best_practices>
+
+<verification>
+## Verificacion
+
+1. **Unit Tests**
+   ```bash
+   npm run test
+   # Deberia mostrar tests pasando
+   ```
+
+2. **Coverage Report**
+   ```bash
+   npm run test:coverage
+   # Deberia generar reporte en ./coverage
+   # Abrir coverage/index.html en browser
+   ```
+
+3. **E2E Tests**
+   ```bash
+   npm run test:e2e
+   # Deberia correr tests en multiples browsers
+   ```
+
+4. **E2E Report**
+   ```bash
+   npm run test:e2e:report
+   # Abre reporte HTML interactivo
+   ```
+
+5. **Vitest UI**
+   ```bash
+   npm run test:ui
+   # Abre interfaz visual para tests
+   ```
+</verification>
+
+<troubleshooting>
+## Solucion de Problemas
+
+### Error: "Cannot find module"
+```bash
+# Verificar que las dependencias estan instaladas
+npm install
+
+# Verificar paths en vitest.config.ts
+```
+
+### Error: "MSW handlers not working"
+```typescript
+// Verificar que server.listen() se llama en setup
+// Verificar URL base en handlers
+```
+
+### Error: "Playwright browsers not found"
+```bash
+npx playwright install
+npx playwright install-deps
+```
+
+### Tests lentos
+```typescript
+// vitest.config.ts - usar pool forks
+pool: 'forks',
+poolOptions: {
+  forks: {
+    singleFork: true,
+  },
+},
+```
+
+### Coverage bajo
+```bash
+# Verificar que archivos correctos estan incluidos
+# Revisar exclude patterns en vitest.config.ts
+```
+</troubleshooting>