stream-chat-react-native-core 9.0.1 → 9.0.2-beta.1

package/src/components/Channel/__tests__/{isAttachmentEqualHandler.test.js → isAttachmentEqualHandler.test.tsx}

@@ -3,6 +3,7 @@ import React from 'react';
 import { Text } from 'react-native';
 
 import { act, cleanup, render, waitFor } from '@testing-library/react-native';
+import type { Attachment, Channel as ChannelType, StreamChat } from 'stream-chat';
 
 import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
@@ -19,14 +20,16 @@ import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { MessageList } from '../../MessageList/MessageList';
 
+type AttachmentWithCustomField = Attachment & { customField?: string };
+
 describe('isAttachmentEqualHandler', () => {
-  let channel;
-  let chatClient;
+  let channel: ChannelType;
+  let chatClient: StreamChat;
 
   const user = generateUser({ id: 'id', name: 'name' });
   const messages = [
     generateMessage({
-      attachments: [{ customField: 'custom-field', type: 'test' }],
+      attachments: [{ customField: 'custom-field', type: 'test' } as AttachmentWithCustomField],
       user,
     }),
   ];
@@ -40,7 +43,7 @@ describe('isAttachmentEqualHandler', () => {
 
     chatClient = await getTestClientWithUser(user);
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    channel = chatClient.channel('messaging', mockedChannel.id);
+    channel = chatClient.channel('messaging', mockedChannel.channel.id);
     await channel.watch();
   });
 
@@ -50,7 +53,10 @@ describe('isAttachmentEqualHandler', () => {
   });
 
   const getMessageWithCustomFields = () => {
-    const isAttachmentEqualHandler = (prevProps, nextProps) => {
+    const isAttachmentEqualHandler = (
+      prevProps: AttachmentWithCustomField,
+      nextProps: AttachmentWithCustomField,
+    ) => {
       const propsEqual =
         prevProps.customField === nextProps.customField && prevProps.type === nextProps.type;
       if (!propsEqual) {
@@ -64,14 +70,23 @@ describe('isAttachmentEqualHandler', () => {
         <Chat client={chatClient}>
           <WithComponents
             overrides={{
-              UnsupportedAttachment: ({ attachment: { customField, type } }) => {
+              UnsupportedAttachment: ({ attachment }) => {
+                const { customField, type } = attachment as AttachmentWithCustomField;
                 if (type === 'test') {
                   return <Text testID='attachment-custom-field'>{customField}</Text>;
                 }
+                return null;
               },
             }}
           >
-            <Channel channel={channel} isAttachmentEqual={isAttachmentEqualHandler}>
+            <Channel
+              channel={channel}
+              isAttachmentEqual={
+                isAttachmentEqualHandler as unknown as React.ComponentProps<
+                  typeof Channel
+                >['isAttachmentEqual']
+              }
+            >
               <MessageList />
             </Channel>
           </WithComponents>
@@ -92,7 +107,9 @@ describe('isAttachmentEqualHandler', () => {
         chatClient,
         {
           ...messages[0],
-          attachments: [{ customField: 'custom-field-2', type: 'test' }],
+          attachments: [
+            { customField: 'custom-field-2', type: 'test' } as AttachmentWithCustomField,
+          ],
           updated_at: new Date(),
         },
         channel,

package/src/components/Channel/__tests__/{ownCapabilities.test.js → ownCapabilities.test.tsx}

@@ -4,6 +4,7 @@ import { FlatList } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { act, fireEvent, render, waitFor } from '@testing-library/react-native';
+import type { Channel as ChannelType, LocalMessage, StreamChat } from 'stream-chat';
 
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { allOwnCapabilities } from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
@@ -31,10 +32,10 @@ describe('Own capabilities', () => {
     user: otherUser,
   });
 
-  let chatClient;
-  let channel;
+  let chatClient: StreamChat;
+  let channel: ChannelType;
 
-  const initializeChannel = async (c) => {
+  const initializeChannel = async (c: ReturnType<typeof generateChannelResponse>) => {
     useMockedApis(chatClient, [getOrCreateChannelApi(c)]);
     channel = chatClient.channel('messaging');
 
@@ -48,7 +49,7 @@ describe('Own capabilities', () => {
     });
   });
 
-  const getComponent = (props = {}) => (
+  const getComponent = (props: Partial<React.ComponentProps<typeof Channel>> = {}) => (
     <SafeAreaProvider>
       <OverlayProvider>
         <Chat client={chatClient}>
@@ -61,7 +62,7 @@ describe('Own capabilities', () => {
     </SafeAreaProvider>
   );
 
-  const generateChannelWithCapabilities = async (capabilities = []) => {
+  const generateChannelWithCapabilities = async (capabilities: string[] = []) => {
     const c = generateChannelResponse({
       channel: {
         own_capabilities: capabilities,
@@ -71,12 +72,15 @@ describe('Own capabilities', () => {
     await initializeChannel(c);
   };
 
-  const renderChannelAndOpenMessageActionsList = async (targetMessage, props = {}) => {
+  const renderChannelAndOpenMessageActionsList = async (
+    targetMessage: LocalMessage,
+    props: Partial<React.ComponentProps<typeof Channel>> = {},
+  ) => {
     const { findByTestId, queryByLabelText, queryByText, unmount } = render(getComponent(props));
-    await waitFor(() => queryByText(targetMessage.text));
+    await waitFor(() => queryByText(targetMessage.text as string));
 
     act(() => {
-      fireEvent(queryByText(targetMessage.text), 'onLongPress');
+      fireEvent(queryByText(targetMessage.text as string)!, 'onLongPress');
     });
 
     await waitFor(() => expect(!!queryByLabelText('Message action list')).toBeTruthy());
@@ -363,7 +367,7 @@ describe('Own capabilities', () => {
       const sendMessage = jest.fn();
       channel.sendMessage = sendMessage;
       act(() => {
-        fireEvent(queryByTestId('send-button'), 'onPress');
+        fireEvent(queryByTestId('send-button')!, 'onPress');
       });
 
       await waitFor(() => expect(sendMessage).toHaveBeenCalledTimes(0));
@@ -378,10 +382,10 @@ describe('Own capabilities', () => {
     const mockFn = jest.fn();
     const { queryByTestId } = render(
       getComponent({
-        doSendMessageRequest: () => {
+        doSendMessageRequest: (() => {
           mockFn();
           return sendMessageApi();
-        },
+        }) as unknown as React.ComponentProps<typeof Channel>['doSendMessageRequest'],
       }),
     );
 
@@ -397,7 +401,7 @@ describe('Own capabilities', () => {
     });
 
     act(() => {
-      fireEvent(queryByTestId('send-button'), 'onPress');
+      fireEvent(queryByTestId('send-button')!, 'onPress');
     });
 
     await waitFor(() => expect(mockFn).toHaveBeenCalledTimes(1));

package/src/components/Channel/__tests__/{useMessageListPagination.test.js → useMessageListPagination.test.tsx}

@@ -1,4 +1,5 @@
 import { act, cleanup, renderHook, waitFor } from '@testing-library/react-native';
+import type { Channel as ChannelType, LocalMessage, StreamChat } from 'stream-chat';
 
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
@@ -11,23 +12,29 @@ import * as ChannelStateHooks from '../hooks/useChannelDataState';
 import { useMessageListPagination } from '../hooks/useMessageListPagination';
 
 describe('useMessageListPagination', () => {
-  let chatClient;
-  let channel;
-
-  const mockedHook = (state, values) =>
-    jest.spyOn(ChannelStateHooks, 'useChannelMessageDataState').mockImplementation(() => ({
-      copyMessagesStateFromChannel: jest.fn(),
-      jumpToLatestMessage: jest.fn(),
-      jumpToMessageFinished: jest.fn(),
-      loadInitialMessagesStateFromChannel: jest.fn(),
-      loadMoreFinished: jest.fn(),
-      loadMoreRecentFinished: jest.fn(),
-      setLoading: jest.fn(),
-      setLoadingMore: jest.fn(),
-      setLoadingMoreRecent: jest.fn(),
-      state: { ...channelInitialState, ...state },
-      ...values,
-    }));
+  let chatClient: StreamChat;
+  let channel: ChannelType;
+
+  const mockedHook = (
+    state: Partial<typeof channelInitialState>,
+    values?: Partial<ReturnType<typeof ChannelStateHooks.useChannelMessageDataState>>,
+  ) =>
+    jest.spyOn(ChannelStateHooks, 'useChannelMessageDataState').mockImplementation(
+      () =>
+        ({
+          copyMessagesStateFromChannel: jest.fn(),
+          jumpToLatestMessage: jest.fn(),
+          jumpToMessageFinished: jest.fn(),
+          loadInitialMessagesStateFromChannel: jest.fn(),
+          loadMoreFinished: jest.fn(),
+          loadMoreRecentFinished: jest.fn(),
+          setLoading: jest.fn(),
+          setLoadingMore: jest.fn(),
+          setLoadingMoreRecent: jest.fn(),
+          state: { ...channelInitialState, ...state },
+          ...values,
+        }) as unknown as ReturnType<typeof ChannelStateHooks.useChannelMessageDataState>,
+    );
 
   beforeEach(async () => {
     // Reset all modules before each test
@@ -40,7 +47,7 @@ describe('useMessageListPagination', () => {
     });
 
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
-    channel = chatClient.channel('messaging', mockedChannel.id);
+    channel = chatClient.channel('messaging', mockedChannel.channel.id);
     await channel.watch();
   });
 
@@ -57,7 +64,7 @@ describe('useMessageListPagination', () => {
       channel.state.messages = Array.from({ length: 20 }, (_, i) =>
         generateMessage({ text: `message-${i}` }),
       );
-      channel.state.messagePagination.hasPrev = true;
+      (channel.state.messagePagination as { hasPrev: boolean }).hasPrev = true;
     });
     channel.state = {
       ...channelInitialState,
@@ -66,7 +73,7 @@ describe('useMessageListPagination', () => {
         hasNext: true,
         hasPrev: true,
       },
-    };
+    } as unknown as typeof channel.state;
     const { result } = renderHook(() => useMessageListPagination({ channel }));
 
     await act(async () => {
@@ -76,7 +83,7 @@ describe('useMessageListPagination', () => {
     await waitFor(() => {
       expect(loadMessageIntoState).toHaveBeenCalledTimes(1);
       expect(result.current.state.hasMore).toBe(true);
-      expect(result.current.state.messages.length).toBe(20);
+      expect(result.current.state.messages!.length).toBe(20);
     });
   });
 
@@ -96,8 +103,8 @@ describe('useMessageListPagination', () => {
           hasNext: true,
           hasPrev: false,
         },
-      };
-      channel.query = queryFn;
+      } as unknown as typeof channel.state;
+      channel.query = queryFn as typeof channel.query;
       const { result } = renderHook(() => useMessageListPagination({ channel }));
 
       await act(async () => {
@@ -117,8 +124,8 @@ describe('useMessageListPagination', () => {
           hasNext: true,
           hasPrev: true,
         },
-      };
-      channel.query = queryFn;
+      } as unknown as typeof channel.state;
+      channel.query = queryFn as typeof channel.query;
 
       mockedHook({ loadingMore: true, loadingMoreRecent: true });
 
@@ -141,7 +148,7 @@ describe('useMessageListPagination', () => {
         channel.state.messages = Array.from({ length: 40 }, (_, i) =>
           generateMessage({ text: `message-${i}` }),
         );
-        channel.state.messagePagination.hasPrev = true;
+        (channel.state.messagePagination as { hasPrev: boolean }).hasPrev = true;
       });
       channel.state = {
         ...channelInitialState,
@@ -150,8 +157,8 @@ describe('useMessageListPagination', () => {
           hasPrev: true,
         },
         messages,
-      };
-      channel.query = queryFn;
+      } as unknown as typeof channel.state;
+      channel.query = queryFn as unknown as typeof channel.query;
 
       const { result } = renderHook(() => useMessageListPagination({ channel }));
 
@@ -167,7 +174,7 @@ describe('useMessageListPagination', () => {
           },
         });
         expect(result.current.state.hasMore).toBe(true);
-        expect(result.current.state.messages.length).toBe(40);
+        expect(result.current.state.messages!.length).toBe(40);
       });
     });
   });
@@ -189,8 +196,8 @@ describe('useMessageListPagination', () => {
           hasNext: false,
           hasPrev: true,
         },
-      };
-      channel.query = queryFn;
+      } as unknown as typeof channel.state;
+      channel.query = queryFn as typeof channel.query;
       const { result } = renderHook(() => useMessageListPagination({ channel }));
 
       await act(async () => {
@@ -210,8 +217,8 @@ describe('useMessageListPagination', () => {
           hasNext: true,
           hasPrev: true,
         },
-      };
-      channel.query = queryFn;
+      } as unknown as typeof channel.state;
+      channel.query = queryFn as typeof channel.query;
 
       mockedHook({ loadingMore: true, loadingMoreRecent: true });
 
@@ -234,7 +241,7 @@ describe('useMessageListPagination', () => {
         channel.state.messages = Array.from({ length: 40 }, (_, i) =>
           generateMessage({ text: `message-${i}` }),
         );
-        channel.state.messagePagination.hasPrev = true;
+        (channel.state.messagePagination as { hasPrev: boolean }).hasPrev = true;
       });
       channel.state = {
         ...channelInitialState,
@@ -243,8 +250,8 @@ describe('useMessageListPagination', () => {
           hasPrev: true,
         },
         messages,
-      };
-      channel.query = queryFn;
+      } as unknown as typeof channel.state;
+      channel.query = queryFn as unknown as typeof channel.query;
 
       const { result } = renderHook(() => useMessageListPagination({ channel }));
 
@@ -258,7 +265,7 @@ describe('useMessageListPagination', () => {
           watchers: { limit: 10 },
         });
         expect(result.current.state.hasMore).toBe(true);
-        expect(result.current.state.messages.length).toBe(40);
+        expect(result.current.state.messages!.length).toBe(40);
       });
     });
   });
@@ -277,7 +284,7 @@ describe('useMessageListPagination', () => {
         channel.state.messages = Array.from({ length: 20 }, (_, i) =>
           generateMessage({ text: `message-${i}` }),
         );
-        channel.state.messagePagination.hasPrev = true;
+        (channel.state.messagePagination as { hasPrev: boolean }).hasPrev = true;
       });
       channel.state = {
         ...channelInitialState,
@@ -286,7 +293,7 @@ describe('useMessageListPagination', () => {
           hasNext: true,
           hasPrev: true,
         },
-      };
+      } as unknown as typeof channel.state;
       const { result } = renderHook(() => useMessageListPagination({ channel }));
 
       await act(async () => {
@@ -303,7 +310,7 @@ describe('useMessageListPagination', () => {
         channel.state.messages = Array.from({ length: 20 }, (_, i) =>
           generateMessage({ text: `message-${i}` }),
         );
-        channel.state.messagePagination.hasPrev = true;
+        (channel.state.messagePagination as { hasPrev: boolean }).hasPrev = true;
       });
       channel.state = {
         ...channelInitialState,
@@ -312,7 +319,7 @@ describe('useMessageListPagination', () => {
           hasNext: false,
           hasPrev: true,
         },
-      };
+      } as unknown as typeof channel.state;
       const { result } = renderHook(() => useMessageListPagination({ channel }));
 
       await act(async () => {
@@ -323,7 +330,7 @@ describe('useMessageListPagination', () => {
         expect(loadMessageIntoState).toHaveBeenCalledTimes(1);
         expect(result.current.state.hasMore).toBe(true);
         expect(result.current.state.hasMoreNewer).toBe(false);
-        expect(result.current.state.messages.length).toBe(20);
+        expect(result.current.state.messages!.length).toBe(20);
         expect(result.current.state.targetedMessageId).toBe('message-5');
       });
     });
@@ -344,7 +351,7 @@ describe('useMessageListPagination', () => {
       );
       const loadMessageIntoState = jest.fn(() => {
         channel.state.messages = messages;
-        channel.state.messagePagination.hasPrev = true;
+        (channel.state.messagePagination as { hasPrev: boolean }).hasPrev = true;
       });
       channel.state = {
         ...channelInitialState,
@@ -353,7 +360,7 @@ describe('useMessageListPagination', () => {
           hasNext: true,
           hasPrev: true,
         },
-      };
+      } as unknown as typeof channel.state;
 
       const user = generateUser();
       const channelUnreadState = {
@@ -367,7 +374,11 @@ describe('useMessageListPagination', () => {
       const { result } = renderHook(() => useMessageListPagination({ channel }));
 
       await act(async () => {
-        await result.current.loadChannelAtFirstUnreadMessage({ channelUnreadState });
+        await result.current.loadChannelAtFirstUnreadMessage({
+          channelUnreadState: channelUnreadState as unknown as Parameters<
+            typeof result.current.loadChannelAtFirstUnreadMessage
+          >[0]['channelUnreadState'],
+        });
       });
 
       await waitFor(() => {
@@ -376,10 +387,30 @@ describe('useMessageListPagination', () => {
     });
 
     const generateMessageArray = (length = 20) =>
-      Array.from({ length }, (_, i) => generateMessage({ id: i, text: `message-${i}` }));
+      Array.from({ length }, (_, i) => generateMessage({ id: String(i), text: `message-${i}` }));
+
+    type TestCaseUnreadState = {
+      first_unread_message_id?: string;
+      last_read_message_id?: string;
+      unread_messages: number;
+    };
+
+    type TestCase = {
+      channelUnreadState: (messages: LocalMessage[]) => TestCaseUnreadState;
+      expectedCalls: {
+        jumpToMessageFinishedCalls: number;
+        loadMessageIntoStateCalls: number;
+        setChannelUnreadStateCalls: number;
+        setTargetedMessageIdCalls: number;
+        targetedMessageId: (messages: LocalMessage[]) => string;
+      };
+      initialMessages: LocalMessage[];
+      name: string;
+      setupLoadMessageIntoState: ((channel: ChannelType) => jest.Mock) | null;
+    };
 
     // Test cases with different scenarios
-    const testCases = [
+    const testCases: TestCase[] = [
       {
         channelUnreadState: (messages) => ({
           first_unread_message_id: messages[2].id,
@@ -398,7 +429,7 @@ describe('useMessageListPagination', () => {
       },
       {
         channelUnreadState: () => ({
-          first_unread_message_id: 21,
+          first_unread_message_id: '21',
           unread_messages: 2,
         }),
         expectedCalls: {
@@ -406,19 +437,20 @@ describe('useMessageListPagination', () => {
           loadMessageIntoStateCalls: 1,
           setChannelUnreadStateCalls: 0,
           setTargetedMessageIdCalls: 1,
-          targetedMessageId: () => 21,
+          targetedMessageId: () => '21',
         },
         initialMessages: generateMessageArray(),
         name: 'first_unread_message_id not present in current message set',
         setupLoadMessageIntoState: (channel) => {
           const loadMessageIntoState = jest.fn(() => {
             const newMessages = Array.from({ length: 20 }, (_, i) =>
-              generateMessage({ id: i + 21, text: `message-${i + 21}` }),
+              generateMessage({ id: String(i + 21), text: `message-${i + 21}` }),
             );
             channel.state.messages = newMessages;
-            channel.state.messagePagination.hasPrev = true;
+            (channel.state.messagePagination as { hasPrev: boolean }).hasPrev = true;
           });
-          channel.state.loadMessageIntoState = loadMessageIntoState;
+          (channel.state as unknown as { loadMessageIntoState: jest.Mock }).loadMessageIntoState =
+            loadMessageIntoState;
           return loadMessageIntoState;
         },
       },
@@ -440,7 +472,7 @@ describe('useMessageListPagination', () => {
       },
       {
         channelUnreadState: () => ({
-          last_read_message_id: 21,
+          last_read_message_id: '21',
           unread_messages: 2,
         }),
         expectedCalls: {
@@ -448,19 +480,20 @@ describe('useMessageListPagination', () => {
           loadMessageIntoStateCalls: 1,
           setChannelUnreadStateCalls: 1,
           setTargetedMessageIdCalls: 1,
-          targetedMessageId: () => 22,
+          targetedMessageId: () => '22',
         },
         initialMessages: generateMessageArray(),
         name: 'last_read_message_id not present in current message set',
         setupLoadMessageIntoState: (channel) => {
           const loadMessageIntoState = jest.fn(() => {
             const newMessages = Array.from({ length: 20 }, (_, i) =>
-              generateMessage({ id: i + 21, text: `message-${i + 21}` }),
+              generateMessage({ id: String(i + 21), text: `message-${i + 21}` }),
             );
             channel.state.messages = newMessages;
-            channel.state.messagePagination.hasPrev = true;
+            (channel.state.messagePagination as { hasPrev: boolean }).hasPrev = true;
           });
-          channel.state.loadMessageIntoState = loadMessageIntoState;
+          (channel.state as unknown as { loadMessageIntoState: jest.Mock }).loadMessageIntoState =
+            loadMessageIntoState;
           return loadMessageIntoState;
         },
       },
@@ -476,7 +509,7 @@ describe('useMessageListPagination', () => {
           hasPrev: true,
         },
         messages,
-      };
+      } as unknown as typeof channel.state;
 
       // Setup additional mocks if needed
       const loadMessageIntoStateMock = testCase.setupLoadMessageIntoState
@@ -502,7 +535,9 @@ describe('useMessageListPagination', () => {
       // Execute the method
       await act(async () => {
         await result.current.loadChannelAtFirstUnreadMessage({
-          channelUnreadState,
+          channelUnreadState: channelUnreadState as unknown as Parameters<
+            typeof result.current.loadChannelAtFirstUnreadMessage
+          >[0]['channelUnreadState'],
           setChannelUnreadState: setChannelUnreadStateMock,
           setTargetedMessage: setTargetedMessageIdMock,
         });
@@ -538,7 +573,7 @@ describe('useMessageListPagination', () => {
     const messages = Array.from({ length: 20 }, (_, i) =>
       generateMessage({
         created_at: new Date('2021-09-01T00:00:00.000Z'),
-        id: i,
+        id: String(i),
         text: `message-${i}`,
       }),
     );
@@ -547,7 +582,7 @@ describe('useMessageListPagination', () => {
 
     it.each`
       scenario                                       | last_read                               | expectedQueryCalls | expectedJumpToMessageFinishedCalls | expectedSetChannelUnreadStateCalls | expectedSetTargetedMessageCalls | expectedTargetedMessageId
-      ${'when last_read matches a message'}          | ${new Date(messages[10].created_at)}    | ${0}               | ${1}                               | ${1}                               | ${1}                            | ${10}
+      ${'when last_read matches a message'}          | ${new Date(messages[10].created_at)}    | ${0}               | ${1}                               | ${1}                               | ${1}                            | ${'10'}
       ${'when last_read does not match any message'} | ${new Date('2021-09-02T00:00:00.000Z')} | ${1}               | ${0}                               | ${0}                               | ${0}                            | ${undefined}
     `(
       '$scenario',
@@ -558,6 +593,13 @@ describe('useMessageListPagination', () => {
         expectedSetTargetedMessageCalls,
         expectedTargetedMessageId,
         last_read,
+      }: {
+        expectedJumpToMessageFinishedCalls: number;
+        expectedQueryCalls: number;
+        expectedSetChannelUnreadStateCalls: number;
+        expectedSetTargetedMessageCalls: number;
+        expectedTargetedMessageId: string | undefined;
+        last_read: Date;
       }) => {
         // Set up channel state
         channel.state = {
@@ -567,7 +609,7 @@ describe('useMessageListPagination', () => {
             hasPrev: true,
           },
           messages,
-        };
+        } as unknown as typeof channel.state;
 
         const channelUnreadState = {
           last_read,
@@ -577,7 +619,7 @@ describe('useMessageListPagination', () => {
 
         // Mock query if needed
         const queryMock = jest.fn();
-        channel.query = queryMock;
+        channel.query = queryMock as unknown as typeof channel.query;
 
         // Set up mocks
         const jumpToMessageFinishedMock = jest.fn();