Skip to content

G
gitlab-ce
Commit d5041184 authored by Phil Hughes's avatar Phil Hughes
Browse files
Options

Converted job.js to axios

parent 7c659e5b
Show whitespace changes
Inline Side-by-side
Showing with 144 additions and 131 deletions
app/assets/javascripts/job.js
View file @ d5041184
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(() => {
......
spec/javascripts/job_spec.js
View file @ d5041184
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();
this.job = new Job();
waitForPromise()
.then(() => {
expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
expect(this.job.state).toBe('newstate');
deferred3.resolve({
response = {
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');
jasmine.clock().tick(4001);
};
})
.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();
waitForPromise()
.then(() => {
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()).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();
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();
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();
waitForPromise()
.then(() => {
expect(
document.querySelector('.js-truncated-info-size').textContent.trim(),
).toEqual(`${numberToHumanSize(50)}`);
jasmine.clock().tick(4001);
deferred3.resolve({
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();
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);
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7