fix: add tests

Author: khushal87

package/src/components/MessageList/MessageList.tsx

@@ -55,7 +55,7 @@ import { ThreadContextValue, useThreadContext } from '../../contexts/threadConte
 
 import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 
-const WAIT_FOR_SCROLL_TO_OFFSET_TIMEOUT = 150;
+const WAIT_FOR_SCROLL_TIMEOUT = 150;
 const MAX_RETRIES_AFTER_SCROLL_FAILURE = 10;
 const styles = StyleSheet.create({
   container: {
@@ -520,7 +520,7 @@ const MessageListWithContext = <
           flatListRef.current?.scrollToOffset({
             offset: 0,
           });
-        }, 50);
+        }, WAIT_FOR_SCROLL_TIMEOUT);
         setTimeout(() => {
           channelResyncScrollSet.current = true;
           if (channel.countUnread() > 0) {
@@ -577,7 +577,7 @@ const MessageListWithContext = <
             animated: true,
             offset: 0,
           });
-        }, WAIT_FOR_SCROLL_TO_OFFSET_TIMEOUT); // flatlist might take a bit to update, so a small delay is needed
+        }, WAIT_FOR_SCROLL_TIMEOUT); // flatlist might take a bit to update, so a small delay is needed
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -588,16 +588,15 @@ const MessageListWithContext = <
    * Note: This effect fires on every list change with a small debounce so that scrolling isnt abrupted by an immediate rerender
    */
   useEffect(() => {
+    if (!targetedMessage) return;
     scrollToDebounceTimeoutRef.current = setTimeout(async () => {
-      const messageIdToScroll: string | undefined = targetedMessage;
-      if (!messageIdToScroll) return;
       const indexOfParentInMessageList = processedMessageList.findIndex(
-        (message) => message?.id === messageIdToScroll,
+        (message) => message?.id === targetedMessage,
       );
 
       // the message we want to scroll to has not been loaded in the state yet
       if (indexOfParentInMessageList === -1) {
-        await loadChannelAroundMessage({ messageId: messageIdToScroll, setTargetedMessage });
+        await loadChannelAroundMessage({ messageId: targetedMessage, setTargetedMessage });
       } else {
         if (!flatListRef.current) return;
         // By a fresh scroll we should clear the retries for the previous failed scroll
@@ -613,7 +612,7 @@ const MessageListWithContext = <
         });
         setTargetedMessage(undefined);
       }
-    }, WAIT_FOR_SCROLL_TO_OFFSET_TIMEOUT);
+    }, WAIT_FOR_SCROLL_TIMEOUT);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [targetedMessage]);
@@ -895,7 +894,7 @@ const MessageListWithContext = <
         scrollToIndexFailedRetryCountRef.current += 1;
         onScrollToIndexFailedRef.current(info);
       }
-    }, WAIT_FOR_SCROLL_TO_OFFSET_TIMEOUT);
+    }, WAIT_FOR_SCROLL_TIMEOUT);
 
     // Only when index is greater than 0 and in range of items in FlatList
     // this onScrollToIndexFailed will be called again

package/src/components/MessageList/__tests__/MessageList.test.js

@@ -18,6 +18,7 @@ import { channelInitialState } from '../../Channel/hooks/useChannelDataState';
 import * as MessageListPaginationHook from '../../Channel/hooks/useMessageListPagination';
 import { Chat } from '../../Chat/Chat';
 import { MessageList } from '../MessageList';
+import { FlatList } from 'react-native';
 
 describe('MessageList', () => {
   afterEach(cleanup);
@@ -465,6 +466,133 @@ describe('MessageList', () => {
       expect(queryByLabelText('Inline unread indicator')).not.toBeTruthy();
     });
   });
+
+  it('should call markRead function when message.new event is dispatched and new messages are received', async () => {
+    const user = generateUser();
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user })],
+    });
+
+    const chatClient = await getTestClientWithUser({ id: user.id });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    const user2 = generateUser();
+    const newMessage = generateMessage({ user: user2 });
+
+    const markReadFn = jest.fn();
+
+    render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList markRead={markReadFn} />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    act(() => dispatchMessageNewEvent(chatClient, newMessage, mockedChannel.channel));
+
+    await waitFor(() => {
+      expect(markReadFn).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it("should scroll to the targeted message if it's present in the list", async () => {
+    const user = generateUser();
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user })],
+    });
+
+    const messages = Array.from({ length: 30 }, (_, i) =>
+      generateMessage({ id: `${i}`, text: `message-${i}` }),
+    );
+
+    const chatClient = await getTestClientWithUser({ id: user.id });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    const targetedMessage = messages[15].id;
+
+    channel.state = {
+      ...channelInitialState,
+      latestMessages: [],
+      messages,
+    };
+
+    const flatListRefMock = jest
+      .spyOn(FlatList.prototype, 'scrollToIndex')
+      .mockImplementation(() => {});
+
+    render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList targetedMessage={targetedMessage} />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    await waitFor(() => {
+      expect(flatListRefMock).toHaveBeenCalledWith({
+        animated: false,
+        index: 14,
+        viewPosition: 0.5,
+      });
+    });
+  });
+
+  it("should load more messages around the message id if the targeted message isn't present in the list", async () => {
+    const user = generateUser();
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user })],
+    });
+
+    const messages = Array.from({ length: 20 }, (_, i) =>
+      generateMessage({ id: `${i}`, text: `message-${i}` }),
+    );
+
+    const chatClient = await getTestClientWithUser({ id: user.id });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    const targetedMessage = 21;
+    const setTargetedMessage = jest.fn();
+
+    channel.state = {
+      ...channelInitialState,
+      latestMessages: [],
+      messages,
+    };
+
+    const loadChannelAroundMessage = jest.fn(() => Promise.resolve());
+
+    render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList
+              targetedMessage={targetedMessage}
+              loadChannelAroundMessage={loadChannelAroundMessage}
+              setTargetedMessage={setTargetedMessage}
+            />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    await waitFor(() => {
+      expect(loadChannelAroundMessage).toHaveBeenCalledWith({
+        messageId: targetedMessage,
+        setTargetedMessage,
+      });
+    });
+  });
 });
 
 describe('MessageList pagination', () => {