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

Send event for Commit Changes click during pipeline nudge 3

See merge request gitlab-org/gitlab!26109

'

+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',
+      });
+    });
   });
 });