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>
82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
import { render, screen, fireEvent } from '@testing-library/react';
|
|
import { describe, it, expect, vi } from 'vitest';
|
|
import { Checkbox } from './checkbox';
|
|
|
|
describe('Checkbox Component', () => {
|
|
it('renders checkbox', () => {
|
|
render(<Checkbox />);
|
|
|
|
const checkbox = screen.getByRole('checkbox');
|
|
expect(checkbox).toBeInTheDocument();
|
|
expect(checkbox).not.toBeChecked();
|
|
});
|
|
|
|
it('renders with label', () => {
|
|
render(<Checkbox label="Accept terms" />);
|
|
|
|
const label = screen.getByText('Accept terms');
|
|
expect(label).toBeInTheDocument();
|
|
|
|
const checkbox = screen.getByRole('checkbox');
|
|
expect(checkbox).toBeInTheDocument();
|
|
});
|
|
|
|
it('handles onCheckedChange callback', () => {
|
|
const handleCheckedChange = vi.fn();
|
|
render(<Checkbox onCheckedChange={handleCheckedChange} />);
|
|
|
|
const checkbox = screen.getByRole('checkbox');
|
|
fireEvent.click(checkbox);
|
|
|
|
expect(handleCheckedChange).toHaveBeenCalledWith(true);
|
|
expect(checkbox).toBeChecked();
|
|
});
|
|
|
|
it('handles onChange event', () => {
|
|
const handleChange = vi.fn();
|
|
render(<Checkbox onChange={handleChange} />);
|
|
|
|
const checkbox = screen.getByRole('checkbox');
|
|
fireEvent.click(checkbox);
|
|
|
|
expect(handleChange).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('handles checked state', () => {
|
|
render(<Checkbox checked />);
|
|
|
|
const checkbox = screen.getByRole('checkbox');
|
|
expect(checkbox).toBeChecked();
|
|
});
|
|
|
|
it('handles disabled state', () => {
|
|
render(<Checkbox disabled label="Disabled checkbox" />);
|
|
|
|
const checkbox = screen.getByRole('checkbox');
|
|
expect(checkbox).toBeDisabled();
|
|
|
|
// The opacity-50 is on the wrapping label element, not the text span
|
|
const label = screen.getByText('Disabled checkbox').closest('label');
|
|
expect(label).toHaveClass('opacity-50');
|
|
});
|
|
|
|
it('toggles checked state on click', () => {
|
|
render(<Checkbox label="Toggle me" />);
|
|
|
|
const checkbox = screen.getByRole('checkbox');
|
|
expect(checkbox).not.toBeChecked();
|
|
|
|
fireEvent.click(checkbox);
|
|
expect(checkbox).toBeChecked();
|
|
|
|
fireEvent.click(checkbox);
|
|
expect(checkbox).not.toBeChecked();
|
|
});
|
|
|
|
it('applies custom className', () => {
|
|
render(<Checkbox className="custom-checkbox" />);
|
|
|
|
const label = screen.getByRole('checkbox').closest('label');
|
|
expect(label).toHaveClass('custom-checkbox');
|
|
});
|
|
});
|