MWPW-155723 - Adds group metadata to ensure dynamic nav continuity - …

…fix (adobecom#3318) * Adding dynamic-nav-group setting to allow distinction between dynamic-nav user journeys * Utils change * Ensuring status shows correctly dispite group * Making metadata case insensative * Does a check for status.js if storage item does not exist --------- Co-authored-by: Megan Thomas <[email protected]>
akanshaa-18 · Dec 11, 2024 · 4c20774 · 4c20774
1 parent 2be5754
commit 4c20774
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 2 deletions.
diff --git a/libs/features/dynamic-navigation/dynamic-navigation.js b/libs/features/dynamic-navigation/dynamic-navigation.js
@@ -14,16 +14,30 @@ export function foundDisableValues() {
   return foundValues.length ? foundValues : false;
 }
 
+function dynamicNavGroupMatches(groupMetaData) {
+  const storedGroup = window.sessionStorage.getItem('dynamicNavGroup');
+  if (groupMetaData && storedGroup) {
+    return storedGroup.toLowerCase() === groupMetaData.toLowerCase();
+  }
+  return false;
+}
+
 export default function dynamicNav(url, key) {
   if (foundDisableValues()) return url;
   const metadataContent = getMetadata('dynamic-nav');
+  const dynamicNavGroup = getMetadata('dynamic-nav-group');
 
   if (metadataContent === 'entry') {
     window.sessionStorage.setItem('gnavSource', url);
     window.sessionStorage.setItem('dynamicNavKey', key);
+    if (dynamicNavGroup) window.sessionStorage.setItem('dynamicNavGroup', dynamicNavGroup);
     return url;
   }
 
+  if (metadataContent === 'on' && dynamicNavGroup) {
+    if (!dynamicNavGroupMatches(dynamicNavGroup)) return url;
+  }
+
   if (metadataContent !== 'on' || key !== window.sessionStorage.getItem('dynamicNavKey')) return url;
 
   return window.sessionStorage.getItem('gnavSource') || url;

diff --git a/libs/features/dynamic-navigation/status.js b/libs/features/dynamic-navigation/status.js
@@ -80,7 +80,13 @@ const createStatusWidget = (dynamicNavKey) => {
   const currentSource = getCurrentSource(dynamicNavSetting, storedSource, authoredSource);
   const dynamicNavDisableValues = getMetadata('dynamic-nav-disable');
   const foundValues = foundDisableValues();
-  const status = getStatus(dynamicNavSetting, foundValues.length >= 1, storedSource);
+  const groupMetaSetting = getMetadata('dynamic-nav-group') || 'Group not set';
+  const storedDyanmicNavGroup = window.sessionStorage.getItem('dynamicNavGroup');
+  const groupsMatch = storedDyanmicNavGroup
+    && groupMetaSetting.toLowerCase() === storedDyanmicNavGroup.toLowerCase();
+  const groupsMatchMessage = groupsMatch ? 'Yes' : 'No';
+  const isDisabled = foundValues.length >= 1 || (!groupsMatch && groupMetaSetting !== 'Group not set');
+  const status = getStatus(dynamicNavSetting, isDisabled, storedSource);
   const statusWidget = createTag('div', { class: 'dynamic-nav-status' });
 
   statusWidget.innerHTML = `
@@ -94,6 +100,8 @@ const createStatusWidget = (dynamicNavKey) => {
       </div>
       <p class="status">Status: <span>${status}</span></p> 
       <p class="setting">Setting: <span>${dynamicNavSetting}</span></p>
+      <p class="group">Group: <span>${groupMetaSetting}</span></p>
+      <p class="group-match">Group matches stored group: <span>${groupsMatchMessage}</span></p>
       <p class="consumer-key">Consumer key: <span>${dynamicNavKey}</span></p>
       <div class="nav-source-info">
         <p>Authored and stored source match: <span>${authoredSource === currentSource}</span></p>

diff --git a/test/features/dynamic-nav/dynamicNav.test.js b/test/features/dynamic-nav/dynamicNav.test.js
@@ -58,6 +58,24 @@ describe('Dynamic nav', () => {
     expect(url).to.equal('gnav/aem-sites');
   });
 
+  it('Returns the provided url when the group has not been set', async () => {
+    document.head.innerHTML = await readFile({ path: './mocks/on.html' });
+    const url = dynamicNav('gnav/aem-sites', 'bacom');
+    expect(url).to.equal('some-source-string');
+  });
+
+  it('Returns the provided url when the group does not match', async () => {
+    document.head.innerHTML = await readFile({ path: './mocks/on.html' });
+    const groupMeta = document.createElement('meta');
+    groupMeta.setAttribute('name', 'dynamic-nav-group');
+    groupMeta.setAttribute('content', 'test');
+    document.head.appendChild(groupMeta);
+
+    window.sessionStorage.setItem('dynamicNavGroup', 'no-test');
+    const url = dynamicNav('gnav/aem-sites', 'bacom');
+    expect(url).to.equal('gnav/aem-sites');
+  });
+
   it('Returns the sessionStorage url when dynamic nav ignore items are present but do not match the metadata', async () => {
     document.head.innerHTML = await readFile({ path: './mocks/on-ignore-does-not-match.html' });
     const url = dynamicNav('gnav/aem-sites', 'bacom');
@@ -75,4 +93,16 @@ describe('Dynamic nav', () => {
     const url = dynamicNav('gnav/aem-sites', 'bacom');
     expect(url).to.equal('some-source-string');
   });
+
+  it('Returns the sessionStorage url when the groups match', async () => {
+    document.head.innerHTML = await readFile({ path: './mocks/on.html' });
+    const groupMeta = document.createElement('meta');
+    groupMeta.setAttribute('name', 'dynamic-nav-group');
+    groupMeta.setAttribute('content', 'test');
+    document.head.appendChild(groupMeta);
+
+    window.sessionStorage.setItem('dynamicNavGroup', 'test');
+    const url = dynamicNav('gnav/aem-sites', 'bacom');
+    expect(url).to.equal('some-source-string');
+  });
 });
diff --git a/test/features/dynamic-nav/status.test.js b/test/features/dynamic-nav/status.test.js
@@ -23,7 +23,8 @@ describe('Dynamic Nav Status', () => {
   beforeEach(async () => {
     const conf = { dynamicNavKey: 'bacom' };
     document.body.innerHTML = await readFile({ path: './mocks/status.html' });
-    document.head.innerHTML = '<meta name="dynamic-nav" content=""><meta name="gnav-source" content="">';
+    document.head.innerHTML = '<meta name="dynamic-nav" content=""><meta name="gnav-source" content=""><meta name="dynamic-nav-group" content="test">';
+    window.sessionStorage.setItem('dynamicNavGroup', 'test');
     setConfig(conf);
   });
 
@@ -159,6 +160,73 @@ describe('Dynamic Nav Status', () => {
       expect(info.authoredSource).to.equal('/test');
       expect(info.storedSource).to.equal('/test');
     });
+
+    it('displays the correct information for a group match', () => {
+      document.querySelector('meta[name="dynamic-nav"]').setAttribute('content', 'on');
+      document.querySelector('meta[name="gnav-source"]').setAttribute('content', 'https://main--milo--adobecom.hlx/test');
+
+      dynamicNav();
+      status();
+
+      const statusWidget = document.querySelector('.dynamic-nav-status');
+      const group = statusWidget.querySelector('.group span');
+      const groupMatch = statusWidget.querySelector('.group-match span');
+
+      expect(group.innerText).to.equal('test');
+      expect(groupMatch.innerText).to.equal('Yes');
+      expect(statusWidget.classList.contains(ENABLED)).to.be.true;
+    });
+
+    it('displays the correct information for a group mismatch', () => {
+      document.querySelector('meta[name="dynamic-nav"]').setAttribute('content', 'on');
+      document.querySelector('meta[name="gnav-source"]').setAttribute('content', 'https://main--milo--adobecom.hlx/test');
+
+      window.sessionStorage.setItem('dynamicNavGroup', 'no-test');
+
+      dynamicNav();
+      status();
+
+      const statusWidget = document.querySelector('.dynamic-nav-status');
+      const group = statusWidget.querySelector('.group span');
+      const groupMatch = statusWidget.querySelector('.group-match span');
+
+      expect(group.innerText).to.equal('test');
+      expect(groupMatch.innerText).to.equal('No');
+      expect(statusWidget.classList.contains(INACTIVE)).to.be.true;
+    });
+
+    it('displays the correct information for no group being set', () => {
+      document.querySelector('meta[name="dynamic-nav"]').setAttribute('content', 'on');
+      document.querySelector('meta[name="gnav-source"]').setAttribute('content', 'https://main--milo--adobecom.hlx/test');
+
+      document.querySelector('meta[name="dynamic-nav-group"]').remove();
+      window.sessionStorage.setItem('dynamicNavGroup', 'no-test');
+
+      dynamicNav();
+      status();
+
+      const statusWidget = document.querySelector('.dynamic-nav-status');
+      const group = statusWidget.querySelector('.group span');
+      const groupMatch = statusWidget.querySelector('.group-match span');
+
+      expect(group.innerText).to.equal('Group not set');
+      expect(groupMatch.innerText).to.equal('No');
+    });
+
+    it('remains active when there is no group match but the nav is active', () => {
+      document.querySelector('meta[name="dynamic-nav"]').setAttribute('content', 'on');
+      document.querySelector('meta[name="gnav-source"]').setAttribute('content', 'https://main--milo--adobecom.hlx/test');
+
+      document.querySelector('meta[name="dynamic-nav-group"]').remove();
+      window.sessionStorage.setItem('dynamicNavGroup', 'no-test');
+      window.sessionStorage.setItem('gnavSource', GNAV_SOURCE);
+
+      dynamicNav();
+      status();
+
+      const statusWidget = document.querySelector('.dynamic-nav-status');
+      expect(statusWidget.classList.contains(ACTIVE)).to.be.true;
+    });
   });
 
   describe('disabled values', () => {