@linktr.ee/messaging-react 4.2.1 → 4.3.0-rc-1787410254

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

@@ -1,494 +0,0 @@
-import React from 'react'
-import type { LocalMessage } from 'stream-chat'
-import { describe, expect, it, vi } from 'vitest'
-
-import { renderWithProviders, screen, fireEvent } from '../../test/utils'
-
-import { MediaMessage, resolveLinkAttachment } from '.'
-
-vi.mock('../Avatar', () => ({
-  Avatar: ({ id }: { id: string }) => (
-    <div data-testid="avatar" data-user-id={id} />
-  ),
-}))
-
-vi.mock('../AttachmentCard/MediaPlayer', () => ({
-  default: ({ source, mimeType }: { source: string; mimeType: string }) => (
-    <div
-      role="button"
-      tabIndex={0}
-      data-testid="media-player"
-      data-source={source}
-      data-mime-type={mimeType}
-    />
-  ),
-}))
-
-vi.mock('../AttachmentCard/utils/icons', () => ({
-  renderTypeIcon: () => <span data-testid="type-icon" />,
-}))
-
-vi.mock('../AttachmentCard/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('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('renders an img for an image attachment', () => {
-    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')
-  })
-
-  it('renders unknown file type as icon placeholder, not a link', () => {
-    renderWithProviders(
-      <MediaMessage
-        message={msg({
-          attachments: [
-            {
-              type: 'file',
-              asset_url: 'https://cdn.example.com/data.bin',
-              mime_type: 'application/octet-stream',
-              title: 'Unknown File',
-            },
-          ],
-        })}
-      />
-    )
-
-    expect(screen.queryByRole('link')).not.toBeInTheDocument()
-    expect(screen.getByText('Unknown File')).toBeInTheDocument()
-    expect(screen.getAllByTestId('type-icon').length).toBeGreaterThanOrEqual(1)
-  })
-
-  it('shows title and file size in meta row', () => {
-    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('shows Download action for received (Visitor) 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('does not show literal placeholder title for sent image without title', () => {
-    renderWithProviders(
-      <MediaMessage
-        isMyMessage={true}
-        message={msg({
-          attachments: [
-            {
-              type: 'image',
-              image_url: 'https://cdn.example.com/photo.jpg',
-              mime_type: 'image/jpeg',
-            },
-          ],
-        })}
-      />
-    )
-
-    expect(screen.queryByText('Attachment title')).not.toBeInTheDocument()
-  })
-
-  it('does not show Download button for sent (Creator) 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.queryByRole('button', { name: 'Download' })
-    ).not.toBeInTheDocument()
-  })
-
-  it('shows Download action for received 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('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('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()
-  })
-
-  it('MediaMessage.Visitor renders card without chat shell', () => {
-    const { container } = renderWithProviders(
-      <MediaMessage.Visitor
-        message={msg({
-          attachments: [
-            {
-              type: 'image',
-              image_url: 'https://cdn.example.com/photo.jpg',
-              mime_type: 'image/jpeg',
-              title: 'Solo',
-            },
-          ],
-        })}
-      />
-    )
-
-    expect(
-      container.querySelector('.str-chat__message')
-    ).not.toBeInTheDocument()
-    expect(screen.getByRole('button', { name: 'Download' })).toBeInTheDocument()
-  })
-
-  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',
-            },
-          ],
-        })}
-      />
-    )
-
-    expect(
-      container.querySelector('.str-chat__message')
-    ).not.toBeInTheDocument()
-    expect(
-      screen.queryByRole('button', { name: 'Download' })
-    ).not.toBeInTheDocument()
-  })
-
-  it('resolveLinkAttachment ignores empty-string og_scrape_url without asset_url', () => {
-    const message = msg({
-      attachments: [
-        {
-          type: 'image',
-          image_url: 'https://cdn.example.com/photo.jpg',
-          mime_type: 'image/jpeg',
-          og_scrape_url: '',
-        },
-      ],
-    })
-    expect(resolveLinkAttachment(message)).toBeUndefined()
-  })
-
-  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)
-
-    renderWithProviders(
-      <MediaMessage
-        message={msg({
-          attachments: [
-            {
-              type: 'image',
-              image_url: 'https://cdn.example.com/photo.jpg',
-              mime_type: 'image/jpeg',
-              title: 'My Photo',
-            },
-          ],
-        })}
-      />
-    )
-
-    fireEvent.click(screen.getByRole('button', { name: 'Download' }))
-    await vi.waitFor(() => {
-      expect(fetchSpy).toHaveBeenCalled()
-    })
-
-    fetchSpy.mockRestore()
-    openSpy.mockRestore()
-  })
-})