1 files changed, 58 insertions, 11 deletions

diff --git a/spec/frontend/ci/pipelines_page/components/pipeline_operations_spec.js b/spec/frontend/ci/pipelines_page/components/pipeline_operations_spec.js
index d2eab64b317..6205a37e291 100644
--- a/spec/frontend/ci/pipelines_page/components/pipeline_operations_spec.js
+++ b/spec/frontend/ci/pipelines_page/components/pipeline_operations_spec.js
@@ -1,10 +1,13 @@
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import PipelinesManualActions from '~/ci/pipelines_page/components/pipelines_manual_actions.vue';
 import PipelineMultiActions from '~/ci/pipelines_page/components/pipeline_multi_actions.vue';
 import PipelineOperations from '~/ci/pipelines_page/components/pipeline_operations.vue';
-import eventHub from '~/ci/event_hub';
+import PipelineStopModal from '~/ci/pipelines_page/components/pipeline_stop_modal.vue';
+import { TRACKING_CATEGORIES } from '~/ci/constants';
 
 describe('Pipeline operations', () => {
+  let trackingSpy;
   let wrapper;
 
   const defaultProps = {
@@ -36,6 +39,7 @@ describe('Pipeline operations', () => {
   const findMultiActions = () => wrapper.findComponent(PipelineMultiActions);
   const findRetryBtn = () => wrapper.findByTestId('pipelines-retry-button');
   const findCancelBtn = () => wrapper.findByTestId('pipelines-cancel-button');
+  const findPipelineStopModal = () => wrapper.findComponent(PipelineStopModal);
 
   it('should display pipeline manual actions', () => {
     createComponent();
@@ -49,28 +53,71 @@ describe('Pipeline operations', () => {
     expect(findMultiActions().exists()).toBe(true);
   });
 
+  it('does not show the confirmation modal', () => {
+    createComponent();
+
+    expect(findPipelineStopModal().props().showConfirmationModal).toBe(false);
+  });
+
+  describe('when cancelling a pipeline', () => {
+    beforeEach(async () => {
+      createComponent();
+      await findCancelBtn().vm.$emit('click');
+    });
+
+    it('should show a confirmation modal', () => {
+      expect(findPipelineStopModal().props().showConfirmationModal).toBe(true);
+    });
+
+    it('should emit cancel-pipeline event when confirming', async () => {
+      await findPipelineStopModal().vm.$emit('submit');
+
+      expect(wrapper.emitted('cancel-pipeline')).toEqual([[defaultProps.pipeline]]);
+      expect(findPipelineStopModal().props().showConfirmationModal).toBe(false);
+    });
+
+    it('should hide the modal when closing', async () => {
+      await findPipelineStopModal().vm.$emit('close-modal');
+
+      expect(findPipelineStopModal().props().showConfirmationModal).toBe(false);
+    });
+  });
+
   describe('events', () => {
     beforeEach(() => {
       createComponent();
-
-      jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
     });
 
     it('should emit retryPipeline event', () => {
       findRetryBtn().vm.$emit('click');
 
-      expect(eventHub.$emit).toHaveBeenCalledWith(
-        'retryPipeline',
-        defaultProps.pipeline.retry_path,
-      );
+      expect(wrapper.emitted('retry-pipeline')).toEqual([[defaultProps.pipeline]]);
+    });
+  });
+
+  describe('tracking', () => {
+    beforeEach(() => {
+      createComponent();
+      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+    });
+
+    afterEach(() => {
+      unmockTracking();
+    });
+
+    it('tracks retry pipeline button click', () => {
+      findRetryBtn().vm.$emit('click');
+
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_retry_button', {
+        label: TRACKING_CATEGORIES.table,
+      });
     });
 
-    it('should emit openConfirmationModal event', () => {
+    it('tracks cancel pipeline button click', () => {
       findCancelBtn().vm.$emit('click');
 
-      expect(eventHub.$emit).toHaveBeenCalledWith('openConfirmationModal', {
-        pipeline: defaultProps.pipeline,
-        endpoint: defaultProps.pipeline.cancel_path,
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_cancel_button', {
+        label: TRACKING_CATEGORIES.table,
       });
     });
   });