Fix flaky utils twitter unit test

test/helpers/generalHelpers.js

@@ -0,0 +1,12 @@
+import sinon from 'sinon';
+
+export const mockRes = ({ payload, status = 200, ok = true } = {}) => new Promise((resolve) => {
+  resolve({
+    status,
+    ok,
+    json: () => payload,
+    text: () => payload,
+  });
+});
+
+export const mockFetch = (payload) => sinon.stub().callsFake(() => mockRes(payload));

test/utils/mocks/body.html

@@ -1,44 +1,38 @@
-<header></header>
 <main>
   <div>
     <!-- Block Decorating -->
-    <div class="breadcrumbs"></div>
-    <div class="hero small light"></div>
-    <div class="hero"></div>
     <div id="not-block"></div>
     <!-- Picture Decorating -->
-    <p><em><picture><img src="/test/mocks/media_.png"/></picture></em></p>
-    <p><strong><picture><img src="/test/mocks/media_.png"/></picture></strong></p>
+    <p><em><picture><img src="http://localhost:2000/test/utils/mocks/media_.png"/></picture></em></p>
+    <p><strong><picture><img src="http://localhost:2000/test/utils/mocks/media_.png"/></picture></strong></p>
     <!-- Link Decorating -->
     <!-- Relative URLs -->
     <p><a href="https://test--milo--adobecom.hlx.page/test">Milo Test</a></p>
     <p><a href="https://milo.adobe.com/test">Milo Test</a></p>
     <p><a href="https://www.adobe.com/test">Milo Test</a></p>
     <!-- Auto Blocks -->
-    <p><a href="https://www.youtube.com/watch?v=0EWdoiU8BXw">YouTube</a></p>
-    <p><a href="https://milo.adobe.com/fragments/mock#otis">Open modal</a></p>
+    <p><a href="https://www.youtube.com/watch?v=0EWdoiU8BXw#_dnb">YouTube</a></p>
+    <p><a href="https://milo.adobe.com/fragments/mock#otis#_dnb">Open modal</a></p>
     <p><a href="https://documentcloud.adobe.com/view-sdk/PDFs/test.pdf">View PDF</a></p>
     <!-- Fragments -->
     <p><a href="https://milo.adobe.com/fragments/mock">https://milo.adobe.com/fragments/mock</a></p>
     <p>My sibling content<a href="https://milo.adobe.com/fragments/mock">https://milo.adobe.com/fragments/mock</a></p>
     <ul><li>My sibling content<a href="https://milo.adobe.com/fragments/mock">https://milo.adobe.com/fragments/mock</a></li></ul>
     <!-- SVGs -->
-    <p><a href="https://milo.adobe.com/img/favicon.svg">https://milo.adobe.com/img/favicon.svg</a></p>
-    <p><a href="https://www.adobe.com">https://milo.adobe.com/img/favicon.svg</a></p>
-    <p><a class="bad-url" href="https://www.adobe.com">img/favicon.svg</a></p>
+    <p><a href="http://localhost:2000/img/favicon.svg">http://localhost:2000/img/favicon.svg</a></p>
+    <p><a href="http://localhost:2000">http://localhost:2000/img/favicon.svg</a></p>
     <!-- #_blank -->
     <p><a class="new-tab" href="https://www.adobe.com/test#_blank">New Tab</a></p>
     <!-- Nofollow -->
     <p><a href="https://analytics.google.com">Google analytics</a></p>
     <!-- Disable Auto Block-->
     <p><a class="disable-autoblock" href="https://www.instagram.com/#_dnb">Disable Autoblock</a></p>
     <!-- Auto Block -->
-    <p><a class="autoblock" href="https://twitter.com/Adobe">Auto Block</a></p>    
+    <p><a class="autoblock" href="https://twitter.com/Adobe#_dnb">Auto Block</a></p>    
   </div>
   <!-- Default content -->
   <div>
     <p>I'm not a blockhead.</p>
     <p>{{nothing-to-see-here}}</p>
   </div>
 </main>
-<footer></footer>

test/utils/mocks/head.html

@@ -2,3 +2,4 @@
 <link rel="icon" href="data:,">
 <meta name="hlx-url" content="https://www.hlx.live/otis">
 <meta name="footer-promo-tag" content="ccx-video-links">
+<meta name='martech' content='off'>

test/utils/utils.test.js

@@ -2,37 +2,48 @@ import { readFile } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
 import { waitForElement } from '../helpers/waitfor.js';
+import { mockFetch } from '../helpers/generalHelpers.js';
 
 const utils = {};
 
 const config = {
   codeRoot: '/libs',
   locales: { '': { ietf: 'en-US', tk: 'hah7vzn.css' } },
 };
+const ogFetch = window.fetch;
 
 describe('Utils', () => {
+  let head;
+  let body;
   before(async () => {
+    head = await readFile({ path: './mocks/head.html' });
+    body = await readFile({ path: './mocks/body.html' });
     const module = await import('../../libs/utils/utils.js');
     module.setConfig(config);
     Object.keys(module).forEach((func) => {
       utils[func] = module[func];
     });
+    window.hlx = { rum: { isSelected: false } };
+  });
+
+  after(() => {
+    delete window.hlx;
   });
 
   describe('with body', () => {
-    before(() => {
+    beforeEach(async () => {
+      window.fetch = mockFetch({ payload: { data: '' } });
+      document.head.innerHTML = head;
+      document.body.innerHTML = body;
+      await utils.loadArea();
       sinon.spy(console, 'log');
     });
 
-    after(() => {
+    afterEach(() => {
+      window.fetch = ogFetch;
       console.log.restore();
     });
 
-    before(async () => {
-      document.head.innerHTML = await readFile({ path: './mocks/head.html' });
-      document.body.innerHTML = await readFile({ path: './mocks/body.html' });
-    });
-
     describe('Template', () => {
       it('loads a template script and style', async () => {
         const meta = document.createElement('meta');
@@ -62,7 +73,8 @@ describe('Utils', () => {
       });
 
       it('Auto block works as expected when #_dnb is not added to url', async () => {
-        await waitForElement('[href="https://twitter.com/Adobe"]');
+        const a = await waitForElement('[href="https://twitter.com/Adobe"]');
+        utils.decorateAutoBlock(a);
         const autoBlockLink = document.querySelector('[href="https://twitter.com/Adobe"]');
         expect(autoBlockLink.className).to.equal('twitter link-block');
       });
@@ -114,7 +126,9 @@ describe('Utils', () => {
     });
 
     it('Does not setup nofollow links', async () => {
-      const gaLink = document.querySelector('a[href="https://analytics.google.com"]');
+      window.fetch = mockFetch({ payload: { data: [] } });
+      await utils.loadDeferred(document, [], { links: 'on' });
+      const gaLink = document.querySelector('a[href="https://analytics.google.com/"]');
       expect(gaLink.getAttribute('rel')).to.be.null;
     });
 
@@ -215,9 +229,11 @@ describe('Utils', () => {
 
     describe('SVGs', () => {
       it('Not a valid URL', () => {
+        document.body.innerHTML = '<div class="bad-url">https://www.adobe.com/test</div>';
         const a = document.querySelector('.bad-url');
         try {
-          const textContentUrl = new URL(a.textContent);
+          // eslint-disable-next-line no-new
+          new URL(a.textContent);
         } catch (err) {
           expect(err.message).to.equal("Failed to construct 'URL': Invalid URL");
         }
@@ -260,7 +276,7 @@ describe('Utils', () => {
     });
 
     describe('localizeLink', () => {
-      before(async () => {
+      before(() => {
         config.locales = {
           '': { ietf: 'en-US', tk: 'hah7vzn.css' },
           fi: { ietf: 'fi-FI', tk: 'aaz7dvd.css' },
@@ -269,7 +285,6 @@ describe('Utils', () => {
         };
         config.prodDomains = ['milo.adobe.com', 'www.adobe.com'];
         config.pathname = '/be_fr/page';
-        config.origin = 'https://main--milo--adobecom';
         utils.setConfig(config);
       });