@linktr.ee/messaging-react 4.2.0-rc-1787083791 → 4.2.0-rc-1787181113

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

@@ -0,0 +1,242 @@
+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

@@ -0,0 +1,37 @@
+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

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

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

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