// src/components/Button/Button.tsx
interface ButtonProps {
  variant?: 'primary' | 'secondary';
  loading?: boolean;
  children: React.ReactNode;
  onClick?: () => void;
}

export const Button = ({ 
  variant = 'primary', 
  loading, 
  children,
  onClick 
}: ButtonProps) => {
  return (
    <button
      className={`btn btn-${variant}`}
      disabled={loading}
      onClick={onClick}
    >
      {loading && <span className="spinner" />}
      {children}
    </button>
  );
};

// src/components/Button/Button.test.tsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Button } from './Button';

describe('Button', () => {
  describe('Rendering', () => {
    it('renders children', () => {
      render(<Button>Click me</Button>);
      expect(screen.getByRole('button', { name: /click me/i }))
        .toBeInTheDocument();
    });

    it('applies variant class', () => {
      render(<Button variant="secondary">Button</Button>);
      expect(screen.getByRole('button')).toHaveClass('btn-secondary');
    });
  });

  describe('Loading State', () => {
    it('shows spinner when loading', () => {
      const { container } = render(<Button loading>Loading</Button>);
      expect(container.querySelector('.spinner')).toBeInTheDocument();
    });

    it('disables button when loading', () => {
      render(<Button loading>Loading</Button>);
      expect(screen.getByRole('button')).toBeDisabled();
    });
  });

  describe('User Interactions', () => {
    it('calls onClick when clicked', async () => {
      const handleClick = jest.fn();
      const user = userEvent.setup();
      
      render(<Button onClick={handleClick}>Click</Button>);
      await user.click(screen.getByRole('button'));
      
      expect(handleClick).toHaveBeenCalledTimes(1);
    });

    it('does not call onClick when loading', async () => {
      const handleClick = jest.fn();
      const user = userEvent.setup();
      
      render(<Button loading onClick={handleClick}>Loading</Button>);
      await user.click(screen.getByRole('button'));
      
      expect(handleClick).not.toHaveBeenCalled();
    });
  });
});

⏺ Running tests...
✅ 8 tests passed
✅ Coverage: 95.5%
⏺ Completed in 234ms

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

test.describe('Login Flow', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('http://localhost:3000');
  });

  test('should login successfully with valid credentials', async ({ page }) => {
    // Navigate to login
    await page.click('text=Sign In');
    await expect(page).toHaveURL(/.*login/);

    // Fill form
    await page.fill('[data-testid="email"]', '[email protected]');
    await page.fill('[data-testid="password"]', 'password123');

    // Submit
    await page.click('[data-testid="submit"]');

    // Wait for navigation
    await page.waitForURL(/.*dashboard/);

    // Verify logged in
    await expect(page.locator('text=Welcome, User')).toBeVisible();
    
    // Screenshot for verification
    await page.screenshot({ 
      path: 'screenshots/login-success.png',
      fullPage: true 
    });
  });

  test('should show error for invalid credentials', async ({ page }) => {
    await page.click('text=Sign In');
    
    await page.fill('[data-testid="email"]', '[email protected]');
    await page.fill('[data-testid="password"]', 'wrongpass');
    await page.click('[data-testid="submit"]');

    // Should stay on login page
    await expect(page).toHaveURL(/.*login/);
    
    // Error message visible
    await expect(page.locator('text=Invalid credentials')).toBeVisible();
  });

  test('should handle network error', async ({ page }) => {
    // Simulate network failure
    await page.route('**/api/login', route => route.abort());

    await page.click('text=Sign In');
    await page.fill('[data-testid="email"]', '[email protected]');
    await page.fill('[data-testid="password"]', 'password123');
    await page.click('[data-testid="submit"]');

    await expect(page.locator('text=Network error')).toBeVisible();
  });
});

test.describe('Login Flow - Cross Browser', () => {
  test('works on Firefox', async ({ page, browserName }) => {
    test.skip(browserName !== 'firefox', 'Firefox only');
    
    await page.goto('http://localhost:3000/login');
    await page.fill('[data-testid="email"]', '[email protected]');
    await page.fill('[data-testid="password"]', 'password123');
    await page.click('[data-testid="submit"]');
    
    await expect(page).toHaveURL(/.*dashboard/);
  });
});

⏺ Running E2E tests...
⏺ Using Playwright MCP...

Running 4 tests using 3 workers

  ✓ login-flow.spec.ts:5:3 › Login Flow › should login successfully (2.3s)
  ✓ login-flow.spec.ts:25:3 › Login Flow › should show error (1.8s)
  ✓ login-flow.spec.ts:38:3 › Login Flow › should handle network error (1.5s)
  ✓ login-flow.spec.ts:50:3 › Login Flow - Cross Browser › works on Firefox (2.1s)

  4 passed (7.7s)

⏺ Screenshots saved to screenshots/
⏺ Completed

// src/components/AddToCartButton/AddToCartButton.test.tsx
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 { AddToCartButton } from './AddToCartButton';

const server = setupServer(
  http.post('/api/cart', async ({ request }) => {
    const { productId, quantity } = await request.json();
    return HttpResponse.json({
      success: true,
      cartId: '123',
      itemCount: quantity
    });
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

describe('AddToCartButton', () => {
  it('adds item to cart on click', async () => {
    const user = userEvent.setup();
    render(<AddToCartButton productId="prod-1" />);

    await user.click(screen.getByRole('button', { name: /add to cart/i }));

    await screen.findByText(/added to cart/i);
  });

  it('shows loading state during API call', async () => {
    const user = userEvent.setup();
    render(<AddToCartButton productId="prod-1" />);

    const button = screen.getByRole('button', { name: /add to cart/i });
    await user.click(button);

    expect(button).toBeDisabled();
    expect(screen.getByText(/adding/i)).toBeInTheDocument();
  });

  it('handles API error', async () => {
    server.use(
      http.post('/api/cart', () => {
        return HttpResponse.json(
          { error: 'Out of stock' },
          { status: 400 }
        );
      })
    );

    const user = userEvent.setup();
    render(<AddToCartButton productId="prod-1" />);

    await user.click(screen.getByRole('button'));

    await expect(screen.findByText(/out of stock/i)).resolves.toBeInTheDocument();
  });
});

⏺ 8 tests passed, Coverage: 92%

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

describe('CartSummary', () => {
  it('displays empty cart message', () => {
    render(<CartSummary items={[]} />);
    expect(screen.getByText(/cart is empty/i)).toBeInTheDocument();
  });

  it('calculates total correctly', () => {
    const items = [
      { id: '1', name: 'Item 1', price: 10, quantity: 2 },
      { id: '2', name: 'Item 2', price: 15, quantity: 1 }
    ];

    render(<CartSummary items={items} />);

    expect(screen.getByText(/total: \$35/i)).toBeInTheDocument();
  });

  it('shows item count', () => {
    const items = [
      { id: '1', name: 'Item 1', price: 10, quantity: 2 },
      { id: '2', name: 'Item 2', price: 15, quantity: 3 }
    ];

    render(<CartSummary items={items} />);

    expect(screen.getByText(/5 items/i)).toBeInTheDocument();
  });
});

⏺ 6 tests passed, Coverage: 88%

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

test.describe('Complete Shopping Flow', () => {
  test('should complete purchase from product to checkout', async ({ page }) => {
    // 1. Browse products
    await page.goto('http://localhost:3000/products');
    await expect(page.locator('[data-testid="product-card"]').first())
      .toBeVisible();

    // 2. Select product
    await page.click('[data-testid="product-card"]:first-child');
    await expect(page).toHaveURL(/.*product\/[^/]+/);

    // 3. Add to cart
    await page.click('[data-testid="add-to-cart"]');
    await expect(page.locator('text=Added to cart')).toBeVisible();

    // 4. Verify cart badge
    await expect(page.locator('[data-testid="cart-badge"]')).toHaveText('1');

    // 5. Go to cart
    await page.click('[data-testid="cart-icon"]');
    await expect(page).toHaveURL(/.*cart/);

    // 6. Update quantity
    await page.click('[data-testid="quantity-increase"]');
    await expect(page.locator('[data-testid="quantity"]')).toHaveText('2');

    // 7. Verify total updated
    const totalBefore = await page.locator('[data-testid="total"]').textContent();
    await page.click('[data-testid="quantity-increase"]');
    const totalAfter = await page.locator('[data-testid="total"]').textContent();
    expect(totalBefore).not.toBe(totalAfter);

    // 8. Proceed to checkout
    await page.click('text=Checkout');
    await expect(page).toHaveURL(/.*checkout/);

    // 9. Fill shipping info
    await page.fill('[data-testid="name"]', 'Test User');
    await page.fill('[data-testid="address"]', '123 Test St');
    await page.fill('[data-testid="city"]', 'Test City');
    await page.fill('[data-testid="zip"]', '12345');

    // 10. Fill payment (test card)
    await page.fill('[data-testid="card-number"]', '4242424242424242');
    await page.fill('[data-testid="card-expiry"]', '12/25');
    await page.fill('[data-testid="card-cvc"]', '123');

    // 11. Place order
    await page.click('text=Place Order');

    // 12. Verify confirmation
    await expect(page).toHaveURL(/.*order\/confirmation/);
    await expect(page.locator('text=Order Confirmed')).toBeVisible();

    // 13. Screenshot confirmation
    await page.screenshot({ 
      path: 'screenshots/order-confirmation.png',
      fullPage: true 
    });
  });

  test('should update cart total when quantity changes', async ({ page }) => {
    await page.goto('http://localhost:3000/cart');
    
    const initialTotal = await page.locator('[data-testid="total"]').textContent();
    
    await page.click('[data-testid="quantity-increase"]');
    
    await expect(async () => {
      const newTotal = await page.locator('[data-testid="total"]').textContent();
      expect(newTotal).not.toBe(initialTotal);
    }).toPass();
  });

  test('should remove item from cart', async ({ page }) => {
    await page.goto('http://localhost:3000/cart');
    
    const itemCount = await page.locator('[data-testid="cart-item"]').count();
    
    await page.click('[data-testid="remove-item"]:first-child');
    
    await expect(page.locator('[data-testid="cart-item"]'))
      .toHaveCount(itemCount - 1);
  });
});

⏺ 3 E2E tests passed in 18.5s