@linktr.ee/messaging-react 4.1.6 → 4.1.7-rc-1787179679

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

@@ -1,6 +1,7 @@
-import { act, fireEvent } from '@testing-library/react'
+import { MESSAGE_CUSTOM_TYPE } from '@linktr.ee/messaging-taxonomy'
+import { act, createEvent, fireEvent } from '@testing-library/react'
 import { Channel, LocalMessage, StreamChat } from 'stream-chat'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { renderWithProviders, screen } from '../../test/utils'
 import type { ChannelPreviewProps } from '../../types'
@@ -13,9 +14,15 @@ 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: () => ({ client: { userID: 'current-user' } }),
+  useChatContext: () => mockChatContext.current,
 }))
 
 type MockChannel = Channel & {
@@ -73,6 +80,406 @@ 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'] = {

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

@@ -11,16 +11,25 @@ const {
   ChannelListProviderMock,
   CustomChannelPreviewMock,
   InfiniteScrollMock,
+  restorePendingMessagesMock,
+  streamMountMock,
+  messagingContextMock,
 } = vi.hoisted(() => ({
   ChannelListProviderMock: vi.fn(
     ({ children }: { children: React.ReactNode; value: unknown }) => children
   ),
   CustomChannelPreviewMock: () => null,
   InfiniteScrollMock: () => null,
+  restorePendingMessagesMock: vi.fn(),
+  streamMountMock: vi.fn(),
+  messagingContextMock: { current: { debug: false } },
 }))
 
 vi.mock('stream-chat-react', () => ({
   ChannelList: (props: unknown) => {
+    React.useEffect(() => {
+      streamMountMock()
+    }, [])
     streamChannelListMock(props)
     return <div data-testid="stream-channel-list" />
   },
@@ -28,7 +37,11 @@ vi.mock('stream-chat-react', () => ({
 }))
 
 vi.mock('../../providers/MessagingProvider', () => ({
-  useMessagingContext: () => ({ debug: false }),
+  useMessagingContext: () => messagingContextMock.current,
+}))
+
+vi.mock('../../hooks/useRestorePendingMessages', () => ({
+  restorePendingMessages: restorePendingMessagesMock,
 }))
 
 vi.mock('./ChannelListContext', () => ({
@@ -48,6 +61,9 @@ describe('ChannelList', () => {
   beforeEach(() => {
     ChannelListProviderMock.mockClear()
     streamChannelListMock.mockClear()
+    restorePendingMessagesMock.mockClear()
+    streamMountMock.mockClear()
+    messagingContextMock.current = { debug: false }
   })
 
   it('defaults unseen-channel promotion to false', () => {
@@ -200,4 +216,119 @@ describe('ChannelList', () => {
     streamProps.channelRenderFilterFn!(mockChannels)
     expect(filterFn).toHaveBeenCalledWith(mockChannels)
   })
+
+  it('restores pending messages for every channel and preserves channels without a filter', () => {
+    const channels = [
+      { cid: 'ch-1', state: { pending_messages: [] } },
+      { cid: 'ch-2', state: { pending_messages: [{ id: 'pending-2' }] } },
+    ] as unknown as Channel[]
+
+    renderWithProviders(<ChannelList {...defaultProps} />)
+    const streamProps = streamChannelListMock.mock.calls[0][0] as {
+      channelRenderFilterFn: (channels: Channel[]) => Channel[]
+    }
+
+    expect(streamProps.channelRenderFilterFn(channels)).toBe(channels)
+    expect(restorePendingMessagesMock).toHaveBeenCalledTimes(2)
+    expect(restorePendingMessagesMock).toHaveBeenNthCalledWith(1, channels[0])
+    expect(restorePendingMessagesMock).toHaveBeenNthCalledWith(2, channels[1])
+  })
+
+  it('remounts Stream ChannelList when filters change but not when they stay the same', () => {
+    const { rerender } = renderWithProviders(<ChannelList {...defaultProps} />)
+
+    expect(streamMountMock).toHaveBeenCalledOnce()
+
+    rerender(<ChannelList {...defaultProps} />)
+    expect(streamMountMock).toHaveBeenCalledOnce()
+
+    rerender(
+      <ChannelList
+        {...defaultProps}
+        filters={{ type: 'messaging', members: { $in: ['another-user'] } }}
+      />
+    )
+    expect(streamMountMock).toHaveBeenCalledTimes(2)
+  })
+
+  it('forwards the default and explicit sort values and the channel limit', () => {
+    renderWithProviders(<ChannelList {...defaultProps} />)
+    expect(streamChannelListMock.mock.calls[0][0]).toMatchObject({
+      sort: { last_message_at: -1 },
+      options: { limit: 30 },
+    })
+
+    const explicitSort = { updated_at: 1 as const }
+    renderWithProviders(<ChannelList {...defaultProps} sort={explicitSort} />)
+    expect(streamChannelListMock.mock.calls[1][0]).toMatchObject({
+      sort: explicitSort,
+      options: { limit: 30 },
+    })
+  })
+
+  it('provides channel list context values from props and messaging context', () => {
+    const selectedChannel = { id: 'selected-channel' } as Channel
+    const onChannelSelect = vi.fn()
+    const renderMessagePreview = vi.fn()
+    messagingContextMock.current = { debug: true }
+
+    renderWithProviders(
+      <ChannelList
+        {...defaultProps}
+        selectedChannel={selectedChannel}
+        onChannelSelect={onChannelSelect}
+        renderMessagePreview={renderMessagePreview}
+        viewerLanguage="fr"
+      />
+    )
+
+    const contextValue = ChannelListProviderMock.mock.calls[0][0].value
+    expect(contextValue).toMatchObject({
+      selectedChannel,
+      onChannelSelect,
+      debug: true,
+      renderMessagePreview,
+      viewerLanguage: 'fr',
+    })
+  })
+
+  it('logs the channel list render when messaging debug is enabled', () => {
+    const consoleLog = vi.spyOn(console, 'log').mockImplementation(() => {})
+    messagingContextMock.current = { debug: true }
+
+    renderWithProviders(<ChannelList {...defaultProps} />)
+
+    expect(consoleLog).toHaveBeenCalledWith(
+      '📺 [ChannelList] 🔄 RENDER START',
+      expect.objectContaining({
+        renderCount: 1,
+        selectedChannelId: undefined,
+        filters: defaultProps.filters,
+      })
+    )
+  })
+
+  it('passes wrapper classes and the custom empty state indicator through', () => {
+    const EmptyStateIndicator = () => <div>Empty state</div>
+    const { container } = renderWithProviders(
+      <ChannelList
+        {...defaultProps}
+        className="custom-channel-list"
+        customEmptyStateIndicator={EmptyStateIndicator}
+      />
+    )
+
+    expect(container.firstElementChild).toHaveClass(
+      'messaging-channel-list',
+      'h-full',
+      'flex',
+      'flex-col',
+      'min-w-0',
+      'overflow-hidden',
+      'custom-channel-list'
+    )
+    expect(streamChannelListMock.mock.calls[0][0]).toMatchObject({
+      EmptyStateIndicator,
+    })
+  })
 })