Add modal for stopping jobs in admin area

2 files changed, 71 insertions, 8 deletions

diff --git a/spec/features/admin/admin_builds_spec.rb b/spec/features/admin/admin_builds_spec.rb
index e020579f71e..51b42d1b43b 100644
--- a/spec/features/admin/admin_builds_spec.rb
+++ b/spec/features/admin/admin_builds_spec.rb
@@ -21,7 +21,7 @@ describe 'Admin Builds' do
           expect(page).to have_selector('.nav-links li.active', text: 'All')
           expect(page).to have_selector('.row-content-block', text: 'All jobs')
           expect(page.all('.build-link').size).to eq(4)
-          expect(page).to have_link 'Cancel all'
+          expect(page).to have_button 'Stop all jobs'
         end
       end
 
@@ -31,7 +31,7 @@ describe 'Admin Builds' do
 
           expect(page).to have_selector('.nav-links li.active', text: 'All')
           expect(page).to have_content 'No jobs to show'
-          expect(page).not_to have_link 'Cancel all'
+          expect(page).not_to have_button 'Stop all jobs'
         end
       end
     end
@@ -51,7 +51,7 @@ describe 'Admin Builds' do
           expect(page.find('.build-link')).not_to have_content(build2.id)
           expect(page.find('.build-link')).not_to have_content(build3.id)
           expect(page.find('.build-link')).not_to have_content(build4.id)
-          expect(page).to have_link 'Cancel all'
+          expect(page).to have_button 'Stop all jobs'
         end
       end
 
@@ -63,7 +63,7 @@ describe 'Admin Builds' do
 
           expect(page).to have_selector('.nav-links li.active', text: 'Pending')
           expect(page).to have_content 'No jobs to show'
-          expect(page).not_to have_link 'Cancel all'
+          expect(page).not_to have_button 'Stop all jobs'
         end
       end
     end
@@ -83,7 +83,7 @@ describe 'Admin Builds' do
           expect(page.find('.build-link')).not_to have_content(build2.id)
           expect(page.find('.build-link')).not_to have_content(build3.id)
           expect(page.find('.build-link')).not_to have_content(build4.id)
-          expect(page).to have_link 'Cancel all'
+          expect(page).to have_button 'Stop all jobs'
         end
       end
 
@@ -95,7 +95,7 @@ describe 'Admin Builds' do
 
           expect(page).to have_selector('.nav-links li.active', text: 'Running')
           expect(page).to have_content 'No jobs to show'
-          expect(page).not_to have_link 'Cancel all'
+          expect(page).not_to have_button 'Stop all jobs'
         end
       end
     end
@@ -113,7 +113,7 @@ describe 'Admin Builds' do
           expect(page.find('.build-link')).not_to have_content(build1.id)
           expect(page.find('.build-link')).not_to have_content(build2.id)
           expect(page.find('.build-link')).to have_content(build3.id)
-          expect(page).to have_link 'Cancel all'
+          expect(page).to have_button 'Stop all jobs'
         end
       end
 
@@ -125,7 +125,7 @@ describe 'Admin Builds' do
 
           expect(page).to have_selector('.nav-links li.active', text: 'Finished')
           expect(page).to have_content 'No jobs to show'
-          expect(page).to have_link 'Cancel all'
+          expect(page).to have_button 'Stop all jobs'
         end
       end
     end
diff --git a/spec/javascripts/pages/admin/jobs/index/components/stop_jobs_modal_spec.js b/spec/javascripts/pages/admin/jobs/index/components/stop_jobs_modal_spec.js
new file mode 100644
index 00000000000..440a6585d57
--- /dev/null
+++ b/spec/javascripts/pages/admin/jobs/index/components/stop_jobs_modal_spec.js
@@ -0,0 +1,63 @@
+import Vue from 'vue';
+
+import axios from '~/lib/utils/axios_utils';
+import stopJobsModal from '~/pages/admin/jobs/index/components/stop_jobs_modal.vue';
+import * as urlUtility from '~/lib/utils/url_utility';
+
+import mountComponent from '../../../../../helpers/vue_mount_component_helper';
+
+describe('stop_jobs_modal.vue', () => {
+  const props = {
+    url: `${gl.TEST_HOST}/stop_jobs_modal.vue/stopAll`,
+  };
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  beforeEach(() => {
+    const Component = Vue.extend(stopJobsModal);
+    vm = mountComponent(Component, props);
+  });
+
+  describe('onSubmit', () => {
+    it('stops jobs and redirects to overview page', (done) => {
+      const responseURL = `${gl.TEST_HOST}/stop_jobs_modal.vue/jobs`;
+      const redirectSpy = spyOn(urlUtility, 'redirectTo');
+      spyOn(axios, 'post').and.callFake((url) => {
+        expect(url).toBe(props.url);
+        return Promise.resolve({
+          request: {
+            responseURL,
+          },
+        });
+      });
+
+      vm.onSubmit()
+      .then(() => {
+        expect(redirectSpy).toHaveBeenCalledWith(responseURL);
+      })
+      .then(done)
+      .catch(done.fail);
+    });
+
+    it('displays error if stopping jobs failed', (done) => {
+      const dummyError = new Error('stopping jobs failed');
+      const redirectSpy = spyOn(urlUtility, 'redirectTo');
+      spyOn(axios, 'post').and.callFake((url) => {
+        expect(url).toBe(props.url);
+        return Promise.reject(dummyError);
+      });
+
+      vm.onSubmit()
+        .then(done.fail)
+        .catch((error) => {
+          expect(error).toBe(dummyError);
+          expect(redirectSpy).not.toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+});