import { describe, it, expect } from 'vitest'; import { render, screen } from '@testing-library/react'; import { Button, buttonVariants } from '../button'; describe('Button', () => { it('renders with default variant', () => { render(); expect(screen.getByRole('button')).toHaveTextContent('Click me'); }); it('applies custom className', () => { render(); expect(screen.getByRole('button')).toHaveClass('custom-class'); }); it('renders with different variants', () => { const { rerender } = render(); expect(screen.getByRole('button')).toBeInTheDocument(); rerender(); expect(screen.getByRole('button')).toBeInTheDocument(); rerender(); expect(screen.getByRole('button')).toBeInTheDocument(); rerender(); expect(screen.getByRole('button')).toBeInTheDocument(); rerender(); expect(screen.getByRole('button')).toBeInTheDocument(); }); it('renders with different sizes', () => { const { rerender } = render(); expect(screen.getByRole('button')).toBeInTheDocument(); rerender(); expect(screen.getByRole('button')).toBeInTheDocument(); rerender(); expect(screen.getByRole('button')).toBeInTheDocument(); }); it('forwards ref correctly', () => { const ref = { current: null }; render(); expect(ref.current).toBeInstanceOf(HTMLButtonElement); }); it('is disabled when disabled prop is true', () => { render(); expect(screen.getByRole('button')).toBeDisabled(); }); it('buttonVariants returns correct class string', () => { const classes = buttonVariants({ variant: 'default', size: 'default' }); expect(typeof classes).toBe('string'); expect(classes.length).toBeGreaterThan(0); }); });