Converted mini_pipeline_graph_dropdown.js to axios
This commit is contained in:
parent
76b9f1a4c5
commit
b5b304466f
|
@ -1,5 +1,6 @@
|
|||
/* eslint-disable no-new */
|
||||
import Flash from './flash';
|
||||
import flash from './flash';
|
||||
import axios from './lib/utils/axios_utils';
|
||||
|
||||
/**
|
||||
* In each pipelines table we have a mini pipeline graph for each pipeline.
|
||||
|
@ -78,27 +79,22 @@ export default class MiniPipelineGraph {
|
|||
const button = e.relatedTarget;
|
||||
const endpoint = button.dataset.stageEndpoint;
|
||||
|
||||
return $.ajax({
|
||||
dataType: 'json',
|
||||
type: 'GET',
|
||||
url: endpoint,
|
||||
beforeSend: () => {
|
||||
this.renderBuildsList(button, '');
|
||||
this.toggleLoading(button);
|
||||
},
|
||||
success: (data) => {
|
||||
this.renderBuildsList(button, '');
|
||||
this.toggleLoading(button);
|
||||
|
||||
axios.get(endpoint)
|
||||
.then(({ data }) => {
|
||||
this.toggleLoading(button);
|
||||
this.renderBuildsList(button, data.html);
|
||||
this.stopDropdownClickPropagation();
|
||||
},
|
||||
error: () => {
|
||||
})
|
||||
.catch(() => {
|
||||
this.toggleLoading(button);
|
||||
if ($(button).parent().hasClass('open')) {
|
||||
$(button).dropdown('toggle');
|
||||
}
|
||||
new Flash('An error occurred while fetching the builds.', 'alert');
|
||||
},
|
||||
});
|
||||
flash('An error occurred while fetching the builds.', 'alert');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
/* eslint-disable no-new */
|
||||
|
||||
import MockAdapter from 'axios-mock-adapter';
|
||||
import axios from '~/lib/utils/axios_utils';
|
||||
import MiniPipelineGraph from '~/mini_pipeline_graph_dropdown';
|
||||
import '~/flash';
|
||||
import timeoutPromise from './helpers/set_timeout_promise_helper';
|
||||
|
||||
describe('Mini Pipeline Graph Dropdown', () => {
|
||||
preloadFixtures('static/mini_dropdown_graph.html.raw');
|
||||
|
@ -27,6 +29,16 @@ describe('Mini Pipeline Graph Dropdown', () => {
|
|||
});
|
||||
|
||||
describe('When dropdown is clicked', () => {
|
||||
let mock;
|
||||
|
||||
beforeEach(() => {
|
||||
mock = new MockAdapter(axios);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
mock.restore();
|
||||
});
|
||||
|
||||
it('should call getBuildsList', () => {
|
||||
const getBuildsListSpy = spyOn(
|
||||
MiniPipelineGraph.prototype,
|
||||
|
@ -41,46 +53,55 @@ describe('Mini Pipeline Graph Dropdown', () => {
|
|||
});
|
||||
|
||||
it('should make a request to the endpoint provided in the html', () => {
|
||||
const ajaxSpy = spyOn($, 'ajax').and.callFake(function () {});
|
||||
const ajaxSpy = spyOn(axios, 'get').and.callThrough();
|
||||
|
||||
mock.onGet('foobar').reply(200, {
|
||||
html: '',
|
||||
});
|
||||
|
||||
new MiniPipelineGraph({ container: '.js-builds-dropdown-tests' }).bindEvents();
|
||||
|
||||
document.querySelector('.js-builds-dropdown-button').click();
|
||||
expect(ajaxSpy.calls.allArgs()[0][0].url).toEqual('foobar');
|
||||
expect(ajaxSpy.calls.allArgs()[0][0]).toEqual('foobar');
|
||||
});
|
||||
|
||||
it('should not close when user uses cmd/ctrl + click', () => {
|
||||
spyOn($, 'ajax').and.callFake(function (params) {
|
||||
params.success({
|
||||
html: `<li>
|
||||
<a class="mini-pipeline-graph-dropdown-item" href="#">
|
||||
<span class="ci-status-icon ci-status-icon-failed"></span>
|
||||
<span class="ci-build-text">build</span>
|
||||
</a>
|
||||
<a class="ci-action-icon-wrapper js-ci-action-icon" href="#"></a>
|
||||
</li>`,
|
||||
});
|
||||
it('should not close when user uses cmd/ctrl + click', (done) => {
|
||||
mock.onGet('foobar').reply(200, {
|
||||
html: `<li>
|
||||
<a class="mini-pipeline-graph-dropdown-item" href="#">
|
||||
<span class="ci-status-icon ci-status-icon-failed"></span>
|
||||
<span class="ci-build-text">build</span>
|
||||
</a>
|
||||
<a class="ci-action-icon-wrapper js-ci-action-icon" href="#"></a>
|
||||
</li>`,
|
||||
});
|
||||
new MiniPipelineGraph({ container: '.js-builds-dropdown-tests' }).bindEvents();
|
||||
|
||||
document.querySelector('.js-builds-dropdown-button').click();
|
||||
|
||||
document.querySelector('a.mini-pipeline-graph-dropdown-item').click();
|
||||
timeoutPromise()
|
||||
.then(() => {
|
||||
document.querySelector('a.mini-pipeline-graph-dropdown-item').click();
|
||||
})
|
||||
.then(timeoutPromise)
|
||||
.then(() => {
|
||||
expect($('.js-builds-dropdown-list').is(':visible')).toEqual(true);
|
||||
})
|
||||
.then(done)
|
||||
.catch(done.fail);
|
||||
});
|
||||
|
||||
expect($('.js-builds-dropdown-list').is(':visible')).toEqual(true);
|
||||
it('should close the dropdown when request returns an error', (done) => {
|
||||
mock.onGet('foobar').networkError();
|
||||
|
||||
new MiniPipelineGraph({ container: '.js-builds-dropdown-tests' }).bindEvents();
|
||||
|
||||
document.querySelector('.js-builds-dropdown-button').click();
|
||||
|
||||
setTimeout(() => {
|
||||
expect($('.js-builds-dropdown-tests .dropdown').hasClass('open')).toEqual(false);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should close the dropdown when request returns an error', (done) => {
|
||||
spyOn($, 'ajax').and.callFake(options => options.error());
|
||||
|
||||
new MiniPipelineGraph({ container: '.js-builds-dropdown-tests' }).bindEvents();
|
||||
|
||||
document.querySelector('.js-builds-dropdown-button').click();
|
||||
|
||||
setTimeout(() => {
|
||||
expect($('.js-builds-dropdown-tests .dropdown').hasClass('open')).toEqual(false);
|
||||
done();
|
||||
}, 0);
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue