diff --git a/src/shared/ui/Slider/Slider.svelte.test.ts b/src/shared/ui/Slider/Slider.svelte.test.ts new file mode 100644 index 0000000..bb0aff9 --- /dev/null +++ b/src/shared/ui/Slider/Slider.svelte.test.ts @@ -0,0 +1,62 @@ +import { + render, + screen, +} from '@testing-library/svelte'; +import Slider from './Slider.svelte'; + +describe('Slider', () => { + describe('Rendering', () => { + it('renders a slider element', () => { + render(Slider); + expect(screen.getByRole('slider')).toBeInTheDocument(); + }); + + it('displays formatted value', () => { + render(Slider, { value: 50 }); + expect(screen.getByText('50')).toBeInTheDocument(); + }); + + it('applies a custom formatter', () => { + const { container } = render(Slider, { value: 25, format: (v: number) => `${v}%` }); + expect(container.textContent).toContain('25%'); + }); + }); + + describe('Props', () => { + it('respects min and max attributes', () => { + render(Slider, { min: 10, max: 90, value: 50 }); + const slider = screen.getByRole('slider'); + expect(slider).toHaveAttribute('aria-valuemin', '10'); + expect(slider).toHaveAttribute('aria-valuemax', '90'); + }); + + it('reflects value as aria-valuenow', () => { + render(Slider, { value: 42 }); + expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '42'); + }); + + it('is disabled when disabled=true', () => { + render(Slider, { disabled: true }); + expect(screen.getByRole('slider')).toHaveAttribute('aria-disabled', 'true'); + }); + + it('is not disabled by default', () => { + render(Slider, { value: 0 }); + expect(screen.getByRole('slider')).not.toHaveAttribute('aria-disabled', 'true'); + }); + }); + + describe('Orientations', () => { + it('renders horizontal by default', () => { + const { container } = render(Slider); + expect(screen.getByRole('slider')).toHaveAttribute('aria-orientation', 'horizontal'); + expect(container.querySelector('.cursor-col-resize')).toBeInTheDocument(); + }); + + it('renders vertical when orientation="vertical"', () => { + const { container } = render(Slider, { orientation: 'vertical' }); + expect(screen.getByRole('slider')).toHaveAttribute('aria-orientation', 'vertical'); + expect(container.querySelector('.cursor-row-resize')).toBeInTheDocument(); + }); + }); +});