Uniformize code between both pipelines tables

6 files changed, 25 insertions, 86 deletions

diff --git a/spec/javascripts/commit/pipelines/pipelines_spec.js b/spec/javascripts/commit/pipelines/pipelines_spec.js
index ebfd60198b2..694f94efcff 100644
--- a/spec/javascripts/commit/pipelines/pipelines_spec.js
+++ b/spec/javascripts/commit/pipelines/pipelines_spec.js
@@ -1,15 +1,15 @@
 import Vue from 'vue';
-import PipelinesTable from '~/commit/pipelines/pipelines_table';
+import pipelinesTable from '~/commit/pipelines/pipelines_table.vue';
 
 describe('Pipelines table in Commits and Merge requests', () => {
   const jsonFixtureName = 'pipelines/pipelines.json';
   let pipeline;
+  let PipelinesTable;
 
-  preloadFixtures('static/pipelines_table.html.raw');
   preloadFixtures(jsonFixtureName);
 
   beforeEach(() => {
-    loadFixtures('static/pipelines_table.html.raw');
+    PipelinesTable = Vue.extend(pipelinesTable);
     const pipelines = getJSONFixture(jsonFixtureName).pipelines;
     pipeline = pipelines.find(p => p.id === 1);
   });
@@ -26,8 +26,11 @@ describe('Pipelines table in Commits and Merge requests', () => {
         Vue.http.interceptors.push(pipelinesEmptyResponse);
 
         this.component = new PipelinesTable({
-          el: document.querySelector('#commit-pipeline-table-view'),
-        });
+          propsData: {
+            endpoint: 'endpoint',
+            helpPagePath: 'foo',
+          },
+        }).$mount();
       });
 
       afterEach(function () {
@@ -58,8 +61,11 @@ describe('Pipelines table in Commits and Merge requests', () => {
         Vue.http.interceptors.push(pipelinesResponse);
 
         this.component = new PipelinesTable({
-          el: document.querySelector('#commit-pipeline-table-view'),
-        });
+          propsData: {
+            endpoint: 'endpoint',
+            helpPagePath: 'foo',
+          },
+        }).$mount();
       });
 
       afterEach(() => {
@@ -92,8 +98,11 @@ describe('Pipelines table in Commits and Merge requests', () => {
       Vue.http.interceptors.push(pipelinesErrorResponse);
 
       this.component = new PipelinesTable({
-        el: document.querySelector('#commit-pipeline-table-view'),
-      });
+        propsData: {
+          endpoint: 'endpoint',
+          helpPagePath: 'foo',
+        },
+      }).$mount();
     });
 
     afterEach(function () {
diff --git a/spec/javascripts/fixtures/pipelines_table.html.haml b/spec/javascripts/fixtures/pipelines_table.html.haml
deleted file mode 100644
index ad1682704bb..00000000000
--- a/spec/javascripts/fixtures/pipelines_table.html.haml
+++ /dev/null
@@ -1 +0,0 @@
-#commit-pipeline-table-view{ data: { endpoint: "endpoint", "help-page-path": "foo" } }
diff --git a/spec/javascripts/pipelines/async_button_spec.js b/spec/javascripts/pipelines/async_button_spec.js
index 28c9c7ab282..48620898357 100644
--- a/spec/javascripts/pipelines/async_button_spec.js
+++ b/spec/javascripts/pipelines/async_button_spec.js
@@ -1,25 +1,20 @@
 import Vue from 'vue';
 import asyncButtonComp from '~/pipelines/components/async_button.vue';
+import eventHub from '~/pipelines/event_hub';
 
 describe('Pipelines Async Button', () => {
   let component;
-  let spy;
   let AsyncButtonComponent;
 
   beforeEach(() => {
     AsyncButtonComponent = Vue.extend(asyncButtonComp);
 
-    spy = jasmine.createSpy('spy').and.returnValue(Promise.resolve());
-
     component = new AsyncButtonComponent({
       propsData: {
         endpoint: '/foo',
         title: 'Foo',
         icon: 'fa fa-foo',
         cssClass: 'bar',
-        service: {
-          postAction: spy,
-        },
       },
     }).$mount();
   });
@@ -33,7 +28,7 @@ describe('Pipelines Async Button', () => {
   });
 
   it('should render the provided title', () => {
-    expect(component.$el.getAttribute('title')).toContain('Foo');
+    expect(component.$el.getAttribute('data-original-title')).toContain('Foo');
     expect(component.$el.getAttribute('aria-label')).toContain('Foo');
   });
 
@@ -41,37 +36,12 @@ describe('Pipelines Async Button', () => {
     expect(component.$el.getAttribute('class')).toContain('bar');
   });
 
-  it('should call the service when it is clicked with the provided endpoint', () => {
-    component.$el.click();
-    expect(spy).toHaveBeenCalledWith('/foo');
-  });
-
-  it('should hide loading if request fails', () => {
-    spy = jasmine.createSpy('spy').and.returnValue(Promise.reject());
-
-    component = new AsyncButtonComponent({
-      propsData: {
-        endpoint: '/foo',
-        title: 'Foo',
-        icon: 'fa fa-foo',
-        cssClass: 'bar',
-        dataAttributes: {
-          'data-foo': 'foo',
-        },
-        service: {
-          postAction: spy,
-        },
-      },
-    }).$mount();
-
-    component.$el.click();
-    expect(component.$el.querySelector('.fa-spinner')).toBe(null);
-  });
-
   describe('With confirm dialog', () => {
     it('should call the service when confimation is positive', () => {
       spyOn(window, 'confirm').and.returnValue(true);
-      spy = jasmine.createSpy('spy').and.returnValue(Promise.resolve());
+      eventHub.$on('postAction', (endpoint) => {
+        expect(endpoint).toEqual('/foo');
+      });
 
       component = new AsyncButtonComponent({
         propsData: {
@@ -79,15 +49,11 @@ describe('Pipelines Async Button', () => {
           title: 'Foo',
           icon: 'fa fa-foo',
           cssClass: 'bar',
-          service: {
-            postAction: spy,
-          },
           confirmActionMessage: 'bar',
         },
       }).$mount();
 
       component.$el.click();
-      expect(spy).toHaveBeenCalledWith('/foo');
     });
   });
 });
diff --git a/spec/javascripts/pipelines/pipelines_actions_spec.js b/spec/javascripts/pipelines/pipelines_actions_spec.js
index 8a58b77f1e3..72fb0a8f9ef 100644
--- a/spec/javascripts/pipelines/pipelines_actions_spec.js
+++ b/spec/javascripts/pipelines/pipelines_actions_spec.js
@@ -3,7 +3,6 @@ import pipelinesActionsComp from '~/pipelines/components/pipelines_actions.vue';
 
 describe('Pipelines Actions dropdown', () => {
   let component;
-  let spy;
   let actions;
   let ActionsComponent;
 
@@ -22,14 +21,9 @@ describe('Pipelines Actions dropdown', () => {
       },
     ];
 
-    spy = jasmine.createSpy('spy').and.returnValue(Promise.resolve());
-
     component = new ActionsComponent({
       propsData: {
         actions,
-        service: {
-          postAction: spy,
-        },
       },
     }).$mount();
   });
@@ -40,31 +34,6 @@ describe('Pipelines Actions dropdown', () => {
     ).toEqual(actions.length);
   });
 
-  it('should call the service when an action is clicked', () => {
-    component.$el.querySelector('.js-pipeline-dropdown-manual-actions').click();
-    component.$el.querySelector('.js-pipeline-action-link').click();
-
-    expect(spy).toHaveBeenCalledWith(actions[0].path);
-  });
-
-  it('should hide loading if request fails', () => {
-    spy = jasmine.createSpy('spy').and.returnValue(Promise.reject());
-
-    component = new ActionsComponent({
-      propsData: {
-        actions,
-        service: {
-          postAction: spy,
-        },
-      },
-    }).$mount();
-
-    component.$el.querySelector('.js-pipeline-dropdown-manual-actions').click();
-    component.$el.querySelector('.js-pipeline-action-link').click();
-
-    expect(component.$el.querySelector('.fa-spinner')).toEqual(null);
-  });
-
   it('should render a disabled action when it\'s not playable', () => {
     expect(
       component.$el.querySelector('.dropdown-menu li:last-child button').getAttribute('disabled'),
diff --git a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js b/spec/javascripts/pipelines/pipelines_table_row_spec.js
index 9475ee28a03..7ce39dca112 100644
--- a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
+++ b/spec/javascripts/pipelines/pipelines_table_row_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import tableRowComp from '~/vue_shared/components/pipelines_table_row.vue';
+import tableRowComp from '~/pipelines/components/pipelines_table_row.vue';
 
 describe('Pipelines Table Row', () => {
   const jsonFixtureName = 'pipelines/pipelines.json';
diff --git a/spec/javascripts/vue_shared/components/pipelines_table_spec.js b/spec/javascripts/pipelines/pipelines_table_spec.js
index 4c35d702004..3afe89c8db4 100644
--- a/spec/javascripts/vue_shared/components/pipelines_table_spec.js
+++ b/spec/javascripts/pipelines/pipelines_table_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import pipelinesTableComp from '~/vue_shared/components/pipelines_table.vue';
+import pipelinesTableComp from '~/pipelines/components/pipelines_table.vue';
 import '~/lib/utils/datetime_utility';
 
 describe('Pipelines Table', () => {
@@ -22,7 +22,6 @@ describe('Pipelines Table', () => {
       component = new PipelinesTableComponent({
         propsData: {
           pipelines: [],
-          service: {},
         },
       }).$mount();
     });
@@ -48,7 +47,6 @@ describe('Pipelines Table', () => {
       const component = new PipelinesTableComponent({
         propsData: {
           pipelines: [],
-          service: {},
         },
       }).$mount();
       expect(component.$el.querySelectorAll('.commit.gl-responsive-table-row').length).toEqual(0);
@@ -58,10 +56,8 @@ describe('Pipelines Table', () => {
   describe('with data', () => {
     it('should render rows', () => {
       const component = new PipelinesTableComponent({
-        el: document.querySelector('.test-dom-element'),
         propsData: {
           pipelines: [pipeline],
-          service: {},
         },
       }).$mount();