kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Converted job.js to axios

Browse source
This commit is contained in:
Phil Hughes 2018-01-30 16:33:23 +00:00
parent 7c659e5b53
commit d504118402
No known key found for this signature in database
GPG key ID: 32245528C52E0F9F
2 changed files with 141 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/assets/javascripts/job.js
View file

@ -1,4 +1,5 @@
import _ from 'underscore'; import _ from 'underscore';
import axios from './lib/utils/axios_utils';
import { visitUrl } from './lib/utils/url_utility'; import { visitUrl } from './lib/utils/url_utility';
import bp from './breakpoints'; import bp from './breakpoints';
import { numberToHumanSize } from './lib/utils/number_utils'; import { numberToHumanSize } from './lib/utils/number_utils';
@ -171,11 +172,12 @@ export default class Job {
} }
getBuildTrace() { getBuildTrace() {
return $.ajax({ return axios.get(`${this.pagePath}/trace.json`, {
url: `${this.pagePath}/trace.json`, params: { state: this.state },
data: { state: this.state },
}) })
.done((log) => { .then((res) => {
const log = res.data;
setCiStatusFavicon(`${this.pagePath}/status.json`); setCiStatusFavicon(`${this.pagePath}/status.json`);
if (log.state) { if (log.state) {
@ -217,7 +219,7 @@ export default class Job {
visitUrl(this.pagePath); visitUrl(this.pagePath);
} }
}) })
.fail(() => { .catch(() => {
this.$buildRefreshAnimation.remove(); this.$buildRefreshAnimation.remove();
}) })
.then(() => { .then(() => {

209
spec/javascripts/job_spec.js
View file

@ -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 { numberToHumanSize } from '~/lib/utils/number_utils';
import * as urlUtils from '~/lib/utils/url_utility'; import * as urlUtils from '~/lib/utils/url_utility';
import '~/lib/utils/datetime_utility'; import '~/lib/utils/datetime_utility';
@ -6,11 +8,31 @@ import '~/breakpoints';
describe('Job', () => { describe('Job', () => {
const JOB_URL = `${gl.TEST_HOST}/frontend-fixtures/builds-project/-/jobs/1`; 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'); preloadFixtures('builds/build-with-artifacts.html.raw');
beforeEach(() => { beforeEach(() => {
loadFixtures('builds/build-with-artifacts.html.raw'); 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', () => { describe('class constructor', () => {
@ -55,170 +77,159 @@ describe('Job', () => {
}); });
describe('running build', () => { describe('running build', () => {
it('updates the build trace on an interval', function () { it('updates the build trace on an interval', function (done) {
const deferred1 = $.Deferred(); response = {
const deferred2 = $.Deferred();
const deferred3 = $.Deferred();
spyOn($, 'ajax').and.returnValues(deferred1.promise(), deferred2.promise(), deferred3.promise());
spyOn(urlUtils, 'visitUrl');
deferred1.resolve({
html: '<span>Update<span>', html: '<span>Update<span>',
status: 'running', status: 'running',
state: 'newstate', state: 'newstate',
append: true, append: true,
complete: false, complete: false,
}); };
deferred2.resolve(); this.job = new Job();
deferred3.resolve({ waitForPromise()
.then(() => {
expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
expect(this.job.state).toBe('newstate');
response = {
html: '<span>More</span>', html: '<span>More</span>',
status: 'running', status: 'running',
state: 'finalstate', state: 'finalstate',
append: true, append: true,
complete: true, complete: true,
}); };
})
this.job = new Job(); .then(() => jasmine.clock().tick(4001))
.then(waitForPromise)
expect($('#build-trace .js-build-output').text()).toMatch(/Update/); .then(() => {
expect(this.job.state).toBe('newstate');
jasmine.clock().tick(4001);
expect($('#build-trace .js-build-output').text()).toMatch(/UpdateMore/); expect($('#build-trace .js-build-output').text()).toMatch(/UpdateMore/);
expect(this.job.state).toBe('finalstate'); expect(this.job.state).toBe('finalstate');
})
.then(done)
.catch(done.fail);
}); });
it('replaces the entire build trace', () => { it('replaces the entire build trace', (done) => {
const deferred1 = $.Deferred(); response = {
const deferred2 = $.Deferred();
const deferred3 = $.Deferred();
spyOn($, 'ajax').and.returnValues(deferred1.promise(), deferred2.promise(), deferred3.promise());
spyOn(urlUtils, 'visitUrl');
deferred1.resolve({
html: '<span>Update<span>', html: '<span>Update<span>',
status: 'running', status: 'running',
append: false, append: false,
complete: false, complete: false,
}); };
deferred2.resolve();
deferred3.resolve({
html: '<span>Different</span>',
status: 'running',
append: false,
});
this.job = new Job(); this.job = new Job();
waitForPromise()
.then(() => {
expect($('#build-trace .js-build-output').text()).toMatch(/Update/); expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
jasmine.clock().tick(4001); 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()).not.toMatch(/Update/);
expect($('#build-trace .js-build-output').text()).toMatch(/Different/); expect($('#build-trace .js-build-output').text()).toMatch(/Different/);
})
.then(done)
.catch(done.fail);
}); });
}); });
describe('truncated information', () => { describe('truncated information', () => {
describe('when size is less than total', () => { describe('when size is less than total', () => {
it('shows information about truncated log', () => { it('shows information about truncated log', (done) => {
spyOn(urlUtils, 'visitUrl'); response = {
const deferred = $.Deferred();
spyOn($, 'ajax').and.returnValue(deferred.promise());
deferred.resolve({
html: '<span>Update</span>', html: '<span>Update</span>',
status: 'success', status: 'success',
append: false, append: false,
size: 50, size: 50,
total: 100, total: 100,
}); };
this.job = new Job(); this.job = new Job();
waitForPromise()
.then(() => {
expect(document.querySelector('.js-truncated-info').classList).not.toContain('hidden'); 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; const size = 50;
spyOn(urlUtils, 'visitUrl');
const deferred = $.Deferred();
spyOn($, 'ajax').and.returnValue(deferred.promise()); response = {
deferred.resolve({
html: '<span>Update</span>', html: '<span>Update</span>',
status: 'success', status: 'success',
append: false, append: false,
size, size,
total: 100, total: 100,
}); };
this.job = new Job(); this.job = new Job();
waitForPromise()
.then(() => {
expect( expect(
document.querySelector('.js-truncated-info-size').textContent.trim(), document.querySelector('.js-truncated-info-size').textContent.trim(),
).toEqual(`${numberToHumanSize(size)}`); ).toEqual(`${numberToHumanSize(size)}`);
})
.then(done)
.catch(done.fail);
}); });
it('shows incremented size', () => { it('shows incremented size', (done) => {
const deferred1 = $.Deferred(); response = {
const deferred2 = $.Deferred();
const deferred3 = $.Deferred();
spyOn($, 'ajax').and.returnValues(deferred1.promise(), deferred2.promise(), deferred3.promise());
spyOn(urlUtils, 'visitUrl');
deferred1.resolve({
html: '<span>Update</span>', html: '<span>Update</span>',
status: 'success', status: 'success',
append: false, append: false,
size: 50, size: 50,
total: 100, total: 100,
}); };
deferred2.resolve();
this.job = new Job(); this.job = new Job();
waitForPromise()
.then(() => {
expect( expect(
document.querySelector('.js-truncated-info-size').textContent.trim(), document.querySelector('.js-truncated-info-size').textContent.trim(),
).toEqual(`${numberToHumanSize(50)}`); ).toEqual(`${numberToHumanSize(50)}`);
jasmine.clock().tick(4001); response = {
deferred3.resolve({
html: '<span>Update</span>', html: '<span>Update</span>',
status: 'success', status: 'success',
append: true, append: true,
size: 10, size: 10,
total: 100, total: 100,
}); };
})
.then(() => jasmine.clock().tick(4001))
.then(waitForPromise)
.then(() => {
expect( expect(
document.querySelector('.js-truncated-info-size').textContent.trim(), document.querySelector('.js-truncated-info-size').textContent.trim(),
).toEqual(`${numberToHumanSize(60)}`); ).toEqual(`${numberToHumanSize(60)}`);
})
.then(done)
.catch(done.fail);
}); });
it('renders the raw link', () => { it('renders the raw link', () => {
const deferred = $.Deferred(); response = {
spyOn(urlUtils, 'visitUrl');
spyOn($, 'ajax').and.returnValue(deferred.promise());
deferred.resolve({
html: '<span>Update</span>', html: '<span>Update</span>',
status: 'success', status: 'success',
append: false, append: false,
size: 50, size: 50,
total: 100, total: 100,
}); };
this.job = new Job(); this.job = new Job();
@ -229,50 +240,50 @@ describe('Job', () => {
}); });
describe('when size is equal than total', () => { describe('when size is equal than total', () => {
it('does not show the trunctated information', () => { it('does not show the trunctated information', (done) => {
const deferred = $.Deferred(); response = {
spyOn(urlUtils, 'visitUrl');
spyOn($, 'ajax').and.returnValue(deferred.promise());
deferred.resolve({
html: '<span>Update</span>', html: '<span>Update</span>',
status: 'success', status: 'success',
append: false, append: false,
size: 100, size: 100,
total: 100, total: 100,
}); };
this.job = new Job(); this.job = new Job();
waitForPromise()
.then(() => {
expect(document.querySelector('.js-truncated-info').classList).toContain('hidden'); expect(document.querySelector('.js-truncated-info').classList).toContain('hidden');
})
.then(done)
.catch(done.fail);
}); });
}); });
}); });
describe('output trace', () => { describe('output trace', () => {
beforeEach(() => { beforeEach((done) => {
const deferred = $.Deferred(); response = {
spyOn(urlUtils, 'visitUrl');
spyOn($, 'ajax').and.returnValue(deferred.promise());
deferred.resolve({
html: '<span>Update</span>', html: '<span>Update</span>',
status: 'success', status: 'success',
append: false, append: false,
size: 50, size: 50,
total: 100, total: 100,
}); };
this.job = new Job(); this.job = new Job();
waitForPromise()
.then(done)
.catch(done.fail);
}); });
it('should render trace controls', () => { it('should render trace controls', () => {
const controllers = document.querySelector('.controllers'); const controllers = document.querySelector('.controllers');
expect(controllers.querySelector('.js-raw-link-controller')).toBeDefined(); expect(controllers.querySelector('.js-raw-link-controller')).not.toBeNull();
expect(controllers.querySelector('.js-erase-link')).toBeDefined(); expect(controllers.querySelector('.js-scroll-up')).not.toBeNull();
expect(controllers.querySelector('.js-scroll-up')).toBeDefined(); expect(controllers.querySelector('.js-scroll-down')).not.toBeNull();
expect(controllers.querySelector('.js-scroll-down')).toBeDefined();
}); });
it('should render received output', () => { it('should render received output', () => {
@ -285,13 +296,13 @@ describe('Job', () => {
describe('getBuildTrace', () => { describe('getBuildTrace', () => {
it('should request build trace with state parameter', (done) => { 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 // eslint-disable-next-line no-new
new Job(); new Job();
setTimeout(() => { setTimeout(() => {
expect(jQuery.ajax).toHaveBeenCalledWith( expect(axios.get).toHaveBeenCalledWith(
{ url: `${JOB_URL}/trace.json`, data: { state: '' } }, `${JOB_URL}/trace.json`, { params: { state: '' } },
); );
done(); done();
}, 0); }, 0);