stream-chat-react-native-core 8.7.1-beta.2 → 8.8.0-beta.1

package/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts

@@ -4,9 +4,8 @@ import { TFunction } from 'i18next';
 import type {
   AttachmentManagerState,
   Channel,
-  ChannelState,
   DraftMessage,
-  MessageResponse,
+  LocalMessage,
   PollState,
   PollVote,
   StreamChat,
@@ -14,6 +13,8 @@ import type {
   UserResponse,
 } from 'stream-chat';
 
+import { MessageDeliveryStatus, useMessageDeliveryStatus } from './useMessageDeliveryStatus';
+
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 
@@ -22,16 +23,14 @@ import { useTranslatedMessage } from '../../../hooks/useTranslatedMessage';
 
 import { stringifyMessage } from '../../../utils/utils';
 
-type LatestMessage = ReturnType<ChannelState['formatMessage']> | MessageResponse;
-
 export type LatestMessagePreview = {
-  messageObject: LatestMessage | undefined;
+  messageObject: LocalMessage | undefined;
   previews: {
     bold: boolean;
     text: string;
     draft?: boolean;
   }[];
-  status: number;
+  status?: MessageDeliveryStatus;
   created_at?: string | Date;
 };
 
@@ -48,7 +47,7 @@ const selector = (nextValue: PollState): LatestMessagePreviewSelectorReturnType
 });
 
 const getMessageSenderName = (
-  message: LatestMessage | undefined,
+  message: LocalMessage | undefined,
   currentUserId: string | undefined,
   t: (key: string) => string,
   membersLength: number,
@@ -87,7 +86,7 @@ const getLatestMessageDisplayText = (
   channel: Channel,
   client: StreamChat,
   draftMessage: DraftMessage | undefined,
-  message: LatestMessage | undefined,
+  message: LocalMessage | undefined,
   t: (key: string) => string,
   pollState: LatestMessagePreviewSelectorReturnType | undefined,
 ) => {
@@ -194,47 +193,23 @@ export enum MessageReadStatus {
   NOT_SENT_BY_CURRENT_USER = 0,
   UNREAD = 1,
   READ = 2,
+  DELIVERED = 3,
 }
 
-const getLatestMessageReadStatus = (
-  channel: Channel,
-  client: StreamChat,
-  message: LatestMessage | undefined,
-  readEvents: boolean,
-): MessageReadStatus => {
-  const currentUserId = client.userID;
-  if (!message || currentUserId !== message.user?.id || readEvents === false) {
-    return MessageReadStatus.NOT_SENT_BY_CURRENT_USER;
-  }
-
-  const readList = { ...channel.state.read };
-  if (currentUserId) {
-    delete readList[currentUserId];
-  }
-
-  const messageUpdatedAt = message.updated_at
-    ? typeof message.updated_at === 'string'
-      ? new Date(message.updated_at)
-      : message.updated_at
-    : undefined;
-
-  return Object.values(readList).some(
-    ({ last_read }) => messageUpdatedAt && messageUpdatedAt < last_read,
-  )
-    ? MessageReadStatus.READ
-    : MessageReadStatus.UNREAD;
-};
-
 const getLatestMessagePreview = (params: {
   channel: Channel;
   client: StreamChat;
   draftMessage?: DraftMessage;
   pollState: LatestMessagePreviewSelectorReturnType | undefined;
-  readEvents: boolean;
+  /**
+   * @deprecated This parameter is no longer used and will be removed in the next major release.
+   */
+  readEvents?: boolean;
+  lastMessage?: LocalMessage;
+  status?: MessageDeliveryStatus;
   t: TFunction;
-  lastMessage?: ReturnType<ChannelState['formatMessage']> | MessageResponse;
 }) => {
-  const { channel, client, draftMessage, lastMessage, pollState, readEvents, t } = params;
+  const { channel, client, draftMessage, lastMessage, pollState, status, t } = params;
 
   const messages = channel.state.messages;
 
@@ -248,7 +223,7 @@ const getLatestMessagePreview = (params: {
           text: t('Nothing yet...'),
         },
       ],
-      status: MessageReadStatus.NOT_SENT_BY_CURRENT_USER,
+      status: MessageDeliveryStatus.NOT_SENT_BY_CURRENT_USER,
     };
   }
 
@@ -260,7 +235,7 @@ const getLatestMessagePreview = (params: {
     created_at: message?.created_at,
     messageObject: message,
     previews: getLatestMessageDisplayText(channel, client, draftMessage, message, t, pollState),
-    status: getLatestMessageReadStatus(channel, client, message, readEvents),
+    status,
   };
 };
 
@@ -275,6 +250,9 @@ const stateSelector = (state: AttachmentManagerState) => ({
 /**
  * Hook to set the display preview for latest message on channel.
  *
+ * FIXME: This hook is very poorly implemented and needs to be refactored with granular hooks
+ * to avoid unnecessary re-renders and to make the code more readable.
+ *
  * @param {*} channel Channel object
  *
  * @returns {object} latest message preview e.g.. { text: 'this was last message ...', created_at: '11/12/2020', messageObject: { originalMessageObject } }
@@ -282,7 +260,7 @@ const stateSelector = (state: AttachmentManagerState) => ({
 export const useLatestMessagePreview = (
   channel: Channel,
   forceUpdate: number,
-  lastMessage?: ReturnType<ChannelState['formatMessage']> | MessageResponse,
+  lastMessage?: LocalMessage,
 ) => {
   const { client } = useChatContext();
   const { t } = useTranslationContext();
@@ -328,7 +306,11 @@ export const useLatestMessagePreview = (
     return read_events;
   }, [channelConfigExists, channel]);
 
-  const readStatus = getLatestMessageReadStatus(channel, client, translatedLastMessage, readEvents);
+  const { status } = useMessageDeliveryStatus({
+    channel,
+    isReadEventsEnabled: readEvents,
+    lastMessage: lastMessage as LocalMessage,
+  });
 
   const pollId = lastMessage?.poll_id ?? '';
   const poll = client.polls.fromState(pollId);
@@ -343,16 +325,15 @@ export const useLatestMessagePreview = (
       draftMessage,
       lastMessage: translatedLastMessage,
       pollState,
-      readEvents,
+      status,
       t,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     channelLastMessageString,
+    status,
     draftMessage,
     forceUpdate,
-    readEvents,
-    readStatus,
     latestVotesByOption,
     createdBy,
     name,

package/src/components/ChannelPreview/hooks/useMessageDeliveryStatus.ts

@@ -0,0 +1,103 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
+
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+
+export enum MessageDeliveryStatus {
+  NOT_SENT_BY_CURRENT_USER = 'not_sent_by_current_user',
+  DELIVERED = 'delivered',
+  READ = 'read',
+  SENT = 'sent',
+}
+
+type MessageDeliveryStatusProps = {
+  channel: Channel;
+  lastMessage: LocalMessage;
+  isReadEventsEnabled: boolean;
+};
+
+export const useMessageDeliveryStatus = ({
+  channel,
+  lastMessage,
+  isReadEventsEnabled = true,
+}: MessageDeliveryStatusProps) => {
+  const { client } = useChatContext();
+  const [status, setStatus] = useState<MessageDeliveryStatus | undefined>(undefined);
+
+  const isOwnMessage = useCallback(
+    (message: LocalMessage | MessageResponse) =>
+      client.user && message && message.user?.id === client.user.id,
+    [client],
+  );
+
+  useEffect(() => {
+    if (!lastMessage) {
+      setStatus(undefined);
+    }
+
+    if (!isReadEventsEnabled) {
+      setStatus(MessageDeliveryStatus.NOT_SENT_BY_CURRENT_USER);
+      return;
+    }
+
+    if (!lastMessage?.created_at || !isOwnMessage(lastMessage)) {
+      return;
+    }
+
+    const msgRef = {
+      msgId: lastMessage.id,
+      timestampMs: new Date(lastMessage.created_at).getTime(),
+    };
+
+    const readerOfMessage = channel.messageReceiptsTracker.readersForMessage(msgRef);
+    const deliveredForMessage = channel.messageReceiptsTracker.deliveredForMessage(msgRef);
+
+    setStatus(
+      readerOfMessage.length > 1 ||
+        (readerOfMessage.length === 1 && readerOfMessage[0].id !== client.user?.id)
+        ? MessageDeliveryStatus.READ
+        : deliveredForMessage.length > 1 ||
+            (deliveredForMessage.length === 1 && deliveredForMessage[0].id !== client.user?.id)
+          ? MessageDeliveryStatus.DELIVERED
+          : MessageDeliveryStatus.SENT,
+    );
+  }, [channel, client.user?.id, isOwnMessage, isReadEventsEnabled, lastMessage]);
+
+  useEffect(() => {
+    const handleMessageNew = (event: Event) => {
+      // the last message is not mine, so do not show the delivery status
+      if (event.message && !isOwnMessage(event.message)) {
+        return setStatus(undefined);
+      }
+      return setStatus(MessageDeliveryStatus.SENT);
+    };
+    const { unsubscribe } = channel.on('message.new', handleMessageNew);
+    return unsubscribe;
+  }, [channel, isOwnMessage]);
+
+  useEffect(() => {
+    if (!isOwnMessage(lastMessage)) return;
+    const handleMessageDelivered = (event: Event) => {
+      if (
+        event.user?.id !== client.user?.id &&
+        lastMessage &&
+        lastMessage.id === event.last_delivered_message_id
+      )
+        setStatus(MessageDeliveryStatus.DELIVERED);
+    };
+
+    const handleMarkRead = (event: Event) => {
+      if (event.user?.id !== client.user?.id) setStatus(MessageDeliveryStatus.READ);
+    };
+
+    const listeners = [
+      channel.on('message.delivered', handleMessageDelivered),
+      channel.on('message.read', handleMarkRead),
+    ];
+
+    return () => listeners.forEach((l) => l.unsubscribe());
+  }, [channel, client, isOwnMessage, lastMessage]);
+
+  return { status };
+};

package/src/components/Message/Message.tsx

@@ -6,6 +6,8 @@ import type { Attachment, LocalMessage, UserResponse } from 'stream-chat';
 import { useCreateMessageContext } from './hooks/useCreateMessageContext';
 import { useMessageActionHandlers } from './hooks/useMessageActionHandlers';
 import { useMessageActions } from './hooks/useMessageActions';
+import { useMessageDeliveredData } from './hooks/useMessageDeliveryData';
+import { useMessageReadData } from './hooks/useMessageReadData';
 import { useProcessReactions } from './hooks/useProcessReactions';
 import { messageActions as defaultMessageActions } from './utils/messageActions';
 
@@ -46,7 +48,6 @@ import {
   MessageStatusTypes,
 } from '../../utils/utils';
 import type { Thumbnail } from '../Attachment/utils/buildGallery/types';
-import { getReadState } from '../MessageList/utils/getReadState';
 
 export type TouchableEmitter =
   | 'fileAttachment'
@@ -143,10 +144,18 @@ export type MessagePropsWithContext = Pick<
   Partial<
     Omit<
       MessageContextValue,
-      'groupStyles' | 'handleReaction' | 'message' | 'isMessageAIGenerated' | 'readBy'
+      | 'groupStyles'
+      | 'handleReaction'
+      | 'message'
+      | 'isMessageAIGenerated'
+      | 'deliveredToCount'
+      | 'readBy'
     >
   > &
-  Pick<MessageContextValue, 'groupStyles' | 'message' | 'isMessageAIGenerated' | 'readBy'> &
+  Pick<
+    MessageContextValue,
+    'groupStyles' | 'message' | 'isMessageAIGenerated' | 'readBy' | 'deliveredToCount'
+  > &
   Pick<
     MessagesContextValue,
     | 'sendReaction'
@@ -221,6 +230,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     chatContext,
     deleteMessage: deleteMessageFromContext,
     deleteReaction,
+    deliveredToCount,
     dismissKeyboard,
     dismissKeyboardOnMessageTouch,
     enableLongPress = true,
@@ -626,6 +636,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     actionsEnabled,
     alignment,
     channel,
+    deliveredToCount,
     dismissOverlay,
     files: attachments.files,
     goToMessage,
@@ -767,6 +778,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
 const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWithContext) => {
   const {
     chatContext: { mutedUsers: prevMutedUsers },
+    deliveredToCount: prevDeliveredBy,
     goToMessage: prevGoToMessage,
     groupStyles: prevGroupStyles,
     isAttachmentEqual,
@@ -781,6 +793,7 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
   } = prevProps;
   const {
     chatContext: { mutedUsers: nextMutedUsers },
+    deliveredToCount: nextDeliveredBy,
     goToMessage: nextGoToMessage,
     groupStyles: nextGroupStyles,
     isTargetedMessage: nextIsTargetedMessage,
@@ -793,6 +806,11 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
     t: nextT,
   } = nextProps;
 
+  const deliveredByEqual = prevDeliveredBy === nextDeliveredBy;
+  if (!deliveredByEqual) {
+    return false;
+  }
+
   const readByEqual = prevReadBy === nextReadBy;
   if (!readByEqual) {
     return false;
@@ -957,13 +975,14 @@ export type MessageProps = Partial<
  */
 export const Message = (props: MessageProps) => {
   const { message } = props;
-  const { channel, enforceUniqueReaction, members, read } = useChannelContext();
+  const { channel, enforceUniqueReaction, members } = useChannelContext();
   const chatContext = useChatContext();
   const { dismissKeyboard } = useKeyboardContext();
   const messagesContext = useMessagesContext();
   const { openThread } = useThreadContext();
   const { t } = useTranslationContext();
-  const readBy = useMemo(() => getReadState(message, read), [message, read]);
+  const readBy = useMessageReadData({ message });
+  const deliveredToCount = useMessageDeliveredData({ message });
   const { setQuotedMessage, setEditingState } = useMessageComposerAPIContext();
 
   return (
@@ -972,6 +991,7 @@ export const Message = (props: MessageProps) => {
       {...{
         channel,
         chatContext,
+        deliveredToCount,
         dismissKeyboard,
         enforceUniqueReaction,
         members,

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

@@ -14,12 +14,13 @@ import { MessageStatusTypes } from '../../../utils/utils';
 
 export type MessageStatusPropsWithContext = Pick<
   MessageContextValue,
-  'message' | 'readBy' | 'threadList'
->;
+  'deliveredToCount' | 'message' | 'readBy' | 'threadList'
+> & {
+  channelMembersCount: number;
+};
 
 const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
-  const { channel } = useChannelContext();
-  const { message, readBy, threadList } = props;
+  const { channelMembersCount, deliveredToCount, message, readBy, threadList } = props;
 
   const {
     theme: {
@@ -30,68 +31,73 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
     },
   } = useTheme();
 
-  if (message.status === MessageStatusTypes.SENDING) {
-    return (
-      <View style={[styles.statusContainer, statusContainer]} testID='sending-container'>
-        <Time {...timeIcon} />
-      </View>
-    );
-  }
-
-  if (threadList || message.status === MessageStatusTypes.FAILED) {
+  if (threadList || message.status === MessageStatusTypes.FAILED || message.type === 'error') {
     return null;
   }
 
-  if (readBy) {
-    const members = channel?.state.members;
-    const otherMembers = Object.values(members).filter(
-      (member) => member.user_id !== message.user?.id,
-    );
-    const hasOtherMembersGreaterThanOne = otherMembers.length > 1;
-    const hasReadByGreaterThanOne = typeof readBy === 'number' && readBy > 1;
-    const shouldDisplayReadByCount = hasOtherMembersGreaterThanOne && hasReadByGreaterThanOne;
-    const countOfReadBy =
-      typeof readBy === 'number' && hasOtherMembersGreaterThanOne ? readBy - 1 : 0;
-    const showDoubleCheck = hasReadByGreaterThanOne || readBy === true;
-
-    return (
-      <View style={[styles.statusContainer, statusContainer]}>
-        {shouldDisplayReadByCount ? (
-          <Text
-            style={[styles.readByCount, { color: accent_blue }, readByCount]}
-            testID='read-by-container'
-          >
-            {countOfReadBy}
-          </Text>
-        ) : null}
-        {message.type !== 'error' ? (
-          showDoubleCheck ? (
-            <CheckAll pathFill={accent_blue} {...checkAllIcon} />
-          ) : (
-            <Check pathFill={grey_dark} {...checkIcon} />
-          )
-        ) : null}
-      </View>
-    );
-  }
-
-  if (message.status === MessageStatusTypes.RECEIVED && message.type !== 'ephemeral') {
-    return (
-      <View style={[styles.statusContainer, statusContainer]} testID='delivered-container'>
-        <Check pathFill={grey_dark} {...checkIcon} />
-      </View>
-    );
-  }
-
-  return null;
+  const hasReadByGreaterThanOne = typeof readBy === 'number' && readBy > 1;
+
+  // Variables to determine the status of the message
+  const read = hasReadByGreaterThanOne || readBy === true;
+  const delivered = deliveredToCount > 1;
+  const sending = message.status === MessageStatusTypes.SENDING;
+  const sent =
+    message.status === MessageStatusTypes.RECEIVED &&
+    !delivered &&
+    !read &&
+    message.type !== 'ephemeral';
+
+  const isGroupChannel = channelMembersCount > 2;
+
+  const shouldDisplayReadByCount = isGroupChannel && hasReadByGreaterThanOne;
+  const countOfReadBy = typeof readBy === 'number' && shouldDisplayReadByCount ? readBy - 1 : 0;
+
+  return (
+    <View style={[styles.statusContainer, statusContainer]}>
+      {shouldDisplayReadByCount ? (
+        <Text
+          accessibilityLabel='Read by count'
+          style={[styles.readByCount, { color: accent_blue }, readByCount]}
+        >
+          {countOfReadBy}
+        </Text>
+      ) : null}
+      {read ? (
+        <CheckAll pathFill={accent_blue} {...checkAllIcon} accessibilityLabel='Read' />
+      ) : delivered ? (
+        <CheckAll pathFill={grey_dark} {...checkAllIcon} accessibilityLabel='Delivered' />
+      ) : sending ? (
+        <Time pathFill={grey_dark} {...timeIcon} accessibilityLabel='Sending' />
+      ) : sent ? (
+        <Check pathFill={grey_dark} {...checkIcon} accessibilityLabel='Sent' />
+      ) : null}
+    </View>
+  );
 };
 
 const areEqual = (
   prevProps: MessageStatusPropsWithContext,
   nextProps: MessageStatusPropsWithContext,
 ) => {
-  const { message: prevMessage, readBy: prevReadBy, threadList: prevThreadList } = prevProps;
-  const { message: nextMessage, readBy: nextReadBy, threadList: nextThreadList } = nextProps;
+  const {
+    deliveredToCount: prevDeliveredBy,
+    message: prevMessage,
+    readBy: prevReadBy,
+    threadList: prevThreadList,
+    channelMembersCount: prevChannelMembersCount,
+  } = prevProps;
+  const {
+    deliveredToCount: nextDeliveredBy,
+    message: nextMessage,
+    readBy: nextReadBy,
+    threadList: nextThreadList,
+    channelMembersCount: nextChannelMembersCount,
+  } = nextProps;
+
+  const deliveredByEqual = prevDeliveredBy === nextDeliveredBy;
+  if (!deliveredByEqual) {
+    return false;
+  }
 
   const threadListEqual = prevThreadList === nextThreadList;
   if (!threadListEqual) {
@@ -103,6 +109,11 @@ const areEqual = (
     return false;
   }
 
+  const channelMembersCountEqual = prevChannelMembersCount === nextChannelMembersCount;
+  if (!channelMembersCountEqual) {
+    return false;
+  }
+
   const messageEqual =
     prevMessage.status === nextMessage.status && prevMessage.type === nextMessage.type;
   if (!messageEqual) {
@@ -120,9 +131,17 @@ const MemoizedMessageStatus = React.memo(
 export type MessageStatusProps = Partial<MessageStatusPropsWithContext>;
 
 export const MessageStatus = (props: MessageStatusProps) => {
-  const { message, readBy, threadList } = useMessageContext();
+  const { channel } = useChannelContext();
+  const { deliveredToCount, message, readBy, threadList } = useMessageContext();
+
+  const channelMembersCount = Object.keys(channel?.state.members).length;
 
-  return <MemoizedMessageStatus {...{ message, readBy, threadList }} {...props} />;
+  return (
+    <MemoizedMessageStatus
+      {...{ channel, channelMembersCount, deliveredToCount, message, readBy, threadList }}
+      {...props}
+    />
+  );
 };
 
 MessageStatus.displayName = 'MessageStatus{messageSimple{status}}';

package/src/components/Message/MessageSimple/MessageTextContainer.tsx

@@ -71,7 +71,7 @@ const MessageTextContainerWithContext = (props: MessageTextContainerPropsWithCon
     },
   } = theme;
 
-  const translatedMessage = useTranslatedMessage(message) as LocalMessage;
+  const translatedMessage = useTranslatedMessage(message);
 
   if (!message.text) {
     return null;
@@ -94,7 +94,7 @@ const MessageTextContainerWithContext = (props: MessageTextContainerPropsWithCon
             ...markdownStyles,
             ...(onlyEmojis ? onlyEmojiMarkdown : {}),
           },
-          message: translatedMessage,
+          message: translatedMessage as LocalMessage,
           messageOverlay,
           messageTextNumberOfLines,
           onLongPress,

package/src/components/Message/MessageSimple/__tests__/MessageStatus.test.js

@@ -42,6 +42,8 @@ describe('MessageStatus', () => {
     chatClient = await getTestClientWithUser(user1);
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
     channel = chatClient.channel('messaging', mockedChannel.id);
+
+    channel.state.members = Object.fromEntries(members.map((member) => [member.user_id, member]));
   });
   afterEach(cleanup);
 
@@ -56,33 +58,19 @@ describe('MessageStatus', () => {
       </ChannelsStateProvider>,
     );
 
-  it('should render message status with delivered container', async () => {
-    const user = generateUser();
-    const message = generateMessage({ user });
-
-    const { getByTestId } = renderMessageStatus({
-      lastReceivedId: message.id,
-      message: { ...message, status: 'received' },
-    });
-
-    await waitFor(() => {
-      expect(getByTestId('delivered-container')).toBeTruthy();
-    });
-  });
-
   it('should render message status with read by container', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
     const readBy = 2;
 
-    const { getByTestId, getByText, rerender, toJSON } = renderMessageStatus({
-      lastReceivedId: message.id,
+    const { getByLabelText, getByText, rerender, toJSON } = renderMessageStatus({
+      deliveredToCount: 2,
       message,
       readBy,
     });
 
     await waitFor(() => {
-      expect(getByTestId('read-by-container')).toBeTruthy();
+      expect(getByLabelText('Read by count')).toBeTruthy();
       expect(getByText((readBy - 1).toString())).toBeTruthy();
     });
 
@@ -105,21 +93,29 @@ describe('MessageStatus', () => {
 
     await waitFor(() => {
       expect(toJSON()).toMatchSnapshot();
-      expect(getByTestId('read-by-container')).toBeTruthy();
+      expect(getByLabelText('Read by count')).toBeTruthy();
       expect(getByText((readBy - 1).toString())).toBeTruthy();
     });
   });
 
-  it('should render message status with sending container', async () => {
-    const user = generateUser();
-    const message = generateMessage({ user });
-
-    const { getByTestId } = renderMessageStatus({
-      message: { ...message, status: 'sending' },
-    });
-
-    await waitFor(() => {
-      expect(getByTestId('sending-container')).toBeTruthy();
-    });
-  });
+  it.each([
+    [1, 1, 'sending', 'Sending'],
+    [2, 2, 'received', 'Read'],
+    [1, 1, 'received', 'Sent'],
+    [2, 1, 'received', 'Delivered'],
+  ])(
+    'should render message status with %s container when deliveredToCount is %s and readBy is %s and status is %s',
+    async (deliveredToCount, readBy, status, accessibilityLabel) => {
+      const user = generateUser();
+      const message = generateMessage({ user });
+      const { getByLabelText } = renderMessageStatus({
+        deliveredToCount,
+        message: { ...message, status },
+        readBy,
+      });
+      await waitFor(() => {
+        expect(getByLabelText(accessibilityLabel)).toBeTruthy();
+      });
+    },
+  );
 });