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

package/src/components/FaqList/FaqList.test.tsx

@@ -0,0 +1,204 @@
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { fireEvent, renderWithProviders, screen } from '../../test/utils'
+import { getAvatarEmoji } from '../Avatar/getAvatarEmoji'
+
+import { FaqListItem } from './FaqListItem'
+
+import { FaqList } from './index'
+
+const faqs = [
+  {
+    id: 'second',
+    question: 'What payment methods do you accept?',
+    answer: 'Cards and bank transfers.',
+    enabled: true,
+    order: 2,
+  },
+  {
+    id: 'disabled',
+    question: 'What is your phone number?',
+    answer: 'This FAQ is disabled.',
+    enabled: false,
+    order: 0,
+  },
+  {
+    id: 'first',
+    question: 'How do I get started?',
+    answer: 'Create an account.',
+    enabled: true,
+    order: 1,
+  },
+]
+
+const baseItemClasses = [
+  'w-full',
+  'text-center',
+  'p-4',
+  'rounded-xl',
+  'text-charcoal',
+  'font-medium',
+  'transition-colors',
+  'focus-ring',
+]
+
+describe('FaqListItem', () => {
+  it('renders its question and defaults to an enabled button', () => {
+    renderWithProviders(
+      <FaqListItem question="How do I get started?" onClick={vi.fn()} />
+    )
+
+    const button = screen.getByRole('button', {
+      name: 'How do I get started?',
+    })
+    expect(button).toBeEnabled()
+    expect(button.className.split(/\s+/)).toEqual([
+      ...baseItemClasses,
+      'hover:brightness-95',
+      'active:brightness-90',
+    ])
+  })
+
+  it('renders the FAQ surface color', () => {
+    renderWithProviders(
+      <FaqListItem question="How do I get started?" onClick={vi.fn()} />
+    )
+
+    expect(
+      screen.getByRole('button', { name: 'How do I get started?' })
+    ).toHaveStyle({ backgroundColor: '#E6E5E3' })
+  })
+
+  it('uses loading-only classes and blocks clicks while loading', () => {
+    const onClick = vi.fn()
+    renderWithProviders(
+      <FaqListItem question="How do I get started?" onClick={onClick} loading />
+    )
+
+    const button = screen.getByRole('button', {
+      name: 'How do I get started?',
+    })
+    expect(button).toBeDisabled()
+    expect(button.className.split(/\s+/)).toEqual([
+      ...baseItemClasses,
+      'opacity-50',
+      'cursor-not-allowed',
+    ])
+
+    fireEvent.click(button)
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it('calls the click handler once when enabled', () => {
+    const onClick = vi.fn()
+    renderWithProviders(
+      <FaqListItem question="How do I get started?" onClick={onClick} />
+    )
+
+    fireEvent.click(screen.getByRole('button'))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe('FaqList', () => {
+  it('returns nothing when no FAQ is enabled', () => {
+    const { container } = renderWithProviders(
+      <FaqList
+        faqs={faqs.map((faq) => ({ ...faq, enabled: false }))}
+        onFaqClick={vi.fn()}
+      />
+    )
+
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders enabled FAQs in ascending order and filters disabled FAQs', () => {
+    renderWithProviders(<FaqList faqs={faqs} onFaqClick={vi.fn()} />)
+
+    expect(
+      screen.getByRole('button', { name: 'How do I get started?' })
+        .parentElement
+    ).toHaveStyle({ backgroundColor: '#F1F0EE' })
+    expect(
+      screen.getAllByRole('button').map((button) => button.textContent)
+    ).toEqual(['How do I get started?', 'What payment methods do you accept?'])
+    expect(
+      screen.queryByRole('button', { name: 'What is your phone number?' })
+    ).toBeNull()
+  })
+
+  it('renders the header only when headerText is provided', () => {
+    const { container, rerender } = renderWithProviders(
+      <FaqList faqs={faqs} onFaqClick={vi.fn()} />
+    )
+    expect(screen.queryByText('Frequently asked questions')).toBeNull()
+    expect(container.querySelector('p')).toBeNull()
+
+    rerender(
+      <FaqList
+        faqs={faqs}
+        onFaqClick={vi.fn()}
+        headerText="Frequently asked questions"
+      />
+    )
+    expect(screen.getByText('Frequently asked questions')).toBeInTheDocument()
+  })
+
+  it('passes className to the list root', () => {
+    const { container } = renderWithProviders(
+      <FaqList
+        faqs={faqs}
+        onFaqClick={vi.fn()}
+        className="faq-list-custom-class"
+      />
+    )
+
+    expect(container.firstElementChild).toHaveClass('faq-list-custom-class')
+  })
+
+  it('renders an avatar only when avatar data is provided', () => {
+    const { rerender } = renderWithProviders(
+      <FaqList faqs={faqs} onFaqClick={vi.fn()} />
+    )
+    expect(screen.queryAllByTestId('avatar-ring')).toHaveLength(0)
+
+    rerender(
+      <FaqList faqs={faqs} onFaqClick={vi.fn()} avatarName="Brie Nala" />
+    )
+    expect(screen.queryAllByTestId('avatar-ring')).toHaveLength(1)
+    expect(screen.getByText(getAvatarEmoji('Brie Nala'))).toBeInTheDocument()
+
+    rerender(
+      <FaqList
+        faqs={faqs}
+        onFaqClick={vi.fn()}
+        avatarImage="https://cdn.example.com/avatar.jpg"
+      />
+    )
+    expect(screen.queryAllByTestId('avatar-ring')).toHaveLength(1)
+  })
+
+  it('passes the clicked FAQ id and marks only its matching row as loading', () => {
+    const onFaqClick = vi.fn()
+    renderWithProviders(
+      <FaqList faqs={faqs} onFaqClick={onFaqClick} loadingFaqId="second" />
+    )
+
+    const firstButton = screen.getByRole('button', {
+      name: 'How do I get started?',
+    })
+    const secondButton = screen.getByRole('button', {
+      name: 'What payment methods do you accept?',
+    })
+    expect(firstButton).toBeEnabled()
+    expect(secondButton).toBeDisabled()
+    expect(firstButton).not.toHaveClass('opacity-50', 'cursor-not-allowed')
+    expect(secondButton).toHaveClass('opacity-50', 'cursor-not-allowed')
+
+    fireEvent.click(firstButton)
+    fireEvent.click(secondButton)
+    expect(onFaqClick).toHaveBeenCalledTimes(1)
+    expect(onFaqClick).toHaveBeenCalledWith('first')
+  })
+})

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('')
+  })
+})