@lovett/ui 0.0.10 → 0.1.0

package/src/__tests__/select.test.tsx

@@ -0,0 +1,543 @@
+/**
+ * Select — APG select-only combobox on lib/anchor + lib/layer-stack.
+ *
+ * Contract under test: trigger ARIA (role=combobox, haspopup, expanded,
+ * controls, activedescendant), listbox / option roles and aria-selected,
+ * the full keyboard model (open keys, arrows skipping disabled options,
+ * Home / End, Enter / Space commit, type-ahead incl. repeated-letter
+ * cycling and the 500 ms reset, Escape, Tab-closes-without-committing),
+ * focus never leaving the trigger, outside-click and layer-aware dismissal
+ * (inside a Modal, inside a Popover), controlled and uncontrolled value and
+ * open state, `.input-shell` sizing, and positioning with mocked geometry.
+ */
+import { createRef, 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 Modal from '../modal'
+import { Popover } from '../popover'
+import { Select, type SelectOption, type SelectProps } from '../select'
+import { mockGeometry, setViewport } from './helpers/geometry'
+
+const OPTIONS: SelectOption[] = [
+  { value: 'todo', label: 'To do' },
+  { value: 'doing', label: 'In progress', description: 'Actively being worked' },
+  { value: 'blocked', label: 'Blocked', disabled: true },
+  { value: 'done', label: 'Done' },
+]
+
+function Basic(props: Partial<SelectProps>) {
+  return <Select aria-label="Status" options={OPTIONS} {...props} />
+}
+
+const trigger = () => screen.getByRole('combobox', { name: 'Status' })
+const listbox = () => screen.getByRole('listbox')
+const option = (name: string | RegExp) => screen.getByRole('option', { name })
+
+describe('Select', () => {
+  describe('rendering', () => {
+    it('renders a closed combobox trigger wearing the input-shell chrome', () => {
+      render(<Basic />)
+      const t = trigger()
+      expect(t.tagName).toBe('BUTTON')
+      expect(t).toHaveAttribute('type', 'button')
+      expect(t).toHaveAttribute('aria-haspopup', 'listbox')
+      expect(t).toHaveAttribute('aria-expanded', 'false')
+      expect(t).not.toHaveAttribute('aria-controls')
+      expect(t).not.toHaveAttribute('aria-activedescendant')
+      expect(t).toHaveAttribute('data-state', 'closed')
+      expect(t).toHaveClass('input-shell')
+      expect(t).toHaveAttribute('data-size', 'md')
+      expect(screen.queryByRole('listbox')).toBeNull()
+    })
+
+    it('shows the placeholder and data-placeholder while nothing is selected', () => {
+      render(<Basic placeholder="Pick a status" />)
+      expect(trigger()).toHaveTextContent('Pick a status')
+      expect(trigger()).toHaveAttribute('data-placeholder')
+    })
+
+    it('shows the selected label (and icon) in the trigger', () => {
+      render(
+        <Basic
+          value="doing"
+          options={[{ value: 'doing', label: 'In progress', icon: <i data-testid="ico" /> }]}
+        />,
+      )
+      expect(trigger()).toHaveTextContent('In progress')
+      expect(trigger()).not.toHaveAttribute('data-placeholder')
+      expect(trigger().querySelector('[data-testid="ico"]')).not.toBeNull()
+    })
+
+    it('size="sm" adds the input-shell size modifier; error adds is-error + aria-invalid; disabled adds is-disabled', () => {
+      render(<Basic size="sm" error disabled />)
+      const t = trigger()
+      expect(t).toHaveClass('size-sm', 'is-error', 'is-disabled')
+      expect(t).toHaveAttribute('data-size', 'sm')
+      expect(t).toBeDisabled()
+      expect(t).toHaveAttribute('aria-invalid', 'true')
+    })
+
+    it('carries no aria-invalid without error, and a caller-supplied aria-invalid wins', () => {
+      const { rerender } = render(<Basic />)
+      expect(trigger()).not.toHaveAttribute('aria-invalid')
+      rerender(<Basic error aria-invalid="grammar" />)
+      expect(trigger()).toHaveAttribute('aria-invalid', 'grammar')
+    })
+
+    it('spreads className, caller style last, keeps the align-items override', () => {
+      render(<Basic className="w-64" style={{ width: '20rem' }} />)
+      const t = trigger()
+      expect(t).toHaveClass('w-64')
+      expect(t.style.width).toBe('20rem')
+      expect(t.style.alignItems).toBe('center')
+    })
+
+    it('forwards a ref to the trigger button', () => {
+      const ref = createRef<HTMLButtonElement>()
+      render(<Select ref={ref} aria-label="Status" options={OPTIONS} />)
+      expect(ref.current).toBe(trigger())
+    })
+  })
+
+  describe('open / listbox', () => {
+    it('opens on click: listbox portaled to body, wired by aria-controls, focus stays on the trigger', async () => {
+      const { container } = render(<Basic value="doing" />)
+      await userEvent.click(trigger())
+      const list = listbox()
+      expect(trigger()).toHaveAttribute('aria-expanded', 'true')
+      expect(trigger()).toHaveAttribute('aria-controls', list.id)
+      expect(trigger()).toHaveAttribute('data-state', 'open')
+      expect(list).toHaveAttribute('data-slot', 'select-listbox')
+      expect(list.parentElement).toBe(document.body)
+      expect(container.contains(list)).toBe(false)
+      expect(document.activeElement).toBe(trigger())
+    })
+
+    it('renders every option with role=option, aria-selected on the value, disabled on disabled ones', async () => {
+      render(<Basic value="doing" />)
+      await userEvent.click(trigger())
+      const options = screen.getAllByRole('option')
+      expect(options).toHaveLength(4)
+      expect(option(/^In progress/)).toHaveAttribute('aria-selected', 'true')
+      expect(option('To do')).toHaveAttribute('aria-selected', 'false')
+      expect(option('Blocked')).toHaveAttribute('aria-disabled', 'true')
+      expect(option('Blocked')).not.toBeDisabled()
+      expect(option('Done')).not.toHaveAttribute('aria-disabled')
+      expect(option(/^In progress/)).toHaveTextContent('Actively being worked')
+      for (const o of options) expect(o).toHaveAttribute('tabindex', '-1')
+    })
+
+    it('names the listbox from the trigger aria-label', async () => {
+      render(<Basic />)
+      await userEvent.click(trigger())
+      expect(screen.getByRole('listbox', { name: 'Status' })).toBeInTheDocument()
+    })
+
+    it('highlights the selected option on open (aria-activedescendant), else the first enabled', async () => {
+      const { unmount } = render(<Basic value="done" />)
+      await userEvent.click(trigger())
+      expect(trigger()).toHaveAttribute('aria-activedescendant', option('Done').id)
+      expect(option('Done')).toHaveAttribute('data-highlighted')
+      unmount()
+
+      render(<Basic options={[{ value: 'x', label: 'X', disabled: true }, ...OPTIONS]} />)
+      await userEvent.click(trigger())
+      expect(trigger()).toHaveAttribute('aria-activedescendant', option('To do').id)
+    })
+
+    it('toggles closed on a second trigger click', async () => {
+      render(<Basic />)
+      await userEvent.click(trigger())
+      await userEvent.click(trigger())
+      expect(screen.queryByRole('listbox')).toBeNull()
+      expect(trigger()).toHaveAttribute('aria-expanded', 'false')
+    })
+
+    it('renders an empty message when there are no options', async () => {
+      render(<Basic options={[]} />)
+      await userEvent.click(trigger())
+      expect(listbox()).toHaveTextContent('No options')
+      expect(screen.queryByRole('option')).toBeNull()
+    })
+
+    it('does nothing while disabled', async () => {
+      render(<Basic disabled />)
+      await userEvent.click(trigger())
+      expect(screen.queryByRole('listbox')).toBeNull()
+    })
+  })
+
+  describe('mouse', () => {
+    it('hovering an option moves the highlight', async () => {
+      render(<Basic value="todo" />)
+      await userEvent.click(trigger())
+      await userEvent.hover(option('Done'))
+      expect(trigger()).toHaveAttribute('aria-activedescendant', option('Done').id)
+    })
+
+    it('clicking an option commits it, closes, and returns focus to the trigger', async () => {
+      const onValueChange = vi.fn()
+      render(<Basic onValueChange={onValueChange} />)
+      await userEvent.click(trigger())
+      await userEvent.click(option('Done'))
+      expect(onValueChange).toHaveBeenCalledWith('done')
+      expect(onValueChange).toHaveBeenCalledTimes(1)
+      expect(screen.queryByRole('listbox')).toBeNull()
+      expect(trigger()).toHaveTextContent('Done')
+      expect(document.activeElement).toBe(trigger())
+    })
+
+    it('a mousedown inside the listbox does not pull focus off the trigger', async () => {
+      render(<Basic />)
+      await userEvent.click(trigger())
+      await userEvent.pointer({ keys: '[MouseLeft>]', target: option('Done') })
+      expect(document.activeElement).toBe(trigger())
+      expect(listbox()).toBeInTheDocument()
+      await userEvent.pointer({ keys: '[/MouseLeft]', target: option('Done') })
+    })
+
+    it('a disabled option cannot be clicked', async () => {
+      const onValueChange = vi.fn()
+      render(<Basic onValueChange={onValueChange} />)
+      await userEvent.click(trigger())
+      await userEvent.click(option('Blocked'))
+      expect(onValueChange).not.toHaveBeenCalled()
+      expect(listbox()).toBeInTheDocument()
+    })
+  })
+
+  describe('keyboard', () => {
+    it.each(['{ArrowDown}', '{ArrowUp}', '{Enter}', ' '])(
+      '%s opens the list with the selected option highlighted',
+      async (key) => {
+        render(<Basic value="doing" />)
+        trigger().focus()
+        await userEvent.keyboard(key)
+        expect(listbox()).toBeInTheDocument()
+        expect(trigger()).toHaveAttribute('aria-activedescendant', option(/^In progress/).id)
+        expect(document.activeElement).toBe(trigger())
+      },
+    )
+
+    it('Home / End open on the first / last enabled option', async () => {
+      const { unmount } = render(<Basic value="doing" />)
+      trigger().focus()
+      await userEvent.keyboard('{Home}')
+      expect(trigger()).toHaveAttribute('aria-activedescendant', option('To do').id)
+      unmount()
+
+      render(<Basic value="todo" options={[...OPTIONS, { value: 'z', label: 'Zed', disabled: true }]} />)
+      trigger().focus()
+      await userEvent.keyboard('{End}')
+      expect(trigger()).toHaveAttribute('aria-activedescendant', option('Done').id)
+    })
+
+    it('ArrowDown / ArrowUp move the highlight, skip disabled options and stop at the ends', async () => {
+      render(<Basic value="todo" />)
+      trigger().focus()
+      await userEvent.keyboard('{ArrowDown}')
+      await userEvent.keyboard('{ArrowDown}')
+      expect(trigger()).toHaveAttribute('aria-activedescendant', option(/^In progress/).id)
+      // Blocked is disabled — skipped.
+      await userEvent.keyboard('{ArrowDown}')
+      expect(trigger()).toHaveAttribute('aria-activedescendant', option('Done').id)
+      // No wrap.
+      await userEvent.keyboard('{ArrowDown}')
+      expect(trigger()).toHaveAttribute('aria-activedescendant', option('Done').id)
+      await userEvent.keyboard('{ArrowUp}')
+      expect(trigger()).toHaveAttribute('aria-activedescendant', option(/^In progress/).id)
+      await userEvent.keyboard('{Home}')
+      expect(trigger()).toHaveAttribute('aria-activedescendant', option('To do').id)
+      await userEvent.keyboard('{ArrowUp}')
+      expect(trigger()).toHaveAttribute('aria-activedescendant', option('To do').id)
+      await userEvent.keyboard('{End}')
+      expect(trigger()).toHaveAttribute('aria-activedescendant', option('Done').id)
+    })
+
+    it('Enter commits the highlighted option and closes; Space does too', async () => {
+      const onValueChange = vi.fn()
+      const { unmount } = render(<Basic value="todo" onValueChange={onValueChange} />)
+      trigger().focus()
+      await userEvent.keyboard('{ArrowDown}{ArrowDown}{Enter}')
+      expect(onValueChange).toHaveBeenCalledWith('doing')
+      expect(screen.queryByRole('listbox')).toBeNull()
+      expect(document.activeElement).toBe(trigger())
+      unmount()
+
+      const onSpace = vi.fn()
+      render(<Basic value="todo" onValueChange={onSpace} />)
+      trigger().focus()
+      await userEvent.keyboard('{ArrowDown}{ArrowDown} ')
+      expect(onSpace).toHaveBeenCalledWith('doing')
+      expect(screen.queryByRole('listbox')).toBeNull()
+    })
+
+    it('does not fire onValueChange when the same value is re-committed', async () => {
+      const onValueChange = vi.fn()
+      render(<Basic value="todo" onValueChange={onValueChange} />)
+      trigger().focus()
+      await userEvent.keyboard('{Enter}{Enter}')
+      expect(onValueChange).not.toHaveBeenCalled()
+      expect(screen.queryByRole('listbox')).toBeNull()
+    })
+
+    it('Escape closes without changing the value; focus stays on the trigger', async () => {
+      const onValueChange = vi.fn()
+      render(<Basic value="todo" onValueChange={onValueChange} />)
+      trigger().focus()
+      await userEvent.keyboard('{ArrowDown}{ArrowDown}{Escape}')
+      expect(screen.queryByRole('listbox')).toBeNull()
+      expect(onValueChange).not.toHaveBeenCalled()
+      expect(document.activeElement).toBe(trigger())
+    })
+
+    it('Tab closes WITHOUT committing and lets focus move on', async () => {
+      const onValueChange = vi.fn()
+      render(
+        <>
+          <Basic value="todo" onValueChange={onValueChange} />
+          <button type="button">Next</button>
+        </>,
+      )
+      trigger().focus()
+      await userEvent.keyboard('{ArrowDown}{ArrowDown}')
+      await userEvent.tab()
+      expect(screen.queryByRole('listbox')).toBeNull()
+      expect(onValueChange).not.toHaveBeenCalled()
+      expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Next' }))
+    })
+
+    it('does not listen for Escape while closed', async () => {
+      const onOpenChange = vi.fn()
+      render(<Basic onOpenChange={onOpenChange} />)
+      trigger().focus()
+      await userEvent.keyboard('{Escape}')
+      expect(onOpenChange).not.toHaveBeenCalled()
+    })
+
+    describe('type-ahead', () => {
+      const LETTERS: SelectOption[] = [
+        { value: 'alpha', label: 'Alpha' },
+        { value: 'amber', label: 'Amber' },
+        { value: 'apple', label: 'Apple' },
+        { value: 'beta', label: 'Beta', disabled: true },
+        { value: 'bravo', label: 'Bravo' },
+      ]
+
+      it('a printable key opens the list on the first label starting with it', async () => {
+        render(<Basic options={LETTERS} />)
+        trigger().focus()
+        await userEvent.keyboard('b')
+        expect(listbox()).toBeInTheDocument()
+        // Beta is disabled — skipped.
+        expect(trigger()).toHaveAttribute('aria-activedescendant', option('Bravo').id)
+      })
+
+      it('a repeated letter cycles through its matches', async () => {
+        render(<Basic options={LETTERS} />)
+        trigger().focus()
+        await userEvent.keyboard('a')
+        expect(trigger()).toHaveAttribute('aria-activedescendant', option('Alpha').id)
+        await userEvent.keyboard('a')
+        expect(trigger()).toHaveAttribute('aria-activedescendant', option('Amber').id)
+        await userEvent.keyboard('a')
+        expect(trigger()).toHaveAttribute('aria-activedescendant', option('Apple').id)
+        await userEvent.keyboard('a')
+        expect(trigger()).toHaveAttribute('aria-activedescendant', option('Alpha').id)
+      })
+
+      it('a typed prefix narrows to the matching label', async () => {
+        render(<Basic options={LETTERS} />)
+        trigger().focus()
+        await userEvent.keyboard('ap')
+        expect(trigger()).toHaveAttribute('aria-activedescendant', option('Apple').id)
+      })
+
+      describe('with fake timers', () => {
+        beforeEach(() => {
+          vi.useFakeTimers()
+          // RTL's asyncWrapper drains with a real setTimeout(0) unless it finds
+          // a jest-style advanceTimersByTime; without this shim every
+          // user-event call hangs under vitest fake timers.
+          vi.stubGlobal('jest', {
+            advanceTimersByTime: (ms: number) => vi.advanceTimersByTime(ms),
+          })
+        })
+        afterEach(() => {
+          vi.useRealTimers()
+          vi.unstubAllGlobals()
+        })
+
+        it('the buffer resets after a pause', async () => {
+          const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
+          render(<Basic options={LETTERS} />)
+          trigger().focus()
+          await user.keyboard('a')
+          expect(trigger()).toHaveAttribute('aria-activedescendant', option('Alpha').id)
+          act(() => {
+            vi.advanceTimersByTime(600)
+          })
+          // A fresh 'b' search, not an 'ab' prefix (which matches nothing).
+          await user.keyboard('b')
+          expect(trigger()).toHaveAttribute('aria-activedescendant', option('Bravo').id)
+        })
+      })
+    })
+  })
+
+  describe('controlled / uncontrolled', () => {
+    it('uncontrolled: defaultValue seeds the value and picks update the trigger', async () => {
+      render(<Basic defaultValue="todo" />)
+      expect(trigger()).toHaveTextContent('To do')
+      await userEvent.click(trigger())
+      await userEvent.click(option('Done'))
+      expect(trigger()).toHaveTextContent('Done')
+    })
+
+    it('controlled: follows `value`; a parent that ignores onValueChange keeps the old value', async () => {
+      const onValueChange = vi.fn()
+      render(<Basic value="todo" onValueChange={onValueChange} />)
+      await userEvent.click(trigger())
+      await userEvent.click(option('Done'))
+      expect(onValueChange).toHaveBeenCalledWith('done')
+      expect(trigger()).toHaveTextContent('To do')
+    })
+
+    it('controlled: reflects an external value change', async () => {
+      function Controlled() {
+        const [value, setValue] = useState<string | null>('todo')
+        return (
+          <>
+            <Basic value={value} onValueChange={setValue} />
+            <button type="button" onClick={() => setValue('done')}>
+              set done
+            </button>
+          </>
+        )
+      }
+      render(<Controlled />)
+      await userEvent.click(screen.getByRole('button', { name: 'set done' }))
+      expect(trigger()).toHaveTextContent('Done')
+    })
+
+    it('controlled open: reports through onOpenChange and follows `open`', async () => {
+      function ControlledOpen() {
+        const [open, setOpen] = useState(false)
+        return (
+          <>
+            <span data-testid="state">{open ? 'open' : 'closed'}</span>
+            <Basic open={open} onOpenChange={setOpen} />
+          </>
+        )
+      }
+      render(<ControlledOpen />)
+      await userEvent.click(trigger())
+      expect(screen.getByTestId('state')).toHaveTextContent('open')
+      expect(listbox()).toBeInTheDocument()
+      await userEvent.keyboard('{Escape}')
+      expect(screen.getByTestId('state')).toHaveTextContent('closed')
+      expect(screen.queryByRole('listbox')).toBeNull()
+    })
+
+    it('controlled open: stays closed when the parent ignores onOpenChange', async () => {
+      const onOpenChange = vi.fn()
+      render(<Basic open={false} onOpenChange={onOpenChange} />)
+      await userEvent.click(trigger())
+      expect(onOpenChange).toHaveBeenCalledWith(true)
+      expect(screen.queryByRole('listbox')).toBeNull()
+    })
+
+    it('defaultOpen renders the list open', () => {
+      render(<Basic defaultOpen />)
+      expect(listbox()).toBeInTheDocument()
+    })
+  })
+
+  describe('dismissal + layers', () => {
+    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('listbox')).toBeNull()
+    })
+
+    it('inside a Modal, Escape closes only the Select; 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(listbox()).toBeInTheDocument()
+      await userEvent.keyboard('{Escape}')
+      expect(screen.queryByRole('listbox')).toBeNull()
+      expect(onClose).not.toHaveBeenCalled()
+      await userEvent.keyboard('{Escape}')
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('inside a Popover, picking an option does not close the popover (layer-aware outside click)', async () => {
+      const onValueChange = vi.fn()
+      render(
+        <Popover defaultOpen>
+          <Popover.Trigger>Open</Popover.Trigger>
+          <Popover.Content aria-label="Filters">
+            <Basic onValueChange={onValueChange} />
+          </Popover.Content>
+        </Popover>,
+      )
+      await userEvent.click(trigger())
+      await userEvent.click(option('Done'))
+      expect(onValueChange).toHaveBeenCalledWith('done')
+      expect(screen.queryByRole('listbox')).toBeNull()
+      expect(screen.getByRole('dialog', { name: 'Filters' })).toBeInTheDocument()
+      // Escape now peels the popover.
+      await userEvent.keyboard('{Escape}')
+      expect(screen.queryByRole('dialog')).toBeNull()
+    })
+  })
+
+  describe('positioning (mocked geometry)', () => {
+    let restore: () => void
+    beforeEach(() => {
+      restore = mockGeometry()
+      setViewport(1000, 800)
+    })
+    afterEach(() => restore())
+
+    it('opens under the trigger, at least as wide as it, and animates in once positioned', async () => {
+      render(<Basic data-rect="400,300,240,40" data-size="240,40" listboxClassName="w-64" />)
+      await userEvent.click(trigger())
+      const list = listbox()
+      expect(list.style.position).toBe('fixed')
+      expect(list.style.left).toBe('400px')
+      expect(list.style.top).toBe('346px')
+      expect(list.style.minWidth).toBe('240px')
+      expect(list).toHaveAttribute('data-side', 'bottom')
+      expect(list).toHaveAttribute('data-positioned', 'true')
+      expect(list).toHaveClass('ds-enter-pop', 'w-64')
+      expect(list.style.background).toContain('--popover')
+    })
+
+    it('flips above the trigger at the bottom of the viewport', async () => {
+      render(<Basic data-rect="400,780,240,40" />)
+      await userEvent.click(trigger())
+      expect(listbox()).toHaveAttribute('data-side', 'top')
+    })
+
+    it('honours side / align', async () => {
+      render(<Basic data-rect="400,300,240,40" side="top" align="end" />)
+      await userEvent.click(trigger())
+      const list = listbox()
+      expect(list).toHaveAttribute('data-side', 'top')
+      expect(list).toHaveAttribute('data-align', 'end')
+    })
+  })
+})