Move import projects karma specs to jest

Improvements to the stability/validity of the specs.

4 files changed, 631 insertions, 0 deletions

diff --git a/spec/frontend/import_projects/components/import_projects_table_spec.js b/spec/frontend/import_projects/components/import_projects_table_spec.js
new file mode 100644
index 00000000000..17a998d0174
--- /dev/null
+++ b/spec/frontend/import_projects/components/import_projects_table_spec.js
@@ -0,0 +1,185 @@
+import Vuex from 'vuex';
+import { createLocalVue, mount } from '@vue/test-utils';
+import { state, actions, getters, mutations } from '~/import_projects/store';
+import importProjectsTable from '~/import_projects/components/import_projects_table.vue';
+import STATUS_MAP from '~/import_projects/constants';
+
+describe('ImportProjectsTable', () => {
+  let vm;
+  const providerTitle = 'THE PROVIDER';
+  const providerRepo = { id: 10, sanitizedName: 'sanitizedName', fullName: 'fullName' };
+  const importedProject = {
+    id: 1,
+    fullPath: 'fullPath',
+    importStatus: 'started',
+    providerLink: 'providerLink',
+    importSource: 'importSource',
+  };
+
+  function initStore() {
+    const stubbedActions = Object.assign({}, actions, {
+      fetchJobs: jest.fn(),
+      fetchRepos: jest.fn(actions.requestRepos),
+      fetchImport: jest.fn(actions.requestImport),
+    });
+
+    const store = new Vuex.Store({
+      state: state(),
+      actions: stubbedActions,
+      mutations,
+      getters,
+    });
+
+    return store;
+  }
+
+  function mountComponent() {
+    const localVue = createLocalVue();
+    localVue.use(Vuex);
+
+    const store = initStore();
+
+    const component = mount(importProjectsTable, {
+      localVue,
+      store,
+      propsData: {
+        providerTitle,
+      },
+      sync: false,
+    });
+
+    return component.vm;
+  }
+
+  beforeEach(() => {
+    vm = mountComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders a loading icon whilst repos are loading', () =>
+    vm.$nextTick().then(() => {
+      expect(vm.$el.querySelector('.js-loading-button-icon')).not.toBeNull();
+    }));
+
+  it('renders a table with imported projects and provider repos', () => {
+    vm.$store.dispatch('receiveReposSuccess', {
+      importedProjects: [importedProject],
+      providerRepos: [providerRepo],
+      namespaces: [{ path: 'path' }],
+    });
+
+    return vm.$nextTick().then(() => {
+      expect(vm.$el.querySelector('.js-loading-button-icon')).toBeNull();
+      expect(vm.$el.querySelector('.table')).not.toBeNull();
+      expect(vm.$el.querySelector('.import-jobs-from-col').innerText).toMatch(
+        `From ${providerTitle}`,
+      );
+
+      expect(vm.$el.querySelector('.js-imported-project')).not.toBeNull();
+      expect(vm.$el.querySelector('.js-provider-repo')).not.toBeNull();
+    });
+  });
+
+  it('renders an empty state if there are no imported projects or provider repos', () => {
+    vm.$store.dispatch('receiveReposSuccess', {
+      importedProjects: [],
+      providerRepos: [],
+      namespaces: [],
+    });
+
+    return vm.$nextTick().then(() => {
+      expect(vm.$el.querySelector('.js-loading-button-icon')).toBeNull();
+      expect(vm.$el.querySelector('.table')).toBeNull();
+      expect(vm.$el.innerText).toMatch(`No ${providerTitle} repositories available to import`);
+    });
+  });
+
+  it('shows loading spinner when bulk import button is clicked', () => {
+    vm.$store.dispatch('receiveReposSuccess', {
+      importedProjects: [],
+      providerRepos: [providerRepo],
+      namespaces: [{ path: 'path' }],
+    });
+
+    return vm
+      .$nextTick()
+      .then(() => {
+        expect(vm.$el.querySelector('.js-imported-project')).toBeNull();
+        expect(vm.$el.querySelector('.js-provider-repo')).not.toBeNull();
+
+        vm.$el.querySelector('.js-import-all').click();
+      })
+      .then(() => vm.$nextTick())
+      .then(() => {
+        expect(vm.$el.querySelector('.js-import-all .js-loading-button-icon')).not.toBeNull();
+      });
+  });
+
+  it('imports provider repos if bulk import button is clicked', () => {
+    mountComponent();
+
+    vm.$store.dispatch('receiveReposSuccess', {
+      importedProjects: [],
+      providerRepos: [providerRepo],
+      namespaces: [{ path: 'path' }],
+    });
+
+    return vm
+      .$nextTick()
+      .then(() => {
+        expect(vm.$el.querySelector('.js-imported-project')).toBeNull();
+        expect(vm.$el.querySelector('.js-provider-repo')).not.toBeNull();
+
+        vm.$store.dispatch('receiveImportSuccess', { importedProject, repoId: providerRepo.id });
+      })
+      .then(() => vm.$nextTick())
+      .then(() => {
+        expect(vm.$el.querySelector('.js-imported-project')).not.toBeNull();
+        expect(vm.$el.querySelector('.js-provider-repo')).toBeNull();
+      });
+  });
+
+  it('polls to update the status of imported projects', () => {
+    const updatedProjects = [
+      {
+        id: importedProject.id,
+        importStatus: 'finished',
+      },
+    ];
+
+    vm.$store.dispatch('receiveReposSuccess', {
+      importedProjects: [importedProject],
+      providerRepos: [],
+      namespaces: [{ path: 'path' }],
+    });
+
+    return vm
+      .$nextTick()
+      .then(() => {
+        const statusObject = STATUS_MAP[importedProject.importStatus];
+
+        expect(vm.$el.querySelector('.js-imported-project')).not.toBeNull();
+        expect(vm.$el.querySelector(`.${statusObject.textClass}`).textContent).toMatch(
+          statusObject.text,
+        );
+
+        expect(vm.$el.querySelector(`.ic-status_${statusObject.icon}`)).not.toBeNull();
+
+        vm.$store.dispatch('receiveJobsSuccess', updatedProjects);
+      })
+      .then(() => vm.$nextTick())
+      .then(() => {
+        const statusObject = STATUS_MAP[updatedProjects[0].importStatus];
+
+        expect(vm.$el.querySelector('.js-imported-project')).not.toBeNull();
+        expect(vm.$el.querySelector(`.${statusObject.textClass}`).textContent).toMatch(
+          statusObject.text,
+        );
+
+        expect(vm.$el.querySelector(`.ic-status_${statusObject.icon}`)).not.toBeNull();
+      });
+  });
+});
diff --git a/spec/frontend/import_projects/components/imported_project_table_row_spec.js b/spec/frontend/import_projects/components/imported_project_table_row_spec.js
new file mode 100644
index 00000000000..f95acc1edd7
--- /dev/null
+++ b/spec/frontend/import_projects/components/imported_project_table_row_spec.js
@@ -0,0 +1,58 @@
+import Vuex from 'vuex';
+import createStore from '~/import_projects/store';
+import { createLocalVue, mount } from '@vue/test-utils';
+import importedProjectTableRow from '~/import_projects/components/imported_project_table_row.vue';
+import STATUS_MAP from '~/import_projects/constants';
+
+describe('ImportedProjectTableRow', () => {
+  let vm;
+  const project = {
+    id: 1,
+    fullPath: 'fullPath',
+    importStatus: 'finished',
+    providerLink: 'providerLink',
+    importSource: 'importSource',
+  };
+
+  function mountComponent() {
+    const localVue = createLocalVue();
+    localVue.use(Vuex);
+
+    const component = mount(importedProjectTableRow, {
+      localVue,
+      store: createStore(),
+      propsData: {
+        project: {
+          ...project,
+        },
+      },
+      sync: false,
+    });
+
+    return component.vm;
+  }
+
+  beforeEach(() => {
+    vm = mountComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders an imported project table row', () => {
+    const providerLink = vm.$el.querySelector('.js-provider-link');
+    const statusObject = STATUS_MAP[project.importStatus];
+
+    expect(vm.$el.classList.contains('js-imported-project')).toBe(true);
+    expect(providerLink.href).toMatch(project.providerLink);
+    expect(providerLink.textContent).toMatch(project.importSource);
+    expect(vm.$el.querySelector('.js-full-path').textContent).toMatch(project.fullPath);
+    expect(vm.$el.querySelector(`.${statusObject.textClass}`).textContent).toMatch(
+      statusObject.text,
+    );
+
+    expect(vm.$el.querySelector(`.ic-status_${statusObject.icon}`)).not.toBeNull();
+    expect(vm.$el.querySelector('.js-go-to-project').href).toMatch(project.fullPath);
+  });
+});
diff --git a/spec/frontend/import_projects/components/provider_repo_table_row_spec.js b/spec/frontend/import_projects/components/provider_repo_table_row_spec.js
new file mode 100644
index 00000000000..02c786d8d0b
--- /dev/null
+++ b/spec/frontend/import_projects/components/provider_repo_table_row_spec.js
@@ -0,0 +1,104 @@
+import Vuex from 'vuex';
+import { createLocalVue, mount } from '@vue/test-utils';
+import { state, actions, getters, mutations } from '~/import_projects/store';
+import providerRepoTableRow from '~/import_projects/components/provider_repo_table_row.vue';
+import STATUS_MAP, { STATUSES } from '~/import_projects/constants';
+
+describe('ProviderRepoTableRow', () => {
+  let vm;
+  const fetchImport = jest.fn((context, data) => actions.requestImport(context, data));
+  const importPath = '/import-path';
+  const defaultTargetNamespace = 'user';
+  const ciCdOnly = true;
+  const repo = {
+    id: 10,
+    sanitizedName: 'sanitizedName',
+    fullName: 'fullName',
+    providerLink: 'providerLink',
+  };
+
+  function initStore() {
+    const stubbedActions = Object.assign({}, actions, {
+      fetchImport,
+    });
+
+    const store = new Vuex.Store({
+      state: state(),
+      actions: stubbedActions,
+      mutations,
+      getters,
+    });
+
+    return store;
+  }
+
+  function mountComponent() {
+    const localVue = createLocalVue();
+    localVue.use(Vuex);
+
+    const store = initStore();
+    store.dispatch('setInitialData', { importPath, defaultTargetNamespace, ciCdOnly });
+
+    const component = mount(providerRepoTableRow, {
+      localVue,
+      store,
+      propsData: {
+        repo,
+      },
+      sync: false,
+    });
+
+    return component.vm;
+  }
+
+  beforeEach(() => {
+    vm = mountComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders a provider repo table row', () => {
+    const providerLink = vm.$el.querySelector('.js-provider-link');
+    const statusObject = STATUS_MAP[STATUSES.NONE];
+
+    expect(vm.$el.classList.contains('js-provider-repo')).toBe(true);
+    expect(providerLink.href).toMatch(repo.providerLink);
+    expect(providerLink.textContent).toMatch(repo.fullName);
+    expect(vm.$el.querySelector(`.${statusObject.textClass}`).textContent).toMatch(
+      statusObject.text,
+    );
+
+    expect(vm.$el.querySelector(`.ic-status_${statusObject.icon}`)).not.toBeNull();
+    expect(vm.$el.querySelector('.js-import-button')).not.toBeNull();
+  });
+
+  it('renders a select2 namespace select', () => {
+    const dropdownTrigger = vm.$el.querySelector('.js-namespace-select');
+
+    expect(dropdownTrigger).not.toBeNull();
+    expect(dropdownTrigger.classList.contains('select2-container')).toBe(true);
+
+    dropdownTrigger.click();
+
+    expect(vm.$el.querySelector('.select2-drop')).not.toBeNull();
+  });
+
+  it('imports repo when clicking import button', () => {
+    vm.$el.querySelector('.js-import-button').click();
+
+    return vm.$nextTick().then(() => {
+      const { calls } = fetchImport.mock;
+
+      // Not using .toBeCalledWith because it expects
+      // an unmatchable and undefined 3rd argument.
+      expect(calls.length).toBe(1);
+      expect(calls[0][1]).toEqual({
+        repo,
+        newName: repo.sanitizedName,
+        targetNamespace: defaultTargetNamespace,
+      });
+    });
+  });
+});
diff --git a/spec/frontend/import_projects/store/actions_spec.js b/spec/frontend/import_projects/store/actions_spec.js
new file mode 100644
index 00000000000..6a7b90788dd
--- /dev/null
+++ b/spec/frontend/import_projects/store/actions_spec.js
@@ -0,0 +1,284 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import {
+  SET_INITIAL_DATA,
+  REQUEST_REPOS,
+  RECEIVE_REPOS_SUCCESS,
+  RECEIVE_REPOS_ERROR,
+  REQUEST_IMPORT,
+  RECEIVE_IMPORT_SUCCESS,
+  RECEIVE_IMPORT_ERROR,
+  RECEIVE_JOBS_SUCCESS,
+} from '~/import_projects/store/mutation_types';
+import {
+  setInitialData,
+  requestRepos,
+  receiveReposSuccess,
+  receiveReposError,
+  fetchRepos,
+  requestImport,
+  receiveImportSuccess,
+  receiveImportError,
+  fetchImport,
+  receiveJobsSuccess,
+  fetchJobs,
+  clearJobsEtagPoll,
+  stopJobsPolling,
+} from '~/import_projects/store/actions';
+import state from '~/import_projects/store/state';
+import testAction from 'helpers/vuex_action_helper';
+import { TEST_HOST } from 'helpers/test_constants';
+
+describe('import_projects store actions', () => {
+  let localState;
+  const repoId = 1;
+  const repos = [{ id: 1 }, { id: 2 }];
+  const importPayload = { newName: 'newName', targetNamespace: 'targetNamespace', repo: { id: 1 } };
+
+  beforeEach(() => {
+    localState = state();
+  });
+
+  describe('setInitialData', () => {
+    it(`commits ${SET_INITIAL_DATA} mutation`, done => {
+      const initialData = {
+        reposPath: 'reposPath',
+        provider: 'provider',
+        jobsPath: 'jobsPath',
+        importPath: 'impapp/assets/javascripts/vue_shared/components/select2_select.vueortPath',
+        defaultTargetNamespace: 'defaultTargetNamespace',
+        ciCdOnly: 'ciCdOnly',
+        canSelectNamespace: 'canSelectNamespace',
+      };
+
+      testAction(
+        setInitialData,
+        initialData,
+        localState,
+        [{ type: SET_INITIAL_DATA, payload: initialData }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('requestRepos', () => {
+    it(`requestRepos commits ${REQUEST_REPOS} mutation`, done => {
+      testAction(
+        requestRepos,
+        null,
+        localState,
+        [{ type: REQUEST_REPOS, payload: null }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveReposSuccess', () => {
+    it(`commits ${RECEIVE_REPOS_SUCCESS} mutation`, done => {
+      testAction(
+        receiveReposSuccess,
+        repos,
+        localState,
+        [{ type: RECEIVE_REPOS_SUCCESS, payload: repos }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveReposError', () => {
+    it(`commits ${RECEIVE_REPOS_ERROR} mutation`, done => {
+      testAction(receiveReposError, repos, localState, [{ type: RECEIVE_REPOS_ERROR }], [], done);
+    });
+  });
+
+  describe('fetchRepos', () => {
+    let mock;
+
+    beforeEach(() => {
+      localState.reposPath = `${TEST_HOST}/endpoint.json`;
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => mock.restore());
+
+    it('dispatches requestRepos and receiveReposSuccess actions on a successful request', done => {
+      const payload = { imported_projects: [{}], provider_repos: [{}], namespaces: [{}] };
+      mock.onGet(`${TEST_HOST}/endpoint.json`).reply(200, payload);
+
+      testAction(
+        fetchRepos,
+        null,
+        localState,
+        [],
+        [
+          { type: 'requestRepos' },
+          {
+            type: 'receiveReposSuccess',
+            payload: convertObjectPropsToCamelCase(payload, { deep: true }),
+          },
+          {
+            type: 'fetchJobs',
+          },
+        ],
+        done,
+      );
+    });
+
+    it('dispatches requestRepos and receiveReposSuccess actions on an unsuccessful request', done => {
+      mock.onGet(`${TEST_HOST}/endpoint.json`).reply(500);
+
+      testAction(
+        fetchRepos,
+        null,
+        localState,
+        [],
+        [{ type: 'requestRepos' }, { type: 'receiveReposError' }],
+        done,
+      );
+    });
+  });
+
+  describe('requestImport', () => {
+    it(`commits ${REQUEST_IMPORT} mutation`, done => {
+      testAction(
+        requestImport,
+        repoId,
+        localState,
+        [{ type: REQUEST_IMPORT, payload: repoId }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveImportSuccess', () => {
+    it(`commits ${RECEIVE_IMPORT_SUCCESS} mutation`, done => {
+      const payload = { importedProject: { name: 'imported/project' }, repoId: 2 };
+
+      testAction(
+        receiveImportSuccess,
+        payload,
+        localState,
+        [{ type: RECEIVE_IMPORT_SUCCESS, payload }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveImportError', () => {
+    it(`commits ${RECEIVE_IMPORT_ERROR} mutation`, done => {
+      testAction(
+        receiveImportError,
+        repoId,
+        localState,
+        [{ type: RECEIVE_IMPORT_ERROR, payload: repoId }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('fetchImport', () => {
+    let mock;
+
+    beforeEach(() => {
+      localState.importPath = `${TEST_HOST}/endpoint.json`;
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => mock.restore());
+
+    it('dispatches requestImport and receiveImportSuccess actions on a successful request', done => {
+      const importedProject = { name: 'imported/project' };
+      const importRepoId = importPayload.repo.id;
+      mock.onPost(`${TEST_HOST}/endpoint.json`).reply(200, importedProject);
+
+      testAction(
+        fetchImport,
+        importPayload,
+        localState,
+        [],
+        [
+          { type: 'requestImport', payload: importRepoId },
+          {
+            type: 'receiveImportSuccess',
+            payload: {
+              importedProject: convertObjectPropsToCamelCase(importedProject, { deep: true }),
+              repoId: importRepoId,
+            },
+          },
+        ],
+        done,
+      );
+    });
+
+    it('dispatches requestImport and receiveImportSuccess actions on an unsuccessful request', done => {
+      mock.onPost(`${TEST_HOST}/endpoint.json`).reply(500);
+
+      testAction(
+        fetchImport,
+        importPayload,
+        localState,
+        [],
+        [
+          { type: 'requestImport', payload: importPayload.repo.id },
+          { type: 'receiveImportError', payload: { repoId: importPayload.repo.id } },
+        ],
+        done,
+      );
+    });
+  });
+
+  describe('receiveJobsSuccess', () => {
+    it(`commits ${RECEIVE_JOBS_SUCCESS} mutation`, done => {
+      testAction(
+        receiveJobsSuccess,
+        repos,
+        localState,
+        [{ type: RECEIVE_JOBS_SUCCESS, payload: repos }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('fetchJobs', () => {
+    let mock;
+
+    beforeEach(() => {
+      localState.jobsPath = `${TEST_HOST}/endpoint.json`;
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => {
+      stopJobsPolling();
+      clearJobsEtagPoll();
+    });
+
+    afterEach(() => mock.restore());
+
+    it('dispatches requestJobs and receiveJobsSuccess actions on a successful request', done => {
+      const updatedProjects = [{ name: 'imported/project' }, { name: 'provider/repo' }];
+      mock.onGet(`${TEST_HOST}/endpoint.json`).reply(200, updatedProjects);
+
+      testAction(
+        fetchJobs,
+        null,
+        localState,
+        [],
+        [
+          {
+            type: 'receiveJobsSuccess',
+            payload: convertObjectPropsToCamelCase(updatedProjects, { deep: true }),
+          },
+        ],
+        done,
+      );
+    });
+  });
+});