diff --git a/libs/features/dynamic-navigation/status.js b/libs/features/dynamic-navigation/status.js
index 51777cb4d8..601c734732 100644
--- 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 = `
Dynamic Nav
@@ -97,7 +99,7 @@ const createStatusWidget = (dynamicNavKey) => {
Status: ${status}
Setting: ${dynamicNavSetting}
Group: ${groupMetaSetting}
- Group matches stored group: ${groupsMatch}
+ Group matches stored group: ${groupsMatchMessage}
Consumer key: ${dynamicNavKey}
Authored and stored source match: ${authoredSource === currentSource}
diff --git a/test/features/dynamic-nav/status.test.js b/test/features/dynamic-nav/status.test.js
index 161e673d6c..6d43ae23a2 100644
--- 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 = '
';
+ document.head.innerHTML = '
';
+ 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', () => {