Commit 2a9b1830 authored by Filipa Lacerda's avatar Filipa Lacerda

Replace vue resources with axios for pipelines table

parent de36ca81
...@@ -55,14 +55,13 @@ ...@@ -55,14 +55,13 @@
}, },
methods: { methods: {
successCallback(resp) { successCallback(resp) {
return resp.json().then((response) => {
// depending of the endpoint the response can either bring a `pipelines` key or not. // depending of the endpoint the response can either bring a `pipelines` key or not.
const pipelines = response.pipelines || response; const pipelines = resp.data.pipelines || resp.data;
this.setCommonData(pipelines); this.setCommonData(pipelines);
const updatePipelinesEvent = new CustomEvent('update-pipelines-count', { const updatePipelinesEvent = new CustomEvent('update-pipelines-count', {
detail: { detail: {
pipelines: response, pipelines: resp.data,
}, },
}); });
...@@ -70,7 +69,6 @@ ...@@ -70,7 +69,6 @@
if (this.$el.parentElement) { if (this.$el.parentElement) {
this.$el.parentElement.dispatchEvent(updatePipelinesEvent); this.$el.parentElement.dispatchEvent(updatePipelinesEvent);
} }
});
}, },
}, },
}; };
......
...@@ -7,10 +7,7 @@ ...@@ -7,10 +7,7 @@
import TablePagination from '../../vue_shared/components/table_pagination.vue'; import TablePagination from '../../vue_shared/components/table_pagination.vue';
import NavigationTabs from '../../vue_shared/components/navigation_tabs.vue'; import NavigationTabs from '../../vue_shared/components/navigation_tabs.vue';
import NavigationControls from './nav_controls.vue'; import NavigationControls from './nav_controls.vue';
import { import { getParameterByName } from '../../lib/utils/common_utils';
getParameterByName,
parseQueryStringIntoObject,
} from '../../lib/utils/common_utils';
import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin'; import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
export default { export default {
...@@ -19,10 +16,7 @@ ...@@ -19,10 +16,7 @@
NavigationTabs, NavigationTabs,
NavigationControls, NavigationControls,
}, },
mixins: [ mixins: [pipelinesMixin, CIPaginationMixin],
pipelinesMixin,
CIPaginationMixin,
],
props: { props: {
store: { store: {
type: Object, type: Object,
...@@ -147,25 +141,26 @@ ...@@ -147,25 +141,26 @@
*/ */
shouldRenderTabs() { shouldRenderTabs() {
const { stateMap } = this.$options; const { stateMap } = this.$options;
return this.hasMadeRequest && return (
[ this.hasMadeRequest &&
stateMap.loading, [stateMap.loading, stateMap.tableList, stateMap.error, stateMap.emptyTab].includes(
stateMap.tableList, this.stateToRender,
stateMap.error, )
stateMap.emptyTab, );
].includes(this.stateToRender);
}, },
shouldRenderButtons() { shouldRenderButtons() {
return (this.newPipelinePath || return (
this.resetCachePath || (this.newPipelinePath || this.resetCachePath || this.ciLintPath) && this.shouldRenderTabs
this.ciLintPath) && this.shouldRenderTabs; );
}, },
shouldRenderPagination() { shouldRenderPagination() {
return !this.isLoading && return (
!this.isLoading &&
this.state.pipelines.length && this.state.pipelines.length &&
this.state.pageInfo.total > this.state.pageInfo.perPage; this.state.pageInfo.total > this.state.pageInfo.perPage
);
}, },
emptyTabMessage() { emptyTabMessage() {
...@@ -229,15 +224,13 @@ ...@@ -229,15 +224,13 @@
}, },
methods: { methods: {
successCallback(resp) { successCallback(resp) {
return resp.json().then((response) => {
// Because we are polling & the user is interacting verify if the response received // Because we are polling & the user is interacting verify if the response received
// matches the last request made // matches the last request made
if (_.isEqual(parseQueryStringIntoObject(resp.url.split('?')[1]), this.requestData)) { if (_.isEqual(resp.config.params, this.requestData)) {
this.store.storeCount(response.count); this.store.storeCount(resp.data.count);
this.store.storePagination(resp.headers); this.store.storePagination(resp.headers);
this.setCommonData(response.pipelines); this.setCommonData(resp.data.pipelines);
} }
});
}, },
/** /**
* Handles URL and query parameter changes. * Handles URL and query parameter changes.
...@@ -251,8 +244,9 @@ ...@@ -251,8 +244,9 @@
this.updateInternalState(parameters); this.updateInternalState(parameters);
// fetch new data // fetch new data
return this.service.getPipelines(this.requestData) return this.service
.then((response) => { .getPipelines(this.requestData)
.then(response => {
this.isLoading = false; this.isLoading = false;
this.successCallback(response); this.successCallback(response);
...@@ -271,13 +265,11 @@ ...@@ -271,13 +265,11 @@
handleResetRunnersCache(endpoint) { handleResetRunnersCache(endpoint) {
this.isResetCacheButtonLoading = true; this.isResetCacheButtonLoading = true;
this.service.postAction(endpoint) this.service
.postAction(endpoint)
.then(() => { .then(() => {
this.isResetCacheButtonLoading = false; this.isResetCacheButtonLoading = false;
createFlash( createFlash(s__('Pipelines|Project cache successfully reset.'), 'notice');
s__('Pipelines|Project cache successfully reset.'),
'notice',
);
}) })
.catch(() => { .catch(() => {
this.isResetCacheButtonLoading = false; this.isResetCacheButtonLoading = false;
......
/* eslint-disable class-methods-use-this */ import axios from '../../lib/utils/axios_utils';
import Vue from 'vue';
import VueResource from 'vue-resource';
import '../../vue_shared/vue_resource_interceptor';
Vue.use(VueResource);
export default class PipelinesService { export default class PipelinesService {
/** /**
* Commits and merge request endpoints need to be requested with `.json`. * Commits and merge request endpoints need to be requested with `.json`.
* *
...@@ -16,20 +10,18 @@ export default class PipelinesService { ...@@ -16,20 +10,18 @@ export default class PipelinesService {
* @param {String} root * @param {String} root
*/ */
constructor(root) { constructor(root) {
let endpoint;
if (root.indexOf('.json') === -1) { if (root.indexOf('.json') === -1) {
endpoint = `${root}.json`; this.endpoint = `${root}.json`;
} else { } else {
endpoint = root; this.endpoint = root;
} }
this.pipelines = Vue.resource(endpoint);
} }
getPipelines(data = {}) { getPipelines(data = {}) {
const { scope, page } = data; const { scope, page } = data;
return this.pipelines.get({ scope, page }); return axios.get(this.endpoint, {
params: { scope, page },
});
} }
/** /**
...@@ -38,7 +30,8 @@ export default class PipelinesService { ...@@ -38,7 +30,8 @@ export default class PipelinesService {
* @param {String} endpoint * @param {String} endpoint
* @return {Promise} * @return {Promise}
*/ */
// eslint-disable-next-line class-methods-use-this
postAction(endpoint) { postAction(endpoint) {
return Vue.http.post(`${endpoint}.json`); return axios.post(`${endpoint}.json`);
} }
} }
title: Replace vue resource with axios in pipelines table
merge_request:
author:
type: other
\ No newline at end of file
import _ from 'underscore';
import Vue from 'vue'; import Vue from 'vue';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import pipelinesTable from '~/commit/pipelines/pipelines_table.vue'; import pipelinesTable from '~/commit/pipelines/pipelines_table.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
describe('Pipelines table in Commits and Merge requests', () => { describe('Pipelines table in Commits and Merge requests', () => {
const jsonFixtureName = 'pipelines/pipelines.json'; const jsonFixtureName = 'pipelines/pipelines.json';
let pipeline; let pipeline;
let PipelinesTable; let PipelinesTable;
let mock;
let vm;
preloadFixtures(jsonFixtureName); preloadFixtures(jsonFixtureName);
beforeEach(() => { beforeEach(() => {
mock = new MockAdapter(axios);
const pipelines = getJSONFixture(jsonFixtureName).pipelines; const pipelines = getJSONFixture(jsonFixtureName).pipelines;
PipelinesTable = Vue.extend(pipelinesTable); PipelinesTable = Vue.extend(pipelinesTable);
pipeline = pipelines.find(p => p.user !== null && p.commit !== null); pipeline = pipelines.find(p => p.user !== null && p.commit !== null);
}); });
afterEach(() => {
vm.$destroy();
mock.restore();
});
describe('successful request', () => { describe('successful request', () => {
describe('without pipelines', () => { describe('without pipelines', () => {
const pipelinesEmptyResponse = (request, next) => {
next(request.respondWith(JSON.stringify([]), {
status: 200,
}));
};
beforeEach(function () { beforeEach(function () {
Vue.http.interceptors.push(pipelinesEmptyResponse); mock.onGet('endpoint.json').reply(200, []);
this.component = new PipelinesTable({ vm = mountComponent(PipelinesTable, {
propsData: { endpoint: 'endpoint.json',
endpoint: 'endpoint',
helpPagePath: 'foo', helpPagePath: 'foo',
emptyStateSvgPath: 'foo', emptyStateSvgPath: 'foo',
errorStateSvgPath: 'foo', errorStateSvgPath: 'foo',
autoDevopsHelpPath: 'foo', autoDevopsHelpPath: 'foo',
},
}).$mount();
}); });
afterEach(function () {
Vue.http.interceptors = _.without(
Vue.http.interceptors, pipelinesEmptyResponse,
);
this.component.$destroy();
}); });
it('should render the empty state', function (done) { it('should render the empty state', function (done) {
setTimeout(() => { setTimeout(() => {
expect(this.component.$el.querySelector('.empty-state')).toBeDefined(); expect(vm.$el.querySelector('.empty-state')).toBeDefined();
expect(this.component.$el.querySelector('.realtime-loading')).toBe(null); expect(vm.$el.querySelector('.realtime-loading')).toBe(null);
expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBe(null); expect(vm.$el.querySelector('.js-pipelines-error-state')).toBe(null);
done(); done();
}, 1); }, 0);
}); });
}); });
describe('with pipelines', () => { describe('with pipelines', () => {
const pipelinesResponse = (request, next) => {
next(request.respondWith(JSON.stringify([pipeline]), {
status: 200,
}));
};
beforeEach(() => { beforeEach(() => {
Vue.http.interceptors.push(pipelinesResponse); mock.onGet('endpoint.json').reply(200, [pipeline]);
vm = mountComponent(PipelinesTable, {
this.component = new PipelinesTable({ endpoint: 'endpoint.json',
propsData: {
endpoint: 'endpoint',
helpPagePath: 'foo', helpPagePath: 'foo',
emptyStateSvgPath: 'foo', emptyStateSvgPath: 'foo',
errorStateSvgPath: 'foo', errorStateSvgPath: 'foo',
autoDevopsHelpPath: 'foo', autoDevopsHelpPath: 'foo',
},
}).$mount();
}); });
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, pipelinesResponse,
);
this.component.$destroy();
}); });
it('should render a table with the received pipelines', (done) => { it('should render a table with the received pipelines', (done) => {
setTimeout(() => { setTimeout(() => {
expect(this.component.$el.querySelectorAll('.ci-table .commit').length).toEqual(1); expect(vm.$el.querySelectorAll('.ci-table .commit').length).toEqual(1);
expect(this.component.$el.querySelector('.realtime-loading')).toBe(null); expect(vm.$el.querySelector('.realtime-loading')).toBe(null);
expect(this.component.$el.querySelector('.empty-state')).toBe(null); expect(vm.$el.querySelector('.empty-state')).toBe(null);
expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBe(null); expect(vm.$el.querySelector('.js-pipelines-error-state')).toBe(null);
done(); done();
}, 0); }, 0);
}); });
}); });
describe('pipeline badge counts', () => { describe('pipeline badge counts', () => {
const pipelinesResponse = (request, next) => {
next(request.respondWith(JSON.stringify([pipeline]), {
status: 200,
}));
};
beforeEach(() => { beforeEach(() => {
Vue.http.interceptors.push(pipelinesResponse); mock.onGet('endpoint.json').reply(200, [pipeline]);
});
afterEach(() => {
Vue.http.interceptors = _.without(Vue.http.interceptors, pipelinesResponse);
this.component.$destroy();
}); });
it('should receive update-pipelines-count event', (done) => { it('should receive update-pipelines-count event', (done) => {
...@@ -119,54 +88,38 @@ describe('Pipelines table in Commits and Merge requests', () => { ...@@ -119,54 +88,38 @@ describe('Pipelines table in Commits and Merge requests', () => {
done(); done();
}); });
this.component = new PipelinesTable({ vm = mountComponent(PipelinesTable, {
propsData: { endpoint: 'endpoint.json',
endpoint: 'endpoint',
helpPagePath: 'foo', helpPagePath: 'foo',
emptyStateSvgPath: 'foo', emptyStateSvgPath: 'foo',
errorStateSvgPath: 'foo', errorStateSvgPath: 'foo',
autoDevopsHelpPath: 'foo', autoDevopsHelpPath: 'foo',
}, });
}).$mount();
element.appendChild(this.component.$el); element.appendChild(vm.$el);
}); });
}); });
}); });
describe('unsuccessfull request', () => { describe('unsuccessfull request', () => {
const pipelinesErrorResponse = (request, next) => { beforeEach(() => {
next(request.respondWith(JSON.stringify([]), { mock.onGet('endpoint.json').reply(500, []);
status: 500,
}));
};
beforeEach(function () {
Vue.http.interceptors.push(pipelinesErrorResponse);
this.component = new PipelinesTable({ vm = mountComponent(PipelinesTable, {
propsData: { endpoint: 'endpoint.json',
endpoint: 'endpoint',
helpPagePath: 'foo', helpPagePath: 'foo',
emptyStateSvgPath: 'foo', emptyStateSvgPath: 'foo',
errorStateSvgPath: 'foo', errorStateSvgPath: 'foo',
autoDevopsHelpPath: 'foo', autoDevopsHelpPath: 'foo',
},
}).$mount();
}); });
afterEach(function () {
Vue.http.interceptors = _.without(
Vue.http.interceptors, pipelinesErrorResponse,
);
this.component.$destroy();
}); });
it('should render error state', function (done) { it('should render error state', function (done) {
setTimeout(() => { setTimeout(() => {
expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBeDefined(); expect(vm.$el.querySelector('.js-pipelines-error-state')).toBeDefined();
expect(this.component.$el.querySelector('.realtime-loading')).toBe(null); expect(vm.$el.querySelector('.realtime-loading')).toBe(null);
expect(this.component.$el.querySelector('.js-empty-state')).toBe(null); expect(vm.$el.querySelector('.js-empty-state')).toBe(null);
expect(this.component.$el.querySelector('.ci-table')).toBe(null); expect(vm.$el.querySelector('.ci-table')).toBe(null);
done(); done();
}, 0); }, 0);
}); });
......
import _ from 'underscore';
import Vue from 'vue'; import Vue from 'vue';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import pipelinesComp from '~/pipelines/components/pipelines.vue'; import pipelinesComp from '~/pipelines/components/pipelines.vue';
import Store from '~/pipelines/stores/pipelines_store'; import Store from '~/pipelines/stores/pipelines_store';
import mountComponent from 'spec/helpers/vue_mount_component_helper'; import mountComponent from 'spec/helpers/vue_mount_component_helper';
...@@ -12,6 +13,8 @@ describe('Pipelines', () => { ...@@ -12,6 +13,8 @@ describe('Pipelines', () => {
let PipelinesComponent; let PipelinesComponent;
let pipelines; let pipelines;
let vm; let vm;
let mock;
const paths = { const paths = {
endpoint: 'twitter/flight/pipelines.json', endpoint: 'twitter/flight/pipelines.json',
autoDevopsPath: '/help/topics/autodevops/index.md', autoDevopsPath: '/help/topics/autodevops/index.md',
...@@ -34,6 +37,8 @@ describe('Pipelines', () => { ...@@ -34,6 +37,8 @@ describe('Pipelines', () => {
}; };
beforeEach(() => { beforeEach(() => {
mock = new MockAdapter(axios);
pipelines = getJSONFixture(jsonFixtureName); pipelines = getJSONFixture(jsonFixtureName);
PipelinesComponent = Vue.extend(pipelinesComp); PipelinesComponent = Vue.extend(pipelinesComp);
...@@ -41,38 +46,14 @@ describe('Pipelines', () => { ...@@ -41,38 +46,14 @@ describe('Pipelines', () => {
afterEach(() => { afterEach(() => {
vm.$destroy(); vm.$destroy();
mock.restore();
}); });
const pipelinesInterceptor = (request, next) => {
next(request.respondWith(JSON.stringify(pipelines), {
status: 200,
}));
};
const emptyStateInterceptor = (request, next) => {
next(request.respondWith(JSON.stringify({
pipelines: [],
count: {
all: 0,
pending: 0,
running: 0,
finished: 0,
},
}), {
status: 200,
}));
};
const errorInterceptor = (request, next) => {
next(request.respondWith(JSON.stringify({}), {
status: 500,
}));
};
describe('With permission', () => { describe('With permission', () => {
describe('With pipelines in main tab', () => { describe('With pipelines in main tab', () => {
beforeEach((done) => { beforeEach((done) => {
Vue.http.interceptors.push(pipelinesInterceptor); mock.onGet('twitter/flight/pipelines.json').reply(200, pipelines);
vm = mountComponent(PipelinesComponent, { vm = mountComponent(PipelinesComponent, {
store: new Store(), store: new Store(),
hasGitlabCi: true, hasGitlabCi: true,
...@@ -85,12 +66,6 @@ describe('Pipelines', () => { ...@@ -85,12 +66,6 @@ describe('Pipelines', () => {
}); });
}); });
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, pipelinesInterceptor,
);
});
it('renders tabs', () => { it('renders tabs', () => {
expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All'); expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All');
}); });
...@@ -116,7 +91,15 @@ describe('Pipelines', () => { ...@@ -116,7 +91,15 @@ describe('Pipelines', () => {
describe('Without pipelines on main tab with CI', () => { describe('Without pipelines on main tab with CI', () => {
beforeEach((done) => { beforeEach((done) => {
Vue.http.interceptors.push(emptyStateInterceptor); mock.onGet('twitter/flight/pipelines.json').reply(200, {
pipelines: [],
count: {
all: 0,
pending: 0,
running: 0,
finished: 0,
},
});
vm = mountComponent(PipelinesComponent, { vm = mountComponent(PipelinesComponent, {
store: new Store(), store: new Store(),
hasGitlabCi: true, hasGitlabCi: true,
...@@ -129,12 +112,6 @@ describe('Pipelines', () => { ...@@ -129,12 +112,6 @@ describe('Pipelines', () => {
}); });
}); });
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, emptyStateInterceptor,
);
});
it('renders tabs', () => { it('renders tabs', () => {
expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All'); expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All');
}); });
...@@ -158,7 +135,15 @@ describe('Pipelines', () => { ...@@ -158,7 +135,15 @@ describe('Pipelines', () => {
describe('Without pipelines nor CI', () => { describe('Without pipelines nor CI', () => {
beforeEach((done) => { beforeEach((done) => {
Vue.http.interceptors.push(emptyStateInterceptor); mock.onGet('twitter/flight/pipelines.json').reply(200, {
pipelines: [],
count: {
all: 0,
pending: 0,
running: 0,
finished: 0,
},
});
vm = mountComponent(PipelinesComponent, { vm = mountComponent(PipelinesComponent, {
store: new Store(), store: new Store(),
hasGitlabCi: false, hasGitlabCi: false,
...@@ -171,12 +156,6 @@ describe('Pipelines', () => { ...@@ -171,12 +156,6 @@ describe('Pipelines', () => {
}); });
}); });
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, emptyStateInterceptor,
);
});
it('renders empty state', () => { it('renders empty state', () => {
expect(vm.$el.querySelector('.js-empty-state h4').textContent.trim()).toEqual('Build with confidence'); expect(vm.$el.querySelector('.js-empty-state h4').textContent.trim()).toEqual('Build with confidence');
expect(vm.$el.querySelector('.js-get-started-pipelines').getAttribute('href')).toEqual(paths.helpPagePath); expect(vm.$el.querySelector('.js-get-started-pipelines').getAttribute('href')).toEqual(paths.helpPagePath);
...@@ -192,7 +171,7 @@ describe('Pipelines', () => { ...@@ -192,7 +171,7 @@ describe('Pipelines', () => {
describe('When API returns error', () => { describe('When API returns error', () => {
beforeEach((done) => { beforeEach((done) => {
Vue.http.interceptors.push(errorInterceptor); mock.onGet('twitter/flight/pipelines.json').reply(500, {});
vm = mountComponent(PipelinesComponent, { vm = mountComponent(PipelinesComponent, {
store: new Store(), store: new Store(),
hasGitlabCi: false, hasGitlabCi: false,
...@@ -205,12 +184,6 @@ describe('Pipelines', () => { ...@@ -205,12 +184,6 @@ describe('Pipelines', () => {
}); });
}); });
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, errorInterceptor,
);
});
it('renders tabs', () => { it('renders tabs', () => {
expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All'); expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All');
}); });
...@@ -230,7 +203,8 @@ describe('Pipelines', () => { ...@@ -230,7 +203,8 @@ describe('Pipelines', () => {
describe('Without permission', () => { describe('Without permission', () => {
describe('With pipelines in main tab', () => { describe('With pipelines in main tab', () => {
beforeEach((done) => { beforeEach((done) => {
Vue.http.interceptors.push(pipelinesInterceptor); mock.onGet('twitter/flight/pipelines.json').reply(200, pipelines);
vm = mountComponent(PipelinesComponent, { vm = mountComponent(PipelinesComponent, {
store: new Store(), store: new Store(),
hasGitlabCi: false, hasGitlabCi: false,
...@@ -243,12 +217,6 @@ describe('Pipelines', () => { ...@@ -243,12 +217,6 @@ describe('Pipelines', () => {
}); });
}); });
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, pipelinesInterceptor,
);
});
it('renders tabs', () => { it('renders tabs', () => {
expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All'); expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All');
}); });
...@@ -268,7 +236,16 @@ describe('Pipelines', () => { ...@@ -268,7 +236,16 @@ describe('Pipelines', () => {
describe('Without pipelines on main tab with CI', () => { describe('Without pipelines on main tab with CI', () => {
beforeEach((done) => { beforeEach((done) => {
Vue.http.interceptors.push(emptyStateInterceptor); mock.onGet('twitter/flight/pipelines.json').reply(200, {
pipelines: [],
count: {
all: 0,
pending: 0,
running: 0,
finished: 0,
},
});
vm = mountComponent(PipelinesComponent, { vm = mountComponent(PipelinesComponent, {
store: new Store(), store: new Store(),
hasGitlabCi: true, hasGitlabCi: true,
...@@ -281,11 +258,6 @@ describe('Pipelines', () => { ...@@ -281,11 +258,6 @@ describe('Pipelines', () => {
}); });
}); });
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, emptyStateInterceptor,
);
});
it('renders tabs', () => { it('renders tabs', () => {
expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All'); expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All');
}); });
...@@ -303,7 +275,16 @@ describe('Pipelines', () => { ...@@ -303,7 +275,16 @@ describe('Pipelines', () => {
describe('Without pipelines nor CI', () => { describe('Without pipelines nor CI', () => {
beforeEach((done) => { beforeEach((done) => {
Vue.http.interceptors.push(emptyStateInterceptor); mock.onGet('twitter/flight/pipelines.json').reply(200, {
pipelines: [],
count: {
all: 0,
pending: 0,
running: 0,
finished: 0,
},
});
vm = mountComponent(PipelinesComponent, { vm = mountComponent(PipelinesComponent, {
store: new Store(), store: new Store(),
hasGitlabCi: false, hasGitlabCi: false,
...@@ -316,12 +297,6 @@ describe('Pipelines', () => { ...@@ -316,12 +297,6 @@ describe('Pipelines', () => {
}); });
}); });
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, emptyStateInterceptor,
);
});
it('renders empty state without button to set CI', () => { it('renders empty state without button to set CI', () => {
expect(vm.$el.querySelector('.js-empty-state').textContent.trim()).toEqual('This project is not currently set up to run pipelines.'); expect(vm.$el.querySelector('.js-empty-state').textContent.trim()).toEqual('This project is not currently set up to run pipelines.');
expect(vm.$el.querySelector('.js-get-started-pipelines')).toBeNull(); expect(vm.$el.querySelector('.js-get-started-pipelines')).toBeNull();
...@@ -337,7 +312,8 @@ describe('Pipelines', () => { ...@@ -337,7 +312,8 @@ describe('Pipelines', () => {
describe('When API returns error', () => { describe('When API returns error', () => {
beforeEach((done) => { beforeEach((done) => {
Vue.http.interceptors.push(errorInterceptor); mock.onGet('twitter/flight/pipelines.json').reply(500, {});
vm = mountComponent(PipelinesComponent, { vm = mountComponent(PipelinesComponent, {
store: new Store(), store: new Store(),
hasGitlabCi: false, hasGitlabCi: false,
...@@ -350,12 +326,6 @@ describe('Pipelines', () => { ...@@ -350,12 +326,6 @@ describe('Pipelines', () => {
}); });
}); });
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, errorInterceptor,
);
});
it('renders tabs', () => { it('renders tabs', () => {
expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All'); expect(vm.$el.querySelector('.js-pipelines-tab-all').textContent.trim()).toContain('All');
}); });
...@@ -375,7 +345,8 @@ describe('Pipelines', () => { ...@@ -375,7 +345,8 @@ describe('Pipelines', () => {
describe('successfull request', () => { describe('successfull request', () => {
describe('with pipelines', () => { describe('with pipelines', () => {
beforeEach(() => { beforeEach(() => {
Vue.http.interceptors.push(pipelinesInterceptor); mock.onGet('twitter/flight/pipelines.json').reply(200, pipelines);
vm = mountComponent(PipelinesComponent, { vm = mountComponent(PipelinesComponent, {
store: new Store(), store: new Store(),
hasGitlabCi: true, hasGitlabCi: true,
...@@ -384,12 +355,6 @@ describe('Pipelines', () => { ...@@ -384,12 +355,6 @@ describe('Pipelines', () => {
}); });
}); });
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, pipelinesInterceptor,
);
});
it('should render table', (done) => { it('should render table', (done) => {
setTimeout(() => { setTimeout(() => {
expect(vm.$el.querySelector('.table-holder')).toBeDefined(); expect(vm.$el.querySelector('.table-holder')).toBeDefined();
......
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