refactor "deploy_keys" to use axios

app/assets/javascripts/deploy_keys/service/index.js

@@ -1,37 +1,24 @@
-import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-Vue.use(VueResource);
+import axios from '~/lib/utils/axios_utils';
 
 export default class DeployKeysService {
   constructor(endpoint) {
-    this.endpoint = endpoint;
-
-    this.resource = Vue.resource(
-      `${this.endpoint}{/id}`,
-      {},
-      {
-        enable: {
-          method: 'PUT',
-          url: `${this.endpoint}{/id}/enable`,
-        },
-        disable: {
-          method: 'PUT',
-          url: `${this.endpoint}{/id}/disable`,
-        },
-      },
-    );
+    this.axios = axios.create({
+      baseURL: endpoint,
+    });
   }
 
   getKeys() {
-    return this.resource.get().then(response => response.json());
+    return this.axios.get()
+      .then(response => response.data);
   }
 
   enableKey(id) {
-    return this.resource.enable({ id }, {});
+    return this.axios.put(`${id}/enable`)
+      .then(response => response.data);
   }
 
   disableKey(id) {
-    return this.resource.disable({ id }, {});
+    return this.axios.put(`${id}/disable`)
+      .then(response => response.data);
   }
 }

package.json

@@ -96,7 +96,7 @@
     "worker-loader": "^1.1.1"
   },
   "devDependencies": {
-    "axios-mock-adapter": "^1.10.0",
+    "axios-mock-adapter": "^1.15.0",
     "babel-eslint": "^8.0.2",
     "babel-plugin-istanbul": "^4.1.6",
     "babel-plugin-rewire": "^1.1.0",

spec/javascripts/deploy_keys/components/app_spec.js

@@ -1,28 +1,25 @@
-import _ from 'underscore';
 import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import eventHub from '~/deploy_keys/eventhub';
 import deployKeysApp from '~/deploy_keys/components/app.vue';
+import { TEST_HOST } from 'spec/test_constants';
 
 describe('Deploy keys app component', () => {
   const data = getJSONFixture('deploy_keys/keys.json');
   let vm;
+  let mock;
 
-  const deployKeysResponse = (request, next) => {
-    next(
-      request.respondWith(JSON.stringify(data), {
-        status: 200,
-      }),
-    );
-  };
+  beforeEach((done) => {
+    // setup axios mock before component
+    mock = new MockAdapter(axios);
+    mock.onGet(`${TEST_HOST}/dummy/`).replyOnce(200, data);
 
-  beforeEach(done => {
     const Component = Vue.extend(deployKeysApp);
 
-    Vue.http.interceptors.push(deployKeysResponse);
-
     vm = new Component({
       propsData: {
-        endpoint: '/test',
+        endpoint: `${TEST_HOST}/dummy`,
         projectId: '8',
       },
     }).$mount();
@@ -31,7 +28,7 @@ describe('Deploy keys app component', () => {
   });
 
   afterEach(() => {
-    Vue.http.interceptors = _.without(Vue.http.interceptors, deployKeysResponse);
+    mock.restore();
   });
 
   it('renders loading icon', done => {

yarn.lock

@@ -444,9 +444,9 @@ aws4@^1.2.1, aws4@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
-axios-mock-adapter@^1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/axios-mock-adapter/-/axios-mock-adapter-1.10.0.tgz#3ccee65466439a2c7567e932798fc0377d39209d"
+axios-mock-adapter@^1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/axios-mock-adapter/-/axios-mock-adapter-1.15.0.tgz#fbc06825d8302c95c3334d21023bba996255d45d"
   dependencies:
     deep-equal "^1.0.1"