Merge branch 'send-event-for-each-button-clicked-on-nudge-3' into 'master'

Send event for dismiss popover click on nudge 3

Closes gitlab-org/growth/product#300

See merge request gitlab-org/gitlab!26105

app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue

@@ -23,6 +23,8 @@ const popoverStates = {
   },
 };
 export default {
+  dismissTrackValue: 10,
+  clickTrackValue: 'click_button',
   components: {
     GlPopover,
     GlSprintf,
@@ -109,7 +111,16 @@ export default {
     <template #title>
       <span v-html="suggestTitle"></span>
       <span class="ml-auto">
-        <gl-deprecated-button :aria-label="__('Close')" class="btn-blank" @click="onDismiss">
+        <gl-deprecated-button
+          :aria-label="__('Close')"
+          class="btn-blank"
+          name="dismiss"
+          :data-track-property="humanAccess"
+          :data-track-value="$options.dismissTrackValue"
+          :data-track-event="$options.clickTrackValue"
+          :data-track-label="trackLabel"
+          @click="onDismiss"
+        >
           <gl-icon name="close" aria-hidden="true" />
         </gl-deprecated-button>
       </span>

spec/frontend/blob/suggest_gitlab_ci_yml/components/popover_spec.js

 import { shallowMount } from '@vue/test-utils';
 import Popover from '~/blob/suggest_gitlab_ci_yml/components/popover.vue';
-import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
+import { mockTracking, unmockTracking, triggerEvent } from 'helpers/tracking_helper';
 import * as utils from '~/lib/utils/common_utils';
+import { GlDeprecatedButton } from '@gitlab/ui';
 
 jest.mock('~/lib/utils/common_utils', () => ({
   ...jest.requireActual('~/lib/utils/common_utils'),
@@ -27,6 +28,9 @@ describe('Suggest gitlab-ci.yml Popover', () => {
         dismissKey,
         humanAccess,
       },
+      stubs: {
+        'gl-popover': '<div><slot name="title"></slot><slot></slot></div>',
+      },
     });
   }
 
@@ -88,6 +92,22 @@ describe('Suggest gitlab-ci.yml Popover', () => {
         property: expectedProperty,
       });
     });
+
+    it('sends a tracking event when the popover is dismissed', () => {
+      const expectedLabel = commitTrackLabel;
+      const expectedAction = 'click_button';
+      const expectedProperty = 'owner';
+      const expectedValue = '10';
+      const dismissButton = wrapper.find(GlDeprecatedButton);
+
+      triggerEvent(dismissButton.element);
+
+      expect(trackingSpy).toHaveBeenCalledWith('_category_', expectedAction, {
+        label: expectedLabel,
+        property: expectedProperty,
+        value: expectedValue,
+      });
+    });
   });
 
   describe('when the popover is mounted with the trackLabel of the Confirm button popover at the bottom of the page', () => {