describe("hx-sse attribute", function() { function mockEventSource() { var listeners = {}; var wasClosed = false; var mockEventSource = { addEventListener: function (message, l) { listeners[message] = l; }, sendEvent: function (eventName, data) { var listener = listeners[eventName]; if (listener) { var event = htmx._("makeEvent")(eventName); event.data = data; listener(event); } }, close: function () { wasClosed = true; }, wasClosed: function () { return wasClosed; } }; return mockEventSource; } beforeEach(function () { this.server = makeServer(); var eventSource = mockEventSource(); this.eventSource = eventSource; clearWorkArea(); htmx.createEventSource = function(){ return eventSource }; }); afterEach(function () { this.server.restore(); clearWorkArea(); }); it('handles basic sse triggering', function () { this.server.respondWith("GET", "/d1", "div1 updated"); this.server.respondWith("GET", "/d2", "div2 updated"); var div = make('
' + '
div1
' + '
div2
' + '
'); this.eventSource.sendEvent("e1"); this.server.respond(); byId("d1").innerHTML.should.equal("div1 updated"); byId("d2").innerHTML.should.equal("div2"); this.eventSource.sendEvent("e2"); this.server.respond(); byId("d1").innerHTML.should.equal("div1 updated"); byId("d2").innerHTML.should.equal("div2 updated"); }) it('does not trigger events that arent named', function () { this.server.respondWith("GET", "/d1", "div1 updated"); var div = make('
' + '
div1
' + '
'); this.eventSource.sendEvent("foo"); this.server.respond(); byId("d1").innerHTML.should.equal("div1"); this.eventSource.sendEvent("e2"); this.server.respond(); byId("d1").innerHTML.should.equal("div1"); this.eventSource.sendEvent("e1"); this.server.respond(); byId("d1").innerHTML.should.equal("div1 updated"); }) it('does not trigger events not on decendents', function () { this.server.respondWith("GET", "/d1", "div1 updated"); var div = make('
' + '
div1
'); this.eventSource.sendEvent("foo"); this.server.respond(); byId("d1").innerHTML.should.equal("div1"); this.eventSource.sendEvent("e2"); this.server.respond(); byId("d1").innerHTML.should.equal("div1"); this.eventSource.sendEvent("e1"); this.server.respond(); byId("d1").innerHTML.should.equal("div1"); }) it('is closed after removal', function () { this.server.respondWith("GET", "/test", "Clicked!"); var div = make('
' + '
div1
' + '
'); div.click(); this.server.respond(); this.eventSource.wasClosed().should.equal(true) }) it('is closed after removal with no close and activity', function () { var div = make('
' + '
div1
' + '
'); div.parentElement.removeChild(div); this.eventSource.sendEvent("e1") this.eventSource.wasClosed().should.equal(true) }) it('swaps content properly on SSE swap', function () { var div = make('
\n' + '
\n' + '
\n' + '
\n'); byId("d1").innerText.should.equal("") byId("d2").innerText.should.equal("") this.eventSource.sendEvent("e1", "Event 1") byId("d1").innerText.should.equal("Event 1") byId("d2").innerText.should.equal("") this.eventSource.sendEvent("e2", "Event 2") byId("d1").innerText.should.equal("Event 1") byId("d2").innerText.should.equal("Event 2") }) });