1. Unit Testing. Componentes puros: Button

gistfile1.txt

// Component
interface ButtonProps {
  variant: 'primary' | 'secondary'
  disabled?: boolean
  onClick: () => void
  children: React.ReactNode
}

export const Button = ({ variant, disabled, onClick, children }: ButtonProps) => (
  <button
    className={`btn btn-${variant}`}
    disabled={disabled}
    onClick={onClick}
  >
    {children}
  </button>
)

// Test
describe('Button', () => {
  it('renderiza children correctamente', () => {
    render(<Button variant="primary" onClick={vi.fn()}>Click me</Button>)
    expect(screen.getByRole('button')).toHaveTextContent('Click me')
  })

  it('aplica la clase variant correcta', () => {
    render(<Button variant="secondary" onClick={vi.fn()}>Test</Button>)
    expect(screen.getByRole('button')).toHaveClass('btn-secondary')
  })

  it('llama onClick cuando se hace click', async () => {
    const user = userEvent.setup()
    const handleClick = vi.fn()
    
    render(<Button variant="primary" onClick={handleClick}>Click</Button>)
    await user.click(screen.getByRole('button'))
    
    expect(handleClick).toHaveBeenCalledTimes(1)
  })

  it('no puede hacer click cuando está disabled', async () => {
    const user = userEvent.setup()
    const handleClick = vi.fn()
    
    render(<Button variant="primary" disabled onClick={handleClick}>Click</Button>)
    await user.click(screen.getByRole('button'))
    
    expect(handleClick).not.toHaveBeenCalled()
  })
})