diff --git a/src/shared/ui/Slider/Slider.svelte.test.ts b/src/shared/ui/Slider/Slider.svelte.test.ts index 6901c2d..d072e31 100644 --- a/src/shared/ui/Slider/Slider.svelte.test.ts +++ b/src/shared/ui/Slider/Slider.svelte.test.ts @@ -3,29 +3,8 @@ import { render, screen, } from '@testing-library/svelte'; -import { - beforeAll, - vi, -} from 'vitest'; import Slider from './Slider.svelte'; -// jsdom lacks PointerEvent; back it with MouseEvent so clientX/clientY survive. -beforeAll(() => { - if (typeof PointerEvent === 'undefined') { - class PointerEventPolyfill extends MouseEvent { - pointerId: number; - constructor(type: string, params: PointerEventInit = {}) { - super(type, params); - this.pointerId = params.pointerId ?? 1; - } - } - // @ts-expect-error assigning polyfill to global - global.PointerEvent = PointerEventPolyfill; - } - HTMLElement.prototype.setPointerCapture = vi.fn(); - HTMLElement.prototype.releasePointerCapture = vi.fn(); -}); - describe('Slider', () => { describe('Rendering', () => { it('renders a slider element', () => { @@ -169,4 +148,13 @@ describe('Pointer', () => { await fireEvent.pointerDown(track, { clientX: 100, clientY: 10, pointerId: 1 }); expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '0'); }); + + it('maps a vertical drag with the inverted axis (bottom→min, top→max)', async () => { + const { container } = render(Slider, { value: 0, min: 0, max: 100, orientation: 'vertical' }); + const track = container.querySelector('[role="presentation"]') as HTMLElement; + track.getBoundingClientRect = () => + ({ left: 0, right: 20, top: 0, bottom: 200, width: 20, height: 200 }) as DOMRect; + await fireEvent.pointerDown(track, { clientX: 10, clientY: 50, pointerId: 1 }); + expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '75'); + }); }); diff --git a/vitest.setup.jsdom.ts b/vitest.setup.jsdom.ts index 0aa5e51..228df6a 100644 --- a/vitest.setup.jsdom.ts +++ b/vitest.setup.jsdom.ts @@ -44,3 +44,20 @@ Object.defineProperty(window, 'localStorage', { value: localStorageMock, writable: true, }); + +// jsdom lacks PointerEvent; back it with MouseEvent so clientX/clientY survive. +if (typeof PointerEvent === 'undefined') { + class PointerEventPolyfill extends MouseEvent { + pointerId: number; + constructor(type: string, params: PointerEventInit = {}) { + super(type, params); + this.pointerId = params.pointerId ?? 1; + } + } + // @ts-expect-error assigning polyfill to the global scope + global.PointerEvent = PointerEventPolyfill; +} + +// jsdom lacks pointer capture +HTMLElement.prototype.setPointerCapture = vi.fn(); +HTMLElement.prototype.releasePointerCapture = vi.fn();