From ed84efe550432df8ab6b4eaf0f9a417c312a36bf Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Fri, 6 Sep 2024 16:06:17 +0530 Subject: [PATCH 1/5] Fixed form disabled state --- src/components/UI/Form/Button/Button.tsx | 4 ++- src/containers/Flow/Flow.test.tsx | 45 +++++++++++++++++++++++- src/containers/Form/FormLayout.tsx | 6 ++-- src/mocks/Flow.tsx | 21 +++-------- 4 files changed, 55 insertions(+), 21 deletions(-) diff --git a/src/components/UI/Form/Button/Button.tsx b/src/components/UI/Form/Button/Button.tsx index 272e5c2de..cbb1be45a 100644 --- a/src/components/UI/Form/Button/Button.tsx +++ b/src/components/UI/Form/Button/Button.tsx @@ -32,7 +32,9 @@ export const Button = ({ type={type} > {children} - {loading && } + {loading && ( + + )} ); }; diff --git a/src/containers/Flow/Flow.test.tsx b/src/containers/Flow/Flow.test.tsx index edf9d67ed..7ef979b86 100644 --- a/src/containers/Flow/Flow.test.tsx +++ b/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(); + }); +}); diff --git a/src/containers/Form/FormLayout.tsx b/src/containers/Form/FormLayout.tsx index bb3b2769a..c33e563fb 100644 --- a/src/containers/Form/FormLayout.tsx +++ b/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" diff --git a/src/mocks/Flow.tsx b/src/mocks/Flow.tsx index 8a6e80846..22009b7ac 100644 --- a/src/mocks/Flow.tsx +++ b/src/mocks/Flow.tsx @@ -696,31 +696,18 @@ 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', }, @@ -728,7 +715,7 @@ export const createFlowQuery = { }, }, }, -}; +}); export const getAllFlowLabelsQuery = { request: { From 2ca677dbbc98c2dc6a817f2b9eca925221c3211a Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Fri, 6 Sep 2024 16:08:28 +0530 Subject: [PATCH 2/5] updated cypress branch --- .github/workflows/cypress-testing.yml | 2 +- src/containers/Flow/Flow.test.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/cypress-testing.yml b/.github/workflows/cypress-testing.yml index b85dce6a0..1dd5ab6cd 100644 --- a/.github/workflows/cypress-testing.yml +++ b/.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 cypress@13.6.2 diff --git a/src/containers/Flow/Flow.test.tsx b/src/containers/Flow/Flow.test.tsx index 7ef979b86..fb8503702 100644 --- a/src/containers/Flow/Flow.test.tsx +++ b/src/containers/Flow/Flow.test.tsx @@ -372,8 +372,8 @@ it('should create copy of a template flow', async () => { 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(); }); From 60332c37fa438eea7f6b4f7299ad73d74ff2f323 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Mon, 9 Sep 2024 21:47:58 +0530 Subject: [PATCH 3/5] refactored --- src/containers/Form/FormLayout.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/containers/Form/FormLayout.tsx b/src/containers/Form/FormLayout.tsx index c33e563fb..c4cbd8536 100644 --- a/src/containers/Form/FormLayout.tsx +++ b/src/containers/Form/FormLayout.tsx @@ -571,14 +571,12 @@ export const FormLayout = ({ variant="contained" color="primary" onClick={() => { - formik.validateForm().then((errors) => { - onSaveButtonClick(errors); - formik.submitForm(); - }); + onSaveButtonClick(formik.errors); + formik.submitForm(); }} className={styles.Button} data-testid="submitActionButton" - loading={saveClick} + loading={formik.isSubmitting || formik.isValidating} disabled={buttonState.status} > {buttonState.status ? buttonState.text : button} From 025afe9bea9c70135c884a523c79bfb64d9f9783 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Tue, 10 Sep 2024 17:12:17 +0530 Subject: [PATCH 4/5] reverted to older logic --- src/containers/Form/FormLayout.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/containers/Form/FormLayout.tsx b/src/containers/Form/FormLayout.tsx index c4cbd8536..85b8729b4 100644 --- a/src/containers/Form/FormLayout.tsx +++ b/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" From 4da564e63e715d34b828889e6f686ca5ccca0e78 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Tue, 10 Sep 2024 17:33:34 +0530 Subject: [PATCH 5/5] reverted to older logic --- src/containers/Form/FormLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/Form/FormLayout.tsx b/src/containers/Form/FormLayout.tsx index 85b8729b4..c33e563fb 100644 --- a/src/containers/Form/FormLayout.tsx +++ b/src/containers/Form/FormLayout.tsx @@ -578,7 +578,7 @@ export const FormLayout = ({ }} className={styles.Button} data-testid="submitActionButton" - loading={formik.isSubmitting || formik.isValidating} + loading={saveClick} disabled={buttonState.status} > {buttonState.status ? buttonState.text : button}