From b8f94ae561f2510637b751f38090165c31406473 Mon Sep 17 00:00:00 2001 From: Bandana Laishram Date: Mon, 9 Sep 2024 17:18:58 +0530 Subject: [PATCH 01/18] Dispatching an event when gnav is ready --- libs/blocks/global-navigation/global-navigation.js | 4 ++++ libs/navigation/navigation.js | 1 + 2 files changed, 5 insertions(+) diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js index b61afdcf11..2824d86f91 100644 --- a/libs/blocks/global-navigation/global-navigation.js +++ b/libs/blocks/global-navigation/global-navigation.js @@ -320,6 +320,10 @@ class Gnav { for await (const task of tasks) { await yieldToMain(); await task(); + // Dispatching an event when gnav is visible after loadBaseStyles + if (task.name === 'ims') { + window.dispatchEvent(new CustomEvent('feds:nav.ready')); + } } document.addEventListener('click', closeOnClickOutside); diff --git a/libs/navigation/navigation.js b/libs/navigation/navigation.js index 23a59ebfa0..66a3b6a816 100644 --- a/libs/navigation/navigation.js +++ b/libs/navigation/navigation.js @@ -71,6 +71,7 @@ export default async function loadBlock(configs, customLib) { }); } }); + window.addEventListener('feds:nav.ready', () => onReady()) } window.loadNavigation = loadBlock; From d1c0d145a740a3d673081a04ebbd8016eda79255 Mon Sep 17 00:00:00 2001 From: Bandana Laishram Date: Mon, 9 Sep 2024 18:36:14 +0530 Subject: [PATCH 02/18] Adding a callback for any error in gnav --- libs/blocks/global-navigation/global-navigation.js | 8 +++----- libs/blocks/global-navigation/utilities/utilities.js | 1 + libs/navigation/navigation.js | 12 ++++++++++-- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js index 2824d86f91..4087cb9534 100644 --- a/libs/blocks/global-navigation/global-navigation.js +++ b/libs/blocks/global-navigation/global-navigation.js @@ -320,12 +320,10 @@ class Gnav { for await (const task of tasks) { await yieldToMain(); await task(); - // Dispatching an event when gnav is visible after loadBaseStyles - if (task.name === 'ims') { - window.dispatchEvent(new CustomEvent('feds:nav.ready')); - } } - + // Dispatching an event when gnav loads and is visible + window.dispatchEvent(new CustomEvent('feds:nav.ready')); + document.addEventListener('click', closeOnClickOutside); isDesktop.addEventListener('change', closeAllDropdowns); }, 'Error in global navigation init', 'errorType=error,module=gnav'); diff --git a/libs/blocks/global-navigation/utilities/utilities.js b/libs/blocks/global-navigation/utilities/utilities.js index 5a663dd70c..027f651efd 100644 --- a/libs/blocks/global-navigation/utilities/utilities.js +++ b/libs/blocks/global-navigation/utilities/utilities.js @@ -42,6 +42,7 @@ export const lanaLog = ({ message, e = '', tags = 'errorType=default' }) => { sampleRate: 1, tags, }); + window.dispatchEvent(new CustomEvent('feds:nav.error', { detail: { message: `${message} - ${e}` } })); }; export const logErrorFor = async (fn, message, tags) => { diff --git a/libs/navigation/navigation.js b/libs/navigation/navigation.js index 66a3b6a816..73edd6c62e 100644 --- a/libs/navigation/navigation.js +++ b/libs/navigation/navigation.js @@ -35,7 +35,14 @@ function getParamsConfigs(configs) { export default async function loadBlock(configs, customLib) { const { - header, footer, authoringPath, env = 'prod', locale = '', theme, + header, + footer, + authoringPath, + env = 'prod', + locale = '', + theme, + onReady, + onError, } = configs || {}; const branch = new URLSearchParams(window.location.search).get('navbranch'); const miloLibs = branch ? `https://${branch}--milo--adobecom.hlx.page` : customLib || envMap[env]; @@ -71,7 +78,8 @@ export default async function loadBlock(configs, customLib) { }); } }); - window.addEventListener('feds:nav.ready', () => onReady()) + window.addEventListener('feds:nav.ready', () => onReady && onReady()); + window.addEventListener('feds:nav.error', ({ detail }) => onError && onError(detail?.message)) } window.loadNavigation = loadBlock; From 3adda9b51f4a3e2b8ac2ff58440c35b475b0c8b3 Mon Sep 17 00:00:00 2001 From: Bandana Laishram Date: Wed, 11 Sep 2024 19:04:47 +0530 Subject: [PATCH 03/18] Adding error for navigation js --- libs/blocks/global-navigation/utilities/utilities.js | 1 + libs/navigation/navigation.js | 1 + 2 files changed, 2 insertions(+) diff --git a/libs/blocks/global-navigation/utilities/utilities.js b/libs/blocks/global-navigation/utilities/utilities.js index 027f651efd..462966a684 100644 --- a/libs/blocks/global-navigation/utilities/utilities.js +++ b/libs/blocks/global-navigation/utilities/utilities.js @@ -331,6 +331,7 @@ export async function fetchAndProcessPlainHtml({ url, shouldDecorateLinks = true e: `${res.statusText} url: ${res.url}`, tags: 'errorType=info,module=utilities', }); + return; } const text = await res.text(); const { body } = new DOMParser().parseFromString(text, 'text/html'); diff --git a/libs/navigation/navigation.js b/libs/navigation/navigation.js index 73edd6c62e..81ffa60f9a 100644 --- a/libs/navigation/navigation.js +++ b/libs/navigation/navigation.js @@ -48,6 +48,7 @@ export default async function loadBlock(configs, customLib) { const miloLibs = branch ? `https://${branch}--milo--adobecom.hlx.page` : customLib || envMap[env]; if (!header && !footer) { console.error('Global navigation Error: header and footer configurations are missing.'); + onError('Global navigation Error: header and footer configurations are missing.'); return; } // Relative path can't be used, as the script will run on consumer's app From 1551217dd4dc397a8d0b15984f5a684168837410 Mon Sep 17 00:00:00 2001 From: Bandana Laishram Date: Thu, 12 Sep 2024 14:59:49 +0530 Subject: [PATCH 04/18] Fix: Lint issues --- libs/blocks/global-navigation/global-navigation.js | 2 +- libs/blocks/global-navigation/utilities/utilities.js | 2 +- libs/navigation/navigation.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js index 4087cb9534..df80745a18 100644 --- a/libs/blocks/global-navigation/global-navigation.js +++ b/libs/blocks/global-navigation/global-navigation.js @@ -323,7 +323,7 @@ class Gnav { } // Dispatching an event when gnav loads and is visible window.dispatchEvent(new CustomEvent('feds:nav.ready')); - + document.addEventListener('click', closeOnClickOutside); isDesktop.addEventListener('change', closeAllDropdowns); }, 'Error in global navigation init', 'errorType=error,module=gnav'); diff --git a/libs/blocks/global-navigation/utilities/utilities.js b/libs/blocks/global-navigation/utilities/utilities.js index 462966a684..5c2831bbd3 100644 --- a/libs/blocks/global-navigation/utilities/utilities.js +++ b/libs/blocks/global-navigation/utilities/utilities.js @@ -331,7 +331,7 @@ export async function fetchAndProcessPlainHtml({ url, shouldDecorateLinks = true e: `${res.statusText} url: ${res.url}`, tags: 'errorType=info,module=utilities', }); - return; + return null; } const text = await res.text(); const { body } = new DOMParser().parseFromString(text, 'text/html'); diff --git a/libs/navigation/navigation.js b/libs/navigation/navigation.js index 81ffa60f9a..ef08f27924 100644 --- a/libs/navigation/navigation.js +++ b/libs/navigation/navigation.js @@ -80,7 +80,7 @@ export default async function loadBlock(configs, customLib) { } }); window.addEventListener('feds:nav.ready', () => onReady && onReady()); - window.addEventListener('feds:nav.error', ({ detail }) => onError && onError(detail?.message)) + window.addEventListener('feds:nav.error', ({ detail }) => onError && onError(detail?.message)); } window.loadNavigation = loadBlock; From 902b3883b2262a5c2582d929831e04dd603e91ff Mon Sep 17 00:00:00 2001 From: Bandana Laishram Date: Thu, 12 Sep 2024 15:14:09 +0530 Subject: [PATCH 05/18] Fixing event name --- libs/blocks/global-navigation/global-navigation.js | 2 +- libs/blocks/global-navigation/utilities/utilities.js | 2 +- libs/navigation/navigation.js | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js index df80745a18..4c1f28f38e 100644 --- a/libs/blocks/global-navigation/global-navigation.js +++ b/libs/blocks/global-navigation/global-navigation.js @@ -322,7 +322,7 @@ class Gnav { await task(); } // Dispatching an event when gnav loads and is visible - window.dispatchEvent(new CustomEvent('feds:nav.ready')); + window.dispatchEvent(new CustomEvent('feds:globalnav:ready')); document.addEventListener('click', closeOnClickOutside); isDesktop.addEventListener('change', closeAllDropdowns); diff --git a/libs/blocks/global-navigation/utilities/utilities.js b/libs/blocks/global-navigation/utilities/utilities.js index 5c2831bbd3..77a1b30c3d 100644 --- a/libs/blocks/global-navigation/utilities/utilities.js +++ b/libs/blocks/global-navigation/utilities/utilities.js @@ -42,7 +42,7 @@ export const lanaLog = ({ message, e = '', tags = 'errorType=default' }) => { sampleRate: 1, tags, }); - window.dispatchEvent(new CustomEvent('feds:nav.error', { detail: { message: `${message} - ${e}` } })); + window.dispatchEvent(new CustomEvent('feds:globalnav:error', { detail: { message: `${message} - ${e}` } })); }; export const logErrorFor = async (fn, message, tags) => { diff --git a/libs/navigation/navigation.js b/libs/navigation/navigation.js index ef08f27924..b29dce0edb 100644 --- a/libs/navigation/navigation.js +++ b/libs/navigation/navigation.js @@ -48,7 +48,7 @@ export default async function loadBlock(configs, customLib) { const miloLibs = branch ? `https://${branch}--milo--adobecom.hlx.page` : customLib || envMap[env]; if (!header && !footer) { console.error('Global navigation Error: header and footer configurations are missing.'); - onError('Global navigation Error: header and footer configurations are missing.'); + onError?.('Global navigation Error: header and footer configurations are missing.'); return; } // Relative path can't be used, as the script will run on consumer's app @@ -79,8 +79,8 @@ export default async function loadBlock(configs, customLib) { }); } }); - window.addEventListener('feds:nav.ready', () => onReady && onReady()); - window.addEventListener('feds:nav.error', ({ detail }) => onError && onError(detail?.message)); + window.addEventListener('milo:globalnav:ready', () => onReady?.()); + window.addEventListener('milo:globalnav:error', ({ detail }) => onError?.(detail?.message)); } window.loadNavigation = loadBlock; From 8e235751415ad6a61eaf41a954c98ec7b35ac04d Mon Sep 17 00:00:00 2001 From: Bandana Laishram Date: Thu, 12 Sep 2024 16:12:30 +0530 Subject: [PATCH 06/18] Fixing event name --- libs/blocks/global-navigation/global-navigation.js | 2 +- libs/blocks/global-navigation/utilities/utilities.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js index 4c1f28f38e..c0de191245 100644 --- a/libs/blocks/global-navigation/global-navigation.js +++ b/libs/blocks/global-navigation/global-navigation.js @@ -322,7 +322,7 @@ class Gnav { await task(); } // Dispatching an event when gnav loads and is visible - window.dispatchEvent(new CustomEvent('feds:globalnav:ready')); + window.dispatchEvent(new CustomEvent('milo:globalnav:ready')); document.addEventListener('click', closeOnClickOutside); isDesktop.addEventListener('change', closeAllDropdowns); diff --git a/libs/blocks/global-navigation/utilities/utilities.js b/libs/blocks/global-navigation/utilities/utilities.js index 77a1b30c3d..708d87e7d0 100644 --- a/libs/blocks/global-navigation/utilities/utilities.js +++ b/libs/blocks/global-navigation/utilities/utilities.js @@ -42,7 +42,7 @@ export const lanaLog = ({ message, e = '', tags = 'errorType=default' }) => { sampleRate: 1, tags, }); - window.dispatchEvent(new CustomEvent('feds:globalnav:error', { detail: { message: `${message} - ${e}` } })); + window.dispatchEvent(new CustomEvent('milo:globalnav:error', { detail: { message: `${message} - ${e}` } })); }; export const logErrorFor = async (fn, message, tags) => { From e3b81af86cabde57b74b70650618fa49693e9875 Mon Sep 17 00:00:00 2001 From: Bandana Laishram Date: Fri, 13 Sep 2024 14:07:08 +0530 Subject: [PATCH 07/18] Removing custom events --- .../global-navigation/global-navigation.js | 46 +++++++++---------- .../global-navigation/utilities/utilities.js | 2 +- libs/navigation/bootstrapper.js | 2 +- libs/navigation/navigation.js | 24 ++++++---- libs/utils/utils.js | 14 ++++-- 5 files changed, 49 insertions(+), 39 deletions(-) diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js index c0de191245..dfd612c281 100644 --- a/libs/blocks/global-navigation/global-navigation.js +++ b/libs/blocks/global-navigation/global-navigation.js @@ -321,8 +321,6 @@ class Gnav { await yieldToMain(); await task(); } - // Dispatching an event when gnav loads and is visible - window.dispatchEvent(new CustomEvent('milo:globalnav:ready')); document.addEventListener('click', closeOnClickOutside); isDesktop.addEventListener('change', closeAllDropdowns); @@ -1029,27 +1027,27 @@ const getSource = async () => { }; export default async function init(block) { - try { - const { mep } = getConfig(); - const sourceUrl = await getSource(); - const [url, hash = ''] = sourceUrl.split('#'); - if (hash === '_noActiveItem') { - setDisableAEDState(); - } - const content = await fetchAndProcessPlainHtml({ url }); - if (!content) return null; - const gnav = new Gnav({ - content, - block, - }); - gnav.init(); - block.setAttribute('daa-im', 'true'); - const mepMartech = mep?.martech || ''; - block.setAttribute('daa-lh', `gnav|${getExperienceName()}${mepMartech}`); - if (isDarkMode()) block.classList.add('feds--dark'); - return gnav; - } catch (e) { - lanaLog({ message: 'Could not create global navigation.', e, tags: 'errorType=error,module=gnav' }); - return null; + const { mep } = getConfig(); + const sourceUrl = await getSource(); + const [url, hash = ''] = sourceUrl.split('#'); + if (hash === '_noActiveItem') { + setDisableAEDState(); } + const content = await fetchAndProcessPlainHtml({ url }); + if (!content) { + const error = new Error('Could not create global navigation. Content not found!'); + error.tags = 'errorType=error,module=gnav'; + error.url = url; + throw error; + } + const gnav = new Gnav({ + content, + block, + }); + gnav.init(); + block.setAttribute('daa-im', 'true'); + const mepMartech = mep?.martech || ''; + block.setAttribute('daa-lh', `gnav|${getExperienceName()}${mepMartech}`); + if (isDarkMode()) block.classList.add('feds--dark'); + return gnav; } diff --git a/libs/blocks/global-navigation/utilities/utilities.js b/libs/blocks/global-navigation/utilities/utilities.js index 708d87e7d0..f36f549910 100644 --- a/libs/blocks/global-navigation/utilities/utilities.js +++ b/libs/blocks/global-navigation/utilities/utilities.js @@ -42,7 +42,7 @@ export const lanaLog = ({ message, e = '', tags = 'errorType=default' }) => { sampleRate: 1, tags, }); - window.dispatchEvent(new CustomEvent('milo:globalnav:error', { detail: { message: `${message} - ${e}` } })); + console.error(message); }; export const logErrorFor = async (fn, message, tags) => { diff --git a/libs/navigation/bootstrapper.js b/libs/navigation/bootstrapper.js index e644702992..f231b4df6d 100644 --- a/libs/navigation/bootstrapper.js +++ b/libs/navigation/bootstrapper.js @@ -28,7 +28,7 @@ export default async function bootstrapBlock(miloLibs, blockConfig) { }); } - initBlock(document.querySelector(targetEl)); + await initBlock(document.querySelector(targetEl)); if (blockConfig.targetEl === 'footer') { const { loadPrivacy } = await import(`${miloLibs}/scripts/delayed.js`); setTimeout(() => { diff --git a/libs/navigation/navigation.js b/libs/navigation/navigation.js index b29dce0edb..edb56c83a8 100644 --- a/libs/navigation/navigation.js +++ b/libs/navigation/navigation.js @@ -70,17 +70,21 @@ export default async function loadBlock(configs, customLib) { }; setConfig(clientConfig); - blockConfig.forEach((block) => { - const configBlock = configs[block.key]; - if (configBlock) { - bootstrapBlock(`${miloLibs}/libs`, { - ...block, - ...(block.key === 'header' && { unavComponents: configBlock.unavComponents, redirect: configBlock.redirect }), - }); + try { + for await (const block of blockConfig) { + const configBlock = configs[block.key]; + if (configBlock) { + await bootstrapBlock(`${miloLibs}/libs`, { + ...block, + ...(block.key === 'header' && { unavComponents: configBlock.unavComponents, redirect: configBlock.redirect }), + }); + } } - }); - window.addEventListener('milo:globalnav:ready', () => onReady?.()); - window.addEventListener('milo:globalnav:error', ({ detail }) => onError?.(detail?.message)); + onReady?.(); + } catch (e) { + onError?.(e); + throw e; + } } window.loadNavigation = loadBlock; diff --git a/libs/utils/utils.js b/libs/utils/utils.js index b31c6c455f..a74596c33f 100644 --- a/libs/utils/utils.js +++ b/libs/utils/utils.js @@ -1058,9 +1058,17 @@ async function loadPostLCP(config) { } const header = document.querySelector('header'); if (header) { - header.classList.add('gnav-hide'); - await loadBlock(header); - header.classList.remove('gnav-hide'); + try { + header.classList.add('gnav-hide'); + await loadBlock(header); + header.classList.remove('gnav-hide'); + } catch (e) { + window.lana.log(`${e.message} | gnav-source: ${e.url} | href: ${window.location.href}`, { + clientId: 'feds-milo', + sampleRate: 1, + tags: e.tags, + }); + } } loadTemplate(); const { default: loadFonts } = await import('./fonts.js'); From f8a01e03d745ee2f84a7735332d71bb909f05c2f Mon Sep 17 00:00:00 2001 From: Bandana Laishram Date: Tue, 17 Sep 2024 11:19:22 +0530 Subject: [PATCH 08/18] Mocking gnav content --- test/navigation/bootstrapper.test.js | 2 + test/navigation/mocks/gnav.html | 59 ++++++++++++++++++++++++++++ 2 files changed, 61 insertions(+) create mode 100644 test/navigation/mocks/gnav.html diff --git a/test/navigation/bootstrapper.test.js b/test/navigation/bootstrapper.test.js index 18379d4a27..c1b689d187 100644 --- a/test/navigation/bootstrapper.test.js +++ b/test/navigation/bootstrapper.test.js @@ -45,6 +45,8 @@ describe('Bootstrapper', async () => { } if (url.includes('/placeholders')) return mockRes({ payload: placeholders }); if (url.includes('/footer.plain.html')) return mockRes({ payload: await readFile({ path: '../blocks/region-nav/mocks/regions.html' }) }); + if (url.includes('/gnav.plain.html')) return mockRes({ payload: await readFile({ path: './mocks/gnav.html' }) }); + return null; }); setConfig({ miloLibs, contentRoot: '/federal/dev' }); diff --git a/test/navigation/mocks/gnav.html b/test/navigation/mocks/gnav.html new file mode 100644 index 0000000000..8f0ee27c0b --- /dev/null +++ b/test/navigation/mocks/gnav.html @@ -0,0 +1,59 @@ + + + + Gnav Brand (Logo) + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ +
+
+
+
+
+ +
+
+
+
+

Just link

+
+
+
+
+ + From 283137cff180049d8dc5c75c3ab14c63dfb6f886 Mon Sep 17 00:00:00 2001 From: Bandana Laishram Date: Wed, 18 Sep 2024 11:57:00 +0530 Subject: [PATCH 09/18] Adding try catch to initGnav --- .../blocks/global-navigation/global-navigation.test.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/test/blocks/global-navigation/global-navigation.test.js b/test/blocks/global-navigation/global-navigation.test.js index bcc2e4b675..55ebf68219 100644 --- a/test/blocks/global-navigation/global-navigation.test.js +++ b/test/blocks/global-navigation/global-navigation.test.js @@ -13,7 +13,7 @@ import { unavVersion, } from './test-utilities.js'; import { setConfig, getLocale } from '../../../libs/utils/utils.js'; -import initGnav, { getUniversalNavLocale, osMap } from '../../../libs/blocks/global-navigation/global-navigation.js'; +import initNav, { getUniversalNavLocale, osMap } from '../../../libs/blocks/global-navigation/global-navigation.js'; import { isDesktop, isTangentToViewport, toFragment } from '../../../libs/blocks/global-navigation/utilities/utilities.js'; import logoOnlyNav from './mocks/global-navigation-only-logo.plain.js'; import longNav from './mocks/global-navigation-long.plain.js'; @@ -24,6 +24,14 @@ import { getConfig } from '../../../tools/send-to-caas/send-utils.js'; // TODO // - test localization +async function initGnav(block) { + try { + await initNav(block) + } catch(e) { + // should throw error + } +} + describe('global navigation', () => { before(() => { document.head.innerHTML = ` From fe972418c51a24feeee50e815b7da71bd4f77991 Mon Sep 17 00:00:00 2001 From: Bandana Laishram Date: Wed, 18 Sep 2024 11:59:37 +0530 Subject: [PATCH 10/18] Fix: Lint issues --- test/blocks/global-navigation/global-navigation.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/blocks/global-navigation/global-navigation.test.js b/test/blocks/global-navigation/global-navigation.test.js index 55ebf68219..3c9cf81e38 100644 --- a/test/blocks/global-navigation/global-navigation.test.js +++ b/test/blocks/global-navigation/global-navigation.test.js @@ -26,8 +26,8 @@ import { getConfig } from '../../../tools/send-to-caas/send-utils.js'; async function initGnav(block) { try { - await initNav(block) - } catch(e) { + await initNav(block); + } catch (e) { // should throw error } } From ae8ab66f8612c58a7f2b7883089b52dd5dde0829 Mon Sep 17 00:00:00 2001 From: Bandana Laishram Date: Wed, 18 Sep 2024 16:42:09 +0530 Subject: [PATCH 11/18] Test update for bootstrapper and navigation --- test/navigation/bootstrapper.test.js | 10 +----- test/navigation/navigation.test.js | 53 ++++++++++++++++++++++++++-- 2 files changed, 51 insertions(+), 12 deletions(-) diff --git a/test/navigation/bootstrapper.test.js b/test/navigation/bootstrapper.test.js index c1b689d187..397ea60d8b 100644 --- a/test/navigation/bootstrapper.test.js +++ b/test/navigation/bootstrapper.test.js @@ -5,6 +5,7 @@ import loadBlock from '../../libs/navigation/bootstrapper.js'; import fetchedFooter from '../blocks/global-footer/mocks/fetched-footer.js'; import placeholders from '../blocks/global-navigation/mocks/placeholders.js'; import { setConfig } from '../../libs/utils/utils.js'; +import { mockRes } from '../blocks/global-navigation/test-utilities.js'; document.body.innerHTML = await readFile({ path: './mocks/body.html' }); @@ -24,15 +25,6 @@ const blockConfig = { const miloLibs = 'http://localhost:2000/libs'; -const mockRes = ({ payload, status = 200, ok = true } = {}) => new Promise((resolve) => { - resolve({ - status, - ok, - json: () => payload, - text: () => payload, - }); -}); - describe('Bootstrapper', async () => { beforeEach(async () => { stub(window, 'fetch').callsFake(async (url) => { diff --git a/test/navigation/navigation.test.js b/test/navigation/navigation.test.js index 466452b269..96a412fe3a 100644 --- a/test/navigation/navigation.test.js +++ b/test/navigation/navigation.test.js @@ -1,28 +1,75 @@ import { readFile } from '@web/test-runner-commands'; import { expect } from '@esm-bundle/chai'; +import { stub, restore } from 'sinon'; import loadBlock from '../../libs/navigation/navigation.js'; +import { setConfig } from '../../libs/utils/utils.js'; +import { mockRes } from '../blocks/global-navigation/test-utilities.js'; document.body.innerHTML = await readFile({ path: './mocks/body.html' }); +const miloLibs = 'http://localhost:2000/libs'; describe('Navigation component', async () => { + beforeEach(async () => { + stub(window, 'fetch').callsFake(async (url) => { + if (url.includes('/footer.plain.html')) return mockRes({ payload: await readFile({ path: '../blocks/region-nav/mocks/regions.html' }) }); + if (url.includes('/federal/dev/gnav.plain.html')) return mockRes({ payload: await readFile({ path: './mocks/gnav.html' }) }); + + return null; + }); + setConfig({ miloLibs, contentRoot: '/federal/dev' }); + }); + + afterEach(() => { + restore(); + }); + it('Renders the footer block', async () => { - await loadBlock({ authoringPath: '/federal/dev', footer: { privacyId: '12343' }, env: 'qa' }, 'http://localhost:2000'); + const onReady = stub(); + await loadBlock({ authoringPath: '/federal/dev', footer: { privacyId: '12343' }, env: 'qa', onReady }, 'http://localhost:2000'); const el = document.getElementsByTagName('footer'); expect(el).to.exist; + expect(onReady.called).to.be.true; + }); + + it('Renders the footer block should not load when config is not passed', async () => { + try { + await loadBlock({ authoringPath: '/federal/dev-new', env: 'qa', footer: { privacyId: '12343' } }, 'http://localhost:2000'); + const el = document.getElementsByTagName('footer'); + expect(el).to.not.exist; + } catch (e) { + // handle error + } }); it('Renders the header block', async () => { - await loadBlock({ authoringPath: '/federal/dev', header: { imsClientId: 'fedsmilo' }, env: 'qa' }, 'http://localhost:2000'); + await loadBlock({ authoringPath: '/federal/dev', header: { imsClientId: 'fedsmilo' }, env: 'prod' }, 'http://localhost:2000'); const el = document.getElementsByTagName('header'); expect(el).to.exist; }); it('Does not render either header or footer if not found in configs', async () => { + const onError = stub(); + document.body.innerHTML = await readFile({ path: './mocks/body.html' }); + await loadBlock({ authoringPath: '/federal/dev', env: 'qa', onError }, 'http://localhost:2000'); + const header = document.getElementsByTagName('header'); + const footer = document.getElementsByTagName('footer'); + expect(header).to.be.empty; + expect(footer).to.be.empty; + expect(onError.called).to.be.true; + }); + + it('Does not render either header or footer if configs is not passed', async () => { document.body.innerHTML = await readFile({ path: './mocks/body.html' }); - await loadBlock({ authoringPath: '/federal/dev', env: 'qa' }, 'http://localhost:2000'); + await loadBlock(); const header = document.getElementsByTagName('header'); const footer = document.getElementsByTagName('footer'); expect(header).to.be.empty; expect(footer).to.be.empty; }); + + it('Renders the footer block with authoringpath passed in footer', async () => { + await loadBlock({ footer: { privacyId: '12343', authoringPath: '/federal/dev' }, env: 'qa' }, 'http://localhost:2000'); + const el = document.getElementsByTagName('footer'); + expect(el).to.exist; + }); }); From 5cf6df202438487961b5946d7f06353ed3138f37 Mon Sep 17 00:00:00 2001 From: Bandana Laishram Date: Thu, 19 Sep 2024 14:41:01 +0530 Subject: [PATCH 12/18] Making onError and onReady header specific --- libs/navigation/navigation.js | 18 +++++++----------- test/navigation/navigation.test.js | 17 +++++++++-------- 2 files changed, 16 insertions(+), 19 deletions(-) diff --git a/libs/navigation/navigation.js b/libs/navigation/navigation.js index edb56c83a8..a9ba49384e 100644 --- a/libs/navigation/navigation.js +++ b/libs/navigation/navigation.js @@ -41,14 +41,11 @@ export default async function loadBlock(configs, customLib) { env = 'prod', locale = '', theme, - onReady, - onError, } = configs || {}; const branch = new URLSearchParams(window.location.search).get('navbranch'); const miloLibs = branch ? `https://${branch}--milo--adobecom.hlx.page` : customLib || envMap[env]; if (!header && !footer) { console.error('Global navigation Error: header and footer configurations are missing.'); - onError?.('Global navigation Error: header and footer configurations are missing.'); return; } // Relative path can't be used, as the script will run on consumer's app @@ -69,21 +66,20 @@ export default async function loadBlock(configs, customLib) { ...paramConfigs, }; setConfig(clientConfig); - - try { - for await (const block of blockConfig) { - const configBlock = configs[block.key]; + for await (const block of blockConfig) { + const configBlock = configs[block.key]; + try { if (configBlock) { await bootstrapBlock(`${miloLibs}/libs`, { ...block, ...(block.key === 'header' && { unavComponents: configBlock.unavComponents, redirect: configBlock.redirect }), }); + configBlock.onReady?.(); } + } catch (e) { + configBlock.onError?.(e); + throw e; } - onReady?.(); - } catch (e) { - onError?.(e); - throw e; } } diff --git a/test/navigation/navigation.test.js b/test/navigation/navigation.test.js index 96a412fe3a..a6b054d184 100644 --- a/test/navigation/navigation.test.js +++ b/test/navigation/navigation.test.js @@ -13,6 +13,7 @@ describe('Navigation component', async () => { stub(window, 'fetch').callsFake(async (url) => { if (url.includes('/footer.plain.html')) return mockRes({ payload: await readFile({ path: '../blocks/region-nav/mocks/regions.html' }) }); if (url.includes('/federal/dev/gnav.plain.html')) return mockRes({ payload: await readFile({ path: './mocks/gnav.html' }) }); + if (url.includes('/federal/error/gnav.plain.html')) return mockRes({ payload: {}, status: 404 }); return null; }); @@ -24,38 +25,38 @@ describe('Navigation component', async () => { }); it('Renders the footer block', async () => { - const onReady = stub(); - await loadBlock({ authoringPath: '/federal/dev', footer: { privacyId: '12343' }, env: 'qa', onReady }, 'http://localhost:2000'); + await loadBlock({ authoringPath: '/federal/dev', footer: { privacyId: '12343' }, env: 'qa' }, 'http://localhost:2000'); const el = document.getElementsByTagName('footer'); expect(el).to.exist; - expect(onReady.called).to.be.true; }); it('Renders the footer block should not load when config is not passed', async () => { try { - await loadBlock({ authoringPath: '/federal/dev-new', env: 'qa', footer: { privacyId: '12343' } }, 'http://localhost:2000'); + const onError = stub(); + await loadBlock({ authoringPath: '/federal/dev-new', env: 'qa', footer: { privacyId: '12343' }, header: { onError } }, 'http://localhost:2000'); const el = document.getElementsByTagName('footer'); expect(el).to.not.exist; + expect(onError.called).to.be.true; } catch (e) { // handle error } }); it('Renders the header block', async () => { - await loadBlock({ authoringPath: '/federal/dev', header: { imsClientId: 'fedsmilo' }, env: 'prod' }, 'http://localhost:2000'); + const onReady = stub(); + await loadBlock({ authoringPath: '/federal/dev', header: { imsClientId: 'fedsmilo', onReady }, env: 'prod' }, 'http://localhost:2000'); const el = document.getElementsByTagName('header'); expect(el).to.exist; + expect(onReady.called).to.be.true; }); it('Does not render either header or footer if not found in configs', async () => { - const onError = stub(); document.body.innerHTML = await readFile({ path: './mocks/body.html' }); - await loadBlock({ authoringPath: '/federal/dev', env: 'qa', onError }, 'http://localhost:2000'); + await loadBlock({ authoringPath: '/federal/dev', env: 'qa' }, 'http://localhost:2000'); const header = document.getElementsByTagName('header'); const footer = document.getElementsByTagName('footer'); expect(header).to.be.empty; expect(footer).to.be.empty; - expect(onError.called).to.be.true; }); it('Does not render either header or footer if configs is not passed', async () => { From 738e64458686b269455d5bf90bfdafc35f45d4fd Mon Sep 17 00:00:00 2001 From: Bandana Laishram Date: Thu, 19 Sep 2024 15:55:29 +0530 Subject: [PATCH 13/18] Updating test case to include header load --- test/utils/mocks/body-gnav.html | 36 +++++++++++++++++++++++++++++++++ test/utils/utils.test.js | 8 ++++++++ 2 files changed, 44 insertions(+) create mode 100644 test/utils/mocks/body-gnav.html diff --git a/test/utils/mocks/body-gnav.html b/test/utils/mocks/body-gnav.html new file mode 100644 index 0000000000..77a1ee40c3 --- /dev/null +++ b/test/utils/mocks/body-gnav.html @@ -0,0 +1,36 @@ +
+
+ +
+
+ +
+
+
+
+ +
+
+
+

Just link

+
+
+
diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js index d82a7123f0..619c418382 100644 --- a/test/utils/utils.test.js +++ b/test/utils/utils.test.js @@ -74,6 +74,14 @@ describe('Utils', () => { }); }); + it('renders global navigation when header tag is present', async ()=> { + const bodyWithheader = await readFile({ path: './mocks/body-gnav.html' }); + document.head.innerHTML = head; + document.body.innerHTML = bodyWithheader; + await utils.loadArea(); + expect(document.querySelector('.global-navigation')).to.exist; + }); + describe('with body', () => { beforeEach(async () => { window.fetch = mockFetch({ payload: { data: '' } }); From 787cf1ad4fea1a3dde73585be30dc997cb6f03dd Mon Sep 17 00:00:00 2001 From: Bandana Laishram Date: Thu, 19 Sep 2024 15:57:27 +0530 Subject: [PATCH 14/18] Lint fix --- test/utils/utils.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js index 619c418382..774f1959b0 100644 --- a/test/utils/utils.test.js +++ b/test/utils/utils.test.js @@ -74,7 +74,7 @@ describe('Utils', () => { }); }); - it('renders global navigation when header tag is present', async ()=> { + it('renders global navigation when header tag is present', async () => { const bodyWithheader = await readFile({ path: './mocks/body-gnav.html' }); document.head.innerHTML = head; document.body.innerHTML = bodyWithheader; From e6e537afb52275e24554982fa93a5c42854ff3fb Mon Sep 17 00:00:00 2001 From: Bandana Laishram Date: Mon, 23 Sep 2024 11:56:35 +0530 Subject: [PATCH 15/18] Fix: Moving error message to global navigation block --- libs/blocks/global-navigation/global-navigation.js | 5 +++++ libs/utils/utils.js | 14 +++----------- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js index dfd612c281..093b3c3209 100644 --- a/libs/blocks/global-navigation/global-navigation.js +++ b/libs/blocks/global-navigation/global-navigation.js @@ -1038,6 +1038,11 @@ export default async function init(block) { const error = new Error('Could not create global navigation. Content not found!'); error.tags = 'errorType=error,module=gnav'; error.url = url; + window.lana.log(`${error.message} | gnav-source: ${error.url} | href: ${window.location.href}`, { + clientId: 'feds-milo', + sampleRate: 1, + tags: error.tags, + }); throw error; } const gnav = new Gnav({ diff --git a/libs/utils/utils.js b/libs/utils/utils.js index a74596c33f..b31c6c455f 100644 --- a/libs/utils/utils.js +++ b/libs/utils/utils.js @@ -1058,17 +1058,9 @@ async function loadPostLCP(config) { } const header = document.querySelector('header'); if (header) { - try { - header.classList.add('gnav-hide'); - await loadBlock(header); - header.classList.remove('gnav-hide'); - } catch (e) { - window.lana.log(`${e.message} | gnav-source: ${e.url} | href: ${window.location.href}`, { - clientId: 'feds-milo', - sampleRate: 1, - tags: e.tags, - }); - } + header.classList.add('gnav-hide'); + await loadBlock(header); + header.classList.remove('gnav-hide'); } loadTemplate(); const { default: loadFonts } = await import('./fonts.js'); From 493de8e08fda8f3300c4d97244ef8ffbbc93fdff Mon Sep 17 00:00:00 2001 From: Bandana Laishram Date: Mon, 23 Sep 2024 15:04:38 +0530 Subject: [PATCH 16/18] Not blocking rendering for footer --- libs/navigation/navigation.js | 1 - 1 file changed, 1 deletion(-) diff --git a/libs/navigation/navigation.js b/libs/navigation/navigation.js index a9ba49384e..afd835a982 100644 --- a/libs/navigation/navigation.js +++ b/libs/navigation/navigation.js @@ -78,7 +78,6 @@ export default async function loadBlock(configs, customLib) { } } catch (e) { configBlock.onError?.(e); - throw e; } } } From 62987f65c44ed57f539bc997efbf9069c9cd5d6b Mon Sep 17 00:00:00 2001 From: Bandana Laishram Date: Tue, 24 Sep 2024 11:15:24 +0530 Subject: [PATCH 17/18] Using lana log from utilities --- libs/blocks/global-navigation/global-navigation.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js index 093b3c3209..9126740c39 100644 --- a/libs/blocks/global-navigation/global-navigation.js +++ b/libs/blocks/global-navigation/global-navigation.js @@ -1038,11 +1038,7 @@ export default async function init(block) { const error = new Error('Could not create global navigation. Content not found!'); error.tags = 'errorType=error,module=gnav'; error.url = url; - window.lana.log(`${error.message} | gnav-source: ${error.url} | href: ${window.location.href}`, { - clientId: 'feds-milo', - sampleRate: 1, - tags: error.tags, - }); + lanaLog({ message: error.message, error, tags: 'errorType=error,module=gnav' }); throw error; } const gnav = new Gnav({ From 40b7b0c335d0f1169018f86f34891bb0d583ef5b Mon Sep 17 00:00:00 2001 From: Bandana Laishram Date: Tue, 24 Sep 2024 11:18:16 +0530 Subject: [PATCH 18/18] Removing console error --- libs/blocks/global-navigation/utilities/utilities.js | 1 - 1 file changed, 1 deletion(-) diff --git a/libs/blocks/global-navigation/utilities/utilities.js b/libs/blocks/global-navigation/utilities/utilities.js index f36f549910..fcbd01abac 100644 --- a/libs/blocks/global-navigation/utilities/utilities.js +++ b/libs/blocks/global-navigation/utilities/utilities.js @@ -42,7 +42,6 @@ export const lanaLog = ({ message, e = '', tags = 'errorType=default' }) => { sampleRate: 1, tags, }); - console.error(message); }; export const logErrorFor = async (fn, message, tags) => {