@lovett/ui 0.0.11 → 0.2.0

package/src/detail/__tests__/field-row.test.tsx

@@ -0,0 +1,357 @@
+/**
+ * FieldRow — engage, revert, commit, and the resting appearance.
+ *
+ * The resting assertions are not decoration: §4's whole point is that a field
+ * does NOT look like a form control until you engage it, so "there is no
+ * textbox on screen until the row is clicked" is the requirement, stated the
+ * only way a test can state it.
+ */
+import { useState } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { FieldList } from '../field-list'
+import { FieldRow } from '../field-row'
+
+const noop = () => {}
+
+/** Local noon on a fixed day, so the calendar always opens on Sept 2026. */
+const FROZEN = new Date(2026, 8, 15, 12, 0, 0).getTime()
+
+describe('FieldRow', () => {
+  it('reads as plain text at rest, with a verb phrase when empty', () => {
+    render(<FieldRow.Text label="Next steps" value="" onCommit={noop} placeholder="Empty" />)
+    expect(screen.queryByRole('textbox')).toBeNull()
+    expect(screen.getByRole('button', { name: /Next steps/ })).toHaveTextContent('Empty')
+  })
+
+  it('commits on Enter', async () => {
+    const onCommit = vi.fn()
+    render(<FieldRow.Text label="Next steps" value="" onCommit={onCommit} />)
+    await userEvent.click(screen.getByRole('button', { name: /Next steps/ }))
+    await userEvent.type(screen.getByRole('textbox', { name: 'Next steps' }), 'Ship it{Enter}')
+    expect(onCommit).toHaveBeenCalledWith('Ship it')
+    expect(screen.queryByRole('textbox')).toBeNull()
+  })
+
+  it('reverts on Escape and writes nothing', async () => {
+    const onCommit = vi.fn()
+    render(<FieldRow.Text label="Next steps" value="Original" onCommit={onCommit} />)
+    await userEvent.click(screen.getByRole('button', { name: /Next steps/ }))
+    await userEvent.type(screen.getByRole('textbox', { name: 'Next steps' }), ' and more{Escape}')
+    expect(onCommit).not.toHaveBeenCalled()
+    expect(screen.getByRole('button', { name: /Next steps/ })).toHaveTextContent('Original')
+  })
+
+  it('does not close the surface when Escape reverts a field', async () => {
+    // The layer stack listens on `document`. Without `stopPropagation` in the
+    // editor, reverting a field would throw the operator out of the item.
+    const onEscape = vi.fn()
+    document.addEventListener('keydown', onEscape)
+    try {
+      render(<FieldRow.Text label="Next steps" value="Original" onCommit={noop} />)
+      await userEvent.click(screen.getByRole('button', { name: /Next steps/ }))
+      await userEvent.type(screen.getByRole('textbox', { name: 'Next steps' }), '{Escape}')
+      expect(onEscape).not.toHaveBeenCalled()
+    } finally {
+      document.removeEventListener('keydown', onEscape)
+    }
+  })
+
+  it('commits on blur', async () => {
+    const onCommit = vi.fn()
+    render(
+      <>
+        <FieldRow.Text label="Next steps" value="" onCommit={onCommit} />
+        <button type="button">Elsewhere</button>
+      </>,
+    )
+    await userEvent.click(screen.getByRole('button', { name: /Next steps/ }))
+    await userEvent.type(screen.getByRole('textbox', { name: 'Next steps' }), 'Typed')
+    await userEvent.click(screen.getByRole('button', { name: 'Elsewhere' }))
+    expect(onCommit).toHaveBeenCalledWith('Typed')
+  })
+
+  it('does not fire a commit when nothing changed', async () => {
+    const onCommit = vi.fn()
+    render(<FieldRow.Text label="Next steps" value="Same" onCommit={onCommit} />)
+    await userEvent.click(screen.getByRole('button', { name: /Next steps/ }))
+    await userEvent.type(screen.getByRole('textbox', { name: 'Next steps' }), '{Enter}')
+    expect(onCommit).not.toHaveBeenCalled()
+  })
+
+  it('picks a date through the calendar and confirms it', async () => {
+    const onCommit = vi.fn()
+    render(
+      <FieldRow.Date label="Due date" value={null} onCommit={onCommit} now={FROZEN} locale="en-US" />,
+    )
+    await userEvent.click(screen.getByRole('button', { name: /Due date/ }))
+    const grid = screen.getByRole('grid')
+    await userEvent.click(within(grid).getByText('10'))
+    await userEvent.click(screen.getByRole('button', { name: 'Save date' }))
+    expect(onCommit).toHaveBeenCalledWith('2026-09-10')
+  })
+
+  it('adds a time when Include time is on', async () => {
+    const onCommit = vi.fn()
+    render(
+      <FieldRow.Date
+        label="Due date"
+        value="2026-09-10"
+        onCommit={onCommit}
+        now={FROZEN}
+        locale="en-US"
+      />,
+    )
+    await userEvent.click(screen.getByRole('button', { name: /Due date/ }))
+    await userEvent.click(screen.getByRole('checkbox', { name: 'Include time' }))
+    await userEvent.click(screen.getByRole('button', { name: 'Save date' }))
+    expect(onCommit).toHaveBeenCalledWith('2026-09-10T09:00')
+  })
+
+  it('clears a date', async () => {
+    const onCommit = vi.fn()
+    render(
+      <FieldRow.Date label="Due date" value="2026-09-10" onCommit={onCommit} now={FROZEN} />,
+    )
+    await userEvent.click(screen.getByRole('button', { name: /Due date/ }))
+    await userEvent.click(screen.getByRole('button', { name: 'Clear' }))
+    expect(onCommit).toHaveBeenCalledWith(null)
+  })
+
+  it('picks one option through the select row', async () => {
+    const onCommit = vi.fn()
+    render(
+      <FieldRow.Select
+        label="Status"
+        value={null}
+        onCommit={onCommit}
+        options={[
+          { value: 'building', label: 'Building' },
+          { value: 'review', label: 'Review' },
+        ]}
+      />,
+    )
+    await userEvent.click(screen.getByRole('button', { name: /Status/ }))
+    await userEvent.click(screen.getByRole('option', { name: /Review/ }))
+    expect(onCommit).toHaveBeenCalledWith('review')
+  })
+
+  it('assigns people and commits the pending set when the picker closes', async () => {
+    const onCommit = vi.fn()
+    function Host() {
+      const [value, setValue] = useState<readonly string[]>([])
+      return (
+        <>
+          <FieldRow.People
+            label="Assignees"
+            value={value}
+            people={[
+              { id: 'u1', name: 'Ada Lovelace' },
+              { id: 'u2', name: 'Grace Hopper' },
+            ]}
+            onCommit={(next) => {
+              onCommit(next)
+              setValue(next)
+            }}
+          />
+          <button type="button">Elsewhere</button>
+        </>
+      )
+    }
+    render(<Host />)
+    await userEvent.click(screen.getByRole('button', { name: /Assignees/ }))
+    await userEvent.click(screen.getByRole('option', { name: /Ada Lovelace/ }))
+    expect(onCommit).not.toHaveBeenCalled()
+    await userEvent.click(screen.getByRole('button', { name: 'Elsewhere' }))
+    expect(onCommit).toHaveBeenCalledWith(['u1'])
+  })
+
+  it('edits tags in place, and Escape puts them back', async () => {
+    const onCommit = vi.fn()
+    render(
+      <>
+        <FieldRow.Tags label="Tags" value={['alpha']} onCommit={onCommit} />
+        <button type="button">Elsewhere</button>
+      </>,
+    )
+    await userEvent.click(screen.getByRole('button', { name: /Tags/ }))
+    const input = screen.getByRole('textbox')
+    await userEvent.type(input, 'beta{Enter}')
+    await userEvent.keyboard('{Escape}')
+    expect(onCommit).not.toHaveBeenCalled()
+    expect(screen.getByRole('button', { name: /Tags/ })).toHaveTextContent('alpha')
+
+    await userEvent.click(screen.getByRole('button', { name: /Tags/ }))
+    await userEvent.type(screen.getByRole('textbox'), 'gamma{Enter}')
+    await userEvent.click(screen.getByRole('button', { name: 'Elsewhere' }))
+    expect(onCommit).toHaveBeenCalledWith(['alpha', 'gamma'])
+  })
+})
+
+// The file had ZERO `.focus()` calls before 2026-09-06: every editor here
+// replaces the resting value, so Enter and Escape — the two commonest
+// gestures in the detail surface — unmounted the focused element and
+// dropped the caret to <body>.
+describe('FieldRow focus restore', () => {
+  const resting = (name: RegExp) => screen.getByRole('button', { name })
+
+  it('Text: Enter commits and returns focus to the resting row', async () => {
+    render(<FieldRow.Text label="Next steps" value="" onCommit={noop} />)
+    await userEvent.click(resting(/Next steps/))
+    await userEvent.type(screen.getByRole('textbox', { name: 'Next steps' }), 'Ship it{Enter}')
+    expect(document.activeElement).toBe(resting(/Next steps/))
+  })
+
+  it('Text: Escape reverts and returns focus to the resting row', async () => {
+    render(<FieldRow.Text label="Next steps" value="Original" onCommit={noop} />)
+    await userEvent.click(resting(/Next steps/))
+    await userEvent.type(screen.getByRole('textbox', { name: 'Next steps' }), '{Escape}')
+    expect(document.activeElement).toBe(resting(/Next steps/))
+  })
+
+  it('Text (multiline): Cmd+Enter commits and returns focus', async () => {
+    render(<FieldRow.Text multiline label="Notes" value="" onCommit={noop} />)
+    await userEvent.click(resting(/Notes/))
+    const editor = screen.getByRole('textbox', { name: 'Notes' })
+    await userEvent.type(editor, 'Long form')
+    await userEvent.keyboard('{Meta>}{Enter}{/Meta}')
+    expect(document.activeElement).toBe(resting(/Notes/))
+  })
+
+  it('Tags: Escape returns focus to the resting row', async () => {
+    render(<FieldRow.Tags label="Tags" value={['alpha']} onCommit={noop} />)
+    await userEvent.click(resting(/Tags/))
+    await userEvent.keyboard('{Escape}')
+    expect(document.activeElement).toBe(resting(/Tags/))
+  })
+
+  it('Select: choosing an option returns focus to the resting row', async () => {
+    render(
+      <FieldRow.Select
+        label="Status"
+        value={null}
+        onCommit={noop}
+        options={[{ value: 'review', label: 'Review' }]}
+      />,
+    )
+    await userEvent.click(resting(/Status/))
+    await userEvent.click(screen.getByRole('option', { name: /Review/ }))
+    expect(document.activeElement).toBe(resting(/Status/))
+  })
+
+  it('People: closing the picker returns focus to the resting row', async () => {
+    render(
+      <FieldRow.People
+        label="Assignees"
+        value={[]}
+        people={[{ id: 'u1', name: 'Ada Lovelace' }]}
+        onCommit={noop}
+      />,
+    )
+    await userEvent.click(resting(/Assignees/))
+    await userEvent.keyboard('{Escape}')
+    expect(document.activeElement).toBe(resting(/Assignees/))
+  })
+
+  it('Date: saving returns focus to the resting row', async () => {
+    render(<FieldRow.Date label="Due date" value={null} onCommit={noop} now={FROZEN} />)
+    await userEvent.click(resting(/Due date/))
+    await userEvent.click(screen.getByRole('button', { name: 'Save date' }))
+    expect(document.activeElement).toBe(resting(/Due date/))
+  })
+
+  it('leaves focus alone when a blur-commit hands it to another control', async () => {
+    render(
+      <>
+        <FieldRow.Text label="Next steps" value="" onCommit={noop} />
+        <button type="button">Elsewhere</button>
+      </>,
+    )
+    await userEvent.click(resting(/Next steps/))
+    await userEvent.type(screen.getByRole('textbox', { name: 'Next steps' }), 'Typed')
+    await userEvent.click(screen.getByRole('button', { name: 'Elsewhere' }))
+    expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Elsewhere' }))
+  })
+})
+
+describe('FieldRow value semantics', () => {
+  it('associates a read-only value with its label', () => {
+    render(<FieldRow.Text readOnly label="Owner" value="Ada Lovelace" onCommit={noop} />)
+    // A bare <span> is role=generic, where a name is ignored — the value
+    // reached AT as a loose string with no tie to the label beside it.
+    expect(screen.getByRole('group', { name: 'Owner' })).toHaveTextContent('Ada Lovelace')
+  })
+
+  it('associates a static <FieldRow value> with its label', () => {
+    render(<FieldRow label="Created" filled value="Yesterday" />)
+    expect(screen.getByRole('group', { name: 'Created' })).toHaveTextContent('Yesterday')
+  })
+
+  it('tells you what each row will actually do', () => {
+    render(
+      <>
+        <FieldRow.Text label="Next steps" value="" onCommit={noop} />
+        <FieldRow.Date label="Due date" value={null} onCommit={noop} now={FROZEN} />
+        <FieldRow.Select label="Status" value={null} onCommit={noop} options={[]} />
+        <FieldRow.People label="Assignees" value={[]} people={[]} onCommit={noop} />
+      </>,
+    )
+    // One affordance, five behaviours — so each row states its own.
+    expect(screen.getByRole('button', { name: /Due date/ })).toHaveAttribute(
+      'aria-haspopup',
+      'dialog',
+    )
+    expect(screen.getByRole('button', { name: /Status/ })).toHaveAttribute(
+      'aria-haspopup',
+      'listbox',
+    )
+    expect(screen.getByRole('button', { name: /Assignees/ })).toHaveAttribute(
+      'aria-haspopup',
+      'listbox',
+    )
+    const text = screen.getByRole('button', { name: /Next steps/ })
+    expect(text).not.toHaveAttribute('aria-haspopup')
+    expect(text).toHaveAccessibleDescription(/Edits in place/)
+  })
+})
+
+describe('FieldList', () => {
+  const rows = (
+    <>
+      <FieldRow label="Due date" filled value="10 Sept" />
+      <FieldRow label="Assignees" filled={false} placeholder="Unassigned" />
+    </>
+  )
+
+  it('hides rows that do not match the search, without unmounting them', async () => {
+    render(<FieldList>{rows}</FieldList>)
+    await userEvent.type(screen.getByRole('searchbox', { name: 'Search fields' }), 'due')
+
+    const due = document.querySelector('[data-field-row]:not([hidden])')
+    expect(due).toHaveTextContent('Due date')
+    // Still in the DOM — a half-finished edit survives a keystroke here.
+    expect(document.querySelectorAll('[data-field-row]')).toHaveLength(2)
+    expect(document.querySelectorAll('[data-field-row][hidden]')).toHaveLength(1)
+  })
+
+  it('filters by filled and empty', async () => {
+    render(<FieldList>{rows}</FieldList>)
+    await userEvent.click(screen.getByRole('button', { name: 'Empty' }))
+    const visible = document.querySelectorAll('[data-field-row]:not([hidden])')
+    expect(visible).toHaveLength(1)
+    expect(visible[0]).toHaveTextContent('Unassigned')
+
+    await userEvent.click(screen.getByRole('button', { name: 'Filled' }))
+    const filled = document.querySelectorAll('[data-field-row]:not([hidden])')
+    expect(filled).toHaveLength(1)
+    expect(filled[0]).toHaveTextContent('Due date')
+  })
+
+  it('draws no Manage fields control unless the host supplies one', () => {
+    const view = render(<FieldList>{rows}</FieldList>)
+    expect(screen.queryByRole('button', { name: 'Manage fields' })).toBeNull()
+    view.rerender(<FieldList onManageFields={noop}>{rows}</FieldList>)
+    expect(screen.getByRole('button', { name: 'Manage fields' })).toBeInTheDocument()
+  })
+})