From f20791c55c3638bfb21ece77cab6a48d4a7fea9b Mon Sep 17 00:00:00 2001
From: matiboy <mathieu.chauvinc@gmail.com>
Date: Wed, 19 Jul 2023 00:10:39 +0800
Subject: [PATCH] Add tests for HX Retarget and fix typo (#1600)

Co-authored-by: mat <matt@techspace.asia>
---
 src/ext/response-targets.js  |  2 +-
 test/ext/response-targets.js | 42 ++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/ext/response-targets.js b/src/ext/response-targets.js
index 16e9d740..35db4e1f 100644
--- a/src/ext/response-targets.js
+++ b/src/ext/response-targets.js
@@ -83,7 +83,7 @@
                 evt.detail.xhr.status !== 200) {
                 if (evt.detail.target) {
                     if (htmx.config.responseTargetPrefersExisting) {
-                        evt.detail.shoudSwap = true;
+                        evt.detail.shouldSwap = true;
                         handleErrorFlag(evt);
                         return true;
                     }
diff --git a/test/ext/response-targets.js b/test/ext/response-targets.js
index 4866f96f..1c670d66 100644
--- a/test/ext/response-targets.js
+++ b/test/ext/response-targets.js
@@ -221,4 +221,46 @@ describe("response-targets extension", function() {
         div2.innerHTML.should.equal("");
         div3.innerHTML.should.equal("Not found!");
     });
+
+    it('targets the element specified in headers if configured to prefer it (default)', function () {
+        this.server.respondWith("GET", "/test", [404, { "HX-Retarget": "#d2" }, "Not found!"]);
+        var btn = make('<button hx-ext="response-targets" hx-target-404="#d1" hx-get="/test">Click Me!</button>')
+        var div1 = make('<div id="d1"></div>')
+        var div2 = make('<div id="d2"></div>')
+        btn.click();
+        this.server.respond();
+        div1.innerHTML.should.equal("");
+        div2.innerHTML.should.equal("Not found!");
+    });
+
+    it('ignores the HX-Retarget header when responseTargetPrefersRetargetHeader is false', function () {
+        htmx.config.responseTargetPrefersRetargetHeader = false;
+        try {
+            this.server.respondWith("GET", "/test", [404, { "HX-Retarget": "#d2" }, "Not found!"]);
+            var btn = make('<button hx-ext="response-targets" hx-target-404="#d1" hx-get="/test">Click Me!</button>')
+            var div1 = make('<div id="d1"></div>')
+            var div2 = make('<div id="d2"></div>')
+            btn.click();
+            this.server.respond();
+            div1.innerHTML.should.equal("Not found!");
+            div2.innerHTML.should.equal("");
+        } finally {
+            htmx.config.responseTargetPrefersRetargetHeader = true;
+        }
+    });
+
+    it('targets the already established target when responseTargetPrefersExisting is true', function () {
+        htmx.config.responseTargetPrefersExisting = true;
+        try {
+            this.server.respondWith("GET", "/test", [404, {}, "Not found!"]);
+            var btn = make('<button hx-ext="response-targets" hx-target-404="#d1" hx-get="/test">Click Me!</button>')
+            var div1 = make('<div id="d1"></div>')
+            btn.click();
+            this.server.respond();
+            div1.innerHTML.should.equal("");
+            btn.innerHTML.should.equal("Not found!");
+        } finally {
+            htmx.config.responseTargetPrefersExisting = false;
+        }
+    });
 });