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');
+    });
 });

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();