Merge pull request #3083 from glific/test-cases

Test cases refactoring and cleanup

src/components/UI/Form/Input/Input.tsx

@@ -112,7 +112,11 @@ export const Input = ({
 
   return (
     <>
-      {translation && <div className={styles.Translation}>{translation}</div>}
+      {translation && (
+        <div data-testid="translation" className={styles.Translation}>
+          {translation}
+        </div>
+      )}
       <div className={styles.Input} data-testid="input">
         <FormControl fullWidth error={showError}>
           {inputLabel && (

src/containers/Chat/ChatInterface/ChatInterface.test.tsx

@@ -20,6 +20,7 @@ import { OrganizationStateMock } from 'mocks/Organization';
 import { collectionCountSubscription } from 'mocks/Search';
 
 import ChatInterface from './ChatInterface';
+import { getWhatsAppManagedPhonesStatusMock } from 'mocks/StatusBar';
 
 const mockedUsedNavigate = vi.fn();
 vi.mock('react-router-dom', async () => ({
@@ -103,6 +104,7 @@ const mocks = [
   getAttachmentPermissionMock,
   savedSearchQuery,
   markAsReadMock('2'),
+  getWhatsAppManagedPhonesStatusMock,
 ];
 
 const wrapper = (

src/containers/InteractiveMessage/InteractiveMessage.test.tsx

@@ -7,6 +7,10 @@ import { vi } from 'vitest';
 
 import { setUserSession } from 'services/AuthService';
 import {
+  getTemplateMocks1,
+  getTemplateMocks2,
+  getTemplateMocks3,
+  getTemplateMocks4,
   mocks,
   translateInteractiveTemplateMock,
   translateWitTrimmingMocks,
@@ -96,13 +100,9 @@ const mockData = [...mocks, ...mocks];
 
 setUserSession(JSON.stringify({ organization: { id: '1' }, roles: ['Admin'] }));
 
-const renderInteractiveMessage = (id: string, mocks?: any) => {
-  let MOCKS = mockData;
-  if (mocks) {
-    MOCKS = [...MOCKS, ...mocks];
-  }
+const renderInteractiveMessage = (id: string, mocks: any) => {
   return (
-    <MockedProvider mocks={MOCKS} addTypename={false}>
+    <MockedProvider mocks={mocks} addTypename={false}>
       <MemoryRouter initialEntries={[`/interactive-message/${id}/edit`]}>
         <Routes>
           <Route path="interactive-message/:id/edit" element={<InteractiveMessage />} />
@@ -324,25 +324,25 @@ describe('Add mode', () => {
 
 describe('Edit mode', () => {
   test('it renders quick reply in edit mode and changes language', async () => {
-    render(renderInteractiveMessage('1'));
+    render(renderInteractiveMessage('1', getTemplateMocks1));
 
     await waitFor(() => {
       expect(screen.getByText('Title')).toBeInTheDocument();
-      expect(screen.getByText('Details Confirmation')).toBeInTheDocument();
+      expect(screen.getByText('Are you excited for *Glific*?')).toBeInTheDocument();
+      expect(screen.getByText('yes')).toBeInTheDocument();
       expect(screen.getByText('Marathi')).toBeInTheDocument();
     });
 
     fireEvent.click(screen.getByText('Marathi'));
 
     await waitFor(() => {
-      expect(screen.getByText('Title')).toBeInTheDocument();
-      expect(screen.getByText('सही')).toBeInTheDocument();
+      expect(screen.getByTestId('translation')).toBeInTheDocument();
     });
 
     fireEvent.click(screen.getByText('English'));
 
     await waitFor(() => {
-      expect(screen.getByText('Details Confirmation')).toBeInTheDocument();
+      expect(screen.queryAllByTestId('translation')).toHaveLength(0);
     });
 
     fireEvent.click(screen.getByTestId('submitActionButton'));
@@ -353,19 +353,19 @@ describe('Edit mode', () => {
   });
 
   test('it renders interactive list in edit mode', async () => {
-    render(renderInteractiveMessage('2'));
+    render(renderInteractiveMessage('2', getTemplateMocks2));
 
     await waitFor(() => {
-      const saveButton = screen.getByText('Save');
-      expect(saveButton).toBeInTheDocument();
-      fireEvent.click(saveButton);
+      expect(screen.getByText('List header*')).toBeInTheDocument();
     });
   });
 
   test('it renders interactive quick reply with media in edit mode', async () => {
-    render(renderInteractiveMessage('3'));
+    render(renderInteractiveMessage('3', getTemplateMocks3));
 
-    // vi.spyOn(axios, 'get').mockResolvedValueOnce(responseMock3);
+    await waitFor(() => {
+      expect(screen.getByText('Button text')).toBeInTheDocument();
+    });
   });
 });
 
@@ -481,7 +481,9 @@ describe('translates the template', () => {
   });
 
   test('it shows error on translating an already exisiting template', async () => {
-    render(renderInteractiveMessage('1', [translateInteractiveTemplateMock(true)]));
+    render(
+      renderInteractiveMessage('1', [...getTemplateMocks1, translateInteractiveTemplateMock(true)])
+    );
 
     await waitFor(() => {
       expect(screen.getByText('Edit Interactive message')).toBeInTheDocument();
@@ -525,20 +527,17 @@ describe('translates the template', () => {
   });
 
   test('it shows warning if contents are trimmed', async () => {
-    render(renderInteractiveMessage('4'));
+    render(renderInteractiveMessage('4', getTemplateMocks4));
 
     await waitFor(() => {
       expect(screen.getByText('Title')).toBeInTheDocument();
-      expect(screen.getByText('Details Confirmation')).toBeInTheDocument();
       expect(screen.getByText('Marathi')).toBeInTheDocument();
+      expect(screen.getByText('Are you excited for *Glific*?')).toBeInTheDocument();
+      expect(screen.getByText('yes')).toBeInTheDocument();
     });
 
     fireEvent.click(screen.getByText('Marathi'));
 
-    await waitFor(() => {
-      expect(screen.getByText('Details Confirmation')).toBeInTheDocument();
-    });
-
     await waitFor(() => {
       expect(screen.getByText('Translations exceeding limit.')).toBeInTheDocument();
     });
@@ -551,13 +550,13 @@ describe('copy interactive message', () => {
   test('it renders copy interactive quick reply message', async () => {
     mockUseLocationValue.state = 'copy';
 
-    const { getByText, getAllByTestId } = render(renderInteractiveMessage('1'));
+    const { getByText, getAllByTestId } = render(renderInteractiveMessage('1', getTemplateMocks1));
     // vi.spyOn(axios, 'get').mockResolvedValueOnce(responseMock1);
 
     await waitFor(() => {
       expect(getByText('Copy Interactive Message')).toBeInTheDocument();
       const input = getAllByTestId('input');
-      expect(input[0]?.querySelector('input')).toHaveValue('Copy of Details Confirmation');
+      expect(input[0]?.querySelector('input')).toHaveValue('Copy of Are you excited for *Glific*?');
     });
   });
 });

src/containers/StaffManagement/StaffManagement.test.helper.tsx

@@ -183,18 +183,12 @@ const GET_GROUPS = {
   },
 };
 
-const UPDATE_USER_MOCK = {
+const updateUserMock = (input?: any) => ({
   request: {
     query: UPDATE_USER,
     variables: {
       id: '1',
-      input: {
-        name: 'Staff',
-        isRestricted: false,
-        addRoleIds: ['3'],
-        deleteRoleIds: ['2'],
-        groupIds: ['2'],
-      },
+      input,
     },
   },
   result: {
@@ -217,7 +211,7 @@ const UPDATE_USER_MOCK = {
       },
     },
   },
-};
+});
 
 const UPDATE_USER_DEMOTE_ADMIN_MOCK = {
   request: {
@@ -325,9 +319,23 @@ export const STAFF_MANAGEMENT_MOCKS = [
   GET_ROLES_MOCK,
   GET_USER_LANGUAGE_MOCK,
   GET_GROUPS,
-  UPDATE_USER_MOCK,
+
   UPDATE_USER_MULTIPLE_ROLES_MOCK,
   getRoleNamesMock,
+  updateUserMock({
+    name: 'Staff',
+    isRestricted: false,
+    addRoleIds: ['3'],
+    deleteRoleIds: ['2'],
+    groupIds: ['2'],
+  }),
+  updateUserMock({
+    name: 'Staff',
+    isRestricted: false,
+    addRoleIds: [],
+    deleteRoleIds: [],
+    groupIds: ['2'],
+  }),
 ];
 
 export const STAFF_MANAGEMENT_MOCKS_WITH_EMPTY_ROLES = [

src/containers/Template/Form/SpeedSend/SpeedSend.test.tsx

@@ -9,6 +9,7 @@ import { SpeedSend } from './SpeedSend';
 import * as Notification from 'common/notification';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { BeautifulMentionNode } from 'lexical-beautiful-mentions';
+import axios from 'axios';
 
 setUserSession(JSON.stringify({ roles: ['Admin'] }));
 
@@ -37,8 +38,17 @@ vi.mock('lexical-beautiful-mentions', async (importOriginal) => {
   };
 });
 
+vi.mock('axios');
+const mockedAxios = axios as any;
+
+const mockAxios = () => {
+  const responseData = { data: { message: 'success', is_valid: true } };
+  mockedAxios.get.mockImplementationOnce(() => Promise.resolve(responseData));
+};
+
 describe('SpeedSend', () => {
   test('cancel button should redirect to SpeedSendlist page', async () => {
+    mockAxios();
     const { container, getByText } = render(
       <MockedProvider mocks={mocks} addTypename={false}>
         <MemoryRouter>
@@ -62,6 +72,8 @@ describe('SpeedSend', () => {
   });
 
   test('should have correct validations ', async () => {
+    mockAxios();
+
     const { container } = render(
       <MockedProvider mocks={mocks} addTypename={false}>
         <MemoryRouter>
@@ -99,12 +111,15 @@ describe('SpeedSend', () => {
   });
 
   test('should test translations', async () => {
+    mockAxios();
+
     const notificationSpy = vi.spyOn(Notification, 'setNotification');
     render(
       <MockedProvider mocks={mocks} addTypename={false}>
         <MemoryRouter initialEntries={['/speed-send/1/edit']}>
           <Routes>
             <Route path="speed-send/:id/edit" element={<SpeedSend />} />
+            <Route path="/speed-send" element={<SpeedSendList />} />
           </Routes>
         </MemoryRouter>
       </MockedProvider>

src/containers/Template/Template.test.helper.ts

@@ -915,4 +915,5 @@ export const SPEED_SENDS_MOCKS = [
   getFilterTagQuery,
   getFilterTagQuery,
   updateSessiontemplate,
+  updateSessiontemplate,
 ];

src/mocks/Collection.tsx

@@ -445,7 +445,7 @@ export const deleteContactFromCollection = {
   },
 };
 
-export const getCollectionsList = (label?: string) => ({
+export const getCollectionsList = (label?: any) => ({
   request: {
     query: GET_COLLECTIONS_LIST,
     variables: {

src/mocks/Flow.tsx

@@ -286,6 +286,7 @@ const getFlowDetails = (isActive = true, keywords = ['help']) => ({
           isActive,
           name: 'help workflow',
           keywords,
+          isTemplate: false,
         },
       ],
     },