Merge branch '34534-switch-to-axios' into 'master'

Switch some bundles to use Axios

Closes #41043

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

app/assets/javascripts/blob/notebook/index.js

 /* eslint-disable no-new */
 import Vue from 'vue';
-import VueResource from 'vue-resource';
+import axios from '../../lib/utils/axios_utils';
 import notebookLab from '../../notebook/index.vue';
 
-Vue.use(VueResource);
-
 export default () => {
   const el = document.getElementById('js-notebook-viewer');
 
@@ -50,14 +48,14 @@ export default () => {
     `,
     methods: {
       loadFile() {
-        this.$http.get(el.dataset.endpoint)
-          .then(response => response.json())
-          .then((res) => {
-            this.json = res;
+        axios.get(el.dataset.endpoint)
+          .then(res => res.data)
+          .then((data) => {
+            this.json = data;
             this.loading = false;
           })
           .catch((e) => {
-            if (e.status) {
+            if (e.status !== 200) {
               this.loadError = true;
             }
 

app/assets/javascripts/boards/boards_bundle.js

@@ -2,7 +2,6 @@
 
 import _ from 'underscore';
 import Vue from 'vue';
-import VueResource from 'vue-resource';
 import Flash from '../flash';
 import { __ } from '../locale';
 import FilteredSearchBoards from './filtered_search_boards';
@@ -25,8 +24,6 @@ import './components/new_list_dropdown';
 import './components/modal/index';
 import '../vue_shared/vue_resource_interceptor';
 
-Vue.use(VueResource);
-
 $(() => {
   const $boardApp = document.getElementById('board-app');
   const Store = gl.issueBoards.BoardsStore;
@@ -95,9 +92,9 @@ $(() => {
 
       Store.disabled = this.disabled;
       gl.boardService.all()
-        .then(response => response.json())
-        .then((resp) => {
-          resp.forEach((board) => {
+        .then(res => res.data)
+        .then((data) => {
+          data.forEach((board) => {
             const list = Store.addList(board, this.defaultAvatar);
 
             if (list.type === 'closed') {
@@ -112,7 +109,9 @@ $(() => {
           Store.addBlankState();
           this.loading = false;
         })
-        .catch(() => new Flash('An error occurred. Please try again.'));
+        .catch(() => {
+          Flash('An error occurred while fetching the board lists. Please try again.');
+        });
     },
     methods: {
       updateTokens() {
@@ -123,7 +122,7 @@ $(() => {
         if (sidebarInfoEndpoint && newIssue.subscribed === undefined) {
           newIssue.setFetchingState('subscriptions', true);
           BoardService.getIssueInfo(sidebarInfoEndpoint)
-            .then(res => res.json())
+            .then(res => res.data)
             .then((data) => {
               newIssue.setFetchingState('subscriptions', false);
               newIssue.updateData({

app/assets/javascripts/boards/components/board_blank_state.js

@@ -65,7 +65,7 @@ export default {
 
       // Save the labels
       gl.boardService.generateDefaultLists()
-        .then(resp => resp.json())
+        .then(res => res.data)
         .then((data) => {
           data.forEach((listObj) => {
             const list = Store.findList('title', listObj.title);

app/assets/javascripts/boards/components/modal/index.js

@@ -89,7 +89,7 @@ gl.issueBoards.IssuesModal = Vue.extend({
         page: this.page,
         per: this.perPage,
       }))
-      .then(resp => resp.json())
+      .then(res => res.data)
       .then((data) => {
         if (clearIssues) {
           this.issues = [];

app/assets/javascripts/boards/models/list.js

@@ -40,7 +40,7 @@ class List {
 
   save () {
     return gl.boardService.createList(this.label.id)
-      .then(resp => resp.json())
+      .then(res => res.data)
       .then((data) => {
         this.id = data.id;
         this.type = data.list_type;
@@ -90,7 +90,7 @@ class List {
     }
 
     return gl.boardService.getIssuesForList(this.id, data)
-      .then(resp => resp.json())
+      .then(res => res.data)
       .then((data) => {
         this.loading = false;
         this.issuesSize = data.size;
@@ -108,7 +108,7 @@ class List {
     this.issuesSize += 1;
 
     return gl.boardService.newIssue(this.id, issue)
-      .then(resp => resp.json())
+      .then(res => res.data)
       .then((data) => {
         issue.id = data.id;
         issue.iid = data.iid;

app/assets/javascripts/boards/services/board_service.js

-/* eslint-disable space-before-function-paren, comma-dangle, no-param-reassign, camelcase, max-len, no-unused-vars */
-
-import Vue from 'vue';
+import axios from '../../lib/utils/axios_utils';
+import { mergeUrlParams } from '../../lib/utils/url_utility';
 
 export default class BoardService {
-  constructor ({ boardsEndpoint, listsEndpoint, bulkUpdatePath, boardId }) {
-    this.boards = Vue.resource(`${boardsEndpoint}{/id}.json`, {}, {
-      issues: {
-        method: 'GET',
-        url: `${gon.relative_url_root}/-/boards/${boardId}/issues.json`,
-      }
-    });
-    this.lists = Vue.resource(`${listsEndpoint}{/id}`, {}, {
-      generate: {
-        method: 'POST',
-        url: `${listsEndpoint}/generate.json`
-      }
-    });
-    this.issue = Vue.resource(`${gon.relative_url_root}/-/boards/${boardId}/issues{/id}`, {});
-    this.issues = Vue.resource(`${listsEndpoint}{/id}/issues`, {}, {
-      bulkUpdate: {
-        method: 'POST',
-        url: bulkUpdatePath,
-      },
-    });
+  constructor({ boardsEndpoint, listsEndpoint, bulkUpdatePath, boardId }) {
+    this.boardsEndpoint = boardsEndpoint;
+    this.boardId = boardId;
+    this.listsEndpoint = listsEndpoint;
+    this.listsEndpointGenerate = `${listsEndpoint}/generate.json`;
+    this.bulkUpdatePath = bulkUpdatePath;
+  }
+
+  generateBoardsPath(id) {
+    return `${this.boardsEndpoint}${id ? `/${id}` : ''}.json`;
   }
 
-  all () {
-    return this.lists.get();
+  generateIssuesPath(id) {
+    return `${this.listsEndpoint}${id ? `/${id}` : ''}/issues`;
   }
 
-  generateDefaultLists () {
-    return this.lists.generate({});
+  static generateIssuePath(boardId, id) {
+    return `${gon.relative_url_root}/-/boards/${boardId ? `/${boardId}` : ''}/issues${id ? `/${id}` : ''}`;
   }
 
-  createList (label_id) {
-    return this.lists.save({}, {
+  all() {
+    return axios.get(this.listsEndpoint);
+  }
+
+  generateDefaultLists() {
+    return axios.post(this.listsEndpointGenerate, {});
+  }
+
+  createList(labelId) {
+    return axios.post(this.listsEndpoint, {
       list: {
-        label_id
-      }
+        label_id: labelId,
+      },
     });
   }
 
-  updateList (id, position) {
-    return this.lists.update({ id }, {
+  updateList(id, position) {
+    return axios.put(`${this.listsEndpoint}/${id}`, {
       list: {
-        position
-      }
+        position,
+      },
     });
   }
 
-  destroyList (id) {
-    return this.lists.delete({ id });
+  destroyList(id) {
+    return axios.delete(`${this.listsEndpoint}/${id}`);
   }
 
-  getIssuesForList (id, filter = {}) {
+  getIssuesForList(id, filter = {}) {
     const data = { id };
     Object.keys(filter).forEach((key) => { data[key] = filter[key]; });
 
-    return this.issues.get(data);
+    return axios.get(mergeUrlParams(data, this.generateIssuesPath(id)));
   }
 
-  moveIssue (id, from_list_id = null, to_list_id = null, move_before_id = null, move_after_id = null) {
-    return this.issue.update({ id }, {
-      from_list_id,
-      to_list_id,
-      move_before_id,
-      move_after_id,
+  moveIssue(id, fromListId = null, toListId = null, moveBeforeId = null, moveAfterId = null) {
+    return axios.put(BoardService.generateIssuePath(this.boardId, id), {
+      from_list_id: fromListId,
+      to_list_id: toListId,
+      move_before_id: moveBeforeId,
+      move_after_id: moveAfterId,
     });
   }
 
-  newIssue (id, issue) {
-    return this.issues.save({ id }, {
-      issue
+  newIssue(id, issue) {
+    return axios.post(this.generateIssuesPath(id), {
+      issue,
     });
   }
 
   getBacklog(data) {
-    return this.boards.issues(data);
+    return axios.get(mergeUrlParams(data, `${gon.relative_url_root}/-/boards/${this.boardId}/issues.json`));
   }
 
   bulkUpdate(issueIds, extraData = {}) {
@@ -86,15 +83,15 @@ export default class BoardService {
       }),
     };
 
-    return this.issues.bulkUpdate(data);
+    return axios.post(this.bulkUpdatePath, data);
   }
 
   static getIssueInfo(endpoint) {
-    return Vue.http.get(endpoint);
+    return axios.get(endpoint);
   }
 
   static toggleIssueSubscription(endpoint) {
-    return Vue.http.post(endpoint);
+    return axios.post(endpoint);
   }
 }
 

app/assets/javascripts/issue_show/components/app.vue

@@ -172,8 +172,8 @@ export default {
     },
 
     updateIssuable() {
-      this.service.updateIssuable(this.store.formState)
-        .then(res => res.json())
+      return this.service.updateIssuable(this.store.formState)
+        .then(res => res.data)
         .then(data => this.checkForSpam(data))
         .then((data) => {
           if (location.pathname !== data.web_url) {
@@ -182,7 +182,7 @@ export default {
 
           return this.service.getData();
         })
-        .then(res => res.json())
+        .then(res => res.data)
         .then((data) => {
           this.store.updateState(data);
           eventHub.$emit('close.form');
@@ -207,7 +207,7 @@ export default {
 
     deleteIssuable() {
       this.service.deleteIssuable()
-        .then(res => res.json())
+        .then(res => res.data)
         .then((data) => {
           // Stop the poll so we don't get 404's with the issuable not existing
           this.poll.stop();
@@ -225,7 +225,7 @@ export default {
     this.poll = new Poll({
       resource: this.service,
       method: 'getData',
-      successCallback: res => res.json().then(data => this.store.updateState(data)),
+      successCallback: res => this.store.updateState(res.data),
       errorCallback(err) {
         throw new Error(err);
       },

app/assets/javascripts/issue_show/services/index.js

-import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-Vue.use(VueResource);
+import axios from '../../lib/utils/axios_utils';
 
 export default class Service {
   constructor(endpoint) {
-    this.endpoint = endpoint;
-
-    this.resource = Vue.resource(`${this.endpoint}.json`, {}, {
-      realtimeChanges: {
-        method: 'GET',
-        url: `${this.endpoint}/realtime_changes`,
-      },
-    });
+    this.endpoint = `${endpoint}.json`;
+    this.realtimeEndpoint = `${endpoint}/realtime_changes`;
   }
 
   getData() {
-    return this.resource.realtimeChanges();
+    return axios.get(this.realtimeEndpoint);
   }
 
   deleteIssuable() {
-    return this.resource.delete();
+    return axios.delete(this.endpoint);
   }
 
   updateIssuable(data) {
-    return this.resource.update(data);
+    return axios.put(this.endpoint, data);
   }
 }

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

@@ -2,6 +2,8 @@ import axios from 'axios';
 import csrf from './csrf';
 
 axios.defaults.headers.common[csrf.headerKey] = csrf.token;
+// Used by Rails to check if it is a valid XHR request
+axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 // Maintain a global counter for active requests
 // see: spec/support/wait_for_requests.rb

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

@@ -232,7 +232,7 @@ export const nodeMatchesSelector = (node, selector) => {
 export const normalizeHeaders = (headers) => {
   const upperCaseHeaders = {};
 
-  Object.keys(headers).forEach((e) => {
+  Object.keys(headers || {}).forEach((e) => {
     upperCaseHeaders[e.toUpperCase()] = headers[e];
   });
 

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

@@ -18,7 +18,7 @@ export function getParameterValues(sParam) {
 // @param {String} url
 export function mergeUrlParams(params, url) {
   let newUrl = Object.keys(params).reduce((acc, paramName) => {
-    const paramValue = params[paramName];
+    const paramValue = encodeURIComponent(params[paramName]);
     const pattern = new RegExp(`\\b(${paramName}=).*?(&|$)`);
 
     if (paramValue === null) {

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js

@@ -34,10 +34,10 @@ export default {
 
       if (isConfirmed) {
         MRWidgetService.stopEnvironment(deployment.stop_url)
-          .then(res => res.json())
-          .then((res) => {
-            if (res.redirect_url) {
-              visitUrl(res.redirect_url);
+          .then(res => res.data)
+          .then((data) => {
+            if (data.redirect_url) {
+              visitUrl(data.redirect_url);
             }
           })
           .catch(() => {

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js

@@ -102,11 +102,11 @@ export default {
             return res;
           }
 
-          return res.json();
+          return res.data;
         })
-        .then((res) => {
-          this.computeGraphData(res.metrics, res.deployment_time);
-          return res;
+        .then((data) => {
+          this.computeGraphData(data.metrics, data.deployment_time);
+          return data;
         })
         .catch(() => {
           this.loadFailed = true;

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js

@@ -31,9 +31,9 @@ export default {
     cancelAutomaticMerge() {
       this.isCancellingAutoMerge = true;
       this.service.cancelAutomaticMerge()
-        .then(res => res.json())
-        .then((res) => {
-          eventHub.$emit('UpdateWidgetData', res);
+        .then(res => res.data)
+        .then((data) => {
+          eventHub.$emit('UpdateWidgetData', data);
         })
         .catch(() => {
           this.isCancellingAutoMerge = false;
@@ -49,9 +49,9 @@ export default {
 
       this.isRemovingSourceBranch = true;
       this.service.mergeResource.save(options)
-        .then(res => res.json())
-        .then((res) => {
-          if (res.status === 'merge_when_pipeline_succeeds') {
+        .then(res => res.data)
+        .then((data) => {
+          if (data.status === 'merge_when_pipeline_succeeds') {
             eventHub.$emit('MRWidgetUpdateRequested');
           }
         })

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js

@@ -47,9 +47,9 @@ export default {
     removeSourceBranch() {
       this.isMakingRequest = true;
       this.service.removeSourceBranch()
-        .then(res => res.json())
-        .then((res) => {
-          if (res.message === 'Branch was removed') {
+        .then(res => res.data)
+        .then((data) => {
+          if (data.message === 'Branch was removed') {
             eventHub.$emit('MRWidgetUpdateRequested', () => {
               this.isMakingRequest = false;
             });

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js

@@ -135,16 +135,16 @@ export default {
 
       this.isMakingRequest = true;
       this.service.merge(options)
-        .then(res => res.json())
-        .then((res) => {
-          const hasError = res.status === 'failed' || res.status === 'hook_validation_error';
+        .then(res => res.data)
+        .then((data) => {
+          const hasError = data.status === 'failed' || data.status === 'hook_validation_error';
 
-          if (res.status === 'merge_when_pipeline_succeeds') {
+          if (data.status === 'merge_when_pipeline_succeeds') {
             eventHub.$emit('MRWidgetUpdateRequested');
-          } else if (res.status === 'success') {
+          } else if (data.status === 'success') {
             this.initiateMergePolling();
           } else if (hasError) {
-            eventHub.$emit('FailedToMerge', res.merge_error);
+            eventHub.$emit('FailedToMerge', data.merge_error);
           }
         })
         .catch(() => {
@@ -159,9 +159,9 @@ export default {
     },
     handleMergePolling(continuePolling, stopPolling) {
       this.service.poll()
-        .then(res => res.json())
-        .then((res) => {
-          if (res.state === 'merged') {
+        .then(res => res.data)
+        .then((data) => {
+          if (data.state === 'merged') {
             // If state is merged we should update the widget and stop the polling
             eventHub.$emit('MRWidgetUpdateRequested');
             eventHub.$emit('FetchActionsContent');
@@ -174,11 +174,11 @@ export default {
 
             // If user checked remove source branch and we didn't remove the branch yet
             // we should start another polling for source branch remove process
-            if (this.removeSourceBranch && res.source_branch_exists) {
+            if (this.removeSourceBranch && data.source_branch_exists) {
               this.initiateRemoveSourceBranchPolling();
             }
-          } else if (res.merge_error) {
-            eventHub.$emit('FailedToMerge', res.merge_error);
+          } else if (data.merge_error) {
+            eventHub.$emit('FailedToMerge', data.merge_error);
             stopPolling();
           } else {
             // MR is not merged yet, continue polling until the state becomes 'merged'
@@ -199,11 +199,11 @@ export default {
     },
     handleRemoveBranchPolling(continuePolling, stopPolling) {
       this.service.poll()
-        .then(res => res.json())
-        .then((res) => {
+        .then(res => res.data)
+        .then((data) => {
           // If source branch exists then we should continue polling
           // because removing a source branch is a background task and takes time
-          if (res.source_branch_exists) {
+          if (data.source_branch_exists) {
             continuePolling();
           } else {
             // Branch is removed. Update widget, stop polling and hide the spinner

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js

@@ -23,9 +23,9 @@ export default {
     removeWIP() {
       this.isMakingRequest = true;
       this.service.removeWIP()
-        .then(res => res.json())
-        .then((res) => {
-          eventHub.$emit('UpdateWidgetData', res);
+        .then(res => res.data)
+        .then((data) => {
+          eventHub.$emit('UpdateWidgetData', data);
           new window.Flash('The merge request can now be merged.', 'notice'); // eslint-disable-line
           $('.merge-request .detail-page-description .title').text(this.mr.title);
         })

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js

@@ -84,14 +84,14 @@ export default {
     },
     checkStatus(cb) {
       return this.service.checkStatus()
-        .then(res => res.json())
-        .then((res) => {
-          this.handleNotification(res);
-          this.mr.setData(res);
+        .then(res => res.data)
+        .then((data) => {
+          this.handleNotification(data);
+          this.mr.setData(data);
           this.setFaviconHelper();
 
           if (cb) {
-            cb.call(null, res);
+            cb.call(null, data);
           }
         })
         .catch(() => {
@@ -124,10 +124,10 @@ export default {
     },
     fetchDeployments() {
       return this.service.fetchDeployments()
-        .then(res => res.json())
-        .then((res) => {
-          if (res.length) {
-            this.mr.deployments = res;
+        .then(res => res.data)
+        .then((data) => {
+          if (data.length) {
+            this.mr.deployments = data;
           }
         })
         .catch(() => {
@@ -137,9 +137,9 @@ export default {
     fetchActionsContent() {
       this.service.fetchMergeActionsContent()
         .then((res) => {
-          if (res.body) {
+          if (res.data) {
             const el = document.createElement('div');
-            el.innerHTML = res.body;
+            el.innerHTML = res.data;
             document.body.appendChild(el);
             Project.initRefSwitcher();
           }

app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js

-import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-Vue.use(VueResource);
+import axios from '../../lib/utils/axios_utils';
 
 export default class MRWidgetService {
   constructor(endpoints) {
-    this.mergeResource = Vue.resource(endpoints.mergePath);
-    this.mergeCheckResource = Vue.resource(`${endpoints.statusPath}?serializer=widget`);
-    this.cancelAutoMergeResource = Vue.resource(endpoints.cancelAutoMergePath);
-    this.removeWIPResource = Vue.resource(endpoints.removeWIPPath);
-    this.removeSourceBranchResource = Vue.resource(endpoints.sourceBranchPath);
-    this.deploymentsResource = Vue.resource(endpoints.ciEnvironmentsStatusPath);
-    this.pollResource = Vue.resource(`${endpoints.statusPath}?serializer=basic`);
-    this.mergeActionsContentResource = Vue.resource(endpoints.mergeActionsContentPath);
+    this.endpoints = endpoints;
   }
 
   merge(data) {
-    return this.mergeResource.save(data);
+    return axios.post(this.endpoints.mergePath, data);
   }
 
   cancelAutomaticMerge() {
-    return this.cancelAutoMergeResource.save();
+    return axios.post(this.endpoints.cancelAutoMergePath);
   }
 
   removeWIP() {
-    return this.removeWIPResource.save();
+    return axios.post(this.endpoints.removeWIPPath);
   }
 
   removeSourceBranch() {
-    return this.removeSourceBranchResource.delete();
+    return axios.delete(this.endpoints.sourceBranchPath);
   }
 
   fetchDeployments() {
-    return this.deploymentsResource.get();
+    return axios.get(this.endpoints.ciEnvironmentsStatusPath);
   }
 
   poll() {
-    return this.pollResource.get();
+    return axios.get(`${this.endpoints.statusPath}?serializer=basic`);
   }
 
   checkStatus() {
-    return this.mergeCheckResource.get();
+    return axios.get(`${this.endpoints.statusPath}?serializer=widget`);
   }
 
   fetchMergeActionsContent() {
-    return this.mergeActionsContentResource.get();
+    return axios.get(this.endpoints.mergeActionsContentPath);
   }
 
   static stopEnvironment(url) {
-    return Vue.http.post(url);
+    return axios.post(url);
   }
 
   static fetchMetrics(metricsUrl) {
-    return Vue.http.get(`${metricsUrl}.json`);
+    return axios.get(`${metricsUrl}.json`);
   }
 }

changelogs/unreleased/34534-switch-to-axios.yml

+---
+title: Fix some POST/DELETE requests in IE by switching some bundles to Axios for Ajax requests
+merge_request: 15951
+author:
+type: fixed

spec/javascripts/blob/notebook/index_spec.js

-import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import renderNotebook from '~/blob/notebook';
 
 describe('iPython notebook renderer', () => {
@@ -17,8 +18,11 @@ describe('iPython notebook renderer', () => {
   });
 
   describe('successful response', () => {
-    const response = (request, next) => {
-      next(request.respondWith(JSON.stringify({
+    let mock;
+
+    beforeEach((done) => {
+      mock = new MockAdapter(axios);
+      mock.onGet('/test').reply(200, {
         cells: [{
           cell_type: 'markdown',
           source: ['# test'],
@@ -31,13 +35,7 @@ describe('iPython notebook renderer', () => {
           ],
           outputs: [],
         }],
-      }), {
-        status: 200,
-      }));
-    };
-
-    beforeEach((done) => {
-      Vue.http.interceptors.push(response);
+      });
 
       renderNotebook();
 
@@ -47,9 +45,7 @@ describe('iPython notebook renderer', () => {
     });
 
     afterEach(() => {
-      Vue.http.interceptors = _.without(
-        Vue.http.interceptors, response,
-      );
+      mock.reset();
     });
 
     it('does not show loading icon', () => {
@@ -86,14 +82,11 @@ describe('iPython notebook renderer', () => {
   });
 
   describe('error in JSON response', () => {
-    const response = (request, next) => {
-      next(request.respondWith('{ "cells": [{"cell_type": "markdown"} }', {
-        status: 200,
-      }));
-    };
+    let mock;
 
     beforeEach((done) => {
-      Vue.http.interceptors.push(response);
+      mock = new MockAdapter(axios);
+      mock.onGet('/test').reply(() => Promise.reject({ status: 200, data: '{ "cells": [{"cell_type": "markdown"} }' }));
 
       renderNotebook();
 
@@ -103,9 +96,7 @@ describe('iPython notebook renderer', () => {
     });
 
     afterEach(() => {
-      Vue.http.interceptors = _.without(
-        Vue.http.interceptors, response,
-      );
+      mock.reset();
     });
 
     it('does not show loading icon', () => {
@@ -122,14 +113,11 @@ describe('iPython notebook renderer', () => {
   });
 
   describe('error getting file', () => {
-    const response = (request, next) => {
-      next(request.respondWith('', {
-        status: 500,
-      }));
-    };
+    let mock;
 
     beforeEach((done) => {
-      Vue.http.interceptors.push(response);
+      mock = new MockAdapter(axios);
+      mock.onGet('/test').reply(500, '');
 
       renderNotebook();
 
@@ -139,9 +127,7 @@ describe('iPython notebook renderer', () => {
     });
 
     afterEach(() => {
-      Vue.http.interceptors = _.without(
-        Vue.http.interceptors, response,
-      );
+      mock.reset();
     });
 
     it('does not show loading icon', () => {

spec/javascripts/boards/board_blank_state_spec.js

 /* global BoardService */
-/* global mockBoardService */
 import Vue from 'vue';
 import '~/boards/stores/boards_store';
 import boardBlankState from '~/boards/components/board_blank_state';
-import './mock_data';
+import { mockBoardService } from './mock_data';
 
 describe('Boards blank state', () => {
   let vm;
@@ -20,17 +19,15 @@ describe('Boards blank state', () => {
         reject();
       } else {
         resolve({
-          json() {
-            return [{
-              id: 1,
-              title: 'To Do',
-              label: { id: 1 },
-            }, {
-              id: 2,
-              title: 'Doing',
-              label: { id: 2 },
-            }];
-          },
+          data: [{
+            id: 1,
+            title: 'To Do',
+            label: { id: 1 },
+          }, {
+            id: 2,
+            title: 'Doing',
+            label: { id: 2 },
+          }],
         });
       }
     }));

spec/javascripts/boards/board_card_spec.js

 /* global List */
 /* global ListAssignee */
 /* global ListLabel */
-/* global listObj */
-/* global boardsMockInterceptor */
 /* global BoardService */
-/* global mockBoardService */
 
 import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import '~/boards/models/assignee';
 
 import eventHub from '~/boards/eventhub';
@@ -14,13 +13,15 @@ import '~/boards/models/list';
 import '~/boards/models/label';
 import '~/boards/stores/boards_store';
 import boardCard from '~/boards/components/board_card.vue';
-import './mock_data';
+import { listObj, boardsMockInterceptor, mockBoardService } from './mock_data';
 
 describe('Board card', () => {
   let vm;
+  let mock;
 
   beforeEach((done) => {
-    Vue.http.interceptors.push(boardsMockInterceptor);
+    mock = new MockAdapter(axios);
+    mock.onAny().reply(boardsMockInterceptor);
 
     gl.boardService = mockBoardService();
     gl.issueBoards.BoardsStore.create();
@@ -54,7 +55,7 @@ describe('Board card', () => {
   });
 
   afterEach(() => {
-    Vue.http.interceptors = _.without(Vue.http.interceptors, boardsMockInterceptor);
+    mock.reset();
   });
 
   it('returns false when detailIssue is empty', () => {

spec/javascripts/boards/board_list_spec.js

 /* global BoardService */
-/* global boardsMockInterceptor */
 /* global List */
-/* global listObj */
 /* global ListIssue */
-/* global mockBoardService */
 import Vue from 'vue';
-import _ from 'underscore';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import Sortable from 'vendor/Sortable';
 import BoardList from '~/boards/components/board_list';
 import eventHub from '~/boards/eventhub';
@@ -13,18 +11,20 @@ import '~/boards/mixins/sortable_default_options';
 import '~/boards/models/issue';
 import '~/boards/models/list';
 import '~/boards/stores/boards_store';
-import './mock_data';
+import { listObj, boardsMockInterceptor, mockBoardService } from './mock_data';
 
 window.Sortable = Sortable;
 
 describe('Board list component', () => {
+  let mock;
   let component;
 
   beforeEach((done) => {
     const el = document.createElement('div');
 
     document.body.appendChild(el);
-    Vue.http.interceptors.push(boardsMockInterceptor);
+    mock = new MockAdapter(axios);
+    mock.onAny().reply(boardsMockInterceptor);
     gl.boardService = mockBoardService();
     gl.issueBoards.BoardsStore.create();
     gl.IssueBoardsApp = new Vue();
@@ -60,7 +60,7 @@ describe('Board list component', () => {
   });
 
   afterEach(() => {
-    Vue.http.interceptors = _.without(Vue.http.interceptors, boardsMockInterceptor);
+    mock.reset();
   });
 
   it('renders component', () => {

spec/javascripts/boards/board_new_issue_spec.js

-/* global boardsMockInterceptor */
 /* global BoardService */
 /* global List */
-/* global listObj */
-/* global mockBoardService */
 
 import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import boardNewIssue from '~/boards/components/board_new_issue';
 
 import '~/boards/models/list';
-import './mock_data';
+import { listObj, boardsMockInterceptor, mockBoardService } from './mock_data';
 
 describe('Issue boards new issue form', () => {
   let vm;
   let list;
+  let mock;
   let newIssueMock;
   const promiseReturn = {
-    json() {
-      return {
-        iid: 100,
-      };
+    data: {
+      iid: 100,
     },
   };
 
@@ -35,7 +33,9 @@ describe('Issue boards new issue form', () => {
 
     const BoardNewIssueComp = Vue.extend(boardNewIssue);
 
-    Vue.http.interceptors.push(boardsMockInterceptor);
+    mock = new MockAdapter(axios);
+    mock.onAny().reply(boardsMockInterceptor);
+
     gl.boardService = mockBoardService();
     gl.issueBoards.BoardsStore.create();
     gl.IssueBoardsApp = new Vue();
@@ -56,7 +56,10 @@ describe('Issue boards new issue form', () => {
       .catch(done.fail);
   });
 
-  afterEach(() => vm.$destroy());
+  afterEach(() => {
+    vm.$destroy();
+    mock.reset();
+  });
 
   it('calls submit if submit button is clicked', (done) => {
     spyOn(vm, 'submit').and.callFake(e => e.preventDefault());

spec/javascripts/boards/boards_store_spec.js

 /* eslint-disable comma-dangle, one-var, no-unused-vars */
 /* global BoardService */
-/* global boardsMockInterceptor */
-/* global listObj */
-/* global listObjDuplicate */
 /* global ListIssue */
-/* global mockBoardService */
 
 import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import Cookies from 'js-cookie';
 
 import '~/boards/models/issue';
@@ -15,11 +13,14 @@ import '~/boards/models/list';
 import '~/boards/models/assignee';
 import '~/boards/services/board_service';
 import '~/boards/stores/boards_store';
-import './mock_data';
+import { listObj, listObjDuplicate, boardsMockInterceptor, mockBoardService } from './mock_data';
 
 describe('Store', () => {
+  let mock;
+
   beforeEach(() => {
-    Vue.http.interceptors.push(boardsMockInterceptor);
+    mock = new MockAdapter(axios);
+    mock.onAny().reply(boardsMockInterceptor);
     gl.boardService = mockBoardService();
     gl.issueBoards.BoardsStore.create();
 
@@ -34,7 +35,7 @@ describe('Store', () => {
   });
 
   afterEach(() => {
-    Vue.http.interceptors = _.without(Vue.http.interceptors, boardsMockInterceptor);
+    mock.reset();
   });
 
   it('starts with a blank state', () => {

spec/javascripts/boards/components/board_spec.js

-/* global mockBoardService */
 import Vue from 'vue';
 import '~/boards/services/board_service';
 import '~/boards/components/board';
 import '~/boards/models/list';
-import '../mock_data';
+import { mockBoardService } from '../mock_data';
 
 describe('Board component', () => {
   let vm;

spec/javascripts/boards/issue_card_spec.js

 /* global ListAssignee */
 /* global ListLabel */
-/* global listObj */
 /* global ListIssue */
 
 import Vue from 'vue';
@@ -11,7 +10,7 @@ import '~/boards/models/list';
 import '~/boards/models/assignee';
 import '~/boards/stores/boards_store';
 import '~/boards/components/issue_card_inner';
-import './mock_data';
+import { listObj } from './mock_data';
 
 describe('Issue card component', () => {
   const user = new ListAssignee({

spec/javascripts/boards/issue_spec.js

 /* eslint-disable comma-dangle */
 /* global BoardService */
 /* global ListIssue */
-/* global mockBoardService */
 
 import Vue from 'vue';
 import '~/boards/models/issue';
@@ -10,7 +9,7 @@ import '~/boards/models/list';
 import '~/boards/models/assignee';
 import '~/boards/services/board_service';
 import '~/boards/stores/boards_store';
-import './mock_data';
+import { mockBoardService } from './mock_data';
 
 describe('Issue model', () => {
   let issue;

spec/javascripts/boards/list_spec.js

 /* eslint-disable comma-dangle */
-/* global boardsMockInterceptor */
 /* global BoardService */
-/* global mockBoardService */
 /* global List */
 /* global ListIssue */
-/* global listObj */
-/* global listObjDuplicate */
 
-import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 
 import '~/boards/models/issue';
 import '~/boards/models/label';
@@ -15,13 +12,15 @@ import '~/boards/models/list';
 import '~/boards/models/assignee';
 import '~/boards/services/board_service';
 import '~/boards/stores/boards_store';
-import './mock_data';
+import { listObj, listObjDuplicate, boardsMockInterceptor, mockBoardService } from './mock_data';
 
 describe('List model', () => {
   let list;
+  let mock;
 
   beforeEach(() => {
-    Vue.http.interceptors.push(boardsMockInterceptor);
+    mock = new MockAdapter(axios);
+    mock.onAny().reply(boardsMockInterceptor);
     gl.boardService = mockBoardService({
       bulkUpdatePath: '/test/issue-boards/board/1/lists',
     });
@@ -31,7 +30,7 @@ describe('List model', () => {
   });
 
   afterEach(() => {
-    Vue.http.interceptors = _.without(Vue.http.interceptors, boardsMockInterceptor);
+    mock.reset();
   });
 
   it('gets issues when created', (done) => {
@@ -158,10 +157,8 @@ describe('List model', () => {
   describe('newIssue', () => {
     beforeEach(() => {
       spyOn(gl.boardService, 'newIssue').and.returnValue(Promise.resolve({
-        json() {
-          return {
-            id: 42,
-          };
+        data: {
+          id: 42,
         },
       }));
     });

spec/javascripts/boards/mock_data.js

 /* global BoardService */
 /* eslint-disable comma-dangle, no-unused-vars, quote-props */
 
-const listObj = {
-  id: _.random(10000),
+export const listObj = {
+  id: 300,
   position: 0,
   title: 'Test',
   list_type: 'label',
   label: {
-    id: _.random(10000),
+    id: 5000,
     title: 'Testing',
     color: 'red',
     description: 'testing;'
   }
 };
 
-const listObjDuplicate = {
+export const listObjDuplicate = {
   id: listObj.id,
   position: 1,
   title: 'Test',
@@ -27,9 +27,9 @@ const listObjDuplicate = {
   }
 };
 
-const BoardsMockData = {
+export const BoardsMockData = {
   'GET': {
-    '/test/boards/1{/id}/issues': {
+    '/test/-/boards/1/lists/300/issues?id=300&page=1&=': {
       issues: [{
         title: 'Testing',
         id: 1,
@@ -41,7 +41,7 @@ const BoardsMockData = {
     }
   },
   'POST': {
-    '/test/boards/1{/id}': listObj
+    '/test/-/boards/1/lists': listObj
   },
   'PUT': {
     '/test/issue-boards/board/1/lists{/id}': {}
@@ -51,17 +51,14 @@ const BoardsMockData = {
   }
 };
 
-const boardsMockInterceptor = (request, next) => {
-  const body = BoardsMockData[request.method][request.url];
-
-  next(request.respondWith(JSON.stringify(body), {
-    status: 200
-  }));
+export const boardsMockInterceptor = (config) => {
+  const body = BoardsMockData[config.method.toUpperCase()][config.url];
+  return [200, body];
 };
 
-const mockBoardService = (opts = {}) => {
-  const boardsEndpoint = opts.boardsEndpoint || '/test/issue-boards/board';
-  const listsEndpoint = opts.listsEndpoint || '/test/boards/1';
+export const mockBoardService = (opts = {}) => {
+  const boardsEndpoint = opts.boardsEndpoint || '/test/issue-boards/boards.json';
+  const listsEndpoint = opts.listsEndpoint || '/test/-/boards/1/lists';
   const bulkUpdatePath = opts.bulkUpdatePath || '';
   const boardId = opts.boardId || '1';
 
@@ -72,9 +69,3 @@ const mockBoardService = (opts = {}) => {
     boardId,
   });
 };
-
-window.listObj = listObj;
-window.listObjDuplicate = listObjDuplicate;
-window.BoardsMockData = BoardsMockData;
-window.boardsMockInterceptor = boardsMockInterceptor;
-window.mockBoardService = mockBoardService;

spec/javascripts/issue_show/components/app_spec.js

 import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import '~/render_math';
 import '~/render_gfm';
 import * as urlUtils from '~/lib/utils/url_utility';
@@ -11,26 +13,29 @@ function formatText(text) {
   return text.trim().replace(/\s\s+/g, ' ');
 }
 
+const REALTIME_REQUEST_STACK = [
+  issueShowData.initialRequest,
+  issueShowData.secondRequest,
+];
+
 describe('Issuable output', () => {
-  let requestData = issueShowData.initialRequest;
+  let mock;
+  let realtimeRequestCount = 0;
+  let vm;
 
   document.body.innerHTML = '<span id="task_status"></span>';
 
-  const interceptor = (request, next) => {
-    next(request.respondWith(JSON.stringify(requestData), {
-      status: 200,
-    }));
-  };
-
-  let vm;
-
   beforeEach((done) => {
     spyOn(eventHub, '$emit');
 
     const IssuableDescriptionComponent = Vue.extend(issuableApp);
 
-    requestData = issueShowData.initialRequest;
-    Vue.http.interceptors.push(interceptor);
+    mock = new MockAdapter(axios);
+    mock.onGet('/gitlab-org/gitlab-shell/issues/9/realtime_changes/realtime_changes').reply(() => {
+      const res = Promise.resolve([200, REALTIME_REQUEST_STACK[realtimeRequestCount]]);
+      realtimeRequestCount += 1;
+      return res;
+    });
 
     vm = new IssuableDescriptionComponent({
       propsData: {
@@ -54,10 +59,10 @@ describe('Issuable output', () => {
   });
 
   afterEach(() => {
-    Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
+    mock.reset();
+    realtimeRequestCount = 0;
 
     vm.poll.stop();
-
     vm.$destroy();
   });
 
@@ -77,7 +82,6 @@ describe('Issuable output', () => {
       expect(editedText.querySelector('time')).toBeTruthy();
     })
     .then(() => {
-      requestData = issueShowData.secondRequest;
       vm.poll.makeRequest();
     })
     .then(() => new Promise(resolve => setTimeout(resolve)))
@@ -141,24 +145,19 @@ describe('Issuable output', () => {
       spyOn(vm.service, 'getData').and.callThrough();
       spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => {
         resolve({
-          json() {
-            return {
-              confidential: false,
-              web_url: location.pathname,
-            };
+          data: {
+            confidential: false,
+            web_url: location.pathname,
           },
         });
       }));
 
-      vm.updateIssuable();
-
-      setTimeout(() => {
-        expect(
-          vm.service.getData,
-        ).toHaveBeenCalled();
-
-        done();
-      });
+      vm.updateIssuable()
+        .then(() => {
+          expect(vm.service.getData).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
     it('correctly updates issuable data', (done) => {
@@ -166,29 +165,22 @@ describe('Issuable output', () => {
         resolve();
       }));
 
-      vm.updateIssuable();
-
-      setTimeout(() => {
-        expect(
-          vm.service.updateIssuable,
-        ).toHaveBeenCalledWith(vm.formState);
-        expect(
-          eventHub.$emit,
-        ).toHaveBeenCalledWith('close.form');
-
-        done();
-      });
+      vm.updateIssuable()
+        .then(() => {
+          expect(vm.service.updateIssuable).toHaveBeenCalledWith(vm.formState);
+          expect(eventHub.$emit).toHaveBeenCalledWith('close.form');
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
     it('does not redirect if issue has not moved', (done) => {
       spyOn(urlUtils, 'visitUrl');
       spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => {
         resolve({
-          json() {
-            return {
-              web_url: location.pathname,
-              confidential: vm.isConfidential,
-            };
+          data: {
+            web_url: location.pathname,
+            confidential: vm.isConfidential,
           },
         });
       }));
@@ -208,11 +200,9 @@ describe('Issuable output', () => {
       spyOn(urlUtils, 'visitUrl');
       spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => {
         resolve({
-          json() {
-            return {
-              web_url: '/testing-issue-move',
-              confidential: vm.isConfidential,
-            };
+          data: {
+            web_url: '/testing-issue-move',
+            confidential: vm.isConfidential,
           },
         });
       }));
@@ -283,10 +273,8 @@ describe('Issuable output', () => {
     let modal;
     const promise = new Promise((resolve) => {
       resolve({
-        json() {
-          return {
-            recaptcha_html: '<div class="g-recaptcha">recaptcha_html</div>',
-          };
+        data: {
+          recaptcha_html: '<div class="g-recaptcha">recaptcha_html</div>',
         },
       });
     });
@@ -323,8 +311,8 @@ describe('Issuable output', () => {
       spyOn(urlUtils, 'visitUrl');
       spyOn(vm.service, 'deleteIssuable').and.callFake(() => new Promise((resolve) => {
         resolve({
-          json() {
-            return { web_url: '/test' };
+          data: {
+            web_url: '/test',
           },
         });
       }));
@@ -345,8 +333,8 @@ describe('Issuable output', () => {
       spyOn(vm.poll, 'stop').and.callThrough();
       spyOn(vm.service, 'deleteIssuable').and.callFake(() => new Promise((resolve) => {
         resolve({
-          json() {
-            return { web_url: '/test' };
+          data: {
+            web_url: '/test',
           },
         });
       }));
@@ -385,22 +373,21 @@ describe('Issuable output', () => {
 
   describe('open form', () => {
     it('shows locked warning if form is open & data is different', (done) => {
-      Vue.nextTick()
+      vm.$nextTick()
         .then(() => {
           vm.openForm();
 
-          requestData = issueShowData.secondRequest;
           vm.poll.makeRequest();
         })
-        .then(() => new Promise(resolve => setTimeout(resolve)))
+        // Wait for the request
+        .then(vm.$nextTick)
+        // Wait for the successCallback to update the store state
+        .then(vm.$nextTick)
+        // Wait for the new state to flow to the Vue components
+        .then(vm.$nextTick)
         .then(() => {
-          expect(
-            vm.formState.lockedWarningVisible,
-          ).toBeTruthy();
-
-          expect(
-            vm.$el.querySelector('.alert'),
-          ).not.toBeNull();
+          expect(vm.formState.lockedWarningVisible).toEqual(true);
+          expect(vm.$el.querySelector('.alert')).not.toBeNull();
         })
         .then(done)
         .catch(done.fail);

spec/javascripts/issue_show/mock_data.js

@@ -19,14 +19,4 @@ export default {
     updated_by_name: 'Other User',
     updated_by_path: '/other_user',
   },
-  issueSpecRequest: {
-    title: '<p>this is a title</p>',
-    title_text: 'this is a title',
-    description: '<li class="task-list-item enabled"><input type="checkbox" class="task-list-item-checkbox">Task List Item</li>',
-    description_text: '- [ ] Task List Item',
-    task_status: '0 of 1 completed',
-    updated_at: '2017-05-15T12:31:04.428Z',
-    updated_by_name: 'Last User',
-    updated_by_path: '/last_user',
-  },
 };

spec/javascripts/vue_mr_widget/components/mr_widget_deployment_spec.js

@@ -95,10 +95,8 @@ describe('MRWidgetDeployment', () => {
       const url = '/foo/bar';
       const returnPromise = () => new Promise((resolve) => {
         resolve({
-          json() {
-            return {
-              redirect_url: url,
-            };
+          data: {
+            redirect_url: url,
           },
         });
       });

spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js

@@ -155,9 +155,7 @@ describe('MemoryUsage', () => {
     describe('loadMetrics', () => {
       const returnServicePromise = () => new Promise((resolve) => {
         resolve({
-          json() {
-            return metricsMockData;
-          },
+          data: metricsMockData,
         });
       });
 

spec/javascripts/vue_mr_widget/components/states/mr_widget_merge_when_pipeline_succeeds_spec.js

@@ -108,9 +108,7 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
         spyOn(eventHub, '$emit');
         spyOn(vm.service, 'cancelAutomaticMerge').and.returnValue(new Promise((resolve) => {
           resolve({
-            json() {
-              return mrObj;
-            },
+            data: mrObj,
           });
         }));
 
@@ -129,10 +127,8 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
         spyOn(eventHub, '$emit');
         spyOn(vm.service.mergeResource, 'save').and.returnValue(new Promise((resolve) => {
           resolve({
-            json() {
-              return {
-                status: 'merge_when_pipeline_succeeds',
-              };
+            data: {
+              status: 'merge_when_pipeline_succeeds',
             },
           });
         }));

spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js

@@ -111,10 +111,8 @@ describe('MRWidgetMerged', () => {
         spyOn(eventHub, '$emit');
         spyOn(vm.service, 'removeSourceBranch').and.returnValue(new Promise((resolve) => {
           resolve({
-            json() {
-              return {
-                message: 'Branch was removed',
-              };
+            data: {
+              message: 'Branch was removed',
             },
           });
         }));

spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js

@@ -292,8 +292,8 @@ describe('MRWidgetReadyToMerge', () => {
     describe('handleMergeButtonClick', () => {
       const returnPromise = status => new Promise((resolve) => {
         resolve({
-          json() {
-            return { status };
+          data: {
+            status,
           },
         });
       });
@@ -364,8 +364,9 @@ describe('MRWidgetReadyToMerge', () => {
     describe('handleMergePolling', () => {
       const returnPromise = state => new Promise((resolve) => {
         resolve({
-          json() {
-            return { state, source_branch_exists: true };
+          data: {
+            state,
+            source_branch_exists: true,
           },
         });
       });
@@ -422,8 +423,8 @@ describe('MRWidgetReadyToMerge', () => {
     describe('handleRemoveBranchPolling', () => {
       const returnPromise = state => new Promise((resolve) => {
         resolve({
-          json() {
-            return { source_branch_exists: state };
+          data: {
+            source_branch_exists: state,
           },
         });
       });

spec/javascripts/vue_mr_widget/components/states/mr_widget_wip_spec.js

@@ -50,9 +50,7 @@ describe('MRWidgetWIP', () => {
         spyOn(eventHub, '$emit');
         spyOn(vm.service, 'removeWIP').and.returnValue(new Promise((resolve) => {
           resolve({
-            json() {
-              return mrObj;
-            },
+            data: mrObj,
           });
         }));
 

spec/javascripts/vue_mr_widget/mr_widget_options_spec.js

@@ -8,10 +8,7 @@ import mountComponent from '../helpers/vue_mount_component_helper';
 
 const returnPromise = data => new Promise((resolve) => {
   resolve({
-    json() {
-      return data;
-    },
-    body: data,
+    data,
   });
 });