Converted job.js to axios

app/assets/javascripts/job.js

 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

+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);