1 files changed, 60 insertions, 107 deletions
diff --git a/spec/javascripts/commit/pipelines/pipelines_spec.js b/spec/javascripts/commit/pipelines/pipelines_spec.js
index 0afe09d87bc..819ed7896ca 100644
--- a/spec/javascripts/commit/pipelines/pipelines_spec.js
+++ b/spec/javascripts/commit/pipelines/pipelines_spec.js
@@ -1,113 +1,82 @@
-import _ from 'underscore';
 import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import pipelinesTable from '~/commit/pipelines/pipelines_table.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
-describe('Pipelines table in Commits and Merge requests', () => {
+describe('Pipelines table in Commits and Merge requests', function () {
   const jsonFixtureName = 'pipelines/pipelines.json';
   let pipeline;
   let PipelinesTable;
+  let mock;
+  let vm;
 
   preloadFixtures(jsonFixtureName);
 
   beforeEach(() => {
+    mock = new MockAdapter(axios);
+
     const pipelines = getJSONFixture(jsonFixtureName).pipelines;
 
     PipelinesTable = Vue.extend(pipelinesTable);
     pipeline = pipelines.find(p => p.user !== null && p.commit !== null);
   });
 
+  afterEach(() => {
+    vm.$destroy();
+    mock.restore();
+  });
+
   describe('successful request', () => {
     describe('without pipelines', () => {
-      const pipelinesEmptyResponse = (request, next) => {
-        next(request.respondWith(JSON.stringify([]), {
-          status: 200,
-        }));
-      };
-
       beforeEach(function () {
-        Vue.http.interceptors.push(pipelinesEmptyResponse);
-
-        this.component = new PipelinesTable({
-          propsData: {
-            endpoint: 'endpoint',
-            helpPagePath: 'foo',
-            emptyStateSvgPath: 'foo',
-            errorStateSvgPath: 'foo',
-            autoDevopsHelpPath: 'foo',
-          },
-        }).$mount();
-      });
+        mock.onGet('endpoint.json').reply(200, []);
 
-      afterEach(function () {
-        Vue.http.interceptors = _.without(
-          Vue.http.interceptors, pipelinesEmptyResponse,
-        );
-        this.component.$destroy();
+        vm = mountComponent(PipelinesTable, {
+          endpoint: 'endpoint.json',
+          helpPagePath: 'foo',
+          emptyStateSvgPath: 'foo',
+          errorStateSvgPath: 'foo',
+          autoDevopsHelpPath: 'foo',
+        });
       });
 
       it('should render the empty state', function (done) {
         setTimeout(() => {
-          expect(this.component.$el.querySelector('.empty-state')).toBeDefined();
-          expect(this.component.$el.querySelector('.realtime-loading')).toBe(null);
-          expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBe(null);
+          expect(vm.$el.querySelector('.empty-state')).toBeDefined();
+          expect(vm.$el.querySelector('.realtime-loading')).toBe(null);
+          expect(vm.$el.querySelector('.js-pipelines-error-state')).toBe(null);
           done();
-        }, 1);
+        }, 0);
       });
     });
 
     describe('with pipelines', () => {
-      const pipelinesResponse = (request, next) => {
-        next(request.respondWith(JSON.stringify([pipeline]), {
-          status: 200,
-        }));
-      };
-
       beforeEach(() => {
-        Vue.http.interceptors.push(pipelinesResponse);
-
-        this.component = new PipelinesTable({
-          propsData: {
-            endpoint: 'endpoint',
-            helpPagePath: 'foo',
-            emptyStateSvgPath: 'foo',
-            errorStateSvgPath: 'foo',
-            autoDevopsHelpPath: 'foo',
-          },
-        }).$mount();
-      });
-
-      afterEach(() => {
-        Vue.http.interceptors = _.without(
-          Vue.http.interceptors, pipelinesResponse,
-        );
-        this.component.$destroy();
+        mock.onGet('endpoint.json').reply(200, [pipeline]);
+        vm = mountComponent(PipelinesTable, {
+          endpoint: 'endpoint.json',
+          helpPagePath: 'foo',
+          emptyStateSvgPath: 'foo',
+          errorStateSvgPath: 'foo',
+          autoDevopsHelpPath: 'foo',
+        });
       });
 
       it('should render a table with the received pipelines', (done) => {
         setTimeout(() => {
-          expect(this.component.$el.querySelectorAll('.ci-table .commit').length).toEqual(1);
-          expect(this.component.$el.querySelector('.realtime-loading')).toBe(null);
-          expect(this.component.$el.querySelector('.empty-state')).toBe(null);
-          expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBe(null);
+          expect(vm.$el.querySelectorAll('.ci-table .commit').length).toEqual(1);
+          expect(vm.$el.querySelector('.realtime-loading')).toBe(null);
+          expect(vm.$el.querySelector('.empty-state')).toBe(null);
+          expect(vm.$el.querySelector('.js-pipelines-error-state')).toBe(null);
           done();
         }, 0);
       });
     });
 
     describe('pipeline badge counts', () => {
-      const pipelinesResponse = (request, next) => {
-        next(request.respondWith(JSON.stringify([pipeline]), {
-          status: 200,
-        }));
-      };
-
       beforeEach(() => {
-        Vue.http.interceptors.push(pipelinesResponse);
-      });
-
-      afterEach(() => {
-        Vue.http.interceptors = _.without(Vue.http.interceptors, pipelinesResponse);
-        this.component.$destroy();
+        mock.onGet('endpoint.json').reply(200, [pipeline]);
       });
 
       it('should receive update-pipelines-count event', (done) => {
@@ -119,54 +88,38 @@ describe('Pipelines table in Commits and Merge requests', () => {
           done();
         });
 
-        this.component = new PipelinesTable({
-          propsData: {
-            endpoint: 'endpoint',
-            helpPagePath: 'foo',
-            emptyStateSvgPath: 'foo',
-            errorStateSvgPath: 'foo',
-            autoDevopsHelpPath: 'foo',
-          },
-        }).$mount();
-        element.appendChild(this.component.$el);
-      });
-    });
-  });
-
-  describe('unsuccessfull request', () => {
-    const pipelinesErrorResponse = (request, next) => {
-      next(request.respondWith(JSON.stringify([]), {
-        status: 500,
-      }));
-    };
-
-    beforeEach(function () {
-      Vue.http.interceptors.push(pipelinesErrorResponse);
-
-      this.component = new PipelinesTable({
-        propsData: {
-          endpoint: 'endpoint',
+        vm = mountComponent(PipelinesTable, {
+          endpoint: 'endpoint.json',
           helpPagePath: 'foo',
           emptyStateSvgPath: 'foo',
           errorStateSvgPath: 'foo',
           autoDevopsHelpPath: 'foo',
-        },
-      }).$mount();
+        });
+
+        element.appendChild(vm.$el);
+      });
     });
+  });
 
-    afterEach(function () {
-      Vue.http.interceptors = _.without(
-        Vue.http.interceptors, pipelinesErrorResponse,
-      );
-      this.component.$destroy();
+  describe('unsuccessfull request', () => {
+    beforeEach(() => {
+      mock.onGet('endpoint.json').reply(500, []);
+
+      vm = mountComponent(PipelinesTable, {
+        endpoint: 'endpoint.json',
+        helpPagePath: 'foo',
+        emptyStateSvgPath: 'foo',
+        errorStateSvgPath: 'foo',
+        autoDevopsHelpPath: 'foo',
+      });
     });
 
     it('should render error state', function (done) {
       setTimeout(() => {
-        expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBeDefined();
-        expect(this.component.$el.querySelector('.realtime-loading')).toBe(null);
-        expect(this.component.$el.querySelector('.js-empty-state')).toBe(null);
-        expect(this.component.$el.querySelector('.ci-table')).toBe(null);
+        expect(vm.$el.querySelector('.js-pipelines-error-state')).toBeDefined();
+        expect(vm.$el.querySelector('.realtime-loading')).toBe(null);
+        expect(vm.$el.querySelector('.js-empty-state')).toBe(null);
+        expect(vm.$el.querySelector('.ci-table')).toBe(null);
         done();
       }, 0);
     });