@linktr.ee/messaging-react 3.6.2-rc-1783311170 → 3.6.2-rc-1783314663

package/src/components/CustomMessage/SentMessageDeliveryStatus.test.tsx

@@ -1,83 +0,0 @@
-import React from 'react'
-import { useMessageContext } from 'stream-chat-react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { renderWithProviders, screen, within } from '../../test/utils'
-
-import { SentMessageDeliveryStatus } from './SentMessageDeliveryStatus'
-
-// stream-chat-react's `MessageStatus` owns the outer gating (own message, not
-// error, not in a thread) and the state machine — Stream's tested code. What
-// this component owns is the "Delivered" label wired into the terminal slots
-// (sent/delivered/read), its "last own message" self-gate, and suppressing
-// the sending spinner. Mock `MessageStatus` to render the slots it was handed,
-// and `useMessageContext` to feed the label's self-gate.
-vi.mock('stream-chat-react', () => ({
-  useMessageContext: vi.fn(),
-  MessageStatus: ({
-    MessageSentStatus,
-    MessageDeliveredStatus,
-    MessageReadStatus,
-    MessageSendingStatus,
-  }: Record<string, React.ComponentType>) => (
-    <div>
-      <div data-testid="sent-slot">
-        <MessageSentStatus />
-      </div>
-      <div data-testid="delivered-slot">
-        <MessageDeliveredStatus />
-      </div>
-      <div data-testid="read-slot">
-        <MessageReadStatus />
-      </div>
-      <div data-testid="sending-slot">
-        <MessageSendingStatus />
-      </div>
-    </div>
-  ),
-}))
-
-const mockedUseMessageContext = vi.mocked(useMessageContext)
-
-const TERMINAL_SLOTS = ['sent-slot', 'delivered-slot', 'read-slot'] as const
-
-describe('SentMessageDeliveryStatus', () => {
-  beforeEach(() => {
-    mockedUseMessageContext.mockReturnValue({
-      lastOwnMessage: { id: 'message-1' },
-      message: { id: 'message-1' },
-    } as never)
-  })
-
-  it('renders "Delivered" in every terminal slot for the last own message', () => {
-    // delivered/read fire ahead of sent in receipt channels, so all three
-    // must show the label — never Stream's default delivered icon / read
-    // avatars.
-    renderWithProviders(<SentMessageDeliveryStatus />)
-
-    for (const slot of TERMINAL_SLOTS) {
-      expect(
-        within(screen.getByTestId(slot)).getByText('Delivered')
-      ).toBeInTheDocument()
-    }
-  })
-
-  it('renders nothing in the terminal slots when it is not the last own message', () => {
-    mockedUseMessageContext.mockReturnValue({
-      lastOwnMessage: { id: 'message-2' },
-      message: { id: 'message-1' },
-    } as never)
-
-    renderWithProviders(<SentMessageDeliveryStatus />)
-
-    for (const slot of TERMINAL_SLOTS) {
-      expect(screen.getByTestId(slot)).toBeEmptyDOMElement()
-    }
-  })
-
-  it('always suppresses the sending spinner', () => {
-    renderWithProviders(<SentMessageDeliveryStatus />)
-
-    expect(screen.getByTestId('sending-slot')).toBeEmptyDOMElement()
-  })
-})

package/src/components/CustomMessage/SentMessageDeliveryStatus.tsx

@@ -1,67 +0,0 @@
-import { ChecksIcon } from '@phosphor-icons/react'
-import { MessageStatus, useMessageContext } from 'stream-chat-react'
-
-/**
- * "✓✓ Delivered" label, wired into *every* terminal `MessageStatus` state
- * (sent / delivered / read).
- *
- * `MessageStatus` picks its `delivered` and `read` branches ahead of `sent`
- * whenever Stream has `deliveredTo` / `readBy` for the message — and, unlike
- * `sent`, those branches are *not* gated to the last own message. So in a
- * channel that has receipts we must (a) replace Stream's default delivered
- * icon / read avatars with our label — otherwise the required "Delivered"
- * label disappears and an out-of-scope read receipt would show — and (b)
- * re-apply the "last own message only" gate ourselves, since the
- * delivered/read branches would otherwise render on every read own message.
- *
- * Rendered inside stream's `.str-chat__message-status` span, which supplies
- * the flex layout; icon and copy are styled via that span in `styles.css`.
- */
-const DeliveredStatus = () => {
-  const { lastOwnMessage, message } = useMessageContext(
-    'SentMessageDeliveryStatus'
-  )
-
-  if (lastOwnMessage?.id !== message.id) {
-    return null
-  }
-
-  return (
-    <>
-      <ChecksIcon weight="bold" aria-hidden="true" />
-      <span data-testid="sent-message-delivery-status">Delivered</span>
-    </>
-  )
-}
-
-/** Suppresses a MessageStatus slot we don't want to render. */
-const NoStatus = () => null
-
-/**
- * Delivery status beneath the viewer's most recent sent message (MES-1036):
- * a right-aligned "✓✓ Delivered" that appears once Stream confirms the
- * message is stored and updates live.
- *
- * Built on stream-chat-react's `MessageStatus`, which owns the gating we want
- * — own message, not an error, and not inside a thread — plus the
- * sending/sent/delivered/read state machine.
- *
- * Scope is "Delivered" only (no Sending / Read). Stream's `sent` state maps
- * to "Delivered" for a backend-confirmed (`status === 'received'`) last own
- * message; its `delivered`/`read` states (only populated in channels with
- * per-recipient receipts) also render the same "Delivered" label via
- * {@link DeliveredStatus} so we never surface a read receipt. The sending
- * spinner is suppressed.
- *
- * `DeliveredStatus` reads `lastOwnMessage` from the message context, so
- * `CustomMessage`'s memo comparator must re-render when it changes (see
- * `index.tsx`) for the label to hop to a newer message.
- */
-export const SentMessageDeliveryStatus = () => (
-  <MessageStatus
-    MessageSentStatus={DeliveredStatus}
-    MessageDeliveredStatus={DeliveredStatus}
-    MessageReadStatus={DeliveredStatus}
-    MessageSendingStatus={NoStatus}
-  />
-)