[MILO] Allow svg or media files to be located in a fragments folder (a…

…dobecom#1966)

* fix if svg is located in fragments folder

* update to handle any file that is not a fragment

* unit test

* better placement

* update existing file reference

no idea how this was working with the incorrect reference

* add carve out for mp4

Noticed that there is code in this if statement for mp4 in the fragments folder that can't be reached

* save match result so I do not have to match twice

* update nameSplit to hasExtension per Slack request

* update hasExtension to use include instead of length

---------

Co-authored-by: Blaine Gunn <[email protected]>

libs/utils/utils.js

@@ -562,7 +562,9 @@ export function decorateAutoBlock(a) {
       return false;
     }
 
-    if (key === 'fragment') {
+    const hasExtension = a.href.split('/').pop().includes('.');
+    const mp4Match = a.textContent.match('media_.*.mp4');
+    if (key === 'fragment' && (!hasExtension || mp4Match)) {
       if (a.href === window.location.href) {
         return false;
       }
@@ -579,7 +581,7 @@ export function decorateAutoBlock(a) {
       }
 
       // previewing a fragment page with mp4 video
-      if (a.textContent.match('media_.*.mp4')) {
+      if (mp4Match) {
         a.className = 'video link-block';
         return false;
       }

test/utils/mocks/svg.html

@@ -2,6 +2,8 @@
 
 <a href="https://milo.adobe.com/my-icon.svg" id="fully-qualified">https://milo.adobe.com/my-icon.svg</a>
 
+<a href="https://milo.adobe.com/fragments/my-icon.svg" id="in-fragments-folder">https://milo.adobe.com/fragments/my-icon.svg</a>
+
 <a href="/my-icon.svg" id="alttext">https://main--milo--adobecom.hlx.page/my-icon.svg | My Icon</a>
 
 <a href="/my-icon.svg" id="alttext-pipe">https://main--milo--adobecom.hlx.page/my-icon.svg | My Icon | Is cool</a>

test/utils/svg.test.js

@@ -1,7 +1,7 @@
 import { readFile } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
-import { decorateSVG } from '../../../libs/utils/utils.js';
+import { decorateSVG } from '../../libs/utils/utils.js';
 
 document.body.innerHTML = await readFile({ path: './mocks/svg.html' });
 
@@ -30,6 +30,13 @@ describe('Decorate SVGs', () => {
     expect(pic.querySelector('img').src).to.equal('https://milo.adobe.com/my-icon.svg');
   });
 
+  it('Fully qualified SVG', async () => {
+    const el = document.querySelector('#in-fragments-folder');
+    const pic = decorateSVG(el);
+    expect(pic.nodeName).to.equal('PICTURE');
+    expect(pic.querySelector('img').src).to.equal('https://milo.adobe.com/fragments/my-icon.svg');
+  });
+
   it('Alt text SVG', async () => {
     const el = document.querySelector('#alttext');
     const pic = decorateSVG(el);