Send event for Commit btn click on pipeline nudge3

There are two clicks tracked on this step of the nudge. The
other click is on the Vue component. This click is outside
of the popover component.

'

+import { shallowMount } from '@vue/test-utils';
+import Popover from '~/blob/suggest_gitlab_ci_yml/components/popover.vue';
+import { mockTracking, unmockTracking, triggerEvent } from 'helpers/tracking_helper';
+import * as utils from '~/lib/utils/common_utils';
+import { GlButton } from '@gitlab/ui';
+
+jest.mock('~/lib/utils/common_utils', () => ({
+  ...jest.requireActual('~/lib/utils/common_utils'),
+  scrollToElement: jest.fn(),
+}));
+
+const target = 'gitlab-ci-yml-selector';
+const dismissKey = '99';
+const defaultTrackLabel = 'suggest_gitlab_ci_yml';
+const commitTrackLabel = 'suggest_commit_first_project_gitlab_ci_yml';
+
+const dismissCookie = 'suggest_gitlab_ci_yml_99';
+const humanAccess = 'owner';
+
+describe('Suggest gitlab-ci.yml Popover', () => {
+  let wrapper;
+
+  function createWrapper(trackLabel) {
+    wrapper = shallowMount(Popover, {
+      propsData: {
+        target,
+        trackLabel,
+        dismissKey,
+        humanAccess,
+      },
+      stubs: {
+        GlButton,
+        GlIcon
+      }
+      slots: {
+        title: '<gl-button><gl-icon /> </gl-button>',
+      }
+    });
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when no dismiss cookie is set', () => {
+    beforeEach(() => {
+      createWrapper(defaultTrackLabel);
+    });
+
+    it('sets popoverDismissed to false', () => {
+      expect(wrapper.vm.popoverDismissed).toEqual(false);
+    });
+  });
+
+  describe('when the dismiss cookie is set', () => {
+    beforeEach(() => {
+      utils.setCookie(dismissCookie, true);
+
+      createWrapper(defaultTrackLabel);
+    });
+
+    it('sets popoverDismissed to true', () => {
+      expect(wrapper.vm.popoverDismissed).toEqual(true);
+    });
+
+    afterEach(() => {
+      utils.removeCookie(dismissCookie);
+    });
+  });
+
+  describe('tracking', () => {
+    let trackingSpy;
+
+    beforeEach(() => {
+      createWrapper(commitTrackLabel);
+      trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
+    });
+
+    afterEach(() => {
+      unmockTracking();
+    });
+
+    it('sends a tracking event with the expected properties for the popover being viewed', () => {
+      const expectedCategory = undefined;
+      const expectedAction = undefined;
+      const expectedLabel = 'suggest_commit_first_project_gitlab_ci_yml';
+      const expectedProperty = 'owner';
+
+      document.body.dataset.page = 'projects:blob:new';
+
+      wrapper.vm.trackOnShow();
+
+      expect(trackingSpy).toHaveBeenCalledWith(expectedCategory, expectedAction, {
+        label: expectedLabel,
+        property: expectedProperty,
+      });
+    });
+
+    it('sends a tracking event when the popover is dismissed', () => {
+      const expectedLabel = commitTrackLabel;
+      const expectedProperty = 'owner';
+      const expectedValue = '10';
+      const dismissButton = wrapper.find(GlButton);
+
+console.log(wrapper.html());
+
+      triggerEvent(dismissButton.element);
+
+      expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_button', {
+        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', () => {
+    it('calls scrollToElement so that the Confirm button and popover will be in sight', () => {
+      const scrollToElementSpy = jest.spyOn(utils, 'scrollToElement');
+
+      createWrapper(commitTrackLabel);
+
+      expect(scrollToElementSpy).toHaveBeenCalled();
+    });
+  });
+});

app/assets/javascripts/blob_edit/blob_bundle.js

@@ -6,6 +6,7 @@ import EditBlob from './edit_blob';
 import BlobFileDropzone from '../blob/blob_file_dropzone';
 import initPopover from '~/blob/suggest_gitlab_ci_yml';
 import { setCookie } from '~/lib/utils/common_utils';
+import Tracking from '~/tracking';
 
 export default () => {
   const editBlobForm = $('.js-edit-blob-form');
@@ -66,10 +67,19 @@ export default () => {
     initPopover(suggestEl);
 
     if (commitButton) {
-      const commitCookieName = `suggest_gitlab_ci_yml_commit_${suggestEl.dataset.dismissKey}`;
+      const { dismissKey, humanAccess } = suggestEl.dataset;
+      const commitCookieName = `suggest_gitlab_ci_yml_commit_${dismissKey}`;
+      const commitTrackLabel = 'suggest_gitlab_ci_yml_commit_changes';
+      const commitTrackValue = '20';
 
       commitButton.addEventListener('click', () => {
         setCookie(commitCookieName, true);
+
+        Tracking.event(undefined, 'click_button', {
+          label: commitTrackLabel,
+          property: humanAccess,
+          value: commitTrackValue,
+        });
       });
     }
   }

spec/frontend/blob_edit/blob_bundle_spec.js

 import $ from 'jquery';
 import blobBundle from '~/blob_edit/blob_bundle';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 
 jest.mock('~/blob_edit/edit_blob');
 
 describe('BlobBundle', () => {
-  beforeEach(() => {
-    setFixtures(`
+  describe('No Suggest Popover', () => {
+    beforeEach(() => {
+      setFixtures(`
       <div class="js-edit-blob-form" data-blob-filename="blah">
         <button class="js-commit-button"></button>
         <a class="btn btn-cancel" href="#"></a>
       </div>`);
-    blobBundle();
-  });
 
-  it('sets the window beforeunload listener to a function returning a string', () => {
-    expect(window.onbeforeunload()).toBe('');
-  });
+      blobBundle();
+    });
+
+    it('sets the window beforeunload listener to a function returning a string', () => {
+      expect(window.onbeforeunload()).toBe('');
+    });
 
-  it('removes beforeunload listener if commit button is clicked', () => {
-    $('.js-commit-button').click();
+    it('removes beforeunload listener if commit button is clicked', () => {
+      $('.js-commit-button').click();
 
-    expect(window.onbeforeunload).toBeNull();
+      expect(window.onbeforeunload).toBeNull();
+    });
+
+    it('removes beforeunload listener when cancel link is clicked', () => {
+      $('.btn.btn-cancel').click();
+
+      expect(window.onbeforeunload).toBeNull();
+    });
   });
 
-  it('removes beforeunload listener when cancel link is clicked', () => {
-    $('.btn.btn-cancel').click();
+  describe('Suggest Popover', () => {
+    let trackingSpy;
+
+    beforeEach(() => {
+      setFixtures(`
+      <div class="js-edit-blob-form" data-blob-filename="blah" id="target">
+        <div class="js-suggest-gitlab-ci-yml"
+          data-target="#target"
+          data-track-label="suggest_gitlab_ci_yml"
+          data-dismiss-key="1"
+          data-human-access="owner">
+          <button id='commit-changes' class="js-commit-button"></button>
+          <a class="btn btn-cancel" href="#"></a>
+        </div>
+      </div>`);
+
+      trackingSpy = mockTracking('_category_', $('#commit-changes').element, jest.spyOn);
+      document.body.dataset.page = 'projects:blob:new';
+
+      blobBundle();
+    });
+
+    afterEach(() => {
+      unmockTracking();
+    });
+
+    it('sends a tracking event when the commit button is clicked', () => {
+      $('#commit-changes').click();
 
-    expect(window.onbeforeunload).toBeNull();
+      expect(trackingSpy).toHaveBeenCalledTimes(1);
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, undefined, {
+        label: 'suggest_gitlab_ci_yml',
+        property: 'owner',
+      });
+    });
   });
 });