71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
import { describe, it, expect, vi } from 'vitest'
|
|
import { render, screen } from '@testing-library/react'
|
|
import userEvent from '@testing-library/user-event'
|
|
import { Button } from './button'
|
|
|
|
describe('Button', () => {
|
|
it('renders with default variant', () => {
|
|
render(<Button>Click me</Button>)
|
|
const button = screen.getByRole('button', { name: 'Click me' })
|
|
expect(button).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders as disabled', () => {
|
|
render(<Button disabled>Disabled</Button>)
|
|
const button = screen.getByRole('button', { name: 'Disabled' })
|
|
expect(button).toBeDisabled()
|
|
})
|
|
|
|
it('handles click events', async () => {
|
|
const user = userEvent.setup()
|
|
const onClick = vi.fn()
|
|
render(<Button onClick={onClick}>Click</Button>)
|
|
await user.click(screen.getByRole('button'))
|
|
expect(onClick).toHaveBeenCalledTimes(1)
|
|
})
|
|
|
|
it('does not fire click when disabled', async () => {
|
|
const user = userEvent.setup()
|
|
const onClick = vi.fn()
|
|
render(<Button disabled onClick={onClick}>Click</Button>)
|
|
await user.click(screen.getByRole('button'))
|
|
expect(onClick).not.toHaveBeenCalled()
|
|
})
|
|
|
|
it('renders with destructive variant', () => {
|
|
render(<Button variant="destructive">Delete</Button>)
|
|
const button = screen.getByRole('button', { name: 'Delete' })
|
|
expect(button.className).toContain('bg-destructive')
|
|
})
|
|
|
|
it('renders with outline variant', () => {
|
|
render(<Button variant="outline">Outline</Button>)
|
|
const button = screen.getByRole('button', { name: 'Outline' })
|
|
expect(button.className).toContain('border')
|
|
})
|
|
|
|
it('renders with different sizes', () => {
|
|
const { rerender } = render(<Button size="sm">Small</Button>)
|
|
expect(screen.getByRole('button').className).toContain('h-9')
|
|
|
|
rerender(<Button size="lg">Large</Button>)
|
|
expect(screen.getByRole('button').className).toContain('h-11')
|
|
})
|
|
|
|
it('renders as child with asChild prop', () => {
|
|
render(
|
|
<Button asChild>
|
|
<a href="/test">Link</a>
|
|
</Button>
|
|
)
|
|
const link = screen.getByRole('link', { name: 'Link' })
|
|
expect(link).toBeInTheDocument()
|
|
expect(link.tagName).toBe('A')
|
|
})
|
|
|
|
it('applies custom className', () => {
|
|
render(<Button className="custom-class">Custom</Button>)
|
|
expect(screen.getByRole('button').className).toContain('custom-class')
|
|
})
|
|
})
|