Refactor Jira importer code

Improve code as a result of reviewer comments

app/assets/javascripts/jira_import/components/jira_import_form.vue

@@ -16,9 +16,13 @@ import {
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import axios from '~/lib/utils/axios_utils';
-import { __ } from '~/locale';
-
-const debounceWait = 500;
+import {
+  debounceWait,
+  dropdownLabel,
+  previousImportsMessage,
+  tableConfig,
+  userMappingMessage,
+} from '../utils/constants';
 
 export default {
   name: 'JiraImportForm',
@@ -38,26 +42,10 @@ export default {
     GlTable,
   },
   currentUsername: gon.current_username,
-  dropdownLabel: __('The GitLab user to which the Jira user %{jiraDisplayName} will be mapped'),
-  previousImportsMessage: __(`You have imported from this project %{numberOfPreviousImports} times
-    before. Each new import will create duplicate issues.`),
-  tableConfig: [
-    {
-      key: 'jiraDisplayName',
-      label: __('Jira display name'),
-    },
-    {
-      key: 'arrow',
-      label: '',
-    },
-    {
-      key: 'gitlabUsername',
-      label: __('GitLab username'),
-    },
-  ],
-  userMappingMessage: __(`Jira users have been imported from the configured Jira instance.
-    They can be mapped by selecting a GitLab user from the dropdown in the "GitLab username" column.
-    When the form appears, the dropdown defaults to the user conducting the import.`),
+  dropdownLabel,
+  previousImportsMessage,
+  tableConfig,
+  userMappingMessage,
   props: {
     isSubmitting: {
       type: Boolean,

app/assets/javascripts/jira_import/utils/constants.js

+import { __ } from '~/locale';
+
+export const debounceWait = 500;
+
+export const dropdownLabel = __(
+  'The GitLab user to which the Jira user %{jiraDisplayName} will be mapped',
+);
+
+export const previousImportsMessage = __(`You have imported from this project
+  %{numberOfPreviousImports} times before. Each new import will create duplicate issues.`);
+
+export const tableConfig = [
+  {
+    key: 'jiraDisplayName',
+    label: __('Jira display name'),
+  },
+  {
+    key: 'arrow',
+    label: '',
+  },
+  {
+    key: 'gitlabUsername',
+    label: __('GitLab username'),
+  },
+];
+
+export const userMappingMessage = __(`Jira users have been imported from the configured Jira
+  instance. They can be mapped by selecting a GitLab user from the dropdown in the "GitLab username"
+  column. When the form appears, the dropdown defaults to the user conducting the import.`);

spec/frontend/jira_import/components/jira_import_app_spec.js

@@ -228,18 +228,17 @@ describe('JiraImportApp', () => {
       expect(mutateSpy).toHaveBeenCalledWith(expect.objectContaining(mutationArguments));
     });
 
-    it('shows alert message with error message on error', async () => {
-      const mutate = jest.fn(() => Promise.reject());
+    describe('when there is an error', () => {
+      beforeEach(() => {
+        const mutate = jest.fn(() => Promise.reject());
+        wrapper = mountComponent({ mutate });
 
-      wrapper = mountComponent({ mutate });
-
-      getFormComponent().vm.$emit('initiateJiraImport', 'MTG');
-
-      // One tick doesn't update the dom to the desired state so we have two ticks here
-      await Vue.nextTick();
-      await Vue.nextTick();
+        getFormComponent().vm.$emit('initiateJiraImport', 'MTG');
+      });
 
-      expect(getAlert().text()).toBe('There was an error importing the Jira project.');
+      it('shows alert message with error message', async () => {
+        expect(getAlert().text()).toBe('There was an error importing the Jira project.');
+      });
     });
   });
 
@@ -261,8 +260,8 @@ describe('JiraImportApp', () => {
     });
   });
 
-  describe('on mount', () => {
-    it('makes a GraphQL mutation call to get user mappings', () => {
+  describe('on mount GraphQL user mapping mutation', () => {
+    it('is called with the expected arguments', () => {
       wrapper = mountComponent();
 
       const mutationArguments = {
@@ -277,22 +276,23 @@ describe('JiraImportApp', () => {
       expect(mutateSpy).toHaveBeenCalledWith(expect.objectContaining(mutationArguments));
     });
 
-    it('does not make a GraphQL mutation call to get user mappings when Jira is not configured', () => {
-      wrapper = mountComponent({ isJiraConfigured: false });
+    describe('when Jira is not configured', () => {
+      it('is not called', () => {
+        wrapper = mountComponent({ isJiraConfigured: false });
 
-      expect(mutateSpy).not.toHaveBeenCalled();
+        expect(mutateSpy).not.toHaveBeenCalled();
+      });
     });
 
-    it('shows error message when there is an error with the GraphQL mutation call', async () => {
-      const mutate = jest.fn(() => Promise.reject());
-
-      wrapper = mountComponent({ mutate });
-
-      // One tick doesn't update the dom to the desired state so we have two ticks here
-      await Vue.nextTick();
-      await Vue.nextTick();
+    describe('when there is an error when called', () => {
+      beforeEach(() => {
+        const mutate = jest.fn(() => Promise.reject());
+        wrapper = mountComponent({ mutate });
+      });
 
-      expect(getAlert().exists()).toBe(true);
+      it('shows error message', () => {
+        expect(getAlert().exists()).toBe(true);
+      });
     });
   });
 });