@lovett/ui 0.0.10 → 0.1.0

package/src/__tests__/layer-stack.test.tsx

@@ -0,0 +1,228 @@
+/**
+ * lib/layer-stack — the topmost-wins dismiss order shared by Modal,
+ * DropdownMenu and Popover.
+ *
+ * The load-bearing test is the Modal one: a layer registered AFTER a Modal
+ * opens takes Escape away from it. Revert Modal to a private `openPanels`
+ * array and both fire — that test goes red.
+ */
+import { useEffect } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import { render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Modal from '../modal'
+import { useEscapeKey, useLayer, type LayerHandle, type LayerKind } from '../lib/layer-stack'
+
+function EscapeListener({
+  onEscape,
+  enabled = true,
+}: {
+  onEscape: () => void
+  enabled?: boolean
+}) {
+  useEscapeKey(onEscape, { enabled })
+  return null
+}
+
+function LayerProbe({
+  kind,
+  onHandle,
+}: {
+  kind: LayerKind
+  onHandle: (handle: LayerHandle) => void
+}) {
+  const handle = useLayer({ enabled: true, kind, onEscape: () => {} })
+  useEffect(() => {
+    onHandle(handle)
+  }, [handle, onHandle])
+  return null
+}
+
+describe('useEscapeKey / useLayer', () => {
+  it('dispatches Escape to the most recently registered layer only', async () => {
+    const first = vi.fn()
+    const second = vi.fn()
+    render(
+      <>
+        <EscapeListener onEscape={first} />
+        <EscapeListener onEscape={second} />
+      </>,
+    )
+    await userEvent.keyboard('{Escape}')
+    expect(second).toHaveBeenCalledTimes(1)
+    expect(first).not.toHaveBeenCalled()
+  })
+
+  it('falls back to the layer below when the top one unregisters', async () => {
+    const first = vi.fn()
+    const second = vi.fn()
+    const { rerender } = render(
+      <>
+        <EscapeListener onEscape={first} />
+        <EscapeListener onEscape={second} />
+      </>,
+    )
+    rerender(
+      <>
+        <EscapeListener onEscape={first} />
+        <EscapeListener onEscape={second} enabled={false} />
+      </>,
+    )
+    await userEvent.keyboard('{Escape}')
+    expect(first).toHaveBeenCalledTimes(1)
+    expect(second).not.toHaveBeenCalled()
+  })
+
+  it('does nothing once every layer has unregistered', async () => {
+    const handler = vi.fn()
+    const { unmount } = render(<EscapeListener onEscape={handler} />)
+    unmount()
+    await userEvent.keyboard('{Escape}')
+    expect(handler).not.toHaveBeenCalled()
+  })
+
+  it('ignores keys other than Escape', async () => {
+    const handler = vi.fn()
+    render(<EscapeListener onEscape={handler} />)
+    await userEvent.keyboard('{Enter}a{Tab}')
+    expect(handler).not.toHaveBeenCalled()
+  })
+
+  it('stops propagation so window-level listeners do not see a consumed Escape', async () => {
+    const windowSpy = vi.fn()
+    window.addEventListener('keydown', windowSpy)
+    try {
+      const handler = vi.fn()
+      const { unmount } = render(<EscapeListener onEscape={handler} />)
+      await userEvent.keyboard('{Escape}')
+      expect(handler).toHaveBeenCalledTimes(1)
+      expect(windowSpy).not.toHaveBeenCalled()
+
+      // With no layer open the key reaches window as before.
+      unmount()
+      await userEvent.keyboard('{Escape}')
+      expect(windowSpy).toHaveBeenCalledTimes(1)
+    } finally {
+      window.removeEventListener('keydown', windowSpy)
+    }
+  })
+
+  it('reads the latest handler without re-registering (order is preserved)', async () => {
+    const stale = vi.fn()
+    const fresh = vi.fn()
+    const above = vi.fn()
+    const { rerender } = render(
+      <>
+        <EscapeListener onEscape={stale} />
+        <EscapeListener onEscape={above} />
+      </>,
+    )
+    // Swapping the LOWER layer's handler must not move it to the top.
+    rerender(
+      <>
+        <EscapeListener onEscape={fresh} />
+        <EscapeListener onEscape={above} />
+      </>,
+    )
+    await userEvent.keyboard('{Escape}')
+    expect(above).toHaveBeenCalledTimes(1)
+    expect(stale).not.toHaveBeenCalled()
+    expect(fresh).not.toHaveBeenCalled()
+
+    rerender(
+      <>
+        <EscapeListener onEscape={fresh} />
+        <EscapeListener onEscape={above} enabled={false} />
+      </>,
+    )
+    await userEvent.keyboard('{Escape}')
+    expect(fresh).toHaveBeenCalledTimes(1)
+    expect(stale).not.toHaveBeenCalled()
+  })
+
+  it('isTop / isTopOfKind: a popover above a modal is top, but not top-of-kind for the modal', () => {
+    let modal: LayerHandle | undefined
+    let popover: LayerHandle | undefined
+    render(
+      <>
+        <LayerProbe kind="modal" onHandle={(h) => (modal = h)} />
+        <LayerProbe kind="popover" onHandle={(h) => (popover = h)} />
+      </>,
+    )
+    expect(popover?.isTop()).toBe(true)
+    expect(popover?.isTopOfKind()).toBe(true)
+    expect(modal?.isTop()).toBe(false)
+    expect(modal?.isTopOfKind()).toBe(true)
+  })
+
+  it('a second modal above the first takes both isTop and isTopOfKind', () => {
+    let lower: LayerHandle | undefined
+    let upper: LayerHandle | undefined
+    render(
+      <>
+        <LayerProbe kind="modal" onHandle={(h) => (lower = h)} />
+        <LayerProbe kind="modal" onHandle={(h) => (upper = h)} />
+      </>,
+    )
+    expect(upper?.isTop()).toBe(true)
+    expect(lower?.isTopOfKind()).toBe(false)
+  })
+
+  it('an unregistered handle answers false everywhere', () => {
+    let handle: LayerHandle | undefined
+    function Disabled() {
+      handle = useLayer({ enabled: false, kind: 'popover', onEscape: () => {} })
+      return null
+    }
+    render(<Disabled />)
+    expect(handle?.isTop()).toBe(false)
+    expect(handle?.isTopOfKind()).toBe(false)
+    expect(handle?.containsInLayerAbove(document.body)).toBe(false)
+  })
+})
+
+describe('shared with Modal', () => {
+  it('a layer opened above a Modal takes Escape; the Modal gets the next one', async () => {
+    const onClose = vi.fn()
+    const onEscape = vi.fn()
+    const { rerender } = render(
+      <>
+        <Modal isOpen onClose={onClose} title="Confirm">
+          body
+        </Modal>
+        <EscapeListener onEscape={onEscape} />
+      </>,
+    )
+    await userEvent.keyboard('{Escape}')
+    expect(onEscape).toHaveBeenCalledTimes(1)
+    expect(onClose).not.toHaveBeenCalled()
+
+    rerender(
+      <>
+        <Modal isOpen onClose={onClose} title="Confirm">
+          body
+        </Modal>
+        <EscapeListener onEscape={onEscape} enabled={false} />
+      </>,
+    )
+    await userEvent.keyboard('{Escape}')
+    expect(onClose).toHaveBeenCalledTimes(1)
+    expect(onEscape).toHaveBeenCalledTimes(1)
+  })
+
+  it('a Modal opened above an existing layer takes Escape from it', async () => {
+    const onClose = vi.fn()
+    const onEscape = vi.fn()
+    render(
+      <>
+        <EscapeListener onEscape={onEscape} />
+        <Modal isOpen onClose={onClose} title="Confirm">
+          body
+        </Modal>
+      </>,
+    )
+    await userEvent.keyboard('{Escape}')
+    expect(onClose).toHaveBeenCalledTimes(1)
+    expect(onEscape).not.toHaveBeenCalled()
+  })
+})