Replace vue resource with axios for environments

app/assets/javascripts/environments/components/environments_app.vue

@@ -68,8 +68,7 @@
         this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', showLoader);
 
         this.service.getFolderContent(folder.folder_path)
-          .then(resp => resp.json())
-          .then(response => this.store.setfolderContent(folder, response.environments))
+          .then(response => this.store.setfolderContent(folder, response.data.environments))
           .then(() => this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', false))
           .catch(() => {
             Flash(s__('Environments|An error occurred while fetching the environments.'));

app/assets/javascripts/environments/mixins/environments_mixin.js

@@ -6,7 +6,6 @@ import Visibility from 'visibilityjs';
 import Poll from '../../lib/utils/poll';
 import {
   getParameterByName,
-  parseQueryStringIntoObject,
 } from '../../lib/utils/common_utils';
 import { s__ } from '../../locale';
 import Flash from '../../flash';
@@ -46,17 +45,14 @@ export default {
 
   methods: {
     saveData(resp) {
-      const headers = resp.headers;
-      return resp.json().then((response) => {
-        this.isLoading = false;
-
-        if (_.isEqual(parseQueryStringIntoObject(resp.url.split('?')[1]), this.requestData)) {
-          this.store.storeAvailableCount(response.available_count);
-          this.store.storeStoppedCount(response.stopped_count);
-          this.store.storeEnvironments(response.environments);
-          this.store.setPagination(headers);
-        }
-      });
+      this.isLoading = false;
+
+      if (_.isEqual(resp.config.params, this.requestData)) {
+        this.store.storeAvailableCount(resp.data.available_count);
+        this.store.storeStoppedCount(resp.data.stopped_count);
+        this.store.storeEnvironments(resp.data.environments);
+        this.store.setPagination(resp.headers);
+      }
     },
 
     /**

app/assets/javascripts/environments/services/environments_service.js

-/* eslint-disable class-methods-use-this */
-import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-Vue.use(VueResource);
+import axios from '~/lib/utils/axios_utils';
 
 export default class EnvironmentsService {
   constructor(endpoint) {
-    this.environments = Vue.resource(endpoint);
+    this.environmentsEndpoint = endpoint;
     this.folderResults = 3;
   }
 
   get(options = {}) {
     const { scope, page } = options;
-    return this.environments.get({ scope, page });
+    return axios.get(this.environmentsEndpoint, { params: { scope, page } });
   }
 
+  // eslint-disable-next-line class-methods-use-this
   postAction(endpoint) {
-    return Vue.http.post(endpoint, {}, { emulateJSON: true });
+    return axios.post(endpoint, {}, { emulateJSON: true });
   }
 
   getFolderContent(folderUrl) {
-    return Vue.http.get(`${folderUrl}.json?per_page=${this.folderResults}`);
+    return axios.get(`${folderUrl}.json?per_page=${this.folderResults}`);
   }
 }

spec/javascripts/environments/environments_app_spec.js

-import _ from 'underscore';
 import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import environmentsComponent from '~/environments/components/environments_app.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { headersInterceptor } from 'spec/helpers/vue_resource_helper';
 import { environment, folder } from './mock_data';
 
 describe('Environment', () => {
@@ -18,103 +18,76 @@ describe('Environment', () => {
 
   let EnvironmentsComponent;
   let component;
+  let mock;
 
   beforeEach(() => {
+    mock = new MockAdapter(axios);
+
     EnvironmentsComponent = Vue.extend(environmentsComponent);
   });
 
+  afterEach(() => {
+    component.$destroy();
+    mock.restore();
+  });
+
   describe('successfull request', () => {
     describe('without environments', () => {
-      const environmentsEmptyResponseInterceptor = (request, next) => {
-        next(request.respondWith(JSON.stringify([]), {
-          status: 200,
-        }));
-      };
-
-      beforeEach(() => {
-        Vue.http.interceptors.push(environmentsEmptyResponseInterceptor);
-        Vue.http.interceptors.push(headersInterceptor);
-      });
-
-      afterEach(() => {
-        Vue.http.interceptors = _.without(
-          Vue.http.interceptors, environmentsEmptyResponseInterceptor,
-        );
-        Vue.http.interceptors = _.without(Vue.http.interceptors, headersInterceptor);
-      });
+      beforeEach((done) => {
+        mock.onGet(mockData.endpoint).reply(200, { environments: [] });
 
-      it('should render the empty state', (done) => {
         component = mountComponent(EnvironmentsComponent, mockData);
 
         setTimeout(() => {
-          expect(
-            component.$el.querySelector('.js-new-environment-button').textContent,
-          ).toContain('New environment');
-
-          expect(
-            component.$el.querySelector('.js-blank-state-title').textContent,
-          ).toContain('You don\'t have any environments right now.');
-
           done();
         }, 0);
       });
+
+      it('should render the empty state', () => {
+        expect(
+          component.$el.querySelector('.js-new-environment-button').textContent,
+        ).toContain('New environment');
+
+        expect(
+          component.$el.querySelector('.js-blank-state-title').textContent,
+        ).toContain('You don\'t have any environments right now.');
+      });
     });
 
     describe('with paginated environments', () => {
-      let backupInterceptors;
-      const environmentsResponseInterceptor = (request, next) => {
-        next((response) => {
-          response.headers.set('X-nExt-pAge', '2');
-        });
-
-        next(request.respondWith(JSON.stringify({
+      beforeEach((done) => {
+        mock.onGet(mockData.endpoint).reply(200, {
           environments: [environment],
           stopped_count: 1,
           available_count: 0,
-        }), {
-          status: 200,
-          headers: {
-            'X-nExt-pAge': '2',
-            'x-page': '1',
-            'X-Per-Page': '1',
-            'X-Prev-Page': '',
-            'X-TOTAL': '37',
-            'X-Total-Pages': '2',
-          },
-        }));
-      };
-
-      beforeEach(() => {
-        backupInterceptors = Vue.http.interceptors;
-        Vue.http.interceptors = [
-          environmentsResponseInterceptor,
-          headersInterceptor,
-        ];
-        component = mountComponent(EnvironmentsComponent, mockData);
-      });
+        }, {
+          'X-nExt-pAge': '2',
+          'x-page': '1',
+          'X-Per-Page': '1',
+          'X-Prev-Page': '',
+          'X-TOTAL': '37',
+          'X-Total-Pages': '2',
+        });
 
-      afterEach(() => {
-        Vue.http.interceptors = backupInterceptors;
-      });
+        component = mountComponent(EnvironmentsComponent, mockData);
 
-      it('should render a table with environments', (done) => {
         setTimeout(() => {
-          expect(component.$el.querySelectorAll('table')).not.toBeNull();
-          expect(
-            component.$el.querySelector('.environment-name').textContent.trim(),
-          ).toEqual(environment.name);
           done();
         }, 0);
       });
 
+      it('should render a table with environments', () => {
+        expect(component.$el.querySelectorAll('table')).not.toBeNull();
+        expect(
+          component.$el.querySelector('.environment-name').textContent.trim(),
+        ).toEqual(environment.name);
+      });
+
       describe('pagination', () => {
-        it('should render pagination', (done) => {
-          setTimeout(() => {
-            expect(
-              component.$el.querySelectorAll('.gl-pagination li').length,
-            ).toEqual(5);
-            done();
-          }, 0);
+        it('should render pagination', () => {
+          expect(
+            component.$el.querySelectorAll('.gl-pagination li').length,
+          ).toEqual(5);
         });
 
         it('should make an API request when page is clicked', (done) => {
@@ -133,50 +106,39 @@ describe('Environment', () => {
 
             expect(component.updateContent).toHaveBeenCalledWith({ scope: 'stopped', page: '1' });
             done();
-          });
+          }, 0);
         });
       });
     });
   });
 
   describe('unsuccessfull request', () => {
-    const environmentsErrorResponseInterceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify([]), {
-        status: 500,
-      }));
-    };
-
-    beforeEach(() => {
-      Vue.http.interceptors.push(environmentsErrorResponseInterceptor);
-    });
+    beforeEach((done) => {
+      mock.onGet(mockData.endpoint).reply(500, {});
 
-    afterEach(() => {
-      Vue.http.interceptors = _.without(
-        Vue.http.interceptors, environmentsErrorResponseInterceptor,
-      );
-    });
-
-    it('should render empty state', (done) => {
       component = mountComponent(EnvironmentsComponent, mockData);
 
       setTimeout(() => {
-        expect(
-          component.$el.querySelector('.js-blank-state-title').textContent,
-        ).toContain('You don\'t have any environments right now.');
         done();
       }, 0);
     });
+
+    it('should render empty state', () => {
+      expect(
+        component.$el.querySelector('.js-blank-state-title').textContent,
+      ).toContain('You don\'t have any environments right now.');
+    });
   });
 
   describe('expandable folders', () => {
-    const environmentsResponseInterceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify({
-        environments: [folder],
-        stopped_count: 0,
-        available_count: 1,
-      }), {
-        status: 200,
-        headers: {
+    beforeEach(() => {
+      mock.onGet(mockData.endpoint).reply(200,
+        {
+          environments: [folder],
+          stopped_count: 0,
+          available_count: 1,
+        },
+        {
           'X-nExt-pAge': '2',
           'x-page': '1',
           'X-Per-Page': '1',
@@ -184,18 +146,11 @@ describe('Environment', () => {
           'X-TOTAL': '37',
           'X-Total-Pages': '2',
         },
-      }));
-    };
+      );
 
-    beforeEach(() => {
-      Vue.http.interceptors.push(environmentsResponseInterceptor);
-      component = mountComponent(EnvironmentsComponent, mockData);
-    });
+      mock.onGet(environment.folder_path).reply(200, { environments: [environment] });
 
-    afterEach(() => {
-      Vue.http.interceptors = _.without(
-        Vue.http.interceptors, environmentsResponseInterceptor,
-      );
+      component = mountComponent(EnvironmentsComponent, mockData);
     });
 
     it('should open a closed folder', (done) => {
@@ -211,7 +166,7 @@ describe('Environment', () => {
           ).not.toContain('display: none');
           done();
         });
-      });
+      }, 0);
     });
 
     it('should close an opened folder', (done) => {
@@ -233,7 +188,7 @@ describe('Environment', () => {
             done();
           });
         });
-      });
+      }, 0);
     });
 
     it('should show children environments and a button to show all environments', (done) => {
@@ -242,49 +197,32 @@ describe('Environment', () => {
         component.$el.querySelector('.folder-name').click();
 
         Vue.nextTick(() => {
-          const folderInterceptor = (request, next) => {
-            next(request.respondWith(JSON.stringify({
-              environments: [environment],
-            }), { status: 200 }));
-          };
-
-          Vue.http.interceptors.push(folderInterceptor);
-
           // wait for next async request
           setTimeout(() => {
             expect(component.$el.querySelectorAll('.js-child-row').length).toEqual(1);
             expect(component.$el.querySelector('.text-center > a.btn').textContent).toContain('Show all');
-
-            Vue.http.interceptors = _.without(Vue.http.interceptors, folderInterceptor);
             done();
           });
         });
-      });
+      }, 0);
     });
   });
 
   describe('methods', () => {
-    const environmentsEmptyResponseInterceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify([]), {
-        status: 200,
-      }));
-    };
-
     beforeEach(() => {
-      Vue.http.interceptors.push(environmentsEmptyResponseInterceptor);
-      Vue.http.interceptors.push(headersInterceptor);
+      mock.onGet(mockData.endpoint).reply(200,
+        {
+          environments: [],
+          stopped_count: 0,
+          available_count: 1,
+        },
+        {},
+      );
 
       component = mountComponent(EnvironmentsComponent, mockData);
       spyOn(history, 'pushState').and.stub();
     });
 
-    afterEach(() => {
-      Vue.http.interceptors = _.without(
-        Vue.http.interceptors, environmentsEmptyResponseInterceptor,
-      );
-      Vue.http.interceptors = _.without(Vue.http.interceptors, headersInterceptor);
-    });
-
     describe('updateContent', () => {
       it('should set given parameters', (done) => {
         component.updateContent({ scope: 'stopped', page: '3' })

spec/javascripts/environments/folder/environments_folder_view_spec.js

-import _ from 'underscore';
 import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import environmentsFolderViewComponent from '~/environments/folder/environments_folder_view.vue';
-import { headersInterceptor } from 'spec/helpers/vue_resource_helper';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import { environmentsList } from '../mock_data';
 
 describe('Environments Folder View', () => {
   let Component;
   let component;
+  let mock;
+
   const mockData = {
     endpoint: 'environments.json',
     folderName: 'review',
@@ -17,46 +19,35 @@ describe('Environments Folder View', () => {
   };
 
   beforeEach(() => {
+    mock = new MockAdapter(axios);
+
     Component = Vue.extend(environmentsFolderViewComponent);
   });
 
   afterEach(() => {
+    mock.restore();
+
     component.$destroy();
   });
 
   describe('successfull request', () => {
-    const environmentsResponseInterceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify({
+    beforeEach(() => {
+      mock.onGet(mockData.endpoint).reply(200, {
         environments: environmentsList,
         stopped_count: 1,
         available_count: 0,
-      }), {
-        status: 200,
-        headers: {
-          'X-nExt-pAge': '2',
-          'x-page': '1',
-          'X-Per-Page': '2',
-          'X-Prev-Page': '',
-          'X-TOTAL': '20',
-          'X-Total-Pages': '10',
-        },
-      }));
-    };
-
-    beforeEach(() => {
-      Vue.http.interceptors.push(environmentsResponseInterceptor);
-      Vue.http.interceptors.push(headersInterceptor);
+      }, {
+        'X-nExt-pAge': '2',
+        'x-page': '1',
+        'X-Per-Page': '2',
+        'X-Prev-Page': '',
+        'X-TOTAL': '20',
+        'X-Total-Pages': '10',
+      });
 
       component = mountComponent(Component, mockData);
     });
 
-    afterEach(() => {
-      Vue.http.interceptors = _.without(
-        Vue.http.interceptors, environmentsResponseInterceptor,
-      );
-      Vue.http.interceptors = _.without(Vue.http.interceptors, headersInterceptor);
-    });
-
     it('should render a table with environments', (done) => {
       setTimeout(() => {
         expect(component.$el.querySelectorAll('table')).not.toBeNull();
@@ -135,25 +126,15 @@ describe('Environments Folder View', () => {
   });
 
   describe('unsuccessfull request', () => {
-    const environmentsErrorResponseInterceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify([]), {
-        status: 500,
-      }));
-    };
-
     beforeEach(() => {
-      Vue.http.interceptors.push(environmentsErrorResponseInterceptor);
-    });
+      mock.onGet(mockData.endpoint).reply(500, {
+        environments: [],
+      });
 
-    afterEach(() => {
-      Vue.http.interceptors = _.without(
-        Vue.http.interceptors, environmentsErrorResponseInterceptor,
-      );
+      component = mountComponent(Component, mockData);
     });
 
     it('should not render a table', (done) => {
-      component = mountComponent(Component, mockData);
-
       setTimeout(() => {
         expect(
           component.$el.querySelector('table'),
@@ -190,27 +171,15 @@ describe('Environments Folder View', () => {
   });
 
   describe('methods', () => {
-    const environmentsEmptyResponseInterceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify([]), {
-        status: 200,
-      }));
-    };
-
     beforeEach(() => {
-      Vue.http.interceptors.push(environmentsEmptyResponseInterceptor);
-      Vue.http.interceptors.push(headersInterceptor);
+      mock.onGet(mockData.endpoint).reply(200, {
+        environments: [],
+      });
 
       component = mountComponent(Component, mockData);
       spyOn(history, 'pushState').and.stub();
     });
 
-    afterEach(() => {
-      Vue.http.interceptors = _.without(
-        Vue.http.interceptors, environmentsEmptyResponseInterceptor,
-      );
-      Vue.http.interceptors = _.without(Vue.http.interceptors, headersInterceptor);
-    });
-
     describe('updateContent', () => {
       it('should set given parameters', (done) => {
         component.updateContent({ scope: 'stopped', page: '4' })

spec/javascripts/environments/mock_data.js

@@ -82,6 +82,7 @@ export const environment = {
     stop_path: '/root/review-app/environments/7/stop',
     created_at: '2017-01-31T10:53:46.894Z',
     updated_at: '2017-01-31T10:53:46.894Z',
+    folder_path: '/root/review-app/environments/7',
   },
 };