1 files changed, 38 insertions, 4 deletions

diff --git a/spec/frontend/ci/pipelines_page/components/pipeline_stop_modal_spec.js b/spec/frontend/ci/pipelines_page/components/pipeline_stop_modal_spec.js
index 4d78a923542..1e276840c07 100644
--- a/spec/frontend/ci/pipelines_page/components/pipeline_stop_modal_spec.js
+++ b/spec/frontend/ci/pipelines_page/components/pipeline_stop_modal_spec.js
@@ -1,15 +1,17 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlSprintf } from '@gitlab/ui';
+import { GlModal, GlSprintf } from '@gitlab/ui';
 import { mockPipelineHeader } from 'jest/ci/pipeline_details/mock_data';
 import PipelineStopModal from '~/ci/pipelines_page/components/pipeline_stop_modal.vue';
 
 describe('PipelineStopModal', () => {
   let wrapper;
 
-  const createComponent = () => {
+  const createComponent = ({ props = {} } = {}) => {
     wrapper = shallowMount(PipelineStopModal, {
       propsData: {
         pipeline: mockPipelineHeader,
+        showConfirmationModal: false,
+        ...props,
       },
       stubs: {
         GlSprintf,
@@ -17,11 +19,43 @@ describe('PipelineStopModal', () => {
     });
   };
 
+  const findModal = () => wrapper.findComponent(GlModal);
+
   beforeEach(() => {
     createComponent();
   });
 
-  it('should render "stop pipeline" warning', () => {
-    expect(wrapper.text()).toMatch(`You’re about to stop pipeline #${mockPipelineHeader.id}.`);
+  describe('when `showConfirmationModal` is false', () => {
+    it('passes the visiblity value to the modal', () => {
+      expect(findModal().props().visible).toBe(false);
+    });
+  });
+
+  describe('when `showConfirmationModal` is true', () => {
+    beforeEach(() => {
+      createComponent({ props: { showConfirmationModal: true } });
+    });
+
+    it('passes the visiblity value to the modal', () => {
+      expect(findModal().props().visible).toBe(true);
+    });
+
+    it('renders "stop pipeline" warning', () => {
+      expect(wrapper.text()).toMatch(`You're about to stop pipeline #${mockPipelineHeader.id}.`);
+    });
+  });
+
+  describe('events', () => {
+    beforeEach(() => {
+      createComponent({ props: { showConfirmationModal: true } });
+    });
+
+    it('emits the close-modal event when the visiblity changes', async () => {
+      expect(wrapper.emitted('close-modal')).toBeUndefined();
+
+      await findModal().vm.$emit('change', false);
+
+      expect(wrapper.emitted('close-modal')).toEqual([[]]);
+    });
   });
 });