@adatechnology/conversations-ui 0.8.0 → 0.10.0

package/src/participant/participantAudioTranscriptionDom.test.tsx

@@ -0,0 +1,198 @@
+import { act, useState } from 'react'
+
+import type { ParticipantTranscription } from '@adatechnology/conversation-contracts'
+import { afterAll, afterEach, beforeAll, describe, expect, it } from 'bun:test'
+
+import { setupDom, type DomHarness } from '../domHarness.test-helper'
+import { ParticipantAudioTranscription } from './ParticipantAudioTranscription'
+import { ParticipantCopyAnnouncer, ParticipantThreadLive } from './ParticipantCopyAnnouncer'
+import { DEFAULT_PARTICIPANT_AUDIO_LABELS } from './participantAudioLabels'
+
+let harness: DomHarness
+let container: HTMLElement
+let setTranscription: (next: ParticipantTranscription | undefined) => void = () => undefined
+let overflow = { scrollHeight: 100, clientHeight: 100 }
+let prototype: Record<string, unknown> = {}
+let originals: Record<string, PropertyDescriptor | undefined> = {}
+
+const READY: ParticipantTranscription = { status: 'ready', text: 'Chego em dez minutos.', language: 'pt', generatedAt: '2026-10-01T12:01:00.000Z' }
+
+beforeAll(async () => {
+  harness = await setupDom()
+  prototype = HTMLElement.prototype as unknown as Record<string, unknown>
+  originals = {
+    scrollHeight: Object.getOwnPropertyDescriptor(prototype, 'scrollHeight'),
+    clientHeight: Object.getOwnPropertyDescriptor(prototype, 'clientHeight'),
+  }
+  Object.defineProperty(prototype, 'scrollHeight', { configurable: true, get: () => overflow.scrollHeight })
+  Object.defineProperty(prototype, 'clientHeight', { configurable: true, get: () => overflow.clientHeight })
+})
+
+afterAll(() => {
+  for (const [name, descriptor] of Object.entries(originals)) {
+    if (descriptor) Object.defineProperty(prototype, name, descriptor)
+    else delete prototype[name]
+  }
+  harness.teardown()
+})
+
+afterEach(() => {
+  overflow = { scrollHeight: 100, clientHeight: 100 }
+})
+
+function Harness({ initial, attachmentId = 'att-1' }: { initial: ParticipantTranscription | undefined; attachmentId?: string }) {
+  const [transcription, update] = useState(initial)
+  setTranscription = update
+  return (
+    <ParticipantCopyAnnouncer>
+      <ParticipantThreadLive notice="" />
+      <ParticipantAudioTranscription attachmentId={attachmentId} transcription={transcription} labels={DEFAULT_PARTICIPANT_AUDIO_LABELS} />
+    </ParticipantCopyAnnouncer>
+  )
+}
+
+function mount(initial: ParticipantTranscription | undefined, attachmentId?: string): void {
+  container = harness.mount(<Harness initial={initial} {...(attachmentId === undefined ? {} : { attachmentId })} />).container
+}
+
+function liveText(): string {
+  return container.querySelector('[role="status"]')?.textContent ?? ''
+}
+
+function change(next: ParticipantTranscription | undefined): void {
+  act(() => setTranscription(next))
+}
+
+describe('announcement through the existing live region', () => {
+  it('announces "Transcription ready" once on the observed pending to ready change', () => {
+    mount({ status: 'pending' })
+    expect(liveText()).toBe('')
+    change(READY)
+    expect(liveText()).toBe('Transcription ready')
+    expect(container.querySelectorAll('[aria-live]')).toHaveLength(1)
+  })
+
+  it('does not announce a transcription that is already ready at the first render', () => {
+    mount(READY)
+    expect(liveText()).toBe('')
+  })
+
+  it('does not announce again on a re-render that stays ready, nor for failed or empty transitions', () => {
+    mount({ status: 'pending' })
+    change(READY)
+    act(() => undefined)
+    const announced = liveText()
+    change({ ...READY, text: 'Outra coisa' })
+    expect(liveText()).toBe(announced)
+
+    mount({ status: 'pending' })
+    change({ status: 'failed' })
+    expect(liveText()).toBe('')
+  })
+
+  it('does not announce the full text', () => {
+    mount({ status: 'pending' })
+    change(READY)
+    expect(liveText()).not.toContain('dez minutos')
+  })
+})
+
+describe('states', () => {
+  it('pending shows the discreet notice only', () => {
+    mount({ status: 'pending' })
+    expect(container.querySelector('.cv-p-transcription--pending')?.textContent).toBe('Transcribing…')
+  })
+
+  it('ready keeps the machine notice always next to the text, notice read first', () => {
+    mount(READY)
+    const text = container.querySelector('.cv-p-transcription__text')
+    const notice = container.querySelector('.cv-p-transcription__notice')
+    expect(text?.textContent).toBe('Chego em dez minutos.')
+    expect(text?.getAttribute('lang')).toBe('pt')
+    expect(notice?.textContent).toBe('Transcription generated by machine')
+    expect(text?.hasAttribute('aria-describedby')).toBe(false)
+    expect(notice?.hasAttribute('id')).toBe(false)
+    const order = Array.from(container.querySelector('.cv-p-transcription')?.children ?? [])
+    expect(order.indexOf(notice as Element)).toBeLessThan(order.indexOf(text as Element))
+  })
+
+  it('empty text shows only the empty message and the notice', () => {
+    mount({ status: 'ready', text: '', generatedAt: READY.status === 'ready' ? READY.generatedAt : '' })
+    expect(container.querySelector('.cv-p-transcription__empty')?.textContent).toBe('Nothing was said in the audio')
+    expect(container.querySelector('.cv-p-transcription__notice')).not.toBeNull()
+    expect(container.querySelector('.cv-p-transcription__text')).toBeNull()
+  })
+
+  it('too_long computes the minutes from the field and is not an alarm', () => {
+    mount({ status: 'failed', reason: 'too_long', maxDurationMs: 600_000 })
+    const block = container.querySelector('.cv-p-transcription--too-long')
+    expect(block?.textContent).toBe('Transcription only for audios shorter than 10 minutes')
+    expect(block?.getAttribute('role')).toBeNull()
+    change({ status: 'failed', reason: 'too_long', maxDurationMs: 300_000 })
+    expect(container.querySelector('.cv-p-transcription--too-long')?.textContent).toContain('shorter than 5 minutes')
+  })
+
+  it('plain failed, too_long without the limit, a limit without reason, disabled and absent draw nothing', () => {
+    for (const transcription of [
+      { status: 'failed' },
+      { status: 'failed', reason: 'too_long' },
+      { status: 'failed', maxDurationMs: 600_000 },
+      { status: 'failed', reason: 'too_long', maxDurationMs: 30_000 },
+      { status: 'disabled' },
+      undefined,
+    ] as (ParticipantTranscription | undefined)[]) {
+      mount(transcription)
+      expect(container.querySelector('.cv-p-transcription')).toBeNull()
+      expect(container.textContent).not.toMatch(/error|fail/i)
+    }
+  })
+})
+
+describe('malformed data from a host that did not validate', () => {
+  it('draws only the player area (nothing) and never throws', () => {
+    for (const transcription of [
+      { status: 'ready', text: { nested: 'object' } },
+      { status: 'ready', text: 42 },
+      { status: 'ready' },
+      { status: 'weird', text: 'x' },
+      { status: 'failed', reason: 'too_long', maxDurationMs: '600000' },
+    ] as unknown as ParticipantTranscription[]) {
+      mount(transcription)
+      expect(container.querySelector('.cv-p-transcription')).toBeNull()
+    }
+  })
+})
+
+describe('collapse', () => {
+  const LONG: ParticipantTranscription = { status: 'ready', text: 'x '.repeat(500), generatedAt: '2026-10-01T12:01:00.000Z' }
+
+  it('shows no button when the text fits', () => {
+    mount(LONG)
+    expect(container.querySelector('.cv-p-transcription__toggle')).toBeNull()
+  })
+
+  it('measures the overflow, then expands and collapses with aria-expanded', () => {
+    overflow = { scrollHeight: 200, clientHeight: 100 }
+    mount(LONG)
+    const toggle = container.querySelector<HTMLButtonElement>('.cv-p-transcription__toggle')
+    expect(toggle?.textContent).toBe('Show all')
+    expect(toggle?.getAttribute('aria-expanded')).toBe('false')
+    expect(container.querySelector('.cv-p-transcription__text')?.textContent).toBe(LONG.text)
+    act(() => toggle?.click())
+    const expanded = container.querySelector<HTMLButtonElement>('.cv-p-transcription__toggle')
+    expect(expanded?.textContent).toBe('Show less')
+    expect(expanded?.getAttribute('aria-expanded')).toBe('true')
+    act(() => expanded?.click())
+    expect(container.querySelector('.cv-p-transcription__toggle')?.getAttribute('aria-expanded')).toBe('false')
+  })
+})
+
+describe('the transcribed text never leaves the paragraph', () => {
+  it('is in no title, data-* attribute or tooltip', () => {
+    mount(READY)
+    const attributes = Array.from(container.querySelectorAll('*')).flatMap((element) => Array.from(element.attributes))
+    for (const attribute of attributes) {
+      if (attribute.name === 'title' || attribute.name.startsWith('data-')) expect(attribute.value).not.toContain('dez minutos')
+    }
+  })
+})

package/src/participant/participantComposerAudioDom.test.tsx

@@ -0,0 +1,185 @@
+import { act, useState } from 'react'
+
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, jest, mock } from 'bun:test'
+
+import { setupDom, type DomHarness } from '../domHarness.test-helper'
+import { ConversationThread } from './ConversationThread'
+import { ParticipantComposer, type ParticipantComposerProps } from './ParticipantComposer'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { installFakeRecording, type FakeRecordingControls } from './participantRecorderFakes.test-helper'
+
+let harness: DomHarness
+let fakes: FakeRecordingControls
+let container: HTMLElement
+let sentAudio: File[]
+let draftTouches: string[]
+let captureEvents: boolean[]
+
+beforeAll(async () => {
+  harness = await setupDom()
+})
+
+afterAll(() => harness.teardown())
+
+beforeEach(() => {
+  jest.useFakeTimers()
+  fakes = installFakeRecording()
+  URL.createObjectURL = () => 'blob:fake-recording'
+  URL.revokeObjectURL = () => undefined
+  sentAudio = []
+  draftTouches = []
+  captureEvents = []
+})
+
+afterEach(() => {
+  jest.useRealTimers()
+  fakes.restore()
+})
+
+function mountComposer(overrides: Partial<ParticipantComposerProps> = {}): void {
+  const props: ParticipantComposerProps = {
+    value: '',
+    onChange: () => draftTouches.push('onChange'),
+    files: [],
+    onFilesChange: () => draftTouches.push('onFilesChange'),
+    onSend: () => draftTouches.push('onSend'),
+    labels: DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS,
+    audioRecording: { onCaptureChange: (isCapturing) => captureEvents.push(isCapturing) },
+    onSendAudio: (file) => sentAudio.push(file),
+    ...overrides,
+  }
+  container = harness.mount(<ParticipantComposer {...props} />).container
+}
+
+function find(selector: string): HTMLButtonElement {
+  const element = container.querySelector<HTMLButtonElement>(selector)
+  if (!element) throw new Error(`missing ${selector}`)
+  return element
+}
+
+async function press(selector: string): Promise<void> {
+  await act(async () => find(selector).click())
+}
+
+async function recordFor(milliseconds: number): Promise<void> {
+  await press('.cv-p-composer__record')
+  await act(async () => jest.advanceTimersByTime(milliseconds))
+  await press('.cv-p-recorder__stop')
+}
+
+describe('record, review and send from the composer', () => {
+  it('sends exactly one audio File and never touches the text draft or the attached files', async () => {
+    mountComposer()
+    await recordFor(1500)
+    expect(find('.cv-p-recorder--review')).toBeTruthy()
+    await press('.cv-p-recorder__send')
+
+    expect(sentAudio).toHaveLength(1)
+    expect(sentAudio[0]?.name).toMatch(/^audio-\d{8}-\d{6}\.ogg$/)
+    expect(sentAudio[0]?.type).toBe('audio/ogg')
+    expect(draftTouches).toEqual([])
+    expect(container.querySelector('.cv-p-composer__record')).not.toBeNull()
+  })
+
+  it('shows the recorder row in place of the field while recording, with the error above the row when idle', async () => {
+    mountComposer()
+    await press('.cv-p-composer__record')
+    expect(container.querySelector('.cv-p-composer__input')).toBeNull()
+    expect(find('.cv-p-recorder[role="group"]')).toBeTruthy()
+    expect(container.querySelector('[role="timer"]')?.textContent).toBe('0:00 of 5:00')
+  })
+
+  // Guard held here: recorder.confirm() returns the File once, because statusRef leaves 'review' synchronously
+  // (the Set<File> of useParticipantSendAudio is pinned by its own test file).
+  it('turns two synchronous clicks on "Send audio" into one message', async () => {
+    mountComposer()
+    await recordFor(1500)
+    const sendButton = find('.cv-p-recorder__send')
+    await act(async () => {
+      sendButton.click()
+      sendButton.click()
+    })
+    expect(sentAudio).toHaveLength(1)
+  })
+
+  it('refuses an audio over the size ceiling before sending, with the message above the microphone', async () => {
+    mountComposer({ audioRecording: { maxSizeBytes: 1000 } })
+    await recordFor(1500)
+    expect(sentAudio).toHaveLength(0)
+    expect(container.querySelector('[role="alert"]')?.textContent).toBe(DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS.audioTooLarge)
+    expect(container.querySelector('.cv-p-composer__record')).not.toBeNull()
+  })
+
+  it('refuses an empty capture before sending', async () => {
+    fakes.chunkBytes = 0
+    mountComposer()
+    await recordFor(1500)
+    expect(sentAudio).toHaveLength(0)
+    expect(container.querySelector('[role="alert"]')?.textContent).toBe(DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS.audioEmpty)
+  })
+
+  it('keeps the microphone disabled together with the composer', async () => {
+    mountComposer({ disabled: true })
+    expect(find('.cv-p-composer__record').disabled).toBe(true)
+  })
+
+  it('disables "Send audio" in review when the conversation becomes disabled, and still allows discarding', async () => {
+    let setDisabled: (next: boolean) => void = () => undefined
+    function Wrapper() {
+      const [disabled, update] = useState(false)
+      setDisabled = update
+      return (
+        <ParticipantComposer
+          value=""
+          onChange={() => undefined}
+          files={[]}
+          onFilesChange={() => undefined}
+          onSend={() => undefined}
+          labels={DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS}
+          audioRecording={{}}
+          onSendAudio={(file) => sentAudio.push(file)}
+          disabled={disabled}
+        />
+      )
+    }
+    container = harness.mount(<Wrapper />).container
+    await recordFor(1500)
+    expect(find('.cv-p-recorder__send').disabled).toBe(false)
+    act(() => setDisabled(true))
+    expect(find('.cv-p-recorder__send').disabled).toBe(true)
+    expect(find('.cv-p-recorder__discard').disabled).toBe(false)
+  })
+
+  it('reports the capture to the host from the request until the audio is sent', async () => {
+    mountComposer()
+    await press('.cv-p-composer__record')
+    expect(captureEvents).toEqual([true])
+    await act(async () => jest.advanceTimersByTime(1500))
+    await press('.cv-p-recorder__stop')
+    expect(captureEvents).toEqual([true])
+    await press('.cv-p-recorder__send')
+    expect(captureEvents).toEqual([true, false])
+  })
+})
+
+describe('the whole thread: the audio leaves as its own message through the attachment path', () => {
+  // Same guard as above (statusRef of confirm), now observed end to end at api.sendMessage.
+  it('calls api.sendMessage once with one File and no text, even on two synchronous clicks', async () => {
+    const sendMessage = mock(async () => ({ outcome: 'queued' as const }))
+    const api = { fetchMessages: async () => [], sendMessage, resolveAttachmentUrl: async () => 'https://files.example/a' }
+    container = harness.mount(
+      <ConversationThread api={api} subject={{ subjectType: 'case', subjectId: '7' }} title="Case 7" audioRecording={{}} />,
+    ).container
+    await recordFor(1500)
+    const sendButton = find('.cv-p-recorder__send')
+    await act(async () => {
+      sendButton.click()
+      sendButton.click()
+    })
+
+    expect(sendMessage).toHaveBeenCalledTimes(1)
+    const [request] = sendMessage.mock.calls[0] as unknown as [{ text?: string; files?: File[] }]
+    expect(request.text).toBeUndefined()
+    expect(request.files).toHaveLength(1)
+  })
+})

package/src/participant/participantComposerAudioGolden.test.tsx

@@ -0,0 +1,68 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+import { afterEach, beforeAll, describe, expect, it } from 'bun:test'
+import type { ComponentType } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { ParticipantAudioRecorderView } from './ParticipantAudioRecorderView'
+import { ParticipantThread } from './ParticipantThread'
+import { buildThreadProps } from './participantGoldenScenarios.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { installFakeRecording } from './participantRecorderFakes.test-helper'
+
+function readGolden(name: string): string {
+  return readFileSync(join(import.meta.dir, 'test-fixtures', `${name}.golden.html`), 'utf8')
+}
+
+const Thread = ParticipantThread as unknown as ComponentType<Record<string, unknown>>
+
+function renderThreadWithMicrophone(): string {
+  const props = {
+    ...buildThreadProps(DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS),
+    draft: { value: '', onChange: () => undefined, files: [], onFilesChange: () => undefined },
+    audioRecording: {},
+    onSendAudio: () => undefined,
+  }
+  return renderToStaticMarkup(<Thread {...props} />)
+}
+
+describe('the real composer with the microphone (contract 2.2), not only the pure view', () => {
+  let restore: (() => void) | undefined
+
+  beforeAll(() => {
+    process.env.TZ = 'UTC'
+  })
+
+  afterEach(() => restore?.())
+
+  it('thread-composer-microphone-idle is byte-identical to its golden', () => {
+    restore = installFakeRecording().restore
+    const markup = renderThreadWithMicrophone()
+    expect(markup).toBe(readGolden('thread-composer-microphone-idle'))
+  })
+})
+
+describe('composer-audio-*: the pure recorder view (contract 2.2-2.3)', () => {
+  for (const state of ['idle', 'recording', 'review', 'denied'] as const) {
+    it(`composer-audio-${state} is byte-identical to its golden`, () => {
+      const markup = renderToStaticMarkup(
+        <ParticipantAudioRecorderView state={state} elapsedMs={12_000} labels={DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS} />,
+      )
+      expect(markup).toBe(readGolden(`composer-audio-${state}`))
+    })
+  }
+})
+
+describe('the microphone in the composer (contract 2.2)', () => {
+  let restore: (() => void) | undefined
+
+  afterEach(() => restore?.())
+
+  it('takes the place of send only with the prop, an empty field and a recording browser', () => {
+    restore = installFakeRecording().restore
+    const withProp = renderThreadWithMicrophone()
+    expect(withProp).toContain('cv-p-composer__record')
+    expect(withProp).not.toContain('cv-p-composer__send')
+  })
+})

package/src/participant/participantComposerAudioSsr.test.tsx

@@ -0,0 +1,74 @@
+import { afterEach, describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { ParticipantComposer, type ParticipantComposerProps } from './ParticipantComposer'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { installFakeRecording, type FakeRecordingControls } from './participantRecorderFakes.test-helper'
+
+const BASE: ParticipantComposerProps = {
+  value: '',
+  onChange: () => undefined,
+  files: [],
+  onFilesChange: () => undefined,
+  onSend: () => undefined,
+  labels: DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS,
+  audioRecording: {},
+  onSendAudio: () => undefined,
+}
+
+function render(overrides: Partial<ParticipantComposerProps> = {}): string {
+  return renderToStaticMarkup(<ParticipantComposer {...BASE} {...overrides} />)
+}
+
+describe('the microphone in the composer (contract 2.2)', () => {
+  let environment: FakeRecordingControls | undefined
+
+  afterEach(() => {
+    environment?.restore()
+    environment = undefined
+  })
+
+  it('takes the place of send with the prop, an empty field and a recording browser', () => {
+    environment = installFakeRecording()
+    const markup = render()
+    expect(markup).toContain('type="button" class="cv-p-button cv-p-button--primary cv-p-composer__record"')
+    expect(markup).not.toContain('cv-p-composer__send')
+  })
+
+  it('never appears without the prop', () => {
+    environment = installFakeRecording()
+    const markup = render({ audioRecording: undefined })
+    expect(markup).not.toContain('cv-p-composer__record')
+    expect(markup).toContain('cv-p-composer__send')
+  })
+
+  it('gives way to send when there is text or an attached file', () => {
+    environment = installFakeRecording()
+    for (const overrides of [{ value: 'oi' }, { files: [new File(['x'], 'a.txt')] }]) {
+      const markup = render(overrides)
+      expect(markup).not.toContain('cv-p-composer__record')
+      expect(markup).toContain('cv-p-composer__send')
+    }
+  })
+
+  it('stays off when the browser cannot record', () => {
+    expect(render()).not.toContain('cv-p-composer__record')
+  })
+
+  it('stays off on the portal channel: the channel only switches the microphone off', () => {
+    environment = installFakeRecording()
+    expect(render({ channel: 'portal' })).not.toContain('cv-p-composer__record')
+  })
+
+  it('stays off when the host accepts no audio type or gives no way to send it', () => {
+    environment = installFakeRecording()
+    expect(render({ acceptedTypes: ['image/*'] })).not.toContain('cv-p-composer__record')
+    expect(render({ acceptedTypes: ['audio/*'] })).toContain('cv-p-composer__record')
+    expect(render({ onSendAudio: undefined })).not.toContain('cv-p-composer__record')
+  })
+
+  it('is disabled together with the composer', () => {
+    environment = installFakeRecording()
+    expect(render({ disabled: true })).toMatch(/cv-p-composer__record"[^>]*disabled=""/)
+  })
+})

package/src/participant/participantFailedMenuDom.test.tsx

@@ -0,0 +1,154 @@
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it } from 'bun:test'
+import { act } from 'react'
+
+import { setupDom, pressKey, type DomHarness } from '../domHarness.test-helper'
+import { ParticipantFailedMenu } from './ParticipantFailedMenu'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS as LABELS } from './participantLabels'
+
+let harness: DomHarness
+
+beforeAll(async () => {
+  harness = await setupDom()
+})
+afterAll(() => harness.teardown())
+
+const noop = (): void => undefined
+
+function mountMenu() {
+  const tree = harness.mount(
+    <div className="cv-p-thread__scroll">
+      <div className="cv-p-bubble">
+        <ParticipantFailedMenu labels={LABELS} onEdit={noop} onDiscard={noop} />
+      </div>
+    </div>,
+  )
+  const trigger = tree.container.querySelector<HTMLButtonElement>('.cv-p-failed-menu__trigger')!
+  return { ...tree, trigger }
+}
+
+function click(element: Element): void {
+  act(() => element.dispatchEvent(new MouseEvent('click', { bubbles: true })))
+}
+
+function items(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll<HTMLElement>('[role="menuitem"]'))
+}
+
+describe('failed menu in a DOM', () => {
+  it('opens on click, names the menu by the trigger and focuses the first item', () => {
+    const { container, trigger } = mountMenu()
+    click(trigger)
+
+    const menu = container.querySelector('[role="menu"]')!
+    expect(trigger.getAttribute('aria-expanded')).toBe('true')
+    expect(menu.getAttribute('aria-labelledby')).toBe(trigger.id)
+    expect(document.activeElement).toBe(items(container)[0])
+    expect(items(container).every((item) => item.tabIndex === -1)).toBe(true)
+    expect(trigger.hasAttribute('data-cv-tooltip')).toBe(false)
+  })
+
+  it('ArrowUp on the trigger opens the menu on the last item', () => {
+    const { container, trigger } = mountMenu()
+    act(() => trigger.focus())
+    pressKey(trigger, 'ArrowUp')
+
+    expect(document.activeElement).toBe(items(container)[1])
+  })
+
+  it('Escape closes, gives the focus back to the trigger and does not reach the host', () => {
+    const { container, trigger } = mountMenu()
+    click(trigger)
+    let hostSawEscape = false
+    const hostListener = (): void => void (hostSawEscape = true)
+    document.addEventListener('keydown', hostListener)
+
+    pressKey(items(container)[0]!, 'Escape')
+    document.removeEventListener('keydown', hostListener)
+
+    expect(container.querySelector('[role="menu"]')).toBeNull()
+    expect(document.activeElement).toBe(trigger)
+    expect(hostSawEscape).toBe(false)
+  })
+
+  it('Tab closes the menu without pulling the focus back to the trigger', () => {
+    const { container, trigger } = mountMenu()
+    click(trigger)
+    pressKey(items(container)[0]!, 'Tab')
+
+    expect(container.querySelector('[role="menu"]')).toBeNull()
+    expect(document.activeElement).not.toBe(trigger)
+  })
+
+  it('closes on a pointer press outside and keeps open on one inside', () => {
+    const { container, trigger } = mountMenu()
+    click(trigger)
+    act(() => void items(container)[0]!.dispatchEvent(new Event('pointerdown', { bubbles: true })))
+    expect(container.querySelector('[role="menu"]')).not.toBeNull()
+
+    act(() => void document.body.dispatchEvent(new Event('pointerdown', { bubbles: true })))
+    expect(container.querySelector('[role="menu"]')).toBeNull()
+  })
+
+  it('removes its document listener when unmounted with the menu open', () => {
+    const added: string[] = []
+    const removed: string[] = []
+    const add = document.addEventListener.bind(document)
+    const remove = document.removeEventListener.bind(document)
+    document.addEventListener = ((type: string, ...rest: unknown[]) => {
+      added.push(type)
+      return (add as (...args: unknown[]) => void)(type, ...rest)
+    }) as typeof document.addEventListener
+    document.removeEventListener = ((type: string, ...rest: unknown[]) => {
+      removed.push(type)
+      return (remove as (...args: unknown[]) => void)(type, ...rest)
+    }) as typeof document.removeEventListener
+
+    const { unmount, trigger } = mountMenu()
+    click(trigger)
+    unmount()
+    document.addEventListener = add
+    document.removeEventListener = remove
+
+    expect(added.filter((type) => type === 'pointerdown')).toHaveLength(1)
+    expect(removed.filter((type) => type === 'pointerdown')).toHaveLength(1)
+    expect(() => document.body.dispatchEvent(new Event('pointerdown', { bubbles: true }))).not.toThrow()
+  })
+})
+
+describe('failed menu placement in a DOM', () => {
+  let original: typeof Element.prototype.getBoundingClientRect
+
+  beforeEach(() => {
+    original = Element.prototype.getBoundingClientRect
+  })
+  afterEach(() => {
+    Element.prototype.getBoundingClientRect = original
+  })
+
+  function stubLayout(bubbleTop: number): void {
+    Element.prototype.getBoundingClientRect = function (this: Element) {
+      const top = this.classList.contains('cv-p-thread__scroll') ? 100 : this.classList.contains('cv-p-bubble') ? bubbleTop : 0
+      const height = this.getAttribute('role') === 'menu' ? 90 : 20
+      return { top, bottom: top + height, left: 0, right: 0, width: 0, height, x: 0, y: top, toJSON: () => ({}) }
+    }
+  }
+
+  it('flips below when the bubble is the first of the conversation', () => {
+    stubLayout(108)
+    const { container, trigger } = mountMenu()
+    click(trigger)
+    Element.prototype.getBoundingClientRect = original
+
+    expect(container.querySelector('.cv-p-failed-menu__list--below')).not.toBeNull()
+  })
+
+  it('stays above when there is room', () => {
+    stubLayout(500)
+    const { container, trigger } = mountMenu()
+    click(trigger)
+    Element.prototype.getBoundingClientRect = original
+
+    expect(container.querySelector('[role="menu"]')).not.toBeNull()
+    expect(container.querySelector('.cv-p-failed-menu__list--below')).toBeNull()
+  })
+})