@linktr.ee/messaging-react 1.33.2 → 1.33.3-rc-1777507218

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

@@ -1,11 +1,20 @@
 import React from 'react'
 import type { LocalMessage } from 'stream-chat'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeAll, describe, expect, it, vi } from 'vitest'
 
-import { renderWithProviders, screen } from '../../test/utils'
+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} />
@@ -16,14 +25,20 @@ vi.mock('../LockedAttachment/components/MediaPlayer', () => ({
   default: ({
     source,
     mimeType,
+    onContainerClick,
   }: {
     source: string
     mimeType: string
+    onContainerClick?: (e: React.MouseEvent) => void
   }) => (
     <div
+      role="button"
+      tabIndex={0}
       data-testid="media-player"
       data-source={source}
       data-mime-type={mimeType}
+      onClick={onContainerClick}
+      onKeyDown={undefined}
     />
   ),
 }))
@@ -41,7 +56,6 @@ vi.mock('../LockedAttachment/utils/mimeType', () => ({
   },
 }))
 
-// Cast through unknown to avoid satisfying every optional field of LocalMessage
 const msg = (overrides: Record<string, unknown> = {}): LocalMessage =>
   ({
     id: 'msg-1',
@@ -63,7 +77,7 @@ describe('MediaMessage', () => {
     expect(container.firstChild).toBeNull()
   })
 
-  it('renders MediaPlayer for a video attachment', () => {
+  it('renders MediaPlayer immediately for a video attachment', () => {
     renderWithProviders(
       <MediaMessage
         message={msg({
@@ -72,6 +86,7 @@ describe('MediaMessage', () => {
               type: 'video',
               asset_url: 'https://cdn.example.com/clip.mp4',
               mime_type: 'video/mp4',
+              title: 'My Clip',
             },
           ],
         })}
@@ -80,11 +95,28 @@ describe('MediaMessage', () => {
 
     const player = screen.getByTestId('media-player')
     expect(player).toBeInTheDocument()
-    expect(player).toHaveAttribute(
-      'data-source',
-      'https://cdn.example.com/clip.mp4'
+    expect(player).toHaveAttribute('data-source', 'https://cdn.example.com/clip.mp4')
+  })
+
+  it('opens viewer when the video player container is clicked', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'video',
+              asset_url: 'https://cdn.example.com/clip.mp4',
+              mime_type: 'video/mp4',
+              title: 'My Clip',
+            },
+          ],
+        })}
+      />
     )
-    expect(player).toHaveAttribute('data-mime-type', 'video/mp4')
+
+    fireEvent.click(screen.getByTestId('media-player'))
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalled()
+    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument()
   })
 
   it('renders MediaPlayer for an audio attachment', () => {
@@ -108,7 +140,27 @@ describe('MediaMessage', () => {
     )
   })
 
-  it('renders an img for an image attachment', () => {
+  it('does not show viewer or expand button for audio', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'audio',
+              asset_url: 'https://cdn.example.com/track.mp3',
+              mime_type: 'audio/mpeg',
+              title: 'My Track',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(screen.queryByRole('button', { name: 'View full screen' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Close' })).not.toBeInTheDocument()
+  })
+
+  it('renders an img for an image attachment and opens viewer on click', () => {
     renderWithProviders(
       <MediaMessage
         message={msg({
@@ -126,9 +178,36 @@ describe('MediaMessage', () => {
 
     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)
   })
 
-  it('renders a download link for a document attachment', () => {
+  it('does not show expand button in chin for images, only download', () => {
+    renderWithProviders(
+      <MediaMessage
+        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()
+  })
+
+  it('renders PDF card with a viewer button', () => {
     renderWithProviders(
       <MediaMessage
         message={msg({
@@ -144,13 +223,56 @@ describe('MediaMessage', () => {
       />
     )
 
-    const link = screen.getByRole('link')
-    expect(link).toHaveAttribute('href', 'https://cdn.example.com/report.pdf')
+    expect(screen.getByRole('button', { name: 'Open PDF viewer' })).toBeInTheDocument()
     expect(screen.getByText('Annual Report')).toBeInTheDocument()
-    expect(screen.getByTestId('type-icon')).toBeInTheDocument()
   })
 
-  it('shows title and file size below video', () => {
+  it('opens PDF viewer when PDF thumbnail is clicked', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'file',
+              asset_url: 'https://cdn.example.com/report.pdf',
+              mime_type: 'application/pdf',
+              title: 'Annual Report',
+            },
+          ],
+        })}
+      />
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Open PDF viewer' }))
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalled()
+    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument()
+  })
+
+  it('renders unknown file as a link with no viewer button', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'file',
+              asset_url: 'https://cdn.example.com/data.bin',
+              mime_type: 'application/octet-stream',
+              title: 'Unknown File',
+            },
+          ],
+        })}
+      />
+    )
+
+    // 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()
+  })
+
+  it('shows title and file size in chin', () => {
     renderWithProviders(
       <MediaMessage
         message={msg({
@@ -188,10 +310,7 @@ describe('MediaMessage', () => {
     )
 
     expect(screen.getByTestId('avatar')).toBeInTheDocument()
-    expect(screen.getByTestId('avatar')).toHaveAttribute(
-      'data-user-id',
-      'user-1'
-    )
+    expect(screen.getByTestId('avatar')).toHaveAttribute('data-user-id', 'user-1')
   })
 
   it('does not render Avatar for own messages', () => {
@@ -258,4 +377,144 @@ describe('MediaMessage', () => {
 
     expect(container.firstChild).toBeNull()
   })
+
+  it('renders a link card for a link attachment', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'link',
+              og_scrape_url: 'https://linktr.ee/someone',
+              title: 'My Linktree',
+              text: 'Check out my links',
+              image_url: 'https://cdn.example.com/thumb.jpg',
+            },
+          ],
+        })}
+      />
+    )
+
+    const link = screen.getByRole('link')
+    expect(link).toHaveAttribute('href', 'https://linktr.ee/someone')
+    expect(screen.getByText('My Linktree')).toBeInTheDocument()
+    expect(screen.getByText('Check out my links')).toBeInTheDocument()
+    expect(screen.getByText('https://linktr.ee/someone')).toBeInTheDocument()
+    const img = screen.getByRole('img', { name: 'My Linktree' })
+    expect(img).toHaveAttribute('src', 'https://cdn.example.com/thumb.jpg')
+  })
+
+  it('renders a link fallback icon when link has no image', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'link',
+              og_scrape_url: 'https://linktr.ee/someone',
+              title: 'My Linktree',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
+    expect(screen.getByText('My Linktree')).toBeInTheDocument()
+  })
+
+  it('uses dark card background for sent messages', () => {
+    const { container } = renderWithProviders(
+      <MediaMessage
+        isMyMessage={true}
+        message={msg({
+          attachments: [
+            {
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              mime_type: 'image/jpeg',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(container.querySelector('.bg-\\[\\#121110\\]')).toBeInTheDocument()
+  })
+
+  it('uses light card background for received messages', () => {
+    const { container } = renderWithProviders(
+      <MediaMessage
+        isMyMessage={false}
+        message={msg({
+          attachments: [
+            {
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              mime_type: 'image/jpeg',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(container.querySelector('.bg-\\[\\#F3F3F1\\]')).toBeInTheDocument()
+  })
+
+  it('shows download button for image attachment', () => {
+    renderWithProviders(
+      <MediaMessage
+        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()
+  })
+
+  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('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',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'View full screen' })).not.toBeInTheDocument()
+  })
 })