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

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

@@ -1,204 +0,0 @@
-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/components/_shared/BubbleTail.test.tsx

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

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

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

@@ -1,123 +0,0 @@
-import React from 'react'
-import { describe, expect, it, vi } from 'vitest'
-
-import { renderWithProviders, screen, fireEvent } from '../../../../test/utils'
-
-import CardCta from './CardCta'
-
-describe('CardCta', () => {
-  it('renders an external anchor when the cta carries an href', () => {
-    renderWithProviders(
-      <CardCta variant="dark" cta={{ label: 'View FAQs', href: 'tr.ee/faq' }} />
-    )
-    const cta = screen.getByText('View FAQs')
-    expect(cta.tagName).toBe('A')
-    // Normalized like the shell anchor so a bare host opens externally.
-    expect(cta.getAttribute('href')).toBe('https://tr.ee/faq')
-    expect(cta.getAttribute('target')).toBe('_blank')
-    expect(cta.getAttribute('rel')).toBe('noopener noreferrer')
-    expect(cta.className).toContain('no-underline')
-  })
-
-  it('renders a button when the href is missing or unsafe', () => {
-    renderWithProviders(<CardCta variant="dark" cta={{ label: 'Plain' }} />)
-    expect(screen.getByText('Plain').tagName).toBe('BUTTON')
-    expect(screen.getByText('Plain').getAttribute('type')).toBe('button')
-
-    renderWithProviders(
-      <CardCta
-        variant="dark"
-        cta={{ label: 'Unsafe', href: 'javascript:alert(1)' }}
-      />
-    )
-    expect(screen.getByText('Unsafe').tagName).toBe('BUTTON')
-  })
-
-  it.each([
-    ['anchor', 'tr.ee/faq'],
-    ['button', undefined],
-  ])(
-    'fires the cta callback from the %s without bubbling to the card',
-    (_shape, href) => {
-      const ctaOnClick = vi.fn()
-      const cardOnClick = vi.fn()
-      renderWithProviders(
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- stands in for the card anchor the CTA must not bubble to
-        <div onClick={cardOnClick}>
-          <CardCta
-            variant="light"
-            cta={{ label: 'Act', href, onClick: ctaOnClick }}
-          />
-        </div>
-      )
-      fireEvent.click(screen.getByText('Act'))
-      expect(ctaOnClick).toHaveBeenCalledTimes(1)
-      expect(cardOnClick).not.toHaveBeenCalled()
-    }
-  )
-
-  it.each([
-    ['anchor', 'tr.ee/faq'],
-    ['button', undefined],
-  ])('tolerates a %s cta with no callback', (_shape, href) => {
-    const cardOnClick = vi.fn()
-    renderWithProviders(
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- stands in for the card anchor the CTA must not bubble to
-      <div onClick={cardOnClick}>
-        <CardCta variant="light" cta={{ label: 'Act', href }} />
-      </div>
-    )
-    fireEvent.click(screen.getByText('Act'))
-    expect(cardOnClick).not.toHaveBeenCalled()
-  })
-
-  it.each([
-    ['dark', 'primary', 'bg-white text-[#121110]'],
-    ['dark', 'secondary', 'bg-white/15 text-white'],
-    ['light', 'primary', 'bg-[#121110] text-white'],
-    ['light', 'secondary', 'bg-black/[0.06] text-[#121110]'],
-  ] as const)(
-    'paints the %s surface %s emphasis',
-    (variant, emphasis, expected) => {
-      renderWithProviders(
-        <CardCta variant={variant} cta={{ label: 'Act', variant: emphasis }} />
-      )
-      expect(screen.getByText('Act').className).toContain(expected)
-    }
-  )
-
-  it('defaults to the filled primary emphasis', () => {
-    renderWithProviders(<CardCta variant="light" cta={{ label: 'Act' }} />)
-    const cta = screen.getByText('Act')
-    expect(cta.className).toContain('bg-[#121110] text-white')
-    expect(cta.className).not.toContain('bg-black/[0.06]')
-  })
-
-  it('spans its row by default and renders the label verbatim', () => {
-    renderWithProviders(<CardCta variant="light" cta={{ label: 'Act' }} />)
-    const cta = screen.getByText('Act')
-    expect(cta.className).toContain('w-full')
-    expect(cta.querySelector('span')).toBeNull()
-  })
-
-  it('sizes to its content and truncates the label when fullWidth is off', () => {
-    renderWithProviders(
-      <CardCta variant="light" cta={{ label: 'Act' }} fullWidth={false} />
-    )
-    const label = screen.getByText('Act')
-    expect(label.tagName).toBe('SPAN')
-    expect(label.className).toContain('min-w-0 truncate')
-    expect(label.parentElement?.className).toContain('min-w-0')
-    expect(label.parentElement?.className).not.toContain('w-full')
-  })
-
-  it('offsets itself below the description unless the caller owns spacing', () => {
-    renderWithProviders(<CardCta variant="light" cta={{ label: 'Spaced' }} />)
-    expect(screen.getByText('Spaced').className).toContain('mt-2')
-
-    renderWithProviders(
-      <CardCta variant="light" cta={{ label: 'Standalone' }} standalone />
-    )
-    expect(screen.getByText('Standalone').className).not.toContain('mt-2')
-  })
-})