@aiquants/virtualscroll 1.19.3 → 1.22.0

package/src/ScrollPane.spec.tsx

@@ -1,482 +0,0 @@
-/**
- * @fileoverview Regression tests for ScrollPane fixes (G4 group).
- * Covers negative initialScrollPosition clamping, the conditional
- * wheel preventDefault behavior (ctrl+wheel zoom / horizontal wheel),
- * pointer-drag state robustness (lost pointerup / lostpointercapture /
- * second-pointer takeover / synchronous lostpointercapture on release),
- * inertia robustness (stale velocity samples / reentrant stopInertia),
- * scrollTo non-finite guarding, conditional touchAction, and lazy
- * debug-log argument evaluation.
- *
- * ScrollPane の修正に対する回帰テスト（G4 グループ）。
- * 負の initialScrollPosition のクランプ、ホイールの条件付き preventDefault
- * (ctrl+wheel ズーム / 水平ホイール)、ポインタドラッグ状態の堅牢化
- * (pointerup 喪失 / lostpointercapture / 2 本目ポインタの乗っ取り /
- * 解放時の同期 lostpointercapture)、慣性の堅牢化 (静止後リリース /
- * 再入 stopInertia)、scrollTo の非有限値ガード、touchAction の条件付き適用、
- * デバッグログ引数の遅延評価を検証します。
- */
-
-import { cleanup, fireEvent, render } from "@testing-library/react"
-import { createRef } from "react"
-import { afterEach, beforeAll, describe, expect, it, vi } from "vitest"
-import { Logger, LogLevel } from "./logger.ts"
-import { ScrollPane, type ScrollPaneHandle } from "./ScrollPane"
-
-// jsdom は PointerEvent とポインタキャプチャ API を持たないため補完する。
-// jsdom lacks PointerEvent and pointer-capture APIs; polyfill them for these tests.
-beforeAll(() => {
-    if (typeof window.PointerEvent === "undefined") {
-        class PointerEventPolyfill extends MouseEvent {
-            pointerId: number
-            pointerType: string
-            constructor(type: string, params: PointerEventInit = {}) {
-                super(type, params)
-                this.pointerId = params.pointerId ?? 0
-                this.pointerType = params.pointerType ?? "mouse"
-            }
-        }
-        // @ts-expect-error jsdom への PointerEvent 補完
-        window.PointerEvent = PointerEventPolyfill
-    }
-    HTMLElement.prototype.setPointerCapture ??= function setPointerCapture() {}
-    HTMLElement.prototype.releasePointerCapture ??= function releasePointerCapture() {}
-    HTMLElement.prototype.hasPointerCapture ??= function hasPointerCapture() {
-        return false
-    }
-})
-
-afterEach(() => {
-    cleanup()
-    vi.restoreAllMocks()
-})
-
-const dispatchWheel = (target: Element, init: WheelEventInit) => {
-    const event = new WheelEvent("wheel", { cancelable: true, bubbles: true, ...init })
-    target.dispatchEvent(event)
-    return event
-}
-
-describe("ScrollPane - negative initialScrollPosition clamp", () => {
-    it("clamps a negative initialScrollPosition to 0 on first render", () => {
-        let capturedPosition = Number.NaN
-        render(
-            <ScrollPane contentSize={1000} viewportSize={200} initialScrollPosition={-50}>
-                {(scrollPosition) => {
-                    capturedPosition = scrollPosition
-                    return <div>content</div>
-                }}
-            </ScrollPane>,
-        )
-        expect(capturedPosition).toBe(0)
-    })
-
-    it("keeps a valid initialScrollPosition untouched", () => {
-        let capturedPosition = Number.NaN
-        render(
-            <ScrollPane contentSize={1000} viewportSize={200} initialScrollPosition={300}>
-                {(scrollPosition) => {
-                    capturedPosition = scrollPosition
-                    return <div>content</div>
-                }}
-            </ScrollPane>,
-        )
-        expect(capturedPosition).toBe(300)
-    })
-})
-
-describe("ScrollPane - conditional wheel preventDefault", () => {
-    const setup = (onScroll = vi.fn()) => {
-        const { container } = render(
-            <ScrollPane contentSize={1000} viewportSize={200} onScroll={onScroll}>
-                {() => <div>content</div>}
-            </ScrollPane>,
-        )
-        const pane = container.querySelector(".aqvs-scroll-pane")
-        if (!(pane instanceof HTMLElement)) {
-            throw new Error("scroll pane element not found")
-        }
-        return { pane, onScroll }
-    }
-
-    it("prevents default and scrolls on a normal vertical wheel", () => {
-        const { pane, onScroll } = setup()
-        const event = dispatchWheel(pane, { deltaY: 100 })
-        expect(event.defaultPrevented).toBe(true)
-        expect(onScroll).toHaveBeenCalledWith(100, 0)
-    })
-
-    it("does not prevent default nor scroll on ctrl+wheel (pinch zoom)", () => {
-        const { pane, onScroll } = setup()
-        const event = dispatchWheel(pane, { deltaY: 100, ctrlKey: true })
-        expect(event.defaultPrevented).toBe(false)
-        expect(onScroll).not.toHaveBeenCalled()
-    })
-
-    it("does not prevent default nor scroll on a horizontal-only wheel", () => {
-        const { pane, onScroll } = setup()
-        const event = dispatchWheel(pane, { deltaX: 100, deltaY: 0 })
-        expect(event.defaultPrevented).toBe(false)
-        expect(onScroll).not.toHaveBeenCalled()
-    })
-})
-
-/**
- * Builds a PointerEvent-like init for jsdom fireEvent.pointer*.
- *
- * jsdom の fireEvent.pointer* 用に PointerEvent 相当の初期化を生成。
- */
-const pointerInit = (pointerId: number, clientY: number, buttons: number) => ({
-    pointerId,
-    clientX: 0,
-    clientY,
-    buttons,
-    button: 0,
-    bubbles: true,
-    cancelable: true,
-    pointerType: "mouse",
-})
-
-const setupDragPane = (props: { contentSize?: number; viewportSize?: number } = {}) => {
-    const onScroll = vi.fn()
-    const { container } = render(
-        <ScrollPane contentSize={props.contentSize ?? 1000} viewportSize={props.viewportSize ?? 200} onScroll={onScroll}>
-            {() => <div>content</div>}
-        </ScrollPane>,
-    )
-    const content = container.querySelector(".aqvs-scroll-pane-content")
-    if (!(content instanceof HTMLElement)) {
-        throw new Error("scroll pane content element not found")
-    }
-    return { container, content, onScroll }
-}
-
-describe("ScrollPane - pointer drag state robustness", () => {
-    it("scrolls on a normal captured drag (baseline)", () => {
-        const { content, onScroll } = setupDragPane()
-        fireEvent.pointerDown(content, pointerInit(1, 100, 1))
-        fireEvent.pointerMove(window, pointerInit(1, 80, 1))
-        expect(onScroll).toHaveBeenCalledWith(20, 0)
-    })
-
-    it("discards stale drag state when a pointermove arrives with no buttons pressed (lost pointerup)", () => {
-        const { content, onScroll } = setupDragPane()
-        // pointerdown 後に pointerup が失われたと想定 (iframe 上での解放や Alt+Tab 等)
-        fireEvent.pointerDown(content, pointerInit(1, 100, 1))
-        // ボタン非押下の hover 移動はドラッグ化してはならない
-        fireEvent.pointerMove(window, pointerInit(1, 50, 0))
-        fireEvent.pointerMove(window, pointerInit(1, 20, 0))
-        expect(onScroll).not.toHaveBeenCalled()
-        // その後の click も握り潰されない
-        const click = new MouseEvent("click", { bubbles: true, cancelable: true })
-        content.dispatchEvent(click)
-        expect(click.defaultPrevented).toBe(false)
-    })
-
-    it("ends the drag when pointer capture is lost (lostpointercapture)", () => {
-        const { content, onScroll } = setupDragPane()
-        fireEvent.pointerDown(content, pointerInit(1, 100, 1))
-        fireEvent.pointerMove(window, pointerInit(1, 80, 1))
-        expect(onScroll).toHaveBeenCalledTimes(1)
-        // OS/ブラウザ都合の強制キャプチャ解放をシミュレート
-        fireEvent.lostPointerCapture(content, { pointerId: 1, bubbles: true })
-        fireEvent.pointerMove(window, pointerInit(1, 40, 1))
-        expect(onScroll).toHaveBeenCalledTimes(1)
-    })
-
-    it("keeps click suppression when releasePointerCapture fires lostpointercapture synchronously", () => {
-        const { content, onScroll } = setupDragPane()
-        // releasePointerCapture が lostpointercapture を同期発火するブラウザを模倣する
-        let captured = false
-        content.setPointerCapture = () => {
-            captured = true
-        }
-        content.hasPointerCapture = () => captured
-        content.releasePointerCapture = () => {
-            captured = false
-            content.dispatchEvent(new window.PointerEvent("lostpointercapture", { pointerId: 1, bubbles: true }))
-        }
-
-        fireEvent.pointerDown(content, pointerInit(1, 100, 1))
-        fireEvent.pointerMove(window, pointerInit(1, 80, 1))
-        expect(onScroll).toHaveBeenCalledWith(20, 0)
-        fireEvent.pointerUp(window, pointerInit(1, 80, 1))
-
-        // 同期 lostpointercapture (意図的解放) で abortDrag が click 抑止を消してはならない
-        const click = new MouseEvent("click", { bubbles: true, cancelable: true })
-        content.dispatchEvent(click)
-        expect(click.defaultPrevented).toBe(true)
-    })
-
-    it("ignores a second pointerdown while another pointer is actively dragging", () => {
-        const { content, onScroll } = setupDragPane()
-        fireEvent.pointerDown(content, pointerInit(1, 100, 1))
-        fireEvent.pointerMove(window, pointerInit(1, 80, 1))
-        expect(onScroll).toHaveBeenCalledWith(20, 0)
-
-        // 2 本目の pointerdown はドラッグを乗っ取らない (先勝ち)
-        fireEvent.pointerDown(content, pointerInit(2, 300, 1))
-        fireEvent.pointerMove(window, pointerInit(2, 200, 1))
-        expect(onScroll).toHaveBeenCalledTimes(1)
-
-        // 1 本目のドラッグは継続する
-        fireEvent.pointerMove(window, pointerInit(1, 60, 1))
-        expect(onScroll).toHaveBeenLastCalledWith(40, 20)
-
-        // 1 本目解放時の click 抑止も保持されている
-        fireEvent.pointerUp(window, pointerInit(1, 60, 1))
-        const click = new MouseEvent("click", { bubbles: true, cancelable: true })
-        content.dispatchEvent(click)
-        expect(click.defaultPrevented).toBe(true)
-    })
-
-    it("does not throw when setPointerCapture fails at drag activation", () => {
-        const { content, onScroll } = setupDragPane()
-        content.setPointerCapture = () => {
-            throw new DOMException("pointer not found", "NotFoundError")
-        }
-        fireEvent.pointerDown(content, pointerInit(1, 100, 1))
-        expect(() => {
-            fireEvent.pointerMove(window, pointerInit(1, 80, 1))
-        }).not.toThrow()
-        // キャプチャ失敗後もドラッグ (スクロール) は継続する
-        expect(onScroll).toHaveBeenCalledWith(20, 0)
-    })
-})
-
-describe("ScrollPane - horizontal wheel delegation vs ctrl+wheel zoom", () => {
-    const setupHorizontal = () => {
-        const onWheelHorizontal = vi.fn()
-        const onScroll = vi.fn()
-        const { container } = render(
-            <ScrollPane contentSize={1000} viewportSize={200} onScroll={onScroll} onWheelHorizontal={onWheelHorizontal}>
-                {() => <div>content</div>}
-            </ScrollPane>,
-        )
-        const pane = container.querySelector(".aqvs-scroll-pane")
-        if (!(pane instanceof HTMLElement)) {
-            throw new Error("scroll pane element not found")
-        }
-        return { pane, onScroll, onWheelHorizontal }
-    }
-
-    it("delegates shift+wheel to onWheelHorizontal (baseline)", () => {
-        const { pane, onScroll, onWheelHorizontal } = setupHorizontal()
-        const event = dispatchWheel(pane, { deltaY: 100, shiftKey: true })
-        expect(event.defaultPrevented).toBe(true)
-        expect(onWheelHorizontal).toHaveBeenCalledWith(100)
-        expect(onScroll).not.toHaveBeenCalled()
-    })
-
-    it("does not intercept ctrl+shift+wheel (browser zoom passes through)", () => {
-        const { pane, onScroll, onWheelHorizontal } = setupHorizontal()
-        // ctrl+shift+縦ホイールはブラウザズーム: 横委譲に横取りされてはならない
-        const event = dispatchWheel(pane, { deltaY: 100, shiftKey: true, ctrlKey: true })
-        expect(event.defaultPrevented).toBe(false)
-        expect(onWheelHorizontal).not.toHaveBeenCalled()
-        expect(onScroll).not.toHaveBeenCalled()
-    })
-
-    it("does not intercept ctrl + horizontal trackpad pan", () => {
-        const { pane, onScroll, onWheelHorizontal } = setupHorizontal()
-        // ctrl を押しながらの横パンもズーム系操作として素通しする
-        const event = dispatchWheel(pane, { deltaX: 100, deltaY: 0, ctrlKey: true })
-        expect(event.defaultPrevented).toBe(false)
-        expect(onWheelHorizontal).not.toHaveBeenCalled()
-        expect(onScroll).not.toHaveBeenCalled()
-    })
-})
-
-describe("ScrollPane - conditional touchAction", () => {
-    it("applies touchAction none while the pane is scrollable", () => {
-        const { content } = setupDragPane({ contentSize: 1000, viewportSize: 200 })
-        expect(content.style.touchAction).toBe("none")
-    })
-
-    it("keeps the default touchAction when the pane cannot scroll (contentSize <= viewportSize)", () => {
-        const { content } = setupDragPane({ contentSize: 100, viewportSize: 200 })
-        expect(content.style.touchAction).not.toBe("none")
-    })
-})
-
-describe("ScrollPane - inertia robustness", () => {
-    it("does not start inertia when the pointer was held still before release", () => {
-        // 速度サンプルの時刻を制御するため performance.now をモックする
-        let now = 0
-        vi.spyOn(performance, "now").mockImplementation(() => now)
-        const rafSpy = vi.spyOn(window, "requestAnimationFrame").mockImplementation(() => 1)
-        const { content } = setupDragPane()
-
-        fireEvent.pointerDown(content, pointerInit(1, 200, 1))
-        now = 16
-        fireEvent.pointerMove(window, pointerInit(1, 150, 1))
-        now = 32
-        fireEvent.pointerMove(window, pointerInit(1, 100, 1))
-        // 150ms 静止したまま離す: 古いサンプルによる慣性の誤発火があってはならない
-        now = 182
-        fireEvent.pointerUp(window, pointerInit(1, 100, 1))
-
-        expect(rafSpy).not.toHaveBeenCalled()
-    })
-
-    it("starts inertia when released immediately after a fast drag (baseline)", () => {
-        let now = 0
-        vi.spyOn(performance, "now").mockImplementation(() => now)
-        const rafSpy = vi.spyOn(window, "requestAnimationFrame").mockImplementation(() => 1)
-        const { content } = setupDragPane()
-
-        fireEvent.pointerDown(content, pointerInit(1, 200, 1))
-        now = 16
-        fireEvent.pointerMove(window, pointerInit(1, 150, 1))
-        now = 32
-        fireEvent.pointerMove(window, pointerInit(1, 100, 1))
-        // 素早いドラッグ直後の解放では慣性が発火する
-        now = 48
-        fireEvent.pointerUp(window, pointerInit(1, 100, 1))
-
-        expect(rafSpy).toHaveBeenCalled()
-    })
-
-    it("does not re-arm the inertia loop when stopInertia is called synchronously from onScroll", () => {
-        let now = 0
-        vi.spyOn(performance, "now").mockImplementation(() => now)
-        // rAF をキュー化して手動でフレームを進められるようにする
-        const rafCallbacks = new Map<number, FrameRequestCallback>()
-        let rafId = 0
-        vi.spyOn(window, "requestAnimationFrame").mockImplementation((callback) => {
-            rafId += 1
-            rafCallbacks.set(rafId, callback)
-            return rafId
-        })
-        vi.spyOn(window, "cancelAnimationFrame").mockImplementation((id) => {
-            rafCallbacks.delete(id)
-        })
-        const runFrame = (timestamp: number) => {
-            const entry = [...rafCallbacks.entries()][0]
-            if (!entry) {
-                throw new Error("no pending animation frame")
-            }
-            rafCallbacks.delete(entry[0])
-            entry[1](timestamp)
-        }
-
-        const ref = createRef<ScrollPaneHandle>()
-        let stopOnNextScroll = false
-        // 消費者が onScroll から同期的に handle.scrollTo (内部で stopInertia) を呼ぶケース (クランプ/スナップ実装等)
-        const onScroll = vi.fn((position: number) => {
-            if (stopOnNextScroll) {
-                stopOnNextScroll = false
-                ref.current?.scrollTo(position)
-            }
-        })
-        const { container } = render(
-            <ScrollPane ref={ref} contentSize={1000} viewportSize={200} onScroll={onScroll}>
-                {() => <div>content</div>}
-            </ScrollPane>,
-        )
-        const content = container.querySelector(".aqvs-scroll-pane-content")
-        if (!(content instanceof HTMLElement)) {
-            throw new Error("scroll pane content element not found")
-        }
-
-        fireEvent.pointerDown(content, pointerInit(1, 200, 1))
-        now = 16
-        fireEvent.pointerMove(window, pointerInit(1, 150, 1))
-        now = 32
-        fireEvent.pointerMove(window, pointerInit(1, 100, 1))
-        now = 48
-        fireEvent.pointerUp(window, pointerInit(1, 100, 1))
-        // 慣性ループがアームされている
-        expect(rafCallbacks.size).toBe(1)
-
-        // 初回フレームは lastTimestamp の初期化のみで再アームされる
-        runFrame(100)
-        expect(rafCallbacks.size).toBe(1)
-
-        // このフレームの scrollTo → onScroll → handle.scrollTo → stopInertia (同期再入)
-        stopOnNextScroll = true
-        runFrame(116)
-
-        // 停止指示が尊重され、frame は再アームされない (世代トークンによる自壊)
-        expect(rafCallbacks.size).toBe(0)
-    })
-})
-
-describe("ScrollPane - scrollTo non-finite guard", () => {
-    it("keeps the current position and skips onScroll when scrollTo receives NaN", () => {
-        const warnImpl = { debug: vi.fn(), info: vi.fn(), warn: vi.fn(), error: vi.fn() }
-        Logger.setImplementation(warnImpl)
-        try {
-            const ref = createRef<ScrollPaneHandle>()
-            const onScroll = vi.fn()
-            const { container } = render(
-                <ScrollPane ref={ref} contentSize={1000} viewportSize={200} onScroll={onScroll} initialScrollPosition={100}>
-                    {() => <div>content</div>}
-                </ScrollPane>,
-            )
-            // NaN は現位置維持 + 警告ログ。onScroll は発火しない
-            expect(ref.current?.scrollTo(Number.NaN)).toBe(100)
-            expect(onScroll).not.toHaveBeenCalled()
-            expect(warnImpl.warn).toHaveBeenCalled()
-
-            // 関数形式の更新でも同様にガードされる
-            expect(ref.current?.scrollTo(() => Number.NaN)).toBe(100)
-            expect(onScroll).not.toHaveBeenCalled()
-
-            // NaN 汚染が無いため、その後の相対スクロール (wheel の prev + delta) は正常に動く
-            const pane = container.querySelector(".aqvs-scroll-pane")
-            if (!(pane instanceof HTMLElement)) {
-                throw new Error("scroll pane element not found")
-            }
-            dispatchWheel(pane, { deltaY: 50 })
-            expect(onScroll).toHaveBeenCalledWith(150, 100)
-        } finally {
-            Logger.setImplementation(console)
-        }
-    })
-})
-
-describe("ScrollPane - lazy debug logging", () => {
-    it("does not read scrollTop in the wheel handler while debug logging is suppressed", () => {
-        const { container, content } = setupDragPane()
-        const pane = container.querySelector(".aqvs-scroll-pane")
-        if (!(pane instanceof HTMLElement)) {
-            throw new Error("scroll pane element not found")
-        }
-        // 抑制時 (既定 WARN) はログ引数のサンクが評価されず、DOM 読み取りも発生しないことを検証する
-        let scrollTopReads = 0
-        Object.defineProperty(content, "scrollTop", {
-            configurable: true,
-            get() {
-                scrollTopReads++
-                return 0
-            },
-            set() {},
-        })
-        dispatchWheel(pane, { deltaY: 100 })
-        expect(scrollTopReads).toBe(0)
-    })
-
-    it("resolves thunk arguments into plain objects when debug logging is enabled", () => {
-        const impl = { debug: vi.fn(), info: vi.fn(), warn: vi.fn(), error: vi.fn() }
-        Logger.setImplementation(impl)
-        Logger.setLevel(LogLevel.DEBUG)
-        try {
-            const { container } = setupDragPane()
-            const pane = container.querySelector(".aqvs-scroll-pane")
-            if (!(pane instanceof HTMLElement)) {
-                throw new Error("scroll pane element not found")
-            }
-            impl.debug.mockClear()
-            dispatchWheel(pane, { deltaY: 100 })
-            const wheelCall = impl.debug.mock.calls.find((call) => typeof call[0] === "string" && call[0].includes("wheel event"))
-            expect(wheelCall).toBeDefined()
-            // サンクは Logger 内で解決され、実装には生のオブジェクトが渡る
-            expect(typeof wheelCall?.[1]).toBe("object")
-            expect((wheelCall?.[1] as { deltaY: number }).deltaY).toBe(100)
-        } finally {
-            Logger.setLevel(LogLevel.WARN)
-            Logger.setImplementation(console)
-        }
-    })
-})