Commit d7b0dd8f authored by Kushal Pandya's avatar Kushal Pandya

Merge branch 'migrate-import-projects-spec' into 'master'

Move import projects karma specs to jest

Closes #60204

See merge request gitlab-org/gitlab-ce!27552
parents f04f6909 642c7252
...@@ -74,7 +74,7 @@ export default { ...@@ -74,7 +74,7 @@ export default {
<gl-loading-icon <gl-loading-icon
v-if="isLoadingRepos" v-if="isLoadingRepos"
class="js-loading-button-icon import-projects-loading-icon" class="js-loading-button-icon import-projects-loading-icon"
:size="4" size="md"
/> />
<div v-else-if="hasProviderRepos || hasImportedProjects" class="table-responsive"> <div v-else-if="hasProviderRepos || hasImportedProjects" class="table-responsive">
<table class="table import-table"> <table class="table import-table">
......
...@@ -7,6 +7,8 @@ import mutations from './mutations'; ...@@ -7,6 +7,8 @@ import mutations from './mutations';
Vue.use(Vuex); Vue.use(Vuex);
export { state, actions, getters, mutations };
export default () => export default () =>
new Vuex.Store({ new Vuex.Store({
state: state(), state: state(),
......
<script> <script>
import $ from 'jquery'; import $ from 'jquery';
import 'select2/select2'; import 'select2';
export default { export default {
name: 'Select2Select', name: 'Select2Select',
......
import Vue from 'vue'; import Vuex from 'vuex';
import MockAdapter from 'axios-mock-adapter'; import { createLocalVue, mount } from '@vue/test-utils';
import axios from '~/lib/utils/axios_utils'; import { state, actions, getters, mutations } from '~/import_projects/store';
import createStore from '~/import_projects/store';
import importProjectsTable from '~/import_projects/components/import_projects_table.vue'; import importProjectsTable from '~/import_projects/components/import_projects_table.vue';
import STATUS_MAP from '~/import_projects/constants'; import STATUS_MAP from '~/import_projects/constants';
import setTimeoutPromise from '../../helpers/set_timeout_promise_helper';
describe('ImportProjectsTable', () => { describe('ImportProjectsTable', () => {
let vm; let vm;
let mock;
let store;
const reposPath = '/repos-path';
const jobsPath = '/jobs-path';
const providerTitle = 'THE PROVIDER'; const providerTitle = 'THE PROVIDER';
const providerRepo = { id: 10, sanitizedName: 'sanitizedName', fullName: 'fullName' }; const providerRepo = { id: 10, sanitizedName: 'sanitizedName', fullName: 'fullName' };
const importedProject = { const importedProject = {
...@@ -22,128 +16,133 @@ describe('ImportProjectsTable', () => { ...@@ -22,128 +16,133 @@ describe('ImportProjectsTable', () => {
importSource: 'importSource', importSource: 'importSource',
}; };
function createComponent() { function initStore() {
const ImportProjectsTable = Vue.extend(importProjectsTable); 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, store,
propsData: { propsData: {
providerTitle, providerTitle,
}, },
}).$mount(); sync: false,
});
store.dispatch('stopJobsPolling'); return component.vm;
return component;
} }
beforeEach(() => { beforeEach(() => {
store = createStore(); vm = mountComponent();
store.dispatch('setInitialData', { reposPath });
mock = new MockAdapter(axios);
}); });
afterEach(() => { afterEach(() => {
vm.$destroy(); vm.$destroy();
mock.restore();
}); });
it('renders a loading icon whilst repos are loading', done => { it('renders a loading icon whilst repos are loading', () =>
mock.restore(); // Stop the mock adapter from responding to the request, keeping the spinner up vm.$nextTick().then(() => {
expect(vm.$el.querySelector('.js-loading-button-icon')).not.toBeNull();
vm = createComponent(); }));
setTimeoutPromise() it('renders a table with imported projects and provider repos', () => {
.then(() => { vm.$store.dispatch('receiveReposSuccess', {
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 = {
importedProjects: [importedProject], importedProjects: [importedProject],
providerRepos: [providerRepo], providerRepos: [providerRepo],
namespaces: [{ path: 'path' }], namespaces: [{ path: 'path' }],
}; });
mock.onGet(reposPath).reply(200, response);
return vm.$nextTick().then(() => {
vm = createComponent(); expect(vm.$el.querySelector('.js-loading-button-icon')).toBeNull();
expect(vm.$el.querySelector('.table')).not.toBeNull();
setTimeoutPromise() expect(vm.$el.querySelector('.import-jobs-from-col').innerText).toMatch(
.then(() => { `From ${providerTitle}`,
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( expect(vm.$el.querySelector('.js-imported-project')).not.toBeNull();
`From ${providerTitle}`, expect(vm.$el.querySelector('.js-provider-repo')).not.toBeNull();
); });
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 => { it('renders an empty state if there are no imported projects or provider repos', () => {
const response = { vm.$store.dispatch('receiveReposSuccess', {
importedProjects: [], importedProjects: [],
providerRepos: [], providerRepos: [],
namespaces: [], namespaces: [],
}; });
mock.onGet(reposPath).reply(200, response);
vm = createComponent();
setTimeoutPromise() return vm.$nextTick().then(() => {
.then(() => { expect(vm.$el.querySelector('.js-loading-button-icon')).toBeNull();
expect(vm.$el.querySelector('.js-loading-button-icon')).toBeNull(); expect(vm.$el.querySelector('.table')).toBeNull();
expect(vm.$el.querySelector('.table')).toBeNull(); expect(vm.$el.innerText).toMatch(`No ${providerTitle} repositories available to import`);
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 => { it('shows loading spinner when bulk import button is clicked', () => {
const importPath = '/import-path'; vm.$store.dispatch('receiveReposSuccess', {
const response = {
importedProjects: [], importedProjects: [],
providerRepos: [providerRepo], providerRepos: [providerRepo],
namespaces: [{ path: 'path' }], namespaces: [{ path: 'path' }],
}; });
return vm
.$nextTick()
.then(() => {
expect(vm.$el.querySelector('.js-imported-project')).toBeNull();
expect(vm.$el.querySelector('.js-provider-repo')).not.toBeNull();
mock.onGet(reposPath).replyOnce(200, response); vm.$el.querySelector('.js-import-all').click();
mock.onPost(importPath).replyOnce(200, importedProject); })
.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(() => { .then(() => {
expect(vm.$el.querySelector('.js-imported-project')).toBeNull(); expect(vm.$el.querySelector('.js-imported-project')).toBeNull();
expect(vm.$el.querySelector('.js-provider-repo')).not.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(() => { .then(() => {
expect(vm.$el.querySelector('.js-imported-project')).not.toBeNull(); expect(vm.$el.querySelector('.js-imported-project')).not.toBeNull();
expect(vm.$el.querySelector('.js-provider-repo')).toBeNull(); expect(vm.$el.querySelector('.js-provider-repo')).toBeNull();
}) });
.then(() => done())
.catch(() => done.fail());
}); });
it('polls to update the status of imported projects', done => { it('polls to update the status of imported projects', () => {
const importPath = '/import-path';
const response = {
importedProjects: [importedProject],
providerRepos: [],
namespaces: [{ path: 'path' }],
};
const updatedProjects = [ const updatedProjects = [
{ {
id: importedProject.id, id: importedProject.id,
...@@ -151,13 +150,14 @@ describe('ImportProjectsTable', () => { ...@@ -151,13 +150,14 @@ describe('ImportProjectsTable', () => {
}, },
]; ];
mock.onGet(reposPath).replyOnce(200, response); vm.$store.dispatch('receiveReposSuccess', {
importedProjects: [importedProject],
store.dispatch('setInitialData', { importPath, jobsPath }); providerRepos: [],
namespaces: [{ path: 'path' }],
vm = createComponent(); });
setTimeoutPromise() return vm
.$nextTick()
.then(() => { .then(() => {
const statusObject = STATUS_MAP[importedProject.importStatus]; const statusObject = STATUS_MAP[importedProject.importStatus];
...@@ -168,10 +168,9 @@ describe('ImportProjectsTable', () => { ...@@ -168,10 +168,9 @@ describe('ImportProjectsTable', () => {
expect(vm.$el.querySelector(`.ic-status_${statusObject.icon}`)).not.toBeNull(); expect(vm.$el.querySelector(`.ic-status_${statusObject.icon}`)).not.toBeNull();
mock.onGet(jobsPath).replyOnce(200, updatedProjects); vm.$store.dispatch('receiveJobsSuccess', updatedProjects);
return store.dispatch('restartJobsPolling');
}) })
.then(() => setTimeoutPromise()) .then(() => vm.$nextTick())
.then(() => { .then(() => {
const statusObject = STATUS_MAP[updatedProjects[0].importStatus]; const statusObject = STATUS_MAP[updatedProjects[0].importStatus];
...@@ -181,8 +180,6 @@ describe('ImportProjectsTable', () => { ...@@ -181,8 +180,6 @@ describe('ImportProjectsTable', () => {
); );
expect(vm.$el.querySelector(`.ic-status_${statusObject.icon}`)).not.toBeNull(); 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 createStore from '~/import_projects/store';
import { createLocalVue, mount } from '@vue/test-utils';
import importedProjectTableRow from '~/import_projects/components/imported_project_table_row.vue'; import importedProjectTableRow from '~/import_projects/components/imported_project_table_row.vue';
import STATUS_MAP from '~/import_projects/constants'; import STATUS_MAP from '~/import_projects/constants';
...@@ -13,27 +14,33 @@ describe('ImportedProjectTableRow', () => { ...@@ -13,27 +14,33 @@ describe('ImportedProjectTableRow', () => {
importSource: 'importSource', importSource: 'importSource',
}; };
function createComponent() { function mountComponent() {
const ImportedProjectTableRow = Vue.extend(importedProjectTableRow); const localVue = createLocalVue();
localVue.use(Vuex);
const store = createStore(); const component = mount(importedProjectTableRow, {
return new ImportedProjectTableRow({ localVue,
store, store: createStore(),
propsData: { propsData: {
project: { project: {
...project, ...project,
}, },
}, },
}).$mount(); sync: false,
});
return component.vm;
} }
beforeEach(() => {
vm = mountComponent();
});
afterEach(() => { afterEach(() => {
vm.$destroy(); vm.$destroy();
}); });
it('renders an imported project table row', () => { it('renders an imported project table row', () => {
vm = createComponent();
const providerLink = vm.$el.querySelector('.js-provider-link'); const providerLink = vm.$el.querySelector('.js-provider-link');
const statusObject = STATUS_MAP[project.importStatus]; const statusObject = STATUS_MAP[project.importStatus];
......
import Vue from 'vue'; import Vuex from 'vuex';
import MockAdapter from 'axios-mock-adapter'; import { createLocalVue, mount } from '@vue/test-utils';
import axios from '~/lib/utils/axios_utils'; import { state, actions, getters, mutations } from '~/import_projects/store';
import createStore from '~/import_projects/store';
import providerRepoTableRow from '~/import_projects/components/provider_repo_table_row.vue'; import providerRepoTableRow from '~/import_projects/components/provider_repo_table_row.vue';
import STATUS_MAP, { STATUSES } from '~/import_projects/constants'; import STATUS_MAP, { STATUSES } from '~/import_projects/constants';
import setTimeoutPromise from '../../helpers/set_timeout_promise_helper';
describe('ProviderRepoTableRow', () => { describe('ProviderRepoTableRow', () => {
let store;
let vm; let vm;
const fetchImport = jest.fn((context, data) => actions.requestImport(context, data));
const importPath = '/import-path';
const defaultTargetNamespace = 'user';
const ciCdOnly = true;
const repo = { const repo = {
id: 10, id: 10,
sanitizedName: 'sanitizedName', sanitizedName: 'sanitizedName',
...@@ -16,21 +17,42 @@ describe('ProviderRepoTableRow', () => { ...@@ -16,21 +17,42 @@ describe('ProviderRepoTableRow', () => {
providerLink: 'providerLink', providerLink: 'providerLink',
}; };
function createComponent() { function initStore() {
const ProviderRepoTableRow = Vue.extend(providerRepoTableRow); 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, store,
propsData: { propsData: {
repo: { repo,
...repo,
},
}, },
}).$mount(); sync: false,
});
return component.vm;
} }
beforeEach(() => { beforeEach(() => {
store = createStore(); vm = mountComponent();
}); });
afterEach(() => { afterEach(() => {
...@@ -38,8 +60,6 @@ describe('ProviderRepoTableRow', () => { ...@@ -38,8 +60,6 @@ describe('ProviderRepoTableRow', () => {
}); });
it('renders a provider repo table row', () => { it('renders a provider repo table row', () => {
vm = createComponent();
const providerLink = vm.$el.querySelector('.js-provider-link'); const providerLink = vm.$el.querySelector('.js-provider-link');
const statusObject = STATUS_MAP[STATUSES.NONE]; const statusObject = STATUS_MAP[STATUSES.NONE];
...@@ -55,8 +75,6 @@ describe('ProviderRepoTableRow', () => { ...@@ -55,8 +75,6 @@ describe('ProviderRepoTableRow', () => {
}); });
it('renders a select2 namespace select', () => { it('renders a select2 namespace select', () => {
vm = createComponent();
const dropdownTrigger = vm.$el.querySelector('.js-namespace-select'); const dropdownTrigger = vm.$el.querySelector('.js-namespace-select');
expect(dropdownTrigger).not.toBeNull(); expect(dropdownTrigger).not.toBeNull();
...@@ -67,30 +85,20 @@ describe('ProviderRepoTableRow', () => { ...@@ -67,30 +85,20 @@ describe('ProviderRepoTableRow', () => {
expect(vm.$el.querySelector('.select2-drop')).not.toBeNull(); expect(vm.$el.querySelector('.select2-drop')).not.toBeNull();
}); });
it('imports repo when clicking import button', done => { it('imports repo when clicking import button', () => {
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();
vm.$el.querySelector('.js-import-button').click(); vm.$el.querySelector('.js-import-button').click();
setTimeoutPromise() return vm.$nextTick().then(() => {
.then(() => { const { calls } = fetchImport.mock;
expect(store.dispatch).toHaveBeenCalledWith('fetchImport', {
repo, // Not using .toBeCalledWith because it expects
newName: repo.sanitizedName, // an unmatchable and undefined 3rd argument.
targetNamespace: defaultTargetNamespace, expect(calls.length).toBe(1);
}); expect(calls[0][1]).toEqual({
}) repo,
.then(() => mock.restore()) newName: repo.sanitizedName,
.then(done) targetNamespace: defaultTargetNamespace,
.catch(done.fail); });
});
}); });
}); });
...@@ -27,8 +27,8 @@ import { ...@@ -27,8 +27,8 @@ import {
stopJobsPolling, stopJobsPolling,
} from '~/import_projects/store/actions'; } from '~/import_projects/store/actions';
import state from '~/import_projects/store/state'; import state from '~/import_projects/store/state';
import testAction from 'spec/helpers/vuex_action_helper'; import testAction from 'helpers/vuex_action_helper';
import { TEST_HOST } from 'spec/test_constants'; import { TEST_HOST } from 'helpers/test_constants';
describe('import_projects store actions', () => { describe('import_projects store actions', () => {
let localState; 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