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

package/src/components/LinkAttachment/components/_shared/CardShell.test.tsx

@@ -1,193 +0,0 @@
-import React from 'react'
-import { describe, expect, it, vi } from 'vitest'
-
-import { renderWithProviders, screen, fireEvent } from '../../../../test/utils'
-
-import CardShell, { LOADING_LABEL } from './CardShell'
-
-const shellOf = (testId = 'shell') => screen.getByTestId(testId)
-
-describe('CardShell', () => {
-  it('renders a non-interactive div when neither href nor onClick is set', () => {
-    renderWithProviders(
-      <CardShell variant="light" data-testid="shell">
-        body
-      </CardShell>
-    )
-    const shell = shellOf()
-    expect(shell.tagName).toBe('DIV')
-    expect(shell.className).not.toContain('cursor-pointer')
-    expect(shell.className).not.toContain('focus-ring')
-    expect(shell.getAttribute('data-variant')).toBe('light')
-  })
-
-  it('renders an external anchor when href is set and fires onClick alongside navigation', () => {
-    const onClick = vi.fn()
-    renderWithProviders(
-      <CardShell
-        variant="dark"
-        href="https://tr.ee/briemix"
-        onClick={onClick}
-        data-testid="shell"
-      >
-        body
-      </CardShell>
-    )
-    const shell = shellOf()
-    expect(shell.tagName).toBe('A')
-    expect(shell.getAttribute('href')).toBe('https://tr.ee/briemix')
-    expect(shell.getAttribute('target')).toBe('_blank')
-    expect(shell.getAttribute('rel')).toBe('noopener noreferrer')
-    expect(shell.className).toContain('cursor-pointer')
-    expect(shell.className).toContain('no-underline')
-    expect(shell.className).toContain('focus-ring')
-    fireEvent.click(shell)
-    expect(onClick).toHaveBeenCalledTimes(1)
-  })
-
-  it('renders a labelled button when onClick is set without href', () => {
-    const onClick = vi.fn()
-    renderWithProviders(
-      <CardShell
-        variant="light"
-        onClick={onClick}
-        ariaLabel="Open attachment preview"
-        data-testid="shell"
-      >
-        body
-      </CardShell>
-    )
-    const shell = shellOf()
-    expect(shell.tagName).toBe('BUTTON')
-    expect(shell.getAttribute('type')).toBe('button')
-    expect(shell.getAttribute('aria-label')).toBe('Open attachment preview')
-    // The button's own centring is overridden so the chin still reads left-aligned.
-    expect(shell.className).toContain('text-left')
-    fireEvent.click(shell)
-    expect(onClick).toHaveBeenCalledTimes(1)
-  })
-
-  it('paints the variant bubble fill and lets bgClassName override it', () => {
-    const { unmount } = renderWithProviders(
-      <CardShell variant="dark" data-testid="shell">
-        body
-      </CardShell>
-    )
-    expect(shellOf().className).toContain('bg-[#1e2330]')
-    expect(shellOf().className).toContain('rounded-[20px]')
-    unmount()
-
-    renderWithProviders(
-      <CardShell variant="light" data-testid="light">
-        body
-      </CardShell>
-    )
-    expect(shellOf('light').className).toContain('bg-[#f1f0ee]')
-
-    renderWithProviders(
-      <CardShell variant="dark" bgClassName="bg-[#F2F3F4]" data-testid="audio">
-        body
-      </CardShell>
-    )
-    const audio = shellOf('audio')
-    expect(audio.className).toContain('bg-[#F2F3F4]')
-    expect(audio.className).not.toContain('bg-[#1e2330]')
-  })
-
-  it('locks to the 250px column only when fixedHeight is set', () => {
-    renderWithProviders(
-      <CardShell variant="dark" fixedHeight data-testid="fixed">
-        body
-      </CardShell>
-    )
-    expect(shellOf('fixed').className).toContain('flex h-[250px] flex-col')
-    expect(shellOf('fixed').className).not.toContain('block')
-
-    renderWithProviders(
-      <CardShell variant="dark" data-testid="intrinsic">
-        body
-      </CardShell>
-    )
-    expect(shellOf('intrinsic').className).toContain('block')
-    expect(shellOf('intrinsic').className).not.toContain('h-[250px]')
-  })
-
-  it('exposes a labelled busy region only while busy', () => {
-    renderWithProviders(
-      <CardShell variant="dark" busy data-testid="busy">
-        body
-      </CardShell>
-    )
-    const busy = shellOf('busy')
-    expect(busy.getAttribute('role')).toBe('status')
-    expect(busy.getAttribute('aria-busy')).toBe('true')
-    expect(busy.getAttribute('aria-label')).toBe(LOADING_LABEL)
-    expect(LOADING_LABEL).toBe('Loading link preview')
-
-    renderWithProviders(
-      <CardShell variant="dark" data-testid="ready">
-        body
-      </CardShell>
-    )
-    const ready = shellOf('ready')
-    expect(ready.getAttribute('role')).toBeNull()
-    expect(ready.getAttribute('aria-busy')).toBeNull()
-    expect(ready.getAttribute('aria-label')).toBeNull()
-  })
-
-  it('publishes the accent as a custom property, and nothing without one', () => {
-    renderWithProviders(
-      <CardShell variant="dark" accentHex="#7008E7" data-testid="accented">
-        body
-      </CardShell>
-    )
-    expect(shellOf('accented').style.getPropertyValue('--accent')).toBe(
-      '#7008E7'
-    )
-
-    renderWithProviders(
-      <CardShell variant="dark" data-testid="plain">
-        body
-      </CardShell>
-    )
-    expect(shellOf('plain').style.getPropertyValue('--accent')).toBe('')
-  })
-
-  it('renders the topRight slot pinned to the corner above the content', () => {
-    renderWithProviders(
-      <CardShell
-        variant="dark"
-        topRight={<button type="button">Dismiss</button>}
-        data-testid="shell"
-      >
-        body
-      </CardShell>
-    )
-    const corner = screen.getByText('Dismiss').parentElement
-    expect(corner?.className).toContain('absolute right-3 top-3')
-    expect(corner?.className).toContain('z-10')
-  })
-
-  it('omits the corner wrapper when no topRight is provided', () => {
-    const { container } = renderWithProviders(
-      <CardShell variant="dark" data-testid="shell">
-        body
-      </CardShell>
-    )
-    expect(container.querySelectorAll('div.absolute')).toHaveLength(0)
-  })
-
-  it.each([
-    ['anchor', { href: 'https://tr.ee/a' }],
-    ['button', { onClick: () => {} }],
-    ['div', {}],
-  ])('forwards rootRef for the %s shape', (_shape, props) => {
-    const ref = React.createRef<HTMLElement>()
-    renderWithProviders(
-      <CardShell variant="dark" rootRef={ref} data-testid="shell" {...props}>
-        body
-      </CardShell>
-    )
-    expect(ref.current).toBe(shellOf())
-  })
-})

package/src/components/LinkAttachment/components/_shared/CardThumbnail.test.tsx

@@ -1,242 +0,0 @@
-import React from 'react'
-import { describe, expect, it, vi } from 'vitest'
-
-import { renderWithProviders, screen, fireEvent } from '../../../../test/utils'
-
-import CardThumbnail, {
-  AUDIO_BG_CLASS,
-  isPlayableAudio,
-  isPlayableMedia,
-} from './CardThumbnail'
-
-const AUDIO_SRC = 'https://cdn.example.com/clip.mp3'
-const VIDEO_SRC = 'https://cdn.example.com/clip.mp4'
-const IMAGE_SRC = 'https://cdn.example.com/cover.jpg'
-
-describe('isPlayableAudio', () => {
-  it('needs both an audio mime type and a source url', () => {
-    expect(isPlayableAudio('audio/mpeg', AUDIO_SRC)).toBe(true)
-    expect(isPlayableAudio('audio/mpeg', undefined)).toBe(false)
-    expect(isPlayableAudio('audio/mpeg', '')).toBe(false)
-    expect(isPlayableAudio(undefined, AUDIO_SRC)).toBe(false)
-    expect(isPlayableAudio('', AUDIO_SRC)).toBe(false)
-  })
-
-  it('rejects non-audio mime types', () => {
-    expect(isPlayableAudio('video/mp4', VIDEO_SRC)).toBe(false)
-    expect(isPlayableAudio('image/png', IMAGE_SRC)).toBe(false)
-    expect(isPlayableAudio('application/pdf', IMAGE_SRC)).toBe(false)
-  })
-})
-
-describe('isPlayableMedia', () => {
-  it('covers both playable shapes and nothing else', () => {
-    expect(isPlayableMedia('video/mp4', VIDEO_SRC)).toBe(true)
-    expect(isPlayableMedia('audio/mpeg', AUDIO_SRC)).toBe(true)
-    expect(isPlayableMedia('image/png', IMAGE_SRC)).toBe(false)
-    expect(isPlayableMedia('application/pdf', IMAGE_SRC)).toBe(false)
-  })
-
-  it('needs both halves of the pair', () => {
-    expect(isPlayableMedia('video/mp4', undefined)).toBe(false)
-    expect(isPlayableMedia('video/mp4', '')).toBe(false)
-    expect(isPlayableMedia(undefined, VIDEO_SRC)).toBe(false)
-    expect(isPlayableMedia('', VIDEO_SRC)).toBe(false)
-  })
-})
-
-describe('AUDIO_BG_CLASS', () => {
-  it('is a verbatim literal so Tailwind can find it when scanning dist', () => {
-    expect(AUDIO_BG_CLASS).toBe('bg-[#F2F3F4]')
-  })
-})
-
-describe('CardThumbnail', () => {
-  it('collapses the hero to a padded native audio player', () => {
-    const { container } = renderWithProviders(
-      <CardThumbnail
-        variant="dark"
-        mimeType="audio/mpeg"
-        sourceUrl={AUDIO_SRC}
-        thumbnailUrl={IMAGE_SRC}
-      />
-    )
-    const audio = container.querySelector('audio')
-    expect(audio).not.toBeNull()
-    expect(audio?.getAttribute('src')).toBe(AUDIO_SRC)
-    expect(audio?.hasAttribute('controls')).toBe(true)
-    expect(audio?.getAttribute('preload')).toBe('metadata')
-    // The hero region (and its artwork) is gone entirely on this branch.
-    expect(container.querySelectorAll('img')).toHaveLength(0)
-    expect(container.querySelector('div.flex-1')).toBeNull()
-  })
-
-  it('keeps the skeleton instead of an audio player while loading', () => {
-    const { container } = renderWithProviders(
-      <CardThumbnail
-        variant="dark"
-        mimeType="audio/mpeg"
-        sourceUrl={AUDIO_SRC}
-        isLoading
-      />
-    )
-    expect(container.querySelector('audio')).toBeNull()
-    expect(container.querySelector('div.animate-pulse')).not.toBeNull()
-  })
-
-  it('renders a video player with the poster over a black hero', () => {
-    const { container } = renderWithProviders(
-      <CardThumbnail
-        variant="light"
-        mimeType="video/mp4"
-        sourceUrl={VIDEO_SRC}
-        thumbnailUrl={IMAGE_SRC}
-        title="Clip"
-        onImageError={() => {}}
-      />
-    )
-    const video = container.querySelector('video')
-    expect(video?.getAttribute('src')).toBe(VIDEO_SRC)
-    expect(video?.getAttribute('poster')).toBe(IMAGE_SRC)
-    expect(video?.hasAttribute('controls')).toBe(true)
-    expect(video?.getAttribute('preload')).toBe('metadata')
-    expect(container.querySelector('div.flex-1')?.className).toContain(
-      'bg-black'
-    )
-  })
-
-  it('probes the video poster with a hidden image that reports failures', () => {
-    const onImageError = vi.fn()
-    const { container } = renderWithProviders(
-      <CardThumbnail
-        variant="light"
-        mimeType="video/mp4"
-        sourceUrl={VIDEO_SRC}
-        thumbnailUrl={IMAGE_SRC}
-        onImageError={onImageError}
-      />
-    )
-    const probe = container.querySelector('img')
-    expect(probe).not.toBeNull()
-    expect(probe?.className).toContain('hidden')
-    expect(probe?.getAttribute('aria-hidden')).toBe('true')
-    fireEvent.error(probe as HTMLImageElement)
-    expect(onImageError).toHaveBeenCalledTimes(1)
-  })
-
-  it('skips the poster probe when there is nothing to report to', () => {
-    const { container: noHandler } = renderWithProviders(
-      <CardThumbnail
-        variant="light"
-        mimeType="video/mp4"
-        sourceUrl={VIDEO_SRC}
-        thumbnailUrl={IMAGE_SRC}
-      />
-    )
-    expect(noHandler.querySelectorAll('img')).toHaveLength(0)
-
-    const { container: noPoster } = renderWithProviders(
-      <CardThumbnail
-        variant="light"
-        mimeType="video/mp4"
-        sourceUrl={VIDEO_SRC}
-        onImageError={() => {}}
-      />
-    )
-    expect(noPoster.querySelectorAll('img')).toHaveLength(0)
-    expect(noPoster.querySelector('video')?.getAttribute('poster')).toBeNull()
-  })
-
-  it('renders the thumbnail image with the title as its alt text', () => {
-    const { container } = renderWithProviders(
-      <CardThumbnail
-        variant="light"
-        thumbnailUrl={IMAGE_SRC}
-        title="Cover art"
-      />
-    )
-    const image = container.querySelector('img')
-    expect(image?.getAttribute('src')).toBe(IMAGE_SRC)
-    expect(image?.getAttribute('alt')).toBe('Cover art')
-    expect(image?.getAttribute('loading')).toBe('lazy')
-    expect(image?.getAttribute('decoding')).toBe('async')
-    expect(image?.getAttribute('draggable')).toBe('false')
-  })
-
-  it('falls back to empty alt text when the card has no title', () => {
-    const { container } = renderWithProviders(
-      <CardThumbnail variant="light" thumbnailUrl={IMAGE_SRC} />
-    )
-    expect(container.querySelector('img')?.getAttribute('alt')).toBe('')
-  })
-
-  it('reports a failing hero image to its owner', () => {
-    const onImageError = vi.fn()
-    const { container } = renderWithProviders(
-      <CardThumbnail
-        variant="light"
-        thumbnailUrl={IMAGE_SRC}
-        onImageError={onImageError}
-      />
-    )
-    fireEvent.error(container.querySelector('img') as HTMLImageElement)
-    expect(onImageError).toHaveBeenCalledTimes(1)
-  })
-
-  it('shows a variant-aware type-icon placeholder without a thumbnail', () => {
-    const { container: dark } = renderWithProviders(
-      <CardThumbnail variant="dark" mimeType="application/pdf" />
-    )
-    expect(dark.querySelectorAll('img')).toHaveLength(0)
-    const darkPlaceholder = dark.querySelector('div.items-center')
-    expect(darkPlaceholder?.className).toContain('bg-white/10')
-    expect(darkPlaceholder?.querySelector('svg')?.getAttribute('class')).toBe(
-      'size-16 text-white/25'
-    )
-
-    const { container: light } = renderWithProviders(
-      <CardThumbnail variant="light" />
-    )
-    const lightPlaceholder = light.querySelector('div.items-center')
-    expect(lightPlaceholder?.className).toContain('bg-black/5')
-    expect(lightPlaceholder?.querySelector('svg')?.getAttribute('class')).toBe(
-      'size-16 text-black/25'
-    )
-  })
-
-  it('pulses a variant-aware block while loading, ignoring the thumbnail', () => {
-    const { container: dark } = renderWithProviders(
-      <CardThumbnail variant="dark" thumbnailUrl={IMAGE_SRC} isLoading />
-    )
-    expect(dark.querySelectorAll('img')).toHaveLength(0)
-    const bar = dark.querySelector('div.animate-pulse')
-    expect(bar?.className).toContain('bg-white/10')
-    expect(bar?.getAttribute('aria-hidden')).toBe('true')
-
-    const { container: light } = renderWithProviders(
-      <CardThumbnail variant="light" isLoading />
-    )
-    expect(light.querySelector('div.animate-pulse')?.className).toContain(
-      'bg-black/5'
-    )
-  })
-
-  it('pins the corner slots and omits their wrappers when unused', () => {
-    renderWithProviders(
-      <CardThumbnail
-        variant="dark"
-        topLeft={<span>left</span>}
-        topRight={<span>right</span>}
-      />
-    )
-    expect(screen.getByText('left').parentElement?.className).toContain(
-      'absolute left-3 top-3'
-    )
-    expect(screen.getByText('right').parentElement?.className).toContain(
-      'absolute right-3 top-3'
-    )
-
-    const { container } = renderWithProviders(<CardThumbnail variant="dark" />)
-    expect(container.querySelectorAll('div.absolute')).toHaveLength(0)
-  })
-})

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

@@ -1,37 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { HEX_PATTERN, toCssHex } from './hex'
-
-describe('HEX_PATTERN', () => {
-  it.each(['#7008E7', '7008e7', '#abc', 'ABC'])('accepts %s', (value) => {
-    expect(HEX_PATTERN.test(value)).toBe(true)
-  })
-
-  it.each([
-    '#7008E', // 5 digits — neither shorthand nor full
-    '#ab', // too short for the shorthand
-    '#abcz', // trailing non-hex character
-    'x#abc', // hex embedded in a longer value
-    '#abc ', // untrimmed
-    'rebeccapurple', // CSS would resolve it; the extractor never emits it
-    'rgb(1,2,3)',
-    '',
-  ])('rejects %s', (value) => {
-    expect(HEX_PATTERN.test(value)).toBe(false)
-  })
-})
-
-describe('toCssHex', () => {
-  it('adds the missing hash to a bare hex', () => {
-    expect(toCssHex('7008E7')).toBe('#7008E7')
-  })
-
-  it('leaves an already-hashed hex alone', () => {
-    expect(toCssHex('#7008E7')).toBe('#7008E7')
-  })
-
-  it('trims before hashing so the value is usable as a CSS colour', () => {
-    expect(toCssHex('  7008E7  ')).toBe('#7008E7')
-    expect(toCssHex('  #7008E7  ')).toBe('#7008E7')
-  })
-})

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

@@ -1,72 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { normalizeExternalHref } from './normalizeExternalHref'
-
-describe('normalizeExternalHref', () => {
-  it('prefixes a bare hostname so it opens externally', () => {
-    expect(normalizeExternalHref('tr.ee/briemix')).toBe('https://tr.ee/briemix')
-  })
-
-  it('trims surrounding whitespace before prefixing', () => {
-    expect(normalizeExternalHref('  tr.ee/briemix  ')).toBe(
-      'https://tr.ee/briemix'
-    )
-  })
-
-  it('returns undefined for missing, non-string and blank values', () => {
-    expect(normalizeExternalHref()).toBeUndefined()
-    expect(normalizeExternalHref(undefined)).toBeUndefined()
-    expect(
-      normalizeExternalHref(42 as unknown as string | undefined)
-    ).toBeUndefined()
-    expect(normalizeExternalHref('')).toBeUndefined()
-    expect(normalizeExternalHref('   ')).toBeUndefined()
-  })
-
-  it.each([
-    'http://example.com/a',
-    'https://example.com/a',
-    'mailto:hello@example.com',
-    'tel:+61400000000',
-    'sms:+61400000000',
-  ])('passes the safe scheme %s through untouched', (value) => {
-    expect(normalizeExternalHref(value)).toBe(value)
-  })
-
-  it('accepts a safe scheme regardless of case', () => {
-    expect(normalizeExternalHref('HTTPS://example.com')).toBe(
-      'HTTPS://example.com'
-    )
-  })
-
-  it.each([
-    'javascript:alert(1)',
-    'data:text/html;base64,PHNjcmlwdD4=',
-    'ftp://example.com/a',
-    'file:///etc/passwd',
-  ])('rejects the unsafe scheme %s', (value) => {
-    expect(normalizeExternalHref(value)).toBeUndefined()
-  })
-
-  it('only reads a scheme at the start of the value', () => {
-    // A nested `https:` inside a query string is not this value's scheme, so
-    // the bare host still gets prefixed.
-    expect(normalizeExternalHref('tr.ee/a?next=https://example.com')).toBe(
-      'https://tr.ee/a?next=https://example.com'
-    )
-  })
-
-  it('keeps protocol-relative and root-relative paths as-is', () => {
-    expect(normalizeExternalHref('//cdn.example.com/a.png')).toBe(
-      '//cdn.example.com/a.png'
-    )
-    expect(normalizeExternalHref('/local/path')).toBe('/local/path')
-  })
-
-  it('prefixes hosts that merely end in a slash', () => {
-    // The leading-slash checks are prefix tests: a trailing slash is still a
-    // bare host and must be prefixed.
-    expect(normalizeExternalHref('example.com/')).toBe('https://example.com/')
-    expect(normalizeExternalHref('example.com//')).toBe('https://example.com//')
-  })
-})