test: fix more broken tests

Author: khushal87

package/src/__tests__/offline-support/optimistic-update.js

@@ -270,14 +270,20 @@ export const OptimisticUpdates = () => {
       it('pending task should exist if sendMessage request fails', async () => {
         const newMessage = generateMessage();
 
+        jest.spyOn(channel.messageComposer, 'compose').mockResolvedValue({
+          localMessage: newMessage,
+          message: newMessage,
+          options: {},
+        });
+
         render(
           <Chat client={chatClient} enableOfflineSupport>
-            <Channel channel={channel} initialValue={newMessage.text}>
+            <Channel channel={channel}>
               <CallbackEffectWithContext
                 callback={async ({ sendMessage }) => {
                   useMockedApis(chatClient, [erroredPostApi()]);
                   try {
-                    await sendMessage({ customMessageData: newMessage });
+                    await sendMessage();
                   } catch (e) {
                     // do nothing
                   }
@@ -446,6 +452,12 @@ export const OptimisticUpdates = () => {
       it('send message pending task should be executed after connection is recovered', async () => {
         const newMessage = generateMessage();
 
+        jest.spyOn(channel.messageComposer, 'compose').mockResolvedValue({
+          localMessage: newMessage,
+          message: newMessage,
+          options: {},
+        });
+
         // initialValue is needed as a prop to trick the message input ctx into thinking
         // we are sending a message.
         render(
@@ -455,7 +467,7 @@ export const OptimisticUpdates = () => {
                 callback={async ({ sendMessage }) => {
                   useMockedApis(chatClient, [erroredPostApi()]);
                   try {
-                    await sendMessage({ customMessageData: newMessage });
+                    await sendMessage();
                   } catch (e) {
                     // do nothing
                   }

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

@@ -10,26 +10,29 @@ import {
   waitFor,
 } from '@testing-library/react-native';
 
+import { OverlayProvider } from '../../../contexts';
 import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { AutoCompleteInput } from '../AutoCompleteInput';
 
 const renderComponent = ({ channelProps, client, props }) => {
   return render(
-    <Chat client={client}>
-      <Channel {...channelProps}>
-        <AutoCompleteInput {...props} />
-      </Channel>
-    </Chat>,
+    <OverlayProvider>
+      <Chat client={client}>
+        <Channel {...channelProps}>
+          <AutoCompleteInput {...props} />
+        </Channel>
+      </Chat>
+    </OverlayProvider>,
   );
 };
 
 describe('AutoCompleteInput', () => {
   let client;
   let channel;
 
-  beforeAll(async () => {
+  beforeEach(async () => {
     const { client: chatClient, channels } = await initiateClientWithChannels();
     client = chatClient;
     channel = channels[0];

package/src/components/AutoCompleteInput/__tests__/AutoCompleteSuggestionList.test.js

@@ -48,11 +48,14 @@ const ContextConsumer = ({ context, fn }) => {
   return <View testID='children' />;
 };
 
+const channelType = 'messaging';
+const channelId = 'test-channel';
+const channelCid = `${channelType}:${channelId}`;
 let chatClient;
 let channel;
 
 const user = generateUser({ id: 'id', name: 'name' });
-const messages = [generateMessage({ user })];
+const messages = [generateMessage({ cid: channelCid, user })];
 
 const renderComponent = (props = {}, callback = () => {}, context = ChannelContext) =>
   render(
@@ -70,8 +73,11 @@ describe('Channel', () => {
   beforeEach(async () => {
     const members = [generateMember({ user })];
     const mockedChannel = generateChannelResponse({
+      cid: channelCid,
+      id: channelId,
       members,
       messages,
+      type: channelType,
     });
     chatClient = await getTestClientWithUser(user);
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);

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

@@ -16,7 +16,7 @@ import { getTestClientWithUser } from '../../../../mock-builders/mock';
 import { Channel } from '../../../Channel/Channel';
 import { Chat } from '../../../Chat/Chat';
 import { Message } from '../../Message';
-import { MessageContent } from '../../MessageSimple/MessageContent';
+import { MessageContent } from '../MessageContent';
 
 describe('MessageContent', () => {
   let channel;
@@ -39,13 +39,11 @@ describe('MessageContent', () => {
 
     renderMessage = (options) =>
       render(
-        <ChannelsStateProvider>
-          <Chat client={chatClient}>
-            <Channel channel={channel}>
-              <Message groupStyles={['bottom']} {...options} />
-            </Channel>
-          </Chat>
-        </ChannelsStateProvider>,
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <Message groupStyles={['bottom']} {...options} />
+          </Channel>
+        </Chat>,
       );
   });
 

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

@@ -160,7 +160,6 @@ describe('MessageSimple', () => {
     renderMessage({ groupStyles: ['top'], message });
 
     await waitFor(() => {
-      console.log(screen.getByTestId('message-simple-wrapper').props.style[1]);
       expect(screen.getByTestId('message-simple-wrapper').props.style[1]).toMatchObject({});
     });
   });
@@ -185,7 +184,6 @@ describe('MessageSimple', () => {
     renderMessage({ message });
 
     await waitFor(() => {
-      console.log(screen.getByTestId('message-content-wrapper').props.style);
       expect(screen.getByTestId('message-content-wrapper').props.style[2]).toMatchObject({
         borderWidth: 0,
       });
@@ -199,7 +197,6 @@ describe('MessageSimple', () => {
     renderMessage({ message });
 
     await waitFor(() => {
-      console.log(screen.getByTestId('message-content-wrapper').props.style);
       expect(screen.getByTestId('message-content-wrapper').props.style[2]).toMatchObject({
         borderWidth: 0,
       });

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { act, render, screen, userEvent, waitFor } from '@testing-library/react-native';
+import { act, cleanup, render, screen, userEvent, waitFor } from '@testing-library/react-native';
 
 import { OverlayProvider } from '../../../contexts';
 
@@ -26,12 +26,17 @@ describe('AttachButton', () => {
   let client;
   let channel;
 
-  beforeAll(async () => {
+  beforeEach(async () => {
     const { client: chatClient, channels } = await initiateClientWithChannels();
     client = chatClient;
     channel = channels[0];
   });
 
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
   it('should render an disabled AttachButton', async () => {
     const handleOnPress = jest.fn();
     const channelProps = { channel };

package/src/components/MessageInput/__tests__/AttachButton.test.js

@@ -1,13 +1,18 @@
 import React from 'react';
 
-import { render, screen, userEvent, waitFor } from '@testing-library/react-native';
+import { cleanup, render, screen, userEvent, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { ProgressIndicatorTypes } from '../../../utils/utils';
 
 import { AttachmentUploadProgressIndicator } from '../components/AttachmentPreview/AttachmentUploadProgressIndicator';
 
 describe('AttachmentUploadProgressIndicator', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
   it('should render an inactive AttachmentUploadProgressIndicator', async () => {
     const action = jest.fn();
 

package/src/components/MessageInput/__tests__/AttachmentUploadProgressIndicator.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
 
 import { OverlayProvider } from '../../../contexts';
 import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels';
@@ -44,13 +44,15 @@ describe('AudioAttachmentUploadPreview render', () => {
   let client;
   let channel;
 
-  beforeAll(async () => {
+  beforeEach(async () => {
     const { client: chatClient, channels } = await initiateClientWithChannels();
     client = chatClient;
     channel = channels[0];
   });
 
   afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
     act(() => {
       channel.messageComposer.attachmentManager.initState();
     });

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { act, render, screen, userEvent, waitFor } from '@testing-library/react-native';
+import { act, cleanup, render, screen, userEvent, waitFor } from '@testing-library/react-native';
 
 import { OverlayProvider } from '../../../contexts';
 
@@ -25,12 +25,17 @@ describe('CommandsButton', () => {
   let client;
   let channel;
 
-  beforeAll(async () => {
+  beforeEach(async () => {
     const { client: chatClient, channels } = await initiateClientWithChannels();
     client = chatClient;
     channel = channels[0];
   });
 
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+  });
+
   it('should render component', async () => {
     const props = {};
     renderComponent({ channel, client, props });