/\
       /E2E\
      /------\
     /  API   \
    /----------\
   /    Unit    \
  /--------------\

// sum.ts
export function sum(a: number, b: number): number {
  return a + b
}

// sum.test.ts
import { sum } from './sum'

describe('sum', () => {
  it('adds two numbers correctly', () => {
    expect(sum(2, 3)).toBe(5)
  })

  it('handles negative numbers', () => {
    expect(sum(-1, 1)).toBe(0)
  })
})

import { render, screen, fireEvent } from '@testing-library/react'
import { Button } from './Button'

describe('Button', () => {
  it('renders with correct text', () => {
    render(<Button>Click me</Button>)
    expect(screen.getByText('Click me')).toBeInTheDocument()
  })

  it('calls onClick when clicked', () => {
    const handleClick = jest.fn()
    render(<Button onClick={handleClick}>Click me</Button>)
    
    fireEvent.click(screen.getByText('Click me'))
    expect(handleClick).toHaveBeenCalledTimes(1)
  })

  it('is disabled when disabled prop is true', () => {
    render(<Button disabled>Click me</Button>)
    expect(screen.getByRole('button')).toBeDisabled()
  })
})

describe('User API', () => {
  it('creates a new user', async () => {
    const response = await request(app)
      .post('/api/users')
      .send({
        email: 'test@example.com',
        name: 'Test User'
      })
    
    expect(response.status).toBe(201)
    expect(response.body).toMatchObject({
      email: 'test@example.com',
      name: 'Test User'
    })
  })
})

describe('UserRepository', () => {
  beforeEach(async () => {
    await clearDatabase()
  })

  it('saves user to database', async () => {
    const user = await userRepository.create({
      email: 'test@example.com',
      name: 'Test User'
    })
    
    const found = await userRepository.findById(user.id)
    expect(found).toEqual(user)
  })
})

import { test, expect } from '@playwright/test'

test('user can complete checkout flow', async ({ page }) => {
  // Navigate to product page
  await page.goto('/products/123')
  
  // Add to cart
  await page.click('[data-testid="add-to-cart"]')
  
  // Go to checkout
  await page.click('[data-testid="cart-icon"]')
  await page.click('[data-testid="checkout-button"]')
  
  // Fill shipping info
  await page.fill('[name="email"]', 'test@example.com')
  await page.fill('[name="address"]', '123 Main St')
  
  // Complete purchase
  await page.click('[data-testid="place-order"]')
  
  // Verify success
  await expect(page.locator('[data-testid="order-confirmation"]'))
    .toBeVisible()
})

// 1. RED: Write failing test
test('formats price correctly', () => {
  expect(formatPrice(1999)).toBe('$19.99')
})

// 2. GREEN: Make it pass
function formatPrice(cents: number): string {
  return `$${(cents / 100).toFixed(2)}`
}

// 3. REFACTOR: Improve implementation
function formatPrice(cents: number, currency = 'USD'): string {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency
  }).format(cents / 100)
}

test('example', () => {
  // Arrange: Set up test data
  const user = createUser()
  
  // Act: Execute the code being tested
  const result = processUser(user)
  
  // Assert: Verify the outcome
  expect(result).toBe(expected)
})

// Good
test('returns null when user is not found')
test('throws error when email is invalid')

// Avoid
test('test1')
test('it works')

// ❌ Bad: Testing internal state
test('sets loading state to true', () => {
  expect(component.state.loading).toBe(true)
})

// ✅ Good: Testing behavior
test('shows loading spinner', () => {
  expect(screen.getByRole('status')).toBeInTheDocument()
})

const mockFetch = jest.fn()
global.fetch = mockFetch

mockFetch.mockResolvedValue({
  json: async () => ({ data: 'test' })
})

jest.mock('./api', () => ({
  fetchUser: jest.fn().mockResolvedValue({
    id: '1',
    name: 'Test User'
  })
}))

npm run test:coverage

test:
  script:
    - npm run test:unit
    - npm run test:integration
    - npm run test:e2e
  coverage: '/Coverage: \d+\.\d+%/'