37981c2c17
- apps/web: test updates (Vitest/setup), playbackAnalyticsService, TrackGrid, serviceErrorHandler - veza-common: logging, metrics, traits, validation, random - veza-stream-server: audio pipeline, codecs, cache, monitoring, routes - apps/web/dist_verification: refresh build assets (content-hashed filenames) Co-authored-by: Cursor <cursoragent@cursor.com>
101 lines
3 KiB
TypeScript
101 lines
3 KiB
TypeScript
import { render, screen, fireEvent } from '@testing-library/react';
|
|
import { describe, it, expect, vi } from 'vitest';
|
|
import { Button } from './button';
|
|
|
|
describe('Button Component', () => {
|
|
it('renders with default props', () => {
|
|
render(<Button>Click me</Button>);
|
|
|
|
const button = screen.getByRole('button', { name: /click me/i });
|
|
expect(button).toBeInTheDocument();
|
|
expect(button).toHaveClass('bg-primary');
|
|
});
|
|
|
|
it('renders with different variants', () => {
|
|
const { rerender } = render(<Button variant="secondary">Secondary</Button>);
|
|
expect(screen.getByRole('button')).toHaveClass('bg-muted/30');
|
|
|
|
rerender(<Button variant="destructive">Destructive</Button>);
|
|
expect(screen.getByRole('button')).toHaveClass('bg-destructive/10');
|
|
|
|
rerender(<Button variant="outline">Outline</Button>);
|
|
expect(screen.getByRole('button')).toHaveClass('border');
|
|
});
|
|
|
|
it('renders with different sizes', () => {
|
|
const { rerender } = render(<Button size="sm">Small</Button>);
|
|
expect(screen.getByRole('button')).toHaveClass('h-9');
|
|
|
|
rerender(<Button size="lg">Large</Button>);
|
|
expect(screen.getByRole('button')).toHaveClass('h-12');
|
|
|
|
rerender(<Button size="icon">Icon</Button>);
|
|
expect(screen.getByRole('button')).toHaveClass('h-10');
|
|
});
|
|
|
|
it('handles click events', () => {
|
|
const handleClick = vi.fn();
|
|
render(<Button onClick={handleClick}>Click me</Button>);
|
|
|
|
const button = screen.getByRole('button');
|
|
fireEvent.click(button);
|
|
|
|
expect(handleClick).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('can be disabled', () => {
|
|
const handleClick = vi.fn();
|
|
render(
|
|
<Button disabled onClick={handleClick}>
|
|
Disabled
|
|
</Button>,
|
|
);
|
|
|
|
const button = screen.getByRole('button');
|
|
expect(button).toBeDisabled();
|
|
|
|
fireEvent.click(button);
|
|
expect(handleClick).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('applies custom className', () => {
|
|
render(<Button className="custom-class">Custom</Button>);
|
|
|
|
const button = screen.getByRole('button');
|
|
expect(button).toHaveClass('custom-class');
|
|
});
|
|
|
|
it('renders as different element when asChild is true', () => {
|
|
render(
|
|
<Button asChild>
|
|
<a href="/test">Link Button</a>
|
|
</Button>,
|
|
);
|
|
|
|
const link = screen.getByRole('link');
|
|
expect(link).toBeInTheDocument();
|
|
expect(link).toHaveAttribute('href', '/test');
|
|
});
|
|
|
|
it('forwards ref correctly', () => {
|
|
const ref = vi.fn();
|
|
render(<Button ref={ref}>Ref Button</Button>);
|
|
|
|
expect(ref).toHaveBeenCalled();
|
|
});
|
|
|
|
it('supports loading state', () => {
|
|
render(<Button loading>Loading</Button>);
|
|
|
|
const button = screen.getByRole('button');
|
|
expect(button).toBeDisabled();
|
|
expect(button).toHaveClass('opacity-70');
|
|
});
|
|
|
|
it('renders with icon when provided', () => {
|
|
const TestIcon = () => <span data-testid="test-icon">Icon</span>;
|
|
render(<Button icon={<TestIcon />}>With Icon</Button>);
|
|
|
|
expect(screen.getByTestId('test-icon')).toBeInTheDocument();
|
|
});
|
|
});
|