Merge branch 'add-tracking-go-to-pipelines' into 'master'

Add tracking to goto link

Closes gitlab-org/growth/product#301

See merge request gitlab-org/gitlab!28378

app/assets/javascripts/blob/pipeline_tour_success_modal.vue

@@ -21,6 +21,8 @@ export default {
     },
     false,
   ),
+  goToTrackValue: 10,
+  trackEvent: 'click_button',
   components: {
     GlModal,
     GlSprintf,
@@ -43,12 +45,17 @@ export default {
   },
   data() {
     return {
-      tracking: {
-        label: 'congratulate_first_pipeline',
-        property: this.humanAccess,
+      trackLabel: 'congratulate_first_pipeline',
+    };
   },
+  computed: {
+    tracking() {
+      return {
+        label: this.trackLabel,
+        property: this.humanAccess,
       };
     },
+  },
   mounted() {
     this.track();
     this.disableModalFromRenderingAgain();
@@ -89,7 +96,17 @@ export default {
       </template>
     </gl-sprintf>
     <template #modal-footer>
-      <a :href="goToPipelinesPath" class="btn btn-success">{{ __('Go to Pipelines') }}</a>
+      <a
+        ref="goto"
+        :href="goToPipelinesPath"
+        class="btn btn-success"
+        :data-track-property="humanAccess"
+        :data-track-value="$options.goToTrackValue"
+        :data-track-event="$options.trackEvent"
+        :data-track-label="trackLabel"
+      >
+        {{ __('Go to Pipelines') }}
+      </a>
     </template>
   </gl-modal>
 </template>

spec/frontend/blob/pipeline_tour_success_modal_spec.js

@@ -2,7 +2,7 @@ import pipelineTourSuccess from '~/blob/pipeline_tour_success_modal.vue';
 import { shallowMount } from '@vue/test-utils';
 import Cookies from 'js-cookie';
 import { GlSprintf, GlModal } from '@gitlab/ui';
-import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
+import { mockTracking, triggerEvent, unmockTracking } from 'helpers/tracking_helper';
 import modalProps from './pipeline_tour_success_mock_data';
 
 describe('PipelineTourSuccessModal', () => {
@@ -16,6 +16,9 @@ describe('PipelineTourSuccessModal', () => {
     trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
     wrapper = shallowMount(pipelineTourSuccess, {
       propsData: modalProps,
+      stubs: {
+        GlModal,
+      },
     });
 
     cookieSpy = jest.spyOn(Cookies, 'remove');
@@ -41,11 +44,23 @@ describe('PipelineTourSuccessModal', () => {
   });
 
   describe('tracking', () => {
-    it('send event for basic view of popover', () => {
+    it('send event for basic view of modal', () => {
       expect(trackingSpy).toHaveBeenCalledWith(undefined, undefined, {
         label: 'congratulate_first_pipeline',
         property: modalProps.humanAccess,
       });
     });
+
+    it('send an event when go to pipelines is clicked', () => {
+      trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
+      const goToBtn = wrapper.find({ ref: 'goto' });
+      triggerEvent(goToBtn.element);
+
+      expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_button', {
+        label: 'congratulate_first_pipeline',
+        property: modalProps.humanAccess,
+        value: '10',
+      });
+    });
   });
 });