MWPW-143904-Unit test and small authoring update for mobile-app-banner

libs/blocks/mobile-app-banner/mobile-app-banner.js

@@ -62,8 +62,8 @@ function branchInit(header, key) {
 export default async function init(el) {
   const header = document.querySelector('.global-navigation');
   if (!header) return;
-  const row = el.querySelector(':scope > div');
-  const product = row.textContent.trim().toLowerCase();
+  const classListArray = Array.from(el.classList);
+  const product = classListArray.find((token) => token.startsWith('product-')).split('-')[1];
   const key = await getKey(product);
   if (key) branchInit(header, key);
 }

test/blocks/mobile-app-banner/mobile-app-banner.test.js

@@ -0,0 +1,70 @@
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import sinon from 'sinon';
+import { delay } from '../../helpers/waitfor.js';
+
+const { setConfig } = await import('../../../libs/utils/utils.js');
+
+const mockConfig = { contentRoot: '/test/blocks/mobile-app-banner/mocks' };
+setConfig(mockConfig);
+
+describe('mobile-app-banner', () => {
+  beforeEach(async () => {
+    document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+    document.head.innerHTML = '<script/>'; // This block needs a script in head.
+  });
+  afterEach(() => {
+    sinon.restore();
+  });
+
+  it('should not call branch init if no branch-io-key.json', async () => {
+    sinon.stub(window, 'fetch');
+    const res = new window.Response('Not found', { status: 404 });
+    window.fetch.returns(Promise.resolve(res));
+
+    const module = await import('../../../libs/blocks/mobile-app-banner/mobile-app-banner.js');
+    const banner = document.body.querySelector('.mobile-app-banner.product-test');
+    await module.default(banner);
+    window.dispatchEvent(new CustomEvent('adobePrivacy:PrivacyConsent'));
+    await delay(100);
+
+    const scriptTags = document.querySelectorAll('head > script');
+    const scriptSrcs = [];
+    scriptTags.forEach((scriptTag) => {
+      scriptSrcs.push(scriptTag.getAttribute('src'));
+    });
+    expect(scriptSrcs).to.not.include('https://cdn.branch.io/branch-latest.min.js');
+  });
+
+  it('should not call branch init if product not found in branch-io-key file', async () => {
+    const module = await import('../../../libs/blocks/mobile-app-banner/mobile-app-banner.js');
+    const banner = document.body.querySelector('.mobile-app-banner.product-test1');
+    await module.default(banner);
+    window.dispatchEvent(new CustomEvent('adobePrivacy:PrivacyConsent'));
+    await delay(100);
+
+    const scriptTags = document.querySelectorAll('head > script');
+    const scriptSrcs = [];
+    scriptTags.forEach((scriptTag) => {
+      if (scriptTag.getAttribute('src') !== null) scriptSrcs.push(scriptTag.getAttribute('src'));
+    });
+    expect(scriptSrcs).to.not.include('https://cdn.branch.io/branch-latest.min.js');
+  });
+
+  it('should init by adding branchio script', async () => {
+    window.adobePrivacy = { hasUserProvidedConsent: () => true };
+    const module = await import('../../../libs/blocks/mobile-app-banner/mobile-app-banner.js');
+    const banner = document.body.querySelector('.mobile-app-banner.product-test');
+    await module.default(banner);
+    window.dispatchEvent(new CustomEvent('adobePrivacy:PrivacyConsent'));
+    await delay(100);
+    window.dispatchEvent(new CustomEvent('adobePrivacy:PrivacyCustom')); // no init twice
+    await delay(100);
+    const scriptTags = document.querySelectorAll('head > script');
+    const scriptSrcs = [];
+    scriptTags.forEach((scriptTag) => {
+      if (scriptTag.getAttribute('src') !== null) scriptSrcs.push(scriptTag.getAttribute('src'));
+    });
+    expect(scriptSrcs).to.include('https://cdn.branch.io/branch-latest.min.js');
+  });
+});

test/blocks/mobile-app-banner/mocks/body.html

@@ -0,0 +1,10 @@
+<header class="global-navigation" daa-im="true" daa-lh="gnav|milo"><div class="feds-curtain"></div><div class="feds-topnav-wrapper">
+</header>
+<div>Hello World</div>
+<div>
+  <div class="mobile-app-banner product-test">
+  </div>
+  <div>
+    <div class="mobile-app-banner product-test1">
+  </div>  
+</div>

test/blocks/mobile-app-banner/mocks/branch-io-key.json

@@ -0,0 +1,8 @@
+{
+  "data": [
+    {
+      "product": "test",
+      "key": "key_test_eaNdoH8nTxeZXfOsgkELrjgpFrhm4q2m"
+    }
+  ]
+}