' +
@@ -112,7 +122,7 @@ describe("hx-sse attribute", function() {
this.eventSource.wasClosed().should.equal(true)
})
- it('is closed after removal with no close and activity', function () {
+ it('is closed after removal with no close and activity', function() {
var div = make('
');
@@ -121,7 +131,7 @@ describe("hx-sse attribute", function() {
this.eventSource.wasClosed().should.equal(true)
})
- it('swaps content properly on SSE swap', function () {
+ it('swaps content properly on SSE swap', function() {
var div = make('
\n' +
'
\n' +
'
\n' +
@@ -136,5 +146,15 @@ describe("hx-sse attribute", function() {
byId("d2").innerText.should.equal("Event 2")
})
+ it('swaps swapped in content', function() {
+ var div = make('
\n'
+ )
+
+ this.eventSource.sendEvent("e1", '
')
+ this.eventSource.sendEvent("e2", 'Event 2')
+ byId("d2").innerText.should.equal("Event 2")
+ })
});
diff --git a/www/static/test/attributes/hx-swap.js b/www/static/test/attributes/hx-swap.js
index dff1b040..4ff63621 100644
--- a/www/static/test/attributes/hx-swap.js
+++ b/www/static/test/attributes/hx-swap.js
@@ -197,27 +197,43 @@ describe("hx-swap attribute", function(){
swapSpec(make("
")).swapDelay.should.equal(0)
swapSpec(make("
")).settleDelay.should.equal(0) // set to 0 in tests
swapSpec(make("
")).swapDelay.should.equal(10)
+ swapSpec(make("
")).swapDelay.should.equal(0)
+ swapSpec(make("
")).swapDelay.should.equal(0)
swapSpec(make("
")).settleDelay.should.equal(10)
+ swapSpec(make("
")).settleDelay.should.equal(0)
+ swapSpec(make("
")).settleDelay.should.equal(0)
swapSpec(make("
")).swapDelay.should.equal(10)
swapSpec(make("
")).settleDelay.should.equal(11)
swapSpec(make("
")).swapDelay.should.equal(10)
swapSpec(make("
")).settleDelay.should.equal(11)
+ swapSpec(make("
")).settleDelay.should.equal(0)
+ swapSpec(make("
")).settleDelay.should.equal(0)
+ swapSpec(make("
")).settleDelay.should.equal(0)
+ swapSpec(make("
")).settleDelay.should.equal(0)
swapSpec(make("
")).settleDelay.should.equal(11)
swapSpec(make("
")).settleDelay.should.equal(11)
-
+
swapSpec(make("
")).swapStyle.should.equal("innerHTML")
swapSpec(make("
")).swapDelay.should.equal(10)
+ swapSpec(make("
")).swapDelay.should.equal(0);
+ swapSpec(make("
")).swapDelay.should.equal(0);
swapSpec(make("
")).swapStyle.should.equal("innerHTML")
swapSpec(make("
")).settleDelay.should.equal(10)
-
+ swapSpec(make("
")).settleDelay.should.equal(0)
+ swapSpec(make("
")).settleDelay.should.equal(0)
+
swapSpec(make("
")).swapStyle.should.equal("innerHTML")
swapSpec(make("
")).swapDelay.should.equal(10)
swapSpec(make("
")).settleDelay.should.equal(11)
+ swapSpec(make("
")).swapDelay.should.equal(0)
+ swapSpec(make("
")).settleDelay.should.equal(0)
swapSpec(make("
")).swapStyle.should.equal("innerHTML")
swapSpec(make("
")).swapDelay.should.equal(10)
swapSpec(make("
")).settleDelay.should.equal(11)
+ swapSpec(make("
")).swapDelay.should.equal(10)
+ swapSpec(make("
")).settleDelay.should.equal(0)
swapSpec(make("
")).swapStyle.should.equal("customstyle")
})
@@ -234,6 +250,17 @@ describe("hx-swap attribute", function(){
}, 30);
});
+ it("works immediately with no swap delay", function (done) {
+ this.server.respondWith("GET", "/test", "Clicked!");
+ var div = make(
+ "
"
+ );
+ div.click();
+ this.server.respond();
+ div.innerText.should.equal("Clicked!");
+ done();
+ });
+
it('works with a settle delay', function(done) {
this.server.respondWith("GET", "/test", "
");
var div = make("
");
@@ -246,6 +273,24 @@ describe("hx-swap attribute", function(){
}, 30);
});
+ it("works with no settle delay", function (done) {
+ this.server.respondWith(
+ "GET",
+ "/test",
+ "
"
+ );
+ var div = make(
+ "
"
+ );
+ div.click();
+ this.server.respond();
+ div.classList.contains("foo").should.equal(false);
+ setTimeout(function () {
+ byId("d1").classList.contains("foo").should.equal(true);
+ done();
+ }, 30);
+ });
+
it('swap outerHTML properly w/ data-* prefix', function()
{
this.server.respondWith("GET", "/test", '
Click Me');
diff --git a/www/static/test/attributes/hx-trigger.js b/www/static/test/attributes/hx-trigger.js
index 0cbb4adf..f65f974b 100644
--- a/www/static/test/attributes/hx-trigger.js
+++ b/www/static/test/attributes/hx-trigger.js
@@ -211,14 +211,20 @@ describe("hx-trigger attribute", function(){
var specExamples = {
"": [{trigger: 'click'}],
"every 1s": [{trigger: 'every', pollInterval: 1000}],
+ "every 0s": [{trigger: 'every', pollInterval: 0}],
+ "every 0ms": [{trigger: 'every', pollInterval: 0}],
"click": [{trigger: 'click'}],
"customEvent": [{trigger: 'customEvent'}],
"event changed": [{trigger: 'event', changed: true}],
"event once": [{trigger: 'event', once: true}],
- "event delay:1s": [{trigger: 'event', delay: 1000}],
"event throttle:1s": [{trigger: 'event', throttle: 1000}],
- "event delay:1s, foo": [{trigger: 'event', delay: 1000}, {trigger: 'foo'}],
+ "event throttle:0s": [{trigger: 'event', throttle: 0}],
+ "event throttle:0ms": [{trigger: 'event', throttle: 0}],
"event throttle:1s, foo": [{trigger: 'event', throttle: 1000}, {trigger: 'foo'}],
+ "event delay:1s": [{trigger: 'event', delay: 1000}],
+ "event delay:1s, foo": [{trigger: 'event', delay: 1000}, {trigger: 'foo'}],
+ "event delay:0s, foo": [{trigger: 'event', delay: 0}, {trigger: 'foo'}],
+ "event delay:0ms, foo": [{trigger: 'event', delay: 0}, {trigger: 'foo'}],
"event changed once delay:1s": [{trigger: 'event', changed: true, once: true, delay: 1000}],
"event1,event2": [{trigger: 'event1'}, {trigger: 'event2'}],
"event1, event2": [{trigger: 'event1'}, {trigger: 'event2'}],
@@ -678,6 +684,37 @@ describe("hx-trigger attribute", function(){
}, 50);
});
+ it("A throttle of 0 does not multiple requests from happening", function (done) {
+ var requests = 0;
+ var server = this.server;
+ server.respondWith("GET", "/test", function (xhr) {
+ requests++;
+ xhr.respond(200, {}, "Requests: " + requests);
+ });
+ server.respondWith("GET", "/bar", "bar");
+ var div = make(
+ "
"
+ );
+
+ div.click();
+ server.respond();
+ div.innerText.should.equal("Requests: 1");
+
+ div.click();
+ server.respond();
+ div.innerText.should.equal("Requests: 2");
+
+ div.click();
+ server.respond();
+ div.innerText.should.equal("Requests: 3");
+
+ div.click();
+ server.respond();
+ div.innerText.should.equal("Requests: 4");
+
+ done()
+ });
+
it('delay delays the request', function(done)
{
var requests = 0;
@@ -714,6 +751,37 @@ describe("hx-trigger attribute", function(){
}, 50);
});
+ it("A 0 delay does not delay the request", function (done) {
+ var requests = 0;
+ this.server.respondWith("GET", "/test", function (xhr) {
+ requests++;
+ xhr.respond(200, {}, "Requests: " + requests);
+ });
+ this.server.respondWith("GET", "/bar", "bar");
+ var div = make(
+ "
"
+ );
+
+ div.click();
+ this.server.respond();
+ div.innerText.should.equal("Requests: 1");
+
+ div.click();
+ this.server.respond();
+ div.innerText.should.equal("Requests: 2");
+
+ div.click();
+ this.server.respond();
+ div.innerText.should.equal("Requests: 3");
+
+ div.click();
+ this.server.respond();
+ div.innerText.should.equal("Requests: 4");
+
+ done();
+ });
+
+
it('requests are queued with last one winning by default', function()
{
var requests = 0;
@@ -954,5 +1022,56 @@ describe("hx-trigger attribute", function(){
make('
Not Called
');
});
+ it("uses trigger specs cache if defined", function () {
+ var initialCacheConfig = htmx.config.triggerSpecsCache
+ htmx.config.triggerSpecsCache = {}
+ var specExamples = {
+ "every 1s": [{trigger: 'every', pollInterval: 1000}],
+ "click": [{trigger: 'click'}],
+ "customEvent": [{trigger: 'customEvent'}],
+ "event changed": [{trigger: 'event', changed: true}],
+ "event once": [{trigger: 'event', once: true}],
+ "event delay:1s": [{trigger: 'event', delay: 1000}],
+ "event throttle:1s": [{trigger: 'event', throttle: 1000}],
+ "event delay:1s, foo": [{trigger: 'event', delay: 1000}, {trigger: 'foo'}],
+ "event throttle:1s, foo": [{trigger: 'event', throttle: 1000}, {trigger: 'foo'}],
+ "event changed once delay:1s": [{trigger: 'event', changed: true, once: true, delay: 1000}],
+ "event1,event2": [{trigger: 'event1'}, {trigger: 'event2'}],
+ "event1, event2": [{trigger: 'event1'}, {trigger: 'event2'}],
+ "event1 once, event2 changed": [{trigger: 'event1', once: true}, {trigger: 'event2', changed: true}],
+ }
+
+ for (var specString in specExamples) {
+ var div = make("
");
+ var spec = htmx._('getTriggerSpecs')(div);
+ spec.should.deep.equal(specExamples[specString], "Found : " + JSON.stringify(spec) + ", expected : " + JSON.stringify(specExamples[specString]) + " for spec: " + specString);
+ }
+
+ Object.keys(htmx.config.triggerSpecsCache).length.should.greaterThan(0)
+ Object.keys(htmx.config.triggerSpecsCache).length.should.equal(Object.keys(specExamples).length)
+
+ htmx.config.triggerSpecsCache = initialCacheConfig
+ })
+
+ it("correctly reuses trigger specs from the cache if defined", function () {
+ var initialCacheConfig = htmx.config.triggerSpecsCache
+ htmx.config.triggerSpecsCache = {}
+
+ var triggerStr = "event changed once delay:1s"
+ var expectedSpec = [{trigger: 'event', changed: true, once: true, delay: 1000}]
+
+ var div = make("
");
+ var spec = htmx._('getTriggerSpecs')(div);
+ spec.should.deep.equal(expectedSpec, "Found : " + JSON.stringify(spec) + ", expected : " + JSON.stringify(expectedSpec) + " for spec: " + triggerStr);
+ spec.push("This should be carried to further identical specs thanks to the cache")
+
+ var div2 = make("
");
+ var spec2 = htmx._('getTriggerSpecs')(div2);
+ spec2.should.deep.equal(spec, "Found : " + JSON.stringify(spec) + ", expected : " + JSON.stringify(spec2) + " for cached spec: " + triggerStr);
+
+ Object.keys(htmx.config.triggerSpecsCache).length.should.equal(1)
+
+ htmx.config.triggerSpecsCache = initialCacheConfig
+ })
})
diff --git a/www/static/test/core/headers.js b/www/static/test/core/headers.js
index af357d37..7e127ece 100644
--- a/www/static/test/core/headers.js
+++ b/www/static/test/core/headers.js
@@ -348,4 +348,31 @@ describe("Core htmx AJAX headers", function () {
this.server.respond();
div.innerHTML.should.equal('
Yay! Welcome
');
})
+
+ it('request to restore history should include the HX-Request header', function () {
+ this.server.respondWith('GET', '/test', function (xhr) {
+ xhr.requestHeaders['HX-Request'].should.be.equal('true');
+ xhr.respond(200, {}, '');
+ });
+ htmx._('loadHistoryFromServer')('/test');
+ this.server.respond();
+ });
+
+ it('request to restore history should include the HX-History-Restore-Request header', function () {
+ this.server.respondWith('GET', '/test', function (xhr) {
+ xhr.requestHeaders['HX-History-Restore-Request'].should.be.equal('true');
+ xhr.respond(200, {}, '');
+ });
+ htmx._('loadHistoryFromServer')('/test');
+ this.server.respond();
+ });
+
+ it('request to restore history should include the HX-Current-URL header', function () {
+ this.server.respondWith('GET', '/test', function (xhr) {
+ chai.assert(typeof xhr.requestHeaders['HX-Current-URL'] !== 'undefined', 'HX-Current-URL should not be undefined');
+ xhr.respond(200, {}, '');
+ });
+ htmx._('loadHistoryFromServer')('/test');
+ this.server.respond();
+ });
});
diff --git a/www/static/test/core/internals.js b/www/static/test/core/internals.js
index 1de1fb98..3d689293 100644
--- a/www/static/test/core/internals.js
+++ b/www/static/test/core/internals.js
@@ -76,9 +76,14 @@ describe("Core htmx internals Tests", function() {
it("handles parseInterval correctly", function() {
chai.expect(htmx.parseInterval("1ms")).to.be.equal(1);
chai.expect(htmx.parseInterval("300ms")).to.be.equal(300);
- chai.expect(htmx.parseInterval("1s")).to.be.equal(1000)
- chai.expect(htmx.parseInterval("1.5s")).to.be.equal(1500)
- chai.expect(htmx.parseInterval("2s")).to.be.equal(2000)
+ chai.expect(htmx.parseInterval("1s")).to.be.equal(1000);
+ chai.expect(htmx.parseInterval("1.5s")).to.be.equal(1500);
+ chai.expect(htmx.parseInterval("2s")).to.be.equal(2000);
+ chai.expect(htmx.parseInterval("0ms")).to.be.equal(0);
+ chai.expect(htmx.parseInterval("0s")).to.be.equal(0);
+ chai.expect(htmx.parseInterval("0m")).to.be.equal(0);
+ chai.expect(htmx.parseInterval("0")).to.be.equal(0);
+ chai.expect(htmx.parseInterval("5")).to.be.equal(5);
chai.expect(htmx.parseInterval(null)).to.be.undefined
chai.expect(htmx.parseInterval("")).to.be.undefined
diff --git a/www/static/test/core/parameters.js b/www/static/test/core/parameters.js
index fa6f6257..b395ac7d 100644
--- a/www/static/test/core/parameters.js
+++ b/www/static/test/core/parameters.js
@@ -239,5 +239,12 @@ describe("Core htmx Parameter Handling", function() {
}
});
+ it('Input within disabled fieldset is excluded', function () {
+ var input = make('
');
+ var vals = htmx._('getInputValues')(input, "get").values;
+ vals['foo'].should.equal('bar');
+ should.equal(vals["do"], undefined);
+ })
+
});
diff --git a/www/static/test/ext/path-params.js b/www/static/test/ext/path-params.js
new file mode 100644
index 00000000..3f0ac3a3
--- /dev/null
+++ b/www/static/test/ext/path-params.js
@@ -0,0 +1,51 @@
+describe("path-params extension", function() {
+ beforeEach(function () {
+ this.server = makeServer();
+ clearWorkArea();
+ });
+ afterEach(function () {
+ this.server.restore();
+ clearWorkArea();
+ });
+
+ it('uses parameter to populate path variable', function () {
+ var request;
+ htmx.on("htmx:beforeRequest", function (evt) {
+ request = evt;
+ });
+ var div = make("
")
+ div.click();
+ should.equal(request.detail.requestConfig.path, '/items/42');
+ });
+
+ it('parameter is removed when used', function () {
+ var request;
+ htmx.on("htmx:beforeRequest", function (evt) {
+ request = evt;
+ });
+ var div = make("
")
+ div.click();
+ should.equal(request.detail.requestConfig.parameters.other, 43);
+ should.equal(request.detail.requestConfig.parameters.itemId, undefined);
+ });
+
+ it('parameter value is encoded', function () {
+ var request;
+ htmx.on("htmx:beforeRequest", function (evt) {
+ request = evt;
+ });
+ var div = make("
")
+ div.click();
+ should.equal(request.detail.requestConfig.path, '/items/a%2Fb');
+ });
+
+ it('missing variables are ignored', function () {
+ var request;
+ htmx.on("htmx:beforeRequest", function (evt) {
+ request = evt;
+ });
+ var div = make("
")
+ div.click();
+ should.equal(request.detail.requestConfig.path, '/items/42/{subitem}');
+ });
+});
diff --git a/www/static/test/ext/sse.js b/www/static/test/ext/sse.js
new file mode 100644
index 00000000..a9702525
--- /dev/null
+++ b/www/static/test/ext/sse.js
@@ -0,0 +1,232 @@
+const { assert } = require("chai");
+
+describe("sse extension", function() {
+
+ function mockEventSource() {
+ var listeners = {};
+ var wasClosed = false;
+ var url;
+ var mockEventSource = {
+ removeEventListener: function(name, l) {
+ listeners[name] = listeners[name].filter(function(elt, idx, arr) {
+ if (arr[idx] === l) {
+ return false;
+ }
+ return true;
+ })
+ },
+ addEventListener: function(message, l) {
+ if (listeners == undefined) {
+ listeners[message] = [];
+ }
+ listeners[message].push(l)
+ },
+ sendEvent: function(eventName, data) {
+ var listeners = listeners[eventName];
+ if (listeners) {
+ listeners.forEach(function(listener) {
+ var event = htmx._("makeEvent")(eventName);
+ event.data = data;
+ listener(event);
+ }
+ }
+ },
+ close: function() {
+ wasClosed = true;
+ },
+ wasClosed: function() {
+ return wasClosed;
+ },
+ connect: function(url) {
+ this.url = url
+ }
+ };
+ return mockEventSource;
+ }
+
+ beforeEach(function() {
+ this.server = makeServer();
+ var eventSource = mockEventSource();
+ this.eventSource = eventSource;
+ clearWorkArea();
+ htmx.createEventSource = function(url) {
+ eventSource.connect(url);
+ 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('
');
+
+ 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 descendents', 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, hx-trigger', 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, hx-swap', 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, hx-trigger', function() {
+ var div = make('
');
+ div.parentElement.removeChild(div);
+ this.eventSource.sendEvent("e1")
+ this.eventSource.wasClosed().should.equal(true)
+ })
+
+ // sse and hx-trigger handlers are distinct
+ it('is closed after removal with no close and activity, sse-swap', 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' +
+ '
\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")
+ })
+
+ it('swaps swapped in content', function() {
+ var div = make('
\n'
+ )
+
+ this.eventSource.sendEvent("e1", '
')
+ this.eventSource.sendEvent("e2", 'Event 2')
+ byId("d2").innerText.should.equal("Event 2")
+ })
+
+ it('works in a child of an hx-ext="sse" element', function() {
+ var div = make('
\n'
+ )
+ this.eventSource.url = "/event_stream"
+ })
+
+ it('only adds sseEventSource to elements with sse-connect', function() {
+ var div = make('
');
+
+ (byId('d1')["htmx-internal-data"].sseEventSource == undefined).should.be.true
+
+ // Even when content is swapped in
+ this.eventSource.sendEvent("e1", '
');
+
+ (byId('d2')["htmx-internal-data"].sseEventSource == undefined).should.be.true
+ })
+
+ it('initializes connections in swapped content', function() {
+ this.server.respondWith("GET", "/d1", '
');
+ this.server.respondWith("GET", "/d2", "div2 updated");
+
+ var div = make('
');
+ div.click();
+
+ this.server.respond();
+ this.eventSource.sendEvent("e2");
+ this.server.respond();
+
+ byId("d2").innerHTML.should.equal("div2 updated");
+ })
+
+ it('creates an eventsource on elements with sse-connect', function() {
+ var div = make('
');
+
+ (byId("d1")['htmx-internal-data'].sseEventSource == undefined).should.be.false;
+
+ })
+
+});
+
diff --git a/www/static/test/index.html b/www/static/test/index.html
index eb6f15b1..aa128c54 100644
--- a/www/static/test/index.html
+++ b/www/static/test/index.html
@@ -158,9 +158,15 @@
+
+
+
+
+
+
@@ -174,7 +180,7 @@
Work Area
-