1 files changed, 191 insertions, 16 deletions
diff --git a/spec/frontend/jira_import/components/jira_import_app_spec.js b/spec/frontend/jira_import/components/jira_import_app_spec.js
index fb3ffe1ede3..ce32559d5c9 100644
--- a/spec/frontend/jira_import/components/jira_import_app_spec.js
+++ b/spec/frontend/jira_import/components/jira_import_app_spec.js
@@ -1,38 +1,213 @@
+import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import JiraImportApp from '~/jira_import/components/jira_import_app.vue';
+import JiraImportForm from '~/jira_import/components/jira_import_form.vue';
+import JiraImportProgress from '~/jira_import/components/jira_import_progress.vue';
 import JiraImportSetup from '~/jira_import/components/jira_import_setup.vue';
+import initiateJiraImportMutation from '~/jira_import/queries/initiate_jira_import.mutation.graphql';
+import { IMPORT_STATE } from '~/jira_import/utils';
+
+const mountComponent = ({
+  isJiraConfigured = true,
+  errorMessage = '',
+  showAlert = true,
+  status = IMPORT_STATE.NONE,
+  loading = false,
+  mutate = jest.fn(() => Promise.resolve()),
+} = {}) =>
+  shallowMount(JiraImportApp, {
+    propsData: {
+      isJiraConfigured,
+      inProgressIllustration: 'in-progress-illustration.svg',
+      issuesPath: 'gitlab-org/gitlab-test/-/issues',
+      jiraProjects: [
+        ['My Jira Project', 'MJP'],
+        ['My Second Jira Project', 'MSJP'],
+        ['Migrate to GitLab', 'MTG'],
+      ],
+      projectPath: 'gitlab-org/gitlab-test',
+      setupIllustration: 'setup-illustration.svg',
+    },
+    data() {
+      return {
+        errorMessage,
+        showAlert,
+        jiraImportDetails: {
+          status,
+          import: {
+            jiraProjectKey: 'MTG',
+            scheduledAt: '2020-04-08T12:17:25+00:00',
+            scheduledBy: {
+              name: 'Jane Doe',
+            },
+          },
+        },
+      };
+    },
+    mocks: {
+      $apollo: {
+        loading,
+        mutate,
+      },
+    },
+  });
 
 describe('JiraImportApp', () => {
   let wrapper;
 
+  const getFormComponent = () => wrapper.find(JiraImportForm);
+
+  const getProgressComponent = () => wrapper.find(JiraImportProgress);
+
+  const getSetupComponent = () => wrapper.find(JiraImportSetup);
+
+  const getAlert = () => wrapper.find(GlAlert);
+
+  const getLoadingIcon = () => wrapper.find(GlLoadingIcon);
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
   });
 
-  describe('set up Jira integration page', () => {
+  describe('when Jira integration is not configured', () => {
+    beforeEach(() => {
+      wrapper = mountComponent({ isJiraConfigured: false });
+    });
+
+    it('shows the "Set up Jira integration" screen', () => {
+      expect(getSetupComponent().exists()).toBe(true);
+    });
+
+    it('does not show loading icon', () => {
+      expect(getLoadingIcon().exists()).toBe(false);
+    });
+
+    it('does not show the "Import in progress" screen', () => {
+      expect(getProgressComponent().exists()).toBe(false);
+    });
+
+    it('does not show the "Import Jira project" form', () => {
+      expect(getFormComponent().exists()).toBe(false);
+    });
+  });
+
+  describe('when Jira integration is configured but data is being fetched', () => {
+    beforeEach(() => {
+      wrapper = mountComponent({ loading: true });
+    });
+
+    it('does not show the "Set up Jira integration" screen', () => {
+      expect(getSetupComponent().exists()).toBe(false);
+    });
+
+    it('shows loading icon', () => {
+      expect(getLoadingIcon().exists()).toBe(true);
+    });
+
+    it('does not show the "Import in progress" screen', () => {
+      expect(getProgressComponent().exists()).toBe(false);
+    });
+
+    it('does not show the "Import Jira project" form', () => {
+      expect(getFormComponent().exists()).toBe(false);
+    });
+  });
+
+  describe('when Jira integration is configured but import is in progress', () => {
+    beforeEach(() => {
+      wrapper = mountComponent({ status: IMPORT_STATE.SCHEDULED });
+    });
+
+    it('does not show the "Set up Jira integration" screen', () => {
+      expect(getSetupComponent().exists()).toBe(false);
+    });
+
+    it('does not show loading icon', () => {
+      expect(getLoadingIcon().exists()).toBe(false);
+    });
+
+    it('shows the "Import in progress" screen', () => {
+      expect(getProgressComponent().exists()).toBe(true);
+    });
+
+    it('does not show the "Import Jira project" form', () => {
+      expect(getFormComponent().exists()).toBe(false);
+    });
+  });
+
+  describe('when Jira integration is configured and there is no import in progress', () => {
     beforeEach(() => {
-      wrapper = shallowMount(JiraImportApp, {
-        propsData: {
-          isJiraConfigured: true,
-          projectPath: 'gitlab-org/gitlab-test',
-          setupIllustration: 'illustration.svg',
+      wrapper = mountComponent();
+    });
+
+    it('does not show the "Set up Jira integration" screen', () => {
+      expect(getSetupComponent().exists()).toBe(false);
+    });
+
+    it('does not show loading icon', () => {
+      expect(getLoadingIcon().exists()).toBe(false);
+    });
+
+    it('does not show the Import in progress" screen', () => {
+      expect(getProgressComponent().exists()).toBe(false);
+    });
+
+    it('shows the "Import Jira project" form', () => {
+      expect(getFormComponent().exists()).toBe(true);
+    });
+  });
+
+  describe('initiating a Jira import', () => {
+    it('calls the mutation with the expected arguments', () => {
+      const mutate = jest.fn(() => Promise.resolve());
+
+      wrapper = mountComponent({ mutate });
+
+      const mutationArguments = {
+        mutation: initiateJiraImportMutation,
+        variables: {
+          input: {
+            jiraProjectKey: 'MTG',
+            projectPath: 'gitlab-org/gitlab-test',
+          },
         },
-      });
+      };
+
+      getFormComponent().vm.$emit('initiateJiraImport', 'MTG');
+
+      expect(mutate).toHaveBeenCalledWith(expect.objectContaining(mutationArguments));
     });
 
-    it('is shown when Jira integration is not configured', () => {
-      wrapper.setProps({
-        isJiraConfigured: false,
-      });
+    it('shows alert message with error message on error', () => {
+      const mutate = jest.fn(() => Promise.reject());
+
+      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
+      return Vue.nextTick()
+        .then(Vue.nextTick)
+        .then(() => {
+          expect(getAlert().text()).toBe('There was an error importing the Jira project.');
+        });
+    });
+  });
 
-      return wrapper.vm.$nextTick(() => {
-        expect(wrapper.find(JiraImportSetup).exists()).toBe(true);
-      });
+  it('can dismiss alert message', () => {
+    wrapper = mountComponent({
+      errorMessage: 'There was an error importing the Jira project.',
+      showAlert: true,
     });
 
-    it('is not shown when Jira integration is configured', () => {
-      expect(wrapper.find(JiraImportSetup).exists()).toBe(false);
+    expect(getAlert().exists()).toBe(true);
+
+    getAlert().vm.$emit('dismiss');
+
+    return Vue.nextTick().then(() => {
+      expect(getAlert().exists()).toBe(false);
     });
   });
 });