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

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

@@ -27,130 +27,4 @@ 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,43 +29,4 @@ 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/CustomChannelPreview.test.tsx

@@ -1,7 +1,6 @@
-import { MESSAGE_CUSTOM_TYPE } from '@linktr.ee/messaging-taxonomy'
-import { act, createEvent, fireEvent } from '@testing-library/react'
+import { act, fireEvent } from '@testing-library/react'
 import { Channel, LocalMessage, StreamChat } from 'stream-chat'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 
 import { renderWithProviders, screen } from '../../test/utils'
 import type { ChannelPreviewProps } from '../../types'
@@ -14,15 +13,9 @@ const mockUser = {
   name: 'Current User',
 }
 
-const mockChatContext = vi.hoisted(() => ({
-  current: {
-    client: { userID: 'current-user' },
-  } as { client?: { userID?: string } },
-}))
-
 vi.mock('stream-chat-react', async (importOriginal) => ({
   ...(await importOriginal<typeof import('stream-chat-react')>()),
-  useChatContext: () => mockChatContext.current,
+  useChatContext: () => ({ client: { userID: 'current-user' } }),
 }))
 
 type MockChannel = Channel & {
@@ -80,406 +73,6 @@ describe('CustomChannelPreview', () => {
     onChannelSelect: vi.fn(),
   }
 
-  beforeEach(() => {
-    mockChatContext.current = {
-      client: { userID: 'current-user' },
-    }
-    defaultProps.onChannelSelect.mockClear()
-  })
-
-  it('applies selected and unselected row styling from context', () => {
-    const channel = createMockChannel([])
-    const otherChannel = createMockChannel([])
-    otherChannel.id = 'channel-2'
-
-    const { rerender } = renderWithProviders(
-      <ChannelListProvider
-        value={{
-          selectedChannel: channel,
-          onChannelSelect: defaultProps.onChannelSelect,
-          debug: false,
-        }}
-      >
-        <CustomChannelPreview {...defaultProps} channel={channel} />
-      </ChannelListProvider>
-    )
-
-    let row = screen.getByRole('button')
-    expect(row).toHaveClass('bg-black/[0.04]')
-    expect(row).not.toHaveClass('hover:bg-black/[0.02]')
-
-    rerender(
-      <ChannelListProvider
-        value={{
-          selectedChannel: otherChannel,
-          onChannelSelect: defaultProps.onChannelSelect,
-          debug: false,
-        }}
-      >
-        <CustomChannelPreview {...defaultProps} channel={channel} />
-      </ChannelListProvider>
-    )
-
-    row = screen.getByRole('button')
-    expect(row).not.toHaveClass('bg-black/[0.04]')
-    expect(row).toHaveClass('hover:bg-black/[0.02]')
-
-    rerender(
-      <ChannelListProvider
-        value={{
-          selectedChannel: otherChannel,
-          onChannelSelect: defaultProps.onChannelSelect,
-          debug: false,
-        }}
-      >
-        <CustomChannelPreview {...defaultProps} channel={channel} unread={1} />
-      </ChannelListProvider>
-    )
-    expect(screen.getByRole('button')).toHaveClass('hover:bg-black/[0.02]')
-  })
-
-  it('selects the channel by click and activation keys only', () => {
-    const channel = createMockChannel([])
-    const onChannelSelect = vi.fn()
-    const { container } = renderWithProviders(
-      <ChannelListProvider value={{ onChannelSelect, debug: false }}>
-        <CustomChannelPreview channel={channel} />
-      </ChannelListProvider>
-    )
-    const row = container.querySelector('[role="button"]') as HTMLElement
-
-    fireEvent.click(row)
-    fireEvent.keyDown(row, { key: 'Enter' })
-    const spaceEvent = createEvent.keyDown(row, { key: ' ' })
-    fireEvent(row, spaceEvent)
-
-    expect(spaceEvent.defaultPrevented).toBe(true)
-    expect(onChannelSelect).toHaveBeenCalledTimes(3)
-    expect(onChannelSelect).toHaveBeenNthCalledWith(1, channel)
-    expect(onChannelSelect).toHaveBeenNthCalledWith(2, channel)
-    expect(onChannelSelect).toHaveBeenNthCalledWith(3, channel)
-
-    fireEvent.keyDown(row, { key: 'a' })
-    fireEvent.keyDown(row, { key: 'Enter', repeat: true })
-    expect(onChannelSelect).toHaveBeenCalledTimes(3)
-  })
-
-  it('renders with an unhydrated client and resolves the fallback member', () => {
-    mockChatContext.current = { client: undefined }
-    const channel = createMockChannel([])
-
-    expect(() =>
-      renderWithProviders(
-        <CustomChannelPreview {...defaultProps} channel={channel} />
-      )
-    ).not.toThrow()
-    expect(screen.getByText('Current User')).toBeInTheDocument()
-  })
-
-  it('resolves the other participant using the current client user id', () => {
-    const channel = createMockChannel([])
-
-    renderWithProviders(
-      <CustomChannelPreview {...defaultProps} channel={channel} />
-    )
-    expect(screen.getByText('Alice')).toBeInTheDocument()
-
-    mockChatContext.current = { client: { userID: 'participant-1' } }
-    renderWithProviders(
-      <CustomChannelPreview {...defaultProps} channel={channel} />
-    )
-    expect(screen.getByText('Current User')).toBeInTheDocument()
-  })
-
-  it('renders safe fallbacks when channel state is empty', () => {
-    const channel = createMockChannel([])
-    Object.assign(channel, { state: {} })
-
-    expect(() =>
-      renderWithProviders(
-        <CustomChannelPreview {...defaultProps} channel={channel} />
-      )
-    ).not.toThrow()
-    expect(screen.getByText('Unknown member')).toBeInTheDocument()
-    expect(screen.getByText('No messages yet')).toBeInTheDocument()
-    expect(screen.queryByText('Starred conversation.')).not.toBeInTheDocument()
-  })
-
-  it('renders a participant image only when one is supplied', () => {
-    const channel = createMockChannel([])
-    channel.state.members['participant-1'].user = {
-      id: 'participant-1',
-      name: 'Alice',
-      image: 'https://example.com/alice.png',
-    }
-
-    const { container, rerender } = renderWithProviders(
-      <CustomChannelPreview {...defaultProps} channel={channel} />
-    )
-    expect(container.querySelectorAll('img')).toHaveLength(1)
-    expect(container.querySelector('img')).toHaveAttribute(
-      'src',
-      'https://example.com/alice.png'
-    )
-
-    channel.state.members['participant-1'].user = {
-      id: 'participant-1',
-      name: 'Alice',
-    }
-    rerender(
-      <CustomChannelPreview {...defaultProps} channel={channel} unread={1} />
-    )
-    expect(container.querySelectorAll('img')).toHaveLength(0)
-  })
-
-  it.each([
-    [undefined, undefined],
-    [3, '3'],
-    [99, '99'],
-    [100, '99+'],
-  ])('renders the unread badge for unread=%s', (unread, expectedBadge) => {
-    const channel = createMockChannel([])
-    const { container } = renderWithProviders(
-      <CustomChannelPreview
-        {...defaultProps}
-        channel={channel}
-        unread={unread}
-      />
-    )
-
-    if (expectedBadge) {
-      expect(screen.getByText(expectedBadge)).toBeInTheDocument()
-    } else {
-      expect(
-        container.querySelector('span[class*="bg-[#7f22fe]"]')
-      ).not.toBeInTheDocument()
-    }
-  })
-
-  it('renders a timestamp only when the last message has created_at', () => {
-    const channel = createMockChannel([
-      {
-        id: 'msg-1',
-        text: 'Recent message',
-        type: 'regular',
-        created_at: new Date(),
-        user: { id: 'participant-1', name: 'Alice' },
-      },
-    ])
-
-    const { container, rerender } = renderWithProviders(
-      <CustomChannelPreview {...defaultProps} channel={channel} />
-    )
-    const timestamp = () =>
-      container.querySelector('h3')?.parentElement?.querySelector('span')
-
-    expect(timestamp()).toHaveTextContent('Just now')
-    expect(screen.getByText('Just now')).toBeInTheDocument()
-
-    Object.assign(channel.state.messages[0], { created_at: undefined })
-    rerender(
-      <CustomChannelPreview {...defaultProps} channel={channel} unread={1} />
-    )
-    expect(timestamp()).toBeNull()
-    expect(screen.queryByText('Just now')).not.toBeInTheDocument()
-  })
-
-  it.each([
-    [
-      'tip with text',
-      {
-        metadata: { custom_type: MESSAGE_CUSTOM_TYPE.TIP },
-        text: 'A generous tip',
-      },
-      'A generous tip',
-    ],
-    [
-      'tip without text',
-      { metadata: { custom_type: MESSAGE_CUSTOM_TYPE.TIP } },
-      'Sent a tip',
-    ],
-    [
-      'paid with text',
-      {
-        metadata: { custom_type: MESSAGE_CUSTOM_TYPE.PAID },
-        text: 'Paid message',
-      },
-      'Paid message',
-    ],
-    [
-      'paid without text',
-      { metadata: { custom_type: MESSAGE_CUSTOM_TYPE.PAID } },
-      'Sent a message',
-    ],
-    [
-      'link attachment',
-      { attachments: [{ og_scrape_url: 'https://example.com' }] },
-      'https://example.com',
-    ],
-    [
-      'image attachment',
-      { attachments: [{ type: 'image' }] },
-      '📷 Sent an image',
-    ],
-    [
-      'video attachment',
-      { attachments: [{ type: 'video' }] },
-      '🎥 Sent a video',
-    ],
-    ['audio attachment', { attachments: [{ type: 'audio' }] }, '🎵 Sent audio'],
-    ['file attachment', { attachments: [{ type: 'file' }] }, '📎 Sent a file'],
-    [
-      'unknown attachment',
-      { attachments: [{ type: 'unknown' }] },
-      '📎 Sent an attachment',
-    ],
-  ])('renders the %s preview text', (_name, message, expectedText) => {
-    const channel = createMockChannel([
-      {
-        id: 'msg-1',
-        type: 'regular',
-        ...message,
-        user: { id: 'participant-1', name: 'Alice' },
-      },
-    ])
-
-    renderWithProviders(
-      <CustomChannelPreview {...defaultProps} channel={channel} />
-    )
-    expect(screen.getByText(expectedText)).toBeInTheDocument()
-  })
-
-  it('prefixes chatbot previews but not normal message previews', () => {
-    const channel = createMockChannel([
-      {
-        id: 'msg-1',
-        text: 'Automated response',
-        type: 'regular',
-        metadata: { custom_type: MESSAGE_CUSTOM_TYPE.CHATBOT },
-      },
-    ])
-    const { rerender } = renderWithProviders(
-      <CustomChannelPreview {...defaultProps} channel={channel} />
-    )
-    expect(screen.getByText('✨ Automated response')).toBeInTheDocument()
-
-    channel.state.messages[0].metadata = {}
-    channel.state.messages[0].text = 'Human response'
-    rerender(
-      <CustomChannelPreview {...defaultProps} channel={channel} unread={1} />
-    )
-    expect(screen.getByText('Human response')).toBeInTheDocument()
-    expect(screen.queryByText('✨ Human response')).not.toBeInTheDocument()
-  })
-
-  it('uses renderMessagePreview from context with the resolved default text', () => {
-    const channel = createMockChannel([
-      {
-        id: 'msg-1',
-        text: 'Default preview',
-        type: 'regular',
-      },
-    ])
-    const renderMessagePreview = vi.fn(
-      (_message: LocalMessage | undefined, _defaultPreview?: string) =>
-        'Custom preview'
-    )
-
-    renderWithProviders(
-      <ChannelListProvider
-        value={{ onChannelSelect: vi.fn(), debug: false, renderMessagePreview }}
-      >
-        <CustomChannelPreview channel={channel} />
-      </ChannelListProvider>
-    )
-
-    expect(screen.getByText('Custom preview')).toBeInTheDocument()
-    expect(renderMessagePreview).toHaveBeenCalledWith(
-      channel.state.messages[0],
-      'Default preview'
-    )
-  })
-
-  it('renders the default preview when renderMessagePreview is not supplied', () => {
-    const channel = createMockChannel([
-      {
-        id: 'msg-1',
-        text: 'Default preview',
-        type: 'regular',
-      },
-    ])
-
-    renderWithProviders(
-      <CustomChannelPreview {...defaultProps} channel={channel} />
-    )
-    expect(screen.getByText('Default preview')).toBeInTheDocument()
-  })
-
-  it('uses the viewer language translation when available', () => {
-    const channel = createMockChannel([
-      {
-        id: 'msg-1',
-        text: 'Raw text',
-        type: 'regular',
-        i18n: { es_text: 'Texto traducido', language: 'es' },
-      },
-    ])
-    const { rerender } = renderWithProviders(
-      <ChannelListProvider
-        value={{
-          onChannelSelect: vi.fn(),
-          debug: false,
-          viewerLanguage: 'es-MX',
-        }}
-      >
-        <CustomChannelPreview channel={channel} />
-      </ChannelListProvider>
-    )
-    expect(screen.getByText('Texto traducido')).toBeInTheDocument()
-
-    rerender(
-      <ChannelListProvider value={{ onChannelSelect: vi.fn(), debug: false }}>
-        <CustomChannelPreview channel={channel} />
-      </ChannelListProvider>
-    )
-    expect(screen.getByText('Raw text')).toBeInTheDocument()
-  })
-
-  it('logs the preview payload only when debug is enabled', () => {
-    const channel = createMockChannel([])
-    const consoleLog = vi.spyOn(console, 'log').mockImplementation(() => {})
-
-    renderWithProviders(
-      <ChannelListProvider value={{ onChannelSelect: vi.fn(), debug: true }}>
-        <CustomChannelPreview channel={channel} />
-      </ChannelListProvider>
-    )
-    expect(consoleLog).toHaveBeenCalledWith(
-      '📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER',
-      expect.objectContaining({
-        channelId: channel.id,
-        isSelected: false,
-        participantName: 'Alice',
-        unreadCount: 0,
-        hasTimestamp: false,
-      })
-    )
-
-    consoleLog.mockClear()
-    const { rerender } = renderWithProviders(
-      <ChannelListProvider value={{ onChannelSelect: vi.fn(), debug: false }}>
-        <CustomChannelPreview channel={channel} />
-      </ChannelListProvider>
-    )
-    expect(consoleLog).not.toHaveBeenCalled()
-    rerender(
-      <ChannelListProvider value={{ onChannelSelect: vi.fn(), debug: false }}>
-        <CustomChannelPreview channel={channel} />
-      </ChannelListProvider>
-    )
-    expect(consoleLog).not.toHaveBeenCalled()
-  })
-
   it('uses username when participant name is UUID-like', () => {
     const channel = createMockChannel([])
     channel.state.members['participant-1'] = {