81 lines
2.2 KiB
TypeScript
81 lines
2.2 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();
|
|
|
|
const label = screen.getByText('Disabled checkbox');
|
|
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');
|
|
});
|
|
});
|