|
| 1 | +/** |
| 2 | + * @vitest-environment jsdom |
| 3 | + * |
| 4 | + * A mouse whose wheel reports only `deltaY` has no native gesture for reaching a preview |
| 5 | + * table's horizontal overflow short of dragging the scrollbar, so the tabular previews bind |
| 6 | + * `bindPreviewHorizontalWheel`. It must move the container on a horizontal gesture, stay out |
| 7 | + * of the way otherwise, and — unlike the zooming variant — leave ctrl/cmd+wheel to the browser |
| 8 | + * so page zoom still works over a table. |
| 9 | + */ |
| 10 | +import { beforeEach, describe, expect, it } from 'vitest' |
| 11 | +import { bindPreviewHorizontalWheel } from '@/app/workspace/[workspaceId]/files/components/file-viewer/preview-wheel-zoom' |
| 12 | + |
| 13 | +/** jsdom does no layout, so scrollWidth/clientWidth are stubbed to model an overflowing container. */ |
| 14 | +function makeContainer({ scrollWidth = 2000, clientWidth = 1000 } = {}): HTMLElement { |
| 15 | + const el = document.createElement('div') |
| 16 | + Object.defineProperty(el, 'scrollWidth', { value: scrollWidth, configurable: true }) |
| 17 | + Object.defineProperty(el, 'clientWidth', { value: clientWidth, configurable: true }) |
| 18 | + el.scrollLeft = 0 |
| 19 | + document.body.appendChild(el) |
| 20 | + return el |
| 21 | +} |
| 22 | + |
| 23 | +function wheel(el: HTMLElement, init: WheelEventInit): WheelEvent { |
| 24 | + const event = new WheelEvent('wheel', { bubbles: true, cancelable: true, ...init }) |
| 25 | + el.dispatchEvent(event) |
| 26 | + return event |
| 27 | +} |
| 28 | + |
| 29 | +describe('bindPreviewHorizontalWheel', () => { |
| 30 | + let container: HTMLElement |
| 31 | + let unbind: () => void |
| 32 | + |
| 33 | + beforeEach(() => { |
| 34 | + document.body.innerHTML = '' |
| 35 | + container = makeContainer() |
| 36 | + unbind = bindPreviewHorizontalWheel(container) |
| 37 | + }) |
| 38 | + |
| 39 | + it("scrolls by a trackpad's horizontal delta", () => { |
| 40 | + const event = wheel(container, { deltaX: 120, deltaY: 0 }) |
| 41 | + |
| 42 | + expect(container.scrollLeft).toBe(120) |
| 43 | + expect(event.defaultPrevented).toBe(true) |
| 44 | + }) |
| 45 | + |
| 46 | + it('maps shift+wheel to horizontal for a vertical-only mouse', () => { |
| 47 | + const event = wheel(container, { deltaX: 0, deltaY: 120, shiftKey: true }) |
| 48 | + |
| 49 | + expect(container.scrollLeft).toBe(120) |
| 50 | + expect(event.defaultPrevented).toBe(true) |
| 51 | + }) |
| 52 | + |
| 53 | + /** |
| 54 | + * Cancelling a wheel event is all-or-nothing, so a diagonal trackpad pan must have its |
| 55 | + * vertical movement re-applied by hand — otherwise `preventDefault` silently eats it. |
| 56 | + */ |
| 57 | + it('keeps the vertical movement of a diagonal pan', () => { |
| 58 | + Object.defineProperty(container, 'scrollHeight', { value: 5000, configurable: true }) |
| 59 | + Object.defineProperty(container, 'clientHeight', { value: 500, configurable: true }) |
| 60 | + |
| 61 | + wheel(container, { deltaX: 40, deltaY: 90 }) |
| 62 | + |
| 63 | + expect(container.scrollLeft).toBe(40) |
| 64 | + expect(container.scrollTop).toBe(90) |
| 65 | + }) |
| 66 | + |
| 67 | + it('does not also spend a shift gesture vertically', () => { |
| 68 | + wheel(container, { deltaX: 0, deltaY: 120, shiftKey: true }) |
| 69 | + |
| 70 | + expect(container.scrollLeft).toBe(120) |
| 71 | + expect(container.scrollTop).toBe(0) |
| 72 | + }) |
| 73 | + |
| 74 | + /** |
| 75 | + * `deltaMode` is not always pixels — Firefox reports mouse wheels in lines — while scroll |
| 76 | + * offsets always are, so a three-line notch added raw would move the table three pixels. |
| 77 | + */ |
| 78 | + it('converts a line-mode delta to pixels', () => { |
| 79 | + wheel(container, { deltaX: 3, deltaY: 0, deltaMode: WheelEvent.DOM_DELTA_LINE }) |
| 80 | + |
| 81 | + expect(container.scrollLeft).toBe(48) |
| 82 | + }) |
| 83 | + |
| 84 | + it('converts a page-mode delta to the container width', () => { |
| 85 | + wheel(container, { deltaX: 1, deltaY: 0, deltaMode: WheelEvent.DOM_DELTA_PAGE }) |
| 86 | + |
| 87 | + expect(container.scrollLeft).toBe(1000) |
| 88 | + }) |
| 89 | + |
| 90 | + it('leaves a plain vertical wheel alone so the container still scrolls down', () => { |
| 91 | + const event = wheel(container, { deltaX: 0, deltaY: 120 }) |
| 92 | + |
| 93 | + expect(container.scrollLeft).toBe(0) |
| 94 | + expect(event.defaultPrevented).toBe(false) |
| 95 | + }) |
| 96 | + |
| 97 | + /** Zoom is the browser's here — the tabular previews have no zoom of their own. */ |
| 98 | + it.each([ |
| 99 | + ['ctrl', { ctrlKey: true }], |
| 100 | + ['cmd', { metaKey: true }], |
| 101 | + ])('leaves %s+wheel to the browser', (_label, modifier) => { |
| 102 | + const event = wheel(container, { deltaX: 120, deltaY: 0, ...modifier }) |
| 103 | + |
| 104 | + expect(container.scrollLeft).toBe(0) |
| 105 | + expect(event.defaultPrevented).toBe(false) |
| 106 | + }) |
| 107 | + |
| 108 | + it('does nothing when the container has no horizontal overflow', () => { |
| 109 | + const fitted = makeContainer({ scrollWidth: 1000, clientWidth: 1000 }) |
| 110 | + const unbindFitted = bindPreviewHorizontalWheel(fitted) |
| 111 | + |
| 112 | + const event = wheel(fitted, { deltaX: 120, deltaY: 0 }) |
| 113 | + |
| 114 | + expect(fitted.scrollLeft).toBe(0) |
| 115 | + expect(event.defaultPrevented).toBe(false) |
| 116 | + unbindFitted() |
| 117 | + }) |
| 118 | + |
| 119 | + it('stops scrolling once unbound', () => { |
| 120 | + unbind() |
| 121 | + |
| 122 | + wheel(container, { deltaX: 120, deltaY: 0 }) |
| 123 | + |
| 124 | + expect(container.scrollLeft).toBe(0) |
| 125 | + }) |
| 126 | + |
| 127 | + it('scrolls a child gesture, since the listener captures', () => { |
| 128 | + const cell = document.createElement('td') |
| 129 | + container.appendChild(cell) |
| 130 | + |
| 131 | + wheel(cell, { deltaX: 80, deltaY: 0 }) |
| 132 | + |
| 133 | + expect(container.scrollLeft).toBe(80) |
| 134 | + }) |
| 135 | +}) |
0 commit comments