Track user dropdown click

- when buy ci minutes shows as per spec

app/assets/javascripts/header.js

@@ -5,6 +5,7 @@ import { highCountTrim } from '~/lib/utils/text_utility';
 import SetStatusModalTrigger from './set_status_modal/set_status_modal_trigger.vue';
 import SetStatusModalWrapper from './set_status_modal/set_status_modal_wrapper.vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import Tracking from '~/tracking';
 
 /**
  * Updates todo counter when todos are toggled.
@@ -73,6 +74,24 @@ function initStatusTriggers() {
   }
 }
 
+export function initNavUserDropdownTracking() {
+  const el = document.querySelector('.js-nav-user-dropdown');
+  const buyEl = document.querySelector('.js-buy-ci-minutes-link');
+
+  if (el && buyEl) {
+    const { trackLabel, trackProperty } = buyEl.dataset;
+    const trackEvent = 'show_buy_ci_minutes';
+
+    $(el).on('shown.bs.dropdown', () => {
+      Tracking.event(undefined, trackEvent, {
+        label: trackLabel,
+        property: trackProperty,
+      });
+    });
+  }
+}
+
 document.addEventListener('DOMContentLoaded', () => {
   requestIdleCallback(initStatusTriggers);
+  initNavUserDropdownTracking();
 });

app/views/layouts/header/_default.html.haml

@@ -65,7 +65,7 @@
             .dropdown-menu.dropdown-menu-right
               = render 'layouts/header/help_dropdown'
           - if header_link?(:user_dropdown)
-            %li.nav-item.header-user.dropdown{ data: { track_label: "profile_dropdown", track_event: "click_dropdown", track_value: "", qa_selector: 'user_menu' }, class: ('mr-0' if has_impersonation_link) }
+            %li.nav-item.header-user.js-nav-user-dropdown.dropdown{ data: { track_label: "profile_dropdown", track_event: "click_dropdown", track_value: "", qa_selector: 'user_menu' }, class: ('mr-0' if has_impersonation_link) }
               = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown" } do
                 = image_tag avatar_icon_for_user(current_user, 23), width: 23, height: 23, class: "header-user-avatar qa-user-avatar"
                 = render_if_exists 'layouts/header/user_notification_dot', project: project, namespace: group

ee/app/views/layouts/header/_buy_ci_minutes.html.haml

@@ -2,7 +2,7 @@
 
 %li
   = link_to profile_pipeline_quota_path,
-    class: 'ci-minutes-emoji',
+    class: 'ci-minutes-emoji js-buy-ci-minutes-link',
     data: { 'track-event': 'click_buy_ci_minutes', 'track-label': current_user.namespace.actual_plan_name, 'track-property': 'user_dropdown' } do
     = s_("CurrentUser|Buy CI minutes")
     = emoji_icon('clock9', 'aria-hidden': true)

spec/frontend/header_spec.js

 import $ from 'jquery';
-import initTodoToggle from '~/header';
+import initTodoToggle, { initNavUserDropdownTracking } from '~/header';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 
 describe('Header', () => {
-  const todosPendingCount = '.todos-count';
-  const fixtureTemplate = 'issues/open-issue.html';
+  describe('Todos notification', () => {
+    const todosPendingCount = '.todos-count';
+    const fixtureTemplate = 'issues/open-issue.html';
 
-  function isTodosCountHidden() {
-    return $(todosPendingCount).hasClass('hidden');
-  }
+    function isTodosCountHidden() {
+      return $(todosPendingCount).hasClass('hidden');
+    }
 
-  function triggerToggle(newCount) {
-    $(document).trigger('todo:toggle', newCount);
-  }
+    function triggerToggle(newCount) {
+      $(document).trigger('todo:toggle', newCount);
+    }
 
-  preloadFixtures(fixtureTemplate);
-  beforeEach(() => {
-    initTodoToggle();
-    loadFixtures(fixtureTemplate);
-  });
+    preloadFixtures(fixtureTemplate);
+    beforeEach(() => {
+      initTodoToggle();
+      loadFixtures(fixtureTemplate);
+    });
 
-  it('should update todos-count after receiving the todo:toggle event', () => {
-    triggerToggle(5);
+    it('should update todos-count after receiving the todo:toggle event', () => {
+      triggerToggle(5);
 
-    expect($(todosPendingCount).text()).toEqual('5');
-  });
+      expect($(todosPendingCount).text()).toEqual('5');
+    });
 
-  it('should hide todos-count when it is 0', () => {
-    triggerToggle(0);
+    it('should hide todos-count when it is 0', () => {
+      triggerToggle(0);
 
-    expect(isTodosCountHidden()).toEqual(true);
-  });
+      expect(isTodosCountHidden()).toEqual(true);
+    });
+
+    it('should show todos-count when it is more than 0', () => {
+      triggerToggle(10);
+
+      expect(isTodosCountHidden()).toEqual(false);
+    });
+
+    describe('when todos-count is 1000', () => {
+      beforeEach(() => {
+        triggerToggle(1000);
+      });
 
-  it('should show todos-count when it is more than 0', () => {
-    triggerToggle(10);
+      it('should show todos-count', () => {
+        expect(isTodosCountHidden()).toEqual(false);
+      });
 
-    expect(isTodosCountHidden()).toEqual(false);
+      it('should show 99+ for todos-count', () => {
+        expect($(todosPendingCount).text()).toEqual('99+');
+      });
+    });
   });
 
-  describe('when todos-count is 1000', () => {
+  describe('Track user dropdown open', () => {
+    let trackingSpy;
+
     beforeEach(() => {
-      triggerToggle(1000);
+      setFixtures(`
+      <li class="js-nav-user-dropdown">
+        <a class="js-buy-ci-minutes-link" data-track-event="click_buy_ci_minutes" data-track-label="free" data-track-property="user_dropdown">Buy CI minutes
+        </a>
+      </li>`);
+
+      trackingSpy = mockTracking('_category_', $('.js-nav-user-dropdown').element, jest.spyOn);
+      document.body.dataset.page = 'some:page';
+
+      initNavUserDropdownTracking();
     });
 
-    it('should show todos-count', () => {
-      expect(isTodosCountHidden()).toEqual(false);
+    afterEach(() => {
+      unmockTracking();
     });
 
-    it('should show 99+ for todos-count', () => {
-      expect($(todosPendingCount).text()).toEqual('99+');
+    it('sends a tracking event when the dropdown is opened and contains Buy CI minutes link', () => {
+      $('.js-nav-user-dropdown').trigger('shown.bs.dropdown');
+
+      expect(trackingSpy).toHaveBeenCalledTimes(1);
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'show_buy_ci_minutes', {
+        label: 'free',
+        property: 'user_dropdown',
+      });
     });
   });
 });