Merge branch 'ph-ajax-to-axios' into 'master'

Converted $.ajax calls in some JS files to axios

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

15 files changed, 230 insertions, 284 deletions

diff --git a/app/assets/javascripts/api.js b/app/assets/javascripts/api.js
index 7cb81bf4d5b..1f34c6b50c2 100644
--- a/app/assets/javascripts/api.js
+++ b/app/assets/javascripts/api.js
@@ -1,9 +1,9 @@
-import $ from 'jquery';
+import _ from 'underscore';
 import axios from './lib/utils/axios_utils';
 
 const Api = {
   groupsPath: '/api/:version/groups.json',
-  groupPath: '/api/:version/groups/:id.json',
+  groupPath: '/api/:version/groups/:id',
   namespacesPath: '/api/:version/namespaces.json',
   groupProjectsPath: '/api/:version/groups/:id/projects.json',
   projectsPath: '/api/:version/projects.json',
@@ -23,42 +23,44 @@ const Api = {
   group(groupId, callback) {
     const url = Api.buildUrl(Api.groupPath)
       .replace(':id', groupId);
-    return $.ajax({
-      url,
-      dataType: 'json',
-    })
-      .done(group => callback(group));
+    return axios.get(url)
+      .then(({ data }) => {
+        callback(data);
+
+        return data;
+      });
   },
 
   // Return groups list. Filtered by query
   groups(query, options, callback) {
     const url = Api.buildUrl(Api.groupsPath);
-    return $.ajax({
-      url,
-      data: Object.assign({
+    return axios.get(url, {
+      params: Object.assign({
         search: query,
         per_page: 20,
       }, options),
-      dataType: 'json',
     })
-      .done(groups => callback(groups));
+      .then(({ data }) => {
+        callback(data);
+
+        return data;
+      });
   },
 
   // Return namespaces list. Filtered by query
   namespaces(query, callback) {
     const url = Api.buildUrl(Api.namespacesPath);
-    return $.ajax({
-      url,
-      data: {
+    return axios.get(url, {
+      params: {
         search: query,
         per_page: 20,
       },
-      dataType: 'json',
-    }).done(namespaces => callback(namespaces));
+    })
+      .then(({ data }) => callback(data));
   },
 
   // Return projects list. Filtered by query
-  projects(query, options, callback) {
+  projects(query, options, callback = _.noop) {
     const url = Api.buildUrl(Api.projectsPath);
     const defaults = {
       search: query,
@@ -70,12 +72,14 @@ const Api = {
       defaults.membership = true;
     }
 
-    return $.ajax({
-      url,
-      data: Object.assign(defaults, options),
-      dataType: 'json',
+    return axios.get(url, {
+      params: Object.assign(defaults, options),
     })
-      .done(projects => callback(projects));
+      .then(({ data }) => {
+        callback(data);
+
+        return data;
+      });
   },
 
   // Return single project
@@ -97,41 +101,34 @@ const Api = {
       url = Api.buildUrl(Api.groupLabelsPath).replace(':namespace_path', namespacePath);
     }
 
-    return $.ajax({
-      url,
-      type: 'POST',
-      data: { label: data },
-      dataType: 'json',
+    return axios.post(url, {
+      label: data,
     })
-      .done(label => callback(label))
-      .fail(message => callback(message.responseJSON));
+      .then(res => callback(res.data))
+      .catch(e => callback(e.response.data));
   },
 
   // Return group projects list. Filtered by query
   groupProjects(groupId, query, callback) {
     const url = Api.buildUrl(Api.groupProjectsPath)
       .replace(':id', groupId);
-    return $.ajax({
-      url,
-      data: {
+    return axios.get(url, {
+      params: {
         search: query,
         per_page: 20,
       },
-      dataType: 'json',
     })
-      .done(projects => callback(projects));
+      .then(({ data }) => callback(data));
   },
 
   commitMultiple(id, data) {
     // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions
     const url = Api.buildUrl(Api.commitPath)
       .replace(':id', encodeURIComponent(id));
-    return this.wrapAjaxCall({
-      url,
-      type: 'POST',
-      contentType: 'application/json; charset=utf-8',
-      data: JSON.stringify(data),
-      dataType: 'json',
+    return axios.post(url, JSON.stringify(data), {
+      headers: {
+        'Content-Type': 'application/json; charset=utf-8',
+      },
     });
   },
 
@@ -140,40 +137,37 @@ const Api = {
       .replace(':id', encodeURIComponent(id))
       .replace(':branch', branch);
 
-    return this.wrapAjaxCall({
-      url,
-      type: 'GET',
-      contentType: 'application/json; charset=utf-8',
-      dataType: 'json',
-    });
+    return axios.get(url);
   },
 
   // Return text for a specific license
   licenseText(key, data, callback) {
     const url = Api.buildUrl(Api.licensePath)
       .replace(':key', key);
-    return $.ajax({
-      url,
-      data,
+    return axios.get(url, {
+      params: data,
     })
-      .done(license => callback(license));
+      .then(res => callback(res.data));
   },
 
   gitignoreText(key, callback) {
     const url = Api.buildUrl(Api.gitignorePath)
       .replace(':key', key);
-    return $.get(url, gitignore => callback(gitignore));
+    return axios.get(url)
+      .then(({ data }) => callback(data));
   },
 
   gitlabCiYml(key, callback) {
     const url = Api.buildUrl(Api.gitlabCiYmlPath)
       .replace(':key', key);
-    return $.get(url, file => callback(file));
+    return axios.get(url)
+      .then(({ data }) => callback(data));
   },
 
   dockerfileYml(key, callback) {
     const url = Api.buildUrl(Api.dockerfilePath).replace(':key', key);
-    $.get(url, callback);
+    return axios.get(url)
+      .then(({ data }) => callback(data));
   },
 
   issueTemplate(namespacePath, projectPath, key, type, callback) {
@@ -182,23 +176,18 @@ const Api = {
       .replace(':type', type)
       .replace(':project_path', projectPath)
       .replace(':namespace_path', namespacePath);
-    $.ajax({
-      url,
-      dataType: 'json',
-    })
-      .done(file => callback(null, file))
-      .fail(callback);
+    return axios.get(url)
+      .then(({ data }) => callback(null, data))
+      .catch(callback);
   },
 
   users(query, options) {
     const url = Api.buildUrl(this.usersPath);
-    return Api.wrapAjaxCall({
-      url,
-      data: Object.assign({
+    return axios.get(url, {
+      params: Object.assign({
         search: query,
         per_page: 20,
       }, options),
-      dataType: 'json',
     });
   },
 
@@ -209,21 +198,6 @@ const Api = {
     }
     return urlRoot + url.replace(':version', gon.api_version);
   },
-
-  wrapAjaxCall(options) {
-    return new Promise((resolve, reject) => {
-      // jQuery 2 is not Promises/A+ compatible (missing catch)
-      $.ajax(options) // eslint-disable-line promise/catch-or-return
-      .then(data => resolve(data),
-        (jqXHR, textStatus, errorThrown) => {
-          const error = new Error(`${options.url}: ${errorThrown}`);
-          error.textStatus = textStatus;
-          if (jqXHR && jqXHR.responseJSON) error.responseJSON = jqXHR.responseJSON;
-          reject(error);
-        },
-      );
-    });
-  },
 };
 
 export default Api;
diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js
index 54132e8537b..612f604e725 100644
--- a/app/assets/javascripts/blob/viewer/index.js
+++ b/app/assets/javascripts/blob/viewer/index.js
@@ -1,5 +1,6 @@
 import Flash from '../../flash';
 import { handleLocationHash } from '../../lib/utils/common_utils';
+import axios from '../../lib/utils/axios_utils';
 
 export default class BlobViewer {
   constructor() {
@@ -127,25 +128,18 @@ export default class BlobViewer {
     const viewer = viewerParam;
     const url = viewer.getAttribute('data-url');
 
-    return new Promise((resolve, reject) => {
-      if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) {
-        resolve(viewer);
-        return;
-      }
+    if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) {
+      return Promise.resolve(viewer);
+    }
 
-      viewer.setAttribute('data-loading', 'true');
+    viewer.setAttribute('data-loading', 'true');
 
-      $.ajax({
-        url,
-        dataType: 'JSON',
-      })
-      .fail(reject)
-      .done((data) => {
+    return axios.get(url)
+      .then(({ data }) => {
         viewer.innerHTML = data.html;
         viewer.setAttribute('data-loaded', 'true');
 
-        resolve(viewer);
+        return viewer;
       });
-    });
   }
 }
diff --git a/app/assets/javascripts/commits.js b/app/assets/javascripts/commits.js
index 3a03cbf6b90..4b2f75fffde 100644
--- a/app/assets/javascripts/commits.js
+++ b/app/assets/javascripts/commits.js
@@ -5,6 +5,7 @@
 import { pluralize } from './lib/utils/text_utility';
 import { localTimeAgo } from './lib/utils/datetime_utility';
 import Pager from './pager';
+import axios from './lib/utils/axios_utils';
 
 export default (function () {
   const CommitsList = {};
@@ -43,29 +44,30 @@ export default (function () {
   CommitsList.filterResults = function () {
     const form = $('.commits-search-form');
     const search = CommitsList.searchField.val();
-    if (search === CommitsList.lastSearch) return;
+    if (search === CommitsList.lastSearch) return Promise.resolve();
     const commitsUrl = form.attr('action') + '?' + form.serialize();
     CommitsList.content.fadeTo('fast', 0.5);
-    return $.ajax({
-      type: 'GET',
-      url: form.attr('action'),
-      data: form.serialize(),
-      complete: function () {
-        return CommitsList.content.fadeTo('fast', 1.0);
-      },
-      success: function (data) {
+    const params = form.serializeArray().reduce((acc, obj) => Object.assign(acc, {
+      [obj.name]: obj.value,
+    }), {});
+
+    return axios.get(form.attr('action'), {
+      params,
+    })
+      .then(({ data }) => {
         CommitsList.lastSearch = search;
         CommitsList.content.html(data.html);
-        return history.replaceState({
-          page: commitsUrl,
+        CommitsList.content.fadeTo('fast', 1.0);
+
         // Change url so if user reload a page - search results are saved
+        history.replaceState({
+          page: commitsUrl,
         }, document.title, commitsUrl);
-      },
-      error: function () {
+      })
+      .catch(() => {
+        CommitsList.content.fadeTo('fast', 1.0);
         CommitsList.lastSearch = null;
-      },
-      dataType: 'json',
-    });
+      });
   };
 
   // Prepare loaded data.
diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js
index 96a87744df5..d007d0ae78f 100644
--- a/app/assets/javascripts/ide/stores/actions.js
+++ b/app/assets/javascripts/ide/stores/actions.js
@@ -71,7 +71,7 @@ export const setResizingStatus = ({ commit }, resizing) => {
 export const checkCommitStatus = ({ state }) =>
   service
     .getBranchData(state.currentProjectId, state.currentBranchId)
-    .then((data) => {
+    .then(({ data }) => {
       const { id } = data.commit;
       const selectedBranch =
         state.projects[state.currentProjectId].branches[state.currentBranchId];
@@ -90,7 +90,7 @@ export const commitChanges = (
 ) =>
   service
     .commit(state.currentProjectId, payload)
-    .then((data) => {
+    .then(({ data }) => {
       const { branch } = payload;
       if (!data.short_id) {
         flash(data.message, 'alert', document, null, false, true);
@@ -147,8 +147,8 @@ export const commitChanges = (
     })
     .catch((err) => {
       let errMsg = 'Error committing changes. Please try again.';
-      if (err.responseJSON && err.responseJSON.message) {
-        errMsg += ` (${stripHtml(err.responseJSON.message)})`;
+      if (err.response.data && err.response.data.message) {
+        errMsg += ` (${stripHtml(err.response.data.message)})`;
       }
       flash(errMsg, 'alert', document, null, false, true);
       window.dispatchEvent(new Event('resize'));
diff --git a/app/assets/javascripts/ide/stores/actions/branch.js b/app/assets/javascripts/ide/stores/actions/branch.js
index 589ec28c6a4..bc6fd2d4163 100644
--- a/app/assets/javascripts/ide/stores/actions/branch.js
+++ b/app/assets/javascripts/ide/stores/actions/branch.js
@@ -10,7 +10,7 @@ export const getBranchData = (
         !state.projects[`${projectId}`].branches[branchId])
         || force) {
     service.getBranchData(`${projectId}`, branchId)
-      .then((data) => {
+      .then(({ data }) => {
         const { id } = data.commit;
         commit(types.SET_BRANCH, { projectPath: `${projectId}`, branchName: branchId, branch: data });
         commit(types.SET_BRANCH_WORKING_REFERENCE, { projectId, branchId, reference: id });
diff --git a/app/assets/javascripts/lib/utils/users_cache.js b/app/assets/javascripts/lib/utils/users_cache.js
index 88f8a622c00..b01ec6b81a3 100644
--- a/app/assets/javascripts/lib/utils/users_cache.js
+++ b/app/assets/javascripts/lib/utils/users_cache.js
@@ -8,16 +8,16 @@ class UsersCache extends Cache {
     }
 
     return Api.users('', { username })
-      .then((users) => {
-        if (!users.length) {
+      .then(({ data }) => {
+        if (!data.length) {
           throw new Error(`User "${username}" could not be found!`);
         }
 
-        if (users.length > 1) {
+        if (data.length > 1) {
           throw new Error(`Expected username "${username}" to be unique!`);
         }
 
-        const user = users[0];
+        const user = data[0];
         this.internalStorage[username] = user;
         return user;
       });
diff --git a/spec/features/projects/members/share_with_group_spec.rb b/spec/features/projects/members/share_with_group_spec.rb
index 3198798306c..4cf48098401 100644
--- a/spec/features/projects/members/share_with_group_spec.rb
+++ b/spec/features/projects/members/share_with_group_spec.rb
@@ -122,7 +122,7 @@ feature 'Project > Members > Share with Group', :js do
       select2 group.id, from: '#link_group_id'
 
       fill_in 'expires_at_groups', with: (Time.now + 4.5.days).strftime('%Y-%m-%d')
-      page.find('body').click
+      click_on 'share-with-group-tab'
       find('.btn-create').click
     end
 
diff --git a/spec/javascripts/api_spec.js b/spec/javascripts/api_spec.js
index cc5fa42aafe..cf3a76d0d2e 100644
--- a/spec/javascripts/api_spec.js
+++ b/spec/javascripts/api_spec.js
@@ -1,3 +1,5 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import Api from '~/api';
 
 describe('Api', () => {
@@ -7,20 +9,17 @@ describe('Api', () => {
     api_version: dummyApiVersion,
     relative_url_root: dummyUrlRoot,
   };
-  const dummyResponse = 'hello from outer space!';
-  const sendDummyResponse = () => {
-    const deferred = $.Deferred();
-    deferred.resolve(dummyResponse);
-    return deferred.promise();
-  };
   let originalGon;
+  let mock;
 
   beforeEach(() => {
+    mock = new MockAdapter(axios);
     originalGon = window.gon;
     window.gon = Object.assign({}, dummyGon);
   });
 
   afterEach(() => {
+    mock.restore();
     window.gon = originalGon;
   });
 
@@ -38,15 +37,13 @@ describe('Api', () => {
   describe('group', () => {
     it('fetches a group', (done) => {
       const groupId = '123456';
-      const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/groups/${groupId}.json`;
-      spyOn(jQuery, 'ajax').and.callFake((request) => {
-        expect(request.url).toEqual(expectedUrl);
-        expect(request.dataType).toEqual('json');
-        return sendDummyResponse();
+      const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/groups/${groupId}`;
+      mock.onGet(expectedUrl).reply(200, {
+        name: 'test',
       });
 
       Api.group(groupId, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response.name).toBe('test');
         done();
       });
     });
@@ -57,19 +54,13 @@ describe('Api', () => {
       const query = 'dummy query';
       const options = { unused: 'option' };
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/groups.json`;
-      const expectedData = Object.assign({
-        search: query,
-        per_page: 20,
-      }, options);
-      spyOn(jQuery, 'ajax').and.callFake((request) => {
-        expect(request.url).toEqual(expectedUrl);
-        expect(request.dataType).toEqual('json');
-        expect(request.data).toEqual(expectedData);
-        return sendDummyResponse();
-      });
+      mock.onGet(expectedUrl).reply(200, [{
+        name: 'test',
+      }]);
 
       Api.groups(query, options, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response.length).toBe(1);
+        expect(response[0].name).toBe('test');
         done();
       });
     });
@@ -79,19 +70,13 @@ describe('Api', () => {
     it('fetches namespaces', (done) => {
       const query = 'dummy query';
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/namespaces.json`;
-      const expectedData = {
-        search: query,
-        per_page: 20,
-      };
-      spyOn(jQuery, 'ajax').and.callFake((request) => {
-        expect(request.url).toEqual(expectedUrl);
-        expect(request.dataType).toEqual('json');
-        expect(request.data).toEqual(expectedData);
-        return sendDummyResponse();
-      });
+      mock.onGet(expectedUrl).reply(200, [{
+        name: 'test',
+      }]);
 
       Api.namespaces(query, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response.length).toBe(1);
+        expect(response[0].name).toBe('test');
         done();
       });
     });
@@ -103,21 +88,13 @@ describe('Api', () => {
       const options = { unused: 'option' };
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/projects.json`;
       window.gon.current_user_id = 1;
-      const expectedData = Object.assign({
-        search: query,
-        per_page: 20,
-        membership: true,
-        simple: true,
-      }, options);
-      spyOn(jQuery, 'ajax').and.callFake((request) => {
-        expect(request.url).toEqual(expectedUrl);
-        expect(request.dataType).toEqual('json');
-        expect(request.data).toEqual(expectedData);
-        return sendDummyResponse();
-      });
+      mock.onGet(expectedUrl).reply(200, [{
+        name: 'test',
+      }]);
 
       Api.projects(query, options, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response.length).toBe(1);
+        expect(response[0].name).toBe('test');
         done();
       });
     });
@@ -126,20 +103,13 @@ describe('Api', () => {
       const query = 'dummy query';
       const options = { unused: 'option' };
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/projects.json`;
-      const expectedData = Object.assign({
-        search: query,
-        per_page: 20,
-        simple: true,
-      }, options);
-      spyOn(jQuery, 'ajax').and.callFake((request) => {
-        expect(request.url).toEqual(expectedUrl);
-        expect(request.dataType).toEqual('json');
-        expect(request.data).toEqual(expectedData);
-        return sendDummyResponse();
-      });
+      mock.onGet(expectedUrl).reply(200, [{
+        name: 'test',
+      }]);
 
       Api.projects(query, options, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response.length).toBe(1);
+        expect(response[0].name).toBe('test');
         done();
       });
     });
@@ -154,16 +124,16 @@ describe('Api', () => {
       const expectedData = {
         label: labelData,
       };
-      spyOn(jQuery, 'ajax').and.callFake((request) => {
-        expect(request.url).toEqual(expectedUrl);
-        expect(request.dataType).toEqual('json');
-        expect(request.type).toEqual('POST');
-        expect(request.data).toEqual(expectedData);
-        return sendDummyResponse();
+      mock.onPost(expectedUrl).reply((config) => {
+        expect(config.data).toBe(JSON.stringify(expectedData));
+
+        return [200, {
+          name: 'test',
+        }];
       });
 
       Api.newLabel(namespace, project, labelData, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response.name).toBe('test');
         done();
       });
     });
@@ -174,19 +144,13 @@ describe('Api', () => {
       const groupId = '123456';
       const query = 'dummy query';
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/groups/${groupId}/projects.json`;
-      const expectedData = {
-        search: query,
-        per_page: 20,
-      };
-      spyOn(jQuery, 'ajax').and.callFake((request) => {
-        expect(request.url).toEqual(expectedUrl);
-        expect(request.dataType).toEqual('json');
-        expect(request.data).toEqual(expectedData);
-        return sendDummyResponse();
-      });
+      mock.onGet(expectedUrl).reply(200, [{
+        name: 'test',
+      }]);
 
       Api.groupProjects(groupId, query, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response.length).toBe(1);
+        expect(response[0].name).toBe('test');
         done();
       });
     });
@@ -197,14 +161,10 @@ describe('Api', () => {
       const licenseKey = "driver's license";
       const data = { unused: 'option' };
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/templates/licenses/${licenseKey}`;
-      spyOn(jQuery, 'ajax').and.callFake((request) => {
-        expect(request.url).toEqual(expectedUrl);
-        expect(request.data).toEqual(data);
-        return sendDummyResponse();
-      });
+      mock.onGet(expectedUrl).reply(200, 'test');
 
       Api.licenseText(licenseKey, data, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response).toBe('test');
         done();
       });
     });
@@ -214,13 +174,10 @@ describe('Api', () => {
     it('fetches a gitignore text', (done) => {
       const gitignoreKey = 'ignore git';
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/templates/gitignores/${gitignoreKey}`;
-      spyOn(jQuery, 'get').and.callFake((url, callback) => {
-        expect(url).toEqual(expectedUrl);
-        callback(dummyResponse);
-      });
+      mock.onGet(expectedUrl).reply(200, 'test');
 
       Api.gitignoreText(gitignoreKey, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response).toBe('test');
         done();
       });
     });
@@ -230,13 +187,10 @@ describe('Api', () => {
     it('fetches a .gitlab-ci.yml', (done) => {
       const gitlabCiYmlKey = 'Y CI ML';
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/templates/gitlab_ci_ymls/${gitlabCiYmlKey}`;
-      spyOn(jQuery, 'get').and.callFake((url, callback) => {
-        expect(url).toEqual(expectedUrl);
-        callback(dummyResponse);
-      });
+      mock.onGet(expectedUrl).reply(200, 'test');
 
       Api.gitlabCiYml(gitlabCiYmlKey, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response).toBe('test');
         done();
       });
     });
@@ -246,13 +200,10 @@ describe('Api', () => {
     it('fetches a Dockerfile', (done) => {
       const dockerfileYmlKey = 'a giant whale';
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/templates/dockerfiles/${dockerfileYmlKey}`;
-      spyOn(jQuery, 'get').and.callFake((url, callback) => {
-        expect(url).toEqual(expectedUrl);
-        callback(dummyResponse);
-      });
+      mock.onGet(expectedUrl).reply(200, 'test');
 
       Api.dockerfileYml(dockerfileYmlKey, (response) => {
-        expect(response).toBe(dummyResponse);
+        expect(response).toBe('test');
         done();
       });
     });
@@ -265,14 +216,10 @@ describe('Api', () => {
       const templateKey = ' template #%?.key ';
       const templateType = 'template type';
       const expectedUrl = `${dummyUrlRoot}/${namespace}/${project}/templates/${templateType}/${encodeURIComponent(templateKey)}`;
-      spyOn(jQuery, 'ajax').and.callFake((request) => {
-        expect(request.url).toEqual(expectedUrl);
-        return sendDummyResponse();
-      });
+      mock.onGet(expectedUrl).reply(200, 'test');
 
       Api.issueTemplate(namespace, project, templateKey, templateType, (error, response) => {
-        expect(error).toBe(null);
-        expect(response).toBe(dummyResponse);
+        expect(response).toBe('test');
         done();
       });
     });
@@ -283,20 +230,14 @@ describe('Api', () => {
       const query = 'dummy query';
       const options = { unused: 'option' };
       const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/users.json`;
-      const expectedData = Object.assign({
-        search: query,
-        per_page: 20,
-      }, options);
-      spyOn(jQuery, 'ajax').and.callFake((request) => {
-        expect(request.url).toEqual(expectedUrl);
-        expect(request.dataType).toEqual('json');
-        expect(request.data).toEqual(expectedData);
-        return sendDummyResponse();
-      });
+      mock.onGet(expectedUrl).reply(200, [{
+        name: 'test',
+      }]);
 
       Api.users(query, options)
-        .then((response) => {
-          expect(response).toBe(dummyResponse);
+        .then(({ data }) => {
+          expect(data.length).toBe(1);
+          expect(data[0].name).toBe('test');
         })
         .then(done)
         .catch(done.fail);
diff --git a/spec/javascripts/blob/viewer/index_spec.js b/spec/javascripts/blob/viewer/index_spec.js
index cfa6650d85f..892411a6a40 100644
--- a/spec/javascripts/blob/viewer/index_spec.js
+++ b/spec/javascripts/blob/viewer/index_spec.js
@@ -1,28 +1,35 @@
 /* eslint-disable no-new */
+import MockAdapter from 'axios-mock-adapter';
 import BlobViewer from '~/blob/viewer/index';
+import axios from '~/lib/utils/axios_utils';
 
 describe('Blob viewer', () => {
   let blob;
+  let mock;
+
   preloadFixtures('snippets/show.html.raw');
 
   beforeEach(() => {
+    mock = new MockAdapter(axios);
+
     loadFixtures('snippets/show.html.raw');
     $('#modal-upload-blob').remove();
 
     blob = new BlobViewer();
 
-    spyOn($, 'ajax').and.callFake(() => {
-      const d = $.Deferred();
-
-      d.resolve({
-        html: '<div>testing</div>',
-      });
+    mock.onGet('http://test.host/snippets/1.json?viewer=rich').reply(200, {
+      html: '<div>testing</div>',
+    });
 
-      return d.promise();
+    mock.onGet('http://test.host/snippets/1.json?viewer=simple').reply(200, {
+      html: '<div>testing</div>',
     });
+
+    spyOn(axios, 'get').and.callThrough();
   });
 
   afterEach(() => {
+    mock.restore();
     location.hash = '';
   });
 
@@ -30,7 +37,6 @@ describe('Blob viewer', () => {
     document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
 
     setTimeout(() => {
-      expect($.ajax).toHaveBeenCalled();
       expect(
         document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]')
           .classList.contains('hidden'),
@@ -46,7 +52,6 @@ describe('Blob viewer', () => {
     new BlobViewer();
 
     setTimeout(() => {
-      expect($.ajax).toHaveBeenCalled();
       expect(
         document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]')
           .classList.contains('hidden'),
@@ -64,12 +69,8 @@ describe('Blob viewer', () => {
     });
 
     asyncClick()
+      .then(() => asyncClick())
       .then(() => {
-        expect($.ajax).toHaveBeenCalled();
-        return asyncClick();
-      })
-      .then(() => {
-        expect($.ajax.calls.count()).toBe(1);
         expect(
           document.querySelector('.blob-viewer[data-type="simple"]').getAttribute('data-loaded'),
         ).toBe('true');
@@ -122,7 +123,6 @@ describe('Blob viewer', () => {
       document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
 
       setTimeout(() => {
-        expect($.ajax).toHaveBeenCalled();
         expect(
           copyButton.classList.contains('disabled'),
         ).toBeFalsy();
@@ -135,8 +135,6 @@ describe('Blob viewer', () => {
       document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
 
       setTimeout(() => {
-        expect($.ajax).toHaveBeenCalled();
-
         expect(
           copyButton.getAttribute('data-original-title'),
         ).toBe('Copy source to clipboard');
@@ -171,14 +169,14 @@ describe('Blob viewer', () => {
     it('sends AJAX request when switching to simple view', () => {
       blob.switchToViewer('simple');
 
-      expect($.ajax).toHaveBeenCalled();
+      expect(axios.get).toHaveBeenCalled();
     });
 
     it('does not send AJAX request when switching to rich view', () => {
       blob.switchToViewer('simple');
       blob.switchToViewer('rich');
 
-      expect($.ajax.calls.count()).toBe(1);
+      expect(axios.get.calls.count()).toBe(1);
     });
   });
 });
diff --git a/spec/javascripts/commits_spec.js b/spec/javascripts/commits_spec.js
index d0176520440..44ec9e4eabf 100644
--- a/spec/javascripts/commits_spec.js
+++ b/spec/javascripts/commits_spec.js
@@ -1,4 +1,6 @@
 import 'vendor/jquery.endless-scroll';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import CommitsList from '~/commits';
 
 describe('Commits List', () => {
@@ -43,30 +45,47 @@ describe('Commits List', () => {
 
   describe('on entering input', () => {
     let ajaxSpy;
+    let mock;
 
     beforeEach(() => {
       CommitsList.init(25);
       CommitsList.searchField.val('');
 
       spyOn(history, 'replaceState').and.stub();
-      ajaxSpy = spyOn(jQuery, 'ajax').and.callFake((req) => {
-        req.success({
-          data: '<li>Result</li>',
-        });
+      mock = new MockAdapter(axios);
+
+      mock.onGet('/h5bp/html5-boilerplate/commits/master').reply(200, {
+        html: '<li>Result</li>',
       });
+
+      ajaxSpy = spyOn(axios, 'get').and.callThrough();
+    });
+
+    afterEach(() => {
+      mock.restore();
     });
 
-    it('should save the last search string', () => {
+    it('should save the last search string', (done) => {
       CommitsList.searchField.val('GitLab');
-      CommitsList.filterResults();
-      expect(ajaxSpy).toHaveBeenCalled();
-      expect(CommitsList.lastSearch).toEqual('GitLab');
+      CommitsList.filterResults()
+        .then(() => {
+          expect(ajaxSpy).toHaveBeenCalled();
+          expect(CommitsList.lastSearch).toEqual('GitLab');
+
+          done();
+        })
+        .catch(done.fail);
     });
 
-    it('should not make ajax call if the input does not change', () => {
-      CommitsList.filterResults();
-      expect(ajaxSpy).not.toHaveBeenCalled();
-      expect(CommitsList.lastSearch).toEqual('');
+    it('should not make ajax call if the input does not change', (done) => {
+      CommitsList.filterResults()
+        .then(() => {
+          expect(ajaxSpy).not.toHaveBeenCalled();
+          expect(CommitsList.lastSearch).toEqual('');
+
+          done();
+        })
+        .catch(done.fail);
     });
   });
 });
diff --git a/spec/javascripts/lib/utils/users_cache_spec.js b/spec/javascripts/lib/utils/users_cache_spec.js
index ec6ea35952b..50371c8c5f6 100644
--- a/spec/javascripts/lib/utils/users_cache_spec.js
+++ b/spec/javascripts/lib/utils/users_cache_spec.js
@@ -92,7 +92,9 @@ describe('UsersCache', () => {
       apiSpy = (query, options) => {
         expect(query).toBe('');
         expect(options).toEqual({ username: dummyUsername });
-        return Promise.resolve([dummyUser]);
+        return Promise.resolve({
+          data: [dummyUser],
+        });
       };
 
       UsersCache.retrieve(dummyUsername)
diff --git a/spec/javascripts/repo/components/new_dropdown/modal_spec.js b/spec/javascripts/repo/components/new_dropdown/modal_spec.js
index 233cca06ed0..8bbc3100357 100644
--- a/spec/javascripts/repo/components/new_dropdown/modal_spec.js
+++ b/spec/javascripts/repo/components/new_dropdown/modal_spec.js
@@ -18,8 +18,10 @@ describe('new file modal component', () => {
     }));
 
     spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({
-      commit: {
-        id: '123branch',
+      data: {
+        commit: {
+          id: '123branch',
+        },
       },
     }));
 
diff --git a/spec/javascripts/repo/components/new_dropdown/upload_spec.js b/spec/javascripts/repo/components/new_dropdown/upload_spec.js
index 788c08e5279..667112ab21a 100644
--- a/spec/javascripts/repo/components/new_dropdown/upload_spec.js
+++ b/spec/javascripts/repo/components/new_dropdown/upload_spec.js
@@ -17,8 +17,10 @@ describe('new dropdown upload', () => {
     }));
 
     spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({
-      commit: {
-        id: '123branch',
+      data: {
+        commit: {
+          id: '123branch',
+        },
       },
     }));
 
diff --git a/spec/javascripts/repo/components/repo_commit_section_spec.js b/spec/javascripts/repo/components/repo_commit_section_spec.js
index 676ac09f2c9..93e94b4f24c 100644
--- a/spec/javascripts/repo/components/repo_commit_section_spec.js
+++ b/spec/javascripts/repo/components/repo_commit_section_spec.js
@@ -87,8 +87,10 @@ describe('RepoCommitSection', () => {
       changedFiles = JSON.parse(JSON.stringify(vm.$store.getters.changedFiles));
 
       spyOn(service, 'commit').and.returnValue(Promise.resolve({
-        short_id: '1',
-        stats: {},
+        data: {
+          short_id: '1',
+          stats: {},
+        },
       }));
     });
 
diff --git a/spec/javascripts/repo/stores/actions_spec.js b/spec/javascripts/repo/stores/actions_spec.js
index 8d830c67290..f678967b092 100644
--- a/spec/javascripts/repo/stores/actions_spec.js
+++ b/spec/javascripts/repo/stores/actions_spec.js
@@ -178,7 +178,9 @@ describe('Multi-file store actions', () => {
 
     it('calls service', (done) => {
       spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({
-        commit: { id: '123' },
+        data: {
+          commit: { id: '123' },
+        },
       }));
 
       store.dispatch('checkCommitStatus')
@@ -192,7 +194,9 @@ describe('Multi-file store actions', () => {
 
     it('returns true if current ref does not equal returned ID', (done) => {
       spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({
-        commit: { id: '123' },
+        data: {
+          commit: { id: '123' },
+        },
       }));
 
       store.dispatch('checkCommitStatus')
@@ -206,7 +210,9 @@ describe('Multi-file store actions', () => {
 
     it('returns false if current ref equals returned ID', (done) => {
       spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({
-        commit: { id: '1' },
+        data: {
+          commit: { id: '1' },
+        },
       }));
 
       store.dispatch('checkCommitStatus')
@@ -250,13 +256,15 @@ describe('Multi-file store actions', () => {
     describe('success', () => {
       beforeEach(() => {
         spyOn(service, 'commit').and.returnValue(Promise.resolve({
-          id: '123456',
-          short_id: '123',
-          message: 'test message',
-          committed_date: 'date',
-          stats: {
-            additions: '1',
-            deletions: '2',
+          data: {
+            id: '123456',
+            short_id: '123',
+            message: 'test message',
+            committed_date: 'date',
+            stats: {
+              additions: '1',
+              deletions: '2',
+            },
           },
         }));
       });
@@ -324,7 +332,9 @@ describe('Multi-file store actions', () => {
     describe('failed', () => {
       beforeEach(() => {
         spyOn(service, 'commit').and.returnValue(Promise.resolve({
-          message: 'failed message',
+          data: {
+            message: 'failed message',
+          },
         }));
       });