Add latest changes from gitlab-org/gitlab@master

2 files changed, 66 insertions, 12 deletions

diff --git a/spec/frontend/pages/admin/jobs/index/components/stop_jobs_modal_spec.js b/spec/frontend/pages/admin/jobs/index/components/cancel_jobs_modal_spec.js
index 17669331370..366d148a608 100644
--- a/spec/frontend/pages/admin/jobs/index/components/stop_jobs_modal_spec.js
+++ b/spec/frontend/pages/admin/jobs/index/components/cancel_jobs_modal_spec.js
@@ -4,30 +4,27 @@ import { GlModal } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 import axios from '~/lib/utils/axios_utils';
 import { redirectTo } from '~/lib/utils/url_utility';
-import StopJobsModal from '~/pages/admin/jobs/index/components/stop_jobs_modal.vue';
+import CancelJobsModal from '~/pages/admin/jobs/index/components/cancel_jobs_modal.vue';
 
 jest.mock('~/lib/utils/url_utility', () => ({
   ...jest.requireActual('~/lib/utils/url_utility'),
   redirectTo: jest.fn(),
 }));
 
-describe('stop_jobs_modal.vue', () => {
+describe('Cancel jobs modal', () => {
   const props = {
-    url: `${TEST_HOST}/stop_jobs_modal.vue/stopAll`,
+    url: `${TEST_HOST}/cancel_jobs_modal.vue/cancelAll`,
+    modalId: 'cancel-jobs-modal',
   };
   let wrapper;
 
   beforeEach(() => {
-    wrapper = mount(StopJobsModal, { propsData: props });
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
+    wrapper = mount(CancelJobsModal, { propsData: props });
   });
 
   describe('on submit', () => {
-    it('stops jobs and redirects to overview page', async () => {
-      const responseURL = `${TEST_HOST}/stop_jobs_modal.vue/jobs`;
+    it('cancels jobs and redirects to overview page', async () => {
+      const responseURL = `${TEST_HOST}/cancel_jobs_modal.vue/jobs`;
       // TODO: We can't use axios-mock-adapter because our current version
       // does not support responseURL
       //
@@ -47,10 +44,10 @@ describe('stop_jobs_modal.vue', () => {
       expect(redirectTo).toHaveBeenCalledWith(responseURL);
     });
 
-    it('displays error if stopping jobs failed', async () => {
+    it('displays error if canceling jobs failed', async () => {
       Vue.config.errorHandler = () => {}; // silencing thrown error
 
-      const dummyError = new Error('stopping jobs failed');
+      const dummyError = new Error('canceling jobs failed');
       // TODO: We can't use axios-mock-adapter because our current version
       // does not support responseURL
       //
diff --git a/spec/frontend/pages/admin/jobs/index/components/cancel_jobs_spec.js b/spec/frontend/pages/admin/jobs/index/components/cancel_jobs_spec.js
new file mode 100644
index 00000000000..ec6369e7119
--- /dev/null
+++ b/spec/frontend/pages/admin/jobs/index/components/cancel_jobs_spec.js
@@ -0,0 +1,57 @@
+import { GlButton } from '@gitlab/ui';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { TEST_HOST } from 'helpers/test_constants';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import CancelJobs from '~/pages/admin/jobs/index/components/cancel_jobs.vue';
+import CancelJobsModal from '~/pages/admin/jobs/index/components/cancel_jobs_modal.vue';
+import {
+  CANCEL_JOBS_MODAL_ID,
+  CANCEL_BUTTON_TOOLTIP,
+} from '~/pages/admin/jobs/index/components/constants';
+
+describe('CancelJobs component', () => {
+  let wrapper;
+
+  const findCancelJobs = () => wrapper.findComponent(CancelJobs);
+  const findButton = () => wrapper.findComponent(GlButton);
+  const findModal = () => wrapper.findComponent(CancelJobsModal);
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMountExtended(CancelJobs, {
+      directives: {
+        GlModal: createMockDirective(),
+        GlTooltip: createMockDirective(),
+      },
+      propsData: {
+        url: `${TEST_HOST}/cancel_jobs_modal.vue/cancelAll`,
+        ...props,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('has correct inputs', () => {
+    expect(findCancelJobs().props().url).toBe(`${TEST_HOST}/cancel_jobs_modal.vue/cancelAll`);
+  });
+
+  it('has correct button variant', () => {
+    expect(findButton().props().variant).toBe('danger');
+  });
+
+  it('checks that button and modal are connected', () => {
+    const buttonModalDirective = getBinding(findButton().element, 'gl-modal');
+    const modalId = findModal().props('modalId');
+
+    expect(buttonModalDirective.value).toBe(CANCEL_JOBS_MODAL_ID);
+    expect(modalId).toBe(CANCEL_JOBS_MODAL_ID);
+  });
+
+  it('checks that tooltip is displayed', () => {
+    const buttonTooltipDirective = getBinding(findButton().element, 'gl-tooltip');
+
+    expect(buttonTooltipDirective.value).toBe(CANCEL_BUTTON_TOOLTIP);
+  });
+});