fixed tests

libs/features/personalization/personalization.js

@@ -357,7 +357,7 @@ function getSelectedElement({ selector, rootEl }) {
           const simplifiedSelector = match[0].replace(/\s+/g, '');
           const n = simplifiedSelector.match(/\d+/g) || '1';
           const cleanClassSelector = match[2]; // this one has no digits and no spaces
-          const cssOptimizedSelector = `> .${cleanClassSelector}:nth-child(${n} of .${cleanClassSelector})`;
+          const cssOptimizedSelector = ` .${cleanClassSelector}:nth-child(${n} of .${cleanClassSelector})`;
           // eslint-disable-next-line no-param-reassign
           selector = selector.replace(simplifiedSelector, cssOptimizedSelector);
         }
@@ -393,22 +393,29 @@ function getSelectedElement({ selector, rootEl }) {
           }
         });
       });
+      // transalte custom block selectors to CSS selectors
+      const customBlockSelectors = selector.match(/\.\w+-?\w+\d+/g);
+      customBlockSelectors?.forEach((customBlockSelector) => {
+        const n = customBlockSelector.match(/\d+/g);
+        const blockName = customBlockSelector.replace(/(\.|\d+)/g, '');
+        const cssOptimizedSelector = ` .${blockName}:nth-child(${n} of .${blockName})`;
+        // eslint-disable-next-line no-param-reassign
+        selector = selector.replace(customBlockSelector, cssOptimizedSelector);
+      });
+      // eslint-disable-next-line no-param-reassign
+      selector = rootEl === document ? `body > main ${selector}` : `:scope ${selector}`;
+      const element = querySelector(rootEl || document, selector);
+
+      // TODO: for testing purposes only. Remove when done
+      console.log('=====================================');
+      console.log('selector: ', originalSelector, ' ==> ', selector);
+      console.log('element: ', element ? 'found' : '!!! NOT FOUND !!!');
+
+      return element;
     } catch (e) {
       console.error('Error optimizing selector: ', e);
       return null;
     }
-    // eslint-disable-next-line no-param-reassign
-    selector = selector.charAt(0) === '<' ? selector.slice(1) : selector; // slice(1) removes trailing >
-    // eslint-disable-next-line no-param-reassign
-    selector = rootEl === document ? `body > main ${selector}` : `:scope ${selector}`;
-    const element = querySelector(rootEl || document, selector);
-
-    // TODO: for testing purposes only. Remove when done
-    console.log('=====================================');
-    console.log('selector: ', originalSelector, ' ==> ', selector);
-    console.log('element: ', element ? 'found' : '!!! NOT FOUND !!!');
-
-    return element;
   }
 }
 const addHash = (url, newHash) => {

test/features/personalization/actions.test.js

@@ -125,7 +125,7 @@ describe('insertBefore action', async () => {
 });
 
 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);
@@ -178,7 +178,7 @@ describe('update action', () => {
 
     expect(header.innerText).to.equal('updated text');
     expect(primaryCTA.innerText).to.equal('updated text');
-    expect(primaryCTA.href).to.equal('updated text');
+    expect(primaryCTA.href).to.equal('https://test.com/updated_href');
     expect(secondaryCTA.innerText).to.equal('updated text');
   });
 });

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

@@ -30,7 +30,7 @@
       "selector": ".marquee primary-cta:href",
       "page filter (optional)": "",
       "param-newoffer=123": "",
-      "chrome": "updated text",
+      "chrome": "https://test.com/updated_href",
       "target-var1": "",
       "firefox": "",
       "android": "",

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/personalization.test.js

@@ -54,37 +54,39 @@ describe('Functional Test', () => {
   });
 
   it('Can select elements using block-#', async () => {
+    document.body.innerHTML = await readFile({ path: './mocks/personalization.html' });
     await loadManifestAndSetResponse('./mocks/manifestBlockNumber.json');
 
-    expect(document.querySelector('.marquee')).to.not.be.null;
-    expect(document.querySelector('a[href="/fragments/replace/marquee/r2c1"]')).to.be.null;
-    expect(document.querySelector('a[href="/fragments/replace/marquee-2/r3c2"]')).to.be.null;
+    const firstMarquee = document.getElementsByClassName('marquee')[0];
     const secondMarquee = document.getElementsByClassName('marquee')[1];
+    expect(firstMarquee).to.not.be.null;
     expect(secondMarquee).to.not.be.null;
+    expect(document.querySelector('a[href="/fragments/replace/marquee/r2c1"]')).to.be.null;
+    expect(document.querySelector('a[href="/fragments/replace/marquee-2/r3c2"]')).to.be.null;
 
     await init(mepSettings);
 
     const fragment = document.querySelector('a[href="/fragments/replace/marquee/r2c1"]');
-    expect(fragment).to.not.be.null;
-    const replacedCell = document.querySelector('.marquee > div:nth-child(2) > div:nth-child(1)');
-    expect(replacedCell.firstChild.firstChild).to.equal(fragment);
     const secondFrag = document.querySelector('a[href="/fragments/replace/marquee-2/r2c2"]');
-    expect(secondMarquee.lastElementChild.lastElementChild.firstChild.firstChild)
-      .to.equal(secondFrag);
+    expect(fragment).to.not.be.null;
+    expect(secondFrag).to.not.be.null;
+
+    const firstMarqueeReplacedCell = firstMarquee.querySelector('p > a');
+    const secondMarqueeReplacedCell = secondMarquee.querySelector('p > a');
+    expect(firstMarqueeReplacedCell.href).to.equal(fragment.href);
+    expect(secondMarqueeReplacedCell.href).to.equal(secondFrag.href);
   });
 
   it('Can select blocks using section and block indexs', async () => {
     await loadManifestAndSetResponse('./mocks/manifestSectionBlock.json');
 
-    expect(document.querySelector('.special-block')).to.not.be.null;
+    expect(document.querySelector('.custom-block-1')).to.not.be.null;
     expect(document.querySelector('.custom-block-2')).to.not.be.null;
-    expect(document.querySelector('.custom-block-3')).to.not.be.null;
 
     await init(mepSettings);
 
-    expect(document.querySelector('.special-block')).to.be.null;
+    expect(document.querySelector('.custom-block-1')).to.be.null;
     expect(document.querySelector('.custom-block-2')).to.be.null;
-    expect(document.querySelector('.custom-block-3')).to.be.null;
   });
 
   it('scheduled manifest should apply changes if active (bts)', async () => {
@@ -182,7 +184,7 @@ describe('Functional Test', () => {
 
     await init(mepSettings);
 
-    assert.calledWith(window.console.log, 'Invalid selector: ', '.bad...selector');
+    assert.calledWith(window.console.log, 'element: ', '!!! NOT FOUND !!!');
     window.console.log.reset();
   });