Add latest changes from gitlab-org/gitlab@13-2-stable-ee

1 files changed, 109 insertions, 70 deletions

diff --git a/spec/frontend/jira_import/components/jira_import_form_spec.js b/spec/frontend/jira_import/components/jira_import_form_spec.js
index dea94e7bf1f..685b0288e92 100644
--- a/spec/frontend/jira_import/components/jira_import_form_spec.js
+++ b/spec/frontend/jira_import/components/jira_import_form_spec.js
@@ -1,44 +1,51 @@
-import { GlAvatar, GlButton, GlFormSelect, GlLabel } from '@gitlab/ui';
+import { GlButton, GlFormSelect, GlLabel, GlTable } from '@gitlab/ui';
+import { getByRole } from '@testing-library/dom';
 import { mount, shallowMount } from '@vue/test-utils';
+import AxiosMockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import JiraImportForm from '~/jira_import/components/jira_import_form.vue';
-
-const importLabel = 'jira-import::MTG-1';
-const value = 'MTG';
-
-const mountComponent = ({ mountType } = {}) => {
-  const mountFunction = mountType === 'mount' ? mount : shallowMount;
-
-  return mountFunction(JiraImportForm, {
-    propsData: {
-      importLabel,
-      issuesPath: 'gitlab-org/gitlab-test/-/issues',
-      jiraProjects: [
-        {
-          text: 'My Jira Project',
-          value: 'MJP',
-        },
-        {
-          text: 'My Second Jira Project',
-          value: 'MSJP',
-        },
-        {
-          text: 'Migrate to GitLab',
-          value: 'MTG',
-        },
-      ],
-      value,
-    },
-  });
-};
+import { issuesPath, jiraProjects, userMappings } from '../mock_data';
 
 describe('JiraImportForm', () => {
+  let axiosMock;
   let wrapper;
 
+  const currentUsername = 'mrgitlab';
+  const importLabel = 'jira-import::MTG-1';
+  const value = 'MTG';
+
   const getSelectDropdown = () => wrapper.find(GlFormSelect);
 
   const getCancelButton = () => wrapper.findAll(GlButton).at(1);
 
+  const getHeader = name => getByRole(wrapper.element, 'columnheader', { name });
+
+  const mountComponent = ({ isSubmitting = false, mountFunction = shallowMount } = {}) =>
+    mountFunction(JiraImportForm, {
+      propsData: {
+        importLabel,
+        isSubmitting,
+        issuesPath,
+        jiraProjects,
+        projectId: '5',
+        userMappings,
+        value,
+      },
+      data: () => ({
+        isFetching: false,
+        searchTerm: '',
+        selectState: null,
+        users: [],
+      }),
+      currentUsername,
+    });
+
+  beforeEach(() => {
+    axiosMock = new AxiosMockAdapter(axios);
+  });
+
   afterEach(() => {
+    axiosMock.restore();
     wrapper.destroy();
     wrapper = null;
   });
@@ -51,16 +58,22 @@ describe('JiraImportForm', () => {
     });
 
     it('contains a list of Jira projects to select from', () => {
-      wrapper = mountComponent({ mountType: 'mount' });
-
-      const optionItems = ['My Jira Project', 'My Second Jira Project', 'Migrate to GitLab'];
+      wrapper = mountComponent({ mountFunction: mount });
 
       getSelectDropdown()
         .findAll('option')
         .wrappers.forEach((optionEl, index) => {
-          expect(optionEl.text()).toBe(optionItems[index]);
+          expect(optionEl.text()).toBe(jiraProjects[index].text);
         });
     });
+
+    it('emits an "input" event when the input select value changes', () => {
+      wrapper = mountComponent();
+
+      getSelectDropdown().vm.$emit('change', value);
+
+      expect(wrapper.emitted('input')[0]).toEqual([value]);
+    });
   });
 
   describe('form information', () => {
@@ -72,64 +85,90 @@ describe('JiraImportForm', () => {
       expect(wrapper.find(GlLabel).props('title')).toBe(importLabel);
     });
 
+    it('shows a heading for the user mapping section', () => {
+      expect(
+        getByRole(wrapper.element, 'heading', { name: 'Jira-GitLab user mapping template' }),
+      ).toBeTruthy();
+    });
+
     it('shows information to the user', () => {
       expect(wrapper.find('p').text()).toBe(
-        "For each Jira issue successfully imported, we'll create a new GitLab issue with the following data:",
+        'Jira users have been matched with similar GitLab users. This can be overwritten by selecting a GitLab user from the dropdown in the "GitLab username" column. If it wasn\'t possible to match a Jira user with a GitLab user, the dropdown defaults to the user conducting the import.',
       );
     });
+  });
 
-    it('shows jira.issue.summary for the Title', () => {
-      expect(wrapper.find('[id="jira-project-title"]').text()).toBe('jira.issue.summary');
-    });
+  describe('table', () => {
+    describe('headers', () => {
+      beforeEach(() => {
+        wrapper = mountComponent({ mountFunction: mount });
+      });
 
-    it('shows an avatar for the Reporter', () => {
-      expect(wrapper.contains(GlAvatar)).toBe(true);
-    });
+      it('has a "Jira display name" column', () => {
+        expect(getHeader('Jira display name')).toBeTruthy();
+      });
 
-    it('shows jira.issue.description.content for the Description', () => {
-      expect(wrapper.find('[id="jira-project-description"]').text()).toBe(
-        'jira.issue.description.content',
-      );
-    });
-  });
+      it('has an "arrow" column', () => {
+        expect(getHeader('Arrow')).toBeTruthy();
+      });
 
-  describe('Next button', () => {
-    beforeEach(() => {
-      wrapper = mountComponent();
+      it('has a "GitLab username" column', () => {
+        expect(getHeader('GitLab username')).toBeTruthy();
+      });
     });
 
-    it('is shown', () => {
-      expect(wrapper.find(GlButton).text()).toBe('Next');
+    describe('body', () => {
+      it('shows all user mappings', () => {
+        wrapper = mountComponent({ mountFunction: mount });
+
+        expect(wrapper.find(GlTable).findAll('tbody tr').length).toBe(userMappings.length);
+      });
+
+      it('shows correct information in each cell', () => {
+        wrapper = mountComponent({ mountFunction: mount });
+
+        expect(wrapper.find(GlTable).element).toMatchSnapshot();
+      });
     });
   });
 
-  describe('Cancel button', () => {
-    beforeEach(() => {
-      wrapper = mountComponent();
-    });
+  describe('buttons', () => {
+    describe('"Continue" button', () => {
+      it('is shown', () => {
+        wrapper = mountComponent();
 
-    it('is shown', () => {
-      expect(getCancelButton().text()).toBe('Cancel');
-    });
+        expect(wrapper.find(GlButton).text()).toBe('Continue');
+      });
+
+      it('is in loading state when the form is submitting', async () => {
+        wrapper = mountComponent({ isSubmitting: true });
 
-    it('links to the Issues page', () => {
-      expect(getCancelButton().attributes('href')).toBe('gitlab-org/gitlab-test/-/issues');
+        expect(wrapper.find(GlButton).props('loading')).toBe(true);
+      });
     });
-  });
 
-  it('emits an "input" event when the input select value changes', () => {
-    wrapper = mountComponent({ mountType: 'mount' });
+    describe('"Cancel" button', () => {
+      beforeEach(() => {
+        wrapper = mountComponent();
+      });
 
-    getSelectDropdown().vm.$emit('change', value);
+      it('is shown', () => {
+        expect(getCancelButton().text()).toBe('Cancel');
+      });
 
-    expect(wrapper.emitted('input')[0]).toEqual([value]);
+      it('links to the Issues page', () => {
+        expect(getCancelButton().attributes('href')).toBe(issuesPath);
+      });
+    });
   });
 
-  it('emits an "initiateJiraImport" event with the selected dropdown value when submitted', () => {
-    wrapper = mountComponent();
+  describe('form', () => {
+    it('emits an "initiateJiraImport" event with the selected dropdown value when submitted', () => {
+      wrapper = mountComponent();
 
-    wrapper.find('form').trigger('submit');
+      wrapper.find('form').trigger('submit');
 
-    expect(wrapper.emitted('initiateJiraImport')[0]).toEqual([value]);
+      expect(wrapper.emitted('initiateJiraImport')[0]).toEqual([value]);
+    });
   });
 });