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

package/src/components/LinkAttachment/components/_shared/CardShell.tsx

@@ -97,7 +97,7 @@ const CardShell: React.FC<CardShellProps> = ({
   accentHex,
   fixedHeight = false,
   busy = false,
-  'data-testid': dataTestId,
+  'data-testid': dataTestId = 'link-card',
 }) => {
   const isInteractive = href != null || onClick != null
   const className = classNames(
@@ -138,7 +138,10 @@ const CardShell: React.FC<CardShellProps> = ({
     : undefined
 
   const corner = topRight ? (
-    <div className="pointer-events-auto absolute right-3 top-3 z-10">
+    <div
+      data-testid="card-shell-top-right"
+      className="pointer-events-auto absolute right-3 top-3 z-10"
+    >
       {topRight}
     </div>
   ) : null

package/src/components/LinkAttachment/components/_shared/CardThumbnail.test.tsx

@@ -1,7 +1,12 @@
 import React from 'react'
 import { describe, expect, it, vi } from 'vitest'
 
-import { renderWithProviders, screen, fireEvent } from '../../../../test/utils'
+import {
+  cleanup,
+  renderWithProviders,
+  screen,
+  fireEvent,
+} from '../../../../test/utils'
 
 import CardThumbnail, {
   AUDIO_BG_CLASS,
@@ -53,7 +58,7 @@ describe('AUDIO_BG_CLASS', () => {
 
 describe('CardThumbnail', () => {
   it('collapses the hero to a padded native audio player', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <CardThumbnail
         variant="dark"
         mimeType="audio/mpeg"
@@ -61,18 +66,17 @@ describe('CardThumbnail', () => {
         thumbnailUrl={IMAGE_SRC}
       />
     )
-    const audio = container.querySelector('audio')
-    expect(audio).not.toBeNull()
-    expect(audio?.getAttribute('src')).toBe(AUDIO_SRC)
-    expect(audio?.hasAttribute('controls')).toBe(true)
-    expect(audio?.getAttribute('preload')).toBe('metadata')
+    const audio = screen.getByTestId('card-thumbnail-audio')
+    expect(audio).toHaveAttribute('src', AUDIO_SRC)
+    expect(audio).toHaveAttribute('controls')
+    expect(audio).toHaveAttribute('preload', 'metadata')
     // The hero region (and its artwork) is gone entirely on this branch.
-    expect(container.querySelectorAll('img')).toHaveLength(0)
-    expect(container.querySelector('div.flex-1')).toBeNull()
+    expect(screen.queryAllByRole('img', { hidden: true })).toHaveLength(0)
+    expect(screen.queryByTestId('card-thumbnail-hero')).not.toBeInTheDocument()
   })
 
   it('keeps the skeleton instead of an audio player while loading', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <CardThumbnail
         variant="dark"
         mimeType="audio/mpeg"
@@ -80,12 +84,12 @@ describe('CardThumbnail', () => {
         isLoading
       />
     )
-    expect(container.querySelector('audio')).toBeNull()
-    expect(container.querySelector('div.animate-pulse')).not.toBeNull()
+    expect(screen.queryByTestId('card-thumbnail-audio')).not.toBeInTheDocument()
+    expect(screen.getByTestId('card-thumbnail-skeleton')).toBeInTheDocument()
   })
 
   it('renders a video player with the poster over a black hero', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <CardThumbnail
         variant="light"
         mimeType="video/mp4"
@@ -95,19 +99,16 @@ describe('CardThumbnail', () => {
         onImageError={() => {}}
       />
     )
-    const video = container.querySelector('video')
-    expect(video?.getAttribute('src')).toBe(VIDEO_SRC)
-    expect(video?.getAttribute('poster')).toBe(IMAGE_SRC)
-    expect(video?.hasAttribute('controls')).toBe(true)
-    expect(video?.getAttribute('preload')).toBe('metadata')
-    expect(container.querySelector('div.flex-1')?.className).toContain(
-      'bg-black'
-    )
+    const video = screen.getByTestId('card-thumbnail-video')
+    expect(video).toHaveAttribute('src', VIDEO_SRC)
+    expect(video).toHaveAttribute('poster', IMAGE_SRC)
+    expect(video).toHaveAttribute('controls')
+    expect(video).toHaveAttribute('preload', 'metadata')
   })
 
   it('probes the video poster with a hidden image that reports failures', () => {
     const onImageError = vi.fn()
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <CardThumbnail
         variant="light"
         mimeType="video/mp4"
@@ -116,7 +117,7 @@ describe('CardThumbnail', () => {
         onImageError={onImageError}
       />
     )
-    const probe = container.querySelector('img')
+    const probe = screen.queryByRole('img', { hidden: true })
     expect(probe).not.toBeNull()
     expect(probe?.className).toContain('hidden')
     expect(probe?.getAttribute('aria-hidden')).toBe('true')
@@ -125,7 +126,7 @@ describe('CardThumbnail', () => {
   })
 
   it('skips the poster probe when there is nothing to report to', () => {
-    const { container: noHandler } = renderWithProviders(
+    const view = renderWithProviders(
       <CardThumbnail
         variant="light"
         mimeType="video/mp4"
@@ -133,9 +134,10 @@ describe('CardThumbnail', () => {
         thumbnailUrl={IMAGE_SRC}
       />
     )
-    expect(noHandler.querySelectorAll('img')).toHaveLength(0)
+    expect(screen.queryAllByRole('img', { hidden: true })).toHaveLength(0)
+    view.unmount()
 
-    const { container: noPoster } = renderWithProviders(
+    renderWithProviders(
       <CardThumbnail
         variant="light"
         mimeType="video/mp4"
@@ -143,19 +145,21 @@ describe('CardThumbnail', () => {
         onImageError={() => {}}
       />
     )
-    expect(noPoster.querySelectorAll('img')).toHaveLength(0)
-    expect(noPoster.querySelector('video')?.getAttribute('poster')).toBeNull()
+    expect(screen.queryAllByRole('img', { hidden: true })).toHaveLength(0)
+    expect(screen.getByTestId('card-thumbnail-video')).not.toHaveAttribute(
+      'poster'
+    )
   })
 
   it('renders the thumbnail image with the title as its alt text', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <CardThumbnail
         variant="light"
         thumbnailUrl={IMAGE_SRC}
         title="Cover art"
       />
     )
-    const image = container.querySelector('img')
+    const image = screen.getByRole('img', { hidden: true })
     expect(image?.getAttribute('src')).toBe(IMAGE_SRC)
     expect(image?.getAttribute('alt')).toBe('Cover art')
     expect(image?.getAttribute('loading')).toBe('lazy')
@@ -164,60 +168,41 @@ describe('CardThumbnail', () => {
   })
 
   it('falls back to empty alt text when the card has no title', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <CardThumbnail variant="light" thumbnailUrl={IMAGE_SRC} />
     )
-    expect(container.querySelector('img')?.getAttribute('alt')).toBe('')
+    expect(screen.getByRole('img', { hidden: true })).toHaveAttribute('alt', '')
   })
 
   it('reports a failing hero image to its owner', () => {
     const onImageError = vi.fn()
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <CardThumbnail
         variant="light"
         thumbnailUrl={IMAGE_SRC}
         onImageError={onImageError}
       />
     )
-    fireEvent.error(container.querySelector('img') as HTMLImageElement)
+    fireEvent.error(screen.getByRole('img', { hidden: true }))
     expect(onImageError).toHaveBeenCalledTimes(1)
   })
 
-  it('shows a variant-aware type-icon placeholder without a thumbnail', () => {
-    const { container: dark } = renderWithProviders(
+  it('shows a type-icon placeholder instead of an image without a thumbnail', () => {
+    renderWithProviders(
       <CardThumbnail variant="dark" mimeType="application/pdf" />
     )
-    expect(dark.querySelectorAll('img')).toHaveLength(0)
-    const darkPlaceholder = dark.querySelector('div.items-center')
-    expect(darkPlaceholder?.className).toContain('bg-white/10')
-    expect(darkPlaceholder?.querySelector('svg')?.getAttribute('class')).toBe(
-      'size-16 text-white/25'
-    )
-
-    const { container: light } = renderWithProviders(
-      <CardThumbnail variant="light" />
-    )
-    const lightPlaceholder = light.querySelector('div.items-center')
-    expect(lightPlaceholder?.className).toContain('bg-black/5')
-    expect(lightPlaceholder?.querySelector('svg')?.getAttribute('class')).toBe(
-      'size-16 text-black/25'
-    )
+    expect(screen.queryAllByRole('img', { hidden: true })).toHaveLength(0)
+    expect(screen.getByTestId('card-thumbnail-placeholder')).toBeInTheDocument()
   })
 
-  it('pulses a variant-aware block while loading, ignoring the thumbnail', () => {
-    const { container: dark } = renderWithProviders(
+  it('pulses a placeholder block while loading, ignoring the thumbnail', () => {
+    renderWithProviders(
       <CardThumbnail variant="dark" thumbnailUrl={IMAGE_SRC} isLoading />
     )
-    expect(dark.querySelectorAll('img')).toHaveLength(0)
-    const bar = dark.querySelector('div.animate-pulse')
-    expect(bar?.className).toContain('bg-white/10')
-    expect(bar?.getAttribute('aria-hidden')).toBe('true')
-
-    const { container: light } = renderWithProviders(
-      <CardThumbnail variant="light" isLoading />
-    )
-    expect(light.querySelector('div.animate-pulse')?.className).toContain(
-      'bg-black/5'
+    expect(screen.queryAllByRole('img', { hidden: true })).toHaveLength(0)
+    expect(screen.getByTestId('card-thumbnail-skeleton')).toHaveAttribute(
+      'aria-hidden',
+      'true'
     )
   })
 
@@ -229,14 +214,22 @@ describe('CardThumbnail', () => {
         topRight={<span>right</span>}
       />
     )
-    expect(screen.getByText('left').parentElement?.className).toContain(
-      'absolute left-3 top-3'
-    )
-    expect(screen.getByText('right').parentElement?.className).toContain(
-      'absolute right-3 top-3'
-    )
-
-    const { container } = renderWithProviders(<CardThumbnail variant="dark" />)
-    expect(container.querySelectorAll('div.absolute')).toHaveLength(0)
+    const topLeft = screen.getByTestId('card-thumbnail-top-left')
+    const topRight = screen.getByTestId('card-thumbnail-top-right')
+    expect(topLeft).toHaveTextContent('left')
+    expect(topRight).toHaveTextContent('right')
+    /* eslint-disable local/no-style-only-assertion -- overlay slots: in flow they would displace the hero instead of sitting over it. */
+    expect(topLeft.className).toContain('absolute left-3 top-3')
+    expect(topRight.className).toContain('absolute right-3 top-3')
+    /* eslint-enable local/no-style-only-assertion */
+
+    cleanup()
+    renderWithProviders(<CardThumbnail variant="dark" />)
+    expect(
+      screen.queryByTestId('card-thumbnail-top-left')
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByTestId('card-thumbnail-top-right')
+    ).not.toBeInTheDocument()
   })
 })

package/src/components/LinkAttachment/components/_shared/CardThumbnail.tsx

@@ -110,6 +110,7 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
       <div className="p-3">
         <audio
           {...nativePlayerProps}
+          data-testid="card-thumbnail-audio"
           src={sourceUrl}
           controls
           preload="metadata"
@@ -123,6 +124,7 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
 
   return (
     <div
+      data-testid="card-thumbnail-hero"
       className={classNames(
         // `flex-1 min-h-0` inside the shell's 250px column: the hero takes
         // every pixel the chin doesn't, which is 168px at a two-line title
@@ -138,6 +140,7 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
         // not in either consumer's, so it would compile to nothing in
         // frontyard and profiles while looking right in this Storybook.
         <div
+          data-testid="card-thumbnail-skeleton"
           className={classNames(
             'h-full w-full animate-pulse',
             PLACEHOLDER_BG[variant]
@@ -147,6 +150,7 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
       ) : isPlayableVideo ? (
         <>
           <video
+            data-testid="card-thumbnail-video"
             src={sourceUrl}
             poster={optimizedThumbnailUrl}
             controls
@@ -190,6 +194,7 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
         />
       ) : (
         <div
+          data-testid="card-thumbnail-placeholder"
           className={classNames(
             'flex h-full w-full items-center justify-center',
             PLACEHOLDER_BG[variant]
@@ -203,12 +208,18 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
       )}
 
       {topLeft ? (
-        <div className="pointer-events-auto absolute left-3 top-3 z-10">
+        <div
+          data-testid="card-thumbnail-top-left"
+          className="pointer-events-auto absolute left-3 top-3 z-10"
+        >
           {topLeft}
         </div>
       ) : null}
       {topRight ? (
-        <div className="pointer-events-auto absolute right-3 top-3 z-10">
+        <div
+          data-testid="card-thumbnail-top-right"
+          className="pointer-events-auto absolute right-3 top-3 z-10"
+        >
           {topRight}
         </div>
       ) : null}

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

@@ -1,7 +1,12 @@
 import React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { renderWithProviders, screen, fireEvent } from '../../test/utils'
+import {
+  fireEvent,
+  renderWithProviders,
+  screen,
+  within,
+} from '../../test/utils'
 
 import { triggerDownload } from './_shared/triggerDownload'
 
@@ -365,6 +370,7 @@ describe('MessageAttachment.Bubble geometry overrides', () => {
         filename="file.zip"
       />
     )
+    // eslint-disable-next-line local/no-style-only-assertion -- the override contract above, not the values: an appended radius silently loses to the corner table.
     expect(screen.getByTestId('file-attachment')).toHaveClass(
       'w-[280px]',
       'px-2',
@@ -378,6 +384,7 @@ describe('MessageAttachment.Bubble geometry overrides', () => {
       <MessageAttachment.Image.Sent src="https://cdn.example.com/photo.jpg" />
     )
     const bubble = screen.getByTestId('image-attachment')
+    // eslint-disable-next-line local/no-style-only-assertion -- the override contract above, not the values: an appended radius silently loses to the corner table.
     expect(bubble).toHaveClass('w-fit', 'p-0.5', 'rounded-[20px]')
     expect(bubble.className).not.toMatch(
       /w-\[280px\]|px-2|py-2|rounded-tl-\[18px\]/
@@ -912,8 +919,10 @@ describe('MessageAttachment.Video single-card aspect', () => {
       />
     )
     expect(
-      screen.getByTestId('video-attachment').querySelector('img')
-    ).toBeNull()
+      within(screen.getByTestId('video-attachment')).queryAllByRole('img', {
+        hidden: true,
+      })
+    ).toHaveLength(0)
     // Clamped to MIN_ASPECT: a true 9:16 would render a 587px-tall card, so
     // portrait pins at 4:5 until design asks for a full-height card.
     expect(mediaAspect()).toBe(String(4 / 5))
@@ -1017,8 +1026,10 @@ describe('MessageAttachment.Video single-card aspect', () => {
       <MessageAttachment.Video.Received src="https://cdn.example.com/clip.mp4" />
     )
     expect(
-      screen.getByTestId('video-attachment').querySelector('img')
-    ).toBeNull()
+      within(screen.getByTestId('video-attachment')).queryAllByRole('img', {
+        hidden: true,
+      })
+    ).toHaveLength(0)
     expect(mediaAspect()).toBe(String(1))
   })
 
@@ -1142,12 +1153,18 @@ describe('MessageAttachment lazy-loading defaults', () => {
       // on the raw (un-optimised) source. The element being absent
       // while closed is therefore the only thing stopping a scrolled
       // thread from downloading every full-resolution original.
-      expect(screen.getByTestId('image-viewer').querySelector('img')).toBeNull()
+      expect(
+        within(screen.getByTestId('image-viewer')).queryAllByRole('img', {
+          hidden: true,
+        })
+      ).toHaveLength(0)
 
       fireEvent.click(screen.getByLabelText('Open image 1 of 1'))
       expect(
-        screen.getByTestId('image-viewer').querySelector('img')
-      ).not.toBeNull()
+        within(screen.getByTestId('image-viewer')).getByRole('img', {
+          hidden: true,
+        })
+      ).toBeInTheDocument()
     })
   })
 

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

@@ -17,7 +17,7 @@ describe('CompactDocumentRow', () => {
   })
 
   it('renders metadata only when it has a value and defaults MIME type', () => {
-    const { container, rerender } = renderWithProviders(
+    const { rerender } = renderWithProviders(
       <CompactDocumentRow
         variant="dark"
         filename="report.pdf"
@@ -33,7 +33,7 @@ describe('CompactDocumentRow', () => {
       />
     )
     expect(screen.queryByText(/·/)).toBeNull()
-    const genericIconMarkup = container.querySelector('svg')?.innerHTML
+    expect(screen.getByTestId('type-icon-generic')).toBeInTheDocument()
     rerender(
       <CompactDocumentRow
         variant="dark"
@@ -41,14 +41,12 @@ describe('CompactDocumentRow', () => {
         mimeType="application/pdf"
       />
     )
-    expect(container.querySelector('svg')?.innerHTML).not.toBe(
-      genericIconMarkup
-    )
+    expect(screen.getByTestId('type-icon-pdf')).toBeInTheDocument()
   })
 
-  it('maps variant classes across metadata, icon, and activation', () => {
+  it('maps the variant onto the activatable body treatment', () => {
     const onActivate = vi.fn()
-    const { container, rerender } = renderWithProviders(
+    const { rerender } = renderWithProviders(
       <CompactDocumentRow
         variant="dark"
         filename="report.pdf"
@@ -56,12 +54,6 @@ describe('CompactDocumentRow', () => {
         activateLabel="Open report"
       />
     )
-    const darkMetadata = screen.getByText('PDF').className
-    const darkIconTile = container.querySelector('div[aria-hidden]')
-    const darkTileClasses = darkIconTile?.className
-    const darkIconClasses = darkIconTile
-      ?.querySelector('svg')
-      ?.getAttribute('class')
     expect(screen.getByRole('button', { name: 'Open report' })).toHaveClass(
       'hover:bg-white/[0.04]'
     )
@@ -74,12 +66,6 @@ describe('CompactDocumentRow', () => {
         activateLabel="Open report"
       />
     )
-    expect(screen.getByText('PDF').className).not.toBe(darkMetadata)
-    const lightIconTile = container.querySelector('div[aria-hidden]')
-    expect(lightIconTile?.className).not.toBe(darkTileClasses)
-    expect(lightIconTile?.querySelector('svg')?.getAttribute('class')).not.toBe(
-      darkIconClasses
-    )
     expect(screen.getByRole('button', { name: 'Open report' })).toHaveClass(
       'hover:bg-black/[0.04]'
     )

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

@@ -30,14 +30,14 @@ describe('MediaStackGrid', () => {
   })
 
   it('clamps visible tiles and places overflow on the last tile', () => {
-    const { container, rerender } = renderWithProviders(
+    const { rerender } = renderWithProviders(
       <MediaStackGrid tiles={tiles(6)} maxVisible={4} />
     )
-    expect(container.querySelectorAll('span')).toHaveLength(4)
+    expect(screen.getAllByText(/tile/)).toHaveLength(4)
     expect(screen.getByText('+2')).toBeInTheDocument()
     expect(screen.getByText('+2').parentElement).toHaveTextContent('tile 4')
     rerender(<MediaStackGrid tiles={tiles(2)} maxVisible={4} />)
-    expect(container.querySelectorAll('span')).toHaveLength(2)
+    expect(screen.getAllByText(/tile/)).toHaveLength(2)
     expect(screen.queryByText(/^\+/)).toBeNull()
     rerender(<MediaStackGrid tiles={tiles(1)} singleAspectRatio={0.5} />)
     expect(
@@ -53,20 +53,18 @@ describe('MediaStackGrid', () => {
   ])(
     'shows overflow on the last visible tile when maxVisible is %s',
     (maxVisible, badge, lastTile) => {
-      const { container } = renderWithProviders(
+      renderWithProviders(
         <MediaStackGrid tiles={tiles(5)} maxVisible={maxVisible} />
       )
-      expect(container.querySelectorAll('span')).toHaveLength(maxVisible)
+      expect(screen.getAllByText(/tile/)).toHaveLength(maxVisible)
       expect(screen.getByText(badge)).toBeInTheDocument()
       expect(screen.getByText(badge).parentElement).toHaveTextContent(lastTile)
     }
   )
 
   it('shows overflow on the single visible tile', () => {
-    const { container } = renderWithProviders(
-      <MediaStackGrid tiles={tiles(3)} maxVisible={1} />
-    )
-    expect(container.querySelectorAll('span')).toHaveLength(1)
+    renderWithProviders(<MediaStackGrid tiles={tiles(3)} maxVisible={1} />)
+    expect(screen.getAllByText(/tile/)).toHaveLength(1)
     expect(screen.getByText('+2').parentElement).toHaveTextContent('tile 1')
   })
 

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

@@ -5,6 +5,7 @@ import {
   fireEvent,
   renderWithProviders,
   screen,
+  within,
 } from '../../../test/utils'
 
 import VideoViewer from './VideoViewer'
@@ -106,7 +107,9 @@ describe('VideoViewer', () => {
       // Gone once the dialog is: a `<video preload="metadata">` left in a
       // closed viewer fetches a header per bubble in the thread.
       expect(
-        screen.getByTestId('video-viewer').querySelector('video')
+        within(screen.getByTestId('video-viewer')).queryByTestId(
+          'video-viewer-media'
+        )
       ).toBeNull()
     } finally {
       vi.useRealTimers()
@@ -117,6 +120,10 @@ describe('VideoViewer', () => {
     renderWithProviders(
       <VideoViewer open={false} onClose={vi.fn()} items={[items[0]]} />
     )
-    expect(screen.getByTestId('video-viewer').querySelector('video')).toBeNull()
+    expect(
+      within(screen.getByTestId('video-viewer')).queryByTestId(
+        'video-viewer-media'
+      )
+    ).toBeNull()
   })
 })

package/src/components/MessageAttachment/_shared/VideoViewer.tsx

@@ -131,6 +131,7 @@ const VideoViewer: React.FC<VideoViewerProps> = ({
       {mounted ? (
         <video
           ref={videoRef}
+          data-testid="video-viewer-media"
           // Forcing a key swap on item change ensures the new source
           // mounts a fresh element instead of reusing the previous
           // playback state — keeps the video paused-at-start when

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

@@ -123,12 +123,12 @@ describe('ViewerShell', () => {
       throw new Error('not supported')
     })
     defineDialogMethod('showModal', showModal)
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <ViewerShell open onClose={vi.fn()} data-testid="viewer">
         content
       </ViewerShell>
     )
-    expect(container.querySelector('dialog')).toHaveAttribute('open')
+    expect(screen.getByRole('dialog')).toHaveAttribute('open')
     expect(showModal).toHaveBeenCalledOnce()
   })
 

package/src/components/MessageBubble/MessageBubble.test.tsx

@@ -71,6 +71,5 @@ describe('MessageBubble', () => {
     )
     const bubble = screen.getByText('wide').parentElement as HTMLElement
     expect(bubble.classList.contains('w-fit')).toBe(true)
-    expect(bubble.className).toContain('max-w-[520px]')
   })
 })