Commit 642c7252 authored by Luke Bennett's avatar Luke Bennett

Move import projects karma specs to jest

Improvements to the stability/validity of the specs.
parent 8bbb51a6
......@@ -74,7 +74,7 @@ export default {
<gl-loading-icon
v-if="isLoadingRepos"
class="js-loading-button-icon import-projects-loading-icon"
:size="4"
size="md"
/>
<div v-else-if="hasProviderRepos || hasImportedProjects" class="table-responsive">
<table class="table import-table">
......
......@@ -7,6 +7,8 @@ import mutations from './mutations';
Vue.use(Vuex);
export { state, actions, getters, mutations };
export default () =>
new Vuex.Store({
state: state(),
......
<script>
import $ from 'jquery';
import 'select2/select2';
import 'select2';
export default {
name: 'Select2Select',
......
import Vue from 'vue';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import createStore from '~/import_projects/store';
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';
import setTimeoutPromise from '../../helpers/set_timeout_promise_helper';
describe('ImportProjectsTable', () => {
let vm;
let mock;
let store;
const reposPath = '/repos-path';
const jobsPath = '/jobs-path';
const providerTitle = 'THE PROVIDER';
const providerRepo = { id: 10, sanitizedName: 'sanitizedName', fullName: 'fullName' };
const importedProject = {
......@@ -22,57 +16,62 @@ describe('ImportProjectsTable', () => {
importSource: 'importSource',
};
function createComponent() {
const ImportProjectsTable = Vue.extend(importProjectsTable);
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 = new ImportProjectsTable({
const component = mount(importProjectsTable, {
localVue,
store,
propsData: {
providerTitle,
},
}).$mount();
store.dispatch('stopJobsPolling');
sync: false,
});
return component;
return component.vm;
}
beforeEach(() => {
store = createStore();
store.dispatch('setInitialData', { reposPath });
mock = new MockAdapter(axios);
vm = mountComponent();
});
afterEach(() => {
vm.$destroy();
mock.restore();
});
it('renders a loading icon whilst repos are loading', done => {
mock.restore(); // Stop the mock adapter from responding to the request, keeping the spinner up
vm = createComponent();
setTimeoutPromise()
.then(() => {
it('renders a loading icon whilst repos are loading', () =>
vm.$nextTick().then(() => {
expect(vm.$el.querySelector('.js-loading-button-icon')).not.toBeNull();
})
.then(() => done())
.catch(() => done.fail());
});
}));
it('renders a table with imported projects and provider repos', done => {
const response = {
it('renders a table with imported projects and provider repos', () => {
vm.$store.dispatch('receiveReposSuccess', {
importedProjects: [importedProject],
providerRepos: [providerRepo],
namespaces: [{ path: 'path' }],
};
mock.onGet(reposPath).reply(200, response);
vm = createComponent();
});
setTimeoutPromise()
.then(() => {
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(
......@@ -81,69 +80,69 @@ describe('ImportProjectsTable', () => {
expect(vm.$el.querySelector('.js-imported-project')).not.toBeNull();
expect(vm.$el.querySelector('.js-provider-repo')).not.toBeNull();
})
.then(() => done())
.catch(() => done.fail());
});
});
it('renders an empty state if there are no imported projects or provider repos', done => {
const response = {
it('renders an empty state if there are no imported projects or provider repos', () => {
vm.$store.dispatch('receiveReposSuccess', {
importedProjects: [],
providerRepos: [],
namespaces: [],
};
mock.onGet(reposPath).reply(200, response);
vm = createComponent();
});
setTimeoutPromise()
.then(() => {
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`);
})
.then(() => done())
.catch(() => done.fail());
});
});
it('imports provider repos if bulk import button is clicked', done => {
const importPath = '/import-path';
const response = {
it('shows loading spinner when bulk import button is clicked', () => {
vm.$store.dispatch('receiveReposSuccess', {
importedProjects: [],
providerRepos: [providerRepo],
namespaces: [{ path: 'path' }],
};
});
mock.onGet(reposPath).replyOnce(200, response);
mock.onPost(importPath).replyOnce(200, importedProject);
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();
});
});
store.dispatch('setInitialData', { importPath });
it('imports provider repos if bulk import button is clicked', () => {
mountComponent();
vm = createComponent();
vm.$store.dispatch('receiveReposSuccess', {
importedProjects: [],
providerRepos: [providerRepo],
namespaces: [{ path: 'path' }],
});
setTimeoutPromise()
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();
vm.$store.dispatch('receiveImportSuccess', { importedProject, repoId: providerRepo.id });
})
.then(() => setTimeoutPromise())
.then(() => vm.$nextTick())
.then(() => {
expect(vm.$el.querySelector('.js-imported-project')).not.toBeNull();
expect(vm.$el.querySelector('.js-provider-repo')).toBeNull();
})
.then(() => done())
.catch(() => done.fail());
});
});
it('polls to update the status of imported projects', done => {
const importPath = '/import-path';
const response = {
importedProjects: [importedProject],
providerRepos: [],
namespaces: [{ path: 'path' }],
};
it('polls to update the status of imported projects', () => {
const updatedProjects = [
{
id: importedProject.id,
......@@ -151,13 +150,14 @@ describe('ImportProjectsTable', () => {
},
];
mock.onGet(reposPath).replyOnce(200, response);
store.dispatch('setInitialData', { importPath, jobsPath });
vm = createComponent();
vm.$store.dispatch('receiveReposSuccess', {
importedProjects: [importedProject],
providerRepos: [],
namespaces: [{ path: 'path' }],
});
setTimeoutPromise()
return vm
.$nextTick()
.then(() => {
const statusObject = STATUS_MAP[importedProject.importStatus];
......@@ -168,10 +168,9 @@ describe('ImportProjectsTable', () => {
expect(vm.$el.querySelector(`.ic-status_${statusObject.icon}`)).not.toBeNull();
mock.onGet(jobsPath).replyOnce(200, updatedProjects);
return store.dispatch('restartJobsPolling');
vm.$store.dispatch('receiveJobsSuccess', updatedProjects);
})
.then(() => setTimeoutPromise())
.then(() => vm.$nextTick())
.then(() => {
const statusObject = STATUS_MAP[updatedProjects[0].importStatus];
......@@ -181,8 +180,6 @@ describe('ImportProjectsTable', () => {
);
expect(vm.$el.querySelector(`.ic-status_${statusObject.icon}`)).not.toBeNull();
})
.then(() => done())
.catch(() => done.fail());
});
});
});
import Vue from 'vue';
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';
......@@ -13,27 +14,33 @@ describe('ImportedProjectTableRow', () => {
importSource: 'importSource',
};
function createComponent() {
const ImportedProjectTableRow = Vue.extend(importedProjectTableRow);
function mountComponent() {
const localVue = createLocalVue();
localVue.use(Vuex);
const store = createStore();
return new ImportedProjectTableRow({
store,
const component = mount(importedProjectTableRow, {
localVue,
store: createStore(),
propsData: {
project: {
...project,
},
},
}).$mount();
sync: false,
});
return component.vm;
}
beforeEach(() => {
vm = mountComponent();
});
afterEach(() => {
vm.$destroy();
});
it('renders an imported project table row', () => {
vm = createComponent();
const providerLink = vm.$el.querySelector('.js-provider-link');
const statusObject = STATUS_MAP[project.importStatus];
......
import Vue from 'vue';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import createStore from '~/import_projects/store';
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';
import setTimeoutPromise from '../../helpers/set_timeout_promise_helper';
describe('ProviderRepoTableRow', () => {
let store;
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',
......@@ -16,21 +17,42 @@ describe('ProviderRepoTableRow', () => {
providerLink: 'providerLink',
};
function createComponent() {
const ProviderRepoTableRow = Vue.extend(providerRepoTableRow);
function initStore() {
const stubbedActions = Object.assign({}, actions, {
fetchImport,
});
return new ProviderRepoTableRow({
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: {
...repo,
},
repo,
},
}).$mount();
sync: false,
});
return component.vm;
}
beforeEach(() => {
store = createStore();
vm = mountComponent();
});
afterEach(() => {
......@@ -38,8 +60,6 @@ describe('ProviderRepoTableRow', () => {
});
it('renders a provider repo table row', () => {
vm = createComponent();
const providerLink = vm.$el.querySelector('.js-provider-link');
const statusObject = STATUS_MAP[STATUSES.NONE];
......@@ -55,8 +75,6 @@ describe('ProviderRepoTableRow', () => {
});
it('renders a select2 namespace select', () => {
vm = createComponent();
const dropdownTrigger = vm.$el.querySelector('.js-namespace-select');
expect(dropdownTrigger).not.toBeNull();
......@@ -67,30 +85,20 @@ describe('ProviderRepoTableRow', () => {
expect(vm.$el.querySelector('.select2-drop')).not.toBeNull();
});
it('imports repo when clicking import button', done => {
const importPath = '/import-path';
const defaultTargetNamespace = 'user';
const ciCdOnly = true;
const mock = new MockAdapter(axios);
store.dispatch('setInitialData', { importPath, defaultTargetNamespace, ciCdOnly });
mock.onPost(importPath).replyOnce(200);
spyOn(store, 'dispatch').and.returnValue(new Promise(() => {}));
vm = createComponent();
it('imports repo when clicking import button', () => {
vm.$el.querySelector('.js-import-button').click();
setTimeoutPromise()
.then(() => {
expect(store.dispatch).toHaveBeenCalledWith('fetchImport', {
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,
});
})
.then(() => mock.restore())
.then(done)
.catch(done.fail);
});
});
});
......@@ -27,8 +27,8 @@ import {
stopJobsPolling,
} from '~/import_projects/store/actions';
import state from '~/import_projects/store/state';
import testAction from 'spec/helpers/vuex_action_helper';
import { TEST_HOST } from 'spec/test_constants';
import testAction from 'helpers/vuex_action_helper';
import { TEST_HOST } from 'helpers/test_constants';
describe('import_projects store actions', () => {
let localState;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment