fix: tests

Author: khushal87

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { render, waitFor } from '@testing-library/react-native';
+import { act, fireEvent, render, waitFor } from '@testing-library/react-native';
 
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
@@ -10,23 +10,18 @@ import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { AutoCompleteInput } from '../AutoCompleteInput';
+import { AutoCompleteSuggestionList } from '../AutoCompleteSuggestionList';
 
 describe('AutoCompleteInput', () => {
   const clientUser = generateUser();
   let chatClient;
   let channel;
 
-  const getComponent = (props = {}) => (
+  const getAutoCompleteComponent = () => (
     <Chat client={chatClient}>
-      <Channel
-        channel={channel}
-        triggerSettings={ACITriggerSettings({
-          channel,
-          onMentionSelectItem: jest.fn(),
-          t: jest.fn(),
-        })}
-      >
-        <AutoCompleteInput giphyEnabled onChange={jest.fn} text={props.text} />
+      <Channel channel={channel}>
+        <AutoCompleteInput />
+        <AutoCompleteSuggestionList />
       </Channel>
     </Chat>
   );
@@ -41,41 +36,34 @@ describe('AutoCompleteInput', () => {
 
   beforeEach(async () => {
     chatClient = await getTestClientWithUser(clientUser);
+    await initializeChannel(generateChannelResponse());
   });
 
   afterEach(() => {
     channel = null;
   });
 
   it('should render AutoCompleteInput and trigger open/close suggestions with / commands', async () => {
-    const props = {
-      closeSuggestions: jest.fn(),
-      openSuggestions: jest.fn(),
-    };
+    const { queryByTestId } = render(getAutoCompleteComponent());
 
-    await initializeChannel(generateChannelResponse());
+    const input = queryByTestId('auto-complete-text-input');
 
-    const { queryByTestId, rerender } = render(getComponent(props));
+    const onSelectionChange = input.props.onSelectionChange;
 
     await waitFor(() => {
-      expect(queryByTestId('auto-complete-text-input')).toBeTruthy();
-      expect(props.closeSuggestions).toHaveBeenCalledTimes(0);
-      expect(props.openSuggestions).toHaveBeenCalledTimes(0);
+      expect(input).toBeTruthy();
     });
 
-    rerender(getComponent({ ...props, text: '/' }));
-
-    await waitFor(() => {
-      expect(queryByTestId('auto-complete-text-input')).toBeTruthy();
-    });
-
-    rerender(getComponent({ ...props, text: '' }));
-    rerender(getComponent(props));
-
-    await waitFor(() => {
-      expect(queryByTestId('auto-complete-text-input')).toBeTruthy();
+    await act(async () => {
+      await onSelectionChange({
+        nativeEvent: {
+          selection: {
+            end: 1,
+            start: 1,
+          },
+        },
+      });
+      await fireEvent.changeText(input, '/');
     });
   });
-
-  // TODO: figure out how to make tests work for @ mentions with needing to update function state values
 });

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

@@ -88,16 +88,16 @@ describe('MessageInput', () => {
 
   beforeEach(async () => {
     chatClient = await getTestClientWithUser(clientUser);
+    await initializeChannel(generateChannelResponse());
   });
 
   afterEach(() => {
     channel = null;
     cleanup();
+    jest.clearAllMocks();
   });
 
   it('should render MessageInput', async () => {
-    await initializeChannel(generateChannelResponse());
-
     const openPicker = jest.fn();
     const closePicker = jest.fn();
     const attachmentValue = { closePicker, openPicker };
@@ -116,17 +116,7 @@ describe('MessageInput', () => {
   });
 
   it('trigger file size threshold limit alert when images size above the limit', async () => {
-    await initializeChannel(generateChannelResponse());
-
-    render(
-      <OverlayProvider>
-        <Chat client={chatClient}>
-          <Channel channel={channel}>
-            <MessageInput />
-          </Channel>
-        </Chat>
-      </OverlayProvider>,
-    );
+    render(getComponent());
 
     // Both for files and for images triggered in one test itself.
     await waitFor(() => {
@@ -135,9 +125,6 @@ describe('MessageInput', () => {
   });
 
   it('should start the audio recorder on long press and cleanup on unmount', async () => {
-    jest.clearAllMocks();
-
-    await initializeChannel(generateChannelResponse());
     const userBot = userEvent.setup();
 
     const { queryByTestId, unmount } = render(
@@ -167,9 +154,6 @@ describe('MessageInput', () => {
   });
 
   it('should trigger an alert if a normal press happened on audio recording', async () => {
-    jest.clearAllMocks();
-
-    await initializeChannel(generateChannelResponse());
     const userBot = userEvent.setup();
 
     const { queryByTestId } = render(
@@ -193,8 +177,6 @@ describe('MessageInput', () => {
   });
 
   it('should render the SendMessageDisallowedIndicator if the send-message capability is not present', async () => {
-    await initializeChannel(generateChannelResponse());
-
     const { queryByTestId } = render(
       <Chat client={chatClient}>
         <Channel audioRecordingEnabled channel={channel}>
@@ -223,31 +205,15 @@ describe('MessageInput', () => {
   });
 
   it('should not render the SendMessageDisallowedIndicator if the channel is frozen and the send-message capability is present', async () => {
-    await initializeChannel(generateChannelResponse({ channel: { frozen: true } }));
-
-    const { queryByTestId } = render(
-      <Chat client={chatClient}>
-        <Channel audioRecordingEnabled channel={channel}>
-          <MessageInput />
-        </Channel>
-      </Chat>,
-    );
+    const { queryByTestId } = render(getComponent());
 
     await waitFor(() => {
       expect(queryByTestId('send-message-disallowed-indicator')).toBeNull();
     });
   });
 
   it('should render the SendMessageDisallowedIndicator in a frozen channel only if the send-message capability is not present', async () => {
-    await initializeChannel(generateChannelResponse({ channel: { frozen: true } }));
-
-    const { queryByTestId } = render(
-      <Chat client={chatClient}>
-        <Channel audioRecordingEnabled channel={channel}>
-          <MessageInput />
-        </Channel>
-      </Chat>,
-    );
+    const { queryByTestId } = render(getComponent());
 
     act(() => {
       chatClient.dispatchEvent({
@@ -276,8 +242,6 @@ describe('MessageInput', () => {
   };
 
   it('should not render the SendMessageDisallowedIndicator if we are editing a message, regardless of capabilities', async () => {
-    await initializeChannel(generateChannelResponse());
-
     const { queryByTestId } = render(
       <Chat client={chatClient}>
         <Channel audioRecordingEnabled channel={channel}>

package/src/contexts/__tests__/index.test.tsx

@@ -13,7 +13,6 @@ import {
   useOverlayContext,
   useOwnCapabilitiesContext,
   usePaginatedMessageListContext,
-  useSuggestionsContext,
   useTheme,
   useThreadContext,
   useTypingContext,
@@ -45,10 +44,6 @@ describe('contexts hooks in a component throws an error with message when not wr
       useOwnCapabilitiesContext,
       'The useOwnCapabilitiesContext hook was called outside the Channel Component. Make sure you have configured Channel component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#channel',
     ],
-    [
-      useSuggestionsContext,
-      'The useSuggestionsContext hook was called outside of the SuggestionsContext provider. Make sure you have configured Channel component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#channel',
-    ],
     [
       useTypingContext,
       'The useTypingContext hook was called outside of the TypingContext provider. Make sure you have configured Channel component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#channel',