Switch boards to Axios

Conflicts:
	app/assets/javascripts/boards/boards_bundle.js
	app/assets/javascripts/boards/services/board_service.js
	spec/javascripts/boards/mock_data.js

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';
@@ -31,8 +30,6 @@ import collapseIcon from './icons/fullscreen_collapse.svg';
 import expandIcon from './icons/fullscreen_expand.svg';
 import tooltip from '../vue_shared/directives/tooltip';
 
-Vue.use(VueResource);
-
 $(() => {
   const $boardApp = document.getElementById('board-app');
   const Store = gl.issueBoards.BoardsStore;
@@ -104,9 +101,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') {
@@ -123,7 +120,9 @@ $(() => {
           Store.addPromotionState();
           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() {
@@ -135,7 +134,7 @@ $(() => {
           newIssue.setFetchingState('subscriptions', true);
           newIssue.setFetchingState('weight', true);
           BoardService.getIssueInfo(sidebarInfoEndpoint)
-            .then(res => res.json())
+            .then(res => res.data)
             .then((data) => {
               newIssue.setFetchingState('subscriptions', false);
               newIssue.setFetchingState('weight', false);
@@ -178,7 +177,7 @@ $(() => {
         if (issue.id === id && issue.sidebarInfoEndpoint) {
           issue.setLoadingState('weight', true);
           BoardService.updateWeight(issue.sidebarInfoEndpoint, newWeight)
-            .then(res => res.json())
+            .then(res => res.data)
             .then((data) => {
               issue.setLoadingState('weight', false);
               issue.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/board_form.vue

@@ -147,7 +147,7 @@ export default {
           });
       } else {
         gl.boardService.createBoard(this.board)
-          .then(resp => resp.json())
+          .then(resp => resp.data)
           .then((data) => {
             visitUrl(data.board_path);
           })

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

@@ -92,7 +92,7 @@ import BoardForm from './board_form.vue';
 
         if (this.open && !this.boards.length) {
           gl.boardService.allBoards()
-            .then(res => res.json())
+            .then(res => res.data)
             .then((json) => {
               this.loading = false;
               this.boards = json;

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;
   }
 
-  allBoards () {
-    return this.boards.get();
+  generateBoardsPath(id) {
+    return `${this.boardsEndpoint}${id ? `/${id}` : ''}.json`;
   }
 
-  createBoard (board) {
-    board.label_ids = (board.labels || []).map(b => b.id);
+  generateIssuesPath(id) {
+    return `${this.listsEndpoint}${id ? `/${id}` : ''}/issues`;
+  }
 
-    if (board.label_ids.length === 0) {
-      board.label_ids = [''];
+  static generateIssuePath(boardId, id) {
+    return `${gon.relative_url_root}/-/boards/${boardId ? `/${boardId}` : ''}/issues${id ? `/${id}` : ''}`;
+  }
+
+  allBoards() {
+    return axios.get(this.generateBoardsPath());
+  }
+
+  createBoard(board) {
+    const boardPayload = { ...board };
+    boardPayload.label_ids = (board.labels || []).map(b => b.id);
+
+    if (boardPayload.label_ids.length === 0) {
+      boardPayload.label_ids = [''];
     }
 
-    if (board.assignee) {
-      board.assignee_id = board.assignee.id;
+    if (boardPayload.assignee) {
+      boardPayload.assignee_id = boardPayload.assignee.id;
     }
 
-    if (board.milestone) {
-      board.milestone_id = board.milestone.id;
+    if (boardPayload.milestone) {
+      boardPayload.milestone_id = boardPayload.milestone.id;
     }
 
-    if (board.id) {
-      return this.boards.update({ id: board.id }, { board });
+    if (boardPayload.id) {
+      return axios.put(this.generateBoardsPath(boardPayload.id), { board: boardPayload });
     }
-    return this.boards.save({}, { board });
+    return axios.post(this.generateBoardsPath(), { board: boardPayload });
   }
 
-  deleteBoard ({ id }) {
-    return this.boards.delete({ id });
+  deleteBoard({ id }) {
+    return axios.delete(this.generateBoardsPath(id));
   }
 
-  all () {
-    return this.lists.get();
+  all() {
+    return axios.get(this.listsEndpoint);
   }
 
-  generateDefaultLists () {
-    return this.lists.generate({});
+  generateDefaultLists() {
+    return axios.post(this.listsEndpointGenerate, {});
   }
 
-  createList (label_id) {
-    return this.lists.save({}, {
+  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 = {}) {
@@ -115,23 +113,21 @@ 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 updateWeight(endpoint, weight = null) {
-    return Vue.http.put(endpoint, {
-      'issue[weight]': weight,
-    }, {
-      emulateJSON: true,
+    return axios.put(endpoint, {
+      weight,
     });
   }
 
   static toggleIssueSubscription(endpoint) {
-    return Vue.http.post(endpoint);
+    return axios.post(endpoint);
   }
 }
 

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 mockBoardService */
 /* 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,
     },
   };
 
@@ -36,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();
@@ -57,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';
 import '~/boards/models/label';
@@ -14,11 +12,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();
 
@@ -33,7 +34,7 @@ describe('Store', () => {
   });
 
   afterEach(() => {
-    Vue.http.interceptors = _.without(Vue.http.interceptors, boardsMockInterceptor);
+    mock.reset();
   });
 
   it('starts with a blank state', () => {

spec/javascripts/boards/components/assignee_select_spec.js

-/* global boardsMockInterceptor */
-/* global boardObj */
 /* global BoardService */
-/* global mockBoardService */
 
 import Vue from 'vue';
 import AssigneeSelect from '~/boards/components/assignee_select.vue';
 import '~/boards/services/board_service';
 import '~/boards/stores/boards_store';
 import IssuableContext from '~/issuable_context';
+import { boardObj, mockBoardService } from '../mock_data';
 
 let vm;
 

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/components/boards_selector_spec.js

@@ -42,9 +42,7 @@ describe('BoardsSelector', () => {
     });
 
     boardServiceResponse = Promise.resolve({
-      json() {
-        return boards;
-      },
+      data: boards,
     });
 
     spyOn(BoardService.prototype, 'allBoards').and.returnValue(boardServiceResponse);

spec/javascripts/boards/components/labels_select_spec.js

-/* global boardsMockInterceptor */
 /* global BoardService */
 
 import Vue from 'vue';
 import '~/labels_select';
 import LabelsSelect from '~/boards/components/labels_select.vue';
 import IssuableContext from '~/issuable_context';
-import '../mock_data';
 
 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/milestone_select_spec.js

-/* global boardsMockInterceptor */
-/* global boardObj */
 /* global BoardService */
-/* global mockBoardService */
 
 import Vue from 'vue';
 import MilestoneSelect from '~/boards/components/milestone_select.vue';
 import IssuableContext from '~/issuable_context';
+import { boardObj } from './mock_data';
 
 let vm;
 

spec/javascripts/boards/mock_data.js

 /* global BoardService */
 /* eslint-disable comma-dangle, no-unused-vars, quote-props */
-const boardObj = {
+export const boardObj = {
   id: 1,
   name: 'test',
   milestone_id: null,
 };
 
-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',
@@ -32,9 +32,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,
@@ -50,7 +50,7 @@ const BoardsMockData = {
     }],
   },
   'POST': {
-    '/test/boards/1{/id}': listObj
+    '/test/-/boards/1/lists': listObj
   },
   'PUT': {
     '/test/issue-boards/board/1/lists{/id}': {}
@@ -60,17 +60,14 @@ const BoardsMockData = {
   }
 };
 
-const boardsMockInterceptor = (request, next) => {
-  const body = BoardsMockData[request.method.toUpperCase()][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';
 
@@ -81,10 +78,3 @@ const mockBoardService = (opts = {}) => {
     boardId,
   });
 };
-
-window.boardObj = boardObj;
-window.listObj = listObj;
-window.listObjDuplicate = listObjDuplicate;
-window.BoardsMockData = BoardsMockData;
-window.boardsMockInterceptor = boardsMockInterceptor;
-window.mockBoardService = mockBoardService;

spec/javascripts/epics/epic_show/components/epic_show_app_spec.js

 import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import epicShowApp from 'ee/epics/epic_show/components/epic_show_app.vue';
 import epicHeader from 'ee/epics/epic_show/components/epic_header.vue';
 import epicSidebar from 'ee/epics/sidebar/components/sidebar_app.vue';
@@ -10,25 +12,16 @@ import { props } from '../mock_data';
 import issueShowData from '../../../issue_show/mock_data';
 
 describe('EpicShowApp', () => {
+  let mock;
   let vm;
   let headerVm;
   let issuableAppVm;
   let sidebarVm;
 
-  const interceptor = (request, next) => {
-    if (request.url === '/realtime_changes') {
-      next(request.respondWith(JSON.stringify(issueShowData.initialRequest), {
-        status: 200,
-      }));
-    } else {
-      next(request.respondWith(null, {
-        status: 404,
-      }));
-    }
-  };
-
-  beforeEach(() => {
-    Vue.http.interceptors.push(interceptor);
+  beforeEach((done) => {
+    mock = new MockAdapter(axios);
+    mock.onGet('/realtime_changes').reply(200, issueShowData.initialRequest);
+    mock.onAny().reply(404, null);
 
     const {
       canUpdate,
@@ -80,10 +73,12 @@ describe('EpicShowApp', () => {
       initialStartDate: startDate,
       initialEndDate: endDate,
     });
+
+    setTimeout(done);
   });
 
   afterEach(() => {
-    Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
+    mock.reset();
   });
 
   it('should render epic-header', () => {