Add latest changes from gitlab-org/gitlab@master

4 files changed, 54 insertions, 56 deletions

diff --git a/spec/frontend/integrations/edit/components/dynamic_field_spec.js b/spec/frontend/integrations/edit/components/dynamic_field_spec.js
index b0fb94d2b29..ee2f6541b03 100644
--- a/spec/frontend/integrations/edit/components/dynamic_field_spec.js
+++ b/spec/frontend/integrations/edit/components/dynamic_field_spec.js
@@ -2,22 +2,14 @@ import { GlFormGroup, GlFormCheckbox, GlFormInput, GlFormSelect, GlFormTextarea
 import { mount } from '@vue/test-utils';
 
 import DynamicField from '~/integrations/edit/components/dynamic_field.vue';
+import { mockField } from '../mock_data';
 
 describe('DynamicField', () => {
   let wrapper;
 
-  const defaultProps = {
-    help: 'The URL of the project',
-    name: 'project_url',
-    placeholder: 'https://jira.example.com',
-    title: 'Project URL',
-    type: 'text',
-    value: '1',
-  };
-
   const createComponent = (props, isInheriting = false) => {
     wrapper = mount(DynamicField, {
-      propsData: { ...defaultProps, ...props },
+      propsData: { ...mockField, ...props },
       computed: {
         isInheriting: () => isInheriting,
       },
@@ -61,7 +53,7 @@ describe('DynamicField', () => {
           });
 
           it(`renders GlFormCheckbox with correct text content when checkboxLabel is ${checkboxLabel}`, () => {
-            expect(findGlFormCheckbox().text()).toContain(checkboxLabel ?? defaultProps.title);
+            expect(findGlFormCheckbox().text()).toContain(checkboxLabel ?? mockField.title);
           });
 
           it('does not render other types of input', () => {
@@ -160,7 +152,7 @@ describe('DynamicField', () => {
               type: 'text',
               id: 'service_project_url',
               name: 'service[project_url]',
-              placeholder: defaultProps.placeholder,
+              placeholder: mockField.placeholder,
               required: 'required',
             });
             expect(findGlFormInput().attributes('readonly')).toBe(readonly);
@@ -179,7 +171,7 @@ describe('DynamicField', () => {
       it('renders description with help text', () => {
         createComponent();
 
-        expect(findGlFormGroup().find('small').text()).toBe(defaultProps.help);
+        expect(findGlFormGroup().find('small').text()).toBe(mockField.help);
       });
 
       describe('when type is checkbox', () => {
@@ -189,7 +181,7 @@ describe('DynamicField', () => {
           });
 
           expect(findGlFormGroup().find('small').exists()).toBe(false);
-          expect(findGlFormCheckbox().text()).toContain(defaultProps.help);
+          expect(findGlFormCheckbox().text()).toContain(mockField.help);
         });
       });
 
@@ -221,40 +213,36 @@ describe('DynamicField', () => {
       it('renders label with title', () => {
         createComponent();
 
-        expect(findGlFormGroup().find('label').text()).toBe(defaultProps.title);
+        expect(findGlFormGroup().find('label').text()).toBe(mockField.title);
       });
     });
 
-    describe('validations', () => {
-      describe('password field', () => {
-        beforeEach(() => {
+    describe('password field validations', () => {
+      describe('without value', () => {
+        it('requires validation', () => {
           createComponent({
             type: 'password',
             required: true,
             value: null,
+            isValidated: true,
           });
 
-          wrapper.vm.validated = true;
-        });
-
-        describe('without value', () => {
-          it('requires validation', () => {
-            expect(wrapper.vm.valid).toBe(false);
-            expect(findGlFormGroup().classes('is-invalid')).toBe(true);
-            expect(findGlFormInput().classes('is-invalid')).toBe(true);
-          });
+          expect(findGlFormGroup().classes('is-invalid')).toBe(true);
+          expect(findGlFormInput().classes('is-invalid')).toBe(true);
         });
+      });
 
-        describe('with value', () => {
-          beforeEach(() => {
-            wrapper.setProps({ value: 'true' });
+      describe('with value', () => {
+        it('does not require validation', () => {
+          createComponent({
+            type: 'password',
+            required: true,
+            value: 'test value',
+            isValidated: true,
           });
 
-          it('does not require validation', () => {
-            expect(wrapper.vm.valid).toBe(true);
-            expect(findGlFormGroup().classes('is-valid')).toBe(true);
-            expect(findGlFormInput().classes('is-valid')).toBe(true);
-          });
+          expect(findGlFormGroup().classes('is-valid')).toBe(true);
+          expect(findGlFormInput().classes('is-valid')).toBe(true);
         });
       });
     });
diff --git a/spec/frontend/integrations/edit/components/integration_form_spec.js b/spec/frontend/integrations/edit/components/integration_form_spec.js
index 8cf8a403e5d..2f123508c06 100644
--- a/spec/frontend/integrations/edit/components/integration_form_spec.js
+++ b/spec/frontend/integrations/edit/components/integration_form_spec.js
@@ -17,16 +17,13 @@ import TriggerFields from '~/integrations/edit/components/trigger_fields.vue';
 import {
   integrationLevels,
   I18N_SUCCESSFUL_CONNECTION_MESSAGE,
-  VALIDATE_INTEGRATION_FORM_EVENT,
   I18N_DEFAULT_ERROR_MESSAGE,
 } from '~/integrations/constants';
 import { createStore } from '~/integrations/edit/store';
-import eventHub from '~/integrations/edit/event_hub';
 import httpStatus from '~/lib/utils/http_status';
 import { refreshCurrentPage } from '~/lib/utils/url_utility';
-import { mockIntegrationProps } from '../mock_data';
+import { mockIntegrationProps, mockField } from '../mock_data';
 
-jest.mock('~/integrations/edit/event_hub');
 jest.mock('@sentry/browser');
 jest.mock('~/lib/utils/url_utility');
 
@@ -97,6 +94,7 @@ describe('IntegrationForm', () => {
   const findGlForm = () => wrapper.findComponent(GlForm);
   const findRedirectToField = () => wrapper.findByTestId('redirect-to-field');
   const findFormElement = () => (vueIntegrationFormFeatureFlag ? findGlForm().element : mockForm);
+  const findDynamicField = () => wrapper.findComponent(DynamicField);
 
   const mockFormFunctions = ({ checkValidityReturn }) => {
     jest.spyOn(findFormElement(), 'checkValidity').mockReturnValue(checkValidityReturn);
@@ -490,6 +488,7 @@ describe('IntegrationForm', () => {
                 showActive: true,
                 canTest: true,
                 initialActivated: true,
+                fields: [mockField],
               },
               mountFn: mountExtended,
             });
@@ -510,27 +509,28 @@ describe('IntegrationForm', () => {
             expect(findTestButton().props('disabled')).toBe(false);
           });
 
-          it('emits `VALIDATE_INTEGRATION_FORM_EVENT`', () => {
-            expect(eventHub.$emit).toHaveBeenCalledWith(VALIDATE_INTEGRATION_FORM_EVENT);
+          it('sets `isValidated` props on form fields', () => {
+            expect(findDynamicField().props('isValidated')).toBe(true);
           });
         });
       });
 
       describe('when `test` button is clicked', () => {
         describe('when form is invalid', () => {
-          it('emits `VALIDATE_INTEGRATION_FORM_EVENT` event to the event hub', () => {
+          it('sets `isValidated` props on form fields', async () => {
             createComponent({
               customStateProps: {
                 showActive: true,
                 canTest: true,
+                fields: [mockField],
               },
               mountFn: mountExtended,
             });
             mockFormFunctions({ checkValidityReturn: false });
 
-            findTestButton().vm.$emit('click', new Event('click'));
+            await findTestButton().vm.$emit('click', new Event('click'));
 
-            expect(eventHub.$emit).toHaveBeenCalledWith(VALIDATE_INTEGRATION_FORM_EVENT);
+            expect(findDynamicField().props('isValidated')).toBe(true);
           });
         });
 
diff --git a/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js b/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js
index b5a8eed3598..18afbf25bf0 100644
--- a/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js
+++ b/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js
@@ -1,9 +1,7 @@
 import { GlFormCheckbox, GlFormInput } from '@gitlab/ui';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
-import { VALIDATE_INTEGRATION_FORM_EVENT } from '~/integrations/constants';
 import JiraIssuesFields from '~/integrations/edit/components/jira_issues_fields.vue';
-import eventHub from '~/integrations/edit/event_hub';
 import { createStore } from '~/integrations/edit/store';
 
 describe('JiraIssuesFields', () => {
@@ -222,7 +220,7 @@ describe('JiraIssuesFields', () => {
     });
 
     describe('Project key input field', () => {
-      beforeEach(() => {
+      it('sets Project Key `state` attribute to `true` by default', () => {
         createComponent({
           props: {
             initialProjectKey: '',
@@ -230,29 +228,32 @@ describe('JiraIssuesFields', () => {
           },
           mountFn: shallowMountExtended,
         });
-      });
 
-      it('sets Project Key `state` attribute to `true` by default', () => {
         assertProjectKeyState('true');
       });
 
-      describe('when event hub recieves `VALIDATE_INTEGRATION_FORM_EVENT` event', () => {
+      describe('when `isValidated` prop is true', () => {
+        beforeEach(() => {
+          createComponent({
+            props: {
+              initialProjectKey: '',
+              initialEnableJiraIssues: true,
+              isValidated: true,
+            },
+            mountFn: shallowMountExtended,
+          });
+        });
+
         describe('with no project key', () => {
           it('sets Project Key `state` attribute to `undefined`', async () => {
-            eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT);
-            await wrapper.vm.$nextTick();
-
             assertProjectKeyState(undefined);
           });
         });
 
         describe('when project key is set', () => {
           it('sets Project Key `state` attribute to `true`', async () => {
-            eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT);
-
             // set the project key
             await findProjectKey().vm.$emit('input', 'AB');
-            await wrapper.vm.$nextTick();
 
             assertProjectKeyState('true');
           });
diff --git a/spec/frontend/integrations/edit/mock_data.js b/spec/frontend/integrations/edit/mock_data.js
index 3c45ed0fb1b..39e5f8521e8 100644
--- a/spec/frontend/integrations/edit/mock_data.js
+++ b/spec/frontend/integrations/edit/mock_data.js
@@ -20,3 +20,12 @@ export const mockJiraIssueTypes = [
   { id: '2', name: 'bug', description: 'bug' },
   { id: '3', name: 'epic', description: 'epic' },
 ];
+
+export const mockField = {
+  help: 'The URL of the project',
+  name: 'project_url',
+  placeholder: 'https://jira.example.com',
+  title: 'Project URL',
+  type: 'text',
+  value: '1',
+};