MWPW-145574 - Dynamic Nav Gnav Implementation (#2180)

* Modifies dynamic nav to work inside the gnav, simplifies logic and code, adds additional tests

* Only load if key is present

* Linting issues

* Condensing logic re: code review

* Moving code out of init into function per code review

libs/blocks/global-navigation/global-navigation.js

@@ -991,10 +991,20 @@ class Gnav {
   };
 }
 
+const getSource = async () => {
+  const { locale, dynamicNavKey } = getConfig();
+  let url = getMetadata('gnav-source') || `${locale.contentRoot}/gnav`;
+  if (dynamicNavKey) {
+    const { default: dynamicNav } = await import('../../features/dynamic-navigation.js');
+    url = dynamicNav(url, dynamicNavKey);
+  }
+  return url;
+};
+
 export default async function init(block) {
   try {
-    const { locale, mep } = getConfig();
-    const url = getMetadata('gnav-source') || `${locale.contentRoot}/gnav`;
+    const { mep } = getConfig();
+    const url = await getSource();
     const content = await fetchAndProcessPlainHtml({ url })
       .catch((e) => lanaLog({
         message: `Error fetching gnav content url: ${url}`,

libs/features/dynamic-navigation.js

@@ -0,0 +1,15 @@
+import { getMetadata } from '../utils/utils.js';
+
+export default function dynamicNav(url, key) {
+  const metadataContent = getMetadata('dynamic-nav');
+
+  if (metadataContent === 'entry') {
+    window.sessionStorage.setItem('gnavSource', url);
+    window.sessionStorage.setItem('dynamicNavKey', key);
+    return url;
+  }
+
+  if (metadataContent !== 'on' || key !== window.sessionStorage.getItem('dynamicNavKey')) return url;
+
+  return window.sessionStorage.getItem('gnavSource') || url;
+}

test/blocks/global-navigation/global-navigation.test.js

@@ -24,6 +24,7 @@ import globalNavigationMock from './mocks/global-navigation.plain.js';
 import globalNavigationActiveMock from './mocks/global-navigation-active.plain.js';
 import globalNavigationWideColumnMock from './mocks/global-navigation-wide-column.plain.js';
 import globalNavigationCrossCloud from './mocks/global-navigation-cross-cloud.plain.js';
+import { getConfig } from '../../../tools/send-to-caas/send-utils.js';
 
 const ogFetch = window.fetch;
 
@@ -1410,5 +1411,30 @@ describe('global navigation', () => {
         fetchStub.calledOnceWith('https://www.stage.adobe.com/federal/path/to/gnav.plain.html'),
       ).to.be.true;
     });
+
+    it('fetches navigation saved in sessionStorage', async () => {
+      const dynamicNavOn = toFragment`<meta name="dynamic-nav" content="on">`;
+      const conf = getConfig();
+      setConfig({ dynamicNavKey: 'milo', ...conf });
+      document.head.append(dynamicNavOn);
+      window.sessionStorage.setItem('dynamicNavKey', 'milo');
+      window.sessionStorage.setItem('gnavSource', '/some-path');
+      await initGnav(document.body.querySelector('header'));
+      expect(
+        fetchStub.calledOnceWith('/some-path.plain.html'),
+      ).to.be.true;
+    });
+
+    it('does not fetch from sessionStorage url when dyanmicNavKey is not present', async () => {
+      const dynamicNavOn = toFragment`<meta name="dynamic-nav" content="on">`;
+      document.head.append(dynamicNavOn);
+      document.body.replaceChildren(toFragment`<header class="global-navigation"></header>`);
+      window.sessionStorage.setItem('dynamicNavKey', 'milo');
+      window.sessionStorage.setItem('gnavSource', '/some-path');
+      await initGnav(document.body.querySelector('header'));
+      expect(
+        fetchStub.calledOnceWith('http://localhost:2000/gnav.plain.html'),
+      ).to.be.true;
+    });
   });
 });

test/features/dynamic-nav/dynamicNav.test.js

@@ -0,0 +1,48 @@
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import { setConfig } from '../../../libs/utils/utils.js';
+import dynamicNav from '../../../libs/features/dynamic-navigation.js';
+
+describe('Dynamic nav', () => {
+  beforeEach(() => {
+    const conf = { dynamicNavKey: 'bacom' };
+    setConfig(conf);
+    window.sessionStorage.setItem('gnavSource', 'some-source-string');
+  });
+
+  it('Saves the gnavSource and dynamicNavKey to session storage', async () => {
+    document.head.innerHTML = await readFile({ path: './mocks/entry.html' });
+    window.sessionStorage.removeItem('gnavSource');
+    dynamicNav('gnav/aem-sites', 'bacom');
+    expect(window.sessionStorage.getItem('gnavSource')).to.equal('gnav/aem-sites');
+    expect(window.sessionStorage.getItem('dynamicNavKey')).to.equal('bacom');
+  });
+
+  it('Returns the provided url when the dynamic nav metadata is not present', async () => {
+    document.head.innerHTML = await readFile({ path: './mocks/off.html' });
+    const url = dynamicNav('gnav/aem-sites', 'nocom');
+    expect(window.sessionStorage.getItem('gnavSource')).to.equal('some-source-string');
+    expect(url).to.equal('gnav/aem-sites');
+  });
+
+  it('Returns the provided url with when the wrong dynamicNavKey is passed', async () => {
+    document.head.innerHTML = await readFile({ path: './mocks/on.html' });
+    const url = dynamicNav('gnav/aem-sites', 'nocom');
+    expect(window.sessionStorage.getItem('gnavSource')).to.equal('some-source-string');
+    expect(url).to.equal('gnav/aem-sites');
+  });
+
+  it('Returns the sessionStorage url if the item exists, the keys match, and dynamic nav is on', async () => {
+    document.head.innerHTML = await readFile({ path: './mocks/on.html' });
+    const url = dynamicNav('gnav/aem-sites', 'bacom');
+    expect(window.sessionStorage.getItem('gnavSource')).to.equal('some-source-string');
+    expect(url).to.equal('some-source-string');
+  });
+
+  it('Returns the pprovided url if it does not find an item in sessionStorage and dynamic nav is on', async () => {
+    document.head.innerHTML = await readFile({ path: './mocks/on.html' });
+    window.sessionStorage.removeItem('gnavSource');
+    const url = dynamicNav('gnav/aem-sites', 'bacom');
+    expect(url).to.equal('gnav/aem-sites');
+  });
+});

test/features/dynamic-nav/mocks/entry.html

@@ -0,0 +1 @@
+<meta name="dynamic-nav" content="entry">

test/features/dynamic-nav/mocks/off.html

@@ -0,0 +1 @@
+<meta name="stub" content="stub">

test/features/dynamic-nav/mocks/on.html

@@ -0,0 +1 @@
+<meta name="dynamic-nav" content="on">