Commit d320090f authored by Filipa Lacerda's avatar Filipa Lacerda

Update state request from vue resource to axios

parent 9d220da8
...@@ -13,16 +13,16 @@ ...@@ -13,16 +13,16 @@
* 3. Merge request widget * 3. Merge request widget
* 4. Commit widget * 4. Commit widget
*/ */
import axios from '../../lib/utils/axios_utils';
import Flash from '../../flash'; import Flash from '../../flash';
import icon from '../../vue_shared/components/icon.vue'; import Icon from '../../vue_shared/components/icon.vue';
import loadingIcon from '../../vue_shared/components/loading_icon.vue'; import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
export default { export default {
components: { components: {
loadingIcon, LoadingIcon,
icon, Icon,
}, },
directives: { directives: {
...@@ -88,9 +88,8 @@ ...@@ -88,9 +88,8 @@
}, },
fetchJobs() { fetchJobs() {
this.$http.get(this.stage.dropdown_path) axios.get(this.stage.dropdown_path)
.then(response => response.json()) .then(({ data }) => {
.then((data) => {
this.dropdownContent = data.html; this.dropdownContent = data.html;
this.isLoading = false; this.isLoading = false;
}) })
...@@ -98,8 +97,7 @@ ...@@ -98,8 +97,7 @@
this.closeDropdown(); this.closeDropdown();
this.isLoading = false; this.isLoading = false;
const flash = new Flash('Something went wrong on our end.'); Flash('Something went wrong on our end.');
return flash;
}); });
}, },
......
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 stage from '~/pipelines/components/stage.vue'; import stage from '~/pipelines/components/stage.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
describe('Pipelines stage component', () => { describe('Pipelines stage component', () => {
let StageComponent; let StageComponent;
let component; let component;
let mock;
beforeEach(() => { beforeEach(() => {
mock = new MockAdapter(axios);
StageComponent = Vue.extend(stage); StageComponent = Vue.extend(stage);
component = new StageComponent({ component = mountComponent(StageComponent, {
propsData: {
stage: { stage: {
status: { status: {
group: 'success', group: 'success',
icon: 'icon_status_success', icon: 'icon_status_success',
title: 'success', title: 'success',
}, },
dropdown_path: 'foo', dropdown_path: 'path.json',
}, },
updateDropdown: false, updateDropdown: false,
}, });
}).$mount(); });
afterEach(() => {
component.$destroy();
mock.restore();
}); });
it('should render a dropdown with the status icon', () => { it('should render a dropdown with the status icon', () => {
...@@ -31,23 +39,11 @@ describe('Pipelines stage component', () => { ...@@ -31,23 +39,11 @@ describe('Pipelines stage component', () => {
}); });
describe('with successfull request', () => { describe('with successfull request', () => {
const interceptor = (request, next) => {
next(request.respondWith(JSON.stringify({ html: 'foo' }), {
status: 200,
}));
};
beforeEach(() => { beforeEach(() => {
Vue.http.interceptors.push(interceptor); mock.onGet('path.json').reply(200, { html: 'foo' });
});
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, interceptor,
);
}); });
it('should render the received data', (done) => { it('should render the received data', done => {
component.$el.querySelector('button').click(); component.$el.querySelector('button').click();
setTimeout(() => { setTimeout(() => {
...@@ -60,20 +56,8 @@ describe('Pipelines stage component', () => { ...@@ -60,20 +56,8 @@ describe('Pipelines stage component', () => {
}); });
describe('when request fails', () => { describe('when request fails', () => {
const interceptor = (request, next) => {
next(request.respondWith(JSON.stringify({}), {
status: 500,
}));
};
beforeEach(() => { beforeEach(() => {
Vue.http.interceptors.push(interceptor); mock.onGet('path.json').reply(500);
});
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, interceptor,
);
}); });
it('should close the dropdown', () => { it('should close the dropdown', () => {
...@@ -86,33 +70,18 @@ describe('Pipelines stage component', () => { ...@@ -86,33 +70,18 @@ describe('Pipelines stage component', () => {
}); });
describe('update endpoint correctly', () => { describe('update endpoint correctly', () => {
const updatedInterceptor = (request, next) => {
if (request.url === 'bar') {
next(request.respondWith(JSON.stringify({ html: 'this is the updated content' }), {
status: 200,
}));
}
next();
};
beforeEach(() => { beforeEach(() => {
Vue.http.interceptors.push(updatedInterceptor); mock.onGet('bar.json').reply(200, { html: 'this is the updated content' });
});
afterEach(() => {
Vue.http.interceptors = _.without(
Vue.http.interceptors, updatedInterceptor,
);
}); });
it('should update the stage to request the new endpoint provided', (done) => { it('should update the stage to request the new endpoint provided', done => {
component.stage = { component.stage = {
status: { status: {
group: 'running', group: 'running',
icon: 'running', icon: 'running',
title: 'running', title: 'running',
}, },
dropdown_path: 'bar', dropdown_path: 'bar.json',
}; };
Vue.nextTick(() => { Vue.nextTick(() => {
......
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