import $ from 'jquery'; import MockAdapter from 'axios-mock-adapter'; 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`; let mock; let response; let job; function waitForPromise() { return new Promise(resolve => requestAnimationFrame(resolve)); } preloadFixtures('builds/build-with-artifacts.html.raw'); beforeEach(() => { loadFixtures('builds/build-with-artifacts.html.raw'); spyOnDependency(Job, 'visitUrl'); response = {}; mock = new MockAdapter(axios); mock.onGet(new RegExp(`${JOB_URL}/trace.json?(.*)`)).reply(() => [200, response]); }); 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); }); it('selects the current stage in the build dropdown menu', () => { expect($('.stage-selection').text()).toBe('test'); }); 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', () => { it('updates the build trace on an interval', function (done) { response = { html: 'Update', status: 'running', state: 'newstate', append: true, complete: false, }; job = new Job(); waitForPromise() .then(() => { expect($('#build-trace .js-build-output').text()).toMatch(/Update/); expect(job.state).toBe('newstate'); response = { html: 'More', 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'); }) .then(done) .catch(done.fail); }); it('replaces the entire build trace', (done) => { response = { html: 'Update', status: 'running', append: false, complete: false, }; job = new Job(); waitForPromise() .then(() => { expect($('#build-trace .js-build-output').text()).toMatch(/Update/); response = { html: 'Different', 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', (done) => { response = { html: 'Update', status: 'success', append: false, size: 50, total: 100, }; 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', (done) => { const size = 50; response = { html: 'Update', status: 'success', append: false, size, total: 100, }; 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', (done) => { response = { html: 'Update', status: 'success', append: false, size: 50, total: 100, complete: false, }; job = new Job(); waitForPromise() .then(() => { expect( document.querySelector('.js-truncated-info-size').textContent.trim(), ).toEqual(`${numberToHumanSize(50)}`); response = { html: 'Update', status: 'success', append: true, size: 10, total: 100, complete: true, }; }) .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', () => { response = { html: 'Update', status: 'success', append: false, size: 50, total: 100, }; job = new Job(); expect( document.querySelector('.js-raw-link').textContent.trim(), ).toContain('Complete Raw'); }); }); describe('when size is equal than total', () => { it('does not show the trunctated information', (done) => { response = { html: 'Update', status: 'success', append: false, size: 100, total: 100, }; job = new Job(); waitForPromise() .then(() => { expect(document.querySelector('.js-truncated-info').classList).toContain('hidden'); }) .then(done) .catch(done.fail); }); }); }); describe('output trace', () => { beforeEach((done) => { response = { html: 'Update', status: 'success', append: false, size: 50, total: 100, }; 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')).not.toBeNull(); expect(controllers.querySelector('.js-scroll-up')).not.toBeNull(); expect(controllers.querySelector('.js-scroll-down')).not.toBeNull(); }); it('should render received output', () => { expect( document.querySelector('.js-build-output').innerHTML, ).toEqual('Update'); }); }); }); describe('getBuildTrace', () => { it('should request build trace with state parameter', (done) => { spyOn(axios, 'get').and.callThrough(); // eslint-disable-next-line no-new job = new Job(); setTimeout(() => { expect(axios.get).toHaveBeenCalledWith( `${JOB_URL}/trace.json`, { params: { state: '' } }, ); done(); }, 0); }); }); });