gitlab-org--gitlab-foss/spec/javascripts/job_spec.js

319 lines
8.7 KiB
JavaScript
Raw Normal View History

import $ from 'jquery';
2018-01-31 04:27:30 -05:00
import MockAdapter from 'axios-mock-adapter';
2018-01-30 11:33:23 -05:00
import axios from '~/lib/utils/axios_utils';
import { numberToHumanSize } from '~/lib/utils/number_utils';
import '~/lib/utils/datetime_utility';
import Job from '~/job';
import '~/breakpoints';
describe('Job', () => {
const JOB_URL = `${gl.TEST_HOST}/frontend-fixtures/builds-project/-/jobs/1`;
2018-01-30 11:33:23 -05:00
let mock;
let response;
let job;
2018-01-30 11:33:23 -05:00
function waitForPromise() {
return new Promise(resolve => requestAnimationFrame(resolve));
}
preloadFixtures('builds/build-with-artifacts.html.raw');
beforeEach(() => {
loadFixtures('builds/build-with-artifacts.html.raw');
2018-01-30 11:33:23 -05:00
spyOnDependency(Job, 'visitUrl');
2018-01-30 11:33:23 -05:00
response = {};
2018-01-31 04:27:30 -05:00
mock = new MockAdapter(axios);
2018-01-30 11:33:23 -05:00
2018-01-31 04:27:30 -05:00
mock.onGet(new RegExp(`${JOB_URL}/trace.json?(.*)`)).reply(() => [200, response]);
2018-01-30 11:33:23 -05:00
});
afterEach(() => {
mock.restore();
clearTimeout(job.timeout);
});
describe('class constructor', () => {
beforeEach(() => {
jasmine.clock().install();
});
afterEach(() => {
jasmine.clock().uninstall();
});
describe('setup', () => {
beforeEach(function (done) {
job = new Job();
waitForPromise()
.then(done)
.catch(done.fail);
});
it('copies build options', function () {
expect(job.pagePath).toBe(JOB_URL);
expect(job.buildStatus).toBe('success');
expect(job.buildStage).toBe('test');
expect(job.state).toBe('');
});
it('only shows the jobs matching the current stage', () => {
expect($('.build-job[data-stage="build"]').is(':visible')).toBe(false);
expect($('.build-job[data-stage="test"]').is(':visible')).toBe(true);
expect($('.build-job[data-stage="deploy"]').is(':visible')).toBe(false);
});
2016-11-18 07:18:49 -05:00
it('selects the current stage in the build dropdown menu', () => {
expect($('.stage-selection').text()).toBe('test');
});
2016-11-18 07:18:49 -05:00
it('updates the jobs when the build dropdown changes', () => {
$('.stage-item:contains("build")').click();
expect($('.stage-selection').text()).toBe('build');
expect($('.build-job[data-stage="build"]').is(':visible')).toBe(true);
expect($('.build-job[data-stage="test"]').is(':visible')).toBe(false);
expect($('.build-job[data-stage="deploy"]').is(':visible')).toBe(false);
});
});
describe('running build', () => {
2018-01-30 11:33:23 -05:00
it('updates the build trace on an interval', function (done) {
response = {
html: '<span>Update<span>',
status: 'running',
state: 'newstate',
append: true,
complete: false,
2018-01-30 11:33:23 -05:00
};
job = new Job();
2017-05-30 04:43:13 -04:00
2018-01-30 11:33:23 -05:00
waitForPromise()
.then(() => {
expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
expect(job.state).toBe('newstate');
2018-01-30 11:33:23 -05:00
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(job.state).toBe('finalstate');
2018-01-30 11:33:23 -05:00
})
.then(done)
.catch(done.fail);
});
2018-01-30 11:33:23 -05:00
it('replaces the entire build trace', (done) => {
response = {
2017-05-30 04:43:13 -04:00
html: '<span>Update<span>',
status: 'running',
append: false,
complete: false,
2018-01-30 11:33:23 -05:00
};
job = new Job();
2017-05-30 04:43:13 -04:00
2018-01-30 11:33:23 -05:00
waitForPromise()
.then(() => {
expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
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);
});
2017-05-30 04:43:13 -04:00
});
2017-05-30 04:43:13 -04:00
describe('truncated information', () => {
describe('when size is less than total', () => {
2018-01-30 11:33:23 -05:00
it('shows information about truncated log', (done) => {
response = {
2017-05-30 04:43:13 -04:00
html: '<span>Update</span>',
status: 'success',
append: false,
size: 50,
total: 100,
2018-01-30 11:33:23 -05:00
};
job = new Job();
2017-05-30 04:43:13 -04:00
2018-01-30 11:33:23 -05:00
waitForPromise()
.then(() => {
expect(document.querySelector('.js-truncated-info').classList).not.toContain('hidden');
})
.then(done)
.catch(done.fail);
2017-05-30 04:43:13 -04:00
});
2018-01-30 11:33:23 -05:00
it('shows the size in KiB', (done) => {
2017-05-30 04:43:13 -04:00
const size = 50;
2018-01-30 11:33:23 -05:00
response = {
2017-05-30 04:43:13 -04:00
html: '<span>Update</span>',
status: 'success',
append: false,
size,
total: 100,
2018-01-30 11:33:23 -05:00
};
job = new Job();
2017-05-30 04:43:13 -04:00
2018-01-30 11:33:23 -05:00
waitForPromise()
.then(() => {
expect(
document.querySelector('.js-truncated-info-size').textContent.trim(),
).toEqual(`${numberToHumanSize(size)}`);
})
.then(done)
.catch(done.fail);
2017-05-30 04:43:13 -04:00
});
2018-01-30 11:33:23 -05:00
it('shows incremented size', (done) => {
response = {
2017-05-30 04:43:13 -04:00
html: '<span>Update</span>',
status: 'success',
append: false,
size: 50,
total: 100,
complete: false,
2018-01-30 11:33:23 -05:00
};
2017-05-30 04:43:13 -04:00
job = new Job();
2017-05-30 04:43:13 -04:00
2018-01-30 11:33:23 -05:00
waitForPromise()
.then(() => {
expect(
document.querySelector('.js-truncated-info-size').textContent.trim(),
).toEqual(`${numberToHumanSize(50)}`);
response = {
html: '<span>Update</span>',
status: 'success',
append: true,
size: 10,
total: 100,
complete: true,
2018-01-30 11:33:23 -05:00
};
})
.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);
});
2017-05-30 04:43:13 -04:00
it('renders the raw link', () => {
2018-01-30 11:33:23 -05:00
response = {
2017-05-30 04:43:13 -04:00
html: '<span>Update</span>',
status: 'success',
append: false,
size: 50,
total: 100,
2018-01-30 11:33:23 -05:00
};
job = new Job();
2017-05-30 04:43:13 -04:00
expect(
document.querySelector('.js-raw-link').textContent.trim(),
).toContain('Complete Raw');
});
});
describe('when size is equal than total', () => {
2018-01-30 11:33:23 -05:00
it('does not show the trunctated information', (done) => {
response = {
2017-05-30 04:43:13 -04:00
html: '<span>Update</span>',
status: 'success',
append: false,
size: 100,
total: 100,
2018-01-30 11:33:23 -05:00
};
2017-05-30 04:43:13 -04:00
job = new Job();
2017-05-30 04:43:13 -04:00
2018-01-30 11:33:23 -05:00
waitForPromise()
.then(() => {
expect(document.querySelector('.js-truncated-info').classList).toContain('hidden');
})
.then(done)
.catch(done.fail);
2017-05-30 04:43:13 -04:00
});
});
});
describe('output trace', () => {
2018-01-30 11:33:23 -05:00
beforeEach((done) => {
response = {
2017-05-30 04:43:13 -04:00
html: '<span>Update</span>',
status: 'success',
append: false,
size: 50,
total: 100,
2018-01-30 11:33:23 -05:00
};
2017-05-30 04:43:13 -04:00
job = new Job();
2018-01-30 11:33:23 -05:00
waitForPromise()
.then(done)
.catch(done.fail);
2017-05-30 04:43:13 -04:00
});
it('should render trace controls', () => {
const controllers = document.querySelector('.controllers');
2018-01-30 11:33:23 -05:00
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();
2017-05-30 04:43:13 -04:00
});
it('should render received output', () => {
expect(
document.querySelector('.js-build-output').innerHTML,
).toEqual('<span>Update</span>');
});
});
});
describe('getBuildTrace', () => {
it('should request build trace with state parameter', (done) => {
2018-01-30 11:33:23 -05:00
spyOn(axios, 'get').and.callThrough();
// eslint-disable-next-line no-new
job = new Job();
setTimeout(() => {
2018-01-30 11:33:23 -05:00
expect(axios.get).toHaveBeenCalledWith(
`${JOB_URL}/trace.json`, { params: { state: '' } },
);
done();
}, 0);
});
});
});