stream-chat-react-native-core 10.0.0-rc.4 → 10.0.0-rc.5

package/src/components/ChannelPreview/__tests__/ChannelPreviewView.test.tsx

@@ -126,6 +126,47 @@ describe('ChannelPreviewView', () => {
     await waitFor(() => screen.queryByText(expectedDisplayName));
   });
 
+  describe('the sender of the latest message', () => {
+    const otherUser = generateUser({ name: 'Count Dooku' });
+
+    const renderWithLatestMessage = async (latestMessage: ReturnType<typeof generateMessage>) => {
+      await initializeChannel(
+        generateChannelResponse({
+          channel: { custom: { name: 'group' } },
+          members: [generateMember({ user: clientUser }), generateMember({ user: otherUser })],
+          messages: [latestMessage],
+        }),
+      );
+      render(
+        <OverlayProvider accessibility={{ enabled: true }}>
+          <Chat client={chatClient}>
+            <ChannelPreviewView
+              channel={channel as ChannelType}
+              lastMessage={latestMessage}
+              onSelect={jest.fn()}
+            />
+          </Chat>
+        </OverlayProvider>,
+      );
+    };
+
+    it.each([
+      ['an own message', clientUser, 'regular', 'You:', 1],
+      ['an own deleted message', clientUser, 'deleted', 'You:', 0],
+      ['a deleted message from another member', otherUser, 'deleted', 'Count Dooku:', 0],
+    ] as const)('names the sender of %s', async (_, user, type, prefix, statusLabels) => {
+      await renderWithLatestMessage(generateMessage({ status: 'received', type, user }));
+
+      // An own message's status hides its sender text from screen readers, so hidden elements count.
+      const sender = () =>
+        screen.getByTestId('channel-preview-sender', { includeHiddenElements: true });
+      await waitFor(() => expect(sender()).toBeTruthy());
+      expect(sender().props.children.join('')).toBe(prefix);
+      // The delivery status announces itself with "Sent by you" or "Read, sent by you".
+      expect(screen.queryAllByLabelText(/sent by you/i)).toHaveLength(statusLabels);
+    });
+  });
+
   it('should render latest message, truncated to length given by latestMessageLength', async () => {
     const message = generateMessage();
     await initializeChannel(generateChannelResponse());

package/src/components/Message/Message.tsx

@@ -47,7 +47,10 @@ import {
   MessageOverlayRuntimeProvider,
   MessageProvider,
 } from '../../contexts/messageContext/MessageContext';
-import { useMessageListItemContext } from '../../contexts/messageListItemContext/MessageListItemContext';
+import {
+  GoToMessage,
+  useMessageListItemContext,
+} from '../../contexts/messageListItemContext/MessageListItemContext';
 import {
   MessagesContextValue,
   useMessagesContext,
@@ -223,7 +226,7 @@ export type MessagePropsWithContext = Pick<
     messagesContext: MessagesContextValue;
     /** Whether long pressing a message is enabled. Defaults to true. */
     enableLongPress?: boolean;
-    goToMessage?: (messageId: string) => void;
+    goToMessage?: GoToMessage;
     isTargetedMessage?: boolean;
     /**
      * Called with the message's thread when its replies button is pressed.

package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx

@@ -2,8 +2,6 @@ import React, { useMemo } from 'react';
 
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
-import { useChannelContext } from '../../../../contexts/channelContext/ChannelContext';
-import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useMessageContext } from '../../../../contexts/messageContext/MessageContext';
 import { useMessagesContext } from '../../../../contexts/messagesContext/MessagesContext';
@@ -15,6 +13,7 @@ import {
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../../../hooks';
 import { primitives } from '../../../../theme';
+import { useOpenThreadAtMessage } from '../../hooks/useOpenThreadAtMessage';
 import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 
 type SentToChannelHeaderPropsWithContext = Pick<ThreadContextValue, 'thread'> & {
@@ -67,10 +66,9 @@ export type SentToChannelHeaderProps = Partial<SentToChannelHeaderPropsWithConte
 
 export const SentToChannelHeader = (props: SentToChannelHeaderProps) => {
   const { onAlsoSentToChannelHeaderPress } = useMessagesContext();
-  const { client } = useChatContext();
-  const { channel } = useChannelContext();
   const { thread } = useThreadContext();
   const { message } = useMessageContext();
+  const openThreadAtMessage = useOpenThreadAtMessage();
 
   const handleOnPress = useStableCallback(async () => {
     if (thread) {
@@ -78,34 +76,8 @@ export const SentToChannelHeader = (props: SentToChannelHeaderProps) => {
       return;
     }
 
-    const parentId = message.parent_id;
-    if (!parentId) {
-      return;
-    }
-
-    // The parent is only fetched when neither its thread nor the message itself is loaded. Opening
-    // the thread loads whatever else it is missing.
-    const registeredThread = client.threads.get(parentId);
-    if (registeredThread) {
-      onAlsoSentToChannelHeaderPress?.({ targetedMessageId: message.id, thread: registeredThread });
-      return;
-    }
-
-    try {
-      const parentMessage =
-        client.messageStore.get(parentId) ??
-        (await channel.getMessagesById([parentId])).messages?.[0];
-
-      if (!parentMessage) {
-        return;
-      }
-
-      onAlsoSentToChannelHeaderPress?.({
-        targetedMessageId: message.id,
-        thread: client.threads.ensure({ channel, parentMessage }),
-      });
-    } catch (error) {
-      console.error('Error querying parent message:', error);
+    if (message.parent_id) {
+      await openThreadAtMessage({ parentId: message.parent_id, targetedMessageId: message.id });
     }
   });
 

package/src/components/Message/MessageItemView/MessageContent.tsx

@@ -254,14 +254,15 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
 
                       if (onPress) {
                         onPress({
-                          defaultHandler: () => goToMessage(message.quoted_message!.id),
+                          defaultHandler: () =>
+                            goToMessage(message.quoted_message!.id, message.quoted_message!),
                           emitter: 'messageContent',
                           event,
                         });
                         return;
                       }
 
-                      goToMessage(message.quoted_message.id);
+                      goToMessage(message.quoted_message.id, message.quoted_message);
                     }}
                     onPressIn={(event) => {
                       if (onPressIn) {

package/src/components/Message/MessageItemView/MessageStatus.tsx

@@ -1,13 +1,17 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import type { ChannelConfig } from 'stream-chat';
+
 import { useA11yLabel } from '../../../a11y/hooks/useA11yLabel';
+import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { useStateStore } from '../../../hooks/useStateStore';
 import { primitives } from '../../../theme';
 import { MessageStatusTypes } from '../../../utils/utils';
 import { HiddenA11yText } from '../../Accessibility/HiddenA11yText';
@@ -15,15 +19,27 @@ import { useIsMessageDeliveredToOthers } from '../hooks/useIsMessageDeliveredToO
 import { useIsMessageReadByOthers } from '../hooks/useIsMessageReadByOthers';
 import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
 
+const readEventsSelector = ({ readEvents }: ChannelConfig) => ({
+  readEventsEnabled: readEvents.enabled,
+});
+
 export type MessageStatusPropsWithContext = Pick<MessageContextValue, 'message'> & {
   /** Whether the message reached at least one other member. */
   delivered: boolean;
   /** Whether at least one other member read the message. */
   read: boolean;
+  /**
+   * Whether the channel has read events. Without them only the sending status shows, as in the
+   * channel preview.
+   * @default true
+   */
+  readEventsEnabled?: boolean;
 };
 
 const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
-  const { delivered, message, read } = props;
+  const { message, readEventsEnabled = true } = props;
+  const delivered = readEventsEnabled && props.delivered;
+  const read = readEventsEnabled && props.read;
 
   const styles = useStyles();
   const { icons } = useComponentsContext();
@@ -38,6 +54,7 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
 
   const sending = message.status === MessageStatusTypes.SENDING;
   const sent =
+    readEventsEnabled &&
     message.status === MessageStatusTypes.RECEIVED &&
     !delivered &&
     !read &&
@@ -55,7 +72,11 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
             : '',
   );
 
-  if (message.status === MessageStatusTypes.FAILED || message.type === 'error') {
+  if (
+    message.status === MessageStatusTypes.FAILED ||
+    message.type === 'error' ||
+    message.type === 'deleted'
+  ) {
     return null;
   }
 
@@ -109,8 +130,23 @@ const areEqual = (
   prevProps: MessageStatusPropsWithContext,
   nextProps: MessageStatusPropsWithContext,
 ) => {
-  const { delivered: prevDelivered, message: prevMessage, read: prevRead } = prevProps;
-  const { delivered: nextDelivered, message: nextMessage, read: nextRead } = nextProps;
+  const {
+    delivered: prevDelivered,
+    message: prevMessage,
+    read: prevRead,
+    readEventsEnabled: prevReadEventsEnabled,
+  } = prevProps;
+  const {
+    delivered: nextDelivered,
+    message: nextMessage,
+    read: nextRead,
+    readEventsEnabled: nextReadEventsEnabled,
+  } = nextProps;
+
+  const readEventsEnabledEqual = prevReadEventsEnabled === nextReadEventsEnabled;
+  if (!readEventsEnabledEqual) {
+    return false;
+  }
 
   const deliveredEqual = prevDelivered === nextDelivered;
   if (!deliveredEqual) {
@@ -141,14 +177,17 @@ export type MessageStatusProps = Partial<MessageStatusPropsWithContext>;
 export const MessageStatus = (props: MessageStatusProps) => {
   const { message: contextMessage } = useMessageContext();
   const message = props.message ?? contextMessage;
+  const { channel } = useChannelContext();
   const readByOthers = useIsMessageReadByOthers({ message });
   const deliveredToOthers = useIsMessageDeliveredToOthers({ message });
+  const { readEventsEnabled } = useStateStore(channel?.configState, readEventsSelector) ?? {};
 
   return (
     <MemoizedMessageStatus
       delivered={props.delivered ?? deliveredToOthers}
       message={message}
       read={props.read ?? readByOthers}
+      readEventsEnabled={props.readEventsEnabled ?? readEventsEnabled}
     />
   );
 };

package/src/components/Message/MessageItemView/__tests__/MessageContent.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
 import type { Channel as ChannelType, StreamChat } from 'stream-chat';
 
 import { WithComponents } from '../../../../contexts/componentsContext/ComponentsContext';
@@ -382,6 +382,73 @@ describe('MessageContent', () => {
     expect(contentContainerStyle.paddingBottom).toBeGreaterThan(0);
   });
 
+  describe('pressing a quote', () => {
+    const renderQuote = ({
+      quotedMessage,
+    }: {
+      quotedMessage: ReturnType<typeof generateMessage>;
+    }) => {
+      const goToMessage = jest.fn();
+      render(
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <Message
+              goToMessage={goToMessage}
+              groupStyles={['bottom']}
+              message={generateMessage({ quoted_message: quotedMessage, user })}
+            />
+          </Channel>
+        </Chat>,
+      );
+      return { goToMessage };
+    };
+
+    const threadOnlyReply = () => {
+      const parentMessage = generateMessage({ cid: channel.cid, user });
+      const thread = chatClient.threads.ensure({ channel, parentMessage });
+      const reply = generateMessage({ parent_id: parentMessage.id, text: 'quoted message', user });
+      return { reply, thread };
+    };
+
+    it('passes the quoted message to goToMessage when the quote is pressed', async () => {
+      const quotedMessage = generateMessage({ text: 'quoted message', user });
+      const { goToMessage } = renderQuote({ quotedMessage });
+
+      fireEvent.press(await screen.findByText('quoted message'));
+
+      await waitFor(() =>
+        expect(goToMessage).toHaveBeenCalledWith(
+          quotedMessage.id,
+          expect.objectContaining({ id: quotedMessage.id }),
+        ),
+      );
+    });
+
+    it('opens the thread from the header of a reply also sent to the channel', async () => {
+      const onAlsoSentToChannelHeaderPress = jest.fn();
+      const { reply, thread } = threadOnlyReply();
+      render(
+        <Chat client={chatClient}>
+          <Channel
+            channel={channel}
+            onAlsoSentToChannelHeaderPress={onAlsoSentToChannelHeaderPress}
+          >
+            <Message groupStyles={['bottom']} message={{ ...reply, show_in_channel: true }} />
+          </Channel>
+        </Chat>,
+      );
+
+      fireEvent.press(await screen.findByText('View'));
+
+      await waitFor(() =>
+        expect(onAlsoSentToChannelHeaderPress).toHaveBeenCalledWith({
+          targetedMessageId: reply.id,
+          thread,
+        }),
+      );
+    });
+  });
+
   it('does not render the quoted reply for an ephemeral giphy preview', async () => {
     const user = generateUser();
     const message = generateMessage({

package/src/components/Message/MessageItemView/__tests__/MessageStatus.test.tsx

@@ -84,6 +84,63 @@ describe('MessageStatus', () => {
     },
   );
 
+  it.each([
+    ['renders', 'regular', 1],
+    ['renders no', 'deleted', 0],
+  ])('%s status for a %s message', async (_, type, expectedCount) => {
+    const message = generateMessage({ user: user1 });
+    const { queryAllByLabelText } = renderMessageStatus({
+      delivered: true,
+      message: { ...message, status: 'received', type },
+      read: true,
+    });
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    expect(queryAllByLabelText('Read')).toHaveLength(expectedCount);
+  });
+
+  describe('with read events disabled', () => {
+    beforeEach(() => {
+      chatClient.config.set({ channel: { readEvents: { enabled: false } } });
+    });
+
+    it.each([
+      [false, false, 'Sent'],
+      [true, false, 'Delivered'],
+      [true, true, 'Read'],
+    ])(
+      'renders no status when delivered is %s and read is %s',
+      async (delivered, read, accessibilityLabel) => {
+        const message = generateMessage({ user: user1 });
+        const { queryByLabelText } = renderMessageStatus({
+          delivered,
+          message: { ...message, status: 'received' },
+          read,
+        });
+
+        await act(async () => {
+          await new Promise((resolve) => setTimeout(resolve, 0));
+        });
+
+        expect(queryByLabelText(accessibilityLabel)).toBeNull();
+      },
+    );
+
+    it('still renders the sending status', async () => {
+      const message = generateMessage({ user: user1 });
+      const { getByLabelText } = renderMessageStatus({
+        message: { ...message, status: 'sending' },
+      });
+
+      await waitFor(() => {
+        expect(getByLabelText('Sending')).toBeTruthy();
+      });
+    });
+  });
+
   describe('reactive receipt state', () => {
     // Two own messages, older first. `olderMessage` is the one under test throughout: the whole
     // point of sourcing from `lastReadRefByOthers` is that it reports correctly even though no

package/src/components/Message/hooks/useOpenThreadAtMessage.ts

@@ -0,0 +1,50 @@
+import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useMessagesContext } from '../../../contexts/messagesContext/MessagesContext';
+import { useStableCallback } from '../../../hooks';
+
+/**
+ * Returns a function that opens the thread holding a message, at that message, through the
+ * `onAlsoSentToChannelHeaderPress` handler. The thread is taken from the client when it is
+ * registered there; otherwise its parent message is read from the message store, or fetched, and a
+ * thread is built from it. Opening the thread loads whatever else it is missing.
+ *
+ * @returns The function, which takes the thread's `parentId` and the `targetedMessageId` to open
+ * the thread at. It does nothing without an `onAlsoSentToChannelHeaderPress` handler.
+ */
+export const useOpenThreadAtMessage = () => {
+  const { onAlsoSentToChannelHeaderPress } = useMessagesContext();
+  const { client } = useChatContext();
+  const { channel } = useChannelContext();
+
+  return useStableCallback(
+    async ({ parentId, targetedMessageId }: { parentId: string; targetedMessageId: string }) => {
+      if (!onAlsoSentToChannelHeaderPress) {
+        return;
+      }
+
+      const registeredThread = client.threads.get(parentId);
+      if (registeredThread) {
+        onAlsoSentToChannelHeaderPress({ targetedMessageId, thread: registeredThread });
+        return;
+      }
+
+      try {
+        const parentMessage =
+          client.messageStore.get(parentId) ??
+          (await channel.getMessagesById([parentId])).messages?.[0];
+
+        if (!parentMessage) {
+          return;
+        }
+
+        onAlsoSentToChannelHeaderPress({
+          targetedMessageId,
+          thread: client.threads.ensure({ channel, parentMessage }),
+        });
+      } catch (error) {
+        console.error('Error querying parent message:', error);
+      }
+    },
+  );
+};

package/src/components/Message/utils/__tests__/messageActions.test.ts

@@ -0,0 +1,57 @@
+import type { OwnCapabilitiesContextValue } from '../../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
+import { generateMessage } from '../../../../mock-builders/generator/message';
+import type { MessageActionType } from '../../../MessageMenu/MessageActionListItem';
+import { messageActions, MessageActionsParams } from '../messageActions';
+
+const action = (actionType: string) => ({ actionType }) as unknown as MessageActionType;
+
+const getActionTypes = (overrides: Partial<MessageActionsParams>) =>
+  messageActions({
+    banUser: action('banUser'),
+    blockUser: action('blockUser'),
+    copyMessage: action('copyMessage'),
+    deleteMessage: action('deleteMessage'),
+    dismissOverlay: jest.fn(),
+    editMessage: action('editMessage'),
+    error: false,
+    flagMessage: action('flagMessage'),
+    isMyMessage: false,
+    isThreadMessage: false,
+    markUnread: action('markUnread'),
+    message: generateMessage(),
+    muteUser: action('muteUser'),
+    ownCapabilities: {
+      quoteMessage: true,
+      readEvents: true,
+      sendReply: true,
+    } as OwnCapabilitiesContextValue,
+    pinMessage: action('pinMessage'),
+    quotedReply: action('quotedReply'),
+    retry: action('retry'),
+    threadReply: action('threadReply'),
+    unpinMessage: action('unpinMessage'),
+    updateMessage: jest.fn(),
+    ...overrides,
+  })?.map((item) => item.actionType);
+
+describe('messageActions', () => {
+  it('offers quoting a thread message, but not replying in a thread or marking it unread', () => {
+    const actionTypes = getActionTypes({ isThreadMessage: true });
+
+    expect(actionTypes).toContain('quotedReply');
+    expect(actionTypes).not.toContain('threadReply');
+    expect(actionTypes).not.toContain('markUnread');
+  });
+
+  it('does not offer quoting a message that failed or is an error', () => {
+    expect(getActionTypes({ error: true })).not.toContain('quotedReply');
+  });
+
+  it('does not offer quoting without the quote-message capability', () => {
+    expect(
+      getActionTypes({
+        ownCapabilities: { quoteMessage: false } as OwnCapabilitiesContextValue,
+      }),
+    ).not.toContain('quotedReply');
+  });
+});

package/src/components/Message/utils/messageActions.ts

@@ -64,7 +64,7 @@ export const messageActions = ({
     actions.push(threadReply);
   }
 
-  if (ownCapabilities.quoteMessage && !isThreadMessage && !error) {
+  if (ownCapabilities.quoteMessage && !error) {
     actions.push(quotedReply);
   }
 

package/src/components/MessageInput/__tests__/AttachmentUploadPreviewList.test.tsx

@@ -312,8 +312,8 @@ describe('AttachmentUploadPreviewList', () => {
     });
 
     it('should render FileAttachmentUploadPreview with all failed files', async () => {
-      const uploadAttachmentSpy = jest.fn();
-      channel.messageComposer.attachmentManager.uploadAttachment = uploadAttachmentSpy;
+      const uploadFileSpy = jest.fn();
+      channel.messageComposer.attachmentManager.uploadFile = uploadFileSpy;
       const attachments = [
         generateFileAttachment({
           localMetadata: {
@@ -353,10 +353,38 @@ describe('AttachmentUploadPreviewList', () => {
       await waitFor(() => {
         expect(queryAllByTestId('file-attachment-upload-preview')).toHaveLength(2);
         expect(channel.messageComposer.attachmentManager.attachments).toHaveLength(2);
-        expect(uploadAttachmentSpy).toHaveBeenCalled();
+        expect(uploadFileSpy).toHaveBeenCalled();
       });
     });
 
+    it('does not retry a failed upload while uploads are disabled', async () => {
+      const { attachmentManager } = channel.messageComposer;
+      const uploadFileSpy = jest.fn();
+      attachmentManager.uploadFile = uploadFileSpy;
+      jest.spyOn(attachmentManager, 'isUploadEnabled', 'get').mockReturnValue(false);
+
+      act(() => {
+        attachmentManager.upsertAttachments([
+          generateFileAttachment({
+            localMetadata: { id: 'file-attachment', uploadState: FileState.FAILED },
+          }),
+        ]);
+      });
+
+      renderComponent({ channel, client, props: {} });
+
+      await waitFor(() => {
+        expect(screen.queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(1);
+      });
+
+      act(() => {
+        fireEvent.press(screen.getAllByTestId('retry-upload-progress-indicator')[0]);
+      });
+
+      expect(uploadFileSpy).not.toHaveBeenCalled();
+      expect(attachmentManager.attachments).toHaveLength(1);
+    });
+
     it('should render FileAttachmentUploadPreview with all unsupported', async () => {
       const attachments = [
         generateFileAttachment({
@@ -472,8 +500,8 @@ describe('AttachmentUploadPreviewList', () => {
     });
 
     it('should render ImageAttachmentUploadPreview with all failed images', async () => {
-      const uploadAttachmentSpy = jest.fn();
-      channel.messageComposer.attachmentManager.uploadAttachment = uploadAttachmentSpy;
+      const uploadFileSpy = jest.fn();
+      channel.messageComposer.attachmentManager.uploadFile = uploadFileSpy;
       const attachments = [
         generateImageAttachment({
           localMetadata: {
@@ -511,7 +539,7 @@ describe('AttachmentUploadPreviewList', () => {
       await waitFor(() => {
         expect(queryAllByTestId('image-attachment-upload-preview')).toHaveLength(1);
         expect(channel.messageComposer.attachmentManager.attachments).toHaveLength(1);
-        expect(uploadAttachmentSpy).toHaveBeenCalled();
+        expect(uploadFileSpy).toHaveBeenCalled();
       });
     });
 

package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreview.test.tsx

@@ -165,9 +165,30 @@ describe('AudioAttachmentUploadPreview render', () => {
     });
   });
 
+  it('should render AudioAttachmentUploadPreview for an attachment without a local file', async () => {
+    const attachments = [
+      generateAudioAttachment({
+        localMetadata: {
+          id: 'audio-attachment',
+          uploadState: FileState.FINISHED,
+        },
+      }),
+    ];
+
+    act(() => {
+      channel.messageComposer.attachmentManager.upsertAttachments(attachments);
+    });
+
+    renderComponent({ channel, client, props: {} });
+
+    await waitFor(() => {
+      expect(screen.queryAllByTestId('audio-attachment-upload-preview')).toHaveLength(1);
+    });
+  });
+
   it('should render AudioAttachmentUploadPreview with all failed files', async () => {
-    const uploadAttachmentSpy = jest.fn();
-    channel.messageComposer.attachmentManager.uploadAttachment = uploadAttachmentSpy;
+    const uploadFileSpy = jest.fn();
+    channel.messageComposer.attachmentManager.uploadFile = uploadFileSpy;
     const attachments = [
       generateAudioAttachment({
         localMetadata: {
@@ -203,7 +224,7 @@ describe('AudioAttachmentUploadPreview render', () => {
       expect(queryAllByTestId('audio-attachment-upload-preview')).toHaveLength(1);
       expect(getByLabelText('audio-attachment-preview')).toBeDefined();
       expect(channel.messageComposer.attachmentManager.attachments).toHaveLength(1);
-      expect(uploadAttachmentSpy).toHaveBeenCalled();
+      expect(uploadFileSpy).toHaveBeenCalled();
     });
   });
 

package/src/components/MessageInput/__tests__/SendMessageDisallowedIndicator.test.tsx

@@ -115,8 +115,7 @@ describe('SendMessageDisallowedIndicator', () => {
       expect(queryByTestId('send-message-disallowed-indicator')).toBeNull();
     });
 
-    // Own capabilities are now sourced reactively from channel.state; `capabilities.changed` is an
-    // output-only notification in v10, so drive the change through the store directly.
+    // Own capabilities are read from `channel.state`, so the change is driven through the store.
     act(() => {
       channel.state.partialNext({
         ownCapabilities: channel.data!.own_capabilities!.filter(
@@ -226,12 +225,10 @@ describe("SendMessageDisallowedIndicator's edited state", () => {
     });
 
     act(() => {
-      chatClient.dispatchEvent({
-        cid: customChannel.cid,
-        own_capabilities: customChannel.data!.own_capabilities!.filter(
+      customChannel.state.partialNext({
+        ownCapabilities: customChannel.data!.own_capabilities!.filter(
           (capability: string) => capability !== 'send-message',
         ),
-        type: 'capabilities.changed',
       });
     });