@linktr.ee/messaging-react 4.4.3 → 4.4.4-rc-1788190776

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.4.3",
+  "version": "4.4.4-rc-1788190776",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,8 +50,8 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "^2.6.0",
-    "@linktr.ee/messaging-taxonomy": "^0.11.0",
+    "@linktr.ee/messaging-core": "2.6.0-rc-1788190776",
+    "@linktr.ee/messaging-taxonomy": "0.11.0-rc-1788190776",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/AttachmentCard/MediaPlayer.test.tsx

@@ -30,7 +30,7 @@ describe('MediaPlayer', () => {
   })
 
   it('selects audio or video from the mime type and wires media props', () => {
-    const { container, rerender } = renderWithProviders(
+    const { rerender } = renderWithProviders(
       <MediaPlayer
         source={SOURCE}
         mimeType="audio/mpeg"
@@ -40,12 +40,11 @@ describe('MediaPlayer', () => {
       />
     )
 
-    const audio = container.querySelector('audio') as HTMLAudioElement
-    expect(audio).toBeInTheDocument()
+    const audio = screen.getByTestId('media-player-audio') as HTMLAudioElement
     expect(audio).toHaveAttribute('src', SOURCE)
     expect(audio.loop).toBe(true)
     expect(audio.muted).toBe(true)
-    expect(container.querySelector('video')).toBeNull()
+    expect(screen.queryByTestId('media-player-video')).not.toBeInTheDocument()
 
     rerender(
       <MediaPlayer
@@ -57,67 +56,61 @@ describe('MediaPlayer', () => {
       />
     )
 
-    const video = container.querySelector('video') as HTMLVideoElement
-    expect(video).toBeInTheDocument()
+    const video = screen.getByTestId('media-player-video') as HTMLVideoElement
     expect(video).toHaveAttribute('src', SOURCE)
     expect(video.loop).toBe(true)
     expect(video.muted).toBe(true)
     expect(video.playsInline).toBe(true)
-    expect(container.querySelector('audio')).toBeNull()
+    expect(screen.queryByTestId('media-player-audio')).not.toBeInTheDocument()
   })
 
   it('keeps an audio poster after canPlay but hides a video poster', () => {
-    const audio = renderWithProviders(
-      <MediaPlayer source={SOURCE} mimeType="audio/mpeg" poster={POSTER} />
-    )
-    const audioElement = audio.container.querySelector(
-      'audio'
-    ) as HTMLAudioElement
-    expect(audio.container.querySelectorAll('img')).toHaveLength(1)
-    fireEvent.canPlay(audioElement)
-    expect(audio.container.querySelectorAll('img')).toHaveLength(1)
-    audio.unmount()
-
-    const video = renderWithProviders(
-      <MediaPlayer source={SOURCE} mimeType="video/mp4" poster={POSTER} />
-    )
-    const videoElement = video.container.querySelector(
-      'video'
-    ) as HTMLVideoElement
-    expect(video.container.querySelectorAll('img')).toHaveLength(1)
-    fireEvent.canPlay(videoElement)
-    expect(video.container.querySelectorAll('img')).toHaveLength(0)
+    {
+      const view = renderWithProviders(
+        <MediaPlayer source={SOURCE} mimeType="audio/mpeg" poster={POSTER} />
+      )
+      expect(screen.getByTestId('media-player-poster')).toBeInTheDocument()
+      fireEvent.canPlay(screen.getByTestId('media-player-audio'))
+      expect(screen.getByTestId('media-player-poster')).toBeInTheDocument()
+      view.unmount()
+    }
+
+    {
+      renderWithProviders(
+        <MediaPlayer source={SOURCE} mimeType="video/mp4" poster={POSTER} />
+      )
+      expect(screen.getByTestId('media-player-poster')).toBeInTheDocument()
+      fireEvent.canPlay(screen.getByTestId('media-player-video'))
+      expect(
+        screen.queryByTestId('media-player-poster')
+      ).not.toBeInTheDocument()
+    }
   })
 
   it('uses a type icon as the initial placeholder when no poster is provided', async () => {
-    const { container } = renderWithProviders(
-      <MediaPlayer source={SOURCE} mimeType="video/mp4" />
-    )
-    const video = container.querySelector('video') as HTMLVideoElement
-    const placeholderIcon = () =>
-      Array.from(container.querySelectorAll('svg')).find((svg) =>
-        svg.classList.contains('size-12')
-      )
+    renderWithProviders(<MediaPlayer source={SOURCE} mimeType="video/mp4" />)
 
-    expect(placeholderIcon()).toBeInTheDocument()
-    fireEvent.canPlay(video)
-    await waitFor(() => expect(placeholderIcon()).toBeUndefined())
+    expect(screen.getByTestId('media-player-placeholder')).toBeInTheDocument()
+    fireEvent.canPlay(screen.getByTestId('media-player-video'))
+    await waitFor(() =>
+      expect(
+        screen.queryByTestId('media-player-placeholder')
+      ).not.toBeInTheDocument()
+    )
   })
 
   it('syncs controlled playback and calls play or pause imperatively', async () => {
     const play = vi.mocked(HTMLMediaElement.prototype.play)
     const pause = vi.mocked(HTMLMediaElement.prototype.pause)
-    const { container, rerender } = renderWithProviders(
+    const { rerender } = renderWithProviders(
       <MediaPlayer source={SOURCE} mimeType="video/mp4" playing={false} />
     )
-    const video = container.querySelector('video') as HTMLVideoElement
     expect(pause).toHaveBeenCalled()
 
     rerender(
       <MediaPlayer source={SOURCE} mimeType="video/mp4" playing={true} />
     )
     await waitFor(() => expect(play).toHaveBeenCalledWith())
-    expect(video).toBeInTheDocument()
 
     rerender(
       <MediaPlayer source={SOURCE} mimeType="video/mp4" playing={false} />
@@ -150,19 +143,15 @@ describe('MediaPlayer', () => {
 
   it('toggles from the container only with controls, while an override owns the click', async () => {
     const play = vi.mocked(HTMLMediaElement.prototype.play)
-    const { container, rerender } = renderWithProviders(
+    const { rerender } = renderWithProviders(
       <MediaPlayer source={SOURCE} mimeType="video/mp4" controls />
     )
-    const root = container.firstElementChild as HTMLElement
+    const root = screen.getByTestId('media-player')
 
     fireEvent.click(root)
-    await waitFor(() =>
-      expect(screen.getByRole('button', { name: 'Pause' })).toBeInTheDocument()
-    )
+    await screen.findByRole('button', { name: 'Pause' })
     fireEvent.click(root)
-    await waitFor(() =>
-      expect(screen.getByRole('button', { name: 'Play' })).toBeInTheDocument()
-    )
+    await screen.findByRole('button', { name: 'Play' })
     expect(play).toHaveBeenCalledTimes(1)
 
     const onContainerClick = vi.fn()
@@ -182,10 +171,10 @@ describe('MediaPlayer', () => {
   })
 
   it('handles Enter and Space but ignores other container keys and prevents defaults', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <MediaPlayer source={SOURCE} mimeType="video/mp4" controls />
     )
-    const root = container.firstElementChild as HTMLElement
+    const root = screen.getByTestId('media-player')
     const pause = () => screen.getByRole('button', { name: 'Pause' })
 
     const otherKey = new KeyboardEvent('keydown', {
@@ -217,22 +206,18 @@ describe('MediaPlayer', () => {
   })
 
   it('does not let the controls button bubble into the container toggle', async () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <MediaPlayer source={SOURCE} mimeType="video/mp4" controls />
     )
-    const button = screen.getByRole('button', { name: 'Play' })
 
-    fireEvent.click(button)
-    await waitFor(() =>
-      expect(screen.getByRole('button', { name: 'Pause' })).toBeInTheDocument()
-    )
-    expect(container.firstElementChild).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'Play' }))
+    await screen.findByRole('button', { name: 'Pause' })
   })
 
   it('shows buffering while loading and suppresses it after manual play is required', async () => {
     const play = vi.mocked(HTMLMediaElement.prototype.play)
     play.mockRejectedValueOnce(new Error('autoplay blocked'))
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <MediaPlayer
         source={SOURCE}
         mimeType="video/mp4"
@@ -240,42 +225,39 @@ describe('MediaPlayer', () => {
         controls={false}
       />
     )
-    const video = container.querySelector('video') as HTMLVideoElement
+    const video = screen.getByTestId('media-player-video')
     await screen.findByRole('button', { name: 'Play preview' })
 
     fireEvent.loadStart(video)
-    expect(container.querySelector('.animate-spin')).toBeNull()
+    expect(screen.queryByRole('status')).not.toBeInTheDocument()
 
     fireEvent.canPlay(video)
-    expect(container.querySelector('.animate-spin')).toBeNull()
+    expect(screen.queryByRole('status')).not.toBeInTheDocument()
   })
 
   it('shows and hides the buffering spinner around media readiness', () => {
-    const { container } = renderWithProviders(
-      <MediaPlayer source={SOURCE} mimeType="video/mp4" />
-    )
-    const video = container.querySelector('video') as HTMLVideoElement
+    renderWithProviders(<MediaPlayer source={SOURCE} mimeType="video/mp4" />)
+    const video = screen.getByTestId('media-player-video')
 
     fireEvent.loadStart(video)
-    expect(container.querySelector('.animate-spin')).toBeInTheDocument()
+    expect(screen.getByRole('status')).toBeInTheDocument()
     fireEvent.waiting(video)
-    expect(container.querySelector('.animate-spin')).toBeInTheDocument()
+    expect(screen.getByRole('status')).toBeInTheDocument()
     fireEvent.canPlay(video)
-    expect(container.querySelector('.animate-spin')).toBeNull()
+    expect(screen.queryByRole('status')).not.toBeInTheDocument()
   })
 
-  it('seeks with keyboard and pointer input and expands the scrubber on hover', () => {
-    const { container } = renderWithProviders(
+  it('seeks with keyboard and pointer input and reveals the scrubber thumb on hover', () => {
+    renderWithProviders(
       <MediaPlayer source={SOURCE} mimeType="video/mp4" controls showProgress />
     )
-    const video = container.querySelector('video') as HTMLVideoElement
+    const video = screen.getByTestId('media-player-video') as HTMLVideoElement
     Object.defineProperty(video, 'duration', {
       configurable: true,
       value: 100,
     })
     const slider = screen.getByRole('slider', { name: 'Playback position' })
-    const track = slider.firstElementChild as HTMLElement
-    const thumb = slider.lastElementChild as HTMLElement
+    const thumb = screen.getByTestId('media-player-scrubber-thumb')
     vi.spyOn(slider, 'getBoundingClientRect').mockReturnValue({
       left: 100,
       right: 300,
@@ -288,18 +270,15 @@ describe('MediaPlayer', () => {
       toJSON: () => ({}),
     })
 
-    expect(track).toHaveClass('h-1')
     expect(thumb).toHaveClass('scale-0', 'opacity-0')
     fireEvent.mouseEnter(slider)
-    expect(track).toHaveClass('h-1.5')
     expect(thumb).toHaveClass('scale-100', 'opacity-100')
     fireEvent.mouseLeave(slider)
-    expect(track).toHaveClass('h-1')
+    expect(thumb).toHaveClass('scale-0', 'opacity-0')
 
     fireEvent.mouseDown(slider, { clientX: 150 })
     expect(slider).toHaveAttribute('aria-valuenow', '25')
     expect(video.currentTime).toBe(25)
-    expect(track).toHaveClass('h-1.5')
     expect(thumb).toHaveClass('scale-100', 'opacity-100')
 
     fireEvent.mouseUp(window, { clientX: 150 })
@@ -310,7 +289,7 @@ describe('MediaPlayer', () => {
   })
 
   it('renders the progress-only track without controls when requested', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <MediaPlayer
         source={SOURCE}
         mimeType="video/mp4"
@@ -323,15 +302,13 @@ describe('MediaPlayer', () => {
       screen.getByRole('slider', { name: 'Playback position' })
     ).toBeInTheDocument()
     expect(screen.queryByRole('button', { name: 'Play' })).toBeNull()
-    expect(container.querySelectorAll('[role="slider"]')).toHaveLength(1)
+    expect(screen.getAllByRole('slider')).toHaveLength(1)
   })
 
   it('uses natural video dimensions after metadata and aspect-video before then', () => {
-    const { container } = renderWithProviders(
-      <MediaPlayer source={SOURCE} mimeType="video/mp4" />
-    )
-    const root = container.firstElementChild as HTMLElement
-    const video = container.querySelector('video') as HTMLVideoElement
+    renderWithProviders(<MediaPlayer source={SOURCE} mimeType="video/mp4" />)
+    const root = screen.getByTestId('media-player')
+    const video = screen.getByTestId('media-player-video') as HTMLVideoElement
     Object.defineProperties(video, {
       videoWidth: { configurable: true, value: 1920 },
       videoHeight: { configurable: true, value: 1080 },

package/src/components/AttachmentCard/MediaPlayer.tsx

@@ -196,6 +196,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
     <div
       role="button"
       tabIndex={0}
+      data-testid="media-player"
       className={`relative cursor-pointer overflow-hidden bg-black ${aspectClass}`}
       style={aspectStyle}
       onClick={(e) => {
@@ -222,11 +223,15 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
         <img
           src={poster}
           alt=""
+          data-testid="media-player-poster"
           className="absolute inset-0 h-full w-full object-cover"
         />
       )}
       {!poster && (sourceType === 'audio' || initialLoad) && (
-        <div className="absolute inset-0 flex items-center justify-center">
+        <div
+          data-testid="media-player-placeholder"
+          className="absolute inset-0 flex items-center justify-center"
+        >
           {renderTypeIcon(mimeType, {
             className: 'size-12 text-black/20',
             weight: 'regular',
@@ -238,6 +243,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
           <audio
             {...nativePlayerProps}
             ref={playerRef as React.RefObject<HTMLAudioElement>}
+            data-testid="media-player-audio"
             src={source}
             loop={loop}
             muted={muted}
@@ -261,6 +267,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
         ) : (
           <video
             ref={playerRef as React.RefObject<HTMLVideoElement>}
+            data-testid="media-player-video"
             src={source}
             loop={loop}
             muted={muted}
@@ -296,7 +303,11 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
       </div>
 
       {buffering && !manualPlayRequired && (
-        <div className="absolute inset-0 z-10 flex items-center justify-center">
+        <div
+          role="status"
+          aria-label="Loading media"
+          className="absolute inset-0 z-10 flex items-center justify-center"
+        >
           <CircleNotchIcon
             className="size-8 animate-spin text-white/80"
             weight="bold"
@@ -396,6 +407,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
               />
             </div>
             <div
+              data-testid="media-player-scrubber-thumb"
               className={`absolute size-3 -translate-x-1/2 rounded-full bg-white shadow transition-[opacity,transform] duration-200 ${scrubberHovered || seeking ? 'scale-100 opacity-100' : 'scale-0 opacity-0'}`}
               style={{ left: `${scrubberPercent}%` }}
             />

package/src/components/AttachmentCard/Thumbnail.test.tsx

@@ -147,69 +147,60 @@ describe('AttachmentThumbnail', () => {
   })
 
   it('renders a document icon placeholder without a thumbnail', () => {
-    const dark = renderWithProviders(
+    renderWithProviders(
       <AttachmentThumbnail
         mimeType="application/pdf"
         variant="dark"
         title="PDF"
       />
     )
-    const darkIcon = dark.container.querySelector('svg') as SVGElement
-    expect(darkIcon).toHaveClass('size-12', 'text-white/20')
-    expect(dark.container.firstElementChild).toHaveClass('bg-white/10')
-    dark.unmount()
-
-    const light = renderWithProviders(
-      <AttachmentThumbnail mimeType="application/pdf" variant="light" />
-    )
-    const lightIcon = light.container.querySelector('svg') as SVGElement
-    expect(lightIcon).toHaveClass('size-12', 'text-black/20')
-    expect(light.container.firstElementChild).toHaveClass('bg-black/5')
+    expect(screen.queryByRole('img')).toBeNull()
+    expect(screen.getByTestId('type-icon-pdf')).toBeInTheDocument()
   })
 
   it('renders the poster-only branch with variant-specific shell and alt fallback', () => {
-    const dark = renderWithProviders(
-      <AttachmentThumbnail
-        mimeType="image/jpeg"
-        thumbnailUrl={LINKTREE_THUMBNAIL}
-        title="Poster"
-        variant="dark"
-      />
-    )
-    const darkImage = screen.getByRole('img', { name: 'Poster' })
-    expect(darkImage).toHaveAttribute('src', OPTIMIZED_THUMBNAIL)
-    expect(dark.container.firstElementChild).toHaveClass(
-      'aspect-video',
-      'bg-white/10'
-    )
-    dark.unmount()
+    {
+      const view = renderWithProviders(
+        <AttachmentThumbnail
+          mimeType="image/jpeg"
+          thumbnailUrl={LINKTREE_THUMBNAIL}
+          title="Poster"
+          variant="dark"
+        />
+      )
+      const darkImage = screen.getByRole('img', { name: 'Poster' })
+      expect(darkImage).toHaveAttribute('src', OPTIMIZED_THUMBNAIL)
+      expect(view.container.firstElementChild).toHaveClass(
+        'aspect-video',
+        'bg-white/10'
+      )
+      view.unmount()
+    }
 
-    const light = renderWithProviders(
-      <AttachmentThumbnail
-        mimeType="image/jpeg"
-        thumbnailUrl="https://external.example/poster.jpg"
-        variant="light"
-      />
-    )
-    expect(screen.getByRole('img')).toHaveAttribute('alt', '')
-    expect(light.container.firstElementChild).toHaveClass(
-      'aspect-video',
-      'bg-black/5'
-    )
+    {
+      const view = renderWithProviders(
+        <AttachmentThumbnail
+          mimeType="image/jpeg"
+          thumbnailUrl="https://external.example/poster.jpg"
+          variant="light"
+        />
+      )
+      expect(screen.getByRole('img')).toHaveAttribute('alt', '')
+      expect(view.container.firstElementChild).toHaveClass(
+        'aspect-video',
+        'bg-black/5'
+      )
+    }
   })
 
   it('renders the empty branch with a light placeholder', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <AttachmentThumbnail
         mimeType="application/octet-stream"
         variant="light"
       />
     )
-    expect(container.querySelector('img')).toBeNull()
-    expect(container.querySelector('svg')).toHaveClass(
-      'size-12',
-      'text-black/20'
-    )
-    expect(container.firstElementChild).toHaveClass('bg-black/5')
+    expect(screen.queryByRole('img')).toBeNull()
+    expect(screen.getByTestId('type-icon-generic')).toBeInTheDocument()
   })
 })

package/src/components/AttachmentCard/index.test.tsx

@@ -8,33 +8,7 @@ import AttachmentCard from './index'
 const thumbnail = <div data-testid="thumbnail">thumbnail</div>
 
 describe('AttachmentCard', () => {
-  it('applies the dark and light root surfaces and type icon colors', () => {
-    const dark = renderWithProviders(
-      <AttachmentCard
-        variant="dark"
-        thumbnail={thumbnail}
-        mimeType="application/pdf"
-        title="Dark file"
-      />
-    )
-    expect(screen.getByText('Dark file')).toBeInTheDocument()
-    expect(dark.container.firstElementChild).toHaveClass('bg-[#1e2330]')
-    expect(dark.container.querySelector('svg')).toHaveClass('text-white/55')
-    dark.unmount()
-
-    const light = renderWithProviders(
-      <AttachmentCard
-        variant="light"
-        thumbnail={thumbnail}
-        mimeType="application/pdf"
-        title="Light file"
-      />
-    )
-    expect(light.container.firstElementChild).toHaveClass('bg-white')
-    expect(light.container.querySelector('svg')).toHaveClass('text-black/55')
-  })
-
-  it('uses the dark placeholder title and dims it when title is absent', () => {
+  it('renders the dark placeholder title when no title is supplied', () => {
     renderWithProviders(
       <AttachmentCard
         variant="dark"
@@ -43,7 +17,7 @@ describe('AttachmentCard', () => {
         placeholderTitle="Waiting for title"
       />
     )
-    expect(screen.getByText('Waiting for title')).toHaveClass('text-white/30')
+    expect(screen.getByText('Waiting for title')).toBeInTheDocument()
   })
 
   it('does not render a light title for missing or whitespace-only values', () => {
@@ -67,7 +41,7 @@ describe('AttachmentCard', () => {
     expect(screen.queryByText('   ')).toBeNull()
   })
 
-  it('uses an undimmed title class when a dark title is provided', () => {
+  it('renders the supplied dark title instead of the placeholder', () => {
     renderWithProviders(
       <AttachmentCard
         variant="dark"
@@ -76,8 +50,8 @@ describe('AttachmentCard', () => {
         title="Named file"
       />
     )
-    expect(screen.getByText('Named file')).toHaveClass('text-white')
-    expect(screen.getByText('Named file')).not.toHaveClass('text-white/30')
+    expect(screen.getByText('Named file')).toBeInTheDocument()
+    expect(screen.queryByText('Attachment title')).toBeNull()
   })
 
   it('renders detail only for non-empty values', () => {
@@ -105,7 +79,7 @@ describe('AttachmentCard', () => {
   })
 
   it('renders optional slots only when supplied', () => {
-    const { container } = renderWithProviders(
+    const view = renderWithProviders(
       <AttachmentCard
         variant="light"
         thumbnail={thumbnail}
@@ -118,21 +92,16 @@ describe('AttachmentCard', () => {
     )
     expect(screen.getByText('Ready')).toBeInTheDocument()
     expect(screen.getByRole('button', { name: 'Open' })).toBeInTheDocument()
-    expect(screen.getByText('Left').parentElement).toHaveClass(
-      'pointer-events-auto',
-      'absolute',
-      'left-3',
-      'top-3'
+    expect(screen.getByTestId('attachment-card-top-left')).toContainElement(
+      screen.getByText('Left')
     )
-    expect(screen.getByText('Right').parentElement).toHaveClass(
-      'pointer-events-auto',
-      'absolute',
-      'right-3',
-      'top-3'
+    expect(screen.getByTestId('attachment-card-top-right')).toContainElement(
+      screen.getByText('Right')
     )
-    expect(container.querySelectorAll('.pointer-events-auto')).toHaveLength(2)
 
-    const withoutSlots = renderWithProviders(
+    view.unmount()
+
+    renderWithProviders(
       <AttachmentCard
         variant="light"
         thumbnail={thumbnail}
@@ -140,8 +109,11 @@ describe('AttachmentCard', () => {
       />
     )
     expect(
-      withoutSlots.container.querySelectorAll('.pointer-events-auto')
-    ).toHaveLength(0)
+      screen.queryByTestId('attachment-card-top-left')
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByTestId('attachment-card-top-right')
+    ).not.toBeInTheDocument()
   })
 
   it('forwards rootRef and data-testid to the root', () => {

package/src/components/AttachmentCard/index.tsx

@@ -59,12 +59,18 @@ const AttachmentCard: React.FC<AttachmentCardProps> = ({
       )}
     >
       {topLeft ? (
-        <div className="pointer-events-auto absolute left-3 top-3 z-50">
+        <div
+          data-testid="attachment-card-top-left"
+          className="pointer-events-auto absolute left-3 top-3 z-50"
+        >
           {topLeft}
         </div>
       ) : null}
       {topRight ? (
-        <div className="pointer-events-auto absolute right-3 top-3 z-50">
+        <div
+          data-testid="attachment-card-top-right"
+          className="pointer-events-auto absolute right-3 top-3 z-50"
+        >
           {topRight}
         </div>
       ) : null}

package/src/components/AttachmentCard/utils/icons.ts

@@ -43,10 +43,20 @@ function getTypeIcon(mimeType: string): React.ElementType {
   return DOCUMENT_ICON_COMPONENT[getDocumentIconType(mimeType)]
 }
 
+function getTypeIconName(mimeType: string): string {
+  const sourceType = getSourceType(mimeType)
+  if (sourceType !== 'document') return sourceType
+  return getDocumentIconType(mimeType)
+}
+
 /** Use instead of `<TypeIcon />` where TypeIcon = getTypeIcon(mime) to satisfy react-hooks/static-components. */
 export function renderTypeIcon(
   mimeType: string,
   props: IconProps
 ): React.ReactElement {
-  return React.createElement(getTypeIcon(mimeType), props)
+  // Decorative icons: which one was picked is otherwise only visible in a pixel diff.
+  return React.createElement(getTypeIcon(mimeType), {
+    'data-testid': `type-icon-${getTypeIconName(mimeType)}`,
+    ...props,
+  })
 }