From 22dab6644861e52865ab288c0149d91b912823b3 Mon Sep 17 00:00:00 2001 From: Jason Slavin Date: Wed, 4 Dec 2024 01:18:24 -0800 Subject: [PATCH] MWPW-155723 - Adds group metadata to ensure dyanmic nav continuity (#3124) * 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 --- .../dynamic-navigation/dynamic-navigation.js | 14 ++++ libs/features/dynamic-navigation/status.js | 8 ++- test/features/dynamic-nav/dynamicNav.test.js | 30 ++++++++ test/features/dynamic-nav/status.test.js | 70 ++++++++++++++++++- 4 files changed, 120 insertions(+), 2 deletions(-) diff --git a/libs/features/dynamic-navigation/dynamic-navigation.js b/libs/features/dynamic-navigation/dynamic-navigation.js index 7354518a58..7d943cc597 100644 --- 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 index 792f586765..3321459581 100644 --- a/libs/features/dynamic-navigation/status.js +++ b/libs/features/dynamic-navigation/status.js @@ -80,7 +80,11 @@ 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 groupsMatch = groupMetaSetting.toLowerCase() === window.sessionStorage.getItem('dynamicNavGroup').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 +98,8 @@ const createStatusWidget = (dynamicNavKey) => {

Status: ${status}

Setting: ${dynamicNavSetting}

+

Group: ${groupMetaSetting}

+

Group matches stored group: ${groupsMatchMessage}

Consumer key: ${dynamicNavKey}

Authored and stored source match: ${authoredSource === currentSource}

diff --git a/test/features/dynamic-nav/dynamicNav.test.js b/test/features/dynamic-nav/dynamicNav.test.js index a08c98ba22..710b9c78e2 100644 --- 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 index 2b9a261e61..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); }); @@ -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', () => {