MWPW-157783 [MEP] Primary and Secondary CTA simplified selectors do n…

…ot work well with hero-marquee block (#2830) * Make action-area more flexible * unit test update * also update other new css selectors * get rid of parent in selector * unit test update * MWPW-157785 [MEP] Create "any-marquee" and "header" simplified selectors (#2832) * mepanymarquee * add header * fix unit test
adobecom · Sep 5, 2024 · 510f7a6 · 510f7a6
1 parent 8ea4f29
commit 510f7a6
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 13 deletions.
diff --git a/libs/features/personalization/personalization.js b/libs/features/personalization/personalization.js
@@ -356,14 +356,17 @@ function modifySelectorTerm(termParam) {
   let term = termParam;
   const specificSelectors = {
     section: 'main > div',
-    'primary-cta': 'p strong a',
-    'secondary-cta': 'p em a',
+    'primary-cta': 'strong a',
+    'secondary-cta': 'em a',
     'action-area': '*:has(> em a, > strong a)',
+    'any-marquee': '[class*="marquee"]',
+    header: ':is(h1, h2, h3, h4, h5, h6)',
   };
   const otherSelectors = ['row', 'col'];
   const htmlEls = ['main', 'div', 'a', 'p', 'strong', 'em', 'picture', 'source', 'img', 'h'];
   const startTextMatch = term.match(/^[a-zA-Z/./-]*/);
   const startText = startTextMatch ? startTextMatch[0].toLowerCase() : '';
+  const startTextPart1 = startText.split(/\.|:/)[0];
   const endNumberMatch = term.match(/[0-9]*$/);
   const endNumber = endNumberMatch ? endNumberMatch[0] : '';
   if (!startText || htmlEls.includes(startText)) return term;
@@ -372,8 +375,8 @@ function modifySelectorTerm(termParam) {
     term = updateEndNumber(endNumber, term);
     return term;
   }
-  if (Object.keys(specificSelectors).includes(startText)) {
-    term = term.replace(startText, specificSelectors[startText]);
+  if (Object.keys(specificSelectors).includes(startTextPart1)) {
+    term = term.replace(startTextPart1, specificSelectors[startTextPart1]);
     term = updateEndNumber(endNumber, term);
     return term;
   }

diff --git a/test/features/personalization/modifyNonFragmentSelector.test.js b/test/features/personalization/modifyNonFragmentSelector.test.js
@@ -2,6 +2,10 @@ import { expect } from '@esm-bundle/chai';
 import { modifyNonFragmentSelector } from '../../../libs/features/personalization/personalization.js';
 
 const values = [
+  {
+    b: 'any-marquee action-area',
+    a: '[class*="marquee"] *:has(> em a, > strong a)',
+  },
   {
     b: 'main section1 marquee action-area',
     a: 'main > div:nth-child(1) .marquee *:has(> em a, > strong a)',
@@ -18,6 +22,18 @@ const values = [
     b: 'marquee.light:nth-child(2) h2',
     a: '.marquee.light:nth-child(2) h2',
   },
+  {
+    b: 'marquee.light:nth-child(2) header',
+    a: '.marquee.light:nth-child(2) :is(h1, h2, h3, h4, h5, h6)',
+  },
+  {
+    b: 'any-marquee.light:nth-child(2) h2',
+    a: '[class*="marquee"].light:nth-child(2) h2',
+  },
+  {
+    b: 'any-marquee:nth-child(2) h2',
+    a: '[class*="marquee"]:nth-child(2) h2',
+  },
   {
     b: 'section2 text3',
     a: 'main > div:nth-child(2) .text:nth-child(3 of .text)',
@@ -28,35 +44,35 @@ const values = [
   },
   {
     b: 'section3 table row2 col2 primary-cta',
-    a: 'main > div:nth-child(3) .table > div:nth-child(2) > div:nth-child(2) p strong a',
+    a: 'main > div:nth-child(3) .table > div:nth-child(2) > div:nth-child(2) strong a',
   },
   {
     b: 'marquee primary-cta #_href',
-    a: '.marquee p strong a',
+    a: '.marquee strong a',
     m: ['href'],
   },
   {
     b: 'marquee primary-cta #_HREF',
-    a: '.marquee p strong a',
+    a: '.marquee strong a',
     m: ['href'],
   },
   {
     b: 'marquee primary-cta#_href',
-    a: '.marquee p strong a#_href',
+    a: '.marquee strong a#_href',
   },
   {
     b: 'marquee primary-cta #_href_all',
-    a: '.marquee p strong a',
+    a: '.marquee strong a',
     m: ['href', 'all'],
   },
   {
     b: 'marquee primary-cta #_href#_all',
-    a: '.marquee p strong a',
+    a: '.marquee strong a',
     m: ['href', 'all'],
   },
   {
     b: 'marquee primary-cta #_href #_all',
-    a: '.marquee p strong a',
+    a: '.marquee strong a',
     m: ['href', 'all'],
   },
   {
@@ -65,7 +81,7 @@ const values = [
   },
   {
     b: 'section3 table row2 col4 secondary-cta',
-    a: 'main > div:nth-child(3) .table > div:nth-child(2) > div:nth-child(4) p em a',
+    a: 'main > div:nth-child(3) .table > div:nth-child(2) > div:nth-child(4) em a',
   },
   {
     b: 'section4 merch-card',
@@ -85,7 +101,7 @@ const values = [
   },
   {
     b: '.text:has(#im-a-unique-text-block) secondary-cta',
-    a: '.text:has(#im-a-unique-text-block) p em a',
+    a: '.text:has(#im-a-unique-text-block) em a',
   },
   {
     b: 'section1 .random-block2',