Add specs for Jira project key functionality

- Also moves strings to i18n object in jira_issue_fields.vue

app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue

@@ -5,6 +5,7 @@ import {
   VALIDATE_INTEGRATION_FORM_EVENT,
   GET_JIRA_ISSUE_TYPES_EVENT,
 } from '~/integrations/constants';
+import { s__, __ } from '~/locale';
 import eventHub from '../event_hub';
 import JiraUpgradeCta from './jira_upgrade_cta.vue';
 
@@ -94,33 +95,38 @@ export default {
       eventHub.$emit(GET_JIRA_ISSUE_TYPES_EVENT);
     },
   },
+  i18n: {
+    sectionTitle: s__('JiraService|View Jira issues in GitLab'),
+    sectionDescription: s__(
+      'JiraService|Work on Jira issues without leaving GitLab. Adds a Jira menu to access your list of Jira issues and view any issue as read-only.',
+    ),
+    enableCheckboxLabel: s__('JiraService|Enable Jira issues'),
+    enableCheckboxHelp: s__(
+      'JiraService|Warning: All GitLab users that have access to this GitLab project are able to view all issues from the Jira project specified below.',
+    ),
+    projectKeyLabel: s__('JiraService|Jira project key'),
+    projectKeyPlaceholder: s__('JiraService|For example, AB'),
+    requiredFieldFeedback: __('This field is required.'),
+    issueTrackerConflictWarning: s__(
+      'JiraService|Displaying Jira issues while leaving the GitLab issue functionality enabled might be confusing. Consider %{linkStart}disabling GitLab issues%{linkEnd} if they won’t otherwise be used.',
+    ),
+  },
 };
 </script>
 
 <template>
   <div>
-    <gl-form-group
-      :label="s__('JiraService|View Jira issues in GitLab')"
-      label-for="jira-issue-settings"
-    >
+    <gl-form-group :label="$options.i18n.sectionTitle" label-for="jira-issue-settings">
       <div id="jira-issue-settings">
         <p>
-          {{
-            s__(
-              'JiraService|Work on Jira issues without leaving GitLab. Adds a Jira menu to access your list of Jira issues and view any issue as read-only.',
-            )
-          }}
+          {{ $options.i18n.sectionDescription }}
         </p>
         <template v-if="showJiraIssuesIntegration">
           <input name="service[issues_enabled]" type="hidden" :value="enableJiraIssues || false" />
           <gl-form-checkbox v-model="enableJiraIssues" :disabled="isInheriting">
-            {{ s__('JiraService|Enable Jira issues') }}
+            {{ $options.i18n.enableCheckboxLabel }}
             <template #help>
-              {{
-                s__(
-                  'JiraService|Warning: All GitLab users that have access to this GitLab project are able to view all issues from the Jira project specified below.',
-                )
-              }}
+              {{ $options.i18n.enableCheckboxHelp }}
             </template>
           </gl-form-checkbox>
           <template v-if="enableJiraIssues">
@@ -152,30 +158,25 @@ export default {
     </gl-form-group>
     <template v-if="showJiraIssuesIntegration">
       <gl-form-group
-        :label="s__('JiraService|Jira project key')"
+        :label="$options.i18n.projectKeyLabel"
         label-for="service_project_key"
-        :invalid-feedback="__('This field is required.')"
+        :invalid-feedback="$options.i18n.requiredFieldFeedback"
         :state="validProjectKey"
+        data-testid="project-key-form-group"
       >
         <gl-form-input
           id="service_project_key"
           v-model="projectKey"
           name="service[project_key]"
-          :placeholder="s__('JiraService|For example, AB')"
+          :placeholder="$options.i18n.projectKeyPlaceholder"
           :required="enableJiraIssues"
           :state="validProjectKey"
           :disabled="!enableJiraIssues"
           :readonly="isInheriting"
         />
       </gl-form-group>
-      <p v-if="gitlabIssuesEnabled">
-        <gl-sprintf
-          :message="
-            s__(
-              'JiraService|Displaying Jira issues while leaving the GitLab issue functionality enabled might be confusing. Consider %{linkStart}disabling GitLab issues%{linkEnd} if they won’t otherwise be used.',
-            )
-          "
-        >
+      <p v-if="gitlabIssuesEnabled" data-testid="conflict-warning-text">
+        <gl-sprintf :message="$options.i18n.issueTrackerConflictWarning">
           <template #link="{ content }">
             <gl-link :href="editProjectPath" target="_blank">{{ content }}</gl-link>
           </template>

spec/frontend/integrations/edit/components/jira_issues_fields_spec.js

 import { GlFormCheckbox, GlFormInput } from '@gitlab/ui';
-import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
-import { GET_JIRA_ISSUE_TYPES_EVENT } from '~/integrations/constants';
+import {
+  GET_JIRA_ISSUE_TYPES_EVENT,
+  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';
@@ -17,12 +20,17 @@ describe('JiraIssuesFields', () => {
     upgradePlanPath: 'https://gitlab.com',
   };
 
-  const createComponent = ({ isInheriting = false, props, ...options } = {}) => {
+  const createComponent = ({
+    isInheriting = false,
+    mountFn = mountExtended,
+    props,
+    ...options
+  } = {}) => {
     store = createStore({
       defaultState: isInheriting ? {} : undefined,
     });
 
-    wrapper = mountExtended(JiraIssuesFields, {
+    wrapper = mountFn(JiraIssuesFields, {
       propsData: { ...defaultProps, ...props },
       store,
       stubs: ['jira-issue-creation-vulnerabilities'],
@@ -38,12 +46,19 @@ describe('JiraIssuesFields', () => {
   const findEnableCheckboxDisabled = () =>
     findEnableCheckbox().find('[type=checkbox]').attributes('disabled');
   const findProjectKey = () => wrapper.findComponent(GlFormInput);
+  const findProjectKeyFormGroup = () => wrapper.findByTestId('project-key-form-group');
   const findPremiumUpgradeCTA = () => wrapper.findByTestId('premium-upgrade-cta');
   const findUltimateUpgradeCTA = () => wrapper.findByTestId('ultimate-upgrade-cta');
   const findJiraForVulnerabilities = () => wrapper.findByTestId('jira-for-vulnerabilities');
+  const findConflictWarning = () => wrapper.findByTestId('conflict-warning-text');
   const setEnableCheckbox = async (isEnabled = true) =>
     findEnableCheckbox().vm.$emit('input', isEnabled);
 
+  const assertProjectKeyState = (expectedStateValue) => {
+    expect(findProjectKey().attributes('state')).toBe(expectedStateValue);
+    expect(findProjectKeyFormGroup().attributes('state')).toBe(expectedStateValue);
+  };
+
   describe('template', () => {
     describe.each`
       showJiraIssuesIntegration | showJiraVulnerabilitiesIntegration
@@ -151,19 +166,18 @@ describe('JiraIssuesFields', () => {
     });
 
     describe('GitLab issues warning', () => {
-      const expectedText = 'Consider disabling GitLab issues';
-
-      it('contains warning when GitLab issues is enabled', () => {
-        createComponent();
-
-        expect(wrapper.text()).toContain(expectedText);
-      });
-
-      it('does not contain warning when GitLab issues is disabled', () => {
-        createComponent({ props: { gitlabIssuesEnabled: false } });
-
-        expect(wrapper.text()).not.toContain(expectedText);
-      });
+      it.each`
+        gitlabIssuesEnabled | scenario
+        ${true}             | ${'displays conflict warning'}
+        ${false}            | ${'does not display conflict warning'}
+      `(
+        '$scenario when `gitlabIssuesEnabled` is `$gitlabIssuesEnabled`',
+        ({ gitlabIssuesEnabled }) => {
+          createComponent({ props: { gitlabIssuesEnabled } });
+
+          expect(findConflictWarning().exists()).toBe(gitlabIssuesEnabled);
+        },
+      );
     });
 
     describe('Vulnerabilities creation', () => {
@@ -211,5 +225,44 @@ describe('JiraIssuesFields', () => {
         expect(eventHubEmitSpy).toHaveBeenCalledWith(GET_JIRA_ISSUE_TYPES_EVENT);
       });
     });
+
+    describe('Project key input field', () => {
+      beforeEach(() => {
+        createComponent({
+          props: {
+            initialProjectKey: '',
+            initialEnableJiraIssues: true,
+          },
+          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('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');
+          });
+        });
+      });
+    });
   });
 });