TNT-48605 Fix selection when chained :eq:shadow in selector

adobe · Oct 9, 2023 · 9792efb · 9792efb
1 parent 1960692
commit 9792efb
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 3 deletions.
diff --git a/src/utils/dom/selectNodesWithShadow.js b/src/utils/dom/selectNodesWithShadow.js
@@ -19,7 +19,7 @@ const splitWithShadow = selector => {
 };
 
 const transformPrefix = (parent, selector) => {
-  const result = selector.trim();
+  const result = selector;
   const hasChildCombinatorPrefix = startsWith(result, ">");
   if (!hasChildCombinatorPrefix) {
     return result;
@@ -54,8 +54,15 @@ export default (context, selector) => {
   // find each subselector element based on the previously selected node's shadowRoot
   let parent = context;
   for (let i = 0; i < parts.length; i += 1) {
-    const part = transformPrefix(parent, parts[i]);
-    const partNode = querySelectorAll(parent, part);
+    const part = parts[i].trim();
+    // if part is empty, it means there's a chained :eq:shadow selector
+    if (part === "" && parent.shadowRoot) {
+      parent = parent.shadowRoot;
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+    const prefixed = transformPrefix(parent, part);
+    const partNode = querySelectorAll(parent, prefixed);
 
     if (partNode.length === 0 || !partNode[0] || !partNode[0].shadowRoot) {
       return partNode;

diff --git a/test/unit/specs/utils/dom/selectNodesWithShadow.spec.js b/test/unit/specs/utils/dom/selectNodesWithShadow.spec.js
@@ -147,6 +147,39 @@ describe("Utils::DOM::selectNodesWithShadow", () => {
     expect(result[0].textContent).toEqual("Buy Now");
   });
 
+  it("should select when chained :eq:shadow selector", () => {
+    if (ieDetected()) {
+      return;
+    }
+
+    defineCustomElements();
+
+    const content = `
+    <form id="form" action="https://www.adobe.com" method="post">
+      <buy-now-button>FirstButton</buy-now-button>
+      <buy-now-button>SecondButton</buy-now-button>
+      <product-order>FirstOrder</product-order>
+      <product-order>SecondOrder</product-order>
+      <input type="submit" value="Submit"/>
+    </form>`;
+
+    appendNode(
+      document.body,
+      createNode(
+        "DIV",
+        { id: "abc", class: CLEANUP_CLASS },
+        { innerHTML: content }
+      )
+    );
+
+    const result = selectNodesWithEq(
+      "#abc:eq(0) > FORM:nth-of-type(1) > PRODUCT-ORDER:eq(1):shadow > *:eq(0) > BUY-NOW-BUTTON:eq(0):shadow > DIV:nth-of-type(1) > LABEL:nth-of-type(1)"
+    );
+
+    expect(result[0].tagName).toEqual("LABEL");
+    expect(result[0].textContent).toEqual("Buy Now");
+  });
+
   it("should respect child selectors", () => {
     const content = `
       <div>