diff --git a/package/src/components/Message/MessageSimple/MessageStatus.tsx b/package/src/components/Message/MessageSimple/MessageStatus.tsx index f104a0986e..a9c043ac7a 100644 --- a/package/src/components/Message/MessageSimple/MessageStatus.tsx +++ b/package/src/components/Message/MessageSimple/MessageStatus.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; +import { useChannelContext } from '../../../contexts/channelContext/ChannelContext'; import { MessageContextValue, useMessageContext, @@ -23,6 +24,7 @@ const MessageStatusWithContext = < >( props: MessageStatusPropsWithContext, ) => { + const { channel } = useChannelContext(); const { message, threadList } = props; const { @@ -47,18 +49,29 @@ const MessageStatusWithContext = < } if (isMessageWithStylesReadByAndDateSeparator(message)) { + 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 message.readBy === 'number' && message.readBy > 1; + const shouldDisplayReadByCount = hasOtherMembersGreaterThanOne && hasReadByGreaterThanOne; + const countOfReadBy = + typeof message.readBy === 'number' && hasOtherMembersGreaterThanOne ? message.readBy - 1 : 0; + const showDoubleCheck = hasReadByGreaterThanOne || message.readBy === true; + return ( - {typeof message.readBy === 'number' ? ( + {shouldDisplayReadByCount ? ( - {message.readBy} + {countOfReadBy} ) : null} {message.type !== 'error' ? ( - typeof message.readBy === 'number' || message.readBy === true ? ( + showDoubleCheck ? ( ) : ( diff --git a/package/src/components/Message/MessageSimple/__tests__/MessageStatus.test.js b/package/src/components/Message/MessageSimple/__tests__/MessageStatus.test.js index 9049de8d4f..400ed93719 100644 --- a/package/src/components/Message/MessageSimple/__tests__/MessageStatus.test.js +++ b/package/src/components/Message/MessageSimple/__tests__/MessageStatus.test.js @@ -2,6 +2,12 @@ import React from 'react'; import { cleanup, render, waitFor } from '@testing-library/react-native'; +import { Channel } from '../../..'; +import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext'; +import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel'; +import { useMockedApis } from '../../../../mock-builders/api/useMockedApis'; +import { generateChannelResponse } from '../../../../mock-builders/generator/channel'; +import { generateMember } from '../../../../mock-builders/generator/member'; import { generateMessage } from '../../../../mock-builders/generator/message'; import { generateStaticUser, generateUser } from '../../../../mock-builders/generator/user'; import { getTestClientWithUser } from '../../../../mock-builders/mock'; @@ -10,26 +16,54 @@ import { Chat } from '../../../Chat/Chat'; import { MessageStatus } from '../MessageStatus'; let chatClient; -let id; let i18nInstance; - +let channel; describe('MessageStatus', () => { - beforeAll(async () => { + const user1 = generateUser({ id: 'id1', name: 'name1' }); + const user2 = generateUser({ id: 'id2', name: 'name2' }); + const user3 = generateUser({ id: 'id3', name: 'name3' }); + const messages = [generateMessage({ user: user1 })]; + const members = [ + generateMember({ user: user1 }), + generateMember({ user: user2 }), + generateMember({ user: user3 }), + ]; + beforeAll(() => { id = 'testID'; - chatClient = await getTestClientWithUser({ id }); i18nInstance = new Streami18n(); }); + beforeEach(async () => { + jest.clearAllMocks(); + const mockedChannel = generateChannelResponse({ + members, + messages, + }); + + chatClient = await getTestClientWithUser(user1); + useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); + channel = chatClient.channel('messaging', mockedChannel.id); + }); afterEach(cleanup); + renderMessageStatus = (options, channelProps) => + render( + + + + + + + , + ); + it('should render message status with delivered container', async () => { const user = generateUser(); const message = generateMessage({ user }); - const { getByTestId } = render( - - - , - ); + const { getByTestId } = renderMessageStatus({ + lastReceivedId: message.id, + message: { ...message, status: 'received' }, + }); await waitFor(() => { expect(getByTestId('delivered-container')).toBeTruthy(); @@ -40,30 +74,33 @@ describe('MessageStatus', () => { const user = generateUser(); const message = generateMessage({ readBy: 2, user }); - const { getByTestId, getByText, rerender, toJSON } = render( - - - , - ); + const { getByTestId, getByText, rerender, toJSON } = renderMessageStatus({ + lastReceivedId: message.id, + message, + }); await waitFor(() => { expect(getByTestId('read-by-container')).toBeTruthy(); - expect(getByText(message.readBy.toString())).toBeTruthy(); + expect(getByText((message.readBy - 1).toString())).toBeTruthy(); }); const staticUser = generateStaticUser(0); const staticMessage = generateMessage({ readBy: 2, staticUser }); rerender( - - - , + + + + + + + , ); await waitFor(() => { expect(toJSON()).toMatchSnapshot(); expect(getByTestId('read-by-container')).toBeTruthy(); - expect(getByText(staticMessage.readBy.toString())).toBeTruthy(); + expect(getByText((staticMessage.readBy - 1).toString())).toBeTruthy(); }); }); @@ -71,11 +108,9 @@ describe('MessageStatus', () => { const user = generateUser(); const message = generateMessage({ user }); - const { getByTestId } = render( - - - , - ); + const { getByTestId } = renderMessageStatus({ + message: { ...message, status: 'sending' }, + }); await waitFor(() => { expect(getByTestId('sending-container')).toBeTruthy(); diff --git a/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageStatus.test.js.snap b/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageStatus.test.js.snap index cf8b4cd57a..6224aeaefb 100644 --- a/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageStatus.test.js.snap +++ b/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageStatus.test.js.snap @@ -2,106 +2,124 @@ exports[`MessageStatus should render message status with read by container 1`] = ` - - 2 - - - - - + 1 + + - - + vbHeight={24} + vbWidth={24} + width={16} + > + + + + + + + `;