Fix SSE tests and emit new "beforeMessage" event for SSE Extension (#2171)

* Emit htmx:sseBeforeMessage

* Add tests and respect cancels

* Fix syntax errors

* fix other syntax error

* finally fix these tests!

3 files changed, 73 insertions, 12 deletions

diff --git a/src/ext/sse.js b/src/ext/sse.js
index 943d80ac..f9a2fbaf 100644
--- a/src/ext/sse.js
+++ b/src/ext/sse.js
@@ -148,6 +148,9 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 					}
 
 					// swap the response into the DOM and trigger a notification
+					if(!api.triggerEvent(elt, "htmx:sseBeforeMessage", event)) {
+						return;
+					}
 					swap(child, event.data);
 					api.triggerEvent(elt, "htmx:sseMessage", event);
 				};
diff --git a/test/attributes/hx-sse.js b/test/attributes/hx-sse.js
index 9fd438b7..81cb0d04 100644
--- a/test/attributes/hx-sse.js
+++ b/test/attributes/hx-sse.js
@@ -13,19 +13,19 @@ describe("hx-sse attribute", function() {
                 })
             },
             addEventListener: function(message, l) {
-                if (listeners == undefined) {
+                if (listeners[message] === undefined) {
                     listeners[message] = [];
                 }
                 listeners[message].push(l)
             },
             sendEvent: function(eventName, data) {
-                var listeners = listeners[eventName];
-                if (listeners) {
-                    listeners.forEach(function(listener) {
+                var eventListeners = listeners[eventName];
+                if (eventListeners) {
+                    eventListeners.forEach(function(listener) {
                         var event = htmx._("makeEvent")(eventName);
                         event.data = data;
                         listener(event);
-                    }
+                    })
                 }
             },
             close: function() {
@@ -47,6 +47,7 @@ describe("hx-sse attribute", function() {
     });
     afterEach(function() {
         this.server.restore();
+        this.eventSource = mockEventSource();
         clearWorkArea();
     });
 
diff --git a/test/ext/sse.js b/test/ext/sse.js
index a9702525..5181fe3a 100644
--- a/test/ext/sse.js
+++ b/test/ext/sse.js
@@ -1,5 +1,3 @@
-const { assert } = require("chai");
-
 describe("sse extension", function() {
 
     function mockEventSource() {
@@ -16,19 +14,19 @@ describe("sse extension", function() {
                 })
             },
             addEventListener: function(message, l) {
-                if (listeners == undefined) {
+                if (listeners[message] === undefined) {
                     listeners[message] = [];
                 }
                 listeners[message].push(l)
             },
             sendEvent: function(eventName, data) {
-                var listeners = listeners[eventName];
-                if (listeners) {
-                    listeners.forEach(function(listener) {
+                var eventListeners = listeners[eventName];
+                if (eventListeners) {
+                    eventListeners.forEach(function(listener) {
                         var event = htmx._("makeEvent")(eventName);
                         event.data = data;
                         listener(event);
-                    }
+                    })
                 }
             },
             close: function() {
@@ -56,6 +54,7 @@ describe("sse extension", function() {
     });
     afterEach(function() {
         this.server.restore();
+        this.eventSource = mockEventSource();
         clearWorkArea();
     });
 
@@ -228,5 +227,63 @@ describe("sse extension", function() {
 
     })
 
+    it('raises htmx:sseBeforeMessage when receiving message from the server', function () {
+        var myEventCalled = false;
+
+        function handle(evt) {
+            myEventCalled = true;
+        }
+
+        htmx.on("htmx:sseBeforeMessage", handle)
+
+        var div = make('<div hx-ext="sse" sse-connect="/event_stream" sse-swap="e1"></div>');
+
+        this.eventSource.sendEvent("e1", '<div id="d1"></div>')
+
+        myEventCalled.should.be.true;
+
+        htmx.off("htmx:sseBeforeMessage", handle)
+    })
+
+    it('cancels swap when htmx:sseBeforeMessage was cancelled', function () {
+        var myEventCalled = false;
+
+        function handle(evt) {
+            myEventCalled = true;
+            evt.preventDefault();
+        }
+
+        htmx.on("htmx:sseBeforeMessage", handle)
+
+        var div = make('<div hx-ext="sse" sse-connect="/event_stream" sse-swap="e1"><div id="d1">div1</div></div>');
+
+        this.eventSource.sendEvent("e1", '<div id="d1">replaced</div>')
+
+        myEventCalled.should.be.true;
+
+        byId("d1").innerHTML.should.equal("div1");
+
+        htmx.off("htmx:sseBeforeMessage", handle)
+    })
+
+    it('raises htmx:sseMessage when message was completely processed', function () {
+        var myEventCalled = false;
+
+        function handle(evt) {
+            myEventCalled = true;
+        }
+
+        htmx.on("htmx:sseMessage", handle)
+
+        var div = make('<div hx-ext="sse" sse-connect="/event_stream" sse-swap="e1"><div id="d1">div1</div></div>');
+
+        this.eventSource.sendEvent("e1", '<div id="d1">replaced</div>')
+
+        myEventCalled.should.be.true;
+        byId("d1").innerHTML.should.equal("replaced");
+
+        htmx.off("htmx:sseMessage", handle)
+    })
+
 });