@linktr.ee/messaging-react 4.1.7-rc-1787240421 → 4.1.7-rc-1787247439

package/src/components/MessageAttachment/_shared/DownloadAction.test.tsx

@@ -0,0 +1,168 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import {
+  fireEvent,
+  renderWithProviders,
+  screen,
+  waitFor,
+} from '../../../test/utils'
+
+import DownloadAction from './DownloadAction'
+import { triggerDownload } from './triggerDownload'
+import { VIEWER_ACTION_CLASS } from './viewerChromeClasses'
+
+vi.mock('./triggerDownload', () => ({
+  triggerDownload: vi.fn(() => Promise.resolve()),
+}))
+
+const mockedTriggerDownload = vi.mocked(triggerDownload)
+
+beforeEach(() => {
+  mockedTriggerDownload.mockReset()
+  mockedTriggerDownload.mockResolvedValue(undefined)
+})
+
+describe('DownloadAction', () => {
+  it('uses a visible label for the default pill variant', () => {
+    renderWithProviders(<DownloadAction url="/file.pdf" />)
+    const button = screen.getByRole('button', { name: 'Download' })
+    expect(button).toHaveTextContent('Download')
+    expect(button).not.toHaveAttribute('aria-label')
+  })
+
+  it.each(['inline', 'viewer'] as const)(
+    'uses an accessible-only label for the %s variant',
+    (variant) => {
+      renderWithProviders(
+        <DownloadAction url="/file.pdf" variant={variant} label="Save file" />
+      )
+      const button = screen.getByRole('button', { name: 'Save file' })
+      expect(button).not.toHaveTextContent('Save file')
+    }
+  )
+
+  it('allows iconOnly to control the pill label', () => {
+    const { rerender } = renderWithProviders(
+      <DownloadAction url="/file.pdf" label="Save" iconOnly />
+    )
+    expect(screen.getByRole('button', { name: 'Save' })).not.toHaveTextContent(
+      'Save'
+    )
+    rerender(<DownloadAction url="/file.pdf" label="Save" iconOnly={false} />)
+    expect(screen.getByRole('button', { name: 'Save' })).toHaveTextContent(
+      'Save'
+    )
+  })
+
+  it.each(['inline', 'viewer'] as const)(
+    'keeps the %s label visually hidden regardless of iconOnly',
+    (variant) => {
+      const { rerender } = renderWithProviders(
+        <DownloadAction
+          url="/file.pdf"
+          variant={variant}
+          label="Save"
+          iconOnly={false}
+        />
+      )
+      expect(
+        screen.getByRole('button', { name: 'Save' })
+      ).not.toHaveTextContent('Save')
+      rerender(
+        <DownloadAction
+          url="/file.pdf"
+          variant={variant}
+          label="Save"
+          iconOnly
+        />
+      )
+      expect(
+        screen.getByRole('button', { name: 'Save' })
+      ).not.toHaveTextContent('Save')
+    }
+  )
+
+  it('stops propagation and calls the download once', async () => {
+    const outerClick = vi.fn()
+    renderWithProviders(
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+      <div onClick={outerClick}>
+        <DownloadAction
+          url="/file.pdf"
+          filename="report.pdf"
+          onTriggered={vi.fn()}
+        />
+      </div>
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Download' }))
+    await waitFor(() =>
+      expect(mockedTriggerDownload).toHaveBeenCalledWith(
+        '/file.pdf',
+        'report.pdf'
+      )
+    )
+    expect(mockedTriggerDownload).toHaveBeenCalledOnce()
+    expect(outerClick).not.toHaveBeenCalled()
+  })
+
+  it('disables repeated clicks while downloading and settles on success', async () => {
+    let resolve: () => void = () => undefined
+    mockedTriggerDownload.mockReturnValueOnce(
+      new Promise<void>((done) => {
+        resolve = done
+      })
+    )
+    const onTriggered = vi.fn()
+    renderWithProviders(
+      <DownloadAction url="/file.pdf" onTriggered={onTriggered} />
+    )
+    const button = screen.getByRole('button', { name: 'Download' })
+    fireEvent.click(button)
+    fireEvent.click(button)
+    expect(button).toBeDisabled()
+    expect(mockedTriggerDownload).toHaveBeenCalledOnce()
+    resolve()
+    await waitFor(() => expect(button).toBeEnabled())
+    expect(onTriggered).toHaveBeenCalledOnce()
+  })
+
+  it('settles and notifies even when downloading rejects', async () => {
+    mockedTriggerDownload.mockRejectedValueOnce(new Error('offline'))
+    const onTriggered = vi.fn()
+    renderWithProviders(
+      <DownloadAction url="/file.pdf" onTriggered={onTriggered} />
+    )
+    const button = screen.getByRole('button', { name: 'Download' })
+    fireEvent.click(button)
+    await waitFor(() => expect(button).toBeEnabled())
+    expect(onTriggered).toHaveBeenCalledOnce()
+  })
+
+  it('maps tone classes for pill and inline variants', () => {
+    const { rerender } = renderWithProviders(
+      <DownloadAction url="/file.pdf" tone="dark" />
+    )
+    expect(screen.getByRole('button', { name: 'Download' })).toHaveClass(
+      'hover:bg-[#2a2928]'
+    )
+    rerender(<DownloadAction url="/file.pdf" tone="light" />)
+    expect(screen.getByRole('button', { name: 'Download' })).toHaveClass(
+      'hover:bg-white/90'
+    )
+    rerender(<DownloadAction url="/file.pdf" variant="inline" tone="dark" />)
+    expect(screen.getByRole('button', { name: 'Download' })).toHaveClass(
+      'hover:text-white'
+    )
+    rerender(<DownloadAction url="/file.pdf" variant="inline" tone="light" />)
+    expect(screen.getByRole('button', { name: 'Download' })).toHaveClass(
+      'hover:text-black'
+    )
+  })
+
+  it('uses the shared viewer action class', () => {
+    renderWithProviders(<DownloadAction url="/file.pdf" variant="viewer" />)
+    expect(screen.getByRole('button', { name: 'Download' })).toHaveClass(
+      VIEWER_ACTION_CLASS
+    )
+  })
+})

package/src/components/MessageAttachment/_shared/ImageViewer.test.tsx

@@ -0,0 +1,52 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { fireEvent, renderWithProviders, screen } from '../../../test/utils'
+
+import ImageViewer from './ImageViewer'
+
+describe('ImageViewer', () => {
+  const items = [
+    { src: 'https://cdn.example.com/one.jpg', alt: 'One' },
+    { src: 'https://cdn.example.com/two.jpg', filename: 'two.png' },
+  ]
+
+  it('renders nothing without an active item', () => {
+    const { container } = renderWithProviders(
+      <ImageViewer open onClose={vi.fn()} items={[]} />
+    )
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('gates the image on open and resolves filename labels', () => {
+    const { rerender } = renderWithProviders(
+      <ImageViewer open={false} onClose={vi.fn()} items={[items[0]]} />
+    )
+    expect(screen.queryByRole('img')).toBeNull()
+    expect(screen.getByTestId('image-viewer')).toHaveAttribute(
+      'aria-label',
+      'one.jpg'
+    )
+    expect(
+      screen
+        .getByTestId('image-viewer')
+        .querySelector('button[aria-label="Download one.jpg"]')
+    ).toBeInTheDocument()
+    rerender(<ImageViewer open onClose={vi.fn()} items={[items[0]]} />)
+    expect(screen.getByRole('img')).toHaveAttribute('alt', 'One')
+    expect(screen.getByRole('img')).toHaveAttribute('draggable', 'false')
+  })
+
+  it('renders counter and navigation only for multiple items', () => {
+    renderWithProviders(
+      <ImageViewer open onClose={vi.fn()} items={items} initialIndex={99} />
+    )
+    expect(screen.getByText('2 / 2')).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'Previous image' })
+    ).toBeInTheDocument()
+    expect(screen.getByRole('img')).toHaveAttribute('src', items[1].src)
+    fireEvent.click(screen.getByRole('button', { name: 'Previous image' }))
+    expect(screen.getByText('1 / 2')).toBeInTheDocument()
+    expect(screen.getByRole('img')).toHaveAttribute('src', items[0].src)
+  })
+})

package/src/components/MessageAttachment/_shared/MediaStackGrid.test.tsx

@@ -0,0 +1,69 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { fireEvent, renderWithProviders, screen } from '../../../test/utils'
+
+import MediaStackGrid from './MediaStackGrid'
+
+const tiles = (count: number) =>
+  Array.from({ length: count }, (_, index) => ({
+    content: <span>tile {index + 1}</span>,
+    ariaLabel: index === 1 ? 'Second tile' : undefined,
+  }))
+
+describe('MediaStackGrid', () => {
+  it('renders nothing for empty tiles', () => {
+    const { container } = renderWithProviders(<MediaStackGrid tiles={[]} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it.each([
+    [1, 'aspect-square'],
+    [2, 'aspect-[16/9]'],
+    [3, 'aspect-[4/3]'],
+    [4, 'aspect-[379/286]'],
+  ])('renders the %s-tile layout', (count, layoutClass) => {
+    const { container } = renderWithProviders(
+      <MediaStackGrid tiles={tiles(count)} className="custom-grid" />
+    )
+    expect(container.firstElementChild).toHaveClass(layoutClass, 'custom-grid')
+    expect(screen.getAllByText(/tile/)).toHaveLength(count)
+  })
+
+  it('clamps visible tiles and places overflow on the last tile', () => {
+    const { container, rerender } = renderWithProviders(
+      <MediaStackGrid tiles={tiles(6)} maxVisible={4} />
+    )
+    expect(container.querySelectorAll('span')).toHaveLength(4)
+    expect(screen.getByText('+2')).toBeInTheDocument()
+    expect(screen.getByText('+2').parentElement).toHaveTextContent('tile 4')
+    rerender(<MediaStackGrid tiles={tiles(2)} maxVisible={4} />)
+    expect(container.querySelectorAll('span')).toHaveLength(2)
+    expect(screen.queryByText(/^\+/)).toBeNull()
+    rerender(<MediaStackGrid tiles={tiles(1)} singleAspectRatio={0.5} />)
+    expect(
+      screen.getByText('tile 1').closest('div')?.parentElement
+    ).toHaveStyle({
+      aspectRatio: '0.5',
+    })
+  })
+
+  it('renders activatable buttons with labels and indexes', () => {
+    const onActivate = vi.fn()
+    renderWithProviders(
+      <MediaStackGrid tiles={tiles(3)} onTileActivate={onActivate} />
+    )
+    const buttons = screen.getAllByRole('button')
+    expect(buttons).toHaveLength(3)
+    expect(buttons[0]).toHaveAttribute('aria-label', 'Open media 1')
+    expect(buttons[1]).toHaveAttribute('aria-label', 'Second tile')
+    fireEvent.click(buttons[0])
+    fireEvent.click(buttons[2])
+    expect(onActivate).toHaveBeenNthCalledWith(1, 0)
+    expect(onActivate).toHaveBeenNthCalledWith(2, 2)
+  })
+
+  it('uses non-interactive shells when no activation handler is supplied', () => {
+    renderWithProviders(<MediaStackGrid tiles={tiles(2)} />)
+    expect(screen.queryAllByRole('button')).toHaveLength(0)
+  })
+})

package/src/components/MessageAttachment/_shared/PdfViewer.test.tsx

@@ -0,0 +1,45 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { fireEvent, renderWithProviders, screen } from '../../../test/utils'
+
+import PdfViewer from './PdfViewer'
+
+describe('PdfViewer', () => {
+  const items = [
+    { src: 'https://cdn.example.com/one.pdf#page=3' },
+    { src: 'https://cdn.example.com/two.pdf', filename: 'second.pdf' },
+  ]
+
+  it('renders nothing with no active document', () => {
+    const { container } = renderWithProviders(
+      <PdfViewer open onClose={vi.fn()} items={[]} />
+    )
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('merges viewer parameters into existing fragments', () => {
+    renderWithProviders(<PdfViewer open onClose={vi.fn()} items={[items[0]]} />)
+    const iframe = screen.getByTitle('one.pdf')
+    expect(iframe).toHaveAttribute(
+      'src',
+      'https://cdn.example.com/one.pdf#page=3&toolbar=0&navpanes=0'
+    )
+    expect(iframe).toHaveAttribute(
+      'sandbox',
+      'allow-scripts allow-forms allow-popups allow-downloads'
+    )
+  })
+
+  it('uses filename precedence and navigates stacked documents', () => {
+    renderWithProviders(
+      <PdfViewer open onClose={vi.fn()} items={items} initialIndex={1} />
+    )
+    expect(screen.getByRole('dialog')).toHaveAttribute(
+      'aria-label',
+      'second.pdf'
+    )
+    expect(screen.getByText('2 / 2')).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'Previous document' }))
+    expect(screen.getByTitle('one.pdf')).toBeInTheDocument()
+  })
+})

package/src/components/MessageAttachment/_shared/VideoViewer.test.tsx

@@ -0,0 +1,55 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { fireEvent, renderWithProviders, screen } from '../../../test/utils'
+
+import VideoViewer from './VideoViewer'
+
+describe('VideoViewer', () => {
+  const items = [
+    {
+      src: 'https://cdn.example.com/one.mp4',
+      poster: '/one.jpg',
+      mimeType: 'video/mp4',
+      filename: 'one.mp4',
+      preload: 'auto' as const,
+    },
+    { src: 'https://cdn.example.com/two.webm', mimeType: 'video/webm' },
+  ]
+
+  it('renders nothing with no active video', () => {
+    const { container } = renderWithProviders(
+      <VideoViewer open onClose={vi.fn()} items={[]} />
+    )
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders media attributes and an optional source type', () => {
+    renderWithProviders(
+      <VideoViewer open onClose={vi.fn()} items={[items[0]]} />
+    )
+    const video = screen.getByTestId('video-viewer').querySelector('video')
+    expect(video).not.toBeNull()
+    if (!video) throw new Error('Expected video element')
+    expect(video).toHaveAttribute('src', items[0].src)
+    expect(video).toHaveAttribute('poster', items[0].poster)
+    expect(video).toHaveAttribute('preload', 'auto')
+    expect(video).toHaveAttribute('autoplay')
+    expect(video?.muted).toBe(true)
+    expect(video.querySelector('source')).toHaveAttribute('type', 'video/mp4')
+  })
+
+  it('defaults preload and navigates stacked items', () => {
+    renderWithProviders(<VideoViewer open onClose={vi.fn()} items={items} />)
+    expect(screen.getByText('1 / 2')).toBeInTheDocument()
+    expect(
+      screen.getByTestId('video-viewer').querySelector('video')
+    ).toHaveAttribute('preload', 'auto')
+    fireEvent.click(screen.getByRole('button', { name: 'Next video' }))
+    expect(
+      screen.getByTestId('video-viewer').querySelector('video')
+    ).toHaveAttribute('src', items[1].src)
+    expect(
+      screen.getByTestId('video-viewer').querySelector('video')
+    ).toHaveAttribute('preload', 'metadata')
+  })
+})

package/src/components/MessageAttachment/_shared/ViewerShell.test.tsx

@@ -0,0 +1,246 @@
+import { useLayoutEffect } from 'react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { fireEvent, renderWithProviders, screen } from '../../../test/utils'
+
+import { VIEWER_ACTION_CLASS } from './viewerChromeClasses'
+import ViewerShell from './ViewerShell'
+
+const dialogPrototype = HTMLDialogElement.prototype
+const originalDialogDescriptors = {
+  close: Object.getOwnPropertyDescriptor(dialogPrototype, 'close'),
+  showModal: Object.getOwnPropertyDescriptor(dialogPrototype, 'showModal'),
+}
+
+const defineDialogMethod = (
+  name: 'close' | 'showModal',
+  implementation: () => void
+) => {
+  Object.defineProperty(dialogPrototype, name, {
+    configurable: true,
+    value: implementation,
+    writable: true,
+  })
+}
+
+const restoreDialogMethod = (
+  name: 'close' | 'showModal',
+  descriptor: PropertyDescriptor | undefined
+) => {
+  if (descriptor) Object.defineProperty(dialogPrototype, name, descriptor)
+  else Reflect.deleteProperty(dialogPrototype, name)
+}
+
+const PreOpenDialog = () => {
+  useLayoutEffect(() => {
+    document.querySelector('[data-testid="viewer"]')?.setAttribute('open', '')
+  }, [])
+  return null
+}
+
+afterEach(() => {
+  restoreDialogMethod('close', originalDialogDescriptors.close)
+  restoreDialogMethod('showModal', originalDialogDescriptors.showModal)
+  vi.restoreAllMocks()
+})
+
+describe('ViewerShell', () => {
+  it('drives open state, chrome content, and forwarded attributes', () => {
+    const { rerender } = renderWithProviders(
+      <ViewerShell
+        open
+        onClose={vi.fn()}
+        counter="2 / 3"
+        actions={<button type="button">Action</button>}
+        ariaLabel="report.pdf"
+        data-testid="viewer"
+      >
+        content
+      </ViewerShell>
+    )
+    const dialog = screen.getByTestId('viewer')
+    expect(dialog).toHaveAttribute('open')
+    expect(dialog).toHaveAttribute('aria-label', 'report.pdf')
+    expect(dialog).toHaveTextContent('2 / 3')
+    expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Close viewer' })).toHaveClass(
+      VIEWER_ACTION_CLASS
+    )
+
+    rerender(
+      <ViewerShell open={false} onClose={vi.fn()} data-testid="viewer">
+        content
+      </ViewerShell>
+    )
+    expect(dialog).not.toHaveAttribute('open')
+  })
+
+  it('focuses close on open and restores the previous focus on close', () => {
+    const onClose = vi.fn()
+    const previouslyFocused = document.createElement('button')
+    document.body.appendChild(previouslyFocused)
+    previouslyFocused.focus()
+    const { rerender } = renderWithProviders(
+      <ViewerShell open={false} onClose={onClose} data-testid="viewer">
+        content
+      </ViewerShell>
+    )
+    rerender(
+      <ViewerShell open onClose={onClose} data-testid="viewer">
+        content
+      </ViewerShell>
+    )
+    expect(screen.getByRole('button', { name: 'Close viewer' })).toHaveFocus()
+    rerender(
+      <ViewerShell open={false} onClose={onClose} data-testid="viewer">
+        content
+      </ViewerShell>
+    )
+    expect(previouslyFocused).toHaveFocus()
+    previouslyFocused.remove()
+  })
+
+  it('falls back to the open attribute when dialog methods are absent', () => {
+    Reflect.deleteProperty(dialogPrototype, 'showModal')
+    Reflect.deleteProperty(dialogPrototype, 'close')
+    const { rerender } = renderWithProviders(
+      <ViewerShell open onClose={vi.fn()} data-testid="viewer">
+        content
+      </ViewerShell>
+    )
+    const dialog = screen.getByTestId('viewer')
+    expect(dialog).toHaveAttribute('open')
+    rerender(
+      <ViewerShell open={false} onClose={vi.fn()} data-testid="viewer">
+        content
+      </ViewerShell>
+    )
+    expect(dialog).not.toHaveAttribute('open')
+  })
+
+  it('falls back when showModal throws', () => {
+    const showModal = vi.fn(() => {
+      throw new Error('not supported')
+    })
+    defineDialogMethod('showModal', showModal)
+    const { container } = renderWithProviders(
+      <ViewerShell open onClose={vi.fn()} data-testid="viewer">
+        content
+      </ViewerShell>
+    )
+    expect(container.querySelector('dialog')).toHaveAttribute('open')
+    expect(showModal).toHaveBeenCalledOnce()
+  })
+
+  it('falls back when close throws during cleanup', () => {
+    const close = vi.fn(() => {
+      throw new Error('not supported')
+    })
+    defineDialogMethod('close', close)
+    Reflect.deleteProperty(dialogPrototype, 'showModal')
+    const { rerender } = renderWithProviders(
+      <ViewerShell open onClose={vi.fn()} data-testid="viewer">
+        content
+      </ViewerShell>
+    )
+    const dialog = screen.getByTestId('viewer')
+    rerender(
+      <ViewerShell open={false} onClose={vi.fn()} data-testid="viewer">
+        content
+      </ViewerShell>
+    )
+    expect(close).toHaveBeenCalledOnce()
+    expect(dialog).not.toHaveAttribute('open')
+  })
+
+  it('falls back when close throws in the closed branch', () => {
+    const close = vi.fn(() => {
+      throw new Error('not supported')
+    })
+    defineDialogMethod('close', close)
+    renderWithProviders(
+      <ViewerShell open={false} onClose={vi.fn()} data-testid="viewer">
+        <PreOpenDialog />
+      </ViewerShell>
+    )
+    expect(close).toHaveBeenCalledOnce()
+    expect(screen.getByTestId('viewer')).not.toHaveAttribute('open')
+  })
+
+  it('does not call showModal when the dialog is already open', () => {
+    const showModal = vi.fn()
+    defineDialogMethod('showModal', showModal)
+    renderWithProviders(
+      <ViewerShell open onClose={vi.fn()} data-testid="viewer">
+        <PreOpenDialog />
+      </ViewerShell>
+    )
+    expect(screen.getByTestId('viewer')).toHaveAttribute('open')
+    expect(showModal).not.toHaveBeenCalled()
+  })
+
+  it('does not restore focus to a detached element', () => {
+    const previouslyFocused = document.createElement('button')
+    document.body.appendChild(previouslyFocused)
+    previouslyFocused.focus()
+    const { rerender } = renderWithProviders(
+      <ViewerShell open={false} onClose={vi.fn()} data-testid="viewer">
+        content
+      </ViewerShell>
+    )
+    rerender(
+      <ViewerShell open onClose={vi.fn()} data-testid="viewer">
+        content
+      </ViewerShell>
+    )
+    previouslyFocused.remove()
+    expect(() =>
+      rerender(
+        <ViewerShell open={false} onClose={vi.fn()} data-testid="viewer">
+          content
+        </ViewerShell>
+      )
+    ).not.toThrow()
+    expect(document.activeElement).not.toBe(previouslyFocused)
+  })
+
+  it('uses the default accessible label', () => {
+    renderWithProviders(
+      <ViewerShell open onClose={vi.fn()} data-testid="viewer">
+        content
+      </ViewerShell>
+    )
+    expect(screen.getByTestId('viewer')).toHaveAttribute(
+      'aria-label',
+      'Attachment viewer'
+    )
+  })
+
+  it('does not close a dialog that was never opened', () => {
+    const close = vi.fn()
+    defineDialogMethod('close', close)
+    renderWithProviders(
+      <ViewerShell open={false} onClose={vi.fn()} data-testid="viewer">
+        content
+      </ViewerShell>
+    )
+    expect(close).not.toHaveBeenCalled()
+  })
+
+  it('closes from the close, native close, and backdrop events', () => {
+    const onClose = vi.fn()
+    renderWithProviders(
+      <ViewerShell open onClose={onClose} data-testid="viewer">
+        <span>content</span>
+      </ViewerShell>
+    )
+    const dialog = screen.getByTestId('viewer')
+    fireEvent.click(screen.getByRole('button', { name: 'Close viewer' }))
+    fireEvent(dialog, new Event('close'))
+    fireEvent.click(dialog)
+    expect(onClose).toHaveBeenCalledTimes(3)
+    onClose.mockClear()
+    fireEvent.click(screen.getByText('content'))
+    expect(onClose).not.toHaveBeenCalled()
+  })
+})