Use axios instead of jquery ajax for setCiStatusFavicon

app/assets/javascripts/lib/utils/common_utils.js

 import { getLocationHash } from './url_utility';
+import axios from './axios_utils';
 
 export const getPagePath = (index = 0) => $('body').attr('data-page').split(':')[index];
 
@@ -382,22 +383,16 @@ export const resetFavicon = () => {
   }
 };
 
-export const setCiStatusFavicon = (pageUrl) => {
-  $.ajax({
-    url: pageUrl,
-    dataType: 'json',
-    success: (data) => {
+export const setCiStatusFavicon = pageUrl =>
+  axios.get(pageUrl)
+    .then(({ data }) => {
       if (data && data.favicon) {
         setFavicon(data.favicon);
       } else {
         resetFavicon();
       }
-    },
-    error: () => {
-      resetFavicon();
-    },
-  });
-};
+    })
+    .catch(resetFavicon);
 
 export const spriteIcon = (icon, className = '') => {
   const classAttribute = className.length > 0 ? `class="${className}"` : '';

spec/javascripts/job_spec.js

@@ -58,8 +58,7 @@ describe('Job', () => {
       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($, 'ajax').and.returnValues(deferred1.promise(), deferred2.promise());
         spyOn(urlUtils, 'visitUrl');
 
         deferred1.resolve({
@@ -70,9 +69,7 @@ describe('Job', () => {
           complete: false,
         });
 
-        deferred2.resolve();
-
-        deferred3.resolve({
+        deferred2.resolve({
           html: '<span>More</span>',
           status: 'running',
           state: 'finalstate',
@@ -94,9 +91,8 @@ describe('Job', () => {
       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($, 'ajax').and.returnValues(deferred1.promise(), deferred2.promise());
 
         spyOn(urlUtils, 'visitUrl');
 
@@ -107,9 +103,7 @@ describe('Job', () => {
           complete: false,
         });
 
-        deferred2.resolve();
-
-        deferred3.resolve({
+        deferred2.resolve({
           html: '<span>Different</span>',
           status: 'running',
           append: false,
@@ -170,9 +164,8 @@ describe('Job', () => {
         it('shows incremented size', () => {
           const deferred1 = $.Deferred();
           const deferred2 = $.Deferred();
-          const deferred3 = $.Deferred();
 
-          spyOn($, 'ajax').and.returnValues(deferred1.promise(), deferred2.promise(), deferred3.promise());
+          spyOn($, 'ajax').and.returnValues(deferred1.promise(), deferred2.promise());
 
           spyOn(urlUtils, 'visitUrl');
 
@@ -184,8 +177,6 @@ describe('Job', () => {
             total: 100,
           });
 
-          deferred2.resolve();
-
           this.job = new Job();
 
           expect(
@@ -194,7 +185,7 @@ describe('Job', () => {
 
           jasmine.clock().tick(4001);
 
-          deferred3.resolve({
+          deferred2.resolve({
             html: '<span>Update</span>',
             status: 'success',
             append: true,

spec/javascripts/lib/utils/common_utils_spec.js

 /* eslint-disable promise/catch-or-return */
 
 import * as commonUtils from '~/lib/utils/common_utils';
+import axios from '~/lib/utils/axios_utils';
+import MockAdapter from 'axios-mock-adapter';
 
 describe('common_utils', () => {
   describe('parseUrl', () => {
@@ -413,37 +415,48 @@ describe('common_utils', () => {
 
   describe('setCiStatusFavicon', () => {
     const BUILD_URL = `${gl.TEST_HOST}/frontend-fixtures/builds-project/-/jobs/1/status.json`;
+    let mock;
 
     beforeEach(() => {
       const favicon = document.createElement('link');
       favicon.setAttribute('id', 'favicon');
       document.body.appendChild(favicon);
+      mock = new MockAdapter(axios);
     });
 
     afterEach(() => {
+      mock.restore();
       document.body.removeChild(document.getElementById('favicon'));
     });
 
-    it('should reset favicon in case of error', () => {
-      const favicon = document.getElementById('favicon');
-      spyOn($, 'ajax').and.callFake(function (options) {
-        options.error();
-        expect(favicon.getAttribute('href')).toEqual('null');
-      });
+    it('should reset favicon in case of error', (done) => {
+      mock.onGet(BUILD_URL).networkError();
 
-      commonUtils.setCiStatusFavicon(BUILD_URL);
+      commonUtils.setCiStatusFavicon(BUILD_URL)
+        .then(() => {
+          const favicon = document.getElementById('favicon');
+          expect(favicon.getAttribute('href')).toEqual('null');
+          done();
+        })
+        // Error is already caught in catch() block of setCiStatusFavicon,
+        // It won't throw another error for us to catch
+        .catch(done.fail);
     });
 
-    it('should set page favicon to CI status favicon based on provided status', () => {
+    it('should set page favicon to CI status favicon based on provided status', (done) => {
       const FAVICON_PATH = '//icon_status_success';
-      const favicon = document.getElementById('favicon');
 
-      spyOn($, 'ajax').and.callFake(function (options) {
-        options.success({ favicon: FAVICON_PATH });
-        expect(favicon.getAttribute('href')).toEqual(FAVICON_PATH);
+      mock.onGet(BUILD_URL).reply(200, {
+        favicon: FAVICON_PATH,
       });
 
-      commonUtils.setCiStatusFavicon(BUILD_URL);
+      commonUtils.setCiStatusFavicon(BUILD_URL)
+        .then(() => {
+          const favicon = document.getElementById('favicon');
+          expect(favicon.getAttribute('href')).toEqual(FAVICON_PATH);
+          done();
+        })
+        .catch(done.fail);
     });
   });