MWPW-135830 - Decorate Area for fragments (#1520)

* mediaPrefix for medias on adobe.com root

* remove mediaPrefix, added decorateArea and run it before decorating area

* decorateArea() on fragments

* remove unwanted change

* replaceDotMedia()

* restoring decorateArea(doc)

* remove replaceDotMedia since it will be handled from #1523

* remove the test

* same as before

* added test for decorateArea()

---------

Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>
Co-authored-by: Honwai Wong <honstar.wong@gmail.com>

libs/blocks/fragment/fragment.js

@@ -48,7 +48,7 @@ const insertInlineFrag = (sections, a) => {
 };
 
 export default async function init(a) {
-  const { expFragments } = getConfig();
+  const { expFragments, decorateArea } = getConfig();
   let relHref = localizeLink(a.href);
   let inline = false;
   if (expFragments?.[relHref]) {
@@ -72,6 +72,9 @@ export default async function init(a) {
 
   const html = await resp.text();
   const doc = new DOMParser().parseFromString(html, 'text/html');
+
+  if (decorateArea) decorateArea(doc);
+
   const sections = doc.querySelectorAll('body > div');
 
   if (!sections.length) {

test/blocks/fragment/fragment.test.js

@@ -5,11 +5,16 @@ import { getLocale, loadArea, setConfig } from '../../../libs/utils/utils.js';
 
 window.lana = { log: stub() };
 
+const decorateArea = (doc) => {
+  doc.querySelector('picture.frag-image')?.classList.add('decorated');
+};
+
 const locales = { '': { ietf: 'en-US', tk: 'hah7vzn.css' } };
 const config = {
   imsClientId: 'milo',
   codeRoot: '/libs',
   contentRoot: `${window.location.origin}${getLocale(locales).prefix}`,
+  decorateArea,
   locales,
 };
 setConfig(config);
@@ -58,4 +63,11 @@ describe('Fragments', () => {
     expect(cols.querySelector('.aside').style.background).to.equal('rgb(238, 238, 238)');
     expect(cols.innerHTML.includes('Hello World!!!')).to.be.true;
   });
+
+  it('"decorated" class added by decorateArea()', async () => {
+    const a = document.querySelector('a.frag-image');
+    await getFragment(a);
+    const pic = document.querySelector('picture.frag-image');
+    expect(pic.classList.contains('decorated')).to.be.true;
+  });
 });

test/blocks/fragment/mocks/body.html

@@ -4,6 +4,7 @@
 <a class="malformed" href="/test/blocks/fragment/mocks/fragments/malform">Fragment</a>
 <a class="parent-link" href="/test/blocks/fragment/mocks/fragments/fragment">Fragment</a>
 <a class="frag-a" href="/test/blocks/fragment/mocks/fragments/frag-a">Fragment</a>
+<a class="frag-image" href="/test/blocks/fragment/mocks/fragments/frag-image">Fragment</a>
 <div class="parent"></div>
 <div class="marquee-section">
   <div>

test/blocks/fragment/mocks/fragments/frag-image.plain.html

@@ -0,0 +1,10 @@
+<div>
+  <p><strong>Test:</strong><br>
+    <picture class="frag-image">
+      <source type="image/webp" srcset="data:," media="(min-width: 600px)">
+      <source type="image/webp" srcset="data:,">
+      <source type="image/png" srcset="data:," media="(min-width: 600px)">
+      <img alt="" src="data:," width="1440" height="992">
+    </picture>
+  </p>
+</div>