import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { Button } from './Button'
describe('Button', () => {
it('renders with default props', () => {
render(<Button>Click me</Button>)
const button = screen.getByRole('button', { name: /click me/i })
expect(button).toBeInTheDocument()
expect(button).toHaveClass('bg-primary', 'text-primary-foreground')
})
it('renders with different variants', () => {
render(<Button variant="outline">Outline Button</Button>)
const button = screen.getByRole('button', { name: /outline button/i })
expect(button).toHaveClass('border', 'border-input', 'bg-background')
})
it('renders with different sizes', () => {
render(<Button size="sm">Small Button</Button>)
const button = screen.getByRole('button', { name: /small button/i })
expect(button).toHaveClass('h-9', 'rounded-md', 'px-3')
})
it('handles click events', () => {
const handleClick = vi.fn()
render(<Button onClick={handleClick}>Clickable</Button>)
const button = screen.getByRole('button', { name: /clickable/i })
button.click()
expect(handleClick).toHaveBeenCalledTimes(1)
})
it('is disabled when disabled prop is true', () => {
render(<Button disabled>Disabled Button</Button>)
const button = screen.getByRole('button', { name: /disabled button/i })
expect(button).toBeDisabled()
expect(button).toHaveClass('disabled:pointer-events-none', 'disabled:opacity-50')
})
it('applies custom className', () => {
render(<Button className="custom-class">Custom Button</Button>)
const button = screen.getByRole('button', { name: /custom button/i })
expect(button).toHaveClass('custom-class')
})
})
