Converted job.js to axios
This commit is contained in:
Phil Hughes
parent
7c659e5b53
commit
d504118402
2 changed files with 141 additions and 128 deletions
|
|
@ -1,4 +1,5 @@
|
|||
import _ from 'underscore';
|
||||
import axios from './lib/utils/axios_utils';
|
||||
import { visitUrl } from './lib/utils/url_utility';
|
||||
import bp from './breakpoints';
|
||||
import { numberToHumanSize } from './lib/utils/number_utils';
|
||||
|
|
@ -171,11 +172,12 @@ export default class Job {
|
|||
}
|
||||
|
||||
getBuildTrace() {
|
||||
return $.ajax({
|
||||
url: `${this.pagePath}/trace.json`,
|
||||
data: { state: this.state },
|
||||
return axios.get(`${this.pagePath}/trace.json`, {
|
||||
params: { state: this.state },
|
||||
})
|
||||
.done((log) => {
|
||||
.then((res) => {
|
||||
const log = res.data;
|
||||
|
||||
setCiStatusFavicon(`${this.pagePath}/status.json`);
|
||||
|
||||
if (log.state) {
|
||||
|
|
@ -217,7 +219,7 @@ export default class Job {
|
|||
visitUrl(this.pagePath);
|
||||
}
|
||||
})
|
||||
.fail(() => {
|
||||
.catch(() => {
|
||||
this.$buildRefreshAnimation.remove();
|
||||
})
|
||||
.then(() => {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import MockAdaptor from 'axios-mock-adapter';
|
||||
import axios from '~/lib/utils/axios_utils';
|
||||
import { numberToHumanSize } from '~/lib/utils/number_utils';
|
||||
import * as urlUtils from '~/lib/utils/url_utility';
|
||||
import '~/lib/utils/datetime_utility';
|
||||
|
|
@ -6,11 +8,31 @@ import '~/breakpoints';
|
|||
|
||||
describe('Job', () => {
|
||||
const JOB_URL = `${gl.TEST_HOST}/frontend-fixtures/builds-project/-/jobs/1`;
|
||||
let mock;
|
||||
let response;
|
||||
|
||||
function waitForPromise() {
|
||||
return new Promise(resolve => requestAnimationFrame(resolve));
|
||||
}
|
||||
|
||||
preloadFixtures('builds/build-with-artifacts.html.raw');
|
||||
|
||||
beforeEach(() => {
|
||||
loadFixtures('builds/build-with-artifacts.html.raw');
|
||||
|
||||
spyOn(urlUtils, 'visitUrl');
|
||||
|
||||
mock = new MockAdaptor(axios);
|
||||
|
||||
mock.onGet(new RegExp(`${JOB_URL}/trace.json?(.*)`)).reply(() => {
|
||||
return [200, response];
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
mock.restore();
|
||||
|
||||
response = {};
|
||||
});
|
||||
|
||||
describe('class constructor', () => {
|
||||
|
|
@ -55,170 +77,159 @@ describe('Job', () => {
|
|||
});
|
||||
|
||||
describe('running build', () => {
|
||||
it('updates the build trace on an interval', function () {
|
||||
const deferred1 = $.Deferred();
|
||||
const deferred2 = $.Deferred();
|
||||
const deferred3 = $.Deferred();
|
||||
spyOn($, 'ajax').and.returnValues(deferred1.promise(), deferred2.promise(), deferred3.promise());
|
||||
spyOn(urlUtils, 'visitUrl');
|
||||
|
||||
deferred1.resolve({
|
||||
it('updates the build trace on an interval', function (done) {
|
||||
response = {
|
||||
html: '<span>Update<span>',
|
||||
status: 'running',
|
||||
state: 'newstate',
|
||||
append: true,
|
||||
complete: false,
|
||||
});
|
||||
|
||||
deferred2.resolve();
|
||||
|
||||
deferred3.resolve({
|
||||
html: '<span>More</span>',
|
||||
status: 'running',
|
||||
state: 'finalstate',
|
||||
append: true,
|
||||
complete: true,
|
||||
});
|
||||
};
|
||||
|
||||
this.job = new Job();
|
||||
|
||||
expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
|
||||
expect(this.job.state).toBe('newstate');
|
||||
waitForPromise()
|
||||
.then(() => {
|
||||
expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
|
||||
expect(this.job.state).toBe('newstate');
|
||||
|
||||
jasmine.clock().tick(4001);
|
||||
|
||||
expect($('#build-trace .js-build-output').text()).toMatch(/UpdateMore/);
|
||||
expect(this.job.state).toBe('finalstate');
|
||||
response = {
|
||||
html: '<span>More</span>',
|
||||
status: 'running',
|
||||
state: 'finalstate',
|
||||
append: true,
|
||||
complete: true,
|
||||
};
|
||||
})
|
||||
.then(() => jasmine.clock().tick(4001))
|
||||
.then(waitForPromise)
|
||||
.then(() => {
|
||||
expect($('#build-trace .js-build-output').text()).toMatch(/UpdateMore/);
|
||||
expect(this.job.state).toBe('finalstate');
|
||||
})
|
||||
.then(done)
|
||||
.catch(done.fail);
|
||||
});
|
||||
|
||||
it('replaces the entire build trace', () => {
|
||||
const deferred1 = $.Deferred();
|
||||
const deferred2 = $.Deferred();
|
||||
const deferred3 = $.Deferred();
|
||||
|
||||
spyOn($, 'ajax').and.returnValues(deferred1.promise(), deferred2.promise(), deferred3.promise());
|
||||
|
||||
spyOn(urlUtils, 'visitUrl');
|
||||
|
||||
deferred1.resolve({
|
||||
it('replaces the entire build trace', (done) => {
|
||||
response = {
|
||||
html: '<span>Update<span>',
|
||||
status: 'running',
|
||||
append: false,
|
||||
complete: false,
|
||||
});
|
||||
|
||||
deferred2.resolve();
|
||||
|
||||
deferred3.resolve({
|
||||
html: '<span>Different</span>',
|
||||
status: 'running',
|
||||
append: false,
|
||||
});
|
||||
};
|
||||
|
||||
this.job = new Job();
|
||||
|
||||
expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
|
||||
waitForPromise()
|
||||
.then(() => {
|
||||
expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
|
||||
|
||||
jasmine.clock().tick(4001);
|
||||
|
||||
expect($('#build-trace .js-build-output').text()).not.toMatch(/Update/);
|
||||
expect($('#build-trace .js-build-output').text()).toMatch(/Different/);
|
||||
response = {
|
||||
html: '<span>Different</span>',
|
||||
status: 'running',
|
||||
append: false,
|
||||
};
|
||||
})
|
||||
.then(() => jasmine.clock().tick(4001))
|
||||
.then(waitForPromise)
|
||||
.then(() => {
|
||||
expect($('#build-trace .js-build-output').text()).not.toMatch(/Update/);
|
||||
expect($('#build-trace .js-build-output').text()).toMatch(/Different/);
|
||||
})
|
||||
.then(done)
|
||||
.catch(done.fail);
|
||||
});
|
||||
});
|
||||
|
||||
describe('truncated information', () => {
|
||||
describe('when size is less than total', () => {
|
||||
it('shows information about truncated log', () => {
|
||||
spyOn(urlUtils, 'visitUrl');
|
||||
const deferred = $.Deferred();
|
||||
spyOn($, 'ajax').and.returnValue(deferred.promise());
|
||||
|
||||
deferred.resolve({
|
||||
it('shows information about truncated log', (done) => {
|
||||
response = {
|
||||
html: '<span>Update</span>',
|
||||
status: 'success',
|
||||
append: false,
|
||||
size: 50,
|
||||
total: 100,
|
||||
});
|
||||
};
|
||||
|
||||
this.job = new Job();
|
||||
|
||||
expect(document.querySelector('.js-truncated-info').classList).not.toContain('hidden');
|
||||
waitForPromise()
|
||||
.then(() => {
|
||||
expect(document.querySelector('.js-truncated-info').classList).not.toContain('hidden');
|
||||
})
|
||||
.then(done)
|
||||
.catch(done.fail);
|
||||
});
|
||||
|
||||
it('shows the size in KiB', () => {
|
||||
it('shows the size in KiB', (done) => {
|
||||
const size = 50;
|
||||
spyOn(urlUtils, 'visitUrl');
|
||||
const deferred = $.Deferred();
|
||||
|
||||
spyOn($, 'ajax').and.returnValue(deferred.promise());
|
||||
deferred.resolve({
|
||||
response = {
|
||||
html: '<span>Update</span>',
|
||||
status: 'success',
|
||||
append: false,
|
||||
size,
|
||||
total: 100,
|
||||
});
|
||||
};
|
||||
|
||||
this.job = new Job();
|
||||
|
||||
expect(
|
||||
document.querySelector('.js-truncated-info-size').textContent.trim(),
|
||||
).toEqual(`${numberToHumanSize(size)}`);
|
||||
waitForPromise()
|
||||
.then(() => {
|
||||
expect(
|
||||
document.querySelector('.js-truncated-info-size').textContent.trim(),
|
||||
).toEqual(`${numberToHumanSize(size)}`);
|
||||
})
|
||||
.then(done)
|
||||
.catch(done.fail);
|
||||
});
|
||||
|
||||
it('shows incremented size', () => {
|
||||
const deferred1 = $.Deferred();
|
||||
const deferred2 = $.Deferred();
|
||||
const deferred3 = $.Deferred();
|
||||
|
||||
spyOn($, 'ajax').and.returnValues(deferred1.promise(), deferred2.promise(), deferred3.promise());
|
||||
|
||||
spyOn(urlUtils, 'visitUrl');
|
||||
|
||||
deferred1.resolve({
|
||||
it('shows incremented size', (done) => {
|
||||
response = {
|
||||
html: '<span>Update</span>',
|
||||
status: 'success',
|
||||
append: false,
|
||||
size: 50,
|
||||
total: 100,
|
||||
});
|
||||
|
||||
deferred2.resolve();
|
||||
};
|
||||
|
||||
this.job = new Job();
|
||||
|
||||
expect(
|
||||
document.querySelector('.js-truncated-info-size').textContent.trim(),
|
||||
).toEqual(`${numberToHumanSize(50)}`);
|
||||
waitForPromise()
|
||||
.then(() => {
|
||||
expect(
|
||||
document.querySelector('.js-truncated-info-size').textContent.trim(),
|
||||
).toEqual(`${numberToHumanSize(50)}`);
|
||||
|
||||
jasmine.clock().tick(4001);
|
||||
|
||||
deferred3.resolve({
|
||||
html: '<span>Update</span>',
|
||||
status: 'success',
|
||||
append: true,
|
||||
size: 10,
|
||||
total: 100,
|
||||
});
|
||||
|
||||
expect(
|
||||
document.querySelector('.js-truncated-info-size').textContent.trim(),
|
||||
).toEqual(`${numberToHumanSize(60)}`);
|
||||
response = {
|
||||
html: '<span>Update</span>',
|
||||
status: 'success',
|
||||
append: true,
|
||||
size: 10,
|
||||
total: 100,
|
||||
};
|
||||
})
|
||||
.then(() => jasmine.clock().tick(4001))
|
||||
.then(waitForPromise)
|
||||
.then(() => {
|
||||
expect(
|
||||
document.querySelector('.js-truncated-info-size').textContent.trim(),
|
||||
).toEqual(`${numberToHumanSize(60)}`);
|
||||
})
|
||||
.then(done)
|
||||
.catch(done.fail);
|
||||
});
|
||||
|
||||
it('renders the raw link', () => {
|
||||
const deferred = $.Deferred();
|
||||
spyOn(urlUtils, 'visitUrl');
|
||||
|
||||
spyOn($, 'ajax').and.returnValue(deferred.promise());
|
||||
deferred.resolve({
|
||||
response = {
|
||||
html: '<span>Update</span>',
|
||||
status: 'success',
|
||||
append: false,
|
||||
size: 50,
|
||||
total: 100,
|
||||
});
|
||||
};
|
||||
|
||||
this.job = new Job();
|
||||
|
||||
|
|
@ -229,50 +240,50 @@ describe('Job', () => {
|
|||
});
|
||||
|
||||
describe('when size is equal than total', () => {
|
||||
it('does not show the trunctated information', () => {
|
||||
const deferred = $.Deferred();
|
||||
spyOn(urlUtils, 'visitUrl');
|
||||
|
||||
spyOn($, 'ajax').and.returnValue(deferred.promise());
|
||||
deferred.resolve({
|
||||
it('does not show the trunctated information', (done) => {
|
||||
response = {
|
||||
html: '<span>Update</span>',
|
||||
status: 'success',
|
||||
append: false,
|
||||
size: 100,
|
||||
total: 100,
|
||||
});
|
||||
};
|
||||
|
||||
this.job = new Job();
|
||||
|
||||
expect(document.querySelector('.js-truncated-info').classList).toContain('hidden');
|
||||
waitForPromise()
|
||||
.then(() => {
|
||||
expect(document.querySelector('.js-truncated-info').classList).toContain('hidden');
|
||||
})
|
||||
.then(done)
|
||||
.catch(done.fail);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('output trace', () => {
|
||||
beforeEach(() => {
|
||||
const deferred = $.Deferred();
|
||||
spyOn(urlUtils, 'visitUrl');
|
||||
|
||||
spyOn($, 'ajax').and.returnValue(deferred.promise());
|
||||
deferred.resolve({
|
||||
beforeEach((done) => {
|
||||
response = {
|
||||
html: '<span>Update</span>',
|
||||
status: 'success',
|
||||
append: false,
|
||||
size: 50,
|
||||
total: 100,
|
||||
});
|
||||
};
|
||||
|
||||
this.job = new Job();
|
||||
|
||||
waitForPromise()
|
||||
.then(done)
|
||||
.catch(done.fail);
|
||||
});
|
||||
|
||||
it('should render trace controls', () => {
|
||||
const controllers = document.querySelector('.controllers');
|
||||
|
||||
expect(controllers.querySelector('.js-raw-link-controller')).toBeDefined();
|
||||
expect(controllers.querySelector('.js-erase-link')).toBeDefined();
|
||||
expect(controllers.querySelector('.js-scroll-up')).toBeDefined();
|
||||
expect(controllers.querySelector('.js-scroll-down')).toBeDefined();
|
||||
expect(controllers.querySelector('.js-raw-link-controller')).not.toBeNull();
|
||||
expect(controllers.querySelector('.js-scroll-up')).not.toBeNull();
|
||||
expect(controllers.querySelector('.js-scroll-down')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('should render received output', () => {
|
||||
|
|
@ -285,13 +296,13 @@ describe('Job', () => {
|
|||
|
||||
describe('getBuildTrace', () => {
|
||||
it('should request build trace with state parameter', (done) => {
|
||||
spyOn(jQuery, 'ajax').and.callThrough();
|
||||
spyOn(axios, 'get').and.callThrough();
|
||||
// eslint-disable-next-line no-new
|
||||
new Job();
|
||||
|
||||
setTimeout(() => {
|
||||
expect(jQuery.ajax).toHaveBeenCalledWith(
|
||||
{ url: `${JOB_URL}/trace.json`, data: { state: '' } },
|
||||
expect(axios.get).toHaveBeenCalledWith(
|
||||
`${JOB_URL}/trace.json`, { params: { state: '' } },
|
||||
);
|
||||
done();
|
||||
}, 0);
|
||||
|
|
|
|||
Loading…
Reference in a new issue