@linktr.ee/messaging-react 4.4.7 → 4.5.0-rc-1788297811

package/src/components/MessageAttachment/MessageAttachment.test.tsx

@@ -1,4 +1,9 @@
 import React from 'react'
+import {
+  ChatProvider,
+  WithAudioPlayback,
+  type ChatContextValue,
+} from 'stream-chat-react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import {
@@ -6,12 +11,28 @@ import {
   renderWithProviders,
   screen,
   within,
+  userEvent,
 } from '../../test/utils'
 
 import { triggerDownload } from './_shared/triggerDownload'
 
 import MessageAttachment, { bubbleGroupPositionFromStream } from '.'
 
+// `MessageAttachment.Audio`'s playback comes from `stream-chat-react`'s
+// pooled `AudioPlayer`, which `<Channel>` mounts in production. Mounting
+// the pool directly is the same contract without needing a channel that
+// can `watch()`. The player reads only `client` off the chat context —
+// optional-chained, for error notifications — so a stub is enough; its
+// presence is what stops `useChatContext` warning.
+const AUDIO_CHAT_CONTEXT = {} as ChatContextValue
+
+const renderAudio = (ui: React.ReactElement) =>
+  renderWithProviders(
+    <ChatProvider value={AUDIO_CHAT_CONTEXT}>
+      <WithAudioPlayback>{ui}</WithAudioPlayback>
+    </ChatProvider>
+  )
+
 vi.mock('./_shared/triggerDownload', () => ({
   triggerDownload: vi.fn(() => Promise.resolve()),
 }))
@@ -38,7 +59,8 @@ const expectViewerOpen = (testId: string) => {
 }
 
 describe('MessageAttachment.Image', () => {
-  it('optimizes Linktree-hosted composer previews without changing the viewer source', () => {
+  it('optimizes Linktree-hosted composer previews without changing the viewer source', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Image.Composer
         src="https://assets.linktr.ee/photo.jpg"
@@ -51,8 +73,9 @@ describe('MessageAttachment.Image', () => {
       'https://assets.linktr.ee/photo.jpg?io=true&size=messaging-attachment-v1_0'
     )
 
-    fireEvent.click(screen.getByLabelText('Open image'))
+    await user.click(screen.getByLabelText('Open image'))
     const viewer = expectViewerOpen('image-viewer')
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('img')?.getAttribute('src')).toBe(
       'https://assets.linktr.ee/photo.jpg'
     )
@@ -69,12 +92,14 @@ describe('MessageAttachment.Image', () => {
     const bubble = screen.getByTestId('image-attachment')
     expect(bubble).toBeInTheDocument()
     expect(screen.getByText('Here is the image')).toBeInTheDocument()
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(bubble.querySelector('img')?.getAttribute('src')).toBe(
       'https://cdn.example.com/photo.jpg'
     )
   })
 
-  it('opens the ImageViewer lightbox when clicked', () => {
+  it('opens the ImageViewer lightbox when clicked', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Image.Received
         src="https://cdn.example.com/photo.jpg"
@@ -85,7 +110,7 @@ describe('MessageAttachment.Image', () => {
 
     expectViewerClosed('image-viewer')
 
-    fireEvent.click(screen.getByLabelText('Open image 1 of 1'))
+    await user.click(screen.getByLabelText('Open image 1 of 1'))
 
     expectViewerOpen('image-viewer')
   })
@@ -121,7 +146,8 @@ describe('MessageAttachment.Image', () => {
     expect(screen.getByLabelText('Open image 3 of 3')).toBeInTheDocument()
   })
 
-  it('renders a download button inside the image viewer', () => {
+  it('renders a download button inside the image viewer', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Image.Received
         src="https://cdn.example.com/photo.jpg"
@@ -129,30 +155,33 @@ describe('MessageAttachment.Image', () => {
         filename="photo.jpg"
       />
     )
-    fireEvent.click(screen.getByLabelText('Open image 1 of 1'))
+    await user.click(screen.getByLabelText('Open image 1 of 1'))
     const viewer = expectViewerOpen('image-viewer')
     // The viewer chrome carries its own download action — separate
     // from any sibling download button on the bubble surface — so the
     // user can grab the image without leaving the lightbox.
     expect(
+      // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
       viewer.querySelector('button[aria-label="Download photo.jpg"]')
     ).not.toBeNull()
   })
 
-  it('does not render carousel nav controls for a single image', () => {
+  it('does not render carousel nav controls for a single image', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Image.Received
         src="https://cdn.example.com/photo.jpg"
         filename="photo.jpg"
       />
     )
-    fireEvent.click(screen.getByLabelText('Open image 1 of 1'))
+    await user.click(screen.getByLabelText('Open image 1 of 1'))
     expectViewerOpen('image-viewer')
     expect(screen.queryByLabelText('Next image')).toBeNull()
     expect(screen.queryByLabelText('Previous image')).toBeNull()
   })
 
-  it('renders the stacked images as a carousel inside the viewer', () => {
+  it('renders the stacked images as a carousel inside the viewer', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Image.Sent
         filename="album"
@@ -165,8 +194,9 @@ describe('MessageAttachment.Image', () => {
     )
 
     // Open the second tile — the viewer should land on image 2.
-    fireEvent.click(screen.getByLabelText('Open image 2 of 3'))
+    await user.click(screen.getByLabelText('Open image 2 of 3'))
     const viewer = expectViewerOpen('image-viewer')
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('img')?.getAttribute('src')).toBe(
       'https://cdn.example.com/b.jpg'
     )
@@ -174,26 +204,30 @@ describe('MessageAttachment.Image', () => {
     expect(viewer.textContent).toContain('2 / 3')
 
     // Next button advances by one.
-    fireEvent.click(screen.getByLabelText('Next image'))
+    await user.click(screen.getByLabelText('Next image'))
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('img')?.getAttribute('src')).toBe(
       'https://cdn.example.com/c.jpg'
     )
     expect(viewer.textContent).toContain('3 / 3')
 
     // Next wraps from the last item back to the first.
-    fireEvent.click(screen.getByLabelText('Next image'))
+    await user.click(screen.getByLabelText('Next image'))
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('img')?.getAttribute('src')).toBe(
       'https://cdn.example.com/a.jpg'
     )
 
     // Previous wraps from the first item to the last.
-    fireEvent.click(screen.getByLabelText('Previous image'))
+    await user.click(screen.getByLabelText('Previous image'))
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('img')?.getAttribute('src')).toBe(
       'https://cdn.example.com/c.jpg'
     )
   })
 
-  it('uses ArrowRight / ArrowLeft to navigate stacked images', () => {
+  it('uses ArrowRight / ArrowLeft to navigate stacked images', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Image.Sent
         items={[
@@ -202,18 +236,21 @@ describe('MessageAttachment.Image', () => {
         ]}
       />
     )
-    fireEvent.click(screen.getByLabelText('Open image 1 of 2'))
+    await user.click(screen.getByLabelText('Open image 1 of 2'))
     const viewer = expectViewerOpen('image-viewer')
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('img')?.getAttribute('src')).toBe(
       'https://cdn.example.com/a.jpg'
     )
 
     fireEvent.keyDown(window, { key: 'ArrowRight' })
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('img')?.getAttribute('src')).toBe(
       'https://cdn.example.com/b.jpg'
     )
 
     fireEvent.keyDown(window, { key: 'ArrowLeft' })
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('img')?.getAttribute('src')).toBe(
       'https://cdn.example.com/a.jpg'
     )
@@ -242,6 +279,7 @@ describe('MessageAttachment.Image single-image aspect ratio', () => {
   const WIDTH_CAP_WEB_PX = 326
 
   const mediaBox = (label: string) =>
+    // eslint-disable-next-line testing-library/no-node-access -- the wrapper class is a deliberate DOM contract with no semantic query.
     screen.getByLabelText(label).parentElement as HTMLElement
 
   /** The `min(var(--…), Npx)` term the height cap contributes. */
@@ -319,6 +357,7 @@ describe('MessageAttachment.Image single-image aspect ratio', () => {
 
     // Scoped to the tile: the always-mounted `ImageViewer` renders a
     // second `<img>` for the same source.
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     const img = mediaBox('Open image 1 of 1').querySelector(
       'img'
     ) as HTMLImageElement
@@ -405,7 +444,8 @@ describe('MessageAttachment.Pdf', () => {
     expect(screen.getByText('PDF · 379.5 KB')).toBeInTheDocument()
   })
 
-  it('opens the PdfViewer when clicked', () => {
+  it('opens the PdfViewer when clicked', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Pdf.Sent
         src="https://cdn.example.com/doc.pdf"
@@ -413,11 +453,12 @@ describe('MessageAttachment.Pdf', () => {
       />
     )
     expectViewerClosed('pdf-viewer')
-    fireEvent.click(screen.getByLabelText('Open doc.pdf'))
+    await user.click(screen.getByLabelText('Open doc.pdf'))
     expectViewerOpen('pdf-viewer')
   })
 
-  it('forwards the onClick handler before opening the viewer', () => {
+  it('forwards the onClick handler before opening the viewer', async () => {
+    const user = userEvent.setup()
     const onClick = vi.fn()
     renderWithProviders(
       <MessageAttachment.Pdf.Received
@@ -426,7 +467,7 @@ describe('MessageAttachment.Pdf', () => {
         onClick={onClick}
       />
     )
-    fireEvent.click(screen.getByLabelText('Open doc.pdf'))
+    await user.click(screen.getByLabelText('Open doc.pdf'))
     expect(onClick).toHaveBeenCalledTimes(1)
   })
 
@@ -457,7 +498,8 @@ describe('MessageAttachment.Pdf', () => {
     expect(screen.getByLabelText('Open c.pdf')).toBeInTheDocument()
   })
 
-  it('opens the viewer on the activated row in a stacked PDF bubble', () => {
+  it('opens the viewer on the activated row in a stacked PDF bubble', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Pdf.Received
         items={[
@@ -467,7 +509,7 @@ describe('MessageAttachment.Pdf', () => {
       />
     )
     expectViewerClosed('pdf-viewer')
-    fireEvent.click(screen.getByLabelText('Open b.pdf'))
+    await user.click(screen.getByLabelText('Open b.pdf'))
     const viewer = expectViewerOpen('pdf-viewer')
     // The active filename surfaces as the dialog's accessible name —
     // the lightbox chrome is intentionally just close + carousel chrome
@@ -479,7 +521,8 @@ describe('MessageAttachment.Pdf', () => {
     expect(viewer.textContent).toContain('2 / 2')
   })
 
-  it('navigates between stacked PDFs via the carousel controls', () => {
+  it('navigates between stacked PDFs via the carousel controls', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Pdf.Received
         items={[
@@ -489,18 +532,18 @@ describe('MessageAttachment.Pdf', () => {
         ]}
       />
     )
-    fireEvent.click(screen.getByLabelText('Open a.pdf'))
+    await user.click(screen.getByLabelText('Open a.pdf'))
     const viewer = expectViewerOpen('pdf-viewer')
     expect(viewer.getAttribute('aria-label')).toBe('a.pdf')
 
-    fireEvent.click(screen.getByLabelText('Next document'))
+    await user.click(screen.getByLabelText('Next document'))
     expect(viewer.getAttribute('aria-label')).toBe('b.pdf')
 
-    fireEvent.click(screen.getByLabelText('Next document'))
+    await user.click(screen.getByLabelText('Next document'))
     expect(viewer.getAttribute('aria-label')).toBe('c.pdf')
 
     // Wraps back to the start.
-    fireEvent.click(screen.getByLabelText('Next document'))
+    await user.click(screen.getByLabelText('Next document'))
     expect(viewer.getAttribute('aria-label')).toBe('a.pdf')
   })
 
@@ -537,7 +580,8 @@ describe('MessageAttachment.Pdf', () => {
     expect(screen.getByLabelText('Download c.pdf')).toBeInTheDocument()
   })
 
-  it('does not open the viewer when the Download button is clicked', () => {
+  it('does not open the viewer when the Download button is clicked', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Pdf.Sent
         src="https://cdn.example.com/notes.pdf"
@@ -545,7 +589,7 @@ describe('MessageAttachment.Pdf', () => {
       />
     )
     expectViewerClosed('pdf-viewer')
-    fireEvent.click(screen.getByLabelText('Download notes.pdf'))
+    await user.click(screen.getByLabelText('Download notes.pdf'))
     // Download should fire on its own without bubbling up to the row
     // activation that opens the viewer.
     expectViewerClosed('pdf-viewer')
@@ -563,7 +607,8 @@ describe('MessageAttachment.Pdf', () => {
     expect(screen.getByLabelText('Dismiss attachment')).toBeInTheDocument()
   })
 
-  it('does not crash when items shrinks after the viewer opens (P1 regression)', () => {
+  it('does not crash when items shrinks after the viewer opens (P1 regression)', async () => {
+    const user = userEvent.setup()
     // Regression test for the PR #151 P1 reviewer finding:
     // `viewerIndex` was dereferenced directly against `resolvedItems`,
     // so a re-render with fewer items than the open index would crash
@@ -578,7 +623,7 @@ describe('MessageAttachment.Pdf', () => {
         ]}
       />
     )
-    fireEvent.click(screen.getByLabelText('Open c.pdf'))
+    await user.click(screen.getByLabelText('Open c.pdf'))
     expectViewerOpen('pdf-viewer')
 
     expect(() =>
@@ -599,7 +644,8 @@ describe('MessageAttachment.Pdf', () => {
     )
   })
 
-  it('does not open the viewer when onClick returns false', () => {
+  it('does not open the viewer when onClick returns false', async () => {
+    const user = userEvent.setup()
     const onClick = vi.fn(() => false as const)
     renderWithProviders(
       <MessageAttachment.Pdf.Received
@@ -608,7 +654,7 @@ describe('MessageAttachment.Pdf', () => {
         onClick={onClick}
       />
     )
-    fireEvent.click(screen.getByLabelText('Open doc.pdf'))
+    await user.click(screen.getByLabelText('Open doc.pdf'))
     expect(onClick).toHaveBeenCalledTimes(1)
     expectViewerClosed('pdf-viewer')
   })
@@ -669,7 +715,8 @@ describe('MessageAttachment.File', () => {
     expect(screen.getByLabelText('Download c.pdf')).toBeInTheDocument()
   })
 
-  it('downloads the file when the row is clicked and onClick allows it', () => {
+  it('downloads the file when the row is clicked and onClick allows it', async () => {
+    const user = userEvent.setup()
     const onClick = vi.fn()
     renderWithProviders(
       <MessageAttachment.File.Received
@@ -678,7 +725,7 @@ describe('MessageAttachment.File', () => {
         onClick={onClick}
       />
     )
-    fireEvent.click(screen.getByLabelText('Download workout-plan.zip'))
+    await user.click(screen.getByLabelText('Download workout-plan.zip'))
     expect(onClick).toHaveBeenCalledWith(0)
     expect(mockTriggerDownload).toHaveBeenCalledTimes(1)
     expect(mockTriggerDownload).toHaveBeenCalledWith(
@@ -687,7 +734,8 @@ describe('MessageAttachment.File', () => {
     )
   })
 
-  it('lets onClick cancel the automatic download by returning false (P2 regression)', () => {
+  it('lets onClick cancel the automatic download by returning false (P2 regression)', async () => {
+    const user = userEvent.setup()
     // Regression test for the PR #151 P2 reviewer finding:
     // the docs advertised `onClick` as a hook for intercepting the
     // download (e.g. confirmation modal), but the handler used to fire
@@ -701,12 +749,13 @@ describe('MessageAttachment.File', () => {
         onClick={onClick}
       />
     )
-    fireEvent.click(screen.getByLabelText('Download workout-plan.zip'))
+    await user.click(screen.getByLabelText('Download workout-plan.zip'))
     expect(onClick).toHaveBeenCalledTimes(1)
     expect(mockTriggerDownload).not.toHaveBeenCalled()
   })
 
-  it('still downloads when onClick returns void', () => {
+  it('still downloads when onClick returns void', async () => {
+    const user = userEvent.setup()
     // Belt-and-braces: void / undefined returns must not be confused
     // with `false` (the only cancellation sentinel).
     const onClick = vi.fn(() => undefined)
@@ -717,61 +766,190 @@ describe('MessageAttachment.File', () => {
         onClick={onClick}
       />
     )
-    fireEvent.click(screen.getByLabelText('Download workout-plan.zip'))
+    await user.click(screen.getByLabelText('Download workout-plan.zip'))
     expect(mockTriggerDownload).toHaveBeenCalledTimes(1)
   })
 })
 
 describe('MessageAttachment.Audio', () => {
-  it('renders the native audio player only (no title, no extra download)', () => {
-    renderWithProviders(
+  // 12 samples so the resample path is exercised on the way to the
+  // design's 35 bars.
+  const WAVEFORM = [
+    0.1, 0.8, 0.65, 0.2, 0.3, 0.45, 0.5, 0.7, 1, 0.85, 0.4, 0.15,
+  ]
+
+  it('renders the waveform card: bars, play toggle, duration and seek', () => {
+    renderAudio(
       <MessageAttachment.Audio.Sent
         src="https://cdn.example.com/song.mp3"
         mimeType="audio/mpeg"
         filename="song.mp3"
+        durationSeconds={12}
+        waveformData={WAVEFORM}
       />
     )
-    const bubble = screen.getByTestId('audio-attachment')
-    expect(bubble.querySelector('audio')).not.toBeNull()
-    // No filename title — the native `<audio>` element doesn't expose
-    // a title slot, so we render just the player.
-    expect(screen.queryByText('song.mp3')).toBeNull()
-    // Native player handles its own download in the kebab menu, so
-    // no extra Download button should be rendered.
-    expect(screen.queryByRole('button', { name: /download/i })).toBeNull()
+
+    expect(screen.getAllByTestId('amplitude-bar')).toHaveLength(35)
+    expect(
+      screen.getByRole('button', { name: 'Play audio — song.mp3' })
+    ).toBeInTheDocument()
+    expect(screen.getByText('00:12')).toBeInTheDocument()
+
+    const seek = screen.getByRole('slider', { name: 'Seek audio — song.mp3' })
+    expect(seek).toHaveAttribute('aria-valuetext', '00:00 of 00:12')
+    expect(seek).toHaveValue('0')
+
+    // The bars duplicate what the slider already announces, so they
+    // must stay out of the accessibility tree — otherwise they read as
+    // 35 unnamed nodes and (in Stream's own version of this widget) as
+    // an unnamed `progressbar`.
+    const track = screen.getByTestId('audio-waveform-track')
+    expect(track).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('renders the full bar count as a flat placeholder when no waveform exists', () => {
+    // The total fallback: a decode failure, an unsupported codec, a
+    // re-staged zero-byte placeholder, or anything sent before
+    // `waveform_data` was persisted. Passing `[]` straight through
+    // would render no bars at all, so the card must supply its own
+    // all-zero row — the card's silhouette has to be unchanged.
+    renderAudio(
+      <MessageAttachment.Audio.Received src="https://cdn.example.com/legacy.mp3" />
+    )
+
+    const bars = screen.getAllByTestId('amplitude-bar')
+    expect(bars).toHaveLength(35)
+    bars.forEach((bar) => {
+      expect(bar).not.toHaveClass('mes-audio-wave__bar--played')
+    })
+  })
+
+  it.each([3, 12, 35, 200])(
+    'resamples a %i-sample waveform to the rendered bar count',
+    (sampleCount) => {
+      const data = Array.from({ length: sampleCount }, (_, i) =>
+        Math.abs(Math.sin(i))
+      )
+      renderAudio(
+        <MessageAttachment.Audio.Sent
+          src="https://cdn.example.com/song.mp3"
+          waveformData={data}
+        />
+      )
+      expect(screen.getAllByTestId('amplitude-bar')).toHaveLength(35)
+    }
+  )
+
+  it('shows an unknown duration without collapsing the slot', () => {
+    renderAudio(
+      <MessageAttachment.Audio.Sent src="https://cdn.example.com/legacy.mp3" />
+    )
+
+    expect(screen.getByText('--:--')).toBeInTheDocument()
+    expect(screen.getByRole('slider', { name: 'Seek audio' })).toHaveAttribute(
+      'aria-valuetext',
+      '00:00 of --:--'
+    )
   })
 
-  it('shows an inline dismiss button next to the player on Composer state', () => {
+  it('removes the draft from the composer trailing action', async () => {
+    const user = userEvent.setup()
+    // There is no product-owned overflow menu on audio attachments in
+    // production, so the design's trailing control carries forward the
+    // one action each surface already had: Remove in the composer…
     const onDismiss = vi.fn()
-    renderWithProviders(
+    renderAudio(
       <MessageAttachment.Audio.Composer
         src="https://cdn.example.com/song.mp3"
+        filename="song.mp3"
         onDismiss={onDismiss}
       />
     )
-    const dismiss = screen.getByLabelText('Dismiss attachment')
-    expect(dismiss).toBeInTheDocument()
-    fireEvent.click(dismiss)
+
+    expect(
+      screen.queryByRole('button', { name: /download/i })
+    ).not.toBeInTheDocument()
+    await user.click(screen.getByRole('button', { name: 'Remove attachment' }))
     expect(onDismiss).toHaveBeenCalledTimes(1)
   })
 
-  it('renders one native player per item for stacked audio', () => {
-    renderWithProviders(
+  it('downloads from the sent trailing action', async () => {
+    const user = userEvent.setup()
+    // …and Download once sent, preserving the capability the native
+    // `<audio controls>` kebab used to provide.
+    renderAudio(
+      <MessageAttachment.Audio.Sent
+        src="https://cdn.example.com/song.mp3"
+        filename="song.mp3"
+      />
+    )
+
+    await user.click(
+      screen.getByRole('button', { name: 'Download audio — song.mp3' })
+    )
+    expect(mockTriggerDownload).toHaveBeenCalledWith(
+      'https://cdn.example.com/song.mp3',
+      'song.mp3'
+    )
+  })
+
+  it('renders one waveform row per item for stacked audio', () => {
+    renderAudio(
       <MessageAttachment.Audio.Sent
         items={[
-          { src: 'https://cdn.example.com/a.mp3', mimeType: 'audio/mpeg' },
-          { src: 'https://cdn.example.com/b.mp3', mimeType: 'audio/mpeg' },
-          { src: 'https://cdn.example.com/c.mp3', mimeType: 'audio/mpeg' },
+          { src: 'https://cdn.example.com/a.mp3', durationSeconds: 12 },
+          { src: 'https://cdn.example.com/b.mp3', durationSeconds: 30 },
+          { src: 'https://cdn.example.com/c.mp3', durationSeconds: 65 },
         ]}
       />
     )
-    const bubble = screen.getByTestId('audio-attachment')
-    expect(bubble.querySelectorAll('audio')).toHaveLength(3)
+
+    expect(screen.getAllByTestId('audio-attachment-row')).toHaveLength(3)
+    expect(screen.getByText('01:05')).toBeInTheDocument()
+  })
+
+  it('disables playback for a MIME type the browser cannot play, but keeps the download', () => {
+    // `canPlayType` gates playback, and clicking play on an unplayable
+    // track is a no-op inside the player anyway — so the control says
+    // so. The file must still be retrievable.
+    renderAudio(
+      <MessageAttachment.Audio.Received
+        src="https://cdn.example.com/master.flac"
+        mimeType="audio/flac"
+        filename="master.flac"
+      />
+    )
+
+    expect(screen.getByRole('button', { name: /^Play audio/ })).toBeDisabled()
+    expect(screen.getByRole('slider', { name: /^Seek audio/ })).toBeDisabled()
+    expect(
+      screen.getByRole('button', { name: /^Download audio/ })
+    ).toBeEnabled()
+  })
+
+  it('still renders the card without the audio-playback provider', () => {
+    // The pooled player lives on `<Channel>`. Outside one the card must
+    // degrade to an inert card rather than rendering nothing — a blank
+    // bubble is undiagnosable, and it would silently break every
+    // consumer that mounts an attachment outside a channel.
+    renderWithProviders(
+      <MessageAttachment.Audio.Sent
+        src="https://cdn.example.com/song.mp3"
+        durationSeconds={12}
+        waveformData={WAVEFORM}
+      />
+    )
+
+    expect(screen.getByTestId('audio-attachment')).toBeInTheDocument()
+    expect(screen.getAllByTestId('amplitude-bar')).toHaveLength(35)
+    expect(screen.getByText('00:12')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /^Play audio/ })).toBeDisabled()
   })
 })
 
 describe('MessageAttachment.Video', () => {
-  it('opens the VideoViewer when clicked', () => {
+  it('opens the VideoViewer when clicked', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Video.Received
         src="https://cdn.example.com/clip.mp4"
@@ -781,13 +959,14 @@ describe('MessageAttachment.Video', () => {
       />
     )
     expectViewerClosed('video-viewer')
-    fireEvent.click(screen.getByLabelText('Play video 1 of 1'))
+    await user.click(screen.getByLabelText('Play video 1 of 1'))
     expectViewerOpen('video-viewer')
     // Single-item viewer has no carousel chrome.
     expect(screen.queryByLabelText('Next video')).toBeNull()
   })
 
-  it('navigates between stacked videos via the carousel controls', () => {
+  it('navigates between stacked videos via the carousel controls', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Video.Sent
         filename="clip"
@@ -805,13 +984,15 @@ describe('MessageAttachment.Video', () => {
         ]}
       />
     )
-    fireEvent.click(screen.getByLabelText('Play video 1 of 2'))
+    await user.click(screen.getByLabelText('Play video 1 of 2'))
     const viewer = expectViewerOpen('video-viewer')
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('video')?.getAttribute('src')).toBe(
       'https://cdn.example.com/a.mp4'
     )
 
-    fireEvent.click(screen.getByLabelText('Next video'))
+    await user.click(screen.getByLabelText('Next video'))
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('video')?.getAttribute('src')).toBe(
       'https://cdn.example.com/b.mp4'
     )
@@ -841,11 +1022,13 @@ describe('MessageAttachment.Video overflow', () => {
     expect(screen.queryByLabelText('Play video 5 of 9')).toBeNull()
   })
 
-  it('opens the viewer on the fourth video from the overflow tile and pages to the ninth', () => {
+  it('opens the viewer on the fourth video from the overflow tile and pages to the ninth', async () => {
+    const user = userEvent.setup()
     renderWithProviders(<MessageAttachment.Video.Sent items={NINE_VIDEOS} />)
 
-    fireEvent.click(screen.getByLabelText('Play video 4 of 9'))
+    await user.click(screen.getByLabelText('Play video 4 of 9'))
     const viewer = expectViewerOpen('video-viewer')
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('video')?.getAttribute('src')).toBe(
       'https://cdn.example.com/3.mp4'
     )
@@ -854,8 +1037,9 @@ describe('MessageAttachment.Video overflow', () => {
 
     // The carousel spans all nine, not just the four the grid drew.
     for (let i = 0; i < 5; i += 1) {
-      fireEvent.click(screen.getByLabelText('Next video'))
+      await user.click(screen.getByLabelText('Next video'))
     }
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(viewer.querySelector('video')?.getAttribute('src')).toBe(
       'https://cdn.example.com/8.mp4'
     )
@@ -867,7 +1051,9 @@ describe('MessageAttachment.Video overflow', () => {
 
     const tiles = screen.getAllByRole('button', { name: /^Play video/ })
     // The badge is the only `svg` a poster tile renders.
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(tiles[0].querySelector('svg')).not.toBeNull()
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(tiles[3].querySelector('svg')).toBeNull()
   })
 })
@@ -878,6 +1064,7 @@ describe('MessageAttachment.Video single-card aspect', () => {
   // jsdom never decodes an `<img>`, so `naturalWidth` stays 0 and `load`
   // never fires on its own — stub the intrinsic size and fire it.
   const loadPosterAt = (naturalWidth: number, naturalHeight: number) => {
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     const poster = screen.getByTestId('video-attachment').querySelector('img')
     if (!poster) throw new Error('no poster rendered')
     Object.defineProperty(poster, 'naturalWidth', {
@@ -892,6 +1079,7 @@ describe('MessageAttachment.Video single-card aspect', () => {
   }
 
   const mediaAspect = () =>
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     screen.getByTestId('video-attachment').querySelector<HTMLElement>('[style]')
       ?.style.aspectRatio
 
@@ -1054,23 +1242,25 @@ describe('MessageAttachment.Video single-card aspect', () => {
 })
 
 describe('ViewerShell focus management', () => {
-  it('moves focus into the dialog when a viewer opens', () => {
+  it('moves focus into the dialog when a viewer opens', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Pdf.Received
         src="https://cdn.example.com/doc.pdf"
         filename="doc.pdf"
       />
     )
-    fireEvent.click(screen.getByLabelText('Open doc.pdf'))
+    await user.click(screen.getByLabelText('Open doc.pdf'))
 
     // The close button is the primary focus target in the viewer
     // toolbar — keyboard users should land on it on open so Escape
     // / Tab work without an extra click.
     const close = screen.getByLabelText('Close viewer')
-    expect(document.activeElement).toBe(close)
+    expect(close).toHaveFocus()
   })
 
-  it('restores focus to the opener when the viewer closes', () => {
+  it('restores focus to the opener when the viewer closes', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Pdf.Received
         src="https://cdn.example.com/doc.pdf"
@@ -1079,18 +1269,18 @@ describe('ViewerShell focus management', () => {
     )
     const opener = screen.getByLabelText('Open doc.pdf')
     opener.focus()
-    expect(document.activeElement).toBe(opener)
+    expect(opener).toHaveFocus()
 
-    fireEvent.click(opener)
+    await user.click(opener)
     expectViewerOpen('pdf-viewer')
 
-    fireEvent.click(screen.getByLabelText('Close viewer'))
+    await user.click(screen.getByLabelText('Close viewer'))
 
     // After close, focus should hop back to whatever was focused
     // before the viewer mounted (the row's Open button), and the
     // dialog should no longer carry the `[open]` attribute.
     expectViewerClosed('pdf-viewer')
-    expect(document.activeElement).toBe(opener)
+    expect(opener).toHaveFocus()
   })
 })
 
@@ -1103,6 +1293,7 @@ describe('MessageAttachment lazy-loading defaults', () => {
           alt="Photo"
         />
       )
+      // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
       const img = screen.getByTestId('image-attachment').querySelector('img')
       expect(img?.getAttribute('loading')).toBe('lazy')
       expect(img?.getAttribute('decoding')).toBe('async')
@@ -1116,6 +1307,7 @@ describe('MessageAttachment lazy-loading defaults', () => {
           loading="eager"
         />
       )
+      // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
       const img = screen.getByTestId('image-attachment').querySelector('img')
       expect(img?.getAttribute('loading')).toBe('eager')
       expect(img?.getAttribute('decoding')).toBe('async')
@@ -1135,13 +1327,15 @@ describe('MessageAttachment lazy-loading defaults', () => {
         />
       )
       const [first, second] = Array.from(
+        // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
         screen.getByTestId('image-attachment').querySelectorAll('img')
       )
       expect(first?.getAttribute('loading')).toBe('eager')
       expect(second?.getAttribute('loading')).toBe('lazy')
     })
 
-    it('does not mount the viewer `<img>` while the lightbox is closed', () => {
+    it('does not mount the viewer `<img>` while the lightbox is closed', async () => {
+      const user = userEvent.setup()
       renderWithProviders(
         <MessageAttachment.Image.Sent
           src="https://cdn.example.com/photo.jpg"
@@ -1159,7 +1353,7 @@ describe('MessageAttachment lazy-loading defaults', () => {
         })
       ).toHaveLength(0)
 
-      fireEvent.click(screen.getByLabelText('Open image 1 of 1'))
+      await user.click(screen.getByLabelText('Open image 1 of 1'))
       expect(
         within(screen.getByTestId('image-viewer')).getByRole('img', {
           hidden: true,
@@ -1177,6 +1371,7 @@ describe('MessageAttachment lazy-loading defaults', () => {
           mimeType="video/mp4"
         />
       )
+      // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
       const poster = screen.getByTestId('video-attachment').querySelector('img')
       expect(poster?.getAttribute('src')).toBe(
         'https://cdn.example.com/poster.jpg'
@@ -1185,7 +1380,8 @@ describe('MessageAttachment lazy-loading defaults', () => {
       expect(poster?.getAttribute('decoding')).toBe('async')
     })
 
-    it('opens the viewer with `<video preload="metadata">` for the active item', () => {
+    it('opens the viewer with `<video preload="metadata">` for the active item', async () => {
+      const user = userEvent.setup()
       renderWithProviders(
         <MessageAttachment.Video.Sent
           src="https://cdn.example.com/clip.mp4"
@@ -1194,7 +1390,8 @@ describe('MessageAttachment lazy-loading defaults', () => {
           filename="clip.mp4"
         />
       )
-      fireEvent.click(screen.getByLabelText('Play video 1 of 1'))
+      await user.click(screen.getByLabelText('Play video 1 of 1'))
+      // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
       const video = screen.getByTestId('video-viewer').querySelector('video')
       expect(video?.getAttribute('preload')).toBe('metadata')
     })
@@ -1213,64 +1410,12 @@ describe('MessageAttachment lazy-loading defaults', () => {
         />
       )
       const bubble = screen.getByTestId('video-attachment')
+      // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
       expect(bubble.querySelectorAll('video')).toHaveLength(0)
+      // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
       expect(bubble.querySelectorAll('img')).toHaveLength(4)
     })
   })
-
-  describe('Audio', () => {
-    it('defaults a single-track bubble to preload="metadata"', () => {
-      renderWithProviders(
-        <MessageAttachment.Audio.Received
-          src="https://cdn.example.com/song.mp3"
-          mimeType="audio/mpeg"
-        />
-      )
-      const audio = screen
-        .getByTestId('audio-attachment')
-        .querySelector('audio')
-      expect(audio?.getAttribute('preload')).toBe('metadata')
-    })
-
-    it('defaults a stacked (3-track) bubble to preload="none" on every player', () => {
-      renderWithProviders(
-        <MessageAttachment.Audio.Sent
-          items={[
-            { src: 'https://cdn.example.com/a.mp3', mimeType: 'audio/mpeg' },
-            { src: 'https://cdn.example.com/b.mp3', mimeType: 'audio/mpeg' },
-            { src: 'https://cdn.example.com/c.mp3', mimeType: 'audio/mpeg' },
-          ]}
-        />
-      )
-      const audios = Array.from(
-        screen.getByTestId('audio-attachment').querySelectorAll('audio')
-      )
-      expect(audios).toHaveLength(3)
-      audios.forEach((audio) => {
-        expect(audio.getAttribute('preload')).toBe('none')
-      })
-    })
-
-    it('honors a per-track AudioItem.preload override', () => {
-      renderWithProviders(
-        <MessageAttachment.Audio.Sent
-          items={[
-            { src: 'https://cdn.example.com/a.mp3', mimeType: 'audio/mpeg' },
-            {
-              src: 'https://cdn.example.com/b.mp3',
-              mimeType: 'audio/mpeg',
-              preload: 'metadata',
-            },
-          ]}
-        />
-      )
-      const audios = Array.from(
-        screen.getByTestId('audio-attachment').querySelectorAll('audio')
-      )
-      expect(audios[0]?.getAttribute('preload')).toBe('none')
-      expect(audios[1]?.getAttribute('preload')).toBe('metadata')
-    })
-  })
 })
 
 describe('bubbleGroupPositionFromStream', () => {