@lovett/ui 0.0.11 → 0.2.0

package/src/thread/__tests__/suggestion-list.test.tsx

@@ -0,0 +1,648 @@
+/**
+ * The ONE suggestion popup, and the two triggers that open it (ADR-149).
+ *
+ * WHAT JSDOM CANNOT DO, said plainly, because the ADR's acceptance criteria
+ * are split across this file and a browser pass:
+ *
+ *   - PLACEMENT. jsdom performs no layout, so floating-ui's anchoring, the
+ *     flip when the popup would run off the bottom, and AC#8's
+ *     "`window.scrollY` unchanged" probe are all meaningless here. Every
+ *     assertion below is about STATE — open or closed, which option is active,
+ *     what landed in the document, where focus is — never a pixel. AC#8 and
+ *     AC#12 are the owner's browser pass.
+ *   - The CONTAINMENT that makes AC#8 true is nonetheless testable in the one
+ *     place a bug would live: `listScrollTop` is the arithmetic that replaces
+ *     `scrollIntoView`, and it is exercised directly.
+ *   - FOCUS, HALF of it. jsdom implements neither Tab's focus navigation nor
+ *     focus-on-mousedown, so the two assertions that `document.activeElement`
+ *     is still the editor after a Tab-insert and after a click would also pass
+ *     with the `preventDefault` guards deleted. They are kept because they DO
+ *     catch a regression that moves focus deliberately (a `.focus()` on an
+ *     option, a portal that autofocuses), but the guards themselves are AC#12.
+ *     The rest of AC#6 — that the arrows and Escape do not move focus, and
+ *     that `aria-activedescendant` tracks the active option — is real here.
+ *   - A real IME session (D11) is out of reach here as it was in ADR-148's
+ *     suite.
+ *
+ * The editor is driven the way ADR-148's suite drives it — through `onEditor`
+ * and `insertContent`, because jsdom does not synthesize `beforeinput`. The
+ * Suggestion plugin reads the document after each transaction, so an inserted
+ * `@a` opens the popup exactly as a typed one would. Its item lookup is async
+ * (the plugin awaits an abortable fetch even for a synchronous `items`), which
+ * is why every open is awaited.
+ */
+
+import { beforeAll, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { useState } from 'react'
+import type { Editor } from '@tiptap/core'
+import RichThreadComposerImpl, {
+  type RichThreadComposerImplProps,
+} from '../rich-composer-impl'
+import { Thread } from '../thread'
+import { serializeRichMarkdown } from '../markdown-spec'
+import { listScrollTop, wrapIndex } from '../suggestion-list'
+import type { MentionSuggestionItem } from '../types'
+
+/* ── jsdom shims (same reasoning as the ADR-148 suite) ────────────────────── */
+
+beforeAll(() => {
+  const zeroRect = (): DOMRect => ({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    toJSON: () => ({}),
+  })
+  const emptyRects = (): DOMRectList =>
+    ({ length: 0, item: () => null, [Symbol.iterator]: [][Symbol.iterator] }) as unknown as DOMRectList
+  if (typeof Range.prototype.getClientRects !== 'function') {
+    Range.prototype.getClientRects = emptyRects
+  }
+  if (typeof Range.prototype.getBoundingClientRect !== 'function') {
+    Range.prototype.getBoundingClientRect = zeroRect
+  }
+  if (typeof Element.prototype.getClientRects !== 'function') {
+    Element.prototype.getClientRects = emptyRects
+  }
+})
+
+/* ── Harness ──────────────────────────────────────────────────────────────── */
+
+const PEOPLE: readonly MentionSuggestionItem[] = [
+  { id: 'usr_1', label: 'Ann Baptiste', type: 'user' },
+  { id: 'usr_2', label: 'Arun Mehta', type: 'user' },
+  { id: 'usr_3', label: 'Ada Okoye', type: 'user' },
+  { id: 'tit_9', label: 'Audit the flighting', type: 'task_item' },
+]
+
+function findPeople(query: string): readonly MentionSuggestionItem[] {
+  const needle = query.trim().toLowerCase()
+  if (needle === '') return PEOPLE
+  return PEOPLE.filter((item) => item.label.toLowerCase().startsWith(needle))
+}
+
+type HarnessProps = Partial<Omit<RichThreadComposerImplProps, 'value' | 'onChange' | 'onSubmit'>>
+
+function Harness({ ...rest }: HarnessProps) {
+  const [value, setValue] = useState('')
+  return (
+    <RichThreadComposerImpl
+      label="Add a comment"
+      value={value}
+      onChange={setValue}
+      onSubmit={() => undefined}
+      {...rest}
+    />
+  )
+}
+
+interface Mounted {
+  readonly editor: Editor
+  readonly surface: HTMLElement
+}
+
+function mount(props: HarnessProps = {}): Mounted {
+  let captured: Editor | null = null
+  render(
+    <Harness
+      {...props}
+      onEditor={(editor) => {
+        if (editor !== null) captured = editor
+      }}
+    />,
+  )
+  if (captured === null) throw new Error('the editor did not mount')
+  return { editor: captured, surface: screen.getByRole('textbox', { name: 'Add a comment' }) }
+}
+
+/**
+ * Let everything the editor defers actually happen.
+ *
+ * Two deferrals, both real rather than test-only: the Suggestion plugin awaits
+ * an abortable item fetch even when `items` is synchronous, and TipTap's
+ * `focus` command lands inside a `requestAnimationFrame` (it has to — focusing
+ * mid-transaction fights the browser's own selection handling). A test that
+ * asserts on either without flushing both is asserting on a half-applied
+ * state.
+ */
+async function settle(): Promise<void> {
+  await act(async () => {
+    await new Promise((resolve) => {
+      setTimeout(resolve, 0)
+    })
+    await new Promise((resolve) => {
+      requestAnimationFrame(() => {
+        resolve(null)
+      })
+    })
+    await new Promise((resolve) => {
+      setTimeout(resolve, 0)
+    })
+  })
+}
+
+/** Insert text and let the Suggestion plugin's async item pass settle. */
+async function typeText(editor: Editor, text: string): Promise<void> {
+  act(() => {
+    editor.commands.insertContent(text)
+  })
+  await settle()
+}
+
+function popup(): HTMLElement | null {
+  return screen.queryByRole('listbox')
+}
+
+function optionLabels(): string[] {
+  const list = popup()
+  if (list === null) return []
+  return within(list)
+    .getAllByRole('option')
+    .map((option) => option.textContent ?? '')
+}
+
+function activeOption(): HTMLElement | undefined {
+  const list = popup()
+  if (list === null) return undefined
+  return within(list)
+    .getAllByRole('option')
+    .find((option) => option.getAttribute('aria-selected') === 'true')
+}
+
+/**
+ * Text into an editor we have no handle on.
+ *
+ * `<Thread>` owns its composer and exposes no `onEditor`, which is the whole
+ * point of the two tests below — a seam that only works when a test reaches
+ * past the component is not wired. A paste is a real DOM input path: it runs
+ * ProseMirror's clipboard pipeline, lands a transaction, and the Suggestion
+ * plugin reads the document exactly as it would for a keystroke.
+ */
+async function pasteText(box: HTMLElement, text: string): Promise<void> {
+  act(() => {
+    fireEvent.paste(box, {
+      clipboardData: {
+        getData: (type: string) =>
+          type === 'text/plain' || type === 'Text' ? text : '',
+        types: ['text/plain'],
+        files: [],
+      },
+    })
+  })
+  await settle()
+}
+
+function markdownOf(editor: Editor): string {
+  return serializeRichMarkdown(editor.getJSON())
+}
+
+/* ── The pure parts (the ones jsdom can actually prove) ───────────────────── */
+
+describe('the popup arithmetic', () => {
+  it('wraps at both ends and never leaves the list', () => {
+    expect(wrapIndex(0, 3, 1)).toBe(1)
+    expect(wrapIndex(2, 3, 1)).toBe(0)
+    expect(wrapIndex(0, 3, -1)).toBe(2)
+    expect(wrapIndex(1, 3, -1)).toBe(0)
+  })
+
+  it('answers 0 for an empty list rather than a negative index', () => {
+    expect(wrapIndex(0, 0, 1)).toBe(0)
+    expect(wrapIndex(0, 0, -1)).toBe(0)
+  })
+
+  it('scrolls the popup only as far as it must, and not at all when it need not', () => {
+    const view = { scrollTop: 0, clientHeight: 96 }
+    // Already visible.
+    expect(listScrollTop(view, { offsetTop: 0, offsetHeight: 32 })).toBe(0)
+    expect(listScrollTop(view, { offsetTop: 64, offsetHeight: 32 })).toBe(0)
+    // Below the fold: the smallest move that shows it whole.
+    expect(listScrollTop(view, { offsetTop: 96, offsetHeight: 32 })).toBe(32)
+    // Above it: back to the option's own top.
+    expect(listScrollTop({ scrollTop: 64, clientHeight: 96 }, { offsetTop: 32, offsetHeight: 32 })).toBe(32)
+  })
+})
+
+/* ── D4 — when the popup opens, and when it stays out of the way ──────────── */
+
+describe('D4 — the thresholds, and the four things that mean "no"', () => {
+  it('AC#4: a bare colon is punctuation — it inserts a colon and opens nothing', async () => {
+    const { editor } = mount()
+    await typeText(editor, 'ship it:')
+    expect(popup()).toBeNull()
+    expect(markdownOf(editor)).toBe('ship it:')
+  })
+
+  it('AC#4: one character after the colon is still prose, and a space ends it', async () => {
+    const { editor } = mount()
+    await typeText(editor, ':x')
+    expect(popup()).toBeNull()
+    await typeText(editor, ' ')
+    expect(popup()).toBeNull()
+    expect(markdownOf(editor)).toBe(':x')
+  })
+
+  it('leaves the colons prose is full of alone: a time, a URL, a label', async () => {
+    const { editor } = mount()
+    // A colon only triggers after whitespace or the start of a block, so none
+    // of these is even a candidate — the popup never so much as flickers.
+    for (const prose of ['standup at 12:30', ' see https:', ' Note: the drop']) {
+      await typeText(editor, prose)
+      expect(popup()).toBeNull()
+    }
+    expect(markdownOf(editor)).toBe('standup at 12:30 see https: Note: the drop')
+  })
+
+  it('opens on the second character after the colon', async () => {
+    const { editor } = mount()
+    await typeText(editor, ':ta')
+    expect(popup()).not.toBeNull()
+    expect(optionLabels().some((label) => label.includes(':tada:'))).toBe(true)
+  })
+
+  it('closes again when the query matches nothing', async () => {
+    const { editor } = mount()
+    await typeText(editor, ':ta')
+    expect(popup()).not.toBeNull()
+    await typeText(editor, 'zzzz')
+    expect(popup()).toBeNull()
+  })
+
+  it('a bare `@` opens nothing; one character after it does', async () => {
+    const { editor } = mount({ mentionItems: findPeople })
+    await typeText(editor, '@')
+    expect(popup()).toBeNull()
+    await typeText(editor, 'a')
+    expect(popup()).not.toBeNull()
+    expect(optionLabels()).toHaveLength(4)
+  })
+
+  it('a shortcode inside code stays literal — the trigger does not fire there', async () => {
+    const { editor } = mount()
+    act(() => {
+      editor.commands.toggleCodeBlock()
+    })
+    await typeText(editor, ':tad')
+    expect(popup()).toBeNull()
+  })
+
+  it('closes on blur without inserting anything', async () => {
+    const { editor, surface } = mount()
+    await typeText(editor, ':tad')
+    expect(popup()).not.toBeNull()
+    await act(async () => {
+      fireEvent.blur(surface)
+      await Promise.resolve()
+    })
+    await waitFor(() => {
+      expect(popup()).toBeNull()
+    })
+    expect(markdownOf(editor)).toBe(':tad')
+  })
+})
+
+/* ── D2 / AC#2 — an emoji is inserted as unicode ──────────────────────────── */
+
+describe('D2 — emoji insert as unicode, never as a shortcode', () => {
+  it('AC#2: `:tad` then Enter puts the character in the document and in body_md', async () => {
+    const { editor, surface } = mount()
+    await typeText(editor, ':tad')
+    expect(activeOption()?.textContent).toContain(':tada:')
+
+    fireEvent.keyDown(surface, { key: 'Enter' })
+    await waitFor(() => {
+      expect(popup()).toBeNull()
+    })
+
+    const body = markdownOf(editor)
+    expect(body).toContain('\u{1F389}')
+    expect(body).not.toContain(':tada:')
+    expect(body).not.toContain(':tad')
+    expect(editor.getText()).toBe('\u{1F389} ')
+  })
+
+  it("AC#3: the owner's `:side-eye:` resolves to the rolling-eyes glyph", async () => {
+    const { editor, surface } = mount()
+    await typeText(editor, ':side-eye')
+    expect(activeOption()?.textContent).toContain(':roll_eyes:')
+    fireEvent.keyDown(surface, { key: 'Enter' })
+    await waitFor(() => {
+      expect(popup()).toBeNull()
+    })
+    expect(markdownOf(editor)).toContain('\u{1F644}')
+  })
+
+  it('inserts mid-sentence without disturbing the text around it', async () => {
+    const { editor, surface } = mount()
+    await typeText(editor, 'shipped :tad')
+    fireEvent.keyDown(surface, { key: 'Enter' })
+    await waitFor(() => {
+      expect(popup()).toBeNull()
+    })
+    expect(markdownOf(editor)).toBe('shipped \u{1F389}')
+  })
+
+  it('Tab inserts too, and does not move focus out of the editor', async () => {
+    const { editor, surface } = mount()
+    await typeText(editor, ':roc')
+    fireEvent.keyDown(surface, { key: 'Tab' })
+    await settle()
+    expect(popup()).toBeNull()
+    expect(markdownOf(editor)).toContain('\u{1F680}')
+    expect(document.activeElement).toBe(surface)
+  })
+})
+
+/* ── D4 / AC#5 — the mention picker inserts a NODE ────────────────────────── */
+
+describe('D4 / D6 — the mention picker', () => {
+  it('AC#5: inserts a mention node that serializes to `@[Name](user:id)`', async () => {
+    const { editor, surface } = mount({ mentionItems: findPeople })
+    await typeText(editor, 'ping @ar')
+    expect(optionLabels()).toHaveLength(1)
+    expect(optionLabels()[0]).toContain('Arun Mehta')
+
+    fireEvent.keyDown(surface, { key: 'Enter' })
+    await waitFor(() => {
+      expect(popup()).toBeNull()
+    })
+    expect(markdownOf(editor)).toBe('ping @[Arun Mehta](user:usr_2)')
+  })
+
+  it('carries the scheme through, so a task mention is not a user mention', async () => {
+    const { editor, surface } = mount({ mentionItems: findPeople })
+    await typeText(editor, '@au')
+    fireEvent.keyDown(surface, { key: 'Enter' })
+    await waitFor(() => {
+      expect(popup()).toBeNull()
+    })
+    expect(markdownOf(editor)).toBe('@[Audit the flighting](task_item:tit_9)')
+  })
+
+  it('never opens when the host supplies no list — the picker is not a data layer', async () => {
+    const { editor } = mount()
+    await typeText(editor, '@ar')
+    expect(popup()).toBeNull()
+  })
+
+  it('names the kind of each row, so a person and a task are distinguishable', async () => {
+    const { editor } = mount({ mentionItems: findPeople })
+    await typeText(editor, '@a')
+    expect(optionLabels().at(-1)).toContain('Task')
+    expect(optionLabels()[0]).toContain('Person')
+  })
+})
+
+/* ── D5 / AC#6 — the listbox that never takes focus ───────────────────────── */
+
+describe('D5 — a listbox the editor owns and never gives focus to', () => {
+  it('AC#6: the editor keeps DOM focus through open, arrow, insert and escape', async () => {
+    const { editor, surface } = mount({ mentionItems: findPeople, onCancel: () => undefined })
+    act(() => {
+      editor.commands.focus()
+    })
+    await settle()
+    expect(document.activeElement).toBe(surface)
+
+    await typeText(editor, '@a')
+    expect(popup()).not.toBeNull()
+    expect(document.activeElement).toBe(surface)
+
+    fireEvent.keyDown(surface, { key: 'ArrowDown' })
+    expect(document.activeElement).toBe(surface)
+
+    fireEvent.keyDown(surface, { key: 'Escape' })
+    await waitFor(() => {
+      expect(popup()).toBeNull()
+    })
+    expect(document.activeElement).toBe(surface)
+
+    await typeText(editor, ' @ar')
+    fireEvent.keyDown(surface, { key: 'Enter' })
+    await settle()
+    expect(popup()).toBeNull()
+    expect(document.activeElement).toBe(surface)
+  })
+
+  it('AC#6: `aria-activedescendant` on the EDITOR tracks the active option', async () => {
+    const { editor, surface } = mount({ mentionItems: findPeople })
+    expect(surface.getAttribute('aria-activedescendant')).toBeNull()
+
+    await typeText(editor, '@a')
+    const list = popup()
+    expect(list).not.toBeNull()
+    expect(surface.getAttribute('aria-controls')).toBe(list?.id)
+
+    const options = within(list as HTMLElement).getAllByRole('option')
+    expect(surface.getAttribute('aria-activedescendant')).toBe(options[0]?.id)
+
+    fireEvent.keyDown(surface, { key: 'ArrowDown' })
+    await waitFor(() => {
+      expect(surface.getAttribute('aria-activedescendant')).toBe(options[1]?.id)
+    })
+  })
+
+  it('the arrows move the active option and wrap at both ends', async () => {
+    const { editor, surface } = mount({ mentionItems: findPeople })
+    await typeText(editor, '@a')
+    expect(activeOption()?.textContent).toContain('Ann Baptiste')
+
+    fireEvent.keyDown(surface, { key: 'ArrowUp' })
+    await waitFor(() => {
+      expect(activeOption()?.textContent).toContain('Audit the flighting')
+    })
+
+    fireEvent.keyDown(surface, { key: 'ArrowDown' })
+    await waitFor(() => {
+      expect(activeOption()?.textContent).toContain('Ann Baptiste')
+    })
+  })
+
+  it('no option is ever focusable, and a click inserts without stealing focus', async () => {
+    const { editor, surface } = mount({ mentionItems: findPeople })
+    act(() => {
+      editor.commands.focus()
+    })
+    await typeText(editor, '@a')
+    const options = within(popup() as HTMLElement).getAllByRole('option')
+    for (const option of options) expect(option.getAttribute('tabindex')).toBe('-1')
+
+    const third = options[2]
+    if (third === undefined) throw new Error('expected a third option')
+    // A real pointer fires mousedown first; the option prevents it precisely so
+    // the contenteditable keeps the caret AND the focus.
+    fireEvent.mouseDown(third)
+    fireEvent.click(third)
+    await settle()
+    expect(popup()).toBeNull()
+    expect(markdownOf(editor)).toBe('@[Ada Okoye](user:usr_3)')
+    expect(document.activeElement).toBe(surface)
+  })
+
+  it('a hover makes an option active without inserting it', async () => {
+    const { editor } = mount({ mentionItems: findPeople })
+    await typeText(editor, '@a')
+    const options = within(popup() as HTMLElement).getAllByRole('option')
+    const second = options[1]
+    if (second === undefined) throw new Error('expected a second option')
+    fireEvent.mouseEnter(second)
+    await waitFor(() => {
+      expect(activeOption()).toBe(second)
+    })
+    expect(markdownOf(editor)).toBe('@a')
+  })
+
+  it('announces the emoji itself, and hides a mention initial that only repeats the name', async () => {
+    const emoji = mount()
+    await typeText(emoji.editor, ':tad')
+    const emojiOption = within(popup() as HTMLElement).getAllByRole('option')[0]
+    const emojiGlyph = emojiOption?.firstElementChild
+    // The glyph IS the thing being chosen: hiding it would leave a
+    // screen-reader user picking between shortcodes blind.
+    expect(emojiGlyph?.getAttribute('aria-hidden')).toBeNull()
+    expect(emojiGlyph?.textContent).toBe('\u{1F389}')
+
+    cleanup()
+
+    const mention = mount({ mentionItems: findPeople })
+    await typeText(mention.editor, '@a')
+    const mentionOption = within(popup() as HTMLElement).getAllByRole('option')[0]
+    const mentionGlyph = mentionOption?.firstElementChild
+    // The initial is the label's own first letter — decoration.
+    expect(mentionGlyph?.getAttribute('aria-hidden')).toBe('true')
+    expect(mentionOption?.textContent).toContain('Ann Baptiste')
+  })
+
+  it('says the popup opened, once — a textbox cannot carry aria-expanded', async () => {
+    const announce = vi.fn()
+    const { editor } = mount({ mentionItems: findPeople, announce })
+    await typeText(editor, '@a')
+    expect(announce).toHaveBeenCalledTimes(1)
+    expect(announce.mock.calls[0]?.[0]).toContain('4 mention suggestions')
+
+    // Filtering is not a second announcement: a count that re-speaks on every
+    // letter is worse than no count at all.
+    await typeText(editor, 'r')
+    expect(announce).toHaveBeenCalledTimes(1)
+  })
+
+  it('drops the aria wiring the moment the popup closes', async () => {
+    const { editor, surface } = mount({ mentionItems: findPeople })
+    await typeText(editor, '@a')
+    expect(surface.getAttribute('aria-activedescendant')).not.toBeNull()
+    fireEvent.keyDown(surface, { key: 'Escape' })
+    await waitFor(() => {
+      expect(surface.getAttribute('aria-activedescendant')).toBeNull()
+    })
+    expect(surface.getAttribute('aria-controls')).toBeNull()
+  })
+})
+
+/* ── D9 / AC#7 — Escape's second slot ─────────────────────────────────────── */
+
+describe('AC#7 — Escape closes the popup and does not cancel the reply', () => {
+  it('takes the second slot: popup first, reply composer only once nothing is open', async () => {
+    const onCancel = vi.fn()
+    const { editor, surface } = mount({ mentionItems: findPeople, onCancel })
+
+    await typeText(editor, '@a')
+    expect(popup()).not.toBeNull()
+
+    fireEvent.keyDown(surface, { key: 'Escape' })
+    await waitFor(() => {
+      expect(popup()).toBeNull()
+    })
+    expect(onCancel).not.toHaveBeenCalled()
+    // Nothing was inserted, and the text the user typed is untouched.
+    expect(markdownOf(editor)).toBe('@a')
+
+    fireEvent.keyDown(surface, { key: 'Escape' })
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('stays closed after Escape rather than springing back on the next keystroke', async () => {
+    const { editor, surface } = mount({ mentionItems: findPeople })
+    await typeText(editor, '@a')
+    fireEvent.keyDown(surface, { key: 'Escape' })
+    await waitFor(() => {
+      expect(popup()).toBeNull()
+    })
+    await typeText(editor, 'n')
+    expect(popup()).toBeNull()
+  })
+
+  it('the emoji popup takes the same slot', async () => {
+    const onCancel = vi.fn()
+    const { editor, surface } = mount({ onCancel })
+    await typeText(editor, ':tad')
+    expect(popup()).not.toBeNull()
+    fireEvent.keyDown(surface, { key: 'Escape' })
+    await waitFor(() => {
+      expect(popup()).toBeNull()
+    })
+    expect(onCancel).not.toHaveBeenCalled()
+    expect(markdownOf(editor)).toBe(':tad')
+  })
+})
+
+/* ── D1 — one popup, two configurations ───────────────────────────────────── */
+
+describe('D1 — one popup, two configurations', () => {
+  it('never shows two listboxes, whichever trigger is live', async () => {
+    const { editor } = mount({ mentionItems: findPeople })
+    await typeText(editor, '@a')
+    expect(screen.getAllByRole('listbox')).toHaveLength(1)
+    await typeText(editor, ' :tad')
+    expect(screen.getAllByRole('listbox')).toHaveLength(1)
+    expect(popup()?.getAttribute('aria-label')).toBe('Emoji')
+  })
+
+  it('labels itself for each trigger', async () => {
+    const { editor } = mount({ mentionItems: findPeople })
+    await typeText(editor, '@a')
+    expect(popup()?.getAttribute('aria-label')).toBe('Mention someone')
+  })
+})
+
+/* ── D6 — the seam a host actually reaches ────────────────────────────────── */
+
+describe('D6 — the host seam, on the surface a host renders', () => {
+  const NOW = Date.UTC(2026, 8, 7, 12, 0, 0)
+
+  /** The composer <Thread> renders, once the lazy rich one has replaced the plain one. */
+  async function richSurface(): Promise<HTMLElement> {
+    await waitFor(() => {
+      expect(
+        screen.getByRole('textbox', { name: 'Add a comment' }).getAttribute('contenteditable'),
+      ).toBe('true')
+    })
+    return screen.getByRole('textbox', { name: 'Add a comment' })
+  }
+
+  it('reaches the rich composer inside <Thread>, not only the impl the tests mount', async () => {
+    // The picker is only worth having where people write. Every test above
+    // drives `RichThreadComposerImpl` directly, which would happily pass with
+    // the prop unwired between `<Thread>` and the composer it renders.
+    render(
+      <Thread comments={[]} now={NOW} onSubmit={() => undefined} composer="rich" mentionItems={findPeople} />,
+    )
+    // The composer mounts plain and swaps to the lazy rich one, so the element
+    // has to be re-queried after the swap rather than captured before it.
+    const box = await richSurface()
+    fireEvent.focus(box)
+    await pasteText(box, '@a')
+    expect(popup()).not.toBeNull()
+    expect(optionLabels()).toHaveLength(4)
+  })
+
+  it('opens nothing when the host supplies no directory', async () => {
+    render(<Thread comments={[]} now={NOW} onSubmit={() => undefined} composer="rich" />)
+    await pasteText(await richSurface(), '@a')
+    expect(popup()).toBeNull()
+  })
+})