Merge pull request #3072 from glific/fix/forms

Fixed form always being in disabled state

.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 fix/forms
           cd ..
           cp -r cypress-testing/cypress cypress
           yarn add [email protected]

src/components/UI/Form/Button/Button.tsx

@@ -32,7 +32,9 @@ export const Button = ({
       type={type}
     >
       {children}
-      {loading && <CircularProgress size={28} className={styles.buttonProgress} />}
+      {loading && (
+        <CircularProgress data-testid="loadingBtn" size={28} className={styles.buttonProgress} />
+      )}
     </ButtonElement>
   );
 };

src/containers/Flow/Flow.test.tsx

@@ -56,12 +56,33 @@ const mocks = [
     deleteRoleIds: [],
     tag_id: '1',
   }),
-  createFlowQuery,
+  createFlowQuery({
+    isActive: true,
+    isPinned: false,
+    isBackground: false,
+    name: 'New Flow',
+    keywords: ['मदद'],
+    description: '',
+    ignoreKeywords: false,
+    addRoleIds: [],
+    deleteRoleIds: [],
+  }),
   createTagQuery,
   getFlowCountQuery({ isActive: true, isTemplate: false }),
   releaseFlow,
   getFilterTagQuery,
   updateFlowQuery,
+  createFlowQuery({
+    isActive: true,
+    isPinned: false,
+    isBackground: false,
+    name: 'New Flow',
+    keywords: [],
+    description: '',
+    ignoreKeywords: false,
+    addRoleIds: [],
+    deleteRoleIds: [],
+  }),
 ];
 
 const mockUseLocationValue: any = {
@@ -348,3 +369,25 @@ it('should create copy of a template flow', async () => {
   fireEvent.click(button);
   await waitFor(() => {});
 });
+
+it('should show validate the form and show errors', async () => {
+  mockUseLocationValue.state = null;
+  render(flow());
+
+  await waitFor(() => {
+    expect(screen.getByText('Add a new flow')).toBeInTheDocument();
+  });
+
+  fireEvent.click(screen.getByText('Save'));
+
+  await waitFor(() => {
+    expect(screen.getByText('Name is required.')).toBeInTheDocument();
+  });
+
+  fireEvent.change(screen.getAllByRole('textbox')[0], { target: { value: 'New Flow' } });
+  fireEvent.click(screen.getByText('Save'));
+
+  await waitFor(() => {
+    expect(screen.getByTestId('loadingBtn')).toBeInTheDocument();
+  });
+});

src/containers/Form/FormLayout.tsx

@@ -571,8 +571,10 @@ export const FormLayout = ({
               variant="contained"
               color="primary"
               onClick={() => {
-                onSaveButtonClick(formik.errors);
-                formik.submitForm();
+                formik.validateForm().then((errors) => {
+                  onSaveButtonClick(errors);
+                  formik.submitForm();
+                });
               }}
               className={styles.Button}
               data-testid="submitActionButton"

src/mocks/Flow.tsx

@@ -696,39 +696,26 @@ export const copyFlowQuery = (input: any) => {
   };
 };
 
-export const createFlowQuery = {
+export const createFlowQuery = (input: any) => ({
   request: {
     query: CREATE_FLOW,
     variables: {
-      input: {
-        isActive: true,
-        isPinned: false,
-        isBackground: false,
-        name: 'New Flow',
-        keywords: ['मदद'],
-        description: '',
-        ignoreKeywords: false,
-        addRoleIds: [],
-        deleteRoleIds: [],
-      },
+      input,
     },
     result: {
       data: {
         createFlow: {
           errors: null,
           flow: {
-            description: '',
-            id: '4',
-            isActive: true,
-            name: 'New Flow',
+            ...input,
             roles: [],
             uuid: 'c18190b4-5f14-47f3-acfd-c301e5edf3a0',
           },
         },
       },
     },
   },
-};
+});
 
 export const getAllFlowLabelsQuery = {
   request: {