From 72ec1778fa48225d1f3b61a6bd6fbcb902513374 Mon Sep 17 00:00:00 2001 From: vgoodric Date: Tue, 20 Aug 2024 15:32:48 -0600 Subject: [PATCH] more coverage --- .../personalization/personalization.js | 37 ++++---- .../modifyNonFragmentSelector.test.js | 88 +++++++++++++++++++ 2 files changed, 109 insertions(+), 16 deletions(-) create mode 100644 test/features/personalization/modifyNonFragmentSelector.test.js diff --git a/libs/features/personalization/personalization.js b/libs/features/personalization/personalization.js index 8b1c1c52a0..383ce92475 100644 --- a/libs/features/personalization/personalization.js +++ b/libs/features/personalization/personalization.js @@ -372,6 +372,26 @@ function modifySelectorTerm(term) { } return modifiedTerm; } +export function modifyNonFragmentSelector(selector) { + let modifiedSelector = selector; + const terms = modifiedSelector.split('>').join(' > ').split(',').join(' , ') + .split(/\s+/); + terms.forEach((term, i) => { + if (term.toLowerCase() === 'main') { + const next = terms[i + 1]?.toLowerCase(); + const nextNext = terms[i + 2]?.toLowerCase(); + if (next?.startsWith('section') || nextNext?.startsWith('section')) { + terms[i] = ''; + if (next === '>') terms[i + 1] = ''; + } + } else { + terms[i] = modifySelectorTerm(term); + } + }); + modifiedSelector = terms.join(' '); + console.log(`selector: ${selector}\nmodifiedSelector: ${modifiedSelector}`); // temp sanity check + return modifiedSelector; +} function getSelectedElement({ selector, rootEl }) { let modifiedSelector = selector.trim(); @@ -389,22 +409,7 @@ function getSelectedElement({ selector, rootEl }) { } } - const terms = modifiedSelector.split('>').join(' > ').split(',').join(' , ') - .split(/\s+/); - terms.forEach((term, i) => { - if (term.toLowerCase() === 'main') { - const next = terms[i + 1]?.toLowerCase(); - const nextNext = terms[i + 2]?.toLowerCase(); - if (next?.startsWith('section') || nextNext?.startsWith('section')) { - terms[i] = ''; - if (next === '>') terms[i + 1] = ''; - } - } else { - terms[i] = modifySelectorTerm(term); - } - }); - modifiedSelector = terms.join(' '); - console.log(`selector: ${selector}\nmodifiedSelector: ${modifiedSelector}`); // temp sanity check + modifiedSelector = modifyNonFragmentSelector(modifiedSelector); return querySelector(rootEl || document, modifiedSelector); } const addHash = (url, newHash) => { diff --git a/test/features/personalization/modifyNonFragmentSelector.test.js b/test/features/personalization/modifyNonFragmentSelector.test.js new file mode 100644 index 0000000000..6ab48b29d8 --- /dev/null +++ b/test/features/personalization/modifyNonFragmentSelector.test.js @@ -0,0 +1,88 @@ +import { expect } from '@esm-bundle/chai'; +import { modifyNonFragmentSelector } from '../../../libs/features/personalization/personalization.js'; + +const values = [ + { + b: 'main section1 marquee action-area', + a: 'main > div:nth-child(1) .marquee p:has(em a, strong a)', + }, + { + b: 'main > section1 .marquee h2', + a: 'main > div:nth-child(1) .marquee h2', + }, + { + b: '#some-random-id, section1 marquee row2 col1 p:nth-of-type(2)', + a: '#some-random-id , main > div:nth-child(1) .marquee > div:nth-child(2) > div:nth-child(1) p:nth-of-type(2)', + }, + { + b: 'marquee.light:nth-child(2) h2', + a: '.marquee.light:nth-child(2) h2', + }, + { + b: 'section2 text3', + a: 'main > div:nth-child(2) .text:nth-child(3 of .text)', + }, + { + b: 'section2 .text.light strong', + a: 'main > div:nth-child(2) .text.light strong', + }, + { + 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', + }, + { + b: 'section3 table row5 col2', + a: 'main > div:nth-child(3) .table > div:nth-child(5) > div:nth-child(2)', + }, + { + 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', + }, + { + b: 'section4 merch-card', + a: 'main > div:nth-child(4) .merch-card', + }, + { + b: 'section5 tabs col2 row2', + a: 'main > div:nth-child(5) .tabs > div:nth-child(2) > div:nth-child(2)', + }, + { + b: 'section8 table row4 col2', + a: 'main > div:nth-child(8) .table > div:nth-child(4) > div:nth-child(2)', + }, + { + b: 'section5', + a: 'main > div:nth-child(5)', + }, + { + b: '.text:has(#im-a-unique-text-block) secondary-cta', + a: '.text:has(#im-a-unique-text-block) p em a', + }, + { + b: 'section1 .random-block2', + a: 'main > div:nth-child(1) .random-block:nth-child(2 of .random-block)', + }, + { + b: 'main > section30', + a: 'main > div:nth-child(30)', + }, + { + b: 'main>section30', + a: 'main > div:nth-child(30)', + }, + { + b: 'main>div:nth-child(30)', + a: 'main > div:nth-child(30)', + }, + { + b: 'custom-block3', + a: '.custom-block:nth-child(3 of .custom-block)', + }, +]; +describe('test different values', () => { + values.forEach((value) => { + it(`should return the expected value for ${value.b}`, () => { + expect(modifyNonFragmentSelector(value.b).trim()).to.equal(value.a.trim()); + }); + }); +});