muebleria-test-ui

Unit Tests     → Individual components (React Testing Library)
Integration    → Component + API interaction
E2E Tests      → Full user workflows (Playwright)
Visual Tests   → Screenshot comparison

// src/components/ui/__tests__/ProductCard.test.tsx
import { render, screen } from '@testing-library/react';
import { ProductCard } from '../ProductCard';

describe('ProductCard', () => {
  it('renders product information', () => {
    render(
      <ProductCard 
        nombre="Sofá 3 Cuerpos"
        precio={1500}
        imagen_principal="/sofá.jpg"
      />
    );
    
    expect(screen.getByText('Sofá 3 Cuerpos')).toBeInTheDocument();
    expect(screen.getByText('$1500')).toBeInTheDocument();
  });
  
  it('calls onAddToCart when button clicked', () => {
    const mockHandler = jest.fn();
    render(<ProductCard {...props} onAddToCart={mockHandler} />);
    
    fireEvent.click(screen.getByText('Agregar al Carrito'));
    expect(mockHandler).toHaveBeenCalledTimes(1);
  });
});

// tests/e2e/products.spec.ts
import { test, expect } from '@playwright/test';

test.describe('Product Catalog', () => {
  test('displays product list', async ({ page }) => {
    await page.goto('http://localhost:4321/productos');
    
    // Wait for API response
    await page.waitForSelector('[data-testid="product-card"]');
    
    // Check products are displayed
    const products = page.locator('[data-testid="product-card"]');
    await expect(products).toHaveCount(await products.count());
  });
  
  test('filters products by category', async ({ page }) => {
    await page.goto('http://localhost:4321/productos');
    
    // Click category filter
    await page.click('text=Sofás');
    
    // Verify filtered results
    await expect(page.locator('text=Sofá')).toBeVisible();
  });
});

// Mock fetch in tests
global.fetch = jest.fn(() =>
  Promise.resolve({
    ok: true,
    json: () => Promise.resolve([
      { id: 1, nombre: 'Producto 1', precio: 100 }
    ])
  })
) as jest.Mock;

// In test
test('fetches and displays products', async () => {
  render(<ProductList />);
  
  await waitFor(() => {
    expect(screen.getByText('Producto 1')).toBeInTheDocument();
  });
  
  expect(fetch).toHaveBeenCalledWith('http://localhost:5000/api/productos');
});

src/
├── components/
│   └── ui/
│       ├── ProductCard.tsx
│       └── __tests__/
│           └── ProductCard.test.tsx
└── tests/
    └── e2e/
        ├── products.spec.ts
        ├── cart.spec.ts
        └── checkout.spec.ts

# Install testing dependencies
npm install -D @testing-library/react @testing-library/jest-dom
npm install -D @playwright/test

# Run unit tests
npm test

# Run E2E tests
npx playwright test

# Run E2E with UI
npx playwright test --ui

# Generate test report
npx playwright show-report

// ✅ DO: Use data-testid for stable selectors
<button data-testid="add-to-cart">Agregar</button>
await page.click('[data-testid="add-to-cart"]');

// ❌ DON'T: Use text content (fragile)
await page.click('text=Agregar');  // Breaks if text changes

// ✅ DO: Wait for network idle
await page.goto(url, { waitUntil: 'networkidle' });

// ✅ DO: Test user-visible behavior
expect(screen.getByRole('button', { name: 'Agregar' })).toBeEnabled();

// ❌ DON'T: Test implementation details
expect(component.state.count).toBe(1);  // Internal state