MWPW-136383 - Add off-origin ability to links.js (#1455)

* Add off-origin ability to links.js

If off-origin keyword is set in links.json any link that doesn't match the site origin will open in a new tab.

More detailed explanatory text. Wrap at 72 characters.

* Adding unit tests

---------

Co-authored-by: Ryan Clayton <[email protected]>

libs/features/links.js

@@ -1,7 +1,7 @@
 let fetched = false;
 let linkData = null;
 
-const getLinks = async (path) => {
+const fetchSeoLinks = async (path) => {
   if (!path) return null;
   if (!fetched) {
     const resp = await fetch(path);
@@ -15,14 +15,17 @@ const getLinks = async (path) => {
 };
 
 export default async function init(path, area = document) {
-  const data = await getLinks(path);
-  if (!data) return;
-  const links = area.querySelectorAll('a:not([href^="/"])');
-  [...links].forEach((link) => {
-    data.filter((s) => link.href.startsWith(s.domain))
+  const seoLinks = await fetchSeoLinks(path);
+  if (!seoLinks) return;
+  const { origin } = window.location;
+  const pageLinks = area.querySelectorAll('a:not([href^="/"])');
+  [...pageLinks].forEach((link) => {
+    seoLinks
+      .filter((s) => link.href.startsWith(s.domain)
+        || (s.domain === 'off-origin' && !link.href.startsWith(origin)))
       .forEach((s) => {
         if (s.rel) link.setAttribute('rel', s.rel);
-        if (s.window) link.setAttribute('target', s.window);
+        if (s.window && !link.getAttribute('target')) link.setAttribute('target', s.window);
       });
   });
 }

test/blocks/links/links-off-origin.test.js

@@ -0,0 +1,17 @@
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import linkHandlers from '../../../libs/features/links.js';
+
+document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+
+describe('Off origin links', () => {
+  it('Sets target correctly', async () => {
+    await linkHandlers('/test/blocks/links/mocks/off-origin.json');
+    const links = document.body.querySelectorAll('a');
+
+    expect(links[0].getAttribute('target')).to.equal('_blank');
+    expect(links[1].getAttribute('target')).to.equal(null);
+    expect(links[2].getAttribute('target')).to.equal('_blank');
+    expect(links[3].getAttribute('target')).to.equal('_blank');
+  });
+});

test/blocks/links/mocks/body.html

@@ -1,3 +1,4 @@
 <p>Lorem ipsum dolor sit amet, <a href="https://analytics.google.com">consectetuer adipiscing elit</a>.</p>
 <p>Lorem ipsum dolor sit amet, <a href="/this/is/a/relative/link">relative link</a>.</p>
 <p>Lorem ipsum dolor sit amet, <a href="https://shopify.com">shopify link</a>.</p>
+<p>Go to Adobe, <a href="https://adobe.com">off-origin link</a>.</p>

test/blocks/links/mocks/off-origin.json

@@ -0,0 +1,23 @@
+{
+  "total": 2,
+  "offset": 0,
+  "limit": 2,
+  "data": [
+    {
+      "domain": "https://analytics.google.com",
+      "window": "_blank",
+      "rel": "nofollow noopener noreferrer"
+    },
+    {
+      "domain": "https://www.shopify.com",
+      "window": "",
+      "rel": ""
+    },
+    {
+      "domain": "off-origin",
+      "window": "_blank",
+      "rel": ""
+    }
+  ],
+  ":type": "sheet"
+}