5 files changed, 79 insertions, 14 deletions

diff --git a/spec/frontend/environments/edit_environment_spec.js b/spec/frontend/environments/edit_environment_spec.js
index 5ea23af4c16..ba4b4db54ff 100644
--- a/spec/frontend/environments/edit_environment_spec.js
+++ b/spec/frontend/environments/edit_environment_spec.js
@@ -14,6 +14,7 @@ const DEFAULT_OPTS = {
   provide: {
     projectEnvironmentsPath: '/projects/environments',
     updateEnvironmentPath: '/proejcts/environments/1',
+    protectedEnvironmentSettingsPath: '/projects/1/settings/ci_cd',
   },
   propsData: { environment: { id: '0', name: 'foo', external_url: 'https://foo.example.com' } },
 };
diff --git a/spec/frontend/environments/environment_form_spec.js b/spec/frontend/environments/environment_form_spec.js
index f1af08bcf32..b9b34bee80f 100644
--- a/spec/frontend/environments/environment_form_spec.js
+++ b/spec/frontend/environments/environment_form_spec.js
@@ -10,11 +10,14 @@ const DEFAULT_PROPS = {
   cancelPath: '/cancel',
 };
 
+const PROVIDE = { protectedEnvironmentSettingsPath: '/projects/not_real/settings/ci_cd' };
+
 describe('~/environments/components/form.vue', () => {
   let wrapper;
 
   const createWrapper = (propsData = {}) =>
     mountExtended(EnvironmentForm, {
+      provide: PROVIDE,
       propsData: {
         ...DEFAULT_PROPS,
         ...propsData,
@@ -31,7 +34,7 @@ describe('~/environments/components/form.vue', () => {
     });
 
     it('links to documentation regarding environments', () => {
-      const link = wrapper.findByRole('link', { name: 'More information' });
+      const link = wrapper.findByRole('link', { name: 'More information.' });
       expect(link.attributes('href')).toBe('/help/ci/environments/index.md');
     });
 
@@ -124,6 +127,10 @@ describe('~/environments/components/form.vue', () => {
 
       expect(urlInput.element.value).toBe('');
     });
+
+    it('does not show protected environment documentation', () => {
+      expect(wrapper.findByRole('link', { name: 'Protected environments' }).exists()).toBe(false);
+    });
   });
 
   describe('when an existing environment is being edited', () => {
diff --git a/spec/frontend/environments/new_environment_spec.js b/spec/frontend/environments/new_environment_spec.js
index 6dd4eea7437..5dd77759391 100644
--- a/spec/frontend/environments/new_environment_spec.js
+++ b/spec/frontend/environments/new_environment_spec.js
@@ -11,7 +11,10 @@ jest.mock('~/lib/utils/url_utility');
 jest.mock('~/flash');
 
 const DEFAULT_OPTS = {
-  provide: { projectEnvironmentsPath: '/projects/environments' },
+  provide: {
+    projectEnvironmentsPath: '/projects/environments',
+    protectedEnvironmentSettingsPath: '/projects/not_real/settings/ci_cd',
+  },
 };
 
 describe('~/environments/components/new.vue', () => {
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);
+  });
+});