@linktr.ee/messaging-react 4.1.6-rc-1787162010 → 4.1.6-rc-1787162048

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.1.6-rc-1787162010",
+  "version": "4.1.6-rc-1787162048",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,17 +50,19 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "2.4.0-rc-1787162010",
+    "@linktr.ee/messaging-core": "2.5.0-rc-1787162048",
     "@linktr.ee/messaging-taxonomy": "^0.10.0",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {
     "@linktr.ee/arbor": "25.0.0",
     "@linktr.ee/design-tokens": "14.0.0",
-    "@storybook/addon-docs": "10.5.7",
-    "@storybook/addon-links": "10.5.7",
-    "@storybook/react": "10.5.7",
-    "@storybook/react-vite": "10.5.7",
+    "@storybook/addon-essentials": "^8.5.0",
+    "@storybook/addon-interactions": "^8.5.0",
+    "@storybook/addon-links": "^8.5.0",
+    "@storybook/react": "^8.5.0",
+    "@storybook/react-vite": "^8.5.0",
+    "@storybook/test": "^8.5.0",
     "@tailwindcss/container-queries": "^0.1.1",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.1.5",
@@ -77,7 +79,7 @@
     "postcss": "^8.4.49",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "10.5.7",
+    "storybook": "^8.5.0",
     "stream-chat": "^9.41.1",
     "stream-chat-react": "^13.14.5",
     "tailwindcss": "^3.4.17",

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

@@ -0,0 +1,197 @@
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { fireEvent, renderWithProviders, screen } from '../../test/utils'
+
+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.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 { rerender } = renderWithProviders(
+      <FaqList faqs={faqs} onFaqClick={vi.fn()} />
+    )
+    expect(screen.queryByText('Frequently asked questions')).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)
+
+    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')
+  })
+})