@lazlon-platform/html-editor 0.1.0

package/tests/hooks/pointer/pointer.test.tsx

@@ -0,0 +1,244 @@
+import { act, renderHook } from "@testing-library/react"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+import { usePointer } from "../../../lib/hooks/pointer/pointer"
+
+describe("usePointer", () => {
+  function createPointerEvent(
+    type: "pointerdown" | "pointermove" | "pointerup",
+    props: Partial<React.PointerEvent> = {},
+  ): React.PointerEvent {
+    return {
+      type,
+      button: 0,
+      clientX: 0,
+      clientY: 0,
+      ...props,
+    } as unknown as React.PointerEvent
+  }
+
+  function createGlobalPointerEvent(
+    type: "pointermove" | "pointerup" | "pointercancel",
+    props: Partial<PointerEvent> = {},
+  ): PointerEvent {
+    return new PointerEvent(type, {
+      clientX: props.clientX ?? 0,
+      clientY: props.clientY ?? 0,
+      ...props,
+    })
+  }
+
+  beforeEach(() => {
+    // Clear any existing listeners
+    vi.clearAllMocks()
+  })
+
+  it("calls onDown handler on pointer down", () => {
+    const onDown = vi.fn()
+    const { result } = renderHook(() => usePointer({ onDown }))
+
+    act(() => {
+      result.current.onPointerDown(
+        createPointerEvent("pointerdown", { clientX: 100, clientY: 100 }),
+      )
+    })
+
+    expect(onDown).toHaveBeenCalledTimes(1)
+  })
+
+  it("does not proceed if onDown returns false", () => {
+    const onDown = vi.fn(() => false)
+    const onMove = vi.fn()
+    const { result } = renderHook(() => usePointer({ onDown, onMove }))
+
+    act(() => {
+      result.current.onPointerDown(createPointerEvent("pointerdown"))
+    })
+
+    // Simulate global pointermove - should not trigger onMove
+    act(() => {
+      window.dispatchEvent(
+        createGlobalPointerEvent("pointermove", { clientX: 50, clientY: 50 }),
+      )
+    })
+
+    expect(onMove).not.toHaveBeenCalled()
+  })
+
+  it("ignores non-left-button clicks", () => {
+    const onDown = vi.fn()
+    const { result } = renderHook(() => usePointer({ onDown }))
+
+    act(() => {
+      result.current.onPointerDown(createPointerEvent("pointerdown", { button: 2 }))
+    })
+
+    expect(onDown).not.toHaveBeenCalled()
+  })
+
+  it("tracks moving state", () => {
+    const { result } = renderHook(() => usePointer({}))
+
+    expect(result.current.isMoving()).toBe(false)
+
+    act(() => {
+      result.current.onPointerDown(createPointerEvent("pointerdown"))
+    })
+
+    // Initially not moving
+    expect(result.current.isMoving()).toBe(false)
+
+    // After move, should be moving
+    act(() => {
+      window.dispatchEvent(
+        createGlobalPointerEvent("pointermove", { clientX: 50, clientY: 50 }),
+      )
+    })
+
+    expect(result.current.isMoving()).toBe(true)
+
+    // After up, should not be moving
+    act(() => {
+      window.dispatchEvent(createGlobalPointerEvent("pointerup"))
+    })
+
+    expect(result.current.isMoving()).toBe(false)
+  })
+
+  it("calls onCancel when pointer up without move", () => {
+    const onCancel = vi.fn()
+    const onEnd = vi.fn()
+    const { result } = renderHook(() => usePointer({ onCancel, onEnd }))
+
+    act(() => {
+      result.current.onPointerDown(createPointerEvent("pointerdown"))
+    })
+
+    // Simulate pointerup without pointermove
+    act(() => {
+      window.dispatchEvent(createGlobalPointerEvent("pointerup"))
+    })
+
+    expect(onCancel).toHaveBeenCalledTimes(1)
+    expect(onEnd).not.toHaveBeenCalled()
+  })
+
+  it("calls onEnd when pointer up after move", () => {
+    const onEnd = vi.fn()
+    const onCancel = vi.fn()
+    const { result } = renderHook(() => usePointer({ onEnd, onCancel }))
+
+    act(() => {
+      result.current.onPointerDown(createPointerEvent("pointerdown"))
+    })
+
+    // Simulate pointermove
+    act(() => {
+      window.dispatchEvent(
+        createGlobalPointerEvent("pointermove", { clientX: 50, clientY: 50 }),
+      )
+    })
+
+    // Simulate pointerup
+    act(() => {
+      window.dispatchEvent(
+        createGlobalPointerEvent("pointerup", { clientX: 50, clientY: 50 }),
+      )
+    })
+
+    expect(onEnd).toHaveBeenCalledTimes(1)
+    expect(onCancel).not.toHaveBeenCalled()
+  })
+
+  it("provides start and current event to onMove", () => {
+    const onMove = vi.fn()
+    const { result } = renderHook(() => usePointer({ onMove }))
+
+    act(() => {
+      result.current.onPointerDown(
+        createPointerEvent("pointerdown", { clientX: 10, clientY: 20 }),
+      )
+    })
+
+    act(() => {
+      window.dispatchEvent(
+        createGlobalPointerEvent("pointermove", { clientX: 30, clientY: 40 }),
+      )
+    })
+
+    expect(onMove).toHaveBeenCalledWith(
+      expect.objectContaining({
+        start: expect.objectContaining({ clientX: 10, clientY: 20 }),
+        event: expect.objectContaining({ clientX: 30, clientY: 40 }),
+      }),
+    )
+  })
+
+  it("provides start and current event to onEnd", () => {
+    const onEnd = vi.fn()
+    const { result } = renderHook(() => usePointer({ onEnd }))
+
+    act(() => {
+      result.current.onPointerDown(
+        createPointerEvent("pointerdown", { clientX: 10, clientY: 20 }),
+      )
+    })
+
+    // Move first to trigger end instead of cancel
+    act(() => {
+      window.dispatchEvent(
+        createGlobalPointerEvent("pointermove", { clientX: 50, clientY: 60 }),
+      )
+    })
+
+    act(() => {
+      window.dispatchEvent(
+        createGlobalPointerEvent("pointerup", { clientX: 100, clientY: 120 }),
+      )
+    })
+
+    expect(onEnd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        start: expect.objectContaining({ clientX: 10, clientY: 20 }),
+        event: expect.objectContaining({ clientX: 100, clientY: 120 }),
+      }),
+    )
+  })
+
+  it("calls onMove multiple times during drag", () => {
+    const onMove = vi.fn()
+    const { result } = renderHook(() => usePointer({ onMove }))
+
+    act(() => {
+      result.current.onPointerDown(createPointerEvent("pointerdown"))
+    })
+
+    act(() => {
+      window.dispatchEvent(
+        createGlobalPointerEvent("pointermove", { clientX: 10, clientY: 10 }),
+      )
+      window.dispatchEvent(
+        createGlobalPointerEvent("pointermove", { clientX: 20, clientY: 20 }),
+      )
+      window.dispatchEvent(
+        createGlobalPointerEvent("pointermove", { clientX: 30, clientY: 30 }),
+      )
+    })
+
+    expect(onMove).toHaveBeenCalledTimes(3)
+  })
+
+  it("handles pointercancel like pointerup", () => {
+    const onCancel = vi.fn()
+    const { result } = renderHook(() => usePointer({ onCancel }))
+
+    act(() => {
+      result.current.onPointerDown(createPointerEvent("pointerdown"))
+    })
+
+    act(() => {
+      window.dispatchEvent(createGlobalPointerEvent("pointercancel"))
+    })
+
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+})