Merge branch '40487-update-vue-resource-stage' into 'master'

Use axios in the stage component

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

app/assets/javascripts/pipelines/components/stage.vue

@@ -13,16 +13,16 @@
    * 3. Merge request widget
    * 4. Commit widget
    */
-
+  import axios from '../../lib/utils/axios_utils';
   import Flash from '../../flash';
-  import icon from '../../vue_shared/components/icon.vue';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+  import Icon from '../../vue_shared/components/icon.vue';
+  import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
 
   export default {
     components: {
-      loadingIcon,
-      icon,
+      LoadingIcon,
+      Icon,
     },
 
     directives: {
@@ -88,9 +88,8 @@
       },
 
       fetchJobs() {
-        this.$http.get(this.stage.dropdown_path)
-          .then(response => response.json())
-          .then((data) => {
+        axios.get(this.stage.dropdown_path)
+          .then(({ data }) => {
             this.dropdownContent = data.html;
             this.isLoading = false;
           })
@@ -98,8 +97,7 @@
             this.closeDropdown();
             this.isLoading = false;
 
-            const flash = new Flash('Something went wrong on our end.');
-            return flash;
+            Flash('Something went wrong on our end.');
           });
       },
 

spec/javascripts/pipelines/stage_spec.js

-import _ from 'underscore';
 import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import stage from '~/pipelines/components/stage.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
 describe('Pipelines stage component', () => {
   let StageComponent;
   let component;
+  let mock;
 
   beforeEach(() => {
+    mock = new MockAdapter(axios);
+
     StageComponent = Vue.extend(stage);
 
-    component = new StageComponent({
-      propsData: {
-        stage: {
-          status: {
-            group: 'success',
-            icon: 'icon_status_success',
-            title: 'success',
-          },
-          dropdown_path: 'foo',
+    component = mountComponent(StageComponent, {
+      stage: {
+        status: {
+          group: 'success',
+          icon: 'icon_status_success',
+          title: 'success',
         },
-        updateDropdown: false,
+        dropdown_path: 'path.json',
       },
-    }).$mount();
+      updateDropdown: false,
+    });
+  });
+
+  afterEach(() => {
+    component.$destroy();
+    mock.restore();
   });
 
   it('should render a dropdown with the status icon', () => {
@@ -31,23 +39,11 @@ describe('Pipelines stage component', () => {
   });
 
   describe('with successfull request', () => {
-    const interceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify({ html: 'foo' }), {
-        status: 200,
-      }));
-    };
-
     beforeEach(() => {
-      Vue.http.interceptors.push(interceptor);
-    });
-
-    afterEach(() => {
-      Vue.http.interceptors = _.without(
-        Vue.http.interceptors, interceptor,
-      );
+      mock.onGet('path.json').reply(200, { html: 'foo' });
     });
 
-    it('should render the received data', (done) => {
+    it('should render the received data', done => {
       component.$el.querySelector('button').click();
 
       setTimeout(() => {
@@ -60,20 +56,8 @@ describe('Pipelines stage component', () => {
   });
 
   describe('when request fails', () => {
-    const interceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify({}), {
-        status: 500,
-      }));
-    };
-
     beforeEach(() => {
-      Vue.http.interceptors.push(interceptor);
-    });
-
-    afterEach(() => {
-      Vue.http.interceptors = _.without(
-        Vue.http.interceptors, interceptor,
-      );
+      mock.onGet('path.json').reply(500);
     });
 
     it('should close the dropdown', () => {
@@ -86,33 +70,18 @@ describe('Pipelines stage component', () => {
   });
 
   describe('update endpoint correctly', () => {
-    const updatedInterceptor = (request, next) => {
-      if (request.url === 'bar') {
-        next(request.respondWith(JSON.stringify({ html: 'this is the updated content' }), {
-          status: 200,
-        }));
-      }
-      next();
-    };
-
     beforeEach(() => {
-      Vue.http.interceptors.push(updatedInterceptor);
-    });
-
-    afterEach(() => {
-      Vue.http.interceptors = _.without(
-        Vue.http.interceptors, updatedInterceptor,
-      );
+      mock.onGet('bar.json').reply(200, { html: 'this is the updated content' });
     });
 
-    it('should update the stage to request the new endpoint provided', (done) => {
+    it('should update the stage to request the new endpoint provided', done => {
       component.stage = {
         status: {
           group: 'running',
           icon: 'running',
           title: 'running',
         },
-        dropdown_path: 'bar',
+        dropdown_path: 'bar.json',
       };
 
       Vue.nextTick(() => {
@@ -121,7 +90,7 @@ describe('Pipelines stage component', () => {
         setTimeout(() => {
           expect(
             component.$el.querySelector('.js-builds-dropdown-container ul').textContent.trim(),
-            ).toEqual('this is the updated content');
+          ).toEqual('this is the updated content');
           done();
         });
       });