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('
');
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('');
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('');
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('');
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');
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")
})
});