@linktr.ee/messaging-react 1.37.0 → 1.38.0-rc-1777583423

package/src/components/MediaMessage/MediaMessage.test.tsx

@@ -1,35 +1,24 @@
 import React from 'react'
 import type { LocalMessage } from 'stream-chat'
-import { beforeAll, describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 
 import { renderWithProviders, screen, fireEvent } from '../../test/utils'
 
 import { MediaMessage } from '.'
 
-beforeAll(() => {
-  HTMLDialogElement.prototype.showModal = vi.fn(function (this: HTMLDialogElement) {
-    this.setAttribute('open', '')
-  })
-  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
-    this.removeAttribute('open')
-  })
-})
-
 vi.mock('../Avatar', () => ({
   Avatar: ({ id }: { id: string }) => (
     <div data-testid="avatar" data-user-id={id} />
   ),
 }))
 
-vi.mock('../LockedAttachment/components/MediaPlayer', () => ({
+vi.mock('../AttachmentCard/MediaPlayer', () => ({
   default: ({
     source,
     mimeType,
-    onContainerClick,
   }: {
     source: string
     mimeType: string
-    onContainerClick?: (e: React.MouseEvent) => void
   }) => (
     <div
       role="button"
@@ -37,17 +26,15 @@ vi.mock('../LockedAttachment/components/MediaPlayer', () => ({
       data-testid="media-player"
       data-source={source}
       data-mime-type={mimeType}
-      onClick={onContainerClick}
-      onKeyDown={undefined}
     />
   ),
 }))
 
-vi.mock('../LockedAttachment/utils/icons', () => ({
+vi.mock('../AttachmentCard/utils/icons', () => ({
   renderTypeIcon: () => <span data-testid="type-icon" />,
 }))
 
-vi.mock('../LockedAttachment/utils/mimeType', () => ({
+vi.mock('../AttachmentCard/utils/mimeType', () => ({
   getSourceType: (mimeType: string) => {
     if (mimeType.startsWith('video/')) return 'video'
     if (mimeType.startsWith('image/')) return 'image'
@@ -98,203 +85,195 @@ describe('MediaMessage', () => {
     expect(player).toHaveAttribute('data-source', 'https://cdn.example.com/clip.mp4')
   })
 
-  it('opens viewer when the video player container is clicked', () => {
+  it('renders MediaPlayer for an audio attachment', () => {
     renderWithProviders(
       <MediaMessage
         message={msg({
           attachments: [
             {
-              type: 'video',
-              asset_url: 'https://cdn.example.com/clip.mp4',
-              mime_type: 'video/mp4',
-              title: 'My Clip',
+              type: 'audio',
+              asset_url: 'https://cdn.example.com/track.mp3',
+              mime_type: 'audio/mpeg',
             },
           ],
         })}
       />
     )
 
-    fireEvent.click(screen.getByTestId('media-player'))
-    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalled()
-    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument()
+    expect(screen.getByTestId('media-player')).toHaveAttribute(
+      'data-source',
+      'https://cdn.example.com/track.mp3'
+    )
   })
 
-  it('renders MediaPlayer for an audio attachment', () => {
+  it('renders an img for an image attachment', () => {
     renderWithProviders(
       <MediaMessage
         message={msg({
           attachments: [
             {
-              type: 'audio',
-              asset_url: 'https://cdn.example.com/track.mp3',
-              mime_type: 'audio/mpeg',
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              mime_type: 'image/jpeg',
+              title: 'My Photo',
             },
           ],
         })}
       />
     )
 
-    expect(screen.getByTestId('media-player')).toHaveAttribute(
-      'data-source',
-      'https://cdn.example.com/track.mp3'
-    )
+    const image = screen.getByRole('img', { name: 'My Photo' })
+    expect(image).toHaveAttribute('src', 'https://cdn.example.com/photo.jpg')
   })
 
-  it('does not show viewer or expand button for audio', () => {
+  it('renders unknown file type as icon placeholder, not a link', () => {
     renderWithProviders(
       <MediaMessage
         message={msg({
           attachments: [
             {
-              type: 'audio',
-              asset_url: 'https://cdn.example.com/track.mp3',
-              mime_type: 'audio/mpeg',
-              title: 'My Track',
+              type: 'file',
+              asset_url: 'https://cdn.example.com/data.bin',
+              mime_type: 'application/octet-stream',
+              title: 'Unknown File',
             },
           ],
         })}
       />
     )
 
-    expect(screen.queryByRole('button', { name: 'View full screen' })).not.toBeInTheDocument()
-    expect(screen.queryByRole('button', { name: 'Close' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('link')).not.toBeInTheDocument()
+    expect(screen.getByText('Unknown File')).toBeInTheDocument()
+    expect(screen.getAllByTestId('type-icon').length).toBeGreaterThanOrEqual(1)
   })
 
-  it('renders an img for an image attachment and opens viewer on click', () => {
+  it('shows title and file size in meta row', () => {
     renderWithProviders(
       <MediaMessage
         message={msg({
           attachments: [
             {
-              type: 'image',
-              image_url: 'https://cdn.example.com/photo.jpg',
-              mime_type: 'image/jpeg',
-              title: 'My Photo',
+              type: 'video',
+              asset_url: 'https://cdn.example.com/clip.mp4',
+              mime_type: 'video/mp4',
+              title: 'Clip',
+              file_size: 2048,
             },
           ],
         })}
       />
     )
 
-    const image = screen.getByRole('img', { name: 'My Photo' })
-    expect(image).toHaveAttribute('src', 'https://cdn.example.com/photo.jpg')
-
-    // Clicking the image button opens the viewer
-    fireEvent.click(screen.getByRole('button', { name: 'My Photo' }))
-    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalled()
-    const viewerImages = screen.getAllByRole('img', { name: 'My Photo' })
-    expect(viewerImages.some((img) => img.classList.contains('rounded-2xl'))).toBe(true)
+    expect(screen.getByText('Clip')).toBeInTheDocument()
+    expect(screen.getByText('2.0 KB')).toBeInTheDocument()
   })
 
-  it('does not show expand button in chin for images, only download', () => {
+  it('renders Avatar for a message from another user', () => {
     renderWithProviders(
       <MediaMessage
+        isMyMessage={false}
         message={msg({
           attachments: [
             {
               type: 'image',
               image_url: 'https://cdn.example.com/photo.jpg',
               mime_type: 'image/jpeg',
-              title: 'My Photo',
             },
           ],
         })}
       />
     )
 
-    // Thumbnail button + download button — no separate expand/fullscreen button
-    expect(screen.queryByRole('button', { name: 'View full screen' })).not.toBeInTheDocument()
-    expect(screen.getByRole('button', { name: 'Download' })).toBeInTheDocument()
+    expect(screen.getByTestId('avatar')).toBeInTheDocument()
+    expect(screen.getByTestId('avatar')).toHaveAttribute('data-user-id', 'user-1')
   })
 
-  it('renders PDF card with a viewer button', () => {
+  it('does not render Avatar for own messages', () => {
     renderWithProviders(
       <MediaMessage
+        isMyMessage={true}
         message={msg({
           attachments: [
             {
-              type: 'file',
-              asset_url: 'https://cdn.example.com/report.pdf',
-              mime_type: 'application/pdf',
-              title: 'Annual Report',
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              mime_type: 'image/jpeg',
             },
           ],
         })}
       />
     )
 
-    expect(screen.getByRole('button', { name: 'Open PDF viewer' })).toBeInTheDocument()
-    expect(screen.getByText('Annual Report')).toBeInTheDocument()
+    expect(screen.queryByTestId('avatar')).not.toBeInTheDocument()
   })
 
-  it('opens PDF viewer when PDF thumbnail is clicked', () => {
-    renderWithProviders(
+  it('applies the --me class for own messages', () => {
+    const { container } = renderWithProviders(
       <MediaMessage
+        isMyMessage={true}
         message={msg({
           attachments: [
             {
-              type: 'file',
-              asset_url: 'https://cdn.example.com/report.pdf',
-              mime_type: 'application/pdf',
-              title: 'Annual Report',
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              mime_type: 'image/jpeg',
             },
           ],
         })}
       />
     )
 
-    fireEvent.click(screen.getByRole('button', { name: 'Open PDF viewer' }))
-    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalled()
-    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument()
+    expect(container.firstChild).toHaveClass('str-chat__message--me')
   })
 
-  it('renders unknown file as a link with no viewer button', () => {
-    renderWithProviders(
+  it('applies the --other class for messages from other users', () => {
+    const { container } = renderWithProviders(
       <MediaMessage
+        isMyMessage={false}
         message={msg({
           attachments: [
             {
-              type: 'file',
-              asset_url: 'https://cdn.example.com/data.bin',
-              mime_type: 'application/octet-stream',
-              title: 'Unknown File',
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              mime_type: 'image/jpeg',
             },
           ],
         })}
       />
     )
 
-    // No viewer button for unknown files
-    expect(screen.queryByRole('button', { name: 'Open PDF viewer' })).not.toBeInTheDocument()
-    // Thumbnail is a plain link (opens in new tab)
-    const links = screen.getAllByRole('link')
-    expect(links.some((l) => l.getAttribute('href') === 'https://cdn.example.com/data.bin')).toBe(true)
-    expect(screen.getByText('Unknown File')).toBeInTheDocument()
+    expect(container.firstChild).toHaveClass('str-chat__message--other')
   })
 
-  it('shows title and file size in chin', () => {
-    renderWithProviders(
+  it('renders nothing when no attachments', () => {
+    const { container } = renderWithProviders(
+      <MediaMessage message={msg({ attachments: [] })} />
+    )
+
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('uses dark card background for sent (Creator) messages', () => {
+    const { container } = renderWithProviders(
       <MediaMessage
+        isMyMessage={true}
         message={msg({
           attachments: [
             {
-              type: 'video',
-              asset_url: 'https://cdn.example.com/clip.mp4',
-              mime_type: 'video/mp4',
-              title: 'Clip',
-              file_size: 2048,
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              mime_type: 'image/jpeg',
             },
           ],
         })}
       />
     )
 
-    expect(screen.getByText('Clip')).toBeInTheDocument()
-    expect(screen.getByText('2.0 KB')).toBeInTheDocument()
+    expect(container.querySelector('.bg-\\[\\#121110\\]')).toBeInTheDocument()
   })
 
-  it('renders Avatar for a message from another user', () => {
-    renderWithProviders(
+  it('uses light card background for received (Visitor) messages', () => {
+    const { container } = renderWithProviders(
       <MediaMessage
         isMyMessage={false}
         message={msg({
@@ -309,31 +288,30 @@ describe('MediaMessage', () => {
       />
     )
 
-    expect(screen.getByTestId('avatar')).toBeInTheDocument()
-    expect(screen.getByTestId('avatar')).toHaveAttribute('data-user-id', 'user-1')
+    expect(container.querySelector('.bg-white')).toBeInTheDocument()
   })
 
-  it('does not render Avatar for own messages', () => {
+  it('shows Download action for received (Visitor) image attachment', () => {
     renderWithProviders(
       <MediaMessage
-        isMyMessage={true}
         message={msg({
           attachments: [
             {
               type: 'image',
               image_url: 'https://cdn.example.com/photo.jpg',
               mime_type: 'image/jpeg',
+              title: 'My Photo',
             },
           ],
         })}
       />
     )
 
-    expect(screen.queryByTestId('avatar')).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Download' })).toBeInTheDocument()
   })
 
-  it('applies the --me class for own messages', () => {
-    const { container } = renderWithProviders(
+  it('does not show Download button for sent (Creator) image attachment', () => {
+    renderWithProviders(
       <MediaMessage
         isMyMessage={true}
         message={msg({
@@ -342,40 +320,33 @@ describe('MediaMessage', () => {
               type: 'image',
               image_url: 'https://cdn.example.com/photo.jpg',
               mime_type: 'image/jpeg',
+              title: 'My Photo',
             },
           ],
         })}
       />
     )
 
-    expect(container.firstChild).toHaveClass('str-chat__message--me')
+    expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument()
   })
 
-  it('applies the --other class for messages from other users', () => {
-    const { container } = renderWithProviders(
+  it('shows Download action for received audio attachment', () => {
+    renderWithProviders(
       <MediaMessage
-        isMyMessage={false}
         message={msg({
           attachments: [
             {
-              type: 'image',
-              image_url: 'https://cdn.example.com/photo.jpg',
-              mime_type: 'image/jpeg',
+              type: 'audio',
+              asset_url: 'https://cdn.example.com/track.mp3',
+              mime_type: 'audio/mpeg',
+              title: 'My Track',
             },
           ],
         })}
       />
     )
 
-    expect(container.firstChild).toHaveClass('str-chat__message--other')
-  })
-
-  it('renders nothing when no attachments', () => {
-    const { container } = renderWithProviders(
-      <MediaMessage message={msg({ attachments: [] })} />
-    )
-
-    expect(container.firstChild).toBeNull()
+    expect(screen.getByRole('button', { name: 'Download' })).toBeInTheDocument()
   })
 
   it('renders a link card for a link attachment', () => {
@@ -423,98 +394,92 @@ describe('MediaMessage', () => {
     expect(screen.getByText('My Linktree')).toBeInTheDocument()
   })
 
-  it('uses dark card background for sent messages', () => {
-    const { container } = renderWithProviders(
+  it('does not show download or expand buttons for link cards', () => {
+    renderWithProviders(
       <MediaMessage
-        isMyMessage={true}
         message={msg({
           attachments: [
             {
-              type: 'image',
-              image_url: 'https://cdn.example.com/photo.jpg',
-              mime_type: 'image/jpeg',
+              type: 'link',
+              og_scrape_url: 'https://linktr.ee/someone',
+              title: 'My Linktree',
             },
           ],
         })}
       />
     )
 
-    expect(container.querySelector('.bg-\\[\\#121110\\]')).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'View full screen' })).not.toBeInTheDocument()
   })
 
-  it('uses light card background for received messages', () => {
+  it('MediaMessage.Visitor renders card without chat shell', () => {
     const { container } = renderWithProviders(
-      <MediaMessage
-        isMyMessage={false}
+      <MediaMessage.Visitor
         message={msg({
           attachments: [
             {
               type: 'image',
               image_url: 'https://cdn.example.com/photo.jpg',
               mime_type: 'image/jpeg',
+              title: 'Solo',
             },
           ],
         })}
       />
     )
 
-    expect(container.querySelector('.bg-\\[\\#F3F3F1\\]')).toBeInTheDocument()
+    expect(container.querySelector('.str-chat__message')).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Download' })).toBeInTheDocument()
   })
 
-  it('shows download button for image attachment', () => {
-    renderWithProviders(
-      <MediaMessage
+  it('MediaMessage.Creator renders card without chat shell', () => {
+    const { container } = renderWithProviders(
+      <MediaMessage.Creator
         message={msg({
           attachments: [
             {
               type: 'image',
               image_url: 'https://cdn.example.com/photo.jpg',
               mime_type: 'image/jpeg',
-              title: 'My Photo',
             },
           ],
         })}
       />
     )
 
-    expect(screen.getByRole('button', { name: 'Download' })).toBeInTheDocument()
+    expect(container.querySelector('.str-chat__message')).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument()
   })
 
-  it('shows download button for audio attachment', () => {
-    renderWithProviders(
-      <MediaMessage
-        message={msg({
-          attachments: [
-            {
-              type: 'audio',
-              asset_url: 'https://cdn.example.com/track.mp3',
-              mime_type: 'audio/mpeg',
-              title: 'My Track',
-            },
-          ],
-        })}
-      />
-    )
-
-    expect(screen.getByRole('button', { name: 'Download' })).toBeInTheDocument()
-  })
+  it('Download button triggers fetch and uses fallback on failure', async () => {
+    const fetchSpy = vi.spyOn(global, 'fetch').mockRejectedValue(new Error('fail'))
+    const openSpy = vi.spyOn(window, 'open').mockReturnValue({
+      location: { href: '' },
+      close: vi.fn(),
+    } as unknown as Window)
 
-  it('does not show download or expand buttons for link cards', () => {
     renderWithProviders(
       <MediaMessage
         message={msg({
           attachments: [
             {
-              type: 'link',
-              og_scrape_url: 'https://linktr.ee/someone',
-              title: 'My Linktree',
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              mime_type: 'image/jpeg',
+              title: 'My Photo',
             },
           ],
         })}
       />
     )
 
-    expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument()
-    expect(screen.queryByRole('button', { name: 'View full screen' })).not.toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'Download' }))
+    await vi.waitFor(() => {
+      expect(fetchSpy).toHaveBeenCalled()
+    })
+
+    fetchSpy.mockRestore()
+    openSpy.mockRestore()
   })
 })