Merge branch 'ph-axios-2' into 'master'

More conversions to axios

See merge request gitlab-org/gitlab-ce!16800

7 files changed, 462 insertions, 324 deletions

diff --git a/spec/javascripts/issue_spec.js b/spec/javascripts/issue_spec.js
index 2cd2e63b15d..5245bf6455c 100644
--- a/spec/javascripts/issue_spec.js
+++ b/spec/javascripts/issue_spec.js
@@ -1,4 +1,6 @@
 /* eslint-disable space-before-function-paren, one-var, one-var-declaration-per-line, no-use-before-define, comma-dangle, max-len */
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import Issue from '~/issue';
 import '~/lib/utils/text_utility';
 
@@ -88,20 +90,24 @@ describe('Issue', function() {
   [true, false].forEach((isIssueInitiallyOpen) => {
     describe(`with ${isIssueInitiallyOpen ? 'open' : 'closed'} issue`, function() {
       const action = isIssueInitiallyOpen ? 'close' : 'reopen';
+      let mock;
 
-      function ajaxSpy(req) {
-        if (req.url === this.$triggeredButton.attr('href')) {
-          expect(req.type).toBe('PUT');
+      function mockCloseButtonResponseSuccess(url, response) {
+        mock.onPut(url).reply(() => {
           expectNewBranchButtonState(true, false);
-          return this.issueStateDeferred;
-        } else if (req.url === Issue.createMrDropdownWrap.dataset.canCreatePath) {
-          expect(req.type).toBe('GET');
-          expectNewBranchButtonState(true, false);
-          return this.canCreateBranchDeferred;
-        }
 
-        expect(req.url).toBe('unexpected');
-        return null;
+          return [200, response];
+        });
+      }
+
+      function mockCloseButtonResponseError(url) {
+        mock.onPut(url).networkError();
+      }
+
+      function mockCanCreateBranch(canCreateBranch) {
+        mock.onGet(/(.*)\/can_create_branch$/).reply(200, {
+          can_create_branch: canCreateBranch,
+        });
       }
 
       beforeEach(function() {
@@ -111,6 +117,11 @@ describe('Issue', function() {
           loadFixtures('issues/closed-issue.html.raw');
         }
 
+        mock = new MockAdapter(axios);
+
+        mock.onGet(/(.*)\/related_branches$/).reply(200, {});
+        mock.onGet(/(.*)\/referenced_merge_requests$/).reply(200, {});
+
         findElements(isIssueInitiallyOpen);
         this.issue = new Issue();
         expectIssueState(isIssueInitiallyOpen);
@@ -120,71 +131,89 @@ describe('Issue', function() {
         this.$projectIssuesCounter = $('.issue_counter').first();
         this.$projectIssuesCounter.text('1,001');
 
-        this.issueStateDeferred = new jQuery.Deferred();
-        this.canCreateBranchDeferred = new jQuery.Deferred();
+        spyOn(axios, 'get').and.callThrough();
+      });
 
-        spyOn(jQuery, 'ajax').and.callFake(ajaxSpy.bind(this));
+      afterEach(() => {
+        mock.restore();
+        $('div.flash-alert').remove();
       });
 
-      it(`${action}s the issue`, function() {
-        this.$triggeredButton.trigger('click');
-        this.issueStateDeferred.resolve({
+      it(`${action}s the issue`, function(done) {
+        mockCloseButtonResponseSuccess(this.$triggeredButton.attr('href'), {
           id: 34
         });
-        this.canCreateBranchDeferred.resolve({
-          can_create_branch: !isIssueInitiallyOpen
-        });
+        mockCanCreateBranch(!isIssueInitiallyOpen);
 
-        expectIssueState(!isIssueInitiallyOpen);
-        expect(this.$triggeredButton.get(0).getAttribute('disabled')).toBeNull();
-        expect(this.$projectIssuesCounter.text()).toBe(isIssueInitiallyOpen ? '1,000' : '1,002');
-        expectNewBranchButtonState(false, !isIssueInitiallyOpen);
+        this.$triggeredButton.trigger('click');
+
+        setTimeout(() => {
+          expectIssueState(!isIssueInitiallyOpen);
+          expect(this.$triggeredButton.get(0).getAttribute('disabled')).toBeNull();
+          expect(this.$projectIssuesCounter.text()).toBe(isIssueInitiallyOpen ? '1,000' : '1,002');
+          expectNewBranchButtonState(false, !isIssueInitiallyOpen);
+
+          done();
+        });
       });
 
-      it(`fails to ${action} the issue if saved:false`, function() {
-        this.$triggeredButton.trigger('click');
-        this.issueStateDeferred.resolve({
+      it(`fails to ${action} the issue if saved:false`, function(done) {
+        mockCloseButtonResponseSuccess(this.$triggeredButton.attr('href'), {
           saved: false
         });
-        this.canCreateBranchDeferred.resolve({
-          can_create_branch: isIssueInitiallyOpen
-        });
+        mockCanCreateBranch(isIssueInitiallyOpen);
 
-        expectIssueState(isIssueInitiallyOpen);
-        expect(this.$triggeredButton.get(0).getAttribute('disabled')).toBeNull();
-        expectErrorMessage();
-        expect(this.$projectIssuesCounter.text()).toBe('1,001');
-        expectNewBranchButtonState(false, isIssueInitiallyOpen);
+        this.$triggeredButton.trigger('click');
+
+        setTimeout(() => {
+          expectIssueState(isIssueInitiallyOpen);
+          expect(this.$triggeredButton.get(0).getAttribute('disabled')).toBeNull();
+          expectErrorMessage();
+          expect(this.$projectIssuesCounter.text()).toBe('1,001');
+          expectNewBranchButtonState(false, isIssueInitiallyOpen);
+
+          done();
+        });
       });
 
-      it(`fails to ${action} the issue if HTTP error occurs`, function() {
+      it(`fails to ${action} the issue if HTTP error occurs`, function(done) {
+        mockCloseButtonResponseError(this.$triggeredButton.attr('href'));
+        mockCanCreateBranch(isIssueInitiallyOpen);
+
         this.$triggeredButton.trigger('click');
-        this.issueStateDeferred.reject();
-        this.canCreateBranchDeferred.resolve({
-          can_create_branch: isIssueInitiallyOpen
-        });
 
-        expectIssueState(isIssueInitiallyOpen);
-        expect(this.$triggeredButton.get(0).getAttribute('disabled')).toBeNull();
-        expectErrorMessage();
-        expect(this.$projectIssuesCounter.text()).toBe('1,001');
-        expectNewBranchButtonState(false, isIssueInitiallyOpen);
+        setTimeout(() => {
+          expectIssueState(isIssueInitiallyOpen);
+          expect(this.$triggeredButton.get(0).getAttribute('disabled')).toBeNull();
+          expectErrorMessage();
+          expect(this.$projectIssuesCounter.text()).toBe('1,001');
+          expectNewBranchButtonState(false, isIssueInitiallyOpen);
+
+          done();
+        });
       });
 
       it('disables the new branch button if Ajax call fails', function() {
+        mockCloseButtonResponseError(this.$triggeredButton.attr('href'));
+        mock.onGet(/(.*)\/can_create_branch$/).networkError();
+
         this.$triggeredButton.trigger('click');
-        this.issueStateDeferred.reject();
-        this.canCreateBranchDeferred.reject();
 
         expectNewBranchButtonState(false, false);
       });
 
-      it('does not trigger Ajax call if new branch button is missing', function() {
+      it('does not trigger Ajax call if new branch button is missing', function(done) {
+        mockCloseButtonResponseError(this.$triggeredButton.attr('href'));
         Issue.$btnNewBranch = $();
         this.canCreateBranchDeferred = null;
 
         this.$triggeredButton.trigger('click');
-        this.issueStateDeferred.reject();
+
+        setTimeout(() => {
+          expect(axios.get).not.toHaveBeenCalled();
+
+          done();
+        });
       });
     });
   });
diff --git a/spec/javascripts/job_spec.js b/spec/javascripts/job_spec.js
index 0452934ea9e..03b58e9c1d0 100644
--- a/spec/javascripts/job_spec.js
+++ b/spec/javascripts/job_spec.js
@@ -1,3 +1,5 @@
+import MockAdapter 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,29 @@ 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 MockAdapter(axios);
+
+    mock.onGet(new RegExp(`${JOB_URL}/trace.json?(.*)`)).reply(() => [200, response]);
+  });
+
+  afterEach(() => {
+    mock.restore();
+
+    response = {};
   });
 
   describe('class constructor', () => {
@@ -55,161 +75,159 @@ describe('Job', () => {
     });
 
     describe('running build', () => {
-      it('updates the build trace on an interval', function () {
-        const deferred1 = $.Deferred();
-        const deferred2 = $.Deferred();
-        spyOn($, 'ajax').and.returnValues(deferred1.promise(), deferred2.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({
-          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);
-
-        expect($('#build-trace .js-build-output').text()).toMatch(/UpdateMore/);
-        expect(this.job.state).toBe('finalstate');
+        waitForPromise()
+          .then(() => {
+            expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
+            expect(this.job.state).toBe('newstate');
+
+            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(this.job.state).toBe('finalstate');
+          })
+          .then(done)
+          .catch(done.fail);
       });
 
-      it('replaces the entire build trace', () => {
-        const deferred1 = $.Deferred();
-        const deferred2 = $.Deferred();
-
-        spyOn($, 'ajax').and.returnValues(deferred1.promise(), deferred2.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({
-          html: '<span>Different</span>',
-          status: 'running',
-          append: false,
-        });
+        };
 
         this.job = new Job();
 
-        expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
-
-        jasmine.clock().tick(4001);
-
-        expect($('#build-trace .js-build-output').text()).not.toMatch(/Update/);
-        expect($('#build-trace .js-build-output').text()).toMatch(/Different/);
+        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);
       });
     });
 
     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();
 
-          expect(document.querySelector('.js-truncated-info').classList).not.toContain('hidden');
+          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();
 
-          expect(
-            document.querySelector('.js-truncated-info-size').textContent.trim(),
-          ).toEqual(`${numberToHumanSize(size)}`);
+          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();
-
-          spyOn($, 'ajax').and.returnValues(deferred1.promise(), deferred2.promise());
-
-          spyOn(urlUtils, 'visitUrl');
-
-          deferred1.resolve({
+        it('shows incremented size', (done) => {
+          response = {
             html: '<span>Update</span>',
             status: 'success',
             append: false,
             size: 50,
             total: 100,
-          });
+          };
 
           this.job = new Job();
 
-          expect(
-            document.querySelector('.js-truncated-info-size').textContent.trim(),
-          ).toEqual(`${numberToHumanSize(50)}`);
-
-          jasmine.clock().tick(4001);
-
-          deferred2.resolve({
-            html: '<span>Update</span>',
-            status: 'success',
-            append: true,
-            size: 10,
-            total: 100,
-          });
-
-          expect(
-            document.querySelector('.js-truncated-info-size').textContent.trim(),
-          ).toEqual(`${numberToHumanSize(60)}`);
+          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,
+              };
+            })
+            .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();
 
@@ -220,50 +238,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();
 
-          expect(document.querySelector('.js-truncated-info').classList).toContain('hidden');
+          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', () => {
@@ -276,13 +294,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);
diff --git a/spec/javascripts/labels_issue_sidebar_spec.js b/spec/javascripts/labels_issue_sidebar_spec.js
index a197b35f6fb..7d992f62f64 100644
--- a/spec/javascripts/labels_issue_sidebar_spec.js
+++ b/spec/javascripts/labels_issue_sidebar_spec.js
@@ -1,4 +1,6 @@
 /* eslint-disable no-new */
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import IssuableContext from '~/issuable_context';
 import LabelsSelect from '~/labels_select';
 
@@ -10,35 +12,44 @@ import '~/users_select';
 
 (() => {
   let saveLabelCount = 0;
+  let mock;
+
   describe('Issue dropdown sidebar', () => {
     preloadFixtures('static/issue_sidebar_label.html.raw');
 
     beforeEach(() => {
       loadFixtures('static/issue_sidebar_label.html.raw');
+
+      mock = new MockAdapter(axios);
+
       new IssuableContext('{"id":1,"name":"Administrator","username":"root"}');
       new LabelsSelect();
 
-      spyOn(jQuery, 'ajax').and.callFake((req) => {
-        const d = $.Deferred();
-        let LABELS_DATA = [];
+      mock.onGet('/root/test/labels.json').reply(() => {
+        const labels = Array(10).fill().map((_, i) => ({
+          id: i,
+          title: `test ${i}`,
+          color: '#5CB85C',
+        }));
 
-        if (req.url === '/root/test/labels.json') {
-          for (let i = 0; i < 10; i += 1) {
-            LABELS_DATA.push({ id: i, title: `test ${i}`, color: '#5CB85C' });
-          }
-        } else if (req.url === '/root/test/issues/2.json') {
-          const tmp = [];
-          for (let i = 0; i < saveLabelCount; i += 1) {
-            tmp.push({ id: i, title: `test ${i}`, color: '#5CB85C' });
-          }
-          LABELS_DATA = { labels: tmp };
-        }
+        return [200, labels];
+      });
+
+      mock.onPut('/root/test/issues/2.json').reply(() => {
+        const labels = Array(saveLabelCount).fill().map((_, i) => ({
+          id: i,
+          title: `test ${i}`,
+          color: '#5CB85C',
+        }));
 
-        d.resolve(LABELS_DATA);
-        return d.promise();
+        return [200, { labels }];
       });
     });
 
+    afterEach(() => {
+      mock.restore();
+    });
+
     it('changes collapsed tooltip when changing labels when less than 5', (done) => {
       saveLabelCount = 5;
       $('.edit-link').get(0).click();
diff --git a/spec/javascripts/lib/utils/ajax_cache_spec.js b/spec/javascripts/lib/utils/ajax_cache_spec.js
index 49971bd91e2..7603400b55e 100644
--- a/spec/javascripts/lib/utils/ajax_cache_spec.js
+++ b/spec/javascripts/lib/utils/ajax_cache_spec.js
@@ -1,3 +1,5 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import AjaxCache from '~/lib/utils/ajax_cache';
 
 describe('AjaxCache', () => {
@@ -87,66 +89,53 @@ describe('AjaxCache', () => {
   });
 
   describe('retrieve', () => {
-    let ajaxSpy;
+    let mock;
 
     beforeEach(() => {
-      spyOn(jQuery, 'ajax').and.callFake(url => ajaxSpy(url));
+      mock = new MockAdapter(axios);
+
+      spyOn(axios, 'get').and.callThrough();
+    });
+
+    afterEach(() => {
+      mock.restore();
     });
 
     it('stores and returns data from Ajax call if cache is empty', (done) => {
-      ajaxSpy = (url) => {
-        expect(url).toBe(dummyEndpoint);
-        const deferred = $.Deferred();
-        deferred.resolve(dummyResponse);
-        return deferred.promise();
-      };
+      mock.onGet(dummyEndpoint).reply(200, dummyResponse);
 
       AjaxCache.retrieve(dummyEndpoint)
       .then((data) => {
-        expect(data).toBe(dummyResponse);
-        expect(AjaxCache.internalStorage[dummyEndpoint]).toBe(dummyResponse);
+        expect(data).toEqual(dummyResponse);
+        expect(AjaxCache.internalStorage[dummyEndpoint]).toEqual(dummyResponse);
       })
       .then(done)
       .catch(fail);
     });
 
-    it('makes no Ajax call if request is pending', () => {
-      const responseDeferred = $.Deferred();
-
-      ajaxSpy = (url) => {
-        expect(url).toBe(dummyEndpoint);
-        // neither reject nor resolve to keep request pending
-        return responseDeferred.promise();
-      };
-
-      const unexpectedResponse = data => fail(`Did not expect response: ${data}`);
+    it('makes no Ajax call if request is pending', (done) => {
+      mock.onGet(dummyEndpoint).reply(200, dummyResponse);
 
       AjaxCache.retrieve(dummyEndpoint)
-      .then(unexpectedResponse)
+      .then(done)
       .catch(fail);
 
       AjaxCache.retrieve(dummyEndpoint)
-      .then(unexpectedResponse)
+      .then(done)
       .catch(fail);
 
-      expect($.ajax.calls.count()).toBe(1);
+      expect(axios.get.calls.count()).toBe(1);
     });
 
     it('returns undefined if Ajax call fails and cache is empty', (done) => {
-      const dummyStatusText = 'exploded';
-      const dummyErrorMessage = 'server exploded';
-      ajaxSpy = (url) => {
-        expect(url).toBe(dummyEndpoint);
-        const deferred = $.Deferred();
-        deferred.reject(null, dummyStatusText, dummyErrorMessage);
-        return deferred.promise();
-      };
+      const errorMessage = 'Network Error';
+      mock.onGet(dummyEndpoint).networkError();
 
       AjaxCache.retrieve(dummyEndpoint)
       .then(data => fail(`Received unexpected data: ${JSON.stringify(data)}`))
       .catch((error) => {
-        expect(error.message).toBe(`${dummyEndpoint}: ${dummyErrorMessage}`);
-        expect(error.textStatus).toBe(dummyStatusText);
+        expect(error.message).toBe(`${dummyEndpoint}: ${errorMessage}`);
+        expect(error.textStatus).toBe(errorMessage);
         done();
       })
       .catch(fail);
@@ -154,7 +143,9 @@ describe('AjaxCache', () => {
 
     it('makes no Ajax call if matching data exists', (done) => {
       AjaxCache.internalStorage[dummyEndpoint] = dummyResponse;
-      ajaxSpy = () => fail(new Error('expected no Ajax call!'));
+      mock.onGet(dummyEndpoint).reply(() => {
+        fail(new Error('expected no Ajax call!'));
+      });
 
       AjaxCache.retrieve(dummyEndpoint)
       .then((data) => {
@@ -171,12 +162,7 @@ describe('AjaxCache', () => {
 
       AjaxCache.internalStorage[dummyEndpoint] = oldDummyResponse;
 
-      ajaxSpy = (url) => {
-        expect(url).toBe(dummyEndpoint);
-        const deferred = $.Deferred();
-        deferred.resolve(dummyResponse);
-        return deferred.promise();
-      };
+      mock.onGet(dummyEndpoint).reply(200, dummyResponse);
 
       // Call without forceRetrieve param
       AjaxCache.retrieve(dummyEndpoint)
@@ -189,7 +175,7 @@ describe('AjaxCache', () => {
       // Call with forceRetrieve param
       AjaxCache.retrieve(dummyEndpoint, true)
         .then((data) => {
-          expect(data).toBe(dummyResponse);
+          expect(data).toEqual(dummyResponse);
         })
         .then(done)
         .catch(fail);
diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js
index 1052b4e7c20..80430011aed 100644
--- a/spec/javascripts/lib/utils/common_utils_spec.js
+++ b/spec/javascripts/lib/utils/common_utils_spec.js
@@ -1,7 +1,6 @@
 /* eslint-disable promise/catch-or-return */
-
-import * as commonUtils from '~/lib/utils/common_utils';
 import axios from '~/lib/utils/axios_utils';
+import * as commonUtils from '~/lib/utils/common_utils';
 import MockAdapter from 'axios-mock-adapter';
 
 describe('common_utils', () => {
@@ -460,17 +459,6 @@ describe('common_utils', () => {
     });
   });
 
-  describe('ajaxPost', () => {
-    it('should perform `$.ajax` call and do `POST` request', () => {
-      const requestURL = '/some/random/api';
-      const data = { keyname: 'value' };
-      const ajaxSpy = spyOn($, 'ajax').and.callFake(() => {});
-
-      commonUtils.ajaxPost(requestURL, data);
-      expect(ajaxSpy.calls.allArgs()[0][0].type).toEqual('POST');
-    });
-  });
-
   describe('spriteIcon', () => {
     let beforeGon;
 
diff --git a/spec/javascripts/merge_request_tabs_spec.js b/spec/javascripts/merge_request_tabs_spec.js
index a6be474805b..fda24db98b4 100644
--- a/spec/javascripts/merge_request_tabs_spec.js
+++ b/spec/javascripts/merge_request_tabs_spec.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-var, comma-dangle, object-shorthand */
-
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import * as urlUtils from '~/lib/utils/url_utility';
 import MergeRequestTabs from '~/merge_request_tabs';
 import '~/commit/pipelines/pipelines_bundle';
@@ -46,7 +47,7 @@ import 'vendor/jquery.scrollTo';
 
     describe('activateTab', function () {
       beforeEach(function () {
-        spyOn($, 'ajax').and.callFake(function () {});
+        spyOn(axios, 'get').and.returnValue(Promise.resolve({ data: {} }));
         loadFixtures('merge_requests/merge_request_with_task_list.html.raw');
         this.subject = this.class.activateTab;
       });
@@ -148,7 +149,7 @@ import 'vendor/jquery.scrollTo';
 
     describe('setCurrentAction', function () {
       beforeEach(function () {
-        spyOn($, 'ajax').and.callFake(function () {});
+        spyOn(axios, 'get').and.returnValue(Promise.resolve({ data: {} }));
         this.subject = this.class.setCurrentAction;
       });
 
@@ -214,13 +215,21 @@ import 'vendor/jquery.scrollTo';
     });
 
     describe('tabShown', () => {
+      let mock;
+
       beforeEach(function () {
-        spyOn($, 'ajax').and.callFake(function (options) {
-          options.success({ html: '' });
+        mock = new MockAdapter(axios);
+        mock.onGet(/(.*)\/diffs\.json/).reply(200, {
+          data: { html: '' },
         });
+
         loadFixtures('merge_requests/merge_request_with_task_list.html.raw');
       });
 
+      afterEach(() => {
+        mock.restore();
+      });
+
       describe('with "Side-by-side"/parallel diff view', () => {
         beforeEach(function () {
           this.class.diffViewType = () => 'parallel';
@@ -292,16 +301,20 @@ import 'vendor/jquery.scrollTo';
 
       it('triggers Ajax request to JSON endpoint', function (done) {
         const url = '/foo/bar/merge_requests/1/diffs';
-        spyOn(this.class, 'ajaxGet').and.callFake((options) => {
-          expect(options.url).toEqual(`${url}.json`);
+
+        spyOn(axios, 'get').and.callFake((reqUrl) => {
+          expect(reqUrl).toBe(`${url}.json`);
+
           done();
+
+          return Promise.resolve({ data: {} });
         });
 
         this.class.loadDiff(url);
       });
 
       it('triggers scroll event when diff already loaded', function (done) {
-        spyOn(this.class, 'ajaxGet').and.callFake(() => done.fail());
+        spyOn(axios, 'get').and.callFake(done.fail);
         spyOn(document, 'dispatchEvent');
 
         this.class.diffsLoaded = true;
@@ -316,6 +329,7 @@ import 'vendor/jquery.scrollTo';
       describe('with inline diff', () => {
         let noteId;
         let noteLineNumId;
+        let mock;
 
         beforeEach(() => {
           const diffsResponse = getJSONFixture(inlineChangesTabJsonFixture);
@@ -330,29 +344,40 @@ import 'vendor/jquery.scrollTo';
             .attr('href')
             .replace('#', '');
 
-          spyOn($, 'ajax').and.callFake(function (options) {
-            options.success(diffsResponse);
-          });
+          mock = new MockAdapter(axios);
+          mock.onGet(/(.*)\/diffs\.json/).reply(200, diffsResponse);
+        });
+
+        afterEach(() => {
+          mock.restore();
         });
 
         describe('with note fragment hash', () => {
-          it('should expand and scroll to linked fragment hash #note_xxx', function () {
+          it('should expand and scroll to linked fragment hash #note_xxx', function (done) {
             spyOn(urlUtils, 'getLocationHash').and.returnValue(noteId);
             this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
 
-            expect(noteId.length).toBeGreaterThan(0);
-            expect(Notes.instance.toggleDiffNote).toHaveBeenCalledWith({
-              target: jasmine.any(Object),
-              lineType: 'old',
-              forceShow: true,
+            setTimeout(() => {
+              expect(noteId.length).toBeGreaterThan(0);
+              expect(Notes.instance.toggleDiffNote).toHaveBeenCalledWith({
+                target: jasmine.any(Object),
+                lineType: 'old',
+                forceShow: true,
+              });
+
+              done();
             });
           });
 
-          it('should gracefully ignore non-existant fragment hash', function () {
+          it('should gracefully ignore non-existant fragment hash', function (done) {
             spyOn(urlUtils, 'getLocationHash').and.returnValue('note_something-that-does-not-exist');
             this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
 
-            expect(Notes.instance.toggleDiffNote).not.toHaveBeenCalled();
+            setTimeout(() => {
+              expect(Notes.instance.toggleDiffNote).not.toHaveBeenCalled();
+
+              done();
+            });
           });
         });
 
@@ -370,6 +395,7 @@ import 'vendor/jquery.scrollTo';
       describe('with parallel diff', () => {
         let noteId;
         let noteLineNumId;
+        let mock;
 
         beforeEach(() => {
           const diffsResponse = getJSONFixture(parallelChangesTabJsonFixture);
@@ -384,30 +410,40 @@ import 'vendor/jquery.scrollTo';
             .attr('href')
             .replace('#', '');
 
-          spyOn($, 'ajax').and.callFake(function (options) {
-            options.success(diffsResponse);
-          });
+          mock = new MockAdapter(axios);
+          mock.onGet(/(.*)\/diffs\.json/).reply(200, diffsResponse);
+        });
+
+        afterEach(() => {
+          mock.restore();
         });
 
         describe('with note fragment hash', () => {
-          it('should expand and scroll to linked fragment hash #note_xxx', function () {
+          it('should expand and scroll to linked fragment hash #note_xxx', function (done) {
             spyOn(urlUtils, 'getLocationHash').and.returnValue(noteId);
 
             this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
 
-            expect(noteId.length).toBeGreaterThan(0);
-            expect(Notes.instance.toggleDiffNote).toHaveBeenCalledWith({
-              target: jasmine.any(Object),
-              lineType: 'new',
-              forceShow: true,
+            setTimeout(() => {
+              expect(noteId.length).toBeGreaterThan(0);
+              expect(Notes.instance.toggleDiffNote).toHaveBeenCalledWith({
+                target: jasmine.any(Object),
+                lineType: 'new',
+                forceShow: true,
+              });
+
+              done();
             });
           });
 
-          it('should gracefully ignore non-existant fragment hash', function () {
+          it('should gracefully ignore non-existant fragment hash', function (done) {
             spyOn(urlUtils, 'getLocationHash').and.returnValue('note_something-that-does-not-exist');
             this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
 
-            expect(Notes.instance.toggleDiffNote).not.toHaveBeenCalled();
+            setTimeout(() => {
+              expect(Notes.instance.toggleDiffNote).not.toHaveBeenCalled();
+              done();
+            });
           });
         });
 
diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js
index a40821a5693..2fb385bd79f 100644
--- a/spec/javascripts/notes_spec.js
+++ b/spec/javascripts/notes_spec.js
@@ -1,11 +1,14 @@
 /* eslint-disable space-before-function-paren, no-unused-expressions, no-var, object-shorthand, comma-dangle, max-len */
 import _ from 'underscore';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import * as urlUtils from '~/lib/utils/url_utility';
 import 'autosize';
 import '~/gl_form';
 import '~/lib/utils/text_utility';
 import '~/render_gfm';
 import Notes from '~/notes';
+import timeoutPromise from './helpers/set_timeout_promise_helper';
 
 (function() {
   window.gon || (window.gon = {});
@@ -119,6 +122,7 @@ import Notes from '~/notes';
       let noteEntity;
       let $form;
       let $notesContainer;
+      let mock;
 
       beforeEach(() => {
         this.notes = new Notes('', []);
@@ -136,24 +140,32 @@ import Notes from '~/notes';
         $form = $('form.js-main-target-form');
         $notesContainer = $('ul.main-notes-list');
         $form.find('textarea.js-note-text').val(sampleComment);
+
+        mock = new MockAdapter(axios);
+        mock.onPost(/(.*)\/notes$/).reply(200, noteEntity);
       });
 
-      it('updates note and resets edit form', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      afterEach(() => {
+        mock.restore();
+      });
+
+      it('updates note and resets edit form', (done) => {
         spyOn(this.notes, 'revertNoteEditForm');
         spyOn(this.notes, 'setupNewNote');
 
         $('.js-comment-button').click();
-        deferred.resolve(noteEntity);
 
-        const $targetNote = $notesContainer.find(`#note_${noteEntity.id}`);
-        const updatedNote = Object.assign({}, noteEntity);
-        updatedNote.note = 'bar';
-        this.notes.updateNote(updatedNote, $targetNote);
+        setTimeout(() => {
+          const $targetNote = $notesContainer.find(`#note_${noteEntity.id}`);
+          const updatedNote = Object.assign({}, noteEntity);
+          updatedNote.note = 'bar';
+          this.notes.updateNote(updatedNote, $targetNote);
+
+          expect(this.notes.revertNoteEditForm).toHaveBeenCalledWith($targetNote);
+          expect(this.notes.setupNewNote).toHaveBeenCalled();
 
-        expect(this.notes.revertNoteEditForm).toHaveBeenCalledWith($targetNote);
-        expect(this.notes.setupNewNote).toHaveBeenCalled();
+          done();
+        });
       });
     });
 
@@ -479,8 +491,19 @@ import Notes from '~/notes';
       };
       let $form;
       let $notesContainer;
+      let mock;
+
+      function mockNotesPost() {
+        mock.onPost(/(.*)\/notes$/).reply(200, note);
+      }
+
+      function mockNotesPostError() {
+        mock.onPost(/(.*)\/notes$/).networkError();
+      }
 
       beforeEach(() => {
+        mock = new MockAdapter(axios);
+
         this.notes = new Notes('', []);
         window.gon.current_username = 'root';
         window.gon.current_user_fullname = 'Administrator';
@@ -489,63 +512,92 @@ import Notes from '~/notes';
         $form.find('textarea.js-note-text').val(sampleComment);
       });
 
+      afterEach(() => {
+        mock.restore();
+      });
+
       it('should show placeholder note while new comment is being posted', () => {
+        mockNotesPost();
+
         $('.js-comment-button').click();
         expect($notesContainer.find('.note.being-posted').length > 0).toEqual(true);
       });
 
-      it('should remove placeholder note when new comment is done posting', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      it('should remove placeholder note when new comment is done posting', (done) => {
+        mockNotesPost();
+
         $('.js-comment-button').click();
 
-        deferred.resolve(note);
-        expect($notesContainer.find('.note.being-posted').length).toEqual(0);
+        setTimeout(() => {
+          expect($notesContainer.find('.note.being-posted').length).toEqual(0);
+
+          done();
+        });
       });
 
-      it('should show actual note element when new comment is done posting', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      it('should show actual note element when new comment is done posting', (done) => {
+        mockNotesPost();
+
         $('.js-comment-button').click();
 
-        deferred.resolve(note);
-        expect($notesContainer.find(`#note_${note.id}`).length > 0).toEqual(true);
+        setTimeout(() => {
+          expect($notesContainer.find(`#note_${note.id}`).length > 0).toEqual(true);
+
+          done();
+        });
       });
 
-      it('should reset Form when new comment is done posting', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      it('should reset Form when new comment is done posting', (done) => {
+        mockNotesPost();
+
         $('.js-comment-button').click();
 
-        deferred.resolve(note);
-        expect($form.find('textarea.js-note-text').val()).toEqual('');
+        setTimeout(() => {
+          expect($form.find('textarea.js-note-text').val()).toEqual('');
+
+          done();
+        });
       });
 
-      it('should show flash error message when new comment failed to be posted', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      it('should show flash error message when new comment failed to be posted', (done) => {
+        mockNotesPostError();
+
         $('.js-comment-button').click();
 
-        deferred.reject();
-        expect($notesContainer.parent().find('.flash-container .flash-text').is(':visible')).toEqual(true);
+        setTimeout(() => {
+          expect($notesContainer.parent().find('.flash-container .flash-text').is(':visible')).toEqual(true);
+
+          done();
+        });
       });
 
-      it('should show flash error message when comment failed to be updated', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      it('should show flash error message when comment failed to be updated', (done) => {
+        mockNotesPost();
+
         $('.js-comment-button').click();
 
-        deferred.resolve(note);
-        const $noteEl = $notesContainer.find(`#note_${note.id}`);
-        $noteEl.find('.js-note-edit').click();
-        $noteEl.find('textarea.js-note-text').val(updatedComment);
-        $noteEl.find('.js-comment-save-button').click();
+        timeoutPromise()
+          .then(() => {
+            const $noteEl = $notesContainer.find(`#note_${note.id}`);
+            $noteEl.find('.js-note-edit').click();
+            $noteEl.find('textarea.js-note-text').val(updatedComment);
 
-        deferred.reject();
-        const $updatedNoteEl = $notesContainer.find(`#note_${note.id}`);
-        expect($updatedNoteEl.hasClass('.being-posted')).toEqual(false); // Remove being-posted visuals
-        expect($updatedNoteEl.find('.note-text').text().trim()).toEqual(sampleComment); // See if comment reverted back to original
-        expect($('.flash-container').is(':visible')).toEqual(true); // Flash error message shown
+            mock.restore();
+
+            mockNotesPostError();
+
+            $noteEl.find('.js-comment-save-button').click();
+          })
+          .then(timeoutPromise)
+          .then(() => {
+            const $updatedNoteEl = $notesContainer.find(`#note_${note.id}`);
+            expect($updatedNoteEl.hasClass('.being-posted')).toEqual(false); // Remove being-posted visuals
+            expect($updatedNoteEl.find('.note-text').text().trim()).toEqual(sampleComment); // See if comment reverted back to original
+            expect($('.flash-container').is(':visible')).toEqual(true); // Flash error message shown
+
+            done();
+          })
+          .catch(done.fail);
       });
     });
 
@@ -563,8 +615,12 @@ import Notes from '~/notes';
       };
       let $form;
       let $notesContainer;
+      let mock;
 
       beforeEach(() => {
+        mock = new MockAdapter(axios);
+        mock.onPost(/(.*)\/notes$/).reply(200, note);
+
         this.notes = new Notes('', []);
         window.gon.current_username = 'root';
         window.gon.current_user_fullname = 'Administrator';
@@ -582,15 +638,20 @@ import Notes from '~/notes';
         $form.find('textarea.js-note-text').val(sampleComment);
       });
 
-      it('should remove slash command placeholder when comment with slash commands is done posting', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      afterEach(() => {
+        mock.restore();
+      });
+
+      it('should remove slash command placeholder when comment with slash commands is done posting', (done) => {
         spyOn(gl.awardsHandler, 'addAwardToEmojiBar').and.callThrough();
         $('.js-comment-button').click();
 
         expect($notesContainer.find('.system-note.being-posted').length).toEqual(1); // Placeholder shown
-        deferred.resolve(note);
-        expect($notesContainer.find('.system-note.being-posted').length).toEqual(0); // Placeholder removed
+
+        setTimeout(() => {
+          expect($notesContainer.find('.system-note.being-posted').length).toEqual(0); // Placeholder removed
+          done();
+        });
       });
     });
 
@@ -607,8 +668,12 @@ import Notes from '~/notes';
       };
       let $form;
       let $notesContainer;
+      let mock;
 
       beforeEach(() => {
+        mock = new MockAdapter(axios);
+        mock.onPost(/(.*)\/notes$/).reply(200, note);
+
         this.notes = new Notes('', []);
         window.gon.current_username = 'root';
         window.gon.current_user_fullname = 'Administrator';
@@ -617,19 +682,24 @@ import Notes from '~/notes';
         $form.find('textarea.js-note-text').html(sampleComment);
       });
 
-      it('should not render a script tag', () => {
-        const deferred = $.Deferred();
-        spyOn($, 'ajax').and.returnValue(deferred.promise());
+      afterEach(() => {
+        mock.restore();
+      });
+
+      it('should not render a script tag', (done) => {
         $('.js-comment-button').click();
 
-        deferred.resolve(note);
-        const $noteEl = $notesContainer.find(`#note_${note.id}`);
-        $noteEl.find('.js-note-edit').click();
-        $noteEl.find('textarea.js-note-text').html(updatedComment);
-        $noteEl.find('.js-comment-save-button').click();
+        setTimeout(() => {
+          const $noteEl = $notesContainer.find(`#note_${note.id}`);
+          $noteEl.find('.js-note-edit').click();
+          $noteEl.find('textarea.js-note-text').html(updatedComment);
+          $noteEl.find('.js-comment-save-button').click();
+
+          const $updatedNoteEl = $notesContainer.find(`#note_${note.id}`).find('.js-task-list-container');
+          expect($updatedNoteEl.find('.note-text').text().trim()).toEqual('');
 
-        const $updatedNoteEl = $notesContainer.find(`#note_${note.id}`).find('.js-task-list-container');
-        expect($updatedNoteEl.find('.note-text').text().trim()).toEqual('');
+          done();
+        });
       });
     });