@linktr.ee/messaging-react 1.32.1 → 1.33.0-rc-1777504230

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

@@ -0,0 +1,520 @@
+import React from 'react'
+import type { LocalMessage } from 'stream-chat'
+import { beforeAll, 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', () => ({
+  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}
+    />
+  ),
+}))
+
+vi.mock('../LockedAttachment/utils/icons', () => ({
+  renderTypeIcon: () => <span data-testid="type-icon" />,
+}))
+
+vi.mock('../LockedAttachment/utils/mimeType', () => ({
+  getSourceType: (mimeType: string) => {
+    if (mimeType.startsWith('video/')) return 'video'
+    if (mimeType.startsWith('image/')) return 'image'
+    if (mimeType.startsWith('audio/')) return 'audio'
+    return 'document'
+  },
+}))
+
+const msg = (overrides: Record<string, unknown> = {}): LocalMessage =>
+  ({
+    id: 'msg-1',
+    text: '',
+    type: 'regular',
+    created_at: new Date(),
+    updated_at: new Date(),
+    deleted_at: null,
+    pinned_at: null,
+    status: 'received',
+    user: { id: 'user-1', name: 'Alice' },
+    attachments: [],
+    ...overrides,
+  }) as unknown as LocalMessage
+
+describe('MediaMessage', () => {
+  it('renders nothing when no media URL is resolvable', () => {
+    const { container } = renderWithProviders(<MediaMessage message={msg()} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders MediaPlayer immediately for a video attachment', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'video',
+              asset_url: 'https://cdn.example.com/clip.mp4',
+              mime_type: 'video/mp4',
+              title: 'My Clip',
+            },
+          ],
+        })}
+      />
+    )
+
+    const player = screen.getByTestId('media-player')
+    expect(player).toBeInTheDocument()
+    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',
+            },
+          ],
+        })}
+      />
+    )
+
+    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', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'audio',
+              asset_url: 'https://cdn.example.com/track.mp3',
+              mime_type: 'audio/mpeg',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(screen.getByTestId('media-player')).toHaveAttribute(
+      'data-source',
+      'https://cdn.example.com/track.mp3'
+    )
+  })
+
+  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({
+          attachments: [
+            {
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              mime_type: 'image/jpeg',
+              title: 'My Photo',
+            },
+          ],
+        })}
+      />
+    )
+
+    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('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({
+          attachments: [
+            {
+              type: 'file',
+              asset_url: 'https://cdn.example.com/report.pdf',
+              mime_type: 'application/pdf',
+              title: 'Annual Report',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(screen.getByRole('button', { name: 'Open PDF viewer' })).toBeInTheDocument()
+    expect(screen.getByText('Annual Report')).toBeInTheDocument()
+  })
+
+  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({
+          attachments: [
+            {
+              type: 'video',
+              asset_url: 'https://cdn.example.com/clip.mp4',
+              mime_type: 'video/mp4',
+              title: 'Clip',
+              file_size: 2048,
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(screen.getByText('Clip')).toBeInTheDocument()
+    expect(screen.getByText('2.0 KB')).toBeInTheDocument()
+  })
+
+  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',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(screen.getByTestId('avatar')).toBeInTheDocument()
+    expect(screen.getByTestId('avatar')).toHaveAttribute('data-user-id', 'user-1')
+  })
+
+  it('does not render Avatar for own messages', () => {
+    renderWithProviders(
+      <MediaMessage
+        isMyMessage={true}
+        message={msg({
+          attachments: [
+            {
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              mime_type: 'image/jpeg',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(screen.queryByTestId('avatar')).not.toBeInTheDocument()
+  })
+
+  it('applies the --me class for own 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.firstChild).toHaveClass('str-chat__message--me')
+  })
+
+  it('applies the --other class for messages from other users', () => {
+    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.firstChild).toHaveClass('str-chat__message--other')
+  })
+
+  it('renders nothing when no attachments', () => {
+    const { container } = renderWithProviders(
+      <MediaMessage message={msg({ attachments: [] })} />
+    )
+
+    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()
+  })
+})