@linktr.ee/messaging-react 4.1.6 → 4.1.7-rc-1787179679

package/src/components/AttachmentCard/Thumbnail.test.tsx

@@ -0,0 +1,215 @@
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { fireEvent, renderWithProviders, screen } from '../../test/utils'
+
+import AttachmentThumbnail from './Thumbnail'
+
+vi.mock('./MediaPlayer', () => ({
+  default: ({
+    source,
+    mimeType,
+    poster,
+    controls,
+    loop,
+    muted,
+  }: {
+    source: string
+    mimeType: string
+    poster?: string
+    controls?: boolean
+    loop?: boolean
+    muted?: boolean
+  }) => (
+    <div
+      data-testid="media-player"
+      data-source={source}
+      data-mime-type={mimeType}
+      data-poster={poster}
+      data-controls={String(controls)}
+      data-loop={String(loop)}
+      data-muted={String(muted)}
+    />
+  ),
+}))
+
+const LINKTREE_SOURCE = 'https://cdn.linktr.ee/attachment/photo.jpg'
+const LINKTREE_THUMBNAIL = 'https://cdn.linktr.ee/attachment/poster.jpg'
+const OPTIMIZED_SOURCE =
+  'https://cdn.linktr.ee/attachment/photo.jpg?io=true&size=messaging-attachment-v1_0'
+const OPTIMIZED_THUMBNAIL =
+  'https://cdn.linktr.ee/attachment/poster.jpg?io=true&size=messaging-attachment-v1_0'
+
+describe('AttachmentThumbnail', () => {
+  it('delegates video and audio sources to MediaPlayer with an optimized poster', () => {
+    const { rerender } = renderWithProviders(
+      <AttachmentThumbnail
+        mimeType="video/mp4"
+        sourceUrl={LINKTREE_SOURCE}
+        thumbnailUrl={LINKTREE_THUMBNAIL}
+        variant="dark"
+        mediaPlayerProps={{ controls: false, loop: true, muted: true }}
+      />
+    )
+    const player = screen.getByTestId('media-player')
+    expect(player).toHaveAttribute('data-source', LINKTREE_SOURCE)
+    expect(player).toHaveAttribute('data-mime-type', 'video/mp4')
+    expect(player).toHaveAttribute('data-poster', OPTIMIZED_THUMBNAIL)
+    expect(player).toHaveAttribute('data-controls', 'false')
+    expect(player).toHaveAttribute('data-loop', 'true')
+    expect(player).toHaveAttribute('data-muted', 'true')
+
+    rerender(
+      <AttachmentThumbnail
+        mimeType="audio/mpeg"
+        sourceUrl="https://external.example/track.mp3"
+        variant="light"
+      />
+    )
+    expect(screen.getByTestId('media-player')).toHaveAttribute(
+      'data-source',
+      'https://external.example/track.mp3'
+    )
+    expect(screen.getByTestId('media-player')).toHaveAttribute(
+      'data-controls',
+      'true'
+    )
+  })
+
+  it('renders an image with an optimized source and contained fade-in transition', () => {
+    const { container } = renderWithProviders(
+      <AttachmentThumbnail
+        mimeType="image/jpeg"
+        sourceUrl={LINKTREE_SOURCE}
+        title="Photo"
+        variant="light"
+        containedImage
+      />
+    )
+    const image = screen.getByRole('img', { name: 'Photo' })
+    expect(image).toHaveAttribute('src', OPTIMIZED_SOURCE)
+    expect(image).toHaveClass('opacity-0')
+    fireEvent.load(image)
+    expect(image).toHaveClass('opacity-100')
+    expect(container.firstElementChild).toHaveClass('aspect-video')
+  })
+
+  it('renders a non-contained image and falls back to the raw URL', () => {
+    renderWithProviders(
+      <AttachmentThumbnail
+        mimeType="image/jpeg"
+        sourceUrl="https://external.example/photo.jpg"
+        variant="light"
+      />
+    )
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'src',
+      'https://external.example/photo.jpg'
+    )
+    expect(screen.getByRole('img')).toHaveClass('block', 'w-full')
+    expect(screen.getByRole('img')).toHaveAttribute('alt', '')
+  })
+
+  it('renders document thumbnails contained or full width, using optimized URLs', () => {
+    const { rerender, container } = renderWithProviders(
+      <AttachmentThumbnail
+        mimeType="application/pdf"
+        sourceUrl="https://external.example/document.pdf"
+        thumbnailUrl={LINKTREE_THUMBNAIL}
+        title="Document"
+        variant="dark"
+        containedImage
+      />
+    )
+    const contained = screen.getByRole('img', { name: 'Document' })
+    expect(contained).toHaveAttribute('src', OPTIMIZED_THUMBNAIL)
+    expect(contained).toHaveClass('opacity-0')
+    fireEvent.load(contained)
+    expect(contained).toHaveClass('opacity-100')
+    expect(container.firstElementChild).toHaveClass('aspect-video')
+
+    rerender(
+      <AttachmentThumbnail
+        mimeType="application/pdf"
+        sourceUrl="https://external.example/document.pdf"
+        thumbnailUrl="https://external.example/thumb.png"
+        title="Document"
+        variant="light"
+      />
+    )
+    const fullWidth = screen.getByRole('img')
+    expect(fullWidth).toHaveAttribute(
+      'src',
+      'https://external.example/thumb.png'
+    )
+    expect(fullWidth).toHaveAttribute('alt', '')
+    expect(fullWidth).toHaveClass('block', 'w-full')
+  })
+
+  it('renders a document icon placeholder without a thumbnail', () => {
+    const dark = renderWithProviders(
+      <AttachmentThumbnail
+        mimeType="application/pdf"
+        variant="dark"
+        title="PDF"
+      />
+    )
+    const darkIcon = dark.container.querySelector('svg') as SVGElement
+    expect(darkIcon).toHaveClass('size-12', 'text-white/20')
+    expect(dark.container.firstElementChild).toHaveClass('bg-white/10')
+    dark.unmount()
+
+    const light = renderWithProviders(
+      <AttachmentThumbnail mimeType="application/pdf" variant="light" />
+    )
+    const lightIcon = light.container.querySelector('svg') as SVGElement
+    expect(lightIcon).toHaveClass('size-12', 'text-black/20')
+    expect(light.container.firstElementChild).toHaveClass('bg-black/5')
+  })
+
+  it('renders the poster-only branch with variant-specific shell and alt fallback', () => {
+    const dark = renderWithProviders(
+      <AttachmentThumbnail
+        mimeType="image/jpeg"
+        thumbnailUrl={LINKTREE_THUMBNAIL}
+        title="Poster"
+        variant="dark"
+      />
+    )
+    const darkImage = screen.getByRole('img', { name: 'Poster' })
+    expect(darkImage).toHaveAttribute('src', OPTIMIZED_THUMBNAIL)
+    expect(dark.container.firstElementChild).toHaveClass(
+      'aspect-video',
+      'bg-white/10'
+    )
+    dark.unmount()
+
+    const light = renderWithProviders(
+      <AttachmentThumbnail
+        mimeType="image/jpeg"
+        thumbnailUrl="https://external.example/poster.jpg"
+        variant="light"
+      />
+    )
+    expect(screen.getByRole('img')).toHaveAttribute('alt', '')
+    expect(light.container.firstElementChild).toHaveClass(
+      'aspect-video',
+      'bg-black/5'
+    )
+  })
+
+  it('renders the empty branch with a light placeholder', () => {
+    const { container } = renderWithProviders(
+      <AttachmentThumbnail
+        mimeType="application/octet-stream"
+        variant="light"
+      />
+    )
+    expect(container.querySelector('img')).toBeNull()
+    expect(container.querySelector('svg')).toHaveClass(
+      'size-12',
+      'text-black/20'
+    )
+    expect(container.firstElementChild).toHaveClass('bg-black/5')
+  })
+})

package/src/components/AttachmentCard/index.test.tsx

@@ -0,0 +1,160 @@
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+
+import { renderWithProviders, screen } from '../../test/utils'
+
+import AttachmentCard from './index'
+
+const thumbnail = <div data-testid="thumbnail">thumbnail</div>
+
+describe('AttachmentCard', () => {
+  it('applies the dark and light root surfaces and type icon colors', () => {
+    const dark = renderWithProviders(
+      <AttachmentCard
+        variant="dark"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+        title="Dark file"
+      />
+    )
+    expect(screen.getByText('Dark file')).toBeInTheDocument()
+    expect(dark.container.firstElementChild).toHaveClass('bg-[#1e2330]')
+    expect(dark.container.querySelector('svg')).toHaveClass('text-white/55')
+    dark.unmount()
+
+    const light = renderWithProviders(
+      <AttachmentCard
+        variant="light"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+        title="Light file"
+      />
+    )
+    expect(light.container.firstElementChild).toHaveClass('bg-white')
+    expect(light.container.querySelector('svg')).toHaveClass('text-black/55')
+  })
+
+  it('uses the dark placeholder title and dims it when title is absent', () => {
+    renderWithProviders(
+      <AttachmentCard
+        variant="dark"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+        placeholderTitle="Waiting for title"
+      />
+    )
+    expect(screen.getByText('Waiting for title')).toHaveClass('text-white/30')
+  })
+
+  it('does not render a light title for missing or whitespace-only values', () => {
+    const { rerender } = renderWithProviders(
+      <AttachmentCard
+        variant="light"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+      />
+    )
+    expect(screen.queryByText('Attachment title')).toBeNull()
+
+    rerender(
+      <AttachmentCard
+        variant="light"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+        title="   "
+      />
+    )
+    expect(screen.queryByText('   ')).toBeNull()
+  })
+
+  it('uses an undimmed title class when a dark title is provided', () => {
+    renderWithProviders(
+      <AttachmentCard
+        variant="dark"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+        title="Named file"
+      />
+    )
+    expect(screen.getByText('Named file')).toHaveClass('text-white')
+    expect(screen.getByText('Named file')).not.toHaveClass('text-white/30')
+  })
+
+  it('renders detail only for non-empty values', () => {
+    const { rerender } = renderWithProviders(
+      <AttachmentCard
+        variant="light"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+        title="File"
+        detail="2 MB"
+      />
+    )
+    expect(screen.getByText('2 MB')).toBeInTheDocument()
+
+    rerender(
+      <AttachmentCard
+        variant="light"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+        title="File"
+        detail=""
+      />
+    )
+    expect(screen.queryByText('2 MB')).toBeNull()
+  })
+
+  it('renders optional slots only when supplied', () => {
+    const { container } = renderWithProviders(
+      <AttachmentCard
+        variant="light"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+        statusBadge={<span>Ready</span>}
+        action={<button type="button">Open</button>}
+        topLeft={<span>Left</span>}
+        topRight={<span>Right</span>}
+      />
+    )
+    expect(screen.getByText('Ready')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Open' })).toBeInTheDocument()
+    expect(screen.getByText('Left').parentElement).toHaveClass(
+      'pointer-events-auto',
+      'absolute',
+      'left-3',
+      'top-3'
+    )
+    expect(screen.getByText('Right').parentElement).toHaveClass(
+      'pointer-events-auto',
+      'absolute',
+      'right-3',
+      'top-3'
+    )
+    expect(container.querySelectorAll('.pointer-events-auto')).toHaveLength(2)
+
+    const withoutSlots = renderWithProviders(
+      <AttachmentCard
+        variant="light"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+      />
+    )
+    expect(
+      withoutSlots.container.querySelectorAll('.pointer-events-auto')
+    ).toHaveLength(0)
+  })
+
+  it('forwards rootRef and data-testid to the root', () => {
+    const rootRef = React.createRef<HTMLDivElement>()
+    renderWithProviders(
+      <AttachmentCard
+        variant="light"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+        rootRef={rootRef}
+        data-testid="attachment-card"
+      />
+    )
+    expect(screen.getByTestId('attachment-card')).toBe(rootRef.current)
+  })
+})

package/src/components/ChannelList/ChannelListContext.test.tsx

@@ -0,0 +1,87 @@
+import type { Channel } from 'stream-chat'
+import { describe, expect, it, vi } from 'vitest'
+
+import { fireEvent, renderWithProviders, screen } from '../../test/utils'
+
+import {
+  ChannelListProvider,
+  useChannelListContext,
+} from './ChannelListContext'
+
+const channel = { id: 'channel-1' } as Channel
+
+function ContextConsumer() {
+  const value = useChannelListContext()
+
+  return (
+    <div>
+      <span data-testid="selected-channel">
+        {value.selectedChannel?.id ?? 'undefined'}
+      </span>
+      <span data-testid="debug">{String(value.debug)}</span>
+      <span data-testid="render-message-preview">
+        {value.renderMessagePreview ? 'provided' : 'undefined'}
+      </span>
+      <span data-testid="channel-preview">
+        {value.channelPreview ? 'provided' : 'undefined'}
+      </span>
+      <span data-testid="viewer-language">
+        {value.viewerLanguage ?? 'undefined'}
+      </span>
+      <button type="button" onClick={() => value.onChannelSelect(channel)}>
+        Select channel
+      </button>
+    </div>
+  )
+}
+
+describe('ChannelListContext', () => {
+  it('provides safe documented defaults without a provider', () => {
+    renderWithProviders(<ContextConsumer />)
+
+    expect(screen.getByTestId('selected-channel')).toHaveTextContent(
+      'undefined'
+    )
+    expect(screen.getByTestId('debug')).toHaveTextContent('false')
+    expect(screen.getByTestId('render-message-preview')).toHaveTextContent(
+      'undefined'
+    )
+    expect(screen.getByTestId('channel-preview')).toHaveTextContent('undefined')
+    expect(screen.getByTestId('viewer-language')).toHaveTextContent('undefined')
+    expect(() => fireEvent.click(screen.getByRole('button'))).not.toThrow()
+  })
+
+  it('exposes the value supplied by a provider', () => {
+    const onChannelSelect = vi.fn()
+    const ChannelPreview = () => null
+    const renderMessagePreview = () => 'preview'
+
+    renderWithProviders(
+      <ChannelListProvider
+        value={{
+          selectedChannel: channel,
+          onChannelSelect,
+          debug: true,
+          renderMessagePreview,
+          channelPreview: ChannelPreview,
+          viewerLanguage: 'es',
+        }}
+      >
+        <ContextConsumer />
+      </ChannelListProvider>
+    )
+
+    expect(screen.getByTestId('selected-channel')).toHaveTextContent(
+      'channel-1'
+    )
+    expect(screen.getByTestId('debug')).toHaveTextContent('true')
+    expect(screen.getByTestId('render-message-preview')).toHaveTextContent(
+      'provided'
+    )
+    expect(screen.getByTestId('channel-preview')).toHaveTextContent('provided')
+    expect(screen.getByTestId('viewer-language')).toHaveTextContent('es')
+
+    fireEvent.click(screen.getByRole('button'))
+    expect(onChannelSelect).toHaveBeenCalledWith(channel)
+  })
+})