[MWPW-164088] - UT for mobile GNAV redesign (adobecom#3359)

* UT for mobile GNAV redesign * lint fix * lint fix * lint fix * lint fix * Added More UT's
nishantka · Dec 13, 2024 · 370d71f · 370d71f
1 parent e1a3738
commit 370d71f
Show file tree

Hide file tree

Showing 17 changed files with 2,034 additions and 49 deletions.
diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js
@@ -1052,23 +1052,25 @@ class Gnav {
           decorateLocalNavItems(item, template);
         }
 
-        const popup = template.querySelector('.feds-popup');
-        let originalContent = popup.innerHTML;
+        if (this.newMobileNav) {
+          const popup = template.querySelector('.feds-popup');
+          let originalContent = popup.innerHTML;
 
-        if (!isDesktop.matches && this.newMobileNav && popup) {
-          originalContent = await transformTemplateToMobile(popup, item, this.isLocalNav());
-          popup.querySelector('.close-icon')?.addEventListener('click', this.toggleMenuMobile);
-        }
-        isDesktop.addEventListener('change', async () => {
-          if (isDesktop.matches) {
-            popup.innerHTML = originalContent;
-            this.block.classList.remove('new-nav');
-          } else {
+          if (!isDesktop.matches && this.newMobileNav && popup) {
             originalContent = await transformTemplateToMobile(popup, item, this.isLocalNav());
             popup.querySelector('.close-icon')?.addEventListener('click', this.toggleMenuMobile);
-            this.block.classList.add('new-nav');
           }
-        });
+          isDesktop.addEventListener('change', async () => {
+            if (isDesktop.matches) {
+              popup.innerHTML = originalContent;
+              this.block.classList.remove('new-nav');
+            } else {
+              originalContent = await transformTemplateToMobile(popup, item, this.isLocalNav());
+              popup.querySelector('.close-icon')?.addEventListener('click', this.toggleMenuMobile);
+              this.block.classList.add('new-nav');
+            }
+          });
+        }
       }, 'Decorate dropdown failed', 'errorType=info,module=gnav');
 
       template.addEventListener('click', decorateDropdown);

diff --git a/libs/blocks/global-navigation/utilities/keyboard/index.js b/libs/blocks/global-navigation/utilities/keyboard/index.js
@@ -1,7 +1,7 @@
 /* eslint-disable class-methods-use-this */
 import { getNextVisibleItemPosition, getPreviousVisibleItemPosition, selectors } from './utils.js';
 import MainNav from './mainNav.js';
-import { closeAllDropdowns, lanaLog, logErrorFor, loadBlock } from '../utilities.js';
+import { closeAllDropdowns, lanaLog, logErrorFor } from '../utilities.js';
 
 const cycleOnOpenSearch = ({ e, isDesktop }) => {
   const withoutBreadcrumbs = [
@@ -87,12 +87,18 @@ class KeyboardNavigation {
   }
 
   loadLnavNavigation = async () => {
-    this.localNav = this.localNav || new Promise((resolve) => {
-      loadBlock('./keyboard/localNav.js').then((LnavNavigation) => {
-        const instance = new LnavNavigation();
-        resolve(instance);
-      });
-    });
+    if (!this.localNav) {
+      this.localNav = (async () => {
+        try {
+          const { default: LnavNavigation } = await import('./localNav.js');
+          return new LnavNavigation();
+        } catch (e) {
+          lanaLog({ message: 'Keyboard Navigation failed to load for LNAV', e, tags: 'errorType=info,module=gnav-keyboard' });
+          return null;
+        }
+      })();
+    }
+    return this.localNav;
   };
 
   addEventListeners = () => {

diff --git a/libs/blocks/global-navigation/utilities/utilities.js b/libs/blocks/global-navigation/utilities/utilities.js
@@ -419,7 +419,7 @@ export const transformTemplateToMobile = async (popup, item, localnav = false) =
         {{main-menu}}
       </span>
   `;
-  const brand = document.querySelector('.feds-brand').outerHTML;
+  const brand = document.querySelector('.feds-brand')?.outerHTML;
   const breadCrumbs = document.querySelector('.feds-breadcrumbs')?.outerHTML;
   popup.innerHTML = `
     <div class="top-bar">

diff --git a/test/blocks/global-navigation/global-navigation.test.js b/test/blocks/global-navigation/global-navigation.test.js
@@ -11,6 +11,7 @@ import {
   unavLocalesTestData,
   analyticsTestData,
   unavVersion,
+  addMetaDataV2,
 } from './test-utilities.js';
 import { setConfig, getLocale } from '../../../libs/utils/utils.js';
 import initNav, { getUniversalNavLocale, osMap } from '../../../libs/blocks/global-navigation/global-navigation.js';
@@ -20,6 +21,7 @@ import longNav from './mocks/global-navigation-long.plain.js';
 import darkNav from './mocks/dark-global-navigation.plain.js';
 import navigationWithCustomLinks from './mocks/navigation-with-custom-links.plain.js';
 import globalNavigationMock from './mocks/global-navigation.plain.js';
+import gnavWithlocalNav from './mocks/gnav-with-localnav.plain.js';
 import noDropdownNav from './mocks/global-navigation-no-dropdown.plain.js';
 import { getConfig } from '../../../tools/send-to-caas/send-utils.js';
 
@@ -292,8 +294,8 @@ describe('global navigation', () => {
 
   describe('Viewport changes', () => {
     it('should render desktop -> small desktop -> mobile', async () => {
+      document.head.appendChild(addMetaDataV2('false'));
       const nav = await createFullGlobalNavigation();
-
       expect(nav).to.exist;
       expect(isElementVisible(document.querySelector(selectors.globalNav))).to.equal(true);
       expect(isElementVisible(document.querySelector(selectors.search))).to.equal(true);
@@ -322,7 +324,6 @@ describe('global navigation', () => {
 
       await setViewport(viewports.mobile);
       isDesktop.dispatchEvent(new Event('change'));
-
       expect(isElementVisible(document.querySelector(selectors.globalNav))).to.equal(true);
       expect(isElementVisible(document.querySelector(selectors.search))).to.equal(false);
       expect(isElementVisible(document.querySelector(selectors.profile))).to.equal(true);
@@ -678,4 +679,76 @@ describe('global navigation', () => {
       ).to.equal(customLinks.split(',').length);
     });
   });
+
+  describe('local nav scenarios', () => {
+    let clock;
+
+    beforeEach(async () => {
+      clock = sinon.useFakeTimers({
+        toFake: ['setTimeout'],
+        shouldAdvanceTime: true,
+      });
+    });
+
+    afterEach(() => {
+      clock.restore();
+    });
+
+    it('should load Local Nav', async () => {
+      await createFullGlobalNavigation({ globalNavigation: gnavWithlocalNav });
+      const localNav = document.querySelector(selectors.localNav);
+      expect(!!localNav).to.be.true;
+    });
+
+    it('should open local nav on click of localnav title', async () => {
+      await createFullGlobalNavigation({ globalNavigation: gnavWithlocalNav });
+      const localNavTitle = document.querySelector(selectors.localNavTitle);
+      localNavTitle.click();
+      const localNav = document.querySelector(selectors.localNav);
+      expect(localNav.classList.contains('active')).to.be.true;
+    });
+
+    it('should remove is-sticky class to localnav on scroll less than localnav placement', async () => {
+      await createFullGlobalNavigation({ globalNavigation: gnavWithlocalNav });
+      const localNav = document.querySelector(selectors.localNav);
+      sinon.stub(localNav, 'getBoundingClientRect').returns({ top: 20 });
+      window.dispatchEvent(new Event('scroll'));
+      const localNavAfterScroll = document.querySelector(selectors.localNav);
+      expect(localNavAfterScroll.classList.contains('is-sticky')).to.be.false;
+    });
+
+    it('should add is-sticky class to localnav on scroll greater than localnav placement', async () => {
+      await createFullGlobalNavigation({ globalNavigation: gnavWithlocalNav });
+      const localNav = document.querySelector(selectors.localNav);
+      sinon.stub(localNav, 'getBoundingClientRect').returns({ top: 0 });
+      window.dispatchEvent(new Event('scroll'));
+      const localNavAfterScroll = document.querySelector(selectors.localNav);
+      expect(localNavAfterScroll.classList.contains('is-sticky')).to.be.true;
+    });
+
+    it('should open both screen if localnav is present but shows only level 2 screen', async () => {
+      await createFullGlobalNavigation({ globalNavigation: gnavWithlocalNav, viewport: 'mobile' });
+      const toggle = document.querySelector(selectors.mainNavToggle);
+      toggle.click();
+      await clock.runAllAsync();
+      const fedsNavWrapper = document.querySelector(selectors.navWrapper);
+      const largemenu = document.querySelector(selectors.largeMenu);
+      expect(fedsNavWrapper.classList.contains('feds-nav-wrapper--expanded')).to.be.true;
+      expect(largemenu.classList.contains('feds-dropdown--active')).to.be.true;
+    });
+
+    it('should expand nested dropdowm if click on headline', async () => {
+      await createFullGlobalNavigation({ globalNavigation: gnavWithlocalNav, viewport: 'mobile' });
+      const localNavTitle = document.querySelector(selectors.localNavTitle);
+      localNavTitle.click();
+      localNavTitle.focus();
+      await sendKeys({ press: 'Tab' });
+      await sendKeys({ press: 'Tab' });
+      document.activeElement.click();
+      expect(document.activeElement.parentElement.classList.contains('feds-dropdown--active')).to.be.true;
+      const headline = document.activeElement.parentElement.querySelector('.feds-menu-headline');
+      headline.click();
+      expect(headline.parentElement.classList.contains('feds-dropdown--active')).to.be.true;
+    });
+  });
 });
diff --git a/test/blocks/global-navigation/gnav-cross-cloud.test.js b/test/blocks/global-navigation/gnav-cross-cloud.test.js
@@ -5,6 +5,7 @@ import {
   selectors,
   isElementVisible,
   unavVersion,
+  addMetaDataV2,
 } from './test-utilities.js';
 import globalNavigationCrossCloud from './mocks/global-navigation-cross-cloud.plain.js';
 
@@ -18,6 +19,7 @@ describe('Cross Cloud Menu', () => {
 
   describe('desktop', () => {
     it('should render the Cross Cloud Menu', async () => {
+      document.head.appendChild(addMetaDataV2('false'));
       await createFullGlobalNavigation({ globalNavigation: globalNavigationCrossCloud });
       const crossCloudMenu = document.querySelector(selectors.crossCloudMenuWrapper);
 

diff --git a/test/blocks/global-navigation/gnav-main-nav-popup.test.js b/test/blocks/global-navigation/gnav-main-nav-popup.test.js
@@ -6,6 +6,7 @@ import {
   selectors,
   isElementVisible,
   unavVersion,
+  addMetaDataV2,
 } from './test-utilities.js';
 import { toFragment } from '../../../libs/blocks/global-navigation/utilities/utilities.js';
 import globalNavigationMock from './mocks/global-navigation.plain.js';
@@ -139,6 +140,7 @@ describe('main nav popups', () => {
     });
 
     it('should open a popup and headline on click', async () => {
+      document.head.appendChild(addMetaDataV2('false'));
       await createFullGlobalNavigation({ viewport: 'mobile' });
 
       document.querySelector(selectors.mainNavToggle).click();