39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import userEvent from '@testing-library/user-event';
|
|
import { describe, it, expect, vi } from 'vitest';
|
|
import { Button } from './Button';
|
|
|
|
describe('Button', () => {
|
|
it('renders children text', () => {
|
|
render(<Button>Click me</Button>);
|
|
expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
|
|
});
|
|
|
|
it('calls onClick handler', async () => {
|
|
const user = userEvent.setup();
|
|
const onClick = vi.fn();
|
|
render(<Button onClick={onClick}>Click</Button>);
|
|
await user.click(screen.getByRole('button'));
|
|
expect(onClick).toHaveBeenCalledOnce();
|
|
});
|
|
|
|
it('is disabled when disabled prop is set', () => {
|
|
render(<Button disabled>Disabled</Button>);
|
|
expect(screen.getByRole('button')).toBeDisabled();
|
|
});
|
|
|
|
it('applies variant styles', () => {
|
|
const { rerender } = render(<Button variant="primary">Primary</Button>);
|
|
const btn = screen.getByRole('button');
|
|
expect(btn.className).toContain('bg-warm-text-secondary');
|
|
|
|
rerender(<Button variant="secondary">Secondary</Button>);
|
|
expect(screen.getByRole('button').className).toContain('border');
|
|
});
|
|
|
|
it('applies size styles', () => {
|
|
render(<Button size="sm">Small</Button>);
|
|
expect(screen.getByRole('button').className).toContain('h-8');
|
|
});
|
|
});
|