MWPW-141447 Support inline fragments with MEP replaceFragment (adobec…

…om#1753)

* MWPW-141447 Support inline fragments with MEP replaceFragment

* Set data-path for inline fragment content

libs/blocks/fragment/fragment.js

@@ -37,9 +37,10 @@ const setManifestIdOnChildren = (sections, manifestId) => {
   );
 };
 
-const insertInlineFrag = (sections, a) => {
+const insertInlineFrag = (sections, a, relHref) => {
   // Inline fragments only support one section, other sections are ignored
   const fragChildren = [...sections[0].children];
+  fragChildren.forEach((child) => child.setAttribute('data-path', relHref));
   if (a.parentElement.nodeName === 'DIV' && !a.parentElement.attributes.length) {
     a.parentElement.replaceWith(...fragChildren);
   } else {
@@ -61,6 +62,13 @@ export default async function init(a) {
   const { expFragments, decorateArea } = getConfig();
   let relHref = localizeLink(a.href);
   let inline = false;
+
+  if (a.href.includes('#_inline')) {
+    inline = true;
+    a.href = a.href.replace('#_inline', '');
+    relHref = relHref.replace('#_inline', '');
+  }
+
   if (expFragments?.[relHref]) {
     a.href = expFragments[relHref];
     relHref = expFragments[relHref];
@@ -69,10 +77,7 @@ export default async function init(a) {
     window.lana?.log(`ERROR: Fragment Circular Reference loading ${a.href}`);
     return;
   }
-  if (a.href.includes('#_inline')) {
-    inline = true;
-    a.href = a.href.replace('#_inline', '');
-  }
+
   const resp = await fetch(`${a.href}.plain.html`);
 
   if (!resp.ok) {
@@ -109,7 +114,7 @@ export default async function init(a) {
   }
 
   if (inline) {
-    insertInlineFrag(sections, a);
+    insertInlineFrag(sections, a, relHref);
   } else {
     a.parentElement.replaceChild(fragment, a);
     await loadArea(fragment);

test/features/personalization/mocks/inlineFragReplaced.plain.html

@@ -0,0 +1,3 @@
+<div>
+  <h3 class="inlinefragmentreplaced">The inline fragment has been replaced!</h3>
+</div>

test/features/personalization/mocks/manifestReplaceFragment.json

@@ -12,6 +12,16 @@
       "firefox": "",
       "android": "",
       "ios": ""
+    },
+    {
+      "action": "replaceFragment",
+      "selector": "/fragments/inline-replaceme",
+      "page filter (optional)": "",
+      "param-newoffer=123": "",
+      "chrome": "/fragments/inline-fragmentreplaced",
+      "firefox": "",
+      "android": "",
+      "ios": ""
     }
   ],
   ":type": "sheet"

test/features/personalization/mocks/personalization.html

@@ -107,6 +107,14 @@ <h2 id="how-to-leverage-milo-experimentation-platform">How to leverage Milo Expe
             <div>Old Promo Block</div>
           </div>
         </div>
+        <div class="text center xxxl-spacing-bottom">
+          <div>
+            <div data-valign="middle">
+              <p><a href="/fragments/inline-replaceme#_inline">/fragments/inline-replaceme</a></p>
+              <p><strong><em><a href="/resources/main">See all resources</a></em></strong></p>
+            </div>
+          </div>
+        </div>
         <div class="myblock">This block does not exist</div>
       </div>
     </main>

test/features/personalization/personalization.test.js

@@ -9,15 +9,15 @@ import { applyPers } from '../../../libs/features/personalization/personalizatio
 document.head.innerHTML = await readFile({ path: './mocks/metadata.html' });
 document.body.innerHTML = await readFile({ path: './mocks/personalization.html' });
 
+const getFetchPromise = (data, type = 'json') => new Promise((resolve) => {
+  resolve({
+    ok: true,
+    [type]: () => data,
+  });
+});
+
 const setFetchResponse = (data, type = 'json') => {
-  window.fetch = stub().returns(
-    new Promise((resolve) => {
-      resolve({
-        ok: true,
-        [type]: () => data,
-      });
-    }),
-  );
+  window.fetch = stub().returns(getFetchPromise(data, type));
 };
 
 // Modify the entitlement map with custom keys so tests doesn't rely on real data
@@ -69,6 +69,7 @@ describe('Functional Test', () => {
 
   it('insertContentBefore should add fragment before target element', async () => {
     let manifestJson = await readFile({ path: './mocks/manifestInsertContentBefore.json' });
+
     manifestJson = JSON.parse(manifestJson);
     setFetchResponse(manifestJson);
 
@@ -82,21 +83,34 @@ describe('Functional Test', () => {
   });
 
   it('replaceFragment should replace a fragment in the document', async () => {
+    document.body.innerHTML = await readFile({ path: './mocks/personalization.html' });
+
     let manifestJson = await readFile({ path: './mocks/manifestReplaceFragment.json' });
     manifestJson = JSON.parse(manifestJson);
     setFetchResponse(manifestJson);
 
-    expect(document.querySelector('a[href="/fragments/replaceme"]')).to.not.be.null;
+    expect(document.querySelector('a[href="/fragments/replaceme"]')).to.exist;
+    expect(document.querySelector('a[href="/fragments/inline-replaceme#_inline"]')).to.exist;
     await applyPers([{ manifestPath: '/path/to/manifest.json' }]);
 
     const fragmentResp = await readFile({ path: './mocks/fragmentReplaced.plain.html' });
-    setFetchResponse(fragmentResp, 'text');
+    const inlineFragmentResp = await readFile({ path: './mocks/inlineFragReplaced.plain.html' });
+
+    window.fetch = stub();
+    window.fetch.withArgs('http://localhost:2000/fragments/fragmentreplaced.plain.html')
+      .returns(getFetchPromise(fragmentResp, 'text'));
+    window.fetch.withArgs('http://localhost:2000/fragments/inline-fragmentreplaced.plain.html')
+      .returns(getFetchPromise(inlineFragmentResp, 'text'));
 
     const replacemeFrag = document.querySelector('a[href="/fragments/replaceme"]');
     await initFragments(replacemeFrag);
-
     expect(document.querySelector('a[href="/fragments/replaceme"]')).to.be.null;
-    expect(document.querySelector('div[data-path="/fragments/fragmentreplaced"]')).to.not.be.null;
+    expect(document.querySelector('div[data-path="/fragments/fragmentreplaced"]')).to.exist;
+
+    const inlineReplacemeFrag = document.querySelector('a[href="/fragments/inline-replaceme#_inline"]');
+    await initFragments(inlineReplacemeFrag);
+    expect(document.querySelector('a[href="/fragments/inline-replaceme#_inline"]')).to.be.null;
+    expect(document.querySelector('.inlinefragmentreplaced')).to.exist;
   });
 
   it('useBlockCode should override a current block with the custom block code provided', async () => {