Replaces vue-resource with axios for registry code

3 files changed, 56 insertions, 81 deletions

diff --git a/spec/javascripts/registry/components/app_spec.js b/spec/javascripts/registry/components/app_spec.js
index 92ff960277a..103a59e7094 100644
--- a/spec/javascripts/registry/components/app_spec.js
+++ b/spec/javascripts/registry/components/app_spec.js
@@ -1,37 +1,30 @@
-import _ from 'underscore';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import Vue from 'vue';
 import registry from '~/registry/components/app.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { TEST_HOST } from 'spec/test_constants';
 import { reposServerResponse } from '../mock_data';
 
 describe('Registry List', () => {
+  const Component = Vue.extend(registry);
   let vm;
-  let Component;
+  let mock;
 
   beforeEach(() => {
-    Component = Vue.extend(registry);
+    mock = new MockAdapter(axios);
   });
 
   afterEach(() => {
+    mock.restore();
     vm.$destroy();
   });
 
   describe('with data', () => {
-    const interceptor = (request, next) => {
-      next(
-        request.respondWith(JSON.stringify(reposServerResponse), {
-          status: 200,
-        }),
-      );
-    };
-
     beforeEach(() => {
-      Vue.http.interceptors.push(interceptor);
-      vm = mountComponent(Component, { endpoint: 'foo' });
-    });
+      mock.onGet(`${TEST_HOST}/foo`).replyOnce(200, reposServerResponse);
 
-    afterEach(() => {
-      Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
+      vm = mountComponent(Component, { endpoint: `${TEST_HOST}/foo` });
     });
 
     it('should render a list of repos', done => {
@@ -76,21 +69,10 @@ describe('Registry List', () => {
   });
 
   describe('without data', () => {
-    const interceptor = (request, next) => {
-      next(
-        request.respondWith(JSON.stringify([]), {
-          status: 200,
-        }),
-      );
-    };
-
     beforeEach(() => {
-      Vue.http.interceptors.push(interceptor);
-      vm = mountComponent(Component, { endpoint: 'foo' });
-    });
+      mock.onGet(`${TEST_HOST}/foo`).replyOnce(200, []);
 
-    afterEach(() => {
-      Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
+      vm = mountComponent(Component, { endpoint: `${TEST_HOST}/foo` });
     });
 
     it('should render empty message', done => {
@@ -109,21 +91,10 @@ describe('Registry List', () => {
   });
 
   describe('while loading data', () => {
-    const interceptor = (request, next) => {
-      next(
-        request.respondWith(JSON.stringify(reposServerResponse), {
-          status: 200,
-        }),
-      );
-    };
-
     beforeEach(() => {
-      Vue.http.interceptors.push(interceptor);
-      vm = mountComponent(Component, { endpoint: 'foo' });
-    });
+      mock.onGet(`${TEST_HOST}/foo`).replyOnce(200, []);
 
-    afterEach(() => {
-      Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
+      vm = mountComponent(Component, { endpoint: `${TEST_HOST}/foo` });
     });
 
     it('should render a loading spinner', done => {
diff --git a/spec/javascripts/registry/components/collapsible_container_spec.js b/spec/javascripts/registry/components/collapsible_container_spec.js
index 256a242f784..069139bc564 100644
--- a/spec/javascripts/registry/components/collapsible_container_spec.js
+++ b/spec/javascripts/registry/components/collapsible_container_spec.js
@@ -1,14 +1,22 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import Vue from 'vue';
 import collapsibleComponent from '~/registry/components/collapsible_container.vue';
 import store from '~/registry/stores';
-import { repoPropsData } from '../mock_data';
+import { repoPropsData, registryServerResponse } from '../mock_data';
 
 describe('collapsible registry container', () => {
   let vm;
-  let Component;
+  let mock;
+  const Component = Vue.extend(collapsibleComponent);
 
   beforeEach(() => {
-    Component = Vue.extend(collapsibleComponent);
+    mock = new MockAdapter(axios);
+
+    mock
+      .onGet(repoPropsData.tagsPath)
+      .replyOnce(200, registryServerResponse, {});
+
     vm = new Component({
       store,
       propsData: {
@@ -18,6 +26,7 @@ describe('collapsible registry container', () => {
   });
 
   afterEach(() => {
+    mock.restore();
     vm.$destroy();
   });
 
@@ -29,10 +38,17 @@ describe('collapsible registry container', () => {
       );
     });
 
-    it('should be open when user clicks on closed repo', done => {
+    fit('should be open when user clicks on closed repo', done => {
+
+      console.log(vm.repo, vm.$el)
+
       vm.$el.querySelector('.js-toggle-repo').click();
+      
       Vue.nextTick(() => {
-        expect(vm.$el.querySelector('.container-image-tags')).toBeDefined();
+      
+        console.log('nextTick', vm.repo, vm.$el)
+      
+        expect(vm.$el.querySelector('.container-image-tags')).not.toBeNull();
         expect(vm.$el.querySelector('.container-image-head i').className).toEqual(
           'fa fa-chevron-up',
         );
@@ -58,7 +74,7 @@ describe('collapsible registry container', () => {
 
   describe('delete repo', () => {
     it('should be possible to delete a repo', () => {
-      expect(vm.$el.querySelector('.js-remove-repo')).toBeDefined();
+      expect(vm.$el.querySelector('.js-remove-repo')).not.toBeNull();
     });
   });
 });
diff --git a/spec/javascripts/registry/stores/actions_spec.js b/spec/javascripts/registry/stores/actions_spec.js
index bc4c444655a..30114f5dca5 100644
--- a/spec/javascripts/registry/stores/actions_spec.js
+++ b/spec/javascripts/registry/stores/actions_spec.js
@@ -1,42 +1,36 @@
-import Vue from 'vue';
-import VueResource from 'vue-resource';
-import _ from 'underscore';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import * as actions from '~/registry/stores/actions';
 import * as types from '~/registry/stores/mutation_types';
+import state from '~/registry/stores/state';
+import { TEST_HOST } from 'spec/test_constants';
 import testAction from '../../helpers/vuex_action_helper';
 import {
-  defaultState,
   reposServerResponse,
   registryServerResponse,
   parsedReposServerResponse,
 } from '../mock_data';
 
-Vue.use(VueResource);
-
 describe('Actions Registry Store', () => {
-  let interceptor;
   let mockedState;
+  let mock;
 
   beforeEach(() => {
-    mockedState = defaultState;
+    mockedState = state();
+    mockedState.endpoint = `${TEST_HOST}/endpoint.json`;
+    mock = new MockAdapter(axios);
   });
 
-  describe('server requests', () => {
-    afterEach(() => {
-      Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
-    });
+  afterEach(() => {
+    mock.restore();
+  });
 
+  describe('server requests', () => {
     describe('fetchRepos', () => {
       beforeEach(() => {
-        interceptor = (request, next) => {
-          next(
-            request.respondWith(JSON.stringify(reposServerResponse), {
-              status: 200,
-            }),
-          );
-        };
-
-        Vue.http.interceptors.push(interceptor);
+        mock
+          .onGet(`${TEST_HOST}/endpoint.json`)
+          .replyOnce(200, reposServerResponse, {})
       });
 
       it('should set receveived repos', done => {
@@ -56,23 +50,17 @@ describe('Actions Registry Store', () => {
     });
 
     describe('fetchList', () => {
+      let repo;
       beforeEach(() => {
-        interceptor = (request, next) => {
-          next(
-            request.respondWith(JSON.stringify(registryServerResponse), {
-              status: 200,
-            }),
-          );
-        };
+        mockedState.repos = parsedReposServerResponse;
+        [, repo ] = mockedState.repos;
 
-        Vue.http.interceptors.push(interceptor);
+        mock
+          .onGet(repo.tagsPath)
+          .replyOnce(200, registryServerResponse, {})
       });
 
       it('should set received list', done => {
-        mockedState.repos = parsedReposServerResponse;
-
-        const repo = mockedState.repos[1];
-
         testAction(
           actions.fetchList,
           { repo },