Add latest changes from gitlab-org/gitlab@master

1 files changed, 160 insertions, 0 deletions

diff --git a/spec/frontend/pages/shared/nav/sidebar_tracking_spec.js b/spec/frontend/pages/shared/nav/sidebar_tracking_spec.js
new file mode 100644
index 00000000000..2c8eb8e459f
--- /dev/null
+++ b/spec/frontend/pages/shared/nav/sidebar_tracking_spec.js
@@ -0,0 +1,160 @@
+import { setHTMLFixture } from 'helpers/fixtures';
+import { initSidebarTracking } from '~/pages/shared/nav/sidebar_tracking';
+
+describe('~/pages/shared/nav/sidebar_tracking.js', () => {
+  beforeEach(() => {
+    setHTMLFixture(`
+      <aside class="nav-sidebar">
+        <div class="nav-sidebar-inner-scroll">
+          <ul class="sidebar-top-level-items">
+            <li data-track-label="project_information_menu" class="home">
+              <a aria-label="Project information" class="shortcuts-project-information has-sub-items" href="">
+                  <span class="nav-icon-container">
+                    <svg class="s16" data-testid="project-icon">
+                        <use xlink:href="/assets/icons-1b2dadc4c3d49797908ba67b8f10da5d63dd15d859bde28d66fb60bbb97a4dd5.svg#project"></use>
+                    </svg>
+                  </span>
+                  <span class="nav-item-name">Project information</span>
+              </a>
+              <ul class="sidebar-sub-level-items">
+                <li class="fly-out-top-item">
+                  <a aria-label="Project information" href="#">
+                    <strong class="fly-out-top-item-name">Project information</strong>
+                  </a>
+                </li>
+                <li class="divider fly-out-top-item"></li>
+                <li data-track-label="activity" class="">
+                  <a aria-label="Activity" class="shortcuts-project-activity" href=#">
+                    <span>Activity</span>
+                  </a>
+                </li>
+                <li data-track-label="labels" class="">
+                  <a aria-label="Labels" href="#">
+                    <span>Labels</span>
+                  </a>
+                </li>
+                <li data-track-label="members" class="">
+                  <a aria-label="Members" href="#">
+                    <span>Members</span>
+                  </a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </aside>
+    `);
+
+    initSidebarTracking();
+  });
+
+  describe('sidebar is not collapsed', () => {
+    describe('menu is not expanded', () => {
+      it('sets the proper data tracking attributes when clicking on menu', () => {
+        const menu = document.querySelector('li[data-track-label="project_information_menu"]');
+        const menuLink = menu.querySelector('a');
+
+        menu.classList.add('is-over', 'is-showing-fly-out');
+        menuLink.click();
+
+        expect(menu.dataset).toMatchObject({
+          trackAction: 'click_menu',
+          trackExtra: JSON.stringify({
+            sidebar_display: 'Expanded',
+            menu_display: 'Fly out',
+          }),
+        });
+      });
+
+      it('sets the proper data tracking attributes when clicking on submenu', () => {
+        const menu = document.querySelector('li[data-track-label="activity"]');
+        const menuLink = menu.querySelector('a');
+        const submenuList = document.querySelector('ul.sidebar-sub-level-items');
+
+        submenuList.classList.add('fly-out-list');
+        menuLink.click();
+
+        expect(menu.dataset).toMatchObject({
+          trackAction: 'click_menu_item',
+          trackExtra: JSON.stringify({
+            sidebar_display: 'Expanded',
+            menu_display: 'Fly out',
+          }),
+        });
+      });
+    });
+
+    describe('menu is expanded', () => {
+      it('sets the proper data tracking attributes when clicking on menu', () => {
+        const menu = document.querySelector('li[data-track-label="project_information_menu"]');
+        const menuLink = menu.querySelector('a');
+
+        menu.classList.add('active');
+        menuLink.click();
+
+        expect(menu.dataset).toMatchObject({
+          trackAction: 'click_menu',
+          trackExtra: JSON.stringify({
+            sidebar_display: 'Expanded',
+            menu_display: 'Expanded',
+          }),
+        });
+      });
+
+      it('sets the proper data tracking attributes when clicking on submenu', () => {
+        const menu = document.querySelector('li[data-track-label="activity"]');
+        const menuLink = menu.querySelector('a');
+
+        menu.classList.add('active');
+        menuLink.click();
+
+        expect(menu.dataset).toMatchObject({
+          trackAction: 'click_menu_item',
+          trackExtra: JSON.stringify({
+            sidebar_display: 'Expanded',
+            menu_display: 'Expanded',
+          }),
+        });
+      });
+    });
+  });
+
+  describe('sidebar is collapsed', () => {
+    beforeEach(() => {
+      document.querySelector('aside.nav-sidebar').classList.add('js-sidebar-collapsed');
+    });
+
+    it('sets the proper data tracking attributes when clicking on menu', () => {
+      const menu = document.querySelector('li[data-track-label="project_information_menu"]');
+      const menuLink = menu.querySelector('a');
+
+      menu.classList.add('is-over', 'is-showing-fly-out');
+      menuLink.click();
+
+      expect(menu.dataset).toMatchObject({
+        trackAction: 'click_menu',
+        trackExtra: JSON.stringify({
+          sidebar_display: 'Collapsed',
+          menu_display: 'Fly out',
+        }),
+      });
+    });
+
+    it('sets the proper data tracking attributes when clicking on submenu', () => {
+      const menu = document.querySelector('li[data-track-label="activity"]');
+      const menuLink = menu.querySelector('a');
+      const submenuList = document.querySelector('ul.sidebar-sub-level-items');
+
+      submenuList.classList.add('fly-out-list');
+      menuLink.click();
+
+      expect(menu.dataset).toMatchObject({
+        trackAction: 'click_menu_item',
+        trackExtra: JSON.stringify({
+          sidebar_display: 'Collapsed',
+          menu_display: 'Fly out',
+        }),
+      });
+    });
+  });
+});