@linktr.ee/messaging-react 4.1.6 → 4.1.7-rc-1787179679

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

@@ -483,3 +483,330 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
     )
   })
 })
+
+const AUDIO = {
+  mimeType: 'audio/mpeg',
+  sourceUrl: 'https://cdn.example.com/clip.mp3',
+}
+const VIDEO = {
+  mimeType: 'video/mp4',
+  sourceUrl: 'https://cdn.example.com/clip.mp4',
+}
+const HERO = 'https://cdn.example.com/yoga.jpg'
+
+// Sent / Composer cards carry no test hook of their own; the shell is the
+// element that owns the card chrome classes.
+const shellOf = (container: HTMLElement) =>
+  container.querySelector('.messaging-link-card') as HTMLElement
+
+describe('LinkAttachment.Composer chrome', () => {
+  it('anchors the dismiss control to the hero on a featured card', () => {
+    const onDismiss = vi.fn()
+    const { container } = renderWithProviders(
+      <LinkAttachment.Composer
+        title="Brie’s FAQ"
+        thumbnailUrl={HERO}
+        onDismiss={onDismiss}
+      />
+    )
+    const dismiss = screen.getByLabelText('Dismiss attachment')
+    expect(dismiss.parentElement?.className).toContain('absolute right-3 top-3')
+    // Sits inside the hero region, not the shell corner.
+    expect(container.querySelector('div.flex-1')?.contains(dismiss)).toBe(true)
+    // 44x44 touch target without growing the 24px circle.
+    expect(dismiss.className).toContain('before:-inset-[10px]')
+    fireEvent.click(dismiss)
+    expect(onDismiss).toHaveBeenCalledTimes(1)
+  })
+
+  it('moves the dismiss control to the shell corner on a classic card', () => {
+    const { container } = renderWithProviders(
+      <LinkAttachment.Composer
+        title="Brie’s FAQ"
+        thumbnailUrl={HERO}
+        layout="classic"
+        onDismiss={() => {}}
+      />
+    )
+    expect(container.querySelector('img')).toBeNull()
+    const shell = shellOf(container)
+    expect(shell.contains(screen.getByLabelText('Dismiss attachment'))).toBe(
+      true
+    )
+    // Classic cards size to their content.
+    expect(shell.className).not.toContain('h-[250px]')
+    expect(shell.className).toContain('block')
+  })
+
+  it('defaults to the featured layout with its hero and fixed box', () => {
+    const { container } = renderWithProviders(
+      <LinkAttachment.Composer title="Brie’s FAQ" thumbnailUrl={HERO} />
+    )
+    expect(container.querySelector('img')?.getAttribute('src')).toBe(HERO)
+    expect(shellOf(container).className).toContain('h-[250px]')
+  })
+
+  it('collapses an audio composer card to the player plus an inline dismiss', () => {
+    const { container } = renderWithProviders(
+      <LinkAttachment.Composer
+        title="My track"
+        url="tr.ee/briemix"
+        {...AUDIO}
+        onDismiss={() => {}}
+      />
+    )
+    const shell = shellOf(container)
+    expect(shell.className).toContain(AUDIO_BG_CLASS)
+    expect(container.querySelector('audio')).not.toBeNull()
+    // No chin on this path, so the URL line goes with it.
+    expect(screen.queryByTestId('link-attachment-url')).toBeNull()
+    const dismiss = screen.getByLabelText('Dismiss attachment')
+    // Inline sibling of the native controls: no overlay halo on top of them.
+    expect(dismiss.className).not.toContain('before:-inset-[10px]')
+    expect(dismiss.parentElement?.className).not.toContain('absolute')
+  })
+
+  it('lets the consumer name the dismiss control', () => {
+    renderWithProviders(
+      <LinkAttachment.Composer
+        title="Brie’s FAQ"
+        onDismiss={() => {}}
+        dismissLabel="Remove link"
+      />
+    )
+    expect(screen.getByLabelText('Remove link')).toBeInTheDocument()
+    expect(screen.queryByLabelText('Dismiss attachment')).toBeNull()
+  })
+
+  it('renders the edit affordance only when a handler is given', () => {
+    const onEditClick = vi.fn()
+    renderWithProviders(
+      <LinkAttachment.Composer title="Brie’s FAQ" onEditClick={onEditClick} />
+    )
+    fireEvent.click(screen.getByLabelText('Edit attachment'))
+    expect(onEditClick).toHaveBeenCalledTimes(1)
+    expect(screen.queryByLabelText('Dismiss attachment')).toBeNull()
+  })
+
+  it('renders no affordances when the composer passes no handlers', () => {
+    renderWithProviders(<LinkAttachment.Composer title="Brie’s FAQ" />)
+    expect(screen.queryByRole('button')).toBeNull()
+  })
+})
+
+describe('LinkAttachment interactivity contract', () => {
+  it('keeps the Received shell non-interactive around playable media', () => {
+    const onClick = vi.fn()
+    renderWithProviders(
+      <LinkAttachment.Received
+        title="Clip"
+        url="tr.ee/briemix"
+        thumbnailUrl={HERO}
+        {...VIDEO}
+        onClick={onClick}
+      />
+    )
+    // The native controls own clicks, so the shell is neither anchor nor button.
+    const root = screen.getByTestId('link-attachment')
+    expect(root.tagName).toBe('DIV')
+    fireEvent.click(root)
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it('keeps the Received shell non-interactive when a CTA owns the click', () => {
+    renderWithProviders(
+      <LinkAttachment.Received
+        title="FAQ"
+        url="tr.ee/briemix"
+        cta={{ label: 'View FAQs' }}
+      />
+    )
+    expect(screen.getByTestId('link-attachment').tagName).toBe('DIV')
+  })
+
+  it('treats a whitespace-only Received url as no url at all', () => {
+    renderWithProviders(
+      <LinkAttachment.Received title="Brie’s FAQ" url="   " />
+    )
+    const root = screen.getByTestId('link-attachment')
+    expect(root.tagName).toBe('DIV')
+    expect(root.hasAttribute('href')).toBe(false)
+    expect(screen.queryByTestId('link-attachment-url')).toBeNull()
+  })
+
+  it('names the Received preview button after the title, then falls back', () => {
+    const { unmount } = renderWithProviders(
+      <LinkAttachment.Received
+        title="Featured image"
+        thumbnailUrl={HERO}
+        onClick={() => {}}
+      />
+    )
+    expect(screen.getByTestId('link-attachment')).toHaveAttribute(
+      'aria-label',
+      'Featured image'
+    )
+    unmount()
+
+    renderWithProviders(
+      <LinkAttachment.Received thumbnailUrl={HERO} onClick={() => {}} />
+    )
+    expect(screen.getByTestId('link-attachment')).toHaveAttribute(
+      'aria-label',
+      'Open attachment preview'
+    )
+  })
+
+  it('ignores the Sent onClick when there is nothing to open', () => {
+    const onClick = vi.fn()
+    const { container } = renderWithProviders(
+      <LinkAttachment.Sent title="My Playlist" onClick={onClick} />
+    )
+    const shell = shellOf(container)
+    expect(shell.tagName).toBe('DIV')
+    fireEvent.click(shell)
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it('ignores the Sent onClick around playable media', () => {
+    const onClick = vi.fn()
+    const { container } = renderWithProviders(
+      <LinkAttachment.Sent
+        title="Clip"
+        url="tr.ee/briemix"
+        thumbnailUrl={HERO}
+        {...VIDEO}
+        onClick={onClick}
+      />
+    )
+    const shell = shellOf(container)
+    expect(shell.tagName).toBe('DIV')
+    fireEvent.click(shell)
+    expect(onClick).not.toHaveBeenCalled()
+  })
+})
+
+describe('LinkAttachment bubble tail grouping', () => {
+  it.each([
+    ['single', true],
+    ['end', true],
+    ['first', false],
+    ['middle', false],
+  ] as const)(
+    'paints the Received tail for groupPosition %s: %s',
+    (groupPosition, expected) => {
+      renderWithProviders(
+        <LinkAttachment.Received
+          title="Brie’s FAQ"
+          url="tr.ee/briemix"
+          groupPosition={groupPosition}
+        />
+      )
+      expect(screen.queryByTestId('link-card-tail') != null).toBe(expected)
+    }
+  )
+
+  it.each([
+    ['single', true],
+    ['end', true],
+    ['first', false],
+  ] as const)(
+    'paints the Sent tail for groupPosition %s: %s',
+    (groupPosition, expected) => {
+      renderWithProviders(
+        <LinkAttachment.Sent
+          title="Brie’s FAQ"
+          url="tr.ee/briemix"
+          groupPosition={groupPosition}
+        />
+      )
+      expect(screen.queryByTestId('link-card-tail') != null).toBe(expected)
+    }
+  )
+
+  it('defaults both chat cards to the tail-bearing single position', () => {
+    const { unmount } = renderWithProviders(
+      <LinkAttachment.Received title="Brie’s FAQ" url="tr.ee/briemix" />
+    )
+    expect(screen.getByTestId('link-card-tail')).toHaveAttribute(
+      'data-variant',
+      'light'
+    )
+    unmount()
+
+    renderWithProviders(
+      <LinkAttachment.Sent title="Brie’s FAQ" url="tr.ee/briemix" />
+    )
+    expect(screen.getByTestId('link-card-tail')).toHaveAttribute(
+      'data-variant',
+      'dark'
+    )
+  })
+
+  it('gives the audio player card no tail — it is not a bubble', () => {
+    const { unmount } = renderWithProviders(
+      <LinkAttachment.Sent title="My track" {...AUDIO} groupPosition="end" />
+    )
+    expect(screen.queryByTestId('link-card-tail')).toBeNull()
+    unmount()
+
+    renderWithProviders(
+      <LinkAttachment.Received
+        title="My track"
+        {...AUDIO}
+        groupPosition="end"
+      />
+    )
+    expect(screen.queryByTestId('link-card-tail')).toBeNull()
+  })
+})
+
+describe('LinkAttachment layout and surface', () => {
+  it.each([
+    ['Sent', LinkAttachment.Sent],
+    ['Received', LinkAttachment.Received],
+  ] as const)(
+    'drops the %s hero and the fixed box for classic',
+    (_side, Card) => {
+      const { container } = renderWithProviders(
+        <Card
+          title="Brie’s FAQ"
+          url="tr.ee/briemix"
+          thumbnailUrl={HERO}
+          layout="classic"
+        />
+      )
+      expect(container.querySelector('img')).toBeNull()
+      const shell = shellOf(container)
+      expect(shell.className).not.toContain('h-[250px]')
+      expect(shell.className).toContain('block')
+    }
+  )
+
+  it.each([
+    ['Sent', LinkAttachment.Sent],
+    ['Received', LinkAttachment.Received],
+  ] as const)('locks the featured %s card to the 250px box', (_side, Card) => {
+    const { container } = renderWithProviders(
+      <Card title="Brie’s FAQ" url="tr.ee/briemix" thumbnailUrl={HERO} />
+    )
+    expect(container.querySelector('img')?.getAttribute('src')).toBe(HERO)
+    expect(shellOf(container).className).toContain('h-[250px]')
+  })
+
+  it.each([
+    ['Sent', LinkAttachment.Sent],
+    ['Received', LinkAttachment.Received],
+  ] as const)(
+    'sizes the %s audio card to its content on the audio surface',
+    (_side, Card) => {
+      const { container } = renderWithProviders(
+        <Card title="My track" url="tr.ee/briemix" {...AUDIO} />
+      )
+      const shell = shellOf(container)
+      expect(shell.className).toContain(AUDIO_BG_CLASS)
+      expect(shell.className).not.toContain('h-[250px]')
+      expect(container.querySelector('audio')).not.toBeNull()
+    }
+  )
+})

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

@@ -0,0 +1,76 @@
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+
+import { renderWithProviders, screen } from '../../../../test/utils'
+
+import BubbleTail from './BubbleTail'
+
+describe('BubbleTail', () => {
+  it('renders the card untouched when the tail is not visible', () => {
+    const { container } = renderWithProviders(
+      <BubbleTail side="sender" visible={false}>
+        <span>card</span>
+      </BubbleTail>
+    )
+    expect(screen.queryByTestId('link-card-tail')).not.toBeInTheDocument()
+    expect(container.firstElementChild?.tagName).toBe('SPAN')
+  })
+
+  it('wraps the card so the tail can hang outside its box', () => {
+    renderWithProviders(
+      <BubbleTail side="sender" visible>
+        <span>card</span>
+      </BubbleTail>
+    )
+    const tail = screen.getByTestId('link-card-tail')
+    expect(tail.parentElement?.className).toBe('relative isolate w-fit')
+    expect(tail.getAttribute('aria-hidden')).toBe('true')
+    // The tail follows the card so it paints over the card's bottom edge.
+    expect(screen.getByText('card').nextElementSibling).toBe(tail)
+  })
+
+  it('sits on the dark stop for the sender and stays unmirrored', () => {
+    renderWithProviders(
+      <BubbleTail side="sender" visible>
+        <span>card</span>
+      </BubbleTail>
+    )
+    const tail = screen.getByTestId('link-card-tail')
+    expect(tail.getAttribute('data-variant')).toBe('dark')
+    expect(tail.className).toContain('messaging-link-card-tail')
+    expect(tail.className).not.toContain('messaging-link-card-tail--received')
+  })
+
+  it('mirrors to the pale stop for the receiver', () => {
+    renderWithProviders(
+      <BubbleTail side="receiver" visible>
+        <span>card</span>
+      </BubbleTail>
+    )
+    const tail = screen.getByTestId('link-card-tail')
+    expect(tail.getAttribute('data-variant')).toBe('light')
+    expect(tail.className).toContain('messaging-link-card-tail--received')
+  })
+
+  it('publishes the accent so the tail derives the card surface in CSS', () => {
+    renderWithProviders(
+      <BubbleTail side="sender" visible accentHex="#7008E7">
+        <span>card</span>
+      </BubbleTail>
+    )
+    expect(
+      screen.getByTestId('link-card-tail').style.getPropertyValue('--accent')
+    ).toBe('#7008E7')
+  })
+
+  it('falls back to the plain bubble fill without an accent', () => {
+    renderWithProviders(
+      <BubbleTail side="sender" visible>
+        <span>card</span>
+      </BubbleTail>
+    )
+    expect(
+      screen.getByTestId('link-card-tail').style.getPropertyValue('--accent')
+    ).toBe('')
+  })
+})

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

@@ -0,0 +1,248 @@
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { renderWithProviders, screen, fireEvent } from '../../../../test/utils'
+
+import CardBody from './CardBody'
+
+describe('CardBody', () => {
+  it('collapses to nothing when there is no text, url or cta', () => {
+    const { container } = renderWithProviders(<CardBody variant="light" />)
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('treats whitespace-only text as absent', () => {
+    const { container } = renderWithProviders(
+      <CardBody variant="light" title="  " description="  " url="   " />
+    )
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('renders the chin when any single slot has content', () => {
+    const { container: withUrl } = renderWithProviders(
+      <CardBody variant="light" url="tr.ee/a" />
+    )
+    expect(withUrl).not.toBeEmptyDOMElement()
+
+    const { container: withDescription } = renderWithProviders(
+      <CardBody variant="light" description="Get answers" />
+    )
+    expect(withDescription).not.toBeEmptyDOMElement()
+
+    const { container: withCta } = renderWithProviders(
+      <CardBody variant="light" cta={{ label: 'View FAQs' }} />
+    )
+    expect(withCta).not.toBeEmptyDOMElement()
+  })
+
+  it('shows the placeholder title on dark cards only', () => {
+    renderWithProviders(
+      <CardBody variant="dark" placeholderTitle="Add a title" />
+    )
+    expect(screen.getByText('Add a title')).toBeInTheDocument()
+
+    const { container } = renderWithProviders(
+      <CardBody variant="light" placeholderTitle="Add a title" />
+    )
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('dims the placeholder title but not a real one', () => {
+    renderWithProviders(
+      <CardBody variant="dark" placeholderTitle="Add a title" />
+    )
+    expect(screen.getByText('Add a title').className).toContain('text-white/30')
+
+    renderWithProviders(<CardBody variant="dark" title="Brie’s FAQ" />)
+    const title = screen.getByText('Brie’s FAQ')
+    expect(title.className).toContain('text-white')
+    expect(title.className).not.toContain('text-white/30')
+  })
+
+  it('inks the light variant against its pale surface', () => {
+    renderWithProviders(
+      <CardBody variant="light" title="Brie’s FAQ" url="tr.ee/a" />
+    )
+    expect(screen.getByText('Brie’s FAQ').className).toContain('text-black/90')
+    expect(screen.getByTestId('link-attachment-url').className).toContain(
+      'text-black/55'
+    )
+  })
+
+  it('inks the dark variant against its dark surface', () => {
+    renderWithProviders(
+      <CardBody variant="dark" title="Brie’s FAQ" url="tr.ee/a" />
+    )
+    expect(screen.getByTestId('link-attachment-url').className).toContain(
+      'text-white/55'
+    )
+  })
+
+  it('replaces the variant ink with chinTextColor on every chin line', () => {
+    renderWithProviders(
+      <CardBody
+        variant="dark"
+        chinTextColor="#040403"
+        title="Brie’s FAQ"
+        description="Get answers"
+        url="tr.ee/a"
+      />
+    )
+    const title = screen.getByText('Brie’s FAQ')
+    const description = screen.getByText('Get answers')
+    const url = screen.getByTestId('link-attachment-url')
+
+    for (const node of [title, description, url]) {
+      expect(node.style.color).toBe('rgb(4, 4, 3)')
+      expect(node.className).not.toContain('text-white')
+    }
+  })
+
+  it('truncates the description to one line by default and clamps beyond that', () => {
+    renderWithProviders(
+      <CardBody variant="light" description="Get answers to every question" />
+    )
+    const single = screen.getByText('Get answers to every question')
+    expect(single.className).toContain('truncate')
+    expect(single.style.display).toBe('')
+
+    renderWithProviders(
+      <CardBody
+        variant="light"
+        description="A long prose body"
+        descriptionLines={3}
+      />
+    )
+    const clamped = screen.getByText('A long prose body')
+    expect(clamped.className).not.toContain('truncate')
+    expect(clamped.style.display).toBe('-webkit-box')
+    expect(clamped.style.getPropertyValue('-webkit-line-clamp')).toBe('3')
+    expect(clamped.style.overflow).toBe('hidden')
+  })
+
+  it('keeps the chin ink while clamping a multi-line description', () => {
+    renderWithProviders(
+      <CardBody
+        variant="dark"
+        chinTextColor="#FFFFFF"
+        description="A long prose body"
+        descriptionLines={2}
+      />
+    )
+    const clamped = screen.getByText('A long prose body')
+    expect(clamped.style.color).toBe('rgb(255, 255, 255)')
+    expect(clamped.style.getPropertyValue('-webkit-line-clamp')).toBe('2')
+  })
+
+  it('renders the trimmed url footer, and drops it entirely for a cta', () => {
+    renderWithProviders(<CardBody variant="light" url="  tr.ee/briemix  " />)
+    expect(screen.getByTestId('link-attachment-url').textContent).toBe(
+      'tr.ee/briemix'
+    )
+
+    const { container } = renderWithProviders(
+      <CardBody
+        variant="light"
+        url="tr.ee/briemix"
+        cta={{ label: 'View FAQs' }}
+      />
+    )
+    expect(
+      container.querySelector('[data-testid="link-attachment-url"]')
+    ).toBeNull()
+    expect(screen.getByText('View FAQs')).toBeInTheDocument()
+  })
+
+  it('paints the cta against ctaSurface rather than the card variant', () => {
+    renderWithProviders(
+      <CardBody
+        variant="dark"
+        ctaSurface="light"
+        cta={{ label: 'Play', variant: 'secondary' }}
+      />
+    )
+    // The audio strip is a light surface under a nominally dark card.
+    expect(screen.getByText('Play').className).toContain('bg-black/[0.06]')
+
+    renderWithProviders(
+      <CardBody variant="dark" cta={{ label: 'View FAQs' }} />
+    )
+    expect(screen.getByText('View FAQs').className).toContain('bg-white')
+  })
+
+  it('renders the app icon before the title and the trailing action beside it', () => {
+    renderWithProviders(
+      <CardBody
+        variant="dark"
+        title="Spotify"
+        appIcon={<span data-testid="app-icon">icon</span>}
+        trailingAction={<button type="button">Edit</button>}
+      />
+    )
+    const icon = screen.getByTestId('app-icon')
+    const title = screen.getByText('Spotify')
+    expect(icon.parentElement?.className).toContain('shrink-0')
+    expect(
+      icon.compareDocumentPosition(title) & Node.DOCUMENT_POSITION_FOLLOWING
+    ).toBeTruthy()
+    expect(screen.getByText('Edit').parentElement?.className).toContain(
+      'shrink-0'
+    )
+  })
+
+  it('omits the title row entirely when there is no title', () => {
+    renderWithProviders(
+      <CardBody
+        variant="light"
+        description="Get answers"
+        appIcon={<span data-testid="app-icon">icon</span>}
+      />
+    )
+    expect(screen.queryByTestId('app-icon')).not.toBeInTheDocument()
+  })
+
+  it('renders two variant-aware skeleton bars instead of text while loading', () => {
+    const { container: dark } = renderWithProviders(
+      <CardBody variant="dark" title="Brie’s FAQ" url="tr.ee/a" isLoading />
+    )
+    expect(screen.queryByText('Brie’s FAQ')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('link-attachment-url')).not.toBeInTheDocument()
+
+    const darkBars = dark.querySelectorAll('div.animate-pulse')
+    expect(darkBars).toHaveLength(2)
+    expect(darkBars[0].className).toContain('h-5 w-3/4')
+    expect(darkBars[1].className).toContain('h-4 w-1/2')
+    for (const bar of darkBars) {
+      expect(bar.className).toContain('rounded')
+      expect(bar.className).toContain('bg-white/25')
+      expect(bar.getAttribute('aria-hidden')).toBe('true')
+    }
+
+    const { container: light } = renderWithProviders(
+      <CardBody variant="light" isLoading />
+    )
+    for (const bar of light.querySelectorAll('div.animate-pulse')) {
+      expect(bar.className).toContain('bg-black/15')
+    }
+  })
+
+  it('renders the skeleton even when there is nothing else to show', () => {
+    const { container } = renderWithProviders(
+      <CardBody variant="light" isLoading />
+    )
+    expect(container).not.toBeEmptyDOMElement()
+  })
+
+  it('keeps the cta interactive alongside the chin text', () => {
+    const onClick = vi.fn()
+    renderWithProviders(
+      <CardBody
+        variant="light"
+        title="FAQ"
+        cta={{ label: 'View FAQs', onClick }}
+      />
+    )
+    fireEvent.click(screen.getByText('View FAQs'))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})