Add latest changes from gitlab-org/gitlab@master

1 files changed, 65 insertions, 31 deletions

diff --git a/spec/frontend/header_spec.js b/spec/frontend/header_spec.js
index 00b5b306d66..0a74799283a 100644
--- a/spec/frontend/header_spec.js
+++ b/spec/frontend/header_spec.js
@@ -1,53 +1,87 @@
 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',
+      });
     });
   });
 });