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

package/src/components/LinkAttachment/components/_shared/useChinPalette.test.ts

@@ -1,162 +0,0 @@
-import { act, renderHook } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-import { useChinPalette } from './useChinPalette'
-import type { ChinPaletteInput } from './useChinPalette'
-
-const THUMBNAIL = 'https://cdn.example.com/cover.jpg'
-
-const render = (input: ChinPaletteInput) =>
-  renderHook((props: ChinPaletteInput) => useChinPalette(props), {
-    initialProps: input,
-  })
-
-describe('useChinPalette', () => {
-  it('publishes a validated accent for a ready featured hero', () => {
-    const { result } = render({
-      variant: 'dark',
-      accentColor: '#7008E7',
-      thumbnailUrl: THUMBNAIL,
-    })
-    expect(result.current.accentHex).toBe('#7008E7')
-    expect(result.current.thumbnailUrl).toBe(THUMBNAIL)
-    expect(result.current.isLoading).toBe(false)
-  })
-
-  it('hashes a bare hex and tolerates surrounding whitespace', () => {
-    const { result } = render({
-      variant: 'dark',
-      accentColor: '  7008E7  ',
-      thumbnailUrl: THUMBNAIL,
-    })
-    expect(result.current.accentHex).toBe('#7008E7')
-  })
-
-  it.each([
-    'rebeccapurple',
-    'rgb(112, 8, 231)',
-    '#12g',
-    '#1234',
-    '',
-    undefined,
-  ])('drops the unusable accent %s', (accentColor) => {
-    const { result } = render({
-      variant: 'dark',
-      accentColor,
-      thumbnailUrl: THUMBNAIL,
-    })
-    expect(result.current.accentHex).toBeUndefined()
-  })
-
-  it('drops the accent for a classic card, which has no hero', () => {
-    const { result } = render({
-      variant: 'dark',
-      accentColor: '#7008E7',
-      layout: 'classic',
-      thumbnailUrl: THUMBNAIL,
-    })
-    expect(result.current.accentHex).toBeUndefined()
-  })
-
-  it.each(['loading', 'failed'] as const)(
-    'drops the accent while status is %s',
-    (status) => {
-      const { result } = render({
-        variant: 'dark',
-        accentColor: '#7008E7',
-        status,
-        thumbnailUrl: THUMBNAIL,
-      })
-      expect(result.current.accentHex).toBeUndefined()
-      expect(result.current.isLoading).toBe(status === 'loading')
-    }
-  )
-
-  it.each([undefined, ''])(
-    'drops the accent when the hero url is %s',
-    (thumbnailUrl) => {
-      const { result } = render({
-        variant: 'dark',
-        accentColor: '#7008E7',
-        thumbnailUrl,
-      })
-      expect(result.current.accentHex).toBeUndefined()
-    }
-  )
-
-  it('drops the accent for playable audio, whose hero is the player', () => {
-    const { result } = render({
-      variant: 'dark',
-      accentColor: '#7008E7',
-      thumbnailUrl: THUMBNAIL,
-      mimeType: 'audio/mpeg',
-      sourceUrl: 'https://cdn.example.com/clip.mp3',
-    })
-    expect(result.current.accentHex).toBeUndefined()
-  })
-
-  it('keeps the accent for playable video, whose poster is the hero', () => {
-    const { result } = render({
-      variant: 'dark',
-      accentColor: '#7008E7',
-      thumbnailUrl: THUMBNAIL,
-      mimeType: 'video/mp4',
-      sourceUrl: 'https://cdn.example.com/clip.mp4',
-    })
-    expect(result.current.accentHex).toBe('#7008E7')
-  })
-
-  it('withdraws the hero and its accent once the image fails', () => {
-    const { result } = render({
-      variant: 'dark',
-      accentColor: '#7008E7',
-      thumbnailUrl: THUMBNAIL,
-    })
-    act(() => {
-      result.current.onImageError()
-    })
-    expect(result.current.thumbnailUrl).toBeUndefined()
-    expect(result.current.accentHex).toBeUndefined()
-  })
-
-  it('gives a new hero url a fresh chance to load', () => {
-    const { result, rerender } = render({
-      variant: 'dark',
-      accentColor: '#7008E7',
-      thumbnailUrl: THUMBNAIL,
-    })
-    act(() => {
-      result.current.onImageError()
-    })
-    expect(result.current.accentHex).toBeUndefined()
-
-    rerender({
-      variant: 'dark',
-      accentColor: '#7008E7',
-      thumbnailUrl: 'https://cdn.example.com/other.jpg',
-    })
-    expect(result.current.thumbnailUrl).toBe(
-      'https://cdn.example.com/other.jpg'
-    )
-    expect(result.current.accentHex).toBe('#7008E7')
-  })
-
-  it.each([
-    ['dark', '#FFFFFF'],
-    ['light', '#040403'],
-  ] as const)('inks the %s surface with %s', (variant, ink) => {
-    const { result } = render({ variant })
-    expect(result.current.chinTextColor).toBe(ink)
-    expect(result.current.surface).toBe(variant)
-  })
-
-  it('treats the audio strip as a light surface on either side', () => {
-    const { result } = render({
-      variant: 'dark',
-      mimeType: 'audio/mpeg',
-      sourceUrl: 'https://cdn.example.com/clip.mp3',
-    })
-    expect(result.current.chinTextColor).toBe('#040403')
-    expect(result.current.surface).toBe('light')
-  })
-})

package/src/components/MessageAttachment/MessageAttachment.behavior.test.tsx

@@ -1,182 +0,0 @@
-import { describe, expect, it, vi } from 'vitest'
-
-import { fireEvent, renderWithProviders, screen } from '../../test/utils'
-
-import { triggerDownload } from './_shared/triggerDownload'
-import { bubbleVariantForState, bubbleGroupPositionFromStream } from './types'
-
-import MessageAttachment from '.'
-
-vi.mock('./_shared/triggerDownload', () => ({
-  triggerDownload: vi.fn(() => Promise.resolve()),
-}))
-
-const mockedDownload = vi.mocked(triggerDownload)
-
-describe('MessageAttachment behavior', () => {
-  it('renders file rows with precedence, fallback names, and cancellation', () => {
-    const onClick = vi.fn(() => false)
-    const { rerender } = renderWithProviders(
-      <MessageAttachment.File.Sent
-        src="https://cdn.example.com/fallback.txt"
-        filename="fallback.txt"
-        items={[
-          {
-            src: 'https://cdn.example.com/first.pdf',
-            filename: 'first.pdf',
-          },
-          { src: 'https://cdn.example.com/second.pdf' },
-        ]}
-        onClick={onClick}
-      />
-    )
-    expect(screen.getByText('first.pdf')).toBeInTheDocument()
-    expect(screen.getByText('second.pdf')).toBeInTheDocument()
-    fireEvent.click(screen.getByRole('button', { name: 'Download first.pdf' }))
-    expect(onClick).toHaveBeenCalledWith(0)
-    expect(mockedDownload).not.toHaveBeenCalled()
-
-    rerender(
-      <MessageAttachment.File.Sent src="https://cdn.example.com/fallback.txt" />
-    )
-    fireEvent.click(
-      screen.getByRole('button', { name: 'Download fallback.txt' })
-    )
-    expect(mockedDownload).toHaveBeenCalledWith(
-      'https://cdn.example.com/fallback.txt',
-      'fallback.txt'
-    )
-  })
-
-  it('renders no file when inputs are absent and supports composer dismissal', () => {
-    const { container } = renderWithProviders(
-      <MessageAttachment.File.Received />
-    )
-    expect(container.firstChild).toBeNull()
-    const onDismiss = vi.fn()
-    renderWithProviders(
-      <MessageAttachment.File.Composer
-        src="https://cdn.example.com/file"
-        onDismiss={onDismiss}
-      />
-    )
-    fireEvent.click(screen.getByRole('button', { name: 'Dismiss attachment' }))
-    expect(onDismiss).toHaveBeenCalledOnce()
-  })
-
-  it('renders image stacks, forwards loading, and supports click cancellation', () => {
-    const onClick = vi.fn(() => false)
-    renderWithProviders(
-      <MessageAttachment.Image.Sent
-        src="https://cdn.example.com/fallback.jpg"
-        items={[
-          { src: 'https://cdn.example.com/one.jpg' },
-          { src: 'https://cdn.example.com/two.jpg', loading: 'eager' },
-        ]}
-        loading="lazy"
-        onClick={onClick}
-      />
-    )
-    expect(screen.getAllByRole('img')[0]).toHaveAttribute('loading', 'lazy')
-    expect(screen.getAllByRole('img')).toHaveLength(2)
-    fireEvent.click(screen.getByRole('button', { name: 'Open image 2 of 2' }))
-    expect(onClick).toHaveBeenCalledWith(1)
-    expect(screen.queryByTestId('image-viewer')).not.toHaveAttribute('open')
-  })
-
-  it('opens images at the clicked index and suffixes a shared filename', () => {
-    renderWithProviders(
-      <MessageAttachment.Image.Sent
-        filename="photos.jpg"
-        items={[
-          { src: 'https://cdn.example.com/one.jpg' },
-          { src: 'https://cdn.example.com/two.jpg' },
-        ]}
-      />
-    )
-    fireEvent.click(screen.getByRole('button', { name: 'Open image 2 of 2' }))
-    expect(screen.getByTestId('image-viewer')).toHaveAttribute(
-      'aria-label',
-      'photos.jpg (2)'
-    )
-    expect(screen.getByRole('img', { name: 'photos.jpg (2)' })).toHaveAttribute(
-      'src',
-      'https://cdn.example.com/two.jpg'
-    )
-  })
-
-  it('renders video poster and fallback, and wires viewer attributes', () => {
-    const onDismiss = vi.fn()
-    const { rerender } = renderWithProviders(
-      <MessageAttachment.Video.Composer
-        src="https://cdn.example.com/video.mp4"
-        poster="/poster.jpg"
-        mimeType="video/mp4"
-        preload="auto"
-        onDismiss={onDismiss}
-      />
-    )
-    expect(
-      screen.getByRole('img', { name: 'Video 1 thumbnail' })
-    ).toHaveAttribute('src', '/poster.jpg')
-    fireEvent.click(screen.getByRole('button', { name: 'Dismiss attachment' }))
-    expect(onDismiss).toHaveBeenCalledOnce()
-    rerender(
-      <MessageAttachment.Video.Sent
-        items={[{ src: 'https://cdn.example.com/video.mp4' }]}
-      />
-    )
-    expect(screen.getByLabelText('Play video 1 of 1')).toBeInTheDocument()
-  })
-
-  it('supports PDF titles, download actions, dismiss, and viewer index', () => {
-    const onDismiss = vi.fn()
-    renderWithProviders(
-      <MessageAttachment.Pdf.Composer
-        src="https://cdn.example.com/report.pdf"
-        title="Quarterly report"
-        onDismiss={onDismiss}
-      />
-    )
-    expect(screen.getByText('Quarterly report')).toBeInTheDocument()
-    fireEvent.click(screen.getByRole('button', { name: 'Dismiss attachment' }))
-    expect(onDismiss).toHaveBeenCalledOnce()
-
-    renderWithProviders(
-      <MessageAttachment.Pdf.Sent
-        items={[
-          { src: 'https://cdn.example.com/one.pdf' },
-          { src: 'https://cdn.example.com/two.pdf', filename: 'two.pdf' },
-        ]}
-      />
-    )
-    fireEvent.click(screen.getByRole('button', { name: 'Open two.pdf' }))
-    expect(screen.getAllByTestId('pdf-viewer').at(-1)).toHaveAttribute(
-      'aria-label',
-      'two.pdf'
-    )
-  })
-
-  it('maps state and stream grouping contracts', () => {
-    expect(bubbleVariantForState('composer')).toBe('dark')
-    expect(bubbleVariantForState('sent')).toBe('dark')
-    expect(bubbleVariantForState('received')).toBe('light')
-    expect(bubbleGroupPositionFromStream({})).toBe('single')
-    expect(
-      bubbleGroupPositionFromStream({
-        groupedByUser: true,
-        firstOfGroup: true,
-        endOfGroup: true,
-      })
-    ).toBe('single')
-    expect(
-      bubbleGroupPositionFromStream({ groupedByUser: true, firstOfGroup: true })
-    ).toBe('first')
-    expect(
-      bubbleGroupPositionFromStream({ groupedByUser: true, endOfGroup: true })
-    ).toBe('end')
-    expect(bubbleGroupPositionFromStream({ groupedByUser: true })).toBe(
-      'middle'
-    )
-  })
-})

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

@@ -1,111 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { renderWithProviders, screen } from '../../../test/utils'
-
-import Bubble from './Bubble'
-
-describe('Bubble', () => {
-  it.each([
-    [undefined, false],
-    [null, false],
-    ['', false],
-    ['caption', true],
-    [0, true],
-  ])('renders caption %j according to its value', (text, present) => {
-    renderWithProviders(
-      <Bubble variant="dark" text={text} data-testid="bubble">
-        <span>child</span>
-      </Bubble>
-    )
-    const bubble = screen.getByTestId('bubble')
-    if (present) expect(bubble.querySelector('p')).not.toBeNull()
-    else expect(bubble.querySelector('p')).toBeNull()
-    expect(bubble).toHaveClass(present ? 'pb-0' : 'py-2')
-  })
-
-  it('maps variants, group positions, borders, and forwarded content', () => {
-    const { rerender } = renderWithProviders(
-      <Bubble
-        variant="dark"
-        groupPosition="middle"
-        data-testid="bubble"
-        className="custom"
-      >
-        child
-      </Bubble>
-    )
-    let bubble = screen.getByTestId('bubble')
-    expect(bubble).toHaveAttribute('data-group-position', 'middle')
-    expect(bubble).toHaveClass('custom')
-    expect(bubble).toHaveTextContent('child')
-    const darkMiddle = bubble.className
-
-    rerender(
-      <Bubble
-        variant="light"
-        groupPosition="middle"
-        data-testid="bubble"
-        className="custom"
-      >
-        child
-      </Bubble>
-    )
-    bubble = screen.getByTestId('bubble')
-    const lightMiddle = bubble.className
-    expect(lightMiddle).not.toBe(darkMiddle)
-
-    rerender(
-      <Bubble
-        variant="light"
-        groupPosition="first"
-        data-testid="bubble"
-        className="custom"
-      >
-        child
-      </Bubble>
-    )
-    bubble = screen.getByTestId('bubble')
-    expect(bubble.className).not.toBe(lightMiddle)
-    const lightFirstBordered = bubble.className
-
-    rerender(
-      <Bubble
-        variant="light"
-        bordered={false}
-        groupPosition="first"
-        data-testid="bubble"
-        className="custom"
-      >
-        child
-      </Bubble>
-    )
-    bubble = screen.getByTestId('bubble')
-    const lightFirstBorderless = bubble.className
-    expect(lightFirstBorderless).not.toBe(lightFirstBordered)
-    expect(lightFirstBordered.split(/\s+/)).toEqual(
-      expect.arrayContaining(lightFirstBorderless.split(/\s+/))
-    )
-  })
-
-  it('lets an explicit radius replace the group corner table', () => {
-    const radiusClassName = 'rounded-[20px]'
-    const widthClassName = 'w-fit'
-    const paddingClassName = 'p-0.5'
-    renderWithProviders(
-      <Bubble
-        variant="light"
-        groupPosition="middle"
-        radiusClassName={radiusClassName}
-        widthClassName={widthClassName}
-        paddingClassName={paddingClassName}
-        data-testid="bubble"
-      >
-        child
-      </Bubble>
-    )
-    const bubble = screen.getByTestId('bubble')
-    expect(bubble).toHaveClass(radiusClassName, widthClassName)
-    expect(bubble).toHaveClass(paddingClassName)
-    expect(bubble.className).not.toMatch(/rounded-tl-\[4px\]/)
-  })
-})

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

@@ -1,36 +0,0 @@
-import { describe, expect, it, vi } from 'vitest'
-
-import { fireEvent, renderWithProviders, screen } from '../../../test/utils'
-
-import CarouselNav from './CarouselNav'
-import { VIEWER_NAV_CLASS } from './viewerChromeClasses'
-
-describe('CarouselNav', () => {
-  it('uses default labels and independent handlers', () => {
-    const onPrev = vi.fn()
-    const onNext = vi.fn()
-    renderWithProviders(<CarouselNav onPrev={onPrev} onNext={onNext} />)
-
-    const prev = screen.getByRole('button', { name: 'Previous' })
-    const next = screen.getByRole('button', { name: 'Next' })
-    expect(prev).toHaveClass(VIEWER_NAV_CLASS, 'left-4')
-    expect(next).toHaveClass(VIEWER_NAV_CLASS, 'right-4')
-    fireEvent.click(prev)
-    fireEvent.click(next)
-    expect(onPrev).toHaveBeenCalledOnce()
-    expect(onNext).toHaveBeenCalledOnce()
-  })
-
-  it('supports custom accessible labels', () => {
-    renderWithProviders(
-      <CarouselNav
-        onPrev={vi.fn()}
-        onNext={vi.fn()}
-        prevLabel="Previous image"
-        nextLabel="Next image"
-      />
-    )
-    expect(screen.getByRole('button', { name: 'Previous image' })).toBeVisible()
-    expect(screen.getByRole('button', { name: 'Next image' })).toBeVisible()
-  })
-})

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

@@ -1,114 +0,0 @@
-import { describe, expect, it, vi } from 'vitest'
-
-import { fireEvent, renderWithProviders, screen } from '../../../test/utils'
-
-import CompactDocumentRow from './CompactDocumentRow'
-
-describe('CompactDocumentRow', () => {
-  it('resolves title from title, filename, then File', () => {
-    const { rerender } = renderWithProviders(
-      <CompactDocumentRow variant="dark" title="Custom" filename="name.pdf" />
-    )
-    expect(screen.getByText('Custom')).toBeInTheDocument()
-    rerender(<CompactDocumentRow variant="dark" filename="name.pdf" />)
-    expect(screen.getByText('name.pdf')).toBeInTheDocument()
-    rerender(<CompactDocumentRow variant="dark" />)
-    expect(screen.getByText('File')).toBeInTheDocument()
-  })
-
-  it('renders metadata only when it has a value and defaults MIME type', () => {
-    const { container, rerender } = renderWithProviders(
-      <CompactDocumentRow
-        variant="dark"
-        filename="report.pdf"
-        fileSize={1024}
-      />
-    )
-    expect(screen.getByText('PDF · 1.0 KB')).toBeInTheDocument()
-    rerender(
-      <CompactDocumentRow
-        variant="dark"
-        filename="report"
-        mimeType="application/octet-stream"
-      />
-    )
-    expect(screen.queryByText(/·/)).toBeNull()
-    const genericIconMarkup = container.querySelector('svg')?.innerHTML
-    rerender(
-      <CompactDocumentRow
-        variant="dark"
-        filename="report.pdf"
-        mimeType="application/pdf"
-      />
-    )
-    expect(container.querySelector('svg')?.innerHTML).not.toBe(
-      genericIconMarkup
-    )
-  })
-
-  it('maps variant classes across metadata, icon, and activation', () => {
-    const onActivate = vi.fn()
-    const { container, rerender } = renderWithProviders(
-      <CompactDocumentRow
-        variant="dark"
-        filename="report.pdf"
-        onActivate={onActivate}
-        activateLabel="Open report"
-      />
-    )
-    const darkMetadata = screen.getByText('PDF').className
-    const darkIconTile = container.querySelector('div[aria-hidden]')
-    const darkTileClasses = darkIconTile?.className
-    const darkIconClasses = darkIconTile
-      ?.querySelector('svg')
-      ?.getAttribute('class')
-    expect(screen.getByRole('button', { name: 'Open report' })).toHaveClass(
-      'hover:bg-white/[0.04]'
-    )
-
-    rerender(
-      <CompactDocumentRow
-        variant="light"
-        filename="report.pdf"
-        onActivate={onActivate}
-        activateLabel="Open report"
-      />
-    )
-    expect(screen.getByText('PDF').className).not.toBe(darkMetadata)
-    const lightIconTile = container.querySelector('div[aria-hidden]')
-    expect(lightIconTile?.className).not.toBe(darkTileClasses)
-    expect(lightIconTile?.querySelector('svg')?.getAttribute('class')).not.toBe(
-      darkIconClasses
-    )
-    expect(screen.getByRole('button', { name: 'Open report' })).toHaveClass(
-      'hover:bg-black/[0.04]'
-    )
-  })
-
-  it('activates its body without nesting the trailing action', () => {
-    const onActivate = vi.fn()
-    renderWithProviders(
-      <CompactDocumentRow
-        variant="dark"
-        filename="report.pdf"
-        onActivate={onActivate}
-        activateLabel="Open report"
-        trailingAction={<button type="button">Download</button>}
-      />
-    )
-    const body = screen.getByRole('button', { name: 'Open report' })
-    expect(body).toBeInTheDocument()
-    expect(body).not.toContainElement(
-      screen.getByRole('button', { name: 'Download' })
-    )
-    fireEvent.click(body)
-    expect(onActivate).toHaveBeenCalledOnce()
-  })
-
-  it('renders a plain body when activation is omitted', () => {
-    renderWithProviders(
-      <CompactDocumentRow variant="dark" filename="report.pdf" />
-    )
-    expect(screen.queryByRole('button', { name: /report/ })).toBeNull()
-  })
-})

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

@@ -1,42 +0,0 @@
-import { describe, expect, it, vi } from 'vitest'
-
-import { fireEvent, renderWithProviders, screen } from '../../../test/utils'
-
-import DismissButton from './DismissButton'
-
-describe('DismissButton', () => {
-  it('uses the default label, invokes the handler, and stops propagation', () => {
-    const onClick = vi.fn()
-    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}>
-        <DismissButton onClick={onClick} />
-      </div>
-    )
-
-    fireEvent.click(screen.getByRole('button', { name: 'Dismiss attachment' }))
-    expect(onClick).toHaveBeenCalledOnce()
-    expect(outerClick).not.toHaveBeenCalled()
-  })
-
-  it('supports a custom label and inline styling', () => {
-    const { rerender } = renderWithProviders(
-      <DismissButton onClick={vi.fn()} ariaLabel="Remove file" />
-    )
-    const overlayClasses = screen.getByRole('button', {
-      name: 'Remove file',
-    }).className
-
-    rerender(
-      <DismissButton
-        onClick={vi.fn()}
-        ariaLabel="Remove file"
-        variant="inline"
-      />
-    )
-    const button = screen.getByRole('button', { name: 'Remove file' })
-    expect(button).toHaveClass('hover:bg-white/25')
-    expect(button.className).not.toBe(overlayClasses)
-  })
-})