MWPW-124277 - Link Localization not working for Gnav Menu

- call decorateLinks for gnav menu - added tests to verify link localization in menu Resolves: MWPW-124277
adobecom · Jan 19, 2023 · d4ecd57 · d4ecd57
1 parent 39521a9
commit d4ecd57
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 3 deletions.
diff --git a/libs/blocks/gnav/gnav.js b/libs/blocks/gnav/gnav.js
@@ -1,5 +1,6 @@
 import {
   createTag,
+  decorateLinks,
   decorateSVG,
   getConfig,
   getMetadata,
@@ -286,6 +287,7 @@ class Gnav {
       container.append(...Array.from(menu.children));
       menu.append(container);
     }
+    decorateLinks(menu);
     this.decorateLinkGroups(menu);
     this.decorateAnalytics(menu);
     navLink.addEventListener('focus', () => {

diff --git a/libs/utils/utils.js b/libs/utils/utils.js
@@ -385,7 +385,7 @@ export function decorateAutoBlock(a) {
   });
 }
 
-function decorateLinks(el) {
+export function decorateLinks(el) {
   const anchors = el.getElementsByTagName('a');
   return [...anchors].reduce((rdx, a) => {
     a.href = localizeLink(a.href);

diff --git a/test/blocks/gnav/gnav.test.js b/test/blocks/gnav/gnav.test.js
@@ -6,8 +6,12 @@ import { setConfig } from '../../../libs/utils/utils.js';
 
 window.lana = { log: stub() };
 
-document.head.innerHTML = await readFile({ path: './mocks/head.html' });
-document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+async function loadDefaultHtml() {
+  document.head.innerHTML = await readFile({ path: './mocks/head.html' });
+  document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+}
+
+await loadDefaultHtml();
 
 const mod = await import('../../../libs/blocks/gnav/gnav.js');
 let gnav;
@@ -131,3 +135,40 @@ describe('Gnav', () => {
     document.head.innerHTML = await readFile({ path: './mocks/head.html' });
   });
 });
+
+describe('Localized Gnav', () => {
+
+  before( async () => {
+    // Load Localized Gnav
+    await loadDefaultHtml();
+    document.head.getElementsByTagName('meta')[0].setAttribute('content', '/test/blocks/gnav/mocks/simple-gnav');
+    const localizedConfig = { locales: { '': { ietf: 'en-US', tk: 'hah7vzn.css' }, fi: { ietf: 'fi-FI', tk: 'aaz7dvd.css' }, } };
+    localizedConfig.pathname = '/fi/gnav';
+    localizedConfig.productionDomain = 'milo.adobe.com';
+    setConfig(localizedConfig);
+    gnav = await mod.default(document.querySelector('header'));
+  });
+
+  after (async () => {
+    // reset to regular Gnav
+    setConfig(config);
+    await loadDefaultHtml();
+    gnav = await mod.default(document.querySelector('header'));
+  })
+
+  it('Test Gnav Localized Links', async () => {
+    const links = document.getElementById('localized-links').getElementsByTagName('a');
+    links.forEach((anchor) => {
+      expect(anchor.href.startsWith('https://milo.adobe.com/fi/'), "Links should be localized").true;
+    });
+  });
+
+  it('Test Gnav DNT Links', async () => {
+    const dntLinks = document.getElementById('dnt-links').getElementsByTagName('a');
+    dntLinks.forEach((anchor) => {
+      const dntLink = anchor.href;
+      expect(dntLink.startsWith('https://milo.adobe.com/fi/'), "Links should not be localized").false;
+      expect(dntLink.endsWith('#_dnt'), "#_dnt should be stripped").false;
+    });
+  });
+});
diff --git a/test/blocks/gnav/mocks/simple-gnav.plain.html b/test/blocks/gnav/mocks/simple-gnav.plain.html
@@ -0,0 +1,41 @@
+<html>
+<head></head>
+<body>
+<div>
+  <div class="gnav-brand--logo-">
+    <div>
+      <div>
+        <h2 id="helix-global-nav">
+          <a href="/">Helix Global Nav</a>
+        </h2>
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <h2 id="localized-links-menu">
+    <a href="https://business.adobe.com">Localized Links</a>
+  </h2>
+  <ul id="localized-links">
+    <li><a href="https://milo.adobe.com/about/">About Milo</a></li>
+    <li><a href="https://milo.adobe.com/about/index.html">About Milo Index</a></li>
+    <li><a href="https://milo.adobe.com/docs/">Milo Docs</a></li>
+  </ul>
+</div>
+<div>
+  <h2 id="dnt-menu">
+    <a href="https://business.adobe.com">Dnt Links</a>
+  </h2>
+  <ul id="dnt-links">
+    <li><a href="https://milo.adobe.com/docs#_dnt">Milo Docs English</a></li>
+  </ul>
+</div>
+<div class="adobe-logo">
+  <div>
+    <div>
+      <a href="https://www.adobe.com">Adobe</a>
+    </div>
+  </div>
+</div>
+</body>
+</html>