From a43531b8f5bd95c8e2cf6a0b96d8f41cfe9f91c4 Mon Sep 17 00:00:00 2001
From: mdshamoon <mohdshamoon841@gmail.com>
Date: Sat, 14 Oct 2023 10:58:43 +0530
Subject: [PATCH] fixed all unit tests

---
 .../ChatMessages/ChatInput/ChatInput.test.tsx | 53 +++++++++++--------
 .../Chat/ChatMessages/ChatInput/ChatInput.tsx | 11 ++--
 2 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/src/containers/Chat/ChatMessages/ChatInput/ChatInput.test.tsx b/src/containers/Chat/ChatMessages/ChatInput/ChatInput.test.tsx
index e675b66b3..7e8e8f744 100644
--- a/src/containers/Chat/ChatMessages/ChatInput/ChatInput.test.tsx
+++ b/src/containers/Chat/ChatMessages/ChatInput/ChatInput.test.tsx
@@ -1,5 +1,5 @@
 import { MockedProvider } from '@apollo/client/testing';
-import { render, waitFor, fireEvent } from '@testing-library/react';
+import { render, waitFor, fireEvent, screen } from '@testing-library/react';
 import { vi } from 'vitest';
 
 import ChatInput from './ChatInput';
@@ -81,6 +81,7 @@ describe('<ChatInput />', () => {
 
   test('speed send, template and interactive buttons should exist', () => {
     const { getAllByTestId } = render(chatInput);
+    fireEvent.click(screen.getByTestId('shortcut-open-button'));
     expect(getAllByTestId('shortcutButton')).toHaveLength(3);
   });
 
@@ -93,27 +94,22 @@ describe('<ChatInput />', () => {
   test('chat templates should open when either speed send or templates button is clicked', async () => {
     // Speed sends button
     const { getAllByTestId, getByTestId, queryByTestId } = render(chatInput);
-    fireEvent.click(getAllByTestId('shortcutButton')[0]);
+    fireEvent.click(screen.getByTestId('shortcut-open-button'));
+
     await waitFor(() => {
+      expect(getAllByTestId('shortcutButton')).toHaveLength(3);
       expect(getByTestId('chatTemplates')).toBeInTheDocument();
     });
-    fireEvent.click(getAllByTestId('shortcutButton')[0]);
-    expect(queryByTestId('chatTemplates')).toBe(null);
-
-    // Templates button
 
-    fireEvent.click(getAllByTestId('shortcutButton')[1]);
+    fireEvent.click(getByTestId('shortcut-open-button'));
     await waitFor(() => {
-      expect(getByTestId('chatTemplates')).toBeInTheDocument();
+      expect(queryByTestId('chatTemplates')).toBe(null);
     });
-    fireEvent.click(getAllByTestId('shortcutButton')[1]);
-    expect(queryByTestId('chatTemplates')).toBe(null);
   });
 
   test('check if reset button works', async () => {
-    const { getAllByTestId, getByTestId } = render(chatInput);
-
-    fireEvent.click(getAllByTestId('shortcutButton')[0]);
+    const { getByTestId } = render(chatInput);
+    fireEvent.click(getByTestId('shortcut-open-button'));
 
     await waitFor(() => {
       fireEvent.change(getByTestId('searchInput').querySelector('input') as HTMLElement, {
@@ -127,16 +123,18 @@ describe('<ChatInput />', () => {
 
   test('Interactive message list should open is interactive msg button is clicked', async () => {
     const { getAllByTestId, getByTestId, queryByTestId } = render(chatInput);
+    fireEvent.click(getByTestId('shortcut-open-button'));
     fireEvent.click(getAllByTestId('shortcutButton')[2]);
     await waitFor(() => {
       expect(getByTestId('chatTemplates')).toBeInTheDocument();
     });
-    fireEvent.click(getAllByTestId('shortcutButton')[2]);
+    fireEvent.click(getByTestId('shortcut-open-button'));
     expect(queryByTestId('chatTemplates')).toBe(null);
   });
 
   test('clicking on a interactive msg from the list should store the value as input', async () => {
-    const { getAllByTestId } = render(chatInput);
+    const { getAllByTestId, getByTestId } = render(chatInput);
+    fireEvent.click(getByTestId('shortcut-open-button'));
     const interactiveMessages = getAllByTestId('shortcutButton')[2];
     fireEvent.click(interactiveMessages);
     await waitFor(() => {
@@ -147,6 +145,7 @@ describe('<ChatInput />', () => {
 
   test('send an interactive message', async () => {
     const { getAllByTestId, getByTestId } = render(chatInput);
+    fireEvent.click(getByTestId('shortcut-open-button'));
     const interactiveMessages = getAllByTestId('shortcutButton')[2];
     fireEvent.click(interactiveMessages);
     await waitFor(() => {
@@ -158,12 +157,17 @@ describe('<ChatInput />', () => {
   });
 
   test('clicking on a speed send from the list should store the value as input', async () => {
-    const { getAllByTestId } = render(chatInput);
-    const speedSends = getAllByTestId('shortcutButton')[0];
-    fireEvent.click(speedSends);
+    const { getAllByTestId, getByTestId, getAllByText } = render(chatInput);
+
+    fireEvent.click(getByTestId('shortcut-open-button'));
+
     await waitFor(() => {
-      const listItem = getAllByTestId('templateItem')[0];
-      fireEvent.click(listItem);
+      expect(getAllByTestId('templateItem')).toHaveLength(2);
+    });
+    const listItem = getAllByTestId('templateItem')[0];
+    fireEvent.click(listItem);
+    await waitFor(() => {
+      expect(getAllByText('some description')).toHaveLength(1);
     });
   });
 
@@ -186,22 +190,24 @@ describe('<ChatInput />', () => {
   test('when bsp status is HSM', async () => {
     const propsWithBspStatusHSM = { ...defaultProps };
     propsWithBspStatusHSM.contactBspStatus = 'HSM';
-    const { getByText } = render(
+    const { getByText, getByTestId } = render(
       <MockedProvider mocks={mocks} addTypename={false}>
         <ChatInput {...propsWithBspStatusHSM} />
       </MockedProvider>
     );
+    fireEvent.click(getByTestId('shortcut-open-button'));
     expect(getByText('Templates')).toBeInTheDocument();
   });
 
   test('when bsp status is SESSION', async () => {
     const propsWithBspStatusSession = { ...defaultProps };
     propsWithBspStatusSession.contactBspStatus = 'SESSION';
-    const { getByText } = render(
+    const { getByText, getByTestId } = render(
       <MockedProvider mocks={mocks} addTypename={false}>
         <ChatInput {...propsWithBspStatusSession} />
       </MockedProvider>
     );
+    fireEvent.click(getByTestId('shortcut-open-button'));
     expect(getByText('Speed sends')).toBeInTheDocument();
   });
 
@@ -211,11 +217,12 @@ describe('<ChatInput />', () => {
     date.setDate(date.getDate() - 2);
     propsWithChatWindowOver.lastMessageTime = date;
 
-    const { getByText } = render(
+    const { getByText, getByTestId } = render(
       <MockedProvider mocks={mocks} addTypename={false}>
         <ChatInput {...propsWithChatWindowOver} />
       </MockedProvider>
     );
+    fireEvent.click(getByTestId('shortcut-open-button'));
     expect(getByText('Templates')).toBeInTheDocument();
   });
 
diff --git a/src/containers/Chat/ChatMessages/ChatInput/ChatInput.tsx b/src/containers/Chat/ChatMessages/ChatInput/ChatInput.tsx
index 6d1abdcbb..993941a08 100644
--- a/src/containers/Chat/ChatMessages/ChatInput/ChatInput.tsx
+++ b/src/containers/Chat/ChatMessages/ChatInput/ChatInput.tsx
@@ -219,17 +219,12 @@ export const ChatInput = ({
   const handleClick = (title: string) => {
     // clear the search when tab is opened again
     setSearchVal('');
-    if (selectedTab === title) {
-      setSelectedTab('');
-    } else {
-      setSelectedTab(title);
-    }
-    setOpen(selectedTab !== title);
+    setSelectedTab(title);
   };
 
   const handleClickAway = (event?: any) => {
     const popupElement = document.getElementById('popup');
-    if (popupElement && popupElement.contains(event.target)) {
+    if (popupElement && event && popupElement.contains(event.target)) {
       return;
     }
     setOpen(false);
@@ -425,8 +420,10 @@ export const ChatInput = ({
       <div className={styles.ChatInputElements}>
         <ClickAwayListener onClickAway={handleClickAway}>
           <IconButton
+            data-testid="shortcut-open-button"
             className={styles.AttachmentIcon}
             onClick={() => {
+              setOpen((open) => !open);
               handleClick(quickSendTypes[0].type);
             }}
             aria-hidden="true"