@lovett/ui 0.0.9 → 0.0.11

package/src/__tests__/popover.test.tsx

@@ -0,0 +1,460 @@
+/**
+ * Popover — anchored non-modal surface.
+ *
+ * Contract under test: open / close (controlled and not), portal to body,
+ * dialog role (or none), focus into the content on open and back to the
+ * trigger on close — but NOT after an outside click — Escape closes the
+ * topmost layer only (a Popover inside a Modal), outside-click closes
+ * unless the click landed in a layer stacked above (a nested Popover), and
+ * `asChild` makes the child element the trigger.
+ */
+import { useState } from 'react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Modal from '../modal'
+import { Popover, type PopoverContentProps } from '../popover'
+import { mockGeometry, setViewport } from './helpers/geometry'
+
+function Basic({
+  content = <p>popover body</p>,
+  contentProps,
+  defaultOpen,
+}: {
+  content?: React.ReactNode
+  contentProps?: Partial<PopoverContentProps>
+  defaultOpen?: boolean
+}) {
+  return (
+    <Popover {...(defaultOpen ? { defaultOpen } : {})}>
+      <Popover.Trigger>Open</Popover.Trigger>
+      <Popover.Content aria-label="Details" {...contentProps}>
+        {content}
+      </Popover.Content>
+    </Popover>
+  )
+}
+
+const trigger = () => screen.getByRole('button', { name: 'Open' })
+
+describe('Popover', () => {
+  describe('open / close', () => {
+    it('renders the trigger closed with the dialog affordance', () => {
+      render(<Basic />)
+      const t = trigger()
+      expect(t).toHaveAttribute('aria-haspopup', 'dialog')
+      expect(t).toHaveAttribute('aria-expanded', 'false')
+      expect(t).not.toHaveAttribute('aria-controls')
+      expect(t).toHaveAttribute('data-state', 'closed')
+      expect(t).toHaveAttribute('type', 'button')
+      expect(screen.queryByRole('dialog')).toBeNull()
+    })
+
+    it('opens on click and wires aria-controls to the content id', async () => {
+      render(<Basic />)
+      await userEvent.click(trigger())
+      const dialog = screen.getByRole('dialog', { name: 'Details' })
+      expect(trigger()).toHaveAttribute('aria-expanded', 'true')
+      expect(trigger()).toHaveAttribute('aria-controls', dialog.id)
+      expect(trigger()).toHaveAttribute('data-state', 'open')
+      expect(dialog).toHaveAttribute('data-slot', 'popover-content')
+      expect(dialog).toHaveAttribute('data-state', 'open')
+      expect(dialog).not.toHaveAttribute('aria-modal')
+    })
+
+    it('toggles closed on a second trigger click', async () => {
+      render(<Basic />)
+      await userEvent.click(trigger())
+      await userEvent.click(trigger())
+      expect(screen.queryByRole('dialog')).toBeNull()
+    })
+
+    it('portals the content to document.body, outside the render container', async () => {
+      const { container } = render(<Basic />)
+      await userEvent.click(trigger())
+      const dialog = screen.getByRole('dialog')
+      expect(container.contains(dialog)).toBe(false)
+      expect(dialog.parentElement).toBe(document.body)
+    })
+
+    it('respects defaultOpen', () => {
+      render(<Basic defaultOpen />)
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+    })
+
+    it('works controlled: open + onOpenChange', async () => {
+      function Controlled() {
+        const [open, setOpen] = useState(false)
+        return (
+          <>
+            <span data-testid="state">{open ? 'open' : 'closed'}</span>
+            <Popover open={open} onOpenChange={setOpen}>
+              <Popover.Trigger>Open</Popover.Trigger>
+              <Popover.Content aria-label="Details">body</Popover.Content>
+            </Popover>
+          </>
+        )
+      }
+      render(<Controlled />)
+      await userEvent.click(trigger())
+      expect(screen.getByTestId('state')).toHaveTextContent('open')
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+      await userEvent.keyboard('{Escape}')
+      expect(screen.getByTestId('state')).toHaveTextContent('closed')
+      expect(screen.queryByRole('dialog')).toBeNull()
+    })
+
+    it('does not change internal state when controlled and the parent ignores onOpenChange', async () => {
+      const onOpenChange = vi.fn()
+      render(
+        <Popover open={false} onOpenChange={onOpenChange}>
+          <Popover.Trigger>Open</Popover.Trigger>
+          <Popover.Content aria-label="Details">body</Popover.Content>
+        </Popover>,
+      )
+      await userEvent.click(trigger())
+      expect(onOpenChange).toHaveBeenCalledWith(true)
+      expect(screen.queryByRole('dialog')).toBeNull()
+    })
+
+    it('throws when a part is rendered outside the root', () => {
+      const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
+      expect(() => render(<Popover.Trigger>Open</Popover.Trigger>)).toThrow(/inside <Popover>/)
+      spy.mockRestore()
+    })
+  })
+
+  describe('roles', () => {
+    it('is a dialog by default', async () => {
+      render(<Basic />)
+      await userEvent.click(trigger())
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+    })
+
+    it('renders no role attribute for role="none"', async () => {
+      render(<Basic contentProps={{ role: 'none' }} />)
+      await userEvent.click(trigger())
+      const content = document.querySelector('[data-slot="popover-content"]')
+      expect(content).not.toBeNull()
+      expect(content).not.toHaveAttribute('role')
+      expect(screen.queryByRole('dialog')).toBeNull()
+    })
+  })
+
+  describe('focus', () => {
+    it('moves focus to a [data-autofocus] control on open', async () => {
+      render(<Basic content={<input data-autofocus aria-label="Search" />} />)
+      await userEvent.click(trigger())
+      expect(document.activeElement).toBe(screen.getByRole('textbox', { name: 'Search' }))
+    })
+
+    it('falls back to the first tabbable control', async () => {
+      render(
+        <Basic
+          content={
+            <>
+              <button type="button">First</button>
+              <button type="button">Second</button>
+            </>
+          }
+        />,
+      )
+      await userEvent.click(trigger())
+      expect(document.activeElement).toBe(screen.getByRole('button', { name: 'First' }))
+    })
+
+    it('falls back to the content itself when nothing inside is tabbable', async () => {
+      render(<Basic />)
+      await userEvent.click(trigger())
+      const dialog = screen.getByRole('dialog')
+      expect(dialog).toHaveAttribute('tabindex', '-1')
+      expect(document.activeElement).toBe(dialog)
+    })
+
+    it('focuses only once the content is positioned - the parked, visibility:hidden frame cannot take focus in a browser', async () => {
+      // jsdom honours focus() on a hidden node, so the assertion is on the
+      // content's state AT the moment focus lands, not on where focus ended.
+      const atFocus: Array<{ positioned: string | null; visibility: string }> = []
+      render(
+        <Basic
+          content={
+            <input
+              data-autofocus
+              aria-label="Search"
+              onFocus={(event) => {
+                const content = event.currentTarget.closest<HTMLElement>(
+                  '[data-slot="popover-content"]',
+                )
+                atFocus.push({
+                  positioned: content?.getAttribute('data-positioned') ?? null,
+                  visibility: content?.style.visibility ?? '',
+                })
+              }}
+            />
+          }
+        />,
+      )
+      await userEvent.click(trigger())
+      expect(document.activeElement).toBe(screen.getByRole('textbox', { name: 'Search' }))
+      expect(atFocus).toEqual([{ positioned: 'true', visibility: '' }])
+    })
+
+    it('the content fallback is focused positioned too, and still returns focus to the trigger on Escape', async () => {
+      const atFocus: string[] = []
+      const onFocus = (event: FocusEvent) => {
+        const target = event.target
+        if (target instanceof HTMLElement && target.dataset.slot === 'popover-content') {
+          atFocus.push(target.getAttribute('data-positioned') ?? 'missing')
+        }
+      }
+      document.addEventListener('focus', onFocus, true)
+      try {
+        render(<Basic />)
+        await userEvent.click(trigger())
+        expect(document.activeElement).toBe(screen.getByRole('dialog'))
+        expect(atFocus).toEqual(['true'])
+        await userEvent.keyboard('{Escape}')
+        expect(document.activeElement).toBe(trigger())
+      } finally {
+        document.removeEventListener('focus', onFocus, true)
+      }
+    })
+
+    it('returns focus to the trigger on Escape', async () => {
+      render(<Basic content={<input data-autofocus aria-label="Search" />} />)
+      await userEvent.click(trigger())
+      expect(document.activeElement).not.toBe(trigger())
+      await userEvent.keyboard('{Escape}')
+      expect(screen.queryByRole('dialog')).toBeNull()
+      expect(document.activeElement).toBe(trigger())
+    })
+
+    it('returns focus to the trigger when closed programmatically', async () => {
+      function Programmatic() {
+        const [open, setOpen] = useState(false)
+        return (
+          <Popover open={open} onOpenChange={setOpen}>
+            <Popover.Trigger>Open</Popover.Trigger>
+            <Popover.Content aria-label="Details">
+              <button type="button" onClick={() => setOpen(false)}>
+                Done
+              </button>
+            </Popover.Content>
+          </Popover>
+        )
+      }
+      render(<Programmatic />)
+      await userEvent.click(trigger())
+      await userEvent.click(screen.getByRole('button', { name: 'Done' }))
+      expect(screen.queryByRole('dialog')).toBeNull()
+      expect(document.activeElement).toBe(trigger())
+    })
+
+    it('does NOT pull focus back to the trigger after an outside click', async () => {
+      render(
+        <>
+          <Basic />
+          <input aria-label="Elsewhere" />
+        </>,
+      )
+      await userEvent.click(trigger())
+      const elsewhere = screen.getByRole('textbox', { name: 'Elsewhere' })
+      await userEvent.click(elsewhere)
+      expect(screen.queryByRole('dialog')).toBeNull()
+      expect(document.activeElement).toBe(elsewhere)
+    })
+  })
+
+  describe('dismissal', () => {
+    it('closes on Escape', async () => {
+      render(<Basic />)
+      await userEvent.click(trigger())
+      await userEvent.keyboard('{Escape}')
+      expect(screen.queryByRole('dialog')).toBeNull()
+    })
+
+    it('closes on an outside click', async () => {
+      render(
+        <>
+          <Basic />
+          <button type="button">Elsewhere</button>
+        </>,
+      )
+      await userEvent.click(trigger())
+      await userEvent.click(screen.getByRole('button', { name: 'Elsewhere' }))
+      expect(screen.queryByRole('dialog')).toBeNull()
+    })
+
+    it('stays open on a click inside the content', async () => {
+      render(<Basic content={<button type="button">Inside</button>} />)
+      await userEvent.click(trigger())
+      await userEvent.click(screen.getByRole('button', { name: 'Inside' }))
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+    })
+
+    it('inside a Modal, Escape closes only the popover; the next Escape closes the modal', async () => {
+      const onClose = vi.fn()
+      render(
+        <Modal isOpen onClose={onClose} title="Settings">
+          <Basic />
+        </Modal>,
+      )
+      await userEvent.click(trigger())
+      expect(screen.getByRole('dialog', { name: 'Details' })).toBeInTheDocument()
+
+      await userEvent.keyboard('{Escape}')
+      expect(screen.queryByRole('dialog', { name: 'Details' })).toBeNull()
+      expect(onClose).not.toHaveBeenCalled()
+      expect(screen.getByRole('dialog', { name: 'Settings' })).toBeInTheDocument()
+
+      await userEvent.keyboard('{Escape}')
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('a click inside a nested popover does not close the outer one', async () => {
+      render(
+        <Popover>
+          <Popover.Trigger>Open</Popover.Trigger>
+          <Popover.Content aria-label="Outer">
+            <Popover>
+              <Popover.Trigger>Inner trigger</Popover.Trigger>
+              <Popover.Content aria-label="Inner">
+                <button type="button">Inner action</button>
+              </Popover.Content>
+            </Popover>
+          </Popover.Content>
+        </Popover>,
+      )
+      await userEvent.click(trigger())
+      await userEvent.click(screen.getByRole('button', { name: 'Inner trigger' }))
+      expect(screen.getByRole('dialog', { name: 'Inner' })).toBeInTheDocument()
+
+      await userEvent.click(screen.getByRole('button', { name: 'Inner action' }))
+      expect(screen.getByRole('dialog', { name: 'Inner' })).toBeInTheDocument()
+      expect(screen.getByRole('dialog', { name: 'Outer' })).toBeInTheDocument()
+
+      // Escape peels one layer at a time.
+      await userEvent.keyboard('{Escape}')
+      expect(screen.queryByRole('dialog', { name: 'Inner' })).toBeNull()
+      expect(screen.getByRole('dialog', { name: 'Outer' })).toBeInTheDocument()
+    })
+  })
+
+  describe('asChild trigger', () => {
+    it('makes the child element the trigger — no wrapping <button>', async () => {
+      render(
+        <Popover>
+          <Popover.Trigger asChild>
+            <span role="button" tabIndex={0}>
+              Open
+            </span>
+          </Popover.Trigger>
+          <Popover.Content aria-label="Details">body</Popover.Content>
+        </Popover>,
+      )
+      const t = trigger()
+      expect(t.tagName).toBe('SPAN')
+      expect(t).toHaveAttribute('aria-haspopup', 'dialog')
+      expect(t).toHaveAttribute('aria-expanded', 'false')
+      expect(document.querySelectorAll('button')).toHaveLength(0)
+      await userEvent.click(t)
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
+      expect(t).toHaveAttribute('aria-expanded', 'true')
+    })
+
+    it('calls the child onClick and the trigger onClick, and honours preventDefault', async () => {
+      const childClick = vi.fn()
+      const triggerClick = vi.fn((e: React.MouseEvent) => e.preventDefault())
+      render(
+        <Popover>
+          <Popover.Trigger asChild onClick={triggerClick}>
+            <button type="button" onClick={childClick}>
+              Open
+            </button>
+          </Popover.Trigger>
+          <Popover.Content aria-label="Details">body</Popover.Content>
+        </Popover>,
+      )
+      await userEvent.click(trigger())
+      expect(childClick).toHaveBeenCalledTimes(1)
+      expect(triggerClick).toHaveBeenCalledTimes(1)
+      expect(screen.queryByRole('dialog')).toBeNull()
+    })
+  })
+
+  describe('surface', () => {
+    it('spreads className and style onto the content, caller style last', async () => {
+      render(<Basic contentProps={{ className: 'w-64', style: { width: '20rem' } }} />)
+      await userEvent.click(trigger())
+      const dialog = screen.getByRole('dialog')
+      expect(dialog).toHaveClass('w-64')
+      expect(dialog.style.width).toBe('20rem')
+      expect(dialog.style.background).toContain('--popover')
+    })
+
+    it('unstyled drops the surface chrome but keeps positioning', async () => {
+      render(<Basic contentProps={{ unstyled: true }} />)
+      await userEvent.click(trigger())
+      const dialog = screen.getByRole('dialog')
+      expect(dialog.style.background).toBe('')
+      expect(dialog.style.position).toBe('fixed')
+    })
+  })
+
+  describe('positioning (mocked geometry)', () => {
+    let restore: () => void
+    beforeEach(() => {
+      restore = mockGeometry()
+      setViewport(1000, 800)
+    })
+    afterEach(() => restore())
+
+    it('positions under the trigger and animates in once positioned', async () => {
+      render(
+        <Popover>
+          <Popover.Trigger data-rect="400,300,80,32">Open</Popover.Trigger>
+          <Popover.Content aria-label="Details" data-size="200,120">
+            body
+          </Popover.Content>
+        </Popover>,
+      )
+      await userEvent.click(trigger())
+      const dialog = screen.getByRole('dialog')
+      expect(dialog.style.left).toBe('400px')
+      expect(dialog.style.top).toBe('338px')
+      expect(dialog).toHaveAttribute('data-positioned', 'true')
+      expect(dialog).toHaveAttribute('data-side', 'bottom')
+      expect(dialog).toHaveClass('ds-enter-pop')
+    })
+
+    it('flips above the trigger at the bottom of the viewport', async () => {
+      render(
+        <Popover>
+          <Popover.Trigger data-rect="400,700,80,32">Open</Popover.Trigger>
+          <Popover.Content aria-label="Details" data-size="200,120" align="end">
+            body
+          </Popover.Content>
+        </Popover>,
+      )
+      await userEvent.click(trigger())
+      const dialog = screen.getByRole('dialog')
+      expect(dialog).toHaveAttribute('data-side', 'top')
+      expect(dialog).toHaveAttribute('data-align', 'end')
+      expect(dialog.style.top).toBe(`${700 - 120 - 6}px`)
+      expect(dialog.style.left).toBe(`${480 - 200}px`)
+    })
+
+    it('positions against a virtual anchor rect with no trigger at all', () => {
+      render(
+        <Popover open anchorRect={{ left: 300, top: 200, width: 0, height: 0 }}>
+          <Popover.Content aria-label="Context" data-size="200,120" offset={0}>
+            body
+          </Popover.Content>
+        </Popover>,
+      )
+      const dialog = screen.getByRole('dialog')
+      expect(dialog.style.left).toBe('300px')
+      expect(dialog.style.top).toBe('200px')
+    })
+  })
+})