File size: 3,109 Bytes
6d643ca | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 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');
});
});
|