Add latest changes from gitlab-org/gitlab@master

3 files changed, 203 insertions, 2 deletions

diff --git a/spec/frontend/integrations/edit/components/jira_auth_fields_spec.js b/spec/frontend/integrations/edit/components/jira_auth_fields_spec.js
new file mode 100644
index 00000000000..dcae2ceeeaa
--- /dev/null
+++ b/spec/frontend/integrations/edit/components/jira_auth_fields_spec.js
@@ -0,0 +1,142 @@
+import { GlFormRadio, GlFormRadioGroup } from '@gitlab/ui';
+import { nextTick } from 'vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
+import JiraAuthFields from '~/integrations/edit/components/jira_auth_fields.vue';
+import { jiraAuthTypeFieldProps } from '~/integrations/constants';
+import { createStore } from '~/integrations/edit/store';
+
+import { mockJiraAuthFields } from '../mock_data';
+
+describe('JiraAuthFields', () => {
+  let wrapper;
+
+  const defaultProps = {
+    fields: mockJiraAuthFields,
+  };
+
+  const createComponent = ({ props } = {}) => {
+    const store = createStore();
+
+    wrapper = shallowMountExtended(JiraAuthFields, {
+      propsData: { ...defaultProps, ...props },
+      store,
+    });
+  };
+
+  const findAuthTypeRadio = () => wrapper.findComponent(GlFormRadioGroup);
+  const findAuthTypeOptions = () => wrapper.findAllComponents(GlFormRadio);
+  const findUsernameField = () => wrapper.findByTestId('jira-auth-username');
+  const findPasswordField = () => wrapper.findByTestId('jira-auth-password');
+
+  const selectRadioOption = (index) => findAuthTypeRadio().vm.$emit('input', index);
+
+  describe('template', () => {
+    const mockFieldsWithPasswordValue = [
+      mockJiraAuthFields[0],
+      mockJiraAuthFields[1],
+      {
+        ...mockJiraAuthFields[2],
+        value: 'hidden',
+      },
+    ];
+
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders auth type as radio buttons with correct options', () => {
+      expect(findAuthTypeRadio().exists()).toBe(true);
+
+      findAuthTypeOptions().wrappers.forEach((option, index) => {
+        expect(option.text()).toBe(JiraAuthFields.authTypeOptions[index].text);
+      });
+    });
+
+    it('selects "Basic" authentication by default', () => {
+      expect(findAuthTypeRadio().attributes('checked')).toBe('0');
+    });
+
+    it('selects correct authentication when passed from backend', async () => {
+      createComponent({
+        props: {
+          fields: [
+            {
+              ...mockJiraAuthFields[0],
+              value: 1,
+            },
+            mockJiraAuthFields[1],
+            mockJiraAuthFields[2],
+          ],
+        },
+      });
+      await nextTick();
+
+      expect(findAuthTypeRadio().attributes('checked')).toBe('1');
+    });
+
+    describe('when "Basic" authentication is selected', () => {
+      it('renders username field as required', () => {
+        expect(findUsernameField().exists()).toBe(true);
+        expect(findUsernameField().props()).toMatchObject({
+          title: jiraAuthTypeFieldProps[0].username,
+          required: true,
+        });
+      });
+
+      it('renders password field with help', () => {
+        expect(findPasswordField().exists()).toBe(true);
+        expect(findPasswordField().props()).toMatchObject({
+          title: jiraAuthTypeFieldProps[0].password,
+          help: jiraAuthTypeFieldProps[0].passwordHelp,
+        });
+      });
+
+      it('renders new password title when value is present', () => {
+        createComponent({
+          props: {
+            fields: mockFieldsWithPasswordValue,
+          },
+        });
+
+        expect(findPasswordField().props('title')).toBe(jiraAuthTypeFieldProps[0].nonEmptyPassword);
+      });
+    });
+
+    describe('when "Jira personal access token" authentication is selected', () => {
+      beforeEach(() => {
+        createComponent();
+
+        selectRadioOption(1);
+      });
+
+      it('selects "Jira personal access token" authentication', () => {
+        expect(findAuthTypeRadio().attributes('checked')).toBe('1');
+      });
+
+      it('does not render username field', () => {
+        expect(findUsernameField().exists()).toBe(false);
+      });
+
+      it('renders password field without help', () => {
+        expect(findPasswordField().exists()).toBe(true);
+        expect(findPasswordField().props()).toMatchObject({
+          title: jiraAuthTypeFieldProps[1].password,
+          help: null,
+        });
+      });
+
+      it('renders new password title when value is present', async () => {
+        createComponent({
+          props: {
+            fields: mockFieldsWithPasswordValue,
+          },
+        });
+
+        await selectRadioOption(1);
+
+        expect(findPasswordField().props('title')).toBe(jiraAuthTypeFieldProps[1].nonEmptyPassword);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/integrations/edit/components/sections/connection_spec.js b/spec/frontend/integrations/edit/components/sections/connection_spec.js
index a24253d542d..7bd08a15ec1 100644
--- a/spec/frontend/integrations/edit/components/sections/connection_spec.js
+++ b/spec/frontend/integrations/edit/components/sections/connection_spec.js
@@ -1,15 +1,21 @@
 import { shallowMount } from '@vue/test-utils';
+import { stubComponent } from 'helpers/stub_component';
 
 import IntegrationSectionConnection from '~/integrations/edit/components/sections/connection.vue';
 import ActiveCheckbox from '~/integrations/edit/components/active_checkbox.vue';
 import DynamicField from '~/integrations/edit/components/dynamic_field.vue';
+import JiraAuthFields from '~/integrations/edit/components/jira_auth_fields.vue';
 import { createStore } from '~/integrations/edit/store';
 
-import { mockIntegrationProps } from '../../mock_data';
+import { mockIntegrationProps, mockJiraAuthFields, mockField } from '../../mock_data';
 
 describe('IntegrationSectionConnection', () => {
   let wrapper;
 
+  const JiraAuthFieldsStub = stubComponent(JiraAuthFields, {
+    template: `<div />`,
+  });
+
   const createComponent = ({ customStateProps = {}, props = {} } = {}) => {
     const store = createStore({
       customState: { ...mockIntegrationProps, ...customStateProps },
@@ -17,11 +23,15 @@ describe('IntegrationSectionConnection', () => {
     wrapper = shallowMount(IntegrationSectionConnection, {
       propsData: { ...props },
       store,
+      stubs: {
+        JiraAuthFields: JiraAuthFieldsStub,
+      },
     });
   };
 
   const findActiveCheckbox = () => wrapper.findComponent(ActiveCheckbox);
   const findAllDynamicFields = () => wrapper.findAllComponents(DynamicField);
+  const findJiraAuthFields = () => wrapper.findComponent(JiraAuthFields);
 
   describe('template', () => {
     describe('ActiveCheckbox', () => {
@@ -63,11 +73,42 @@ describe('IntegrationSectionConnection', () => {
         });
       });
 
-      it('does not render DynamicField when field is empty', () => {
+      it('does not render DynamicField when fields is empty', () => {
         createComponent();
 
         expect(findAllDynamicFields()).toHaveLength(0);
       });
     });
+
+    describe('when integration is not Jira', () => {
+      it('does not render JiraAuthFields', () => {
+        createComponent();
+
+        expect(findJiraAuthFields().exists()).toBe(false);
+      });
+    });
+
+    describe('when integration is Jira', () => {
+      beforeEach(() => {
+        createComponent({
+          customStateProps: {
+            type: 'jira',
+          },
+          props: {
+            fields: [mockField, ...mockJiraAuthFields],
+          },
+        });
+      });
+
+      it('renders JiraAuthFields', () => {
+        expect(findJiraAuthFields().exists()).toBe(true);
+        expect(findJiraAuthFields().props('fields')).toEqual(mockJiraAuthFields);
+      });
+
+      it('filters out Jira auth fields for DynamicField', () => {
+        expect(findAllDynamicFields()).toHaveLength(1);
+        expect(findAllDynamicFields().at(0).props('name')).toBe(mockField.name);
+      });
+    });
   });
 });
diff --git a/spec/frontend/integrations/edit/mock_data.js b/spec/frontend/integrations/edit/mock_data.js
index c276d2e7364..31526eddd36 100644
--- a/spec/frontend/integrations/edit/mock_data.js
+++ b/spec/frontend/integrations/edit/mock_data.js
@@ -26,6 +26,24 @@ export const mockJiraIssueTypes = [
   { id: '3', name: 'epic', description: 'epic' },
 ];
 
+export const mockJiraAuthFields = [
+  {
+    name: 'jira_auth_type',
+    type: 'select',
+    title: 'Authentication type',
+  },
+  {
+    name: 'username',
+    type: 'text',
+    help: 'Email for Jira Cloud or username for Jira Data Center and Jira Server',
+  },
+  {
+    name: 'password',
+    type: 'password',
+    help: 'API token for Jira Cloud or password for Jira Data Center and Jira Server',
+  },
+];
+
 export const mockField = {
   help: 'The URL of the project',
   name: 'project_url',