Improve Code Coverage in src/screens/UserPortal/Chat/Chat.tsx (Palisa…

…doesFoundation#3163)

* chore: test msgs for all messages added

* chore: Increase test coverage in chat.tsx

* refactor: remove redundant data-testid prop from ContactCard usage
 & removed duplicated hooks

* added a mock for markchatmessagesasread mutation that fixes the runtime test errors

src/screens/UserPortal/Chat/Chat.spec.tsx

@@ -29,6 +29,7 @@ import {
   UNREAD_CHAT_LIST,
 } from 'GraphQl/Queries/PlugInQueries';
 import useLocalStorage from 'utils/useLocalstorage';
+// import userEvent from '@testing-library/user-event';
 
 /**
  * Unit tests for the ChatScreen component.
@@ -4281,6 +4282,111 @@ describe('Testing Chat Screen [User Portal]', () => {
     ...MARK_CHAT_MESSAGES_AS_READ_MOCK,
   ];
 
+  it('should handle filter changes in sequence', async () => {
+    setItem('userId', '1');
+    const mockChatsData = {
+      chatsByUserId: [
+        {
+          _id: '1',
+          isGroup: false,
+          users: [{ _id: '1', firstName: 'John', lastName: 'Doe' }],
+          messages: [],
+          unseenMessagesByUsers: '{}',
+        },
+      ],
+    };
+
+    const mocks = [
+      {
+        request: {
+          query: CHATS_LIST,
+          variables: { id: '1' },
+        },
+        result: {
+          data: mockChatsData,
+        },
+      },
+      {
+        request: {
+          query: MARK_CHAT_MESSAGES_AS_READ,
+          variables: { chatId: '', userId: '1' },
+        },
+        result: {
+          data: {
+            markChatMessagesAsRead: {
+              _id: '1',
+            },
+          },
+        },
+      },
+    ];
+
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <Chat />
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    const allChatButton = await screen.findByTestId('allChat');
+    const unreadChatButton = await screen.findByTestId('unreadChat');
+    const groupChatButton = await screen.findByTestId('groupChat');
+
+    await act(async () => {
+      fireEvent.click(unreadChatButton);
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    await act(async () => {
+      fireEvent.click(groupChatButton);
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    await act(async () => {
+      fireEvent.click(allChatButton);
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    const contactCards = await screen.findAllByTestId('contactCardContainer');
+    expect(contactCards).toHaveLength(1);
+  });
+
+  it('should fetch and set all chats when filterType is "all"', async () => {
+    setItem('userId', '1');
+    render(
+      <MockedProvider mocks={mock} addTypename={false}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Chat />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    const allChatButton = await screen.findByTestId('allChat');
+
+    await act(async () => {
+      fireEvent.click(allChatButton);
+    });
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    const contactCards = await screen.findAllByTestId('contactCardContainer');
+    expect(contactCards).toHaveLength(1);
+  });
   test('Screen should be rendered properly', async () => {
     render(
       <MockedProvider addTypename={false} mocks={mock}>
@@ -4377,7 +4483,6 @@ describe('Testing Chat Screen [User Portal]', () => {
     fireEvent.click(closeButton);
   });
 
-  // filter chat test
   test('Testing chat filters', async () => {
     setItem('userId', '1');
 
@@ -4399,8 +4504,6 @@ describe('Testing Chat Screen [User Portal]', () => {
       fireEvent.click(await screen.findByTestId('unreadChat'));
     });
 
-    await wait(1000);
-
     await act(async () => {
       fireEvent.click(await screen.findByTestId('groupChat'));
     });
@@ -4411,4 +4514,35 @@ describe('Testing Chat Screen [User Portal]', () => {
       fireEvent.click(await screen.findByTestId('allChat'));
     });
   });
+  it('should fetch and set group chats when filterType is "group"', async () => {
+    setItem('userId', '1');
+
+    render(
+      <MockedProvider mocks={mock} addTypename={false}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <Chat />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+
+    const groupChatButton = await screen.findByTestId('groupChat');
+
+    await act(async () => {
+      fireEvent.click(groupChatButton);
+    });
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    const container = await screen.findByTestId('contactCardContainer');
+    expect(container).toBeInTheDocument();
+
+    const chatContacts = await screen.findAllByTestId('contactContainer');
+    expect(chatContacts).toHaveLength(1);
+  });
 });

src/screens/UserPortal/Chat/Chat.tsx

@@ -105,27 +105,12 @@ export default function chat(): JSX.Element {
   });
   const { t: tCommon } = useTranslation('common');
 
-  const [hideDrawer, setHideDrawer] = useState<boolean | null>(null);
   const [chats, setChats] = useState<Chat[]>([]);
   const [selectedContact, setSelectedContact] = useState('');
   const [filterType, setFilterType] = useState('all');
   const { getItem } = useLocalStorage();
   const userId = getItem('userId');
 
-  const handleResize = (): void => {
-    if (window.innerWidth <= 820) {
-      setHideDrawer(!hideDrawer);
-    }
-  };
-
-  useEffect(() => {
-    handleResize();
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
   React.useEffect(() => {
     if (filterType === 'all') {
       chatsListRefetch();
@@ -152,7 +137,7 @@ export default function chat(): JSX.Element {
     setCreateDirectChatModalisOpen(true);
   }
 
-  const toggleCreateDirectChatModal = /* istanbul ignore next */ (): void =>
+  const toggleCreateDirectChatModal = (): void =>
     setCreateDirectChatModalisOpen(!createDirectChatModalisOpen);
 
   const [createGroupChatModalisOpen, setCreateGroupChatModalisOpen] =
@@ -162,7 +147,7 @@ export default function chat(): JSX.Element {
     setCreateGroupChatModalisOpen(true);
   }
 
-  const toggleCreateGroupChatModal = /* istanbul ignore next */ (): void => {
+  const toggleCreateGroupChatModal = (): void => {
     setCreateGroupChatModalisOpen(!createGroupChatModalisOpen);
   };
 
@@ -317,13 +302,7 @@ export default function chat(): JSX.Element {
                             chat.messages[chat.messages.length - 1]
                               ?.messageContent,
                         };
-                        return (
-                          <ContactCard
-                            data-testid="chatContact"
-                            {...cardProps}
-                            key={chat._id}
-                          />
-                        );
+                        return <ContactCard {...cardProps} key={chat._id} />;
                       })}
                   </div>
                 </>