From b00edd8abc4ecd1c008027f912468d833ac6cd64 Mon Sep 17 00:00:00 2001
From: Okan Sahin <osahin@adobe.com>
Date: Mon, 26 Jun 2023 17:46:52 +0200
Subject: [PATCH 1/4] Fix flaky utils twitter test

---
 test/helpers/generalHelpers.js | 12 ++++++++++++
 test/utils/mocks/body.html     | 26 ++++++++++----------------
 test/utils/mocks/head.html     |  1 +
 test/utils/utils.test.js       | 34 ++++++++++++++++++++++------------
 4 files changed, 45 insertions(+), 28 deletions(-)
 create mode 100644 test/helpers/generalHelpers.js

diff --git a/test/helpers/generalHelpers.js b/test/helpers/generalHelpers.js
new file mode 100644
index 0000000000..23bb5b33a9
--- /dev/null
+++ b/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));
diff --git a/test/utils/mocks/body.html b/test/utils/mocks/body.html
index e8f87aa195..c5177bc7d3 100644
--- a/test/utils/mocks/body.html
+++ b/test/utils/mocks/body.html
@@ -1,31 +1,26 @@
-<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>
+      <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 -->
@@ -33,7 +28,7 @@
     <!-- 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>
@@ -41,4 +36,3 @@
     <p>{{nothing-to-see-here}}</p>
   </div>
 </main>
-<footer></footer>
diff --git a/test/utils/mocks/head.html b/test/utils/mocks/head.html
index 0ddf2da070..715371ca85 100644
--- a/test/utils/mocks/head.html
+++ b/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'>
\ No newline at end of file
diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js
index 774c51009b..4db5c6bb69 100644
--- a/test/utils/utils.test.js
+++ b/test/utils/utils.test.js
@@ -2,6 +2,7 @@ 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 = {};
 
@@ -9,9 +10,14 @@ 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) => {
@@ -20,19 +26,19 @@ describe('Utils', () => {
   });
 
   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 +68,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 +121,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 +224,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 +271,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 +280,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);
       });
 

From 87fda30d3ef2239dec09efb5f97dcf82cf533e9d Mon Sep 17 00:00:00 2001
From: Okan Sahin <osahin@adobe.com>
Date: Mon, 26 Jun 2023 17:50:27 +0200
Subject: [PATCH 2/4] Add EOF for head.html

---
 test/utils/mocks/head.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/utils/mocks/head.html b/test/utils/mocks/head.html
index 715371ca85..669f58a4d1 100644
--- a/test/utils/mocks/head.html
+++ b/test/utils/mocks/head.html
@@ -2,4 +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'>
\ No newline at end of file
+<meta name='martech' content='off'>

From 0e6c0f240eb75ea42926e3628371402273068248 Mon Sep 17 00:00:00 2001
From: Okan Sahin <osahin@adobe.com>
Date: Mon, 26 Jun 2023 18:02:07 +0200
Subject: [PATCH 3/4] Do not accidently select tests for RUM collection

---
 test/utils/utils.test.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js
index 4db5c6bb69..a23324093b 100644
--- a/test/utils/utils.test.js
+++ b/test/utils/utils.test.js
@@ -23,6 +23,11 @@ describe('Utils', () => {
     Object.keys(module).forEach((func) => {
       utils[func] = module[func];
     });
+    window.hlx = { rum: { isSelected: false } };
+  });
+
+  after(() => {
+    delete window.hlx;
   });
 
   describe('with body', () => {

From 6e02e4ed9665eb2f5d9cc5aeee45421ca12f8285 Mon Sep 17 00:00:00 2001
From: Okan Sahin <osahin@adobe.com>
Date: Mon, 26 Jun 2023 18:20:16 +0200
Subject: [PATCH 4/4] Remove weird indentation

---
 test/utils/mocks/body.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/test/utils/mocks/body.html b/test/utils/mocks/body.html
index c5177bc7d3..daa39dda36 100644
--- a/test/utils/mocks/body.html
+++ b/test/utils/mocks/body.html
@@ -12,12 +12,12 @@
     <p><a href="https://www.adobe.com/test">Milo Test</a></p>
     <!-- Auto Blocks -->
     <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://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>
+    <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="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>