@linktr.ee/messaging-react 4.2.0-rc-1787325521 → 4.2.0-rc-1787599724

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

@@ -1,346 +0,0 @@
-import React from 'react'
-import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
-
-import {
-  fireEvent,
-  renderWithProviders,
-  screen,
-  waitFor,
-} from '../../test/utils'
-
-import MediaPlayer from './MediaPlayer'
-
-const SOURCE = 'https://cdn.example.com/preview.mp4'
-const POSTER = 'https://cdn.example.com/poster.jpg'
-
-describe('MediaPlayer', () => {
-  beforeEach(() => {
-    vi.spyOn(HTMLMediaElement.prototype, 'play').mockResolvedValue(undefined)
-    vi.spyOn(HTMLMediaElement.prototype, 'pause').mockImplementation(() => {})
-    vi.stubGlobal(
-      'requestAnimationFrame',
-      vi.fn(() => 1)
-    )
-    vi.stubGlobal('cancelAnimationFrame', vi.fn())
-  })
-
-  afterEach(() => {
-    vi.restoreAllMocks()
-    vi.unstubAllGlobals()
-  })
-
-  it('selects audio or video from the mime type and wires media props', () => {
-    const { container, rerender } = renderWithProviders(
-      <MediaPlayer
-        source={SOURCE}
-        mimeType="audio/mpeg"
-        loop
-        muted
-        controls={false}
-      />
-    )
-
-    const audio = container.querySelector('audio') as HTMLAudioElement
-    expect(audio).toBeInTheDocument()
-    expect(audio).toHaveAttribute('src', SOURCE)
-    expect(audio.loop).toBe(true)
-    expect(audio.muted).toBe(true)
-    expect(container.querySelector('video')).toBeNull()
-
-    rerender(
-      <MediaPlayer
-        source={SOURCE}
-        mimeType="video/mp4"
-        loop
-        muted
-        controls={false}
-      />
-    )
-
-    const video = container.querySelector('video') as HTMLVideoElement
-    expect(video).toBeInTheDocument()
-    expect(video).toHaveAttribute('src', SOURCE)
-    expect(video.loop).toBe(true)
-    expect(video.muted).toBe(true)
-    expect(video.playsInline).toBe(true)
-    expect(container.querySelector('audio')).toBeNull()
-  })
-
-  it('keeps an audio poster after canPlay but hides a video poster', () => {
-    const audio = renderWithProviders(
-      <MediaPlayer source={SOURCE} mimeType="audio/mpeg" poster={POSTER} />
-    )
-    const audioElement = audio.container.querySelector(
-      'audio'
-    ) as HTMLAudioElement
-    expect(audio.container.querySelectorAll('img')).toHaveLength(1)
-    fireEvent.canPlay(audioElement)
-    expect(audio.container.querySelectorAll('img')).toHaveLength(1)
-    audio.unmount()
-
-    const video = renderWithProviders(
-      <MediaPlayer source={SOURCE} mimeType="video/mp4" poster={POSTER} />
-    )
-    const videoElement = video.container.querySelector(
-      'video'
-    ) as HTMLVideoElement
-    expect(video.container.querySelectorAll('img')).toHaveLength(1)
-    fireEvent.canPlay(videoElement)
-    expect(video.container.querySelectorAll('img')).toHaveLength(0)
-  })
-
-  it('uses a type icon as the initial placeholder when no poster is provided', async () => {
-    const { container } = renderWithProviders(
-      <MediaPlayer source={SOURCE} mimeType="video/mp4" />
-    )
-    const video = container.querySelector('video') as HTMLVideoElement
-    const placeholderIcon = () =>
-      Array.from(container.querySelectorAll('svg')).find((svg) =>
-        svg.classList.contains('size-12')
-      )
-
-    expect(placeholderIcon()).toBeInTheDocument()
-    fireEvent.canPlay(video)
-    await waitFor(() => expect(placeholderIcon()).toBeUndefined())
-  })
-
-  it('syncs controlled playback and calls play or pause imperatively', async () => {
-    const play = vi.mocked(HTMLMediaElement.prototype.play)
-    const pause = vi.mocked(HTMLMediaElement.prototype.pause)
-    const { container, rerender } = renderWithProviders(
-      <MediaPlayer source={SOURCE} mimeType="video/mp4" playing={false} />
-    )
-    const video = container.querySelector('video') as HTMLVideoElement
-    expect(pause).toHaveBeenCalled()
-
-    rerender(
-      <MediaPlayer source={SOURCE} mimeType="video/mp4" playing={true} />
-    )
-    await waitFor(() => expect(play).toHaveBeenCalledWith())
-    expect(video).toBeInTheDocument()
-
-    rerender(
-      <MediaPlayer source={SOURCE} mimeType="video/mp4" playing={false} />
-    )
-    await waitFor(() => expect(pause.mock.calls.length).toBeGreaterThan(1))
-  })
-
-  it('shows a manual play overlay after rejected playback and starts from a gesture', async () => {
-    const play = vi.mocked(HTMLMediaElement.prototype.play)
-    play.mockRejectedValueOnce(new Error('autoplay blocked'))
-    const onContainerClick = vi.fn()
-
-    renderWithProviders(
-      <MediaPlayer
-        source={SOURCE}
-        mimeType="video/mp4"
-        autoPlay
-        controls={false}
-        onContainerClick={onContainerClick}
-      />
-    )
-
-    const overlay = await screen.findByRole('button', { name: 'Play preview' })
-    expect(play).toHaveBeenCalledTimes(1)
-    fireEvent.click(overlay)
-    await waitFor(() => expect(play).toHaveBeenCalledTimes(2))
-    expect(onContainerClick).not.toHaveBeenCalled()
-    expect(screen.queryByRole('button', { name: 'Play preview' })).toBeNull()
-  })
-
-  it('toggles from the container only with controls, while an override owns the click', async () => {
-    const play = vi.mocked(HTMLMediaElement.prototype.play)
-    const { container, rerender } = renderWithProviders(
-      <MediaPlayer source={SOURCE} mimeType="video/mp4" controls />
-    )
-    const root = container.firstElementChild as HTMLElement
-
-    fireEvent.click(root)
-    await waitFor(() =>
-      expect(screen.getByRole('button', { name: 'Pause' })).toBeInTheDocument()
-    )
-    fireEvent.click(root)
-    await waitFor(() =>
-      expect(screen.getByRole('button', { name: 'Play' })).toBeInTheDocument()
-    )
-    expect(play).toHaveBeenCalledTimes(1)
-
-    const onContainerClick = vi.fn()
-    rerender(
-      <MediaPlayer
-        source={SOURCE}
-        mimeType="video/mp4"
-        controls
-        onContainerClick={onContainerClick}
-      />
-    )
-    fireEvent.click(root)
-    expect(onContainerClick).toHaveBeenCalledTimes(1)
-    expect(screen.getByRole('button', { name: 'Play' })).toBeInTheDocument()
-    fireEvent.keyDown(root, { key: 'Enter' })
-    expect(onContainerClick).toHaveBeenCalledTimes(2)
-  })
-
-  it('handles Enter and Space but ignores other container keys and prevents defaults', () => {
-    const { container } = renderWithProviders(
-      <MediaPlayer source={SOURCE} mimeType="video/mp4" controls />
-    )
-    const root = container.firstElementChild as HTMLElement
-    const pause = () => screen.getByRole('button', { name: 'Pause' })
-
-    const otherKey = new KeyboardEvent('keydown', {
-      key: 'ArrowDown',
-      bubbles: true,
-      cancelable: true,
-    })
-    fireEvent(root, otherKey)
-    expect(otherKey.defaultPrevented).toBe(false)
-    expect(screen.queryByRole('button', { name: 'Pause' })).toBeNull()
-
-    const enter = new KeyboardEvent('keydown', {
-      key: 'Enter',
-      bubbles: true,
-      cancelable: true,
-    })
-    fireEvent(root, enter)
-    expect(enter.defaultPrevented).toBe(true)
-    expect(pause()).toBeInTheDocument()
-
-    const space = new KeyboardEvent('keydown', {
-      key: ' ',
-      bubbles: true,
-      cancelable: true,
-    })
-    fireEvent(root, space)
-    expect(space.defaultPrevented).toBe(true)
-    expect(screen.getByRole('button', { name: 'Play' })).toBeInTheDocument()
-  })
-
-  it('does not let the controls button bubble into the container toggle', async () => {
-    const { container } = renderWithProviders(
-      <MediaPlayer source={SOURCE} mimeType="video/mp4" controls />
-    )
-    const button = screen.getByRole('button', { name: 'Play' })
-
-    fireEvent.click(button)
-    await waitFor(() =>
-      expect(screen.getByRole('button', { name: 'Pause' })).toBeInTheDocument()
-    )
-    expect(container.firstElementChild).toBeInTheDocument()
-  })
-
-  it('shows buffering while loading and suppresses it after manual play is required', async () => {
-    const play = vi.mocked(HTMLMediaElement.prototype.play)
-    play.mockRejectedValueOnce(new Error('autoplay blocked'))
-    const { container } = renderWithProviders(
-      <MediaPlayer
-        source={SOURCE}
-        mimeType="video/mp4"
-        autoPlay
-        controls={false}
-      />
-    )
-    const video = container.querySelector('video') as HTMLVideoElement
-    await screen.findByRole('button', { name: 'Play preview' })
-
-    fireEvent.loadStart(video)
-    expect(container.querySelector('.animate-spin')).toBeNull()
-
-    fireEvent.canPlay(video)
-    expect(container.querySelector('.animate-spin')).toBeNull()
-  })
-
-  it('shows and hides the buffering spinner around media readiness', () => {
-    const { container } = renderWithProviders(
-      <MediaPlayer source={SOURCE} mimeType="video/mp4" />
-    )
-    const video = container.querySelector('video') as HTMLVideoElement
-
-    fireEvent.loadStart(video)
-    expect(container.querySelector('.animate-spin')).toBeInTheDocument()
-    fireEvent.waiting(video)
-    expect(container.querySelector('.animate-spin')).toBeInTheDocument()
-    fireEvent.canPlay(video)
-    expect(container.querySelector('.animate-spin')).toBeNull()
-  })
-
-  it('seeks with keyboard and pointer input and expands the scrubber on hover', () => {
-    const { container } = renderWithProviders(
-      <MediaPlayer source={SOURCE} mimeType="video/mp4" controls showProgress />
-    )
-    const video = container.querySelector('video') as HTMLVideoElement
-    Object.defineProperty(video, 'duration', {
-      configurable: true,
-      value: 100,
-    })
-    const slider = screen.getByRole('slider', { name: 'Playback position' })
-    const track = slider.firstElementChild as HTMLElement
-    const thumb = slider.lastElementChild as HTMLElement
-    vi.spyOn(slider, 'getBoundingClientRect').mockReturnValue({
-      left: 100,
-      right: 300,
-      top: 0,
-      bottom: 10,
-      width: 200,
-      height: 10,
-      x: 100,
-      y: 0,
-      toJSON: () => ({}),
-    })
-
-    expect(track).toHaveClass('h-1')
-    expect(thumb).toHaveClass('scale-0', 'opacity-0')
-    fireEvent.mouseEnter(slider)
-    expect(track).toHaveClass('h-1.5')
-    expect(thumb).toHaveClass('scale-100', 'opacity-100')
-    fireEvent.mouseLeave(slider)
-    expect(track).toHaveClass('h-1')
-
-    fireEvent.mouseDown(slider, { clientX: 150 })
-    expect(slider).toHaveAttribute('aria-valuenow', '25')
-    expect(video.currentTime).toBe(25)
-    expect(track).toHaveClass('h-1.5')
-    expect(thumb).toHaveClass('scale-100', 'opacity-100')
-
-    fireEvent.mouseUp(window, { clientX: 150 })
-    fireEvent.keyDown(slider, { key: 'ArrowRight' })
-    expect(video.currentTime).toBe(30)
-    fireEvent.keyDown(slider, { key: 'ArrowLeft' })
-    expect(video.currentTime).toBe(20)
-  })
-
-  it('renders the progress-only track without controls when requested', () => {
-    const { container } = renderWithProviders(
-      <MediaPlayer
-        source={SOURCE}
-        mimeType="video/mp4"
-        controls={false}
-        showProgress
-      />
-    )
-
-    expect(
-      screen.getByRole('slider', { name: 'Playback position' })
-    ).toBeInTheDocument()
-    expect(screen.queryByRole('button', { name: 'Play' })).toBeNull()
-    expect(container.querySelectorAll('[role="slider"]')).toHaveLength(1)
-  })
-
-  it('uses natural video dimensions after metadata and aspect-video before then', () => {
-    const { container } = renderWithProviders(
-      <MediaPlayer source={SOURCE} mimeType="video/mp4" />
-    )
-    const root = container.firstElementChild as HTMLElement
-    const video = container.querySelector('video') as HTMLVideoElement
-    Object.defineProperties(video, {
-      videoWidth: { configurable: true, value: 1920 },
-      videoHeight: { configurable: true, value: 1080 },
-    })
-
-    expect(root).toHaveClass('aspect-video')
-    expect(root).not.toHaveStyle({ aspectRatio: '1.7777777777777777' })
-    fireEvent.loadedMetadata(video)
-    expect(root).not.toHaveClass('aspect-video')
-    expect(root.style.aspectRatio).toBe(String(1920 / 1080))
-  })
-})

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

@@ -1,215 +0,0 @@
-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')
-  })
-})