test(slider): centralize jsdom pointer shims and add vertical drag test

This commit is contained in:
Ilia Mashkov
2026-06-02 11:08:07 +03:00
parent 1209358d40
commit 19d9b07c55
2 changed files with 26 additions and 21 deletions
+9 -21
View File
@@ -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');
});
});