[MWPW-155566] [MEP] Allow relevant actions in MEP to use text and HTML instead of just fragments

libs/features/personalization/preview.js

@@ -290,6 +290,7 @@ function addHighlightData(manifests) {
     selectedVariant?.updatemetadata?.forEach(({ selector }) => {
       if (selector === 'gnav-source') updateManifestId('header, footer');
     });
+
     // eslint-disable-next-line max-len
     document.querySelectorAll(`.section[class*="merch-cards"] .fragment[data-manifest-id="${manifestName}"] merch-card`)
       .forEach((el) => (el.dataset.manifestId = manifestName));

test/features/personalization/actions.test.js

@@ -86,6 +86,8 @@ describe('insertAfter action', async () => {
 
     expect(document.querySelector('a[href="/fragments/insertafter"]')).to.be.null;
     expect(document.querySelector('a[href="/fragments/insertafterfragment"]')).to.be.null;
+    expect(document.querySelector('#insertafter').getAttribute('href')).to.equal('/my-page.html');
+    expect(document.querySelector('#inserted-html')).to.be.null;
     await init(mepSettings);
     expect(getConfig().mep.commands[0].targetManifestId).to.equal(false);
 
@@ -98,6 +100,8 @@ describe('insertAfter action', async () => {
     expect(fragment).to.not.be.null;
 
     expect(fragment.parentElement.previousElementSibling.querySelector('a[href="/fragments/insertaround"]')).to.exist;
+    expect(document.querySelector('#insertafter').getAttribute('href')).to.equal('/my-page.html#modal');
+    expect(document.querySelector('#inserted-html')).to.not.be.null;
   });
 });
 
@@ -109,6 +113,7 @@ describe('insertBefore action', async () => {
     setFetchResponse(manifestJson);
 
     expect(document.querySelector('a[href="/fragments/insertbefore"]')).to.be.null;
+    expect(document.querySelector('#insertbefore').getAttribute('href')).to.equal('/my-page.html');
     await init(mepSettings);
     expect(getConfig().mep.commands[0].targetManifestId).to.equal(false);
 
@@ -121,11 +126,12 @@ describe('insertBefore action', async () => {
     expect(fragment).to.not.be.null;
 
     expect(fragment.parentElement.nextElementSibling.querySelector('a[href="/fragments/insertaround"]')).to.exist;
+    expect(document.querySelector('#insertbefore').getAttribute('href')).to.equal('/de/my-page.html');
   });
 });
 
 describe('prependToSection action', async () => {
-  it('appendToSection should add fragment to beginning of section', async () => {
+  it('prependToSection should add fragment to beginning of section', async () => {
     let manifestJson = await readFile({ path: './mocks/actions/manifestPrependToSection.json' });
 
     manifestJson = JSON.parse(manifestJson);
@@ -157,6 +163,34 @@ describe('appendToSection action', async () => {
   });
 });
 
+describe('replace action with html/text instead of fragment', () => {
+  it('should replace marquee content', async () => {
+    document.body.innerHTML = await readFile({ path: './mocks/personalization.html' });
+    let manifestJson = await readFile({ path: './mocks/actions/manifestUpdate.json' });
+    manifestJson = JSON.parse(manifestJson);
+    setFetchResponse(manifestJson);
+
+    const primaryCTA = document.querySelector('.marquee p strong a');
+    const secondaryCTA = document.querySelector('.marquee p a');
+    const header = document.querySelector('.marquee h2');
+    const actionArea = document.querySelector('main div:nth-child(5) .marquee p:has(em a, strong a)');
+
+    expect(header.innerText).to.not.equal('updated text');
+    expect(primaryCTA.innerText).to.not.equal('updated text');
+    expect(primaryCTA.href).to.not.equal('updated text');
+    expect(secondaryCTA.innerText).to.not.equal('updated text');
+    expect(actionArea.innerHTML).to.not.equal('<p>updated text</p>');
+
+    await init(mepSettings);
+
+    expect(header.innerText).to.equal('updated text');
+    expect(primaryCTA.innerText).to.equal('updated text');
+    expect(primaryCTA.href).to.equal('https://test.com/updated_href');
+    expect(secondaryCTA.innerText).to.equal('updated text');
+    expect(actionArea.innerHTML).to.equal('<p>updated text</p>');
+  });
+});
+
 describe('remove action', () => {
   before(async () => {
     let manifestJson = await readFile({ path: './mocks/actions/manifestRemove.json' });

test/features/personalization/actionsTargetManifestId.test.js

@@ -123,6 +123,30 @@ describe('appendToSection action', async () => {
   });
 });
 
+describe('replace action with html/text instead of fragment', () => {
+  it('should replace marquee content', async () => {
+    document.body.innerHTML = await readFile({ path: './mocks/personalization.html' });
+    let manifestJson = await readFile({ path: './mocks/actions/manifestTargetUpdate.json' });
+    manifestJson = JSON.parse(manifestJson);
+    setFetchResponse(manifestJson);
+
+    const primaryCTA = document.querySelector('.marquee p strong a');
+    const secondaryCTA = document.querySelector('.marquee p a');
+    const header = document.querySelector('.marquee h2');
+    const actionArea = document.querySelector('main div:nth-child(5) .marquee p:has(em a, strong a)');
+
+    expect(header.dataset.adobeTargetTestid).not.to.exist;
+    expect(primaryCTA.dataset.adobeTargetTestid).not.to.exist;
+    expect(secondaryCTA.dataset.adobeTargetTestid).not.to.exist;
+    expect(actionArea.dataset.adobeTargetTestid).not.to.exist;
+    await init(mepSettings);
+    expect(header.dataset.adobeTargetTestid).to.equal('manifest');
+    expect(primaryCTA.dataset.adobeTargetTestid).to.equal('manifest');
+    expect(secondaryCTA.dataset.adobeTargetTestid).to.equal('manifest');
+    expect(actionArea.dataset.adobeTargetTestid).to.equal('manifest');
+  });
+});
+
 describe('useBlockCode action', async () => {
   it('useBlockCode should override a current block with the custom block code provided', async () => {
     let manifestJson = await readFile({ path: './mocks/actions/manifestUseBlockCode.json' });

test/features/personalization/mocks/actions/manifestInsertAfter.json

@@ -35,6 +35,28 @@
       "firefox": "",
       "android": "",
       "ios": ""
+    },
+    {
+      "action": "insertAfter",
+      "selector": "#insertafter",
+      "page filter (optional)": "",
+      "param-newoffer=123": "",
+      "chrome": "<div id=\"inserted-html\">Hello World</div>",
+      "target-var1": "/test/features/personalization/mocks/fragments/insertafter",
+      "firefox": "",
+      "android": "",
+      "ios": ""
+    },
+    {
+      "action": "insertAfter",
+      "selector": "#insertafter #_href",
+      "page filter (optional)": "",
+      "param-newoffer=123": "",
+      "chrome": "#modal",
+      "target-var1": "",
+      "firefox": "",
+      "android": "",
+      "ios": ""
     }
   ],
   ":type": "sheet"

test/features/personalization/mocks/actions/manifestInsertBefore.json

@@ -24,6 +24,17 @@
       "firefox": "",
       "android": "",
       "ios": ""
+    },
+    {
+      "action": "insertBefore",
+      "selector": "#insertbefore #_href",
+      "page filter (optional)": "",
+      "param-newoffer=123": "",
+      "chrome": "/de",
+      "target-var1": "",
+      "firefox": "",
+      "android": "",
+      "ios": ""
     }
   ],
   ":type": "sheet"

test/features/personalization/mocks/actions/manifestTargetUpdate.json

@@ -0,0 +1,65 @@
+{
+  "total": 5,
+  "offset": 0,
+  "limit": 5,
+  "data": [
+    {
+      "action": "replace",
+      "selector": ".marquee h2",
+      "page filter (optional)": "",
+      "param-newoffer=123": "",
+      "chrome": "",
+      "target-var1": "updated text",
+      "firefox": "",
+      "android": "",
+      "ios": ""
+    },
+    {
+      "action": "replace",
+      "selector": "marquee primary-cta",
+      "page filter (optional)": "",
+      "param-newoffer=123": "",
+      "chrome": "",
+      "target-var1": "updated text",
+      "firefox": "",
+      "android": "",
+      "ios": ""
+    },
+    {
+      "action": "replace",
+      "selector": ".marquee primary-cta",
+      "page filter (optional)": "",
+      "param-newoffer=123": "",
+      "chrome": "",
+      "'modifier": "href",
+      "target-var1": "https://test.com/updated_href",
+      "firefox": "",
+      "android": "",
+      "ios": ""
+    },
+    {
+      "action": "replace",
+      "selector": "marquee secondary-cta",
+      "page filter (optional)": "",
+      "param-newoffer=123": "",
+      "chrome": "",
+      "target-var1": "updated text",
+      "firefox": "",
+      "android": "",
+      "ios": ""
+    },
+    {
+      "action": "replace",
+      "selector": "section5 marquee action-area",
+      "'modifier": "html",
+      "page filter (optional)": "",
+      "param-newoffer=123": "",
+      "chrome": "",
+      "target-var1": "<p>updated text</p>",
+      "firefox": "",
+      "android": "",
+      "ios": ""
+    }
+  ],
+  ":type": "sheet"
+}

test/features/personalization/mocks/actions/manifestUpdate.json

@@ -0,0 +1,74 @@
+{
+  "total": 5,
+  "offset": 0,
+  "limit": 5,
+  "data": [
+    {
+      "action": "replace",
+      "selector": ".marquee h2",
+      "page filter (optional)": "",
+      "param-newoffer=123": "",
+      "chrome": "updated text",
+      "target-var1": "",
+      "firefox": "",
+      "android": "",
+      "ios": ""
+    },
+    {
+      "action": "replace",
+      "selector": "marquee primary-cta",
+      "page filter (optional)": "",
+      "param-newoffer=123": "",
+      "chrome": "updated text",
+      "target-var1": "",
+      "firefox": "",
+      "android": "",
+      "ios": ""
+    },
+    {
+      "action": "replace",
+      "selector": ".marquee primary-cta #_href",
+      "page filter (optional)": "",
+      "param-newoffer=123": "",
+      "chrome": "https://test.com/updated_href",
+      "target-var1": "",
+      "firefox": "",
+      "android": "",
+      "ios": ""
+    },
+    {
+      "action": "replace",
+      "selector": "marquee secondary-cta",
+      "page filter (optional)": "",
+      "param-newoffer=123": "",
+      "chrome": "updated text",
+      "target-var1": "",
+      "firefox": "",
+      "android": "",
+      "ios": ""
+    },
+    {
+      "action": "replace",
+      "selector": "section5 marquee action-area",
+      "page filter (optional)": "",
+      "param-newoffer=123": "",
+      "chrome": "<p>updated text</p>",
+      "target-var1": "",
+      "firefox": "",
+      "android": "",
+      "ios": ""
+    },
+    {
+      "action": "replace",
+      "selector": "section5...%$@#",
+      "page filter (optional)": "",
+      "param-newoffer=123": "",
+      "chrome": "<p>updated text</p>",
+      "target-var1": "",
+      "firefox": "",
+      "android": "",
+      "ios": ""
+    }
+  ],
+  ":type": "sheet"
+}

test/features/personalization/mocks/manifestSectionBlock.json

@@ -5,21 +5,14 @@
   "data": [
     {
       "action": "removeContent",
-      "selector": "section2 block2",
+      "selector": ".custom-block1",
       "page filter (optional)": "",
       "param-newoffer=123": "",
       "all": "on"
     },
     {
       "action": "removeContent",
-      "selector": "custom-block2",
-      "page filter (optional)": "",
-      "param-newoffer=123": "",
-      "all": "on"
-    },
-    {
-      "action": "removeContent",
-      "selector": "section5 custom-block",
+      "selector": "section2 .custom-block",
       "page filter (optional)": "",
       "param-newoffer=123": "",
       "all": "on"

test/features/personalization/mocks/personalization.html

@@ -14,8 +14,14 @@
         <div data-valign="middle">
           <h2 id="milo-experimentation-platform">Milo Experimentation Platform</h2>
           <p>Leverage the Milo Experimentation Platform (MEP) for all your personalization needs on Milo!</p>
-          <p><strong><a href="https://wiki.corp.adobe.com/display/marketingtech/Milo+Experiment+Manifests">Review
-                Docs</a></strong></p>
+          <p>
+            <strong>
+              <a href="https://wiki.corp.adobe.com/display/marketingtech/Milo+Experiment+Manifests">Review Docs</a>
+            </strong>
+            <em>
+              <a href="https://test.com/secondary-cta-url">Secondary CTA</a>
+            </em>
+          </p>
         </div>
         <div data-valign="middle">
           <picture>
@@ -168,6 +174,10 @@ <h2 id="second-marquee-title">The second marquee</h2>
     <div class="custom-block custom-block-4">
       <div>
         <div>Custom block 4</div>
+        <div><a id="insertbefore" href="/my-page.html">Hello</a></div>
+        <div><a id="insertafter" href="/my-page.html">Hello</a></div>
+        <div><a id="prepend" href="/my-page.html">Hello</a></div>
+        <div><a id="append" href="/my-page.html">Hello</a></div>
       </div>
     </div>
   </div>