Refactoring: Separating HSM and Speed sends

.github/workflows/cypress-testing.yml

@@ -96,7 +96,7 @@ jobs:
           git clone https://github.com/glific/cypress-testing.git
           echo done. go to dir.
           cd cypress-testing
-          git checkout main
+          git checkout templates
           cd ..
           cp -r cypress-testing/cypress cypress
           yarn add [email protected]

src/containers/Chat/ChatMessages/AddToMessageTemplate/AddToMessageTemplate.test.tsx

@@ -2,13 +2,13 @@ import { render, fireEvent, cleanup, waitFor } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 
 import { SAVE_MESSAGE_TEMPLATE_MUTATION } from 'graphql/mutations/MessageTemplate';
-import { TEMPLATE_MOCKS } from 'mocks/Template';
+import { filterTemplatesQuery } from 'mocks/Template';
 import AddToMessageTemplate from './AddToMessageTemplate';
 
 let resultReturned = false;
 
 const mocks = [
-  ...TEMPLATE_MOCKS,
+  filterTemplatesQuery('', {}),
   {
     request: {
       query: SAVE_MESSAGE_TEMPLATE_MUTATION,

src/containers/Chat/ChatMessages/ChatInput/ChatInput.test.tsx

@@ -3,7 +3,7 @@ import { render, waitFor, fireEvent, screen } from '@testing-library/react';
 import { vi } from 'vitest';
 
 import ChatInput from './ChatInput';
-import { TEMPLATE_MOCKS } from 'mocks/Template';
+import { filterTemplatesQuery } from 'mocks/Template';
 import {
   createMediaMessageMock,
   getAttachmentPermissionMock,
@@ -17,7 +17,10 @@ const mocks = [
   searchInteractive,
   searchInteractive,
   searchInteractiveHi,
-  ...TEMPLATE_MOCKS,
+  filterTemplatesQuery('', { isHsm: true }),
+  filterTemplatesQuery('', { isHsm: true }),
+  filterTemplatesQuery('hi', { isHsm: true }),
+  filterTemplatesQuery('', { isHsm: false }),
   getAttachmentPermissionMock,
   uploadBlobMock,
   createMediaMessageMock({
@@ -177,12 +180,12 @@ describe('<ChatInput />', () => {
     const interactiveMessages = getAllByTestId('shortcutButton')[2];
     fireEvent.click(interactiveMessages);
     await waitFor(() => {
-      expect(getAllByTestId('templateItem')).toHaveLength(2);
+      expect(getAllByTestId('templateItem')).toHaveLength(3);
     });
     const listItem = getAllByTestId('templateItem')[0];
     fireEvent.click(listItem);
     await waitFor(() => {
-      expect(getAllByText('some description')).toHaveLength(1);
+      expect(getAllByText('description')).toHaveLength(1);
     });
   });
 

src/containers/Chat/ChatMessages/ChatTemplates/ChatTemplates.test.tsx

@@ -1,9 +1,12 @@
 import { MockedProvider } from '@apollo/client/testing';
 import ChatTemplates from './ChatTemplates';
-import { TEMPLATE_MOCKS } from '../../../../mocks/Template';
+import { filterTemplatesQuery } from 'mocks/Template';
 import { render, fireEvent, waitFor } from '@testing-library/react';
 
-const mocks = TEMPLATE_MOCKS;
+const mocks = [
+  filterTemplatesQuery('', { isHsm: true }),
+  filterTemplatesQuery('hi', { isHsm: true }, false),
+];
 
 describe('<ChatTemplates />', () => {
   let defaultProps = {

src/containers/Chat/ChatMessages/TemplateButtons/TemplateButtons.tsx

@@ -31,6 +31,7 @@ export const TemplateButtons = ({
           onClick={() => handleButtonClick(type, value)}
           startIcon={icon}
           disabled={!isSimulator}
+          data-testid="templateButton"
         >
           {title}
         </Button>

src/containers/Form/FormLayout.tsx

@@ -439,7 +439,7 @@ export const FormLayout = ({
       }
     });
     // for template create media for attachment
-    if (isAttachment && payload.type !== 'TEXT' && payload.type) {
+    if (isAttachment && payload.type && payload.type !== 'TEXT') {
       getMediaId(payload)
         .then((data: any) => {
           if (data) {

src/containers/Template/Form/HSM/HSM.module.css

@@ -1,3 +1,94 @@
+.Template {
+  margin: 20px auto;
+  width: 80%;
+  text-align: center;
+  box-shadow: 0 2px 3px #cccccc;
+  border: 1px solid #eeeeee;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+@media (min-width: 600px) {
+  .Template {
+    width: 500px;
+  }
+}
+
+.DeleteIcon {
+  margin-right: 9px !important;
+}
+
+.DialogText {
+  margin-top: 0px;
+  text-align: center;
+  color: #073f24;
+  font-weight: 400;
+}
+
+.DeleteButton {
+  margin-left: auto !important;
+}
+
+.Title {
+  margin-left: 24px !important;
+  margin-top: 16px !important;
+  vertical-align: middle;
+  font-weight: 500 !important;
+  color: #073f24;
+}
+
+.Input {
+  display: flex;
+  padding: 8px;
+}
+
+.Label {
+  width: 50%;
+  align-self: center;
+  font-weight: bold;
+}
+
+.TemplateAdd {
+  width: fit-content;
+}
+
+.Form {
+  padding: 16px 16px;
+  width: 470px;
+}
+
+.Buttons {
+  margin-top: 24px;
+  margin-left: 8px;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.Icon {
+  background-color: #eaedec !important;
+  margin-right: 10px !important;
+}
+
+.ButtonsCenter {
+  justify-content: center !important;
+}
+
+.Button {
+  margin-right: 24px !important;
+}
+
+.Warning {
+  color: #ff0000;
+  margin-left: -43px;
+}
+
+.IsActive {
+  color: #555555;
+  font-weight: 400;
+  line-height: 18px;
+  font-size: 16px;
+}
+
 .TemplateIcon {
   width: 29px;
   height: 29px;

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

@@ -1,18 +1,29 @@
-import { render, waitFor, within, fireEvent, screen } from '@testing-library/react';
+import { render, waitFor, within, fireEvent, screen, cleanup } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 import userEvent from '@testing-library/user-event';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { HSM } from './HSM';
 import {
-  TEMPLATE_MOCKS,
+  HSM_TEMPLATE_MOCKS,
   getHSMTemplateTypeMedia,
   getHSMTemplateTypeText,
-} from 'containers/Template/Template.test.helper';
+} from 'mocks/Template';
+import { setNotification } from 'common/notification';
 
-const mocks = TEMPLATE_MOCKS;
+const mocks = HSM_TEMPLATE_MOCKS;
+
+vi.mock('common/notification', async (importOriginal) => {
+  const mod = await importOriginal<typeof import('common/notification')>();
+  return {
+    ...mod,
+    setNotification: vi.fn((...args) => {
+      return args[1];
+    }),
+  };
+});
 
 beforeEach(() => {
-  vi.restoreAllMocks();
+  cleanup();
 });
 
 vi.mock('lexical-beautiful-mentions', async (importOriginal) => {
@@ -80,6 +91,7 @@ describe('Add mode', () => {
       </MemoryRouter>
     </MockedProvider>
   );
+
   const user = userEvent.setup();
 
   test('check for validations for the HSM form', async () => {
@@ -121,7 +133,6 @@ describe('Add mode', () => {
     const inputs = screen.getAllByRole('textbox');
 
     fireEvent.change(inputs[0], { target: { value: 'element_name' } });
-    fireEvent.change(inputs[1], { target: { value: 'element_name' } });
     const lexicalEditor = inputs[2];
 
     await user.click(lexicalEditor);
@@ -148,8 +159,17 @@ describe('Add mode', () => {
     fireEvent.change(inputs[1], { target: { value: 'element_name' } });
 
     fireEvent.change(screen.getByPlaceholderText('Define value'), { target: { value: 'User' } });
+    fireEvent.change(inputs[1], { target: { value: 'title' } });
+
+    autocompletes[3].focus();
+    fireEvent.keyDown(autocompletes[3], { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Messages'), { key: 'Enter' });
 
     fireEvent.click(screen.getByTestId('submitActionButton'));
+
+    await waitFor(() => {
+      expect(setNotification).toHaveBeenCalled();
+    });
   });
 
   test('it should add and remove variables', async () => {
@@ -177,6 +197,10 @@ describe('Add mode', () => {
     });
 
     fireEvent.click(screen.getAllByTestId('delete-variable')[0]);
+
+    await waitFor(() => {
+      expect(screen.queryByPlaceholderText('Define value ')).not.toBeInTheDocument();
+    });
   });
 
   test('it adds quick reply buttons', async () => {
@@ -225,7 +249,10 @@ describe('Add mode', () => {
     fireEvent.click(screen.getByText('ACCOUNT_UPDATE'), { key: 'Enter' });
 
     fireEvent.click(screen.getByTestId('submitActionButton'));
-    fireEvent.click(screen.getByTestId('submitActionButton'));
+
+    await waitFor(() => {
+      expect(setNotification).toHaveBeenCalled();
+    });
   });
 
   test('it adds call to action buttons', async () => {
@@ -273,7 +300,10 @@ describe('Add mode', () => {
     fireEvent.click(screen.getByText('ACCOUNT_UPDATE'), { key: 'Enter' });
 
     fireEvent.click(screen.getByTestId('submitActionButton'));
-    fireEvent.click(screen.getByTestId('submitActionButton'));
+
+    await waitFor(() => {
+      expect(setNotification).toHaveBeenCalled();
+    });
   });
 
   test('adding attachments', async () => {