diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/ui/button.test.tsx | 62 | ||||
| -rw-r--r-- | src/test/setup.ts | 1 |
2 files changed, 63 insertions, 0 deletions
diff --git a/src/components/ui/button.test.tsx b/src/components/ui/button.test.tsx new file mode 100644 index 0000000..314e9bf --- /dev/null +++ b/src/components/ui/button.test.tsx @@ -0,0 +1,62 @@ +import { describe, test, vi, expect } from 'vitest'; +import { render, screen } from '@testing-library/react'; +import { Button } from './button'; + +// Test Button component rendering +describe('Button', () => { + // Test default button rendering + test('renders default button with text', () => { + render(<Button>Click Me</Button>); + const button = screen.getByText('Click Me'); + expect(button).toBeInTheDocument(); + expect(button).toHaveAttribute('data-slot', 'button'); + }); + + // Test buttons with different variants + test('renders button with different variants', () => { + const variants = ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link']; + variants.forEach((variant) => { + render(<Button variant={variant as any}>{variant} Variant</Button>); + const button = screen.getByText(`${variant} Variant`); + expect(button).toBeInTheDocument(); + }); + }); + + // Test buttons with different sizes + test('renders button with different sizes', () => { + const sizes = ['default', 'sm', 'lg', 'icon']; + sizes.forEach((size) => { + render(<Button size={size as any}>{size} Size</Button>); + const button = screen.getByText(`${size} Size`); + expect(button).toBeInTheDocument(); + }); + }); + + // Test button click events + test('handles click events', () => { + const handleClick = vi.fn(); + render(<Button onClick={handleClick}>Click Test</Button>); + const button = screen.getByText('Click Test'); + button.click(); + expect(handleClick).toHaveBeenCalledTimes(1); + }); + + // Test disabled state + test('renders disabled button', () => { + render(<Button disabled>Disabled Button</Button>); + const button = screen.getByText('Disabled Button'); + expect(button).toBeDisabled(); + }); + + // Test asChild property + test('renders as a link when asChild is true', () => { + render( + <Button asChild> + <a href="#">As Child Link</a> + </Button> + ); + const link = screen.getByText('As Child Link'); + expect(link).toBeInTheDocument(); + expect(link.tagName).toBe('A'); + }); +}); diff --git a/src/test/setup.ts b/src/test/setup.ts new file mode 100644 index 0000000..bb02c60 --- /dev/null +++ b/src/test/setup.ts @@ -0,0 +1 @@ +import '@testing-library/jest-dom/vitest'; |
