Merge pull request #1229 from Patternslib/fix-inject

fix(pat-inject): Re-enable support for multiple source matches.
Patternslib · Jan 20, 2025 · bf30719 · bf30719
2 parents 15bf4f2 + 07a244f
commit bf30719
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 11 deletions.
diff --git a/src/pat/inject/inject.js b/src/pat/inject/inject.js
@@ -399,9 +399,10 @@ const inject = {
          * Cancel button is pressed (this triggers reset event on the
          * form) you would expect to populate with initial placeholder
          */
-        if (cfg.target === "none")
+        if (cfg.target === "none") {
             // Special case, we don't want to display any return value.
             return;
+        }
         const $form = cfg.$target.parents("form");
         if ($form.length !== 0 && cfg.$target.data("initial-value") === undefined) {
             cfg.$target.data("initial-value", cfg.$target.html());
@@ -454,17 +455,17 @@ const inject = {
         return $target;
     },
 
-    _performInjection(target, $el, $source, cfg, trigger, $title) {
-        /* Called after the XHR has succeeded and we have a new $source
+    _performInjection(target, $el, $sources, cfg, trigger, $title) {
+        /* Called after the XHR has succeeded and we have a new $sources
          * element to inject.
          */
         const wrapper = document.createElement("div");
-        if ($source.length > 0) {
-            if (cfg.sourceMod === "content") {
-                wrapper.innerHTML = $source[0].innerHTML;
-            } else {
-                wrapper.innerHTML = $source[0].outerHTML;
-            }
+        if ($sources.length > 0) {
+            const method = cfg.sourceMod === "content" ? "innerHTML" : "outerHTML";
+            // There might be multiple sources, so we need to loop over them.
+            // Access them with "innerHTML" or "outerHTML" depending on the sourceMod.
+            const sources_string = [...$sources].map(source => source[method]).join("\n");
+            wrapper.innerHTML = sources_string;
 
             for (const img of wrapper.querySelectorAll("img")) {
                 events.add_event_listener(

diff --git a/src/pat/inject/inject.test.js b/src/pat/inject/inject.test.js
@@ -1609,7 +1609,6 @@ describe("pat-inject", function () {
 
                 await utils.timeout(1); // wait a tick for async to settle.
 
-                console.log(document.body.innerHTML);
                 const modal = document.querySelector("#pat-modal");
                 expect(modal).toBeTruthy();
                 expect(modal.innerHTML.replace(/\s/g, "")).toBe(
@@ -1644,7 +1643,6 @@ describe("pat-inject", function () {
 
                 await utils.timeout(1); // wait a tick for async to settle.
 
-                console.log(document.body.innerHTML);
                 const modal = document.querySelector("#pat-modal");
                 expect(modal).toBeFalsy();
             });
@@ -1742,6 +1740,56 @@ describe("pat-inject", function () {
                 expect(title.textContent.trim()).toBe("test"); // Old title
             });
         });
+
+        describe("9.5 - support multiple source element matches.", function () {
+            let spy_ajax;
+
+            beforeEach(function () {
+                spy_ajax = jest.spyOn($, "ajax").mockImplementation(() => deferred);
+            });
+
+            afterEach(function () {
+                spy_ajax.mockRestore();
+            });
+
+            it("9.5.1 - Injects multiple source element matches", async function () {
+                document.body.innerHTML = `
+                    <a class="pat-inject"
+                       href="test.html"
+                       data-pat-inject="
+                        source: a::element;
+                        target: .result;
+                    ">link</a>
+                    <section class="result">
+                    </section>
+                `;
+
+                answer(`
+                    <html>
+                        <body>
+                            <a>Link 1</a>
+                            <a>Link 2</a>
+                            <a>Link 3</a>
+                        </body>
+                    </html>
+                `);
+
+                const inject = document.querySelector(".pat-inject");
+
+                pattern.init($(inject));
+                await utils.timeout(1); // wait a tick for async to settle.
+
+                inject.click();
+                await utils.timeout(1); // wait a tick for async to settle.
+
+                const injected = document.querySelectorAll(".result a");
+                expect(injected.length).toBe(3);
+                expect(injected[0].textContent).toBe("Link 1");
+                expect(injected[1].textContent).toBe("Link 2");
+                expect(injected[2].textContent).toBe("Link 3");
+            });
+        });
+
     });
 
     describe("10 - Error handling", () => {