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);
});
});