MWPW-150560 make search literals usable as fragments

libs/blocks/merch-card-collection/merch-card-collection.js

@@ -263,11 +263,14 @@ export default async function init(el) {
     }
   }
 
-  const literalsEl = el.lastElementChild?.firstElementChild;
+  // in case of search literals being fragments, data is marked with a data-path attribute,
+  // and shallower
+  const literalsEl = el.lastElementChild?.firstElementChild.getAttribute('data-path') !== null
+    ? el.lastElementChild : el.lastElementChild?.firstElementChild;
   // parse literals
   const literalSlots = [];
-  if (literalsEl && /filter/.test(literalsEl.querySelector('u')?.innerText)) {
-    literalsEl.querySelectorAll('u').forEach((u) => {
+  if (/filter/.test(literalsEl?.querySelector('u')?.innerText)) {
+    literalsEl?.querySelectorAll('u').forEach((u) => {
       const text = u.innerText.trim();
       if (DIGITS_ONLY.test(text)) {
         u.outerHTML = '<span data-placeholder="resultCount"></span>';
@@ -278,8 +281,8 @@ export default async function init(el) {
       }
     });
     let index = 0;
-    while (literalsEl.firstElementChild) {
-      const literalEl = literalsEl.firstElementChild;
+    while (literalsEl?.firstElementChild) {
+      const literalEl = literalsEl?.firstElementChild;
       let slot;
       if (literalEl.tagName === 'P') {
         slot = literalEl;

test/blocks/merch-card-collection/merch-card-collection.test.js

@@ -159,6 +159,12 @@ describe('Merch Cards', async () => {
     expect(merchCards.outerHTML).to.equal(merchCards.nextElementSibling.outerHTML);
   });
 
+  it('should parse fragmented literals', async () => {
+    const merchCards = await init(document.getElementById('fragmented-literals'));
+    await delay(500);
+    expect(merchCards.outerHTML).to.equal(merchCards.nextElementSibling.outerHTML);
+  });
+
   it('should override cards when asked to', async () => {
     const el = document.getElementById('multipleFilters');
     setConfig({

test/blocks/merch-card-collection/mocks/merch-card-collection.html

@@ -192,6 +192,42 @@
             <li>Make sure all words are spelled correctly</li>
             <li>Use quotes to search for an entire phrase, such as "crop an image"</li>
           </ul></div><p slot="showMoreText">Show more</p></merch-card-collection>
+
+    <div id="fragmented-literals" class="merch-card-collection catalog">
+      <div>
+        <a href="https://main--milo--adobecom.hlx.live/query-index-cards.json?sheet=catalog">query index</a>
+        <p>all, 18</p>
+      </div>
+      <div>
+          <p data-path="foo/bar">Search all products</p>
+          <p data-path="foo/bar">Filters</p>
+          <p>Sort</p>
+          <p>Popularity</p>
+          <p>Alphabetical</p>
+          <p>0 results</p>
+          <p>1 result in <strong><u>filter</u></strong></p>
+          <p><u>10</u> results in <strong><u>filter</u></strong></p>
+          <p>1 result for <strong><u>search</u></strong></p>
+          <p><u>10</u> results for <strong><u>search</u></strong></p>
+          <p>1 result for: <strong><u>search</u></strong></p>
+          <p><u>10</u> results for: <strong><u>search</u></strong></p>
+          <p>Your search for <strong><u>search</u></strong> did not yield any results</p>
+          <hr>
+          <p>Your search for <strong><u>search</u></strong> did not yield any results. Try a different search term.</p>
+          <p>Suggestions:</p>
+          <ul>
+            <li>Make sure all words are spelled correctly</li>
+            <li>Use quotes to search for an entire phrase, such as "crop an image"</li>
+          </ul>
+          <hr>
+          <p>Show more</p>
+      </div>
+    </div>
+    <!--this the expected merch-cards element -->
+    <merch-card-collection filter="all" class="merch-card-collection catalog" limit="18" types="" search="" page="1"><p data-path="foo/bar" slot="searchText">Search all products</p><p data-path="foo/bar" slot="filtersText">Filters</p><p slot="sortText">Sort</p><p slot="popularityText">Popularity</p><p slot="alphabeticallyText">Alphabetical</p><p slot="noResultText">0 results</p><p slot="resultText">1 result in <strong><span data-placeholder="filter"></span></strong></p><p slot="resultsText"><span data-placeholder="resultCount"></span> results in <strong><span data-placeholder="filter"></span></strong></p><p slot="searchResultText">1 result for <strong><span data-placeholder="searchTerm"></span></strong></p><p slot="searchResultsText"><span data-placeholder="resultCount"></span> results for <strong><span data-placeholder="searchTerm"></span></strong></p><p slot="searchResultMobileText">1 result for: <strong><span data-placeholder="searchTerm"></span></strong></p><p slot="searchResultsMobileText"><span data-placeholder="resultCount"></span> results for: <strong><span data-placeholder="searchTerm"></span></strong></p><p slot="noSearchResultsText">Your search for <strong><span data-placeholder="searchTerm"></span></strong> did not yield any results</p><div slot="noSearchResultsMobileText"><p>Your search for <strong><span data-placeholder="searchTerm"></span></strong> did not yield any results. Try a different search term.</p><p>Suggestions:</p><ul>
+            <li>Make sure all words are spelled correctly</li>
+            <li>Use quotes to search for an entire phrase, such as "crop an image"</li>
+          </ul></div><p slot="showMoreText">Show more</p></merch-card-collection>
   </div>
 
   <div id="cards">