@lovett/ui 0.0.9 → 0.0.11

package/src/__tests__/anchor.test.tsx

@@ -0,0 +1,422 @@
+/**
+ * lib/anchor — the one positioning routine every floating surface uses.
+ *
+ * `computeAnchoredPosition` is pinned as pure math (no DOM), then the hook
+ * is exercised through a harness with mocked geometry: an element ref, a
+ * virtual rect, a flip at the viewport edge, and re-measure on resize.
+ * `useOutsideClick` closes the file.
+ */
+import { useRef, useState } from 'react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { act, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {
+  computeAnchoredPosition,
+  useAnchoredPosition,
+  useOutsideClick,
+  type AnchorAlign,
+  type AnchorRect,
+  type AnchorSide,
+} from '../lib/anchor'
+import { mockGeometry, setViewport } from './helpers/geometry'
+
+const VIEWPORT = { width: 1000, height: 800 }
+// right 480, bottom 332 — room on every side.
+const ANCHOR = { left: 400, top: 300, width: 80, height: 32 }
+const FLOATING = { width: 200, height: 120 }
+
+describe('computeAnchoredPosition', () => {
+  it('bottom-start: below the anchor, left edges aligned, offset applied', () => {
+    expect(
+      computeAnchoredPosition(ANCHOR, FLOATING, VIEWPORT, { side: 'bottom', align: 'start' }),
+    ).toEqual({ left: 400, top: 338, placement: { side: 'bottom', align: 'start' } })
+  })
+
+  it.each<[AnchorAlign, number]>([
+    ['start', 400],
+    ['center', 340],
+    ['end', 280],
+  ])('aligns %s along the cross axis for a vertical side', (align, left) => {
+    const r = computeAnchoredPosition(ANCHOR, FLOATING, VIEWPORT, { side: 'bottom', align })
+    expect(r.left).toBe(left)
+    expect(r.top).toBe(338)
+  })
+
+  it('side top places the element above the anchor', () => {
+    const r = computeAnchoredPosition(ANCHOR, FLOATING, VIEWPORT, { side: 'top' })
+    expect(r.top).toBe(300 - 120 - 6)
+    expect(r.placement.side).toBe('top')
+  })
+
+  it.each<[AnchorAlign, number]>([
+    ['start', 300],
+    ['center', 256],
+    ['end', 212],
+  ])('side right: to the right of the anchor, %s-aligned vertically', (align, top) => {
+    const r = computeAnchoredPosition(ANCHOR, FLOATING, VIEWPORT, { side: 'right', align })
+    expect(r.left).toBe(480 + 6)
+    expect(r.top).toBe(top)
+  })
+
+  it('side left places the element to the left of the anchor', () => {
+    const r = computeAnchoredPosition(ANCHOR, FLOATING, VIEWPORT, { side: 'left' })
+    expect(r.left).toBe(400 - 200 - 6)
+    expect(r.placement.side).toBe('left')
+  })
+
+  it('alignOffset shifts along the cross axis and is mirrored for end', () => {
+    expect(
+      computeAnchoredPosition(ANCHOR, FLOATING, VIEWPORT, { align: 'start', alignOffset: 10 }).left,
+    ).toBe(410)
+    expect(
+      computeAnchoredPosition(ANCHOR, FLOATING, VIEWPORT, { align: 'end', alignOffset: 10 }).left,
+    ).toBe(270)
+  })
+
+  it('honours a custom offset', () => {
+    expect(computeAnchoredPosition(ANCHOR, FLOATING, VIEWPORT, { offset: 0 }).top).toBe(332)
+  })
+
+  describe('flip', () => {
+    // bottom 732 → 60px of room below, 692 above.
+    const nearBottom = { left: 400, top: 700, width: 80, height: 32 }
+
+    it('flips to top when bottom cannot fit', () => {
+      const r = computeAnchoredPosition(nearBottom, FLOATING, VIEWPORT, { side: 'bottom' })
+      expect(r.placement.side).toBe('top')
+      expect(r.top).toBe(700 - 120 - 6)
+    })
+
+    it('does not flip when flip is false — clamps instead', () => {
+      const r = computeAnchoredPosition(nearBottom, FLOATING, VIEWPORT, {
+        side: 'bottom',
+        flip: false,
+      })
+      expect(r.placement.side).toBe('bottom')
+      expect(r.top).toBe(800 - 120 - 8)
+    })
+
+    it('flips to whichever side has more room when neither fits', () => {
+      const short = { width: 1000, height: 200 }
+      // top 90 / bottom 122: 82px above, 70px below; needs 126.
+      const r = computeAnchoredPosition(
+        { left: 400, top: 90, width: 80, height: 32 },
+        FLOATING,
+        short,
+        { side: 'bottom' },
+      )
+      expect(r.placement.side).toBe('top')
+      expect(r.top).toBe(8)
+    })
+
+    it('stays on the preferred side when the opposite has even less room', () => {
+      const short = { width: 1000, height: 200 }
+      // top 60 / bottom 92: 52px above, 100px below.
+      const r = computeAnchoredPosition(
+        { left: 400, top: 60, width: 80, height: 32 },
+        FLOATING,
+        short,
+        { side: 'bottom' },
+      )
+      expect(r.placement.side).toBe('bottom')
+      expect(r.top).toBe(200 - 120 - 8)
+    })
+
+    it('flips horizontally for side right at the right viewport edge', () => {
+      const r = computeAnchoredPosition(
+        { left: 900, top: 300, width: 80, height: 32 },
+        FLOATING,
+        VIEWPORT,
+        { side: 'right' },
+      )
+      expect(r.placement.side).toBe('left')
+      expect(r.left).toBe(900 - 200 - 6)
+    })
+
+    it('keeps the requested align in the placement it reports', () => {
+      const r = computeAnchoredPosition(nearBottom, FLOATING, VIEWPORT, { align: 'end' })
+      expect(r.placement).toEqual({ side: 'top', align: 'end' })
+    })
+  })
+
+  describe('clamp', () => {
+    const nearRight = { left: 950, top: 300, width: 40, height: 32 }
+
+    it('clamps into the viewport, gutter in from the edge', () => {
+      const r = computeAnchoredPosition(nearRight, FLOATING, VIEWPORT)
+      expect(r.left).toBe(1000 - 200 - 8)
+    })
+
+    it('leaves the overflow alone when clampToViewport is false', () => {
+      const r = computeAnchoredPosition(nearRight, FLOATING, VIEWPORT, { clampToViewport: false })
+      expect(r.left).toBe(950)
+    })
+
+    it('uses a custom gutter', () => {
+      const r = computeAnchoredPosition(nearRight, FLOATING, VIEWPORT, { gutter: 20 })
+      expect(r.left).toBe(1000 - 200 - 20)
+    })
+
+    it('pins to the gutter when the element is wider than the viewport', () => {
+      const r = computeAnchoredPosition(ANCHOR, { width: 1200, height: 40 }, VIEWPORT)
+      expect(r.left).toBe(8)
+    })
+  })
+
+  it('positions against a virtual point (zero-size rect)', () => {
+    const point: AnchorRect = { left: 300, top: 200, width: 0, height: 0 }
+    expect(computeAnchoredPosition(point, FLOATING, VIEWPORT, { offset: 0 })).toEqual({
+      left: 300,
+      top: 200,
+      placement: { side: 'bottom', align: 'start' },
+    })
+    expect(computeAnchoredPosition(point, FLOATING, VIEWPORT, { offset: 0, align: 'end' }).left).toBe(
+      100,
+    )
+  })
+
+  it('rounds to whole pixels', () => {
+    const r = computeAnchoredPosition(
+      { left: 100.4, top: 100.6, width: 80, height: 32 },
+      FLOATING,
+      VIEWPORT,
+      { align: 'center' },
+    )
+    expect(r.left).toBe(40)
+    expect(Number.isInteger(r.top)).toBe(true)
+  })
+})
+
+interface HarnessProps {
+  anchorRect?: AnchorRect | null
+  side?: AnchorSide
+  align?: AnchorAlign
+  flip?: boolean
+  rect?: string
+  size?: string
+}
+
+function Harness({
+  anchorRect = null,
+  side = 'bottom',
+  align = 'start',
+  flip = true,
+  rect = '400,300,80,32',
+  size = '200,120',
+}: HarnessProps) {
+  const anchorRef = useRef<HTMLButtonElement>(null)
+  const { ref, style, placement, positioned } = useAnchoredPosition<HTMLDivElement>({
+    anchorRef,
+    anchorRect,
+    side,
+    align,
+    flip,
+  })
+  return (
+    <>
+      <button type="button" ref={anchorRef} data-rect={rect}>
+        anchor
+      </button>
+      <div
+        ref={ref}
+        data-testid="floating"
+        data-size={size}
+        data-side={placement?.side}
+        data-align={placement?.align}
+        data-positioned={String(positioned)}
+        style={style}
+      >
+        floating
+      </div>
+    </>
+  )
+}
+
+describe('useAnchoredPosition', () => {
+  let restore: () => void
+  beforeEach(() => {
+    restore = mockGeometry()
+    setViewport(1000, 800)
+  })
+  afterEach(() => restore())
+
+  it('positions the floating element under the anchor ref with position: fixed', () => {
+    render(<Harness />)
+    const floating = screen.getByTestId('floating')
+    expect(floating.style.position).toBe('fixed')
+    expect(floating.style.left).toBe('400px')
+    expect(floating.style.top).toBe('338px')
+    expect(floating.dataset.positioned).toBe('true')
+    expect(floating.dataset.side).toBe('bottom')
+    expect(floating.dataset.align).toBe('start')
+    expect(floating.style.visibility).toBe('')
+  })
+
+  it('reports the flipped placement at a viewport edge', () => {
+    render(<Harness rect="400,700,80,32" />)
+    const floating = screen.getByTestId('floating')
+    expect(floating.dataset.side).toBe('top')
+    expect(floating.style.top).toBe(`${700 - 120 - 6}px`)
+  })
+
+  it('positions against a virtual rect, ignoring the anchor ref', () => {
+    render(<Harness anchorRect={{ left: 300, top: 200, width: 0, height: 0 }} />)
+    const floating = screen.getByTestId('floating')
+    expect(floating.style.left).toBe('300px')
+    expect(floating.style.top).toBe('206px')
+  })
+
+  it('re-measures when the virtual rect changes', () => {
+    const { rerender } = render(
+      <Harness anchorRect={{ left: 300, top: 200, width: 0, height: 0 }} />,
+    )
+    rerender(<Harness anchorRect={{ left: 500, top: 100, width: 0, height: 0 }} />)
+    const floating = screen.getByTestId('floating')
+    expect(floating.style.left).toBe('500px')
+    expect(floating.style.top).toBe('106px')
+  })
+
+  it('re-measures on window resize and scroll', () => {
+    const { rerender } = render(<Harness />)
+    // The anchor moved (re-declared rect) but nothing told React — a
+    // scroll or resize is what should re-read it.
+    rerender(<Harness rect="120,50,80,32" />)
+    act(() => {
+      window.dispatchEvent(new Event('resize'))
+    })
+    expect(screen.getByTestId('floating').style.left).toBe('120px')
+
+    rerender(<Harness rect="220,50,80,32" />)
+    act(() => {
+      window.dispatchEvent(new Event('scroll'))
+    })
+    expect(screen.getByTestId('floating').style.left).toBe('220px')
+  })
+
+  it('honours side and align props', () => {
+    render(<Harness side="right" align="end" />)
+    const floating = screen.getByTestId('floating')
+    expect(floating.dataset.side).toBe('right')
+    expect(floating.style.left).toBe('486px')
+    expect(floating.style.top).toBe('212px')
+  })
+
+  it('parks the element off-screen and hidden while it is not measured', () => {
+    // No geometry at all: the anchor rect is 0×0 at (0, 0) — that still
+    // measures. To see the parked frame, disable measuring.
+    function Disabled() {
+      const anchorRef = useRef<HTMLButtonElement>(null)
+      const { ref, style, positioned } = useAnchoredPosition<HTMLDivElement>({
+        anchorRef,
+        enabled: false,
+      })
+      return (
+        <>
+          <button type="button" ref={anchorRef} />
+          <div ref={ref} data-testid="floating" data-positioned={String(positioned)} style={style} />
+        </>
+      )
+    }
+    render(<Disabled />)
+    const floating = screen.getByTestId('floating')
+    expect(floating.dataset.positioned).toBe('false')
+    expect(floating.style.visibility).toBe('hidden')
+    expect(floating.style.pointerEvents).toBe('none')
+    expect(Number.parseInt(floating.style.left, 10)).toBeLessThan(-1000)
+  })
+
+  it('detaches its listeners on unmount', () => {
+    const add = vi.spyOn(window, 'addEventListener')
+    const remove = vi.spyOn(window, 'removeEventListener')
+    const { unmount } = render(<Harness />)
+    const added = add.mock.calls.filter(([type]) => type === 'resize' || type === 'scroll').length
+    unmount()
+    const removed = remove.mock.calls.filter(
+      ([type]) => type === 'resize' || type === 'scroll',
+    ).length
+    expect(added).toBeGreaterThan(0)
+    expect(removed).toBe(added)
+    add.mockRestore()
+    remove.mockRestore()
+  })
+})
+
+describe('useOutsideClick', () => {
+  function OutsideHarness({
+    onOutside,
+    enabled = true,
+  }: {
+    onOutside: () => void
+    enabled?: boolean
+  }) {
+    const a = useRef<HTMLDivElement>(null)
+    const b = useRef<HTMLDivElement>(null)
+    useOutsideClick([a, b], onOutside, { enabled })
+    return (
+      <>
+        <div ref={a}>
+          <button type="button">inside a</button>
+        </div>
+        <div ref={b}>
+          <button type="button">inside b</button>
+        </div>
+        <button type="button">outside</button>
+      </>
+    )
+  }
+
+  it('fires for a pointerdown outside every target', async () => {
+    const onOutside = vi.fn()
+    render(<OutsideHarness onOutside={onOutside} />)
+    await userEvent.click(screen.getByRole('button', { name: 'outside' }))
+    expect(onOutside).toHaveBeenCalledTimes(1)
+  })
+
+  it('ignores pointerdowns inside any target', async () => {
+    const onOutside = vi.fn()
+    render(<OutsideHarness onOutside={onOutside} />)
+    await userEvent.click(screen.getByRole('button', { name: 'inside a' }))
+    await userEvent.click(screen.getByRole('button', { name: 'inside b' }))
+    expect(onOutside).not.toHaveBeenCalled()
+  })
+
+  it('does nothing while disabled', async () => {
+    const onOutside = vi.fn()
+    render(<OutsideHarness onOutside={onOutside} enabled={false} />)
+    await userEvent.click(screen.getByRole('button', { name: 'outside' }))
+    expect(onOutside).not.toHaveBeenCalled()
+  })
+
+  it('detaches on unmount', async () => {
+    const onOutside = vi.fn()
+    const { unmount } = render(<OutsideHarness onOutside={onOutside} />)
+    unmount()
+    await userEvent.click(document.body)
+    expect(onOutside).not.toHaveBeenCalled()
+  })
+
+  it('reads the latest handler without re-subscribing', async () => {
+    const first = vi.fn()
+    const second = vi.fn()
+    function Latest() {
+      const [swap, setSwap] = useState(false)
+      const a = useRef<HTMLDivElement>(null)
+      useOutsideClick([a], swap ? second : first)
+      return (
+        <>
+          <div ref={a}>
+            <button type="button" onClick={() => setSwap(true)}>
+              swap
+            </button>
+          </div>
+          <button type="button">outside</button>
+        </>
+      )
+    }
+    render(<Latest />)
+    await userEvent.click(screen.getByRole('button', { name: 'swap' }))
+    await userEvent.click(screen.getByRole('button', { name: 'outside' }))
+    expect(first).not.toHaveBeenCalled()
+    expect(second).toHaveBeenCalledTimes(1)
+  })
+})