Ensuring status shows correctly dispite group

adobecom · Nov 14, 2024 · c49337e · c49337e
1 parent 47aca71
commit c49337e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 17 deletions.
diff --git a/libs/features/dynamic-navigation/status.js b/libs/features/dynamic-navigation/status.js
@@ -80,10 +80,12 @@ 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 statusWidget = createTag('div', { class: 'dynamic-nav-status' });
   const groupMetaSetting = getMetadata('dynamic-nav-group') || 'Group not set';
-  const groupsMatch = groupMetaSetting === window.sessionStorage.getItem('dynamicNavGroup') ? 'Yes' : 'No';
+  const groupsMatch = groupMetaSetting === window.sessionStorage.getItem('dynamicNavGroup');
+  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 = `
     <span class="title"><span class="dns-badge"></span>Dynamic Nav</span>
@@ -97,7 +99,7 @@ const createStatusWidget = (dynamicNavKey) => {
       <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>${groupsMatch}</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/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);
   });
 
@@ -164,13 +165,6 @@ describe('Dynamic Nav Status', () => {
       document.querySelector('meta[name="dynamic-nav"]').setAttribute('content', 'on');
       document.querySelector('meta[name="gnav-source"]').setAttribute('content', 'https://main--milo--adobecom.hlx/test');
 
-      const groupMeta = document.createElement('meta');
-      groupMeta.setAttribute('name', 'dynamic-nav-group');
-      groupMeta.setAttribute('content', 'test');
-      document.head.appendChild(groupMeta);
-
-      window.sessionStorage.setItem('dynamicNavGroup', 'test');
-
       dynamicNav();
       status();
 
@@ -180,17 +174,13 @@ describe('Dynamic Nav Status', () => {
 
       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');
 
-      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');
 
       dynamicNav();
@@ -202,12 +192,14 @@ describe('Dynamic Nav Status', () => {
 
       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();
@@ -220,6 +212,21 @@ describe('Dynamic Nav Status', () => {
       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', () => {