test(slider): centralize jsdom pointer shims and add vertical drag test
This commit is contained in:
@@ -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');
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user