| import { describe, expect, it, vi } from 'vitest'; |
|
|
| import { Button } from '@/components/ui/button'; |
| import { fireEvent, render, screen } from '@/test/utils'; |
|
|
| describe('Button', () => { |
| it('should render with default variant and size', () => { |
| render(<Button>Click me</Button>); |
|
|
| const button = screen.getByRole('button', { name: 'Click me' }); |
| expect(button).toBeInTheDocument(); |
| expect(button).toHaveClass('bg-primary'); |
| }); |
|
|
| it('should render with secondary variant', () => { |
| render(<Button variant="secondary">Secondary</Button>); |
|
|
| const button = screen.getByRole('button', { name: 'Secondary' }); |
| expect(button).toHaveClass('bg-secondary'); |
| }); |
|
|
| it('should render with outline variant', () => { |
| render(<Button variant="outline">Outline</Button>); |
|
|
| const button = screen.getByRole('button', { name: 'Outline' }); |
| expect(button).toHaveClass('border'); |
| }); |
|
|
| it('should render with ghost variant', () => { |
| render(<Button variant="ghost">Ghost</Button>); |
|
|
| const button = screen.getByRole('button', { name: 'Ghost' }); |
| expect(button).toHaveClass('hover:bg-accent'); |
| }); |
|
|
| it('should render with destructive variant', () => { |
| render(<Button variant="destructive">Destructive</Button>); |
|
|
| const button = screen.getByRole('button', { name: 'Destructive' }); |
| expect(button).toHaveClass('bg-destructive'); |
| }); |
|
|
| it('should render with different sizes', () => { |
| const { rerender } = render(<Button size="default">Default</Button>); |
|
|
| let button = screen.getByRole('button', { name: 'Default' }); |
| expect(button).toHaveClass('h-10'); |
|
|
| rerender(<Button size="sm">Small</Button>); |
| button = screen.getByRole('button', { name: 'Small' }); |
| expect(button).toHaveClass('h-9'); |
|
|
| rerender(<Button size="lg">Large</Button>); |
| button = screen.getByRole('button', { name: 'Large' }); |
| expect(button).toHaveClass('h-11'); |
| }); |
|
|
| it('should handle click events', () => { |
| const handleClick = vi.fn(); |
| render(<Button onClick={handleClick}>Click me</Button>); |
|
|
| const button = screen.getByRole('button', { name: 'Click me' }); |
| fireEvent.click(button); |
|
|
| expect(handleClick).toHaveBeenCalledTimes(1); |
| }); |
|
|
| it('should be disabled when disabled prop is true', () => { |
| render(<Button disabled>Disabled</Button>); |
|
|
| const button = screen.getByRole('button', { name: 'Disabled' }); |
| expect(button).toBeDisabled(); |
| expect(button).toHaveClass('disabled:opacity-50'); |
| }); |
|
|
| it('should render with custom className', () => { |
| render(<Button className="custom-class">Custom</Button>); |
|
|
| const button = screen.getByRole('button', { name: 'Custom' }); |
| expect(button).toHaveClass('custom-class'); |
| }); |
|
|
| it('should render as a different element when asChild is true', () => { |
| render( |
| <Button asChild> |
| <a href="#">Link Button</a> |
| </Button> |
| ); |
|
|
| const link = screen.getByRole('link', { name: 'Link Button' }); |
| expect(link).toBeInTheDocument(); |
| expect(link).toHaveAttribute('href', '#'); |
| expect(link).toHaveClass('inline-flex'); |
| }); |
| }); |
|
|
