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

package/src/components/AttachmentCard/index.test.tsx

@@ -0,0 +1,160 @@
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+
+import { renderWithProviders, screen } from '../../test/utils'
+
+import AttachmentCard from './index'
+
+const thumbnail = <div data-testid="thumbnail">thumbnail</div>
+
+describe('AttachmentCard', () => {
+  it('applies the dark and light root surfaces and type icon colors', () => {
+    const dark = renderWithProviders(
+      <AttachmentCard
+        variant="dark"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+        title="Dark file"
+      />
+    )
+    expect(screen.getByText('Dark file')).toBeInTheDocument()
+    expect(dark.container.firstElementChild).toHaveClass('bg-[#1e2330]')
+    expect(dark.container.querySelector('svg')).toHaveClass('text-white/55')
+    dark.unmount()
+
+    const light = renderWithProviders(
+      <AttachmentCard
+        variant="light"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+        title="Light file"
+      />
+    )
+    expect(light.container.firstElementChild).toHaveClass('bg-white')
+    expect(light.container.querySelector('svg')).toHaveClass('text-black/55')
+  })
+
+  it('uses the dark placeholder title and dims it when title is absent', () => {
+    renderWithProviders(
+      <AttachmentCard
+        variant="dark"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+        placeholderTitle="Waiting for title"
+      />
+    )
+    expect(screen.getByText('Waiting for title')).toHaveClass('text-white/30')
+  })
+
+  it('does not render a light title for missing or whitespace-only values', () => {
+    const { rerender } = renderWithProviders(
+      <AttachmentCard
+        variant="light"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+      />
+    )
+    expect(screen.queryByText('Attachment title')).toBeNull()
+
+    rerender(
+      <AttachmentCard
+        variant="light"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+        title="   "
+      />
+    )
+    expect(screen.queryByText('   ')).toBeNull()
+  })
+
+  it('uses an undimmed title class when a dark title is provided', () => {
+    renderWithProviders(
+      <AttachmentCard
+        variant="dark"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+        title="Named file"
+      />
+    )
+    expect(screen.getByText('Named file')).toHaveClass('text-white')
+    expect(screen.getByText('Named file')).not.toHaveClass('text-white/30')
+  })
+
+  it('renders detail only for non-empty values', () => {
+    const { rerender } = renderWithProviders(
+      <AttachmentCard
+        variant="light"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+        title="File"
+        detail="2 MB"
+      />
+    )
+    expect(screen.getByText('2 MB')).toBeInTheDocument()
+
+    rerender(
+      <AttachmentCard
+        variant="light"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+        title="File"
+        detail=""
+      />
+    )
+    expect(screen.queryByText('2 MB')).toBeNull()
+  })
+
+  it('renders optional slots only when supplied', () => {
+    const { container } = renderWithProviders(
+      <AttachmentCard
+        variant="light"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+        statusBadge={<span>Ready</span>}
+        action={<button type="button">Open</button>}
+        topLeft={<span>Left</span>}
+        topRight={<span>Right</span>}
+      />
+    )
+    expect(screen.getByText('Ready')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Open' })).toBeInTheDocument()
+    expect(screen.getByText('Left').parentElement).toHaveClass(
+      'pointer-events-auto',
+      'absolute',
+      'left-3',
+      'top-3'
+    )
+    expect(screen.getByText('Right').parentElement).toHaveClass(
+      'pointer-events-auto',
+      'absolute',
+      'right-3',
+      'top-3'
+    )
+    expect(container.querySelectorAll('.pointer-events-auto')).toHaveLength(2)
+
+    const withoutSlots = renderWithProviders(
+      <AttachmentCard
+        variant="light"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+      />
+    )
+    expect(
+      withoutSlots.container.querySelectorAll('.pointer-events-auto')
+    ).toHaveLength(0)
+  })
+
+  it('forwards rootRef and data-testid to the root', () => {
+    const rootRef = React.createRef<HTMLDivElement>()
+    renderWithProviders(
+      <AttachmentCard
+        variant="light"
+        thumbnail={thumbnail}
+        mimeType="application/pdf"
+        rootRef={rootRef}
+        data-testid="attachment-card"
+      />
+    )
+    expect(screen.getByTestId('attachment-card')).toBe(rootRef.current)
+  })
+})

package/src/components/Avatar/Avatar.test.tsx

@@ -27,4 +27,130 @@ describe('Avatar', () => {
   it('keeps fixed emoji sizes for larger avatars', () => {
     expect(emojiFontSize(40)).toHaveStyle({ fontSize: '14px' })
   })
+
+  it.each([
+    [32, '14px'],
+    [55, '14px'],
+    [56, '18px'],
+    [119, '18px'],
+    [120, '36px'],
+  ])(
+    'uses the exact fixed font size at the %spx boundary',
+    (size, fontSize) => {
+      expect(emojiFontSize(size)).toHaveStyle({ fontSize })
+    }
+  )
+
+  it('does not show a star by default but shows one when starred', () => {
+    const defaultAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" />
+    )
+    expect(defaultAvatar.container.querySelector('svg')).not.toBeInTheDocument()
+
+    const starredAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" starred />
+    )
+    expect(starredAvatar.container.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('uses a squircle by default and a circle when explicitly requested', () => {
+    const squircleAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" />
+    )
+    const squircleElements = squircleAvatar.container.querySelectorAll(
+      '[style*="border-radius"]'
+    )
+    expect(squircleElements).toHaveLength(3)
+    squircleElements.forEach((element) =>
+      expect(element).toHaveStyle({ borderRadius: '1rem' })
+    )
+
+    const circleAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" shape="circle" />
+    )
+    const circleElements = circleAvatar.container.querySelectorAll(
+      '[style*="border-radius"]'
+    )
+    expect(circleElements).toHaveLength(3)
+    circleElements.forEach((element) =>
+      expect(element).toHaveStyle({ borderRadius: '50%' })
+    )
+  })
+
+  it('only applies the AI ring when dmAgentEnabled is true', () => {
+    const defaultAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" size={40} />
+    )
+    expect(
+      defaultAvatar.container.querySelector('[data-testid="avatar-ring"]')
+    ).not.toHaveStyle({
+      borderWidth: '2px',
+      borderStyle: 'solid',
+    })
+
+    const enabledAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" size={40} dmAgentEnabled />
+    )
+    expect(
+      enabledAvatar.container.querySelector('[data-testid="avatar-ring"]')
+    ).toHaveStyle({
+      borderWidth: '2px',
+      borderStyle: 'solid',
+      borderColor: 'var(--AI-Gradient, #7F22FE)',
+      boxShadow: 'inset 0 1px 2px 0 rgba(255, 255, 255, 0.5)',
+    })
+
+    const smallEnabledAvatar = renderWithProviders(
+      <Avatar id="user-1" name="Alice" size={20} dmAgentEnabled />
+    )
+    expect(
+      smallEnabledAvatar.container.querySelector('[data-testid="avatar-ring"]')
+    ).toHaveStyle({ borderWidth: '1px' })
+  })
+
+  it('renders an image instead of the emoji fallback when image is provided', () => {
+    const fallbackAvatar = renderWithProviders(<Avatar id="" name="Alice" />)
+    expect(
+      fallbackAvatar.container.querySelector('img')
+    ).not.toBeInTheDocument()
+    expect(fallbackAvatar.container).toHaveTextContent('🍎')
+    expect(
+      fallbackAvatar.container.querySelector('.avatar-fallback')
+    ).toHaveClass(
+      'avatar-fallback',
+      'flex',
+      'h-full',
+      'w-full',
+      'items-center',
+      'justify-center',
+      'font-semibold',
+      'select-none',
+      'transition-colors'
+    )
+
+    const imageAvatar = renderWithProviders(
+      <Avatar id="" name="Alice" image="https://example.com/avatar.png" />
+    )
+    expect(imageAvatar.container.querySelector('img')).toHaveAttribute(
+      'src',
+      'https://example.com/avatar.png'
+    )
+    expect(imageAvatar.container).not.toHaveTextContent('🍎')
+  })
+
+  it('applies the fallback background color and forwards custom classes', () => {
+    const { container } = renderWithProviders(
+      <Avatar id="" name="Alice" className="custom-avatar" />
+    )
+    const root = container.firstElementChild
+    const ring = container.querySelector('[data-testid="avatar-ring"]')
+
+    expect(root).toHaveClass('relative', 'flex-shrink-0', 'custom-avatar')
+    expect(ring).toHaveClass('h-full', 'w-full', 'bg-transparent')
+    expect(root).toHaveStyle({
+      backgroundColor: '#FFD1DD',
+      width: '40px',
+      height: '40px',
+    })
+  })
 })

package/src/components/Avatar/getAvatarEmoji.test.ts

@@ -29,4 +29,43 @@ describe('getAvatarBgColor', () => {
     expect(color).toBe(emojiBgColors[emoji])
     expect(getAvatarBgColor(id)).toBe(color)
   })
+
+  it.each([
+    ['', '🍎', '#FFD1DD'],
+    ['id-2', '🍌', '#FFF1C9'],
+    ['id-3', '🍇', '#E6D9FF'],
+    ['id-4', '🍊', '#D6F4FF'],
+    ['id-5', '🍓', '#FFE0AE'],
+    ['id-6', '🥥', '#F7E7D8'],
+    ['id-7', '🍒', '#DFF4D8'],
+    ['id-8', '🥭', '#FFD8C2'],
+    ['id-9', '🍉', '#D6EBFF'],
+    ['id-10', '🍋', '#CAEEB5'],
+    ['id-11', '🥝', '#FFE7C7'],
+    ['id-12', '🫒', '#F6E3B4'],
+    ['id-13', '🍈', '#D9F7E1'],
+  ])('returns the exact fruit pair for %j', (id, emoji, bgColor) => {
+    expect(getAvatarEmoji(id)).toBe(emoji)
+    expect(getAvatarBgColor(id)).toBe(bgColor)
+  })
+
+  it('uses the absolute hash value for ids with a negative raw hash', () => {
+    const id = 'id-100'
+
+    expect(getAvatarEmoji(id)).toBe('🥭')
+    expect(getAvatarBgColor(id)).toBe('#FFD8C2')
+  })
+
+  it('is deterministic and keeps emoji and background color paired', () => {
+    const ids = ['', 'id-2', 'id-7', 'id-13', 'id-100']
+
+    ids.forEach((id) => {
+      const emoji = getAvatarEmoji(id)
+      const color = getAvatarBgColor(id)
+
+      expect(getAvatarEmoji(id)).toBe(emoji)
+      expect(getAvatarBgColor(id)).toBe(color)
+      expect(emojiBgColors[emoji]).toBe(color)
+    })
+  })
 })

package/src/components/ChannelList/ChannelListContext.test.tsx

@@ -0,0 +1,87 @@
+import type { Channel } from 'stream-chat'
+import { describe, expect, it, vi } from 'vitest'
+
+import { fireEvent, renderWithProviders, screen } from '../../test/utils'
+
+import {
+  ChannelListProvider,
+  useChannelListContext,
+} from './ChannelListContext'
+
+const channel = { id: 'channel-1' } as Channel
+
+function ContextConsumer() {
+  const value = useChannelListContext()
+
+  return (
+    <div>
+      <span data-testid="selected-channel">
+        {value.selectedChannel?.id ?? 'undefined'}
+      </span>
+      <span data-testid="debug">{String(value.debug)}</span>
+      <span data-testid="render-message-preview">
+        {value.renderMessagePreview ? 'provided' : 'undefined'}
+      </span>
+      <span data-testid="channel-preview">
+        {value.channelPreview ? 'provided' : 'undefined'}
+      </span>
+      <span data-testid="viewer-language">
+        {value.viewerLanguage ?? 'undefined'}
+      </span>
+      <button type="button" onClick={() => value.onChannelSelect(channel)}>
+        Select channel
+      </button>
+    </div>
+  )
+}
+
+describe('ChannelListContext', () => {
+  it('provides safe documented defaults without a provider', () => {
+    renderWithProviders(<ContextConsumer />)
+
+    expect(screen.getByTestId('selected-channel')).toHaveTextContent(
+      'undefined'
+    )
+    expect(screen.getByTestId('debug')).toHaveTextContent('false')
+    expect(screen.getByTestId('render-message-preview')).toHaveTextContent(
+      'undefined'
+    )
+    expect(screen.getByTestId('channel-preview')).toHaveTextContent('undefined')
+    expect(screen.getByTestId('viewer-language')).toHaveTextContent('undefined')
+    expect(() => fireEvent.click(screen.getByRole('button'))).not.toThrow()
+  })
+
+  it('exposes the value supplied by a provider', () => {
+    const onChannelSelect = vi.fn()
+    const ChannelPreview = () => null
+    const renderMessagePreview = () => 'preview'
+
+    renderWithProviders(
+      <ChannelListProvider
+        value={{
+          selectedChannel: channel,
+          onChannelSelect,
+          debug: true,
+          renderMessagePreview,
+          channelPreview: ChannelPreview,
+          viewerLanguage: 'es',
+        }}
+      >
+        <ContextConsumer />
+      </ChannelListProvider>
+    )
+
+    expect(screen.getByTestId('selected-channel')).toHaveTextContent(
+      'channel-1'
+    )
+    expect(screen.getByTestId('debug')).toHaveTextContent('true')
+    expect(screen.getByTestId('render-message-preview')).toHaveTextContent(
+      'provided'
+    )
+    expect(screen.getByTestId('channel-preview')).toHaveTextContent('provided')
+    expect(screen.getByTestId('viewer-language')).toHaveTextContent('es')
+
+    fireEvent.click(screen.getByRole('button'))
+    expect(onChannelSelect).toHaveBeenCalledWith(channel)
+  })
+})