64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import { render, screen, fireEvent } from '@testing-library/react';
|
|
import { describe, it, expect, vi } from 'vitest';
|
|
import { Slider } from './slider';
|
|
|
|
describe('Slider Component', () => {
|
|
it('renders slider', () => {
|
|
render(<Slider value={[50]} />);
|
|
|
|
const slider = screen.getByRole('slider');
|
|
expect(slider).toBeInTheDocument();
|
|
});
|
|
|
|
it('handles value prop', () => {
|
|
render(<Slider value={[25]} />);
|
|
|
|
const slider = screen.getByRole('slider') as HTMLInputElement;
|
|
expect(slider.value).toBe('25');
|
|
});
|
|
|
|
it('handles controlled value', () => {
|
|
const { rerender } = render(<Slider value={[50]} />);
|
|
|
|
let slider = screen.getByRole('slider') as HTMLInputElement;
|
|
expect(slider.value).toBe('50');
|
|
|
|
rerender(<Slider value={[75]} />);
|
|
slider = screen.getByRole('slider') as HTMLInputElement;
|
|
expect(slider.value).toBe('75');
|
|
});
|
|
|
|
it('calls onValueChange when value changes', () => {
|
|
const handleChange = vi.fn();
|
|
render(<Slider value={[50]} onValueChange={handleChange} />);
|
|
|
|
const slider = screen.getByRole('slider');
|
|
fireEvent.change(slider, { target: { value: '75' } });
|
|
|
|
expect(handleChange).toHaveBeenCalledWith([75]);
|
|
});
|
|
|
|
it('handles min and max values', () => {
|
|
render(<Slider min={0} max={100} value={[50]} />);
|
|
|
|
const slider = screen.getByRole('slider');
|
|
expect(slider).toHaveAttribute('min', '0');
|
|
expect(slider).toHaveAttribute('max', '100');
|
|
});
|
|
|
|
it('handles disabled state', () => {
|
|
render(<Slider disabled value={[50]} />);
|
|
|
|
const slider = screen.getByRole('slider');
|
|
expect(slider).toBeDisabled();
|
|
});
|
|
|
|
it('applies custom className', () => {
|
|
const { container } = render(
|
|
<Slider className="custom-slider" value={[50]} />,
|
|
);
|
|
|
|
const slider = container.querySelector('.custom-slider');
|
|
expect(slider).toBeInTheDocument();
|
|
});
|
|
});
|