");
+ htmx.findAll(div, ".c1").length.should.equal(3);
+ htmx.findAll(div, ".c2").length.should.equal(2);
+ htmx.findAll(div,".c3").length.should.equal(1);
+ });
+
+ it('should find closest element properly', function () {
+ var div = make("
");
+ var a = htmx.find(div, "a");
+ htmx.closest(a, "div").should.equal(div);
+ });
+
+ it('should remove element properly', function () {
+ var div = make("
");
+ var a = htmx.find(div, "a");
+ htmx.remove(a);
+ div.innerHTML.should.equal("");
+ });
+
+ it('should remove element properly w/ selector', function () {
+ var div = make("
");
+ var a = htmx.find(div, "a");
+ htmx.remove("#a1");
+ div.innerHTML.should.equal("");
+ });
+
+ it('should add class properly', function () {
+ var div = make("
");
+ div.classList.contains("foo").should.equal(false);
+ htmx.addClass(div, "foo");
+ div.classList.contains("foo").should.equal(true);
+ });
+
+
+ it('should add class properly w/ selector', function () {
+ var div = make("
");
+ div.classList.contains("foo").should.equal(false);
+ htmx.addClass("#div1", "foo");
+ div.classList.contains("foo").should.equal(true);
+ });
+
+ it('should add class properly after delay', function (done) {
+ var div = make("
");
+ div.classList.contains("foo").should.equal(false);
+ htmx.addClass(div, "foo", 10);
+ div.classList.contains("foo").should.equal(false);
+ setTimeout(function () {
+ div.classList.contains("foo").should.equal(true);
+ done();
+ }, 20);
+ });
+
+ it('should remove class properly', function () {
+ var div = make("
");
+ htmx.addClass(div, "foo");
+ div.classList.contains("foo").should.equal(true);
+ htmx.removeClass(div, "foo");
+ div.classList.contains("foo").should.equal(false);
+ });
+
+ it('should remove class properly w/ selector', function () {
+ var div = make("
");
+ htmx.addClass(div, "foo");
+ div.classList.contains("foo").should.equal(true);
+ htmx.removeClass("#div1", "foo");
+ div.classList.contains("foo").should.equal(false);
+ });
+
+ it('should add class properly after delay', function (done) {
+ var div = make("
");
+ htmx.addClass(div, "foo");
+ div.classList.contains("foo").should.equal(true);
+ htmx.removeClass(div, "foo", 10);
+ div.classList.contains("foo").should.equal(true);
+ setTimeout(function () {
+ div.classList.contains("foo").should.equal(false);
+ done();
+ }, 20);
+ });
+
+ it('should toggle class properly', function () {
+ var div = make("
");
+ div.classList.contains("foo").should.equal(false);
+ htmx.toggleClass(div, "foo");
+ div.classList.contains("foo").should.equal(true);
+ htmx.toggleClass(div, "foo");
+ div.classList.contains("foo").should.equal(false);
+ });
+
+ it('should toggle class properly w/ selector', function () {
+ var div = make("
");
+ div.classList.contains("foo").should.equal(false);
+ htmx.toggleClass("#div1", "foo");
+ div.classList.contains("foo").should.equal(true);
+ htmx.toggleClass("#div1", "foo");
+ div.classList.contains("foo").should.equal(false);
+ });
+
+ it('should take class properly', function () {
+ var div1 = make("
");
+ var div2 = make("
");
+ var div3 = make("
");
+
+ div1.classList.contains("foo").should.equal(false);
+ div2.classList.contains("foo").should.equal(false);
+ div3.classList.contains("foo").should.equal(false);
+
+ htmx.takeClass(div1, "foo");
+
+ div1.classList.contains("foo").should.equal(true);
+ div2.classList.contains("foo").should.equal(false);
+ div3.classList.contains("foo").should.equal(false);
+
+ htmx.takeClass(div2, "foo");
+
+ div1.classList.contains("foo").should.equal(false);
+ div2.classList.contains("foo").should.equal(true);
+ div3.classList.contains("foo").should.equal(false);
+
+ htmx.takeClass(div3, "foo");
+
+ div1.classList.contains("foo").should.equal(false);
+ div2.classList.contains("foo").should.equal(false);
+ div3.classList.contains("foo").should.equal(true);
+ });
+
+ it('should take class properly w/ selector', function () {
+ var div1 = make("
");
+ var div2 = make("
");
+ var div3 = make("
");
+
+ div1.classList.contains("foo").should.equal(false);
+ div2.classList.contains("foo").should.equal(false);
+ div3.classList.contains("foo").should.equal(false);
+
+ htmx.takeClass("#div1", "foo");
+
+ div1.classList.contains("foo").should.equal(true);
+ div2.classList.contains("foo").should.equal(false);
+ div3.classList.contains("foo").should.equal(false);
+
+ htmx.takeClass("#div2", "foo");
+
+ div1.classList.contains("foo").should.equal(false);
+ div2.classList.contains("foo").should.equal(true);
+ div3.classList.contains("foo").should.equal(false);
+
+ htmx.takeClass("#div3", "foo");
+
+ div1.classList.contains("foo").should.equal(false);
+ div2.classList.contains("foo").should.equal(false);
+ div3.classList.contains("foo").should.equal(true);
+ });
+
+ it('logAll works', function () {
+ var initialLogger = htmx.config.logger
+ try {
+ htmx.logAll();
+ } finally {
+ htmx.config.logger = initialLogger;
+ }
+ });
+
+ it('eval can be suppressed', function () {
+ var calledEvent = false;
+ var handler = htmx.on("htmx:evalDisallowedError", function(){
+ calledEvent = true;
+ });
+ try {
+ htmx.config.allowEval = false;
+ should.equal(htmx._("tokenizeString"), undefined);
+ } finally {
+ htmx.config.allowEval = true;
+ htmx.off("htmx:evalDisallowedError", handler);
+ }
+ calledEvent.should.equal(true);
+ });
+
+ it('ajax api works', function()
+ {
+ this.server.respondWith("GET", "/test", "foo!");
+ var div = make("
");
+ htmx.ajax("GET", "/test", div)
+ this.server.respond();
+ div.innerHTML.should.equal("foo!");
+ });
+
+ it('ajax api works by ID', function()
+ {
+ this.server.respondWith("GET", "/test", "foo!");
+ var div = make("
");
+ htmx.ajax("GET", "/test", "#d1")
+ this.server.respond();
+ div.innerHTML.should.equal("foo!");
+ });
+
+ it('ajax returns a promise', function(done)
+ {
+ // in IE we do not return a promise
+ if (typeof Promise !== "undefined") {
+ this.server.respondWith("GET", "/test", "foo!");
+ var div = make("
");
+ var promise = htmx.ajax("GET", "/test", "#d1");
+ this.server.respond();
+ div.innerHTML.should.equal("foo!");
+ promise.then(function(){
+ done();
+ })
+ } else {
+ done();
+ }
+ });
+
+ it('ajax api can pass parameters', function()
+ {
+ this.server.respondWith("POST", "/test", function (xhr) {
+ var params = getParameters(xhr);
+ params['i1'].should.equal("test");
+ xhr.respond(200, {}, "Clicked!")
+ });
+ var div = make("
");
+ htmx.ajax("POST", "/test", {target:"#d1", values:{i1: 'test'}})
+ this.server.respond();
+ div.innerHTML.should.equal("Clicked!");
+ });
+
+})
diff --git a/www/test/1.5.1/test/core/events.js b/www/test/1.5.1/test/core/events.js
new file mode 100644
index 00000000..11cea12d
--- /dev/null
+++ b/www/test/1.5.1/test/core/events.js
@@ -0,0 +1,448 @@
+describe("Core htmx Events", function() {
+ beforeEach(function () {
+ this.server = makeServer();
+ clearWorkArea();
+ });
+ afterEach(function () {
+ this.server.restore();
+ clearWorkArea();
+ });
+
+ it("htmx:load fires properly", function () {
+ var called = false;
+ var handler = htmx.on("htmx:load", function (evt) {
+ called = true;
+ });
+ try {
+ this.server.respondWith("GET", "/test", "");
+ this.server.respondWith("GET", "/test", "
");
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ should.equal(called, true);
+ } finally {
+ htmx.off("htmx:load", handler);
+ }
+ });
+
+ it("htmx:configRequest allows attribute addition", function () {
+ var handler = htmx.on("htmx:configRequest", function (evt) {
+ evt.detail.parameters['param'] = "true";
+ });
+ try {
+ var param = null;
+ this.server.respondWith("POST", "/test", function (xhr) {
+ param = getParameters(xhr)['param'];
+ xhr.respond(200, {}, "");
+ });
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ param.should.equal("true");
+ } finally {
+ htmx.off("htmx:configRequest", handler);
+ }
+ });
+
+ it("htmx:configRequest is also dispatched in kebab-case", function () {
+ var handler = htmx.on("htmx:config-request", function (evt) {
+ evt.detail.parameters['param'] = "true";
+ });
+ try {
+ var param = null;
+ this.server.respondWith("POST", "/test", function (xhr) {
+ param = getParameters(xhr)['param'];
+ xhr.respond(200, {}, "");
+ });
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ param.should.equal("true");
+ } finally {
+ htmx.off("htmx:config-request", handler);
+ }
+ });
+
+ it("events are only dispatched once if kebab and camel case match", function () {
+ var invoked = 0;
+ var handler = htmx.on("custom", function () {
+ invoked = invoked + 1
+ });
+ try {
+ var div = make("
");
+ htmx.trigger(div, "custom");
+ invoked.should.equal(1);
+ } finally {
+ htmx.off("custom", handler);
+ }
+ });
+
+ it("htmx:configRequest allows attribute removal", function () {
+ var param = "foo";
+ var handler = htmx.on("htmx:configRequest", function (evt) {
+ delete evt.detail.parameters['param'];
+ });
+ try {
+ this.server.respondWith("POST", "/test", function (xhr) {
+ param = getParameters(xhr)['param'];
+ xhr.respond(200, {}, "");
+ });
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ should.equal(param, undefined);
+ } finally {
+ htmx.off("htmx:configRequest", handler);
+ }
+ });
+
+ it("htmx:configRequest allows header tweaking", function () {
+ var header = "foo";
+ var handler = htmx.on("htmx:configRequest", function (evt) {
+ evt.detail.headers['X-My-Header'] = "bar";
+ });
+ try {
+ this.server.respondWith("POST", "/test", function (xhr) {
+ header = xhr.requestHeaders['X-My-Header'];
+ xhr.respond(200, {}, "");
+ });
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ should.equal(header, "bar");
+ } finally {
+ htmx.off("htmx:configRequest", handler);
+ }
+ });
+
+ it("htmx:afterSwap is called when replacing outerHTML", function () {
+ var called = false;
+ var handler = htmx.on("htmx:afterSwap", function (evt) {
+ called = true;
+ });
+ try {
+ this.server.respondWith("POST", "/test", function (xhr) {
+ xhr.respond(200, {}, "
");
+ });
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ should.equal(called, true);
+ } finally {
+ htmx.off("htmx:afterSwap", handler);
+ }
+ });
+
+ it("htmx:afterSettle is called once when replacing outerHTML", function () {
+ var called = 0;
+ var handler = htmx.on("htmx:afterSettle", function (evt) {
+ called++;
+ });
+ try {
+ this.server.respondWith("POST", "/test", function (xhr) {
+ xhr.respond(200, {}, "
");
+ });
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ should.equal(called, 1);
+ } finally {
+ htmx.off("htmx:afterSettle", handler);
+ }
+ });
+
+ it("htmx:afterSettle is called once when replacing outerHTML with whitespace", function () {
+ var called = 0;
+ var handler = htmx.on("htmx:afterSettle", function (evt) {
+ called++;
+ });
+ try {
+ this.server.respondWith("POST", "/test", function (xhr) {
+ xhr.respond(200, {}, "
\n");
+ });
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ should.equal(called, 1);
+ } finally {
+ htmx.off("htmx:afterSettle", handler);
+ }
+ });
+
+ it("htmx:afterSettle is called twice when replacing outerHTML with whitespace separated elements", function () {
+ var called = 0;
+ var handler = htmx.on("htmx:afterSettle", function (evt) {
+ called++;
+ });
+ try {
+ this.server.respondWith("POST", "/test", function (xhr) {
+ xhr.respond(200, {}, "
\n
Foo");
+ });
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ should.equal(called, 2);
+ } finally {
+ htmx.off("htmx:afterSettle", handler);
+ }
+ });
+
+ it("htmx:afterRequest is called after a successful request", function () {
+ var called = false;
+ var handler = htmx.on("htmx:afterRequest", function (evt) {
+ called = true;
+ });
+ try {
+ this.server.respondWith("POST", "/test", function (xhr) {
+ xhr.respond(200, {}, "");
+ });
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ should.equal(called, true);
+ } finally {
+ htmx.off("htmx:afterRequest", handler);
+ }
+ });
+
+ it("htmx:afterOnLoad is called after a successful request", function () {
+ var called = false;
+ var handler = htmx.on("htmx:afterOnLoad", function (evt) {
+ called = true;
+ });
+ try {
+ this.server.respondWith("POST", "/test", function (xhr) {
+ xhr.respond(200, {}, "");
+ });
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ should.equal(called, true);
+ } finally {
+ htmx.off("htmx:afterOnLoad", handler);
+ }
+ });
+
+ it("htmx:afterRequest is called after a failed request", function () {
+ var called = false;
+ var handler = htmx.on("htmx:afterRequest", function (evt) {
+ called = true;
+ });
+ try {
+ this.server.respondWith("POST", "/test", function (xhr) {
+ xhr.respond(200, {}, "");
+ });
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ should.equal(called, true);
+ } finally {
+ htmx.off("htmx:afterRequest", handler);
+ }
+ });
+
+ it("htmx:sendError is called after a failed request", function (done) {
+ var called = false;
+ var handler = htmx.on("htmx:sendError", function (evt) {
+ called = true;
+ });
+ this.server.restore(); // turn off server mock so connection doesn't work
+ var div = make("
");
+ div.click();
+ setTimeout(function () {
+ htmx.off("htmx:sendError", handler);
+ should.equal(called, true);
+ done();
+ }, 30);
+ });
+
+ it("htmx:afterRequest is called when replacing outerHTML", function () {
+ var called = false;
+ var handler = htmx.on("htmx:afterRequest", function (evt) {
+ called = true;
+ });
+ try {
+ this.server.respondWith("POST", "/test", function (xhr) {
+ xhr.respond(200, {}, "
");
+ });
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ should.equal(called, true);
+ } finally {
+ htmx.off("htmx:afterRequest", handler);
+ }
+ });
+
+ it("htmx:afterOnLoad is called when replacing outerHTML", function () {
+ var called = false;
+ var handler = htmx.on("htmx:afterOnLoad", function (evt) {
+ called = true;
+ });
+ try {
+ this.server.respondWith("POST", "/test", function (xhr) {
+ xhr.respond(200, {}, "
");
+ });
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ should.equal(called, true);
+ } finally {
+ htmx.off("htmx:afterOnLoad", handler);
+ }
+ });
+
+ it("htmx:beforeProcessNode is called when replacing outerHTML", function () {
+ var called = false;
+ var handler = htmx.on("htmx:beforeProcessNode", function (evt) {
+ called = true;
+ });
+ try {
+ this.server.respondWith("POST", "/test", function (xhr) {
+ xhr.respond(200, {}, "
");
+ });
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ should.equal(called, true);
+ } finally {
+ htmx.off("htmx:beforeProcessNode", handler);
+ }
+ });
+
+ it("htmx:beforeProcessNode allows htmx attribute tweaking", function () {
+ var called = false;
+ var handler = htmx.on("htmx:beforeProcessNode", function (evt) {
+ evt.target.setAttribute("hx-post", "/success")
+ called = true;
+ });
+ try {
+ this.server.respondWith("POST", "/success", function (xhr) {
+ xhr.respond(200, {}, "
");
+ });
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ should.equal(called, true);
+ } finally {
+ htmx.off("htmx:beforeProcessNode", handler);
+ }
+ });
+
+ it("htmx:afterProcessNode is called after replacing outerHTML", function () {
+ var called = false;
+ var handler = htmx.on("htmx:afterProcessNode", function (evt) {
+ called = true;
+ });
+ try {
+ this.server.respondWith("POST", "/test", function (xhr) {
+ xhr.respond(200, {}, "
");
+ });
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ should.equal(called, true);
+ } finally {
+ htmx.off("htmx:afterProcessNode", handler);
+ }
+ });
+
+ it("htmx:afterRequest is called when targeting a parent div", function () {
+ var called = false;
+ var handler = htmx.on("htmx:afterRequest", function (evt) {
+ called = true;
+ });
+ try {
+ this.server.respondWith("POST", "/test", function (xhr) {
+ xhr.respond(200, {}, "
");
+ });
+ var div = make("
");
+ var button = byId('b1');
+ button.click();
+ this.server.respond();
+ should.equal(called, true);
+ } finally {
+ htmx.off("htmx:afterRequest", handler);
+ }
+ });
+
+ it("adding an error in htmx:configRequest stops the request", function () {
+ try {
+ var handler = htmx.on("htmx:configRequest", function (evt) {
+ evt.detail.errors.push("An error");
+ });
+ var request = false;
+ this.server.respondWith("POST", "/test", function (xhr) {
+ request = true;
+ xhr.respond(200, {}, "
");
+ });
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ should.equal(request, false);
+ } finally {
+ htmx.off("htmx:configRequest", handler);
+ }
+ });
+
+ it("preventDefault() in htmx:configRequest stops the request", function () {
+ try {
+ var handler = htmx.on("htmx:configRequest", function (evt) {
+ evt.detail.errors.push("An error");
+ });
+ var request = false;
+ this.server.respondWith("POST", "/test", function (xhr) {
+ request = true;
+ xhr.respond(200, {}, "
");
+ });
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ should.equal(request, false);
+ } finally {
+ htmx.off("htmx:configRequest", handler);
+ }
+ });
+
+ it("preventDefault() in the htmx:beforeRequest event cancels the request", function () {
+ try {
+ var handler = htmx.on("htmx:beforeRequest", function (evt) {
+ evt.preventDefault();
+ });
+ var request = false;
+ this.server.respondWith("POST", "/test", function (xhr) {
+ request = true;
+ xhr.respond(200, {}, "
");
+ });
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ should.equal(request, false);
+ } finally {
+ htmx.off("htmx:beforeRequest", handler);
+ }
+ });
+
+ it("preventDefault() in the htmx:beforeOnLoad event cancels the swap", function () {
+ try {
+ var handler = htmx.on("htmx:beforeOnLoad", function (evt) {
+ evt.preventDefault();
+ });
+ var request = false;
+ this.server.respondWith("POST", "/test", function (xhr) {
+ request = true;
+ xhr.respond(200, {}, "Bar");
+ });
+ var div = make("
");
+ div.click();
+ this.server.respond();
+ should.equal(request, true);
+ div.innerText.should.equal("Foo");
+ } finally {
+ htmx.off("htmx:beforeOnLoad", handler);
+ }
+ });
+
+
+});
+
diff --git a/www/test/1.5.1/test/core/headers.js b/www/test/1.5.1/test/core/headers.js
new file mode 100644
index 00000000..cb8bab7a
--- /dev/null
+++ b/www/test/1.5.1/test/core/headers.js
@@ -0,0 +1,201 @@
+describe("Core htmx AJAX headers", function () {
+ beforeEach(function () {
+ this.server = makeServer();
+ clearWorkArea();
+ });
+ afterEach(function () {
+ this.server.restore();
+ clearWorkArea();
+ });
+
+ it("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, {}, "");
+ });
+ var div = make('
');
+ div.click();
+ this.server.respond();
+ })
+
+ it("should include the HX-Trigger header", function () {
+ this.server.respondWith("GET", "/test", function (xhr) {
+ xhr.requestHeaders['HX-Trigger'].should.equal('d1');
+ xhr.respond(200, {}, "");
+ });
+ var div = make('
');
+ div.click();
+ this.server.respond();
+ })
+
+ it("should include the HX-Trigger-Name header", function () {
+ this.server.respondWith("GET", "/test", function (xhr) {
+ xhr.requestHeaders['HX-Trigger-Name'].should.equal('n1');
+ xhr.respond(200, {}, "");
+ });
+ var div = make('
');
+ div.click();
+ this.server.respond();
+ })
+
+ it("should include the HX-Target header", function () {
+ this.server.respondWith("GET", "/test", function (xhr) {
+ xhr.requestHeaders['HX-Target'].should.equal('d1');
+ xhr.respond(200, {}, "");
+ });
+ var div = make('
');
+ div.click();
+ this.server.respond();
+ })
+
+ it("should handle simple string HX-Trigger response header properly", function () {
+ this.server.respondWith("GET", "/test", [200, {"HX-Trigger": "foo"}, ""]);
+
+ var div = make('
');
+ var invokedEvent = false;
+ div.addEventListener("foo", function (evt) {
+ invokedEvent = true;
+ });
+ div.click();
+ this.server.respond();
+ invokedEvent.should.equal(true);
+ })
+
+ it("should handle dot path HX-Trigger response header properly", function () {
+ this.server.respondWith("GET", "/test", [200, {"HX-Trigger": "foo.bar"}, ""]);
+
+ var div = make('
');
+ var invokedEvent = false;
+ div.addEventListener("foo.bar", function (evt) {
+ invokedEvent = true;
+ });
+ div.click();
+ this.server.respond();
+ invokedEvent.should.equal(true);
+ })
+
+ it("should handle simple string HX-Trigger response header in different case properly", function () {
+ this.server.respondWith("GET", "/test", [200, {"hx-trigger": "foo"}, ""]);
+
+ var div = make('
');
+ var invokedEvent = false;
+ div.addEventListener("foo", function (evt) {
+ invokedEvent = true;
+ });
+ div.click();
+ this.server.respond();
+ invokedEvent.should.equal(true);
+ })
+
+ it("should handle a namespaced HX-Trigger response header properly", function () {
+ this.server.respondWith("GET", "/test", [200, {"HX-Trigger": "namespace:foo"}, ""]);
+
+ var div = make('
');
+ var invokedEvent = false;
+ div.addEventListener("namespace:foo", function (evt) {
+ invokedEvent = true;
+ });
+ div.click();
+ this.server.respond();
+ invokedEvent.should.equal(true);
+ })
+
+ it("should handle basic JSON HX-Trigger response header properly", function () {
+ this.server.respondWith("GET", "/test", [200, {"HX-Trigger": "{\"foo\":null}"}, ""]);
+
+ var div = make('
');
+ var invokedEvent = false;
+ div.addEventListener("foo", function (evt) {
+ invokedEvent = true;
+ should.equal(null, evt.detail.value);
+ evt.detail.elt.should.equal(div);
+ });
+ div.click();
+ this.server.respond();
+ invokedEvent.should.equal(true);
+ })
+
+ it("should handle JSON with array arg HX-Trigger response header properly", function () {
+ this.server.respondWith("GET", "/test", [200, {"HX-Trigger": "{\"foo\":[1, 2, 3]}"}, ""]);
+
+ var div = make('
');
+ var invokedEvent = false;
+ div.addEventListener("foo", function (evt) {
+ invokedEvent = true;
+ evt.detail.elt.should.equal(div);
+ evt.detail.value.should.deep.equal([1, 2, 3]);
+ });
+ div.click();
+ this.server.respond();
+ invokedEvent.should.equal(true);
+ })
+
+ it("should handle JSON with array arg HX-Trigger response header properly", function () {
+ this.server.respondWith("GET", "/test", [200, {"HX-Trigger": "{\"foo\":{\"a\":1, \"b\":2}}"}, ""]);
+
+ var div = make('
');
+ var invokedEvent = false;
+ div.addEventListener("foo", function (evt) {
+ invokedEvent = true;
+ evt.detail.elt.should.equal(div);
+ evt.detail.a.should.equal(1);
+ evt.detail.b.should.equal(2);
+ });
+ div.click();
+ this.server.respond();
+ invokedEvent.should.equal(true);
+ })
+
+ it("should survive malformed JSON in HX-Trigger response header", function () {
+ this.server.respondWith("GET", "/test", [200, {"HX-Trigger": "{not: valid}"}, ""]);
+
+ var div = make('
');
+ div.click();
+ this.server.respond();
+ })
+
+ it("should handle simple string HX-Trigger response header properly w/ outerHTML swap", function () {
+ this.server.respondWith("GET", "/test", [200, {"HX-Trigger": "foo"}, ""]);
+
+ var div = make('
');
+ var invokedEvent = false;
+ var handler = htmx.on('foo', function (evt) {
+ invokedEvent = true;
+ });
+ div.click();
+ this.server.respond();
+ invokedEvent.should.equal(true);
+ htmx.off('foo', handler);
+ })
+
+
+ it("should handle simple string HX-Trigger-After-Swap response header properly w/ outerHTML swap", function () {
+ this.server.respondWith("GET", "/test", [200, {"HX-Trigger-After-Swap": "foo"}, ""]);
+
+ var div = make('
');
+ var invokedEvent = false;
+ var handler = htmx.on('foo', function (evt) {
+ invokedEvent = true;
+ });
+ div.click();
+ this.server.respond();
+ invokedEvent.should.equal(true);
+ htmx.off('foo', handler);
+ })
+
+ it("should handle simple string HX-Trigger-After-Settle response header properly w/ outerHTML swap", function () {
+ this.server.respondWith("GET", "/test", [200, {"HX-Trigger-After-Settle": "foo"}, ""]);
+
+ var div = make('
');
+ var invokedEvent = false;
+ var handler = htmx.on('foo', function (evt) {
+ invokedEvent = true;
+ });
+ div.click();
+ this.server.respond();
+ invokedEvent.should.equal(true);
+ htmx.off('foo', handler);
+ })
+
+
+});
diff --git a/www/test/1.5.1/test/core/internals.js b/www/test/1.5.1/test/core/internals.js
new file mode 100644
index 00000000..567f8c19
--- /dev/null
+++ b/www/test/1.5.1/test/core/internals.js
@@ -0,0 +1,101 @@
+describe("Core htmx internals Tests", function() {
+
+ it("makeFragment works with janky stuff", function(){
+ htmx._("makeFragment")("").tagName.should.equal("BODY");
+ htmx._("makeFragment")("").tagName.should.equal("BODY");
+
+ //NB - the tag name should be the *parent* element hosting the HTML since we use the fragment children
+ // for the swap
+ htmx._("makeFragment")("
| ").tagName.should.equal("TR");
+ htmx._("makeFragment")("
").tagName.should.equal("TABLE");
+ htmx._("makeFragment")("
").tagName.should.equal("COLGROUP");
+ htmx._("makeFragment")("
|
").tagName.should.equal("TBODY");
+ })
+
+ it("makeFragment works with template wrapping", function(){
+ htmx.config.useTemplateFragments = true;
+ try {
+ htmx._("makeFragment")("").children.length.should.equal(0);
+ htmx._("makeFragment")("").children.length.should.equal(0);
+
+ var fragment = htmx._("makeFragment")("
| ");
+ fragment.firstElementChild.tagName.should.equal("TD");
+
+ fragment = htmx._("makeFragment")("
");
+ fragment.firstElementChild.tagName.should.equal("THEAD");
+
+ fragment = htmx._("makeFragment")("
");
+ fragment.firstElementChild.tagName.should.equal("COL");
+
+ fragment = htmx._("makeFragment")("
|
");
+ fragment.firstElementChild.tagName.should.equal("TR");
+
+ } finally {
+ htmx.config.useTemplateFragments = false;
+ }
+ })
+
+ it("makeFragment works with template wrapping and funky combos", function(){
+ htmx.config.useTemplateFragments = true;
+ try {
+ var fragment = htmx._("makeFragment")("
| ");
+ fragment.children[0].tagName.should.equal("TD");
+ fragment.children[1].tagName.should.equal("DIV");
+ } finally {
+ htmx.config.useTemplateFragments = false;
+ }
+ })
+
+ it("set header works with non-ASCII values", function(){
+ var xhr = new XMLHttpRequest();
+ xhr.open("GET", "/dummy");
+ htmx._("safelySetHeaderValue")(xhr, "Example", "привет");
+ // unfortunately I can't test the value :/
+ // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
+ })
+
+ 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(null)).to.be.undefined
+ chai.expect(htmx.parseInterval("")).to.be.undefined
+ chai.expect(htmx.parseInterval("undefined")).to.be.undefined
+ chai.expect(htmx.parseInterval("true")).to.be.undefined
+ chai.expect(htmx.parseInterval("false")).to.be.undefined
+ })
+
+ it("tokenizes correctly", function() {
+ chai.expect(htmx._("tokenizeString")("a,")).to.be.deep.equal(['a', ',']);
+ chai.expect(htmx._("tokenizeString")("aa,")).to.be.deep.equal(['aa', ',']);
+ chai.expect(htmx._("tokenizeString")("aa,aa")).to.be.deep.equal(['aa', ',', 'aa']);
+ chai.expect(htmx._("tokenizeString")("aa.aa")).to.be.deep.equal(['aa', '.', 'aa']);
+ })
+
+ it("tags respond correctly to shouldCancel", function() {
+ var anchorThatShouldCancel = make("
");
+ htmx._("shouldCancel")(anchorThatShouldCancel).should.equal(true);
+
+ var anchorThatShouldCancel = make("
");
+ htmx._("shouldCancel")(anchorThatShouldCancel).should.equal(true);
+
+ var anchorThatShouldNotCancel = make("
");
+ htmx._("shouldCancel")(anchorThatShouldNotCancel).should.equal(false);
+
+ var form = make("
");
+ htmx._("shouldCancel")(form).should.equal(true);
+
+ var form = make("
");
+ var input = byId("i1");
+ htmx._("shouldCancel")(input).should.equal(true);
+
+ var form = make("
");
+ var button = byId("b1");
+ htmx._("shouldCancel")(button).should.equal(true);
+
+ })
+
+});
\ No newline at end of file
diff --git a/www/test/1.5.1/test/core/parameters.js b/www/test/1.5.1/test/core/parameters.js
new file mode 100644
index 00000000..08d79e99
--- /dev/null
+++ b/www/test/1.5.1/test/core/parameters.js
@@ -0,0 +1,167 @@
+describe("Core htmx Parameter Handling", function() {
+ beforeEach(function () {
+ this.server = makeServer();
+ clearWorkArea();
+ });
+ afterEach(function () {
+ this.server.restore();
+ clearWorkArea();
+ });
+
+ it('Input includes value', function () {
+ var input = make('
');
+ var vals = htmx._('getInputValues')(input).values;
+ vals['foo'].should.equal('bar');
+ })
+
+ it('Input includes value on get', function () {
+ var input = make('
');
+ var vals = htmx._('getInputValues')(input, "get").values;
+ vals['foo'].should.equal('bar');
+ })
+
+ it('Input includes form', function () {
+ var form = make('
');
+ var input = byId('i1');
+ var vals = htmx._('getInputValues')(input).values;
+ vals['foo'].should.equal('bar');
+ vals['do'].should.equal('rey');
+ })
+
+ it('Input doesnt include form on get', function () {
+ var form = make('
');
+ var input = byId('i1');
+ var vals = htmx._('getInputValues')(input, 'get').values;
+ vals['foo'].should.equal('bar');
+ should.equal(vals['do'], undefined);
+ })
+
+ it('non-input includes form', function () {
+ var form = make('
');
+ var div = byId('d1');
+ var vals = htmx._('getInputValues')(div, "post").values;
+ vals['do'].should.equal('rey');
+ })
+
+ it('non-input doesnt include form on get', function () {
+ var form = make('
');
+ var div = byId('d1');
+ var vals = htmx._('getInputValues')(div, "get").values;
+ should.equal(vals['do'], undefined);
+ })
+
+ it('Basic form works on get', function () {
+ var form = make('
');
+ var vals = htmx._('getInputValues')(form, 'get').values;
+ vals['foo'].should.equal('bar');
+ vals['do'].should.equal('rey');
+ })
+
+ it('Basic form works on non-get', function () {
+ var form = make('
');
+ var vals = htmx._('getInputValues')(form, 'post').values;
+ vals['foo'].should.equal('bar');
+ vals['do'].should.equal('rey');
+ })
+
+ it('Double values are included as array', function () {
+ var form = make('
');
+ var vals = htmx._('getInputValues')(form).values;
+ vals['foo'].should.equal('bar');
+ vals['do'].should.deep.equal(['rey', 'rey']);
+ })
+
+ it('Double values are included as array in correct order', function () {
+ var form = make('
');
+ var vals = htmx._('getInputValues')(byId("i3")).values;
+ vals['foo'].should.equal('bar');
+ vals['do'].should.deep.equal(['rey1', 'rey2']);
+ })
+
+ it('hx-include works with form', function () {
+ var form = make('
');
+ var div = make('
');
+ var vals = htmx._('getInputValues')(div).values;
+ vals['foo'].should.equal('bar');
+ vals['do'].should.deep.equal(['rey', 'rey']);
+ })
+
+ it('hx-include works with input', function () {
+ var form = make('
');
+ var div = make('
');
+ var vals = htmx._('getInputValues')(div).values;
+ vals['foo'].should.equal('bar');
+ should.equal(vals['do'], undefined);
+ })
+
+ it('hx-include works with two inputs', function () {
+ var form = make('
');
+ var div = make('
');
+ var vals = htmx._('getInputValues')(div).values;
+ vals['foo'].should.equal('bar');
+ vals['do'].should.deep.equal(['rey', 'rey']);
+ })
+
+ it('hx-include works with two inputs, plus form', function () {
+ var form = make('
');
+ var div = make('
');
+ var vals = htmx._('getInputValues')(div).values;
+ vals['foo'].should.equal('bar');
+ vals['do'].should.deep.equal(['rey', 'rey']);
+ })
+
+ it('correctly URL escapes values', function () {
+ htmx._("urlEncode")({}).should.equal("");
+ htmx._("urlEncode")({"foo": "bar"}).should.equal("foo=bar");
+ htmx._("urlEncode")({"foo": "bar", "do" : "rey"}).should.equal("foo=bar&do=rey");
+ htmx._("urlEncode")({"foo": "bar", "do" : ["rey", "blah"]}).should.equal("foo=bar&do=rey&do=blah");
+ });
+
+ it('form includes last focused button', function () {
+ var form = make('
');
+ var input = byId('i1');
+ var button = byId('b1');
+ button.focus();
+ var vals = htmx._('getInputValues')(form).values;
+ vals['foo'].should.equal('bar');
+ vals['do'].should.equal('rey');
+ vals['btn'].should.equal('bar');
+ })
+
+ it('form includes last focused submit', function () {
+ var form = make('
');
+ var input = byId('i1');
+ var button = byId('s1');
+ button.focus();
+ var vals = htmx._('getInputValues')(form).values;
+ vals['foo'].should.equal('bar');
+ vals['do'].should.equal('rey');
+ vals['s1'].should.equal('bar');
+ })
+
+ it('form does not include button when focus is lost', function () {
+ var form = make('
');
+ var input = byId('i1');
+ var button = byId('s1');
+ button.focus();
+ input.focus();
+ var vals = htmx._('getInputValues')(form).values;
+ vals['foo'].should.equal('bar');
+ vals['do'].should.equal('rey');
+ should.equal(vals['s1'], undefined);
+ })
+
+ it('form does not include button when focus is lost outside of form', function () {
+ var form = make('
');
+ var anchor = make('
');
+ var button = byId('s1');
+ button.focus();
+ anchor.focus();
+ var vals = htmx._('getInputValues')(form).values;
+ vals['foo'].should.equal('bar');
+ vals['do'].should.equal('rey');
+ should.equal(vals['s1'], undefined);
+ })
+
+});
+
diff --git a/www/test/1.5.1/test/core/perf.js b/www/test/1.5.1/test/core/perf.js
new file mode 100644
index 00000000..c461aee1
--- /dev/null
+++ b/www/test/1.5.1/test/core/perf.js
@@ -0,0 +1,64 @@
+describe("Core htmx perf Tests", function() {
+
+ var HTMX_HISTORY_CACHE_NAME = "htmx-history-cache";
+
+ beforeEach(function () {
+ this.server = makeServer();
+ clearWorkArea();
+ localStorage.removeItem(HTMX_HISTORY_CACHE_NAME);
+ });
+ afterEach(function () {
+ this.server.restore();
+ clearWorkArea();
+ localStorage.removeItem(HTMX_HISTORY_CACHE_NAME);
+ });
+
+ function stringRepeat(str, num) {
+ num = Number(num);
+
+ var result = '';
+ while (true) {
+ if (num & 1) { // (1)
+ result += str;
+ }
+ num >>>= 1; // (2)
+ if (num <= 0) break;
+ str += str;
+ }
+
+ return result;
+ }
+
+
+ it("history implementation should be fast", function(){
+ // create an entry with a large content string (256k) and see how fast we can write and read it
+ // to local storage as a single entry
+ var entry = {url: stringRepeat("x", 32), content:stringRepeat("x", 256*1024)}
+ var array = [];
+ for (var i = 0; i < 10; i++) {
+ array.push(entry);
+ }
+ var start = performance.now();
+ var string = JSON.stringify(array);
+ localStorage.setItem(HTMX_HISTORY_CACHE_NAME, string);
+ var reReadString = localStorage.getItem(HTMX_HISTORY_CACHE_NAME);
+ var finalJson = JSON.parse(reReadString);
+ var end = performance.now();
+ var timeInMs = end - start;
+ chai.assert(timeInMs < 300, "Should take less than 300ms on most platforms");
+ })
+
+ it("history snapshot cleaning should be fast", function(){
+ //
+ var workArea = getWorkArea();
+ var html = "
Yay, really large HTML documents are fun!
\n";
+ html = stringRepeat(html, 5 * 1024); // ~350K in size, about the size of CNN's body tag :p
+ workArea.insertAdjacentHTML("beforeend", html)
+ var start = performance.now();
+ htmx._("cleanInnerHtmlForHistory")(workArea);
+ var end = performance.now();
+ var timeInMs = end - start;
+ chai.assert(timeInMs < 50, "Should take less than 50ms on most platforms");
+ })
+
+})
\ No newline at end of file
diff --git a/www/test/1.5.1/test/core/regressions.js b/www/test/1.5.1/test/core/regressions.js
new file mode 100644
index 00000000..a6bb4726
--- /dev/null
+++ b/www/test/1.5.1/test/core/regressions.js
@@ -0,0 +1,175 @@
+describe("Core htmx Regression Tests", function(){
+
+ beforeEach(function() {
+ this.server = makeServer();
+ clearWorkArea();
+ });
+ afterEach(function() {
+ this.server.restore();
+ clearWorkArea();
+ });
+
+ it('SVGs process properly in IE11', function()
+ {
+ var btn = make('
')
+ });
+
+ it ('Handles https://github.com/bigskysoftware/htmx/issues/4 properly', function() {
+ this.server.respondWith("GET", "/index2a.php",
+ "
I came from message oob swap I should be second
" +
+ "
I came from a message2 oob swap I should be third but I am in the wrong spot
" +
+ "I'm page2 content (non-swap) I should be first")
+
+ var h1 = make("" +
+ "
" +
+ "
" +
+ "
" +
+ "
Kutty CLICK ME
")
+ h1.click();
+ this.server.respond();
+ htmx.find("#page2").innerHTML.should.equal("I'm page2 content (non-swap) I should be first")
+ htmx.find("#message").innerHTML.should.equal("I came from message oob swap I should be second")
+ htmx.find("#message2").innerHTML.should.equal("I came from a message2 oob swap I should be third but I am in the wrong spot")
+ });
+
+ it ('Handles https://github.com/bigskysoftware/htmx/issues/33 "empty values" properly', function() {
+ this.server.respondWith("POST", "/htmx.php", function (xhr) {
+ xhr.respond(200, {}, xhr.requestBody);
+ });
+
+ var form = make('
')
+ form.click();
+ this.server.respond();
+ form.innerHTML.should.equal("variable=")
+ });
+
+ it ('name=id doesnt cause an error', function(){
+ this.server.respondWith("GET", "/test", "Foo
")
+ var div = make('
Get It
')
+ div.click();
+ this.server.respond();
+ div.innerText.should.contain("Foo")
+ });
+
+ it ('empty id doesnt cause an error', function(){
+ this.server.respondWith("GET", "/test", "Foo\n
")
+ var div = make('
Get It
')
+ div.click();
+ this.server.respond();
+ div.innerText.should.contain("Foo")
+ });
+
+ it ('id with dot in value doesnt cause an error', function(){
+ this.server.respondWith("GET", "/test", "Foo
");
+ var div = make('
Get It
');
+ div.click();
+ this.server.respond();
+ div.innerText.should.contain("Foo");
+ });
+
+ it ('@ symbol in attributes does not break requests', function(){
+ this.server.respondWith("GET", "/test", "
Foo
");
+ var div = make('
Get It
');
+ div.click();
+ this.server.respond();
+ byId("d1").getAttribute('@foo').should.equal('bar');
+ });
+
+ it ('@ symbol in attributes does not break attribute settling requests', function(){
+ this.server.respondWith("GET", "/test", "
Foo
");
+ var div = make('
');
+ div.click();
+ this.server.respond();
+ byId("d1").getAttribute('@foo').should.equal('bar');
+ });
+
+ it ('selected element with ID does not cause NPE when it disappears', function(){
+ this.server.respondWith("GET", "/test", "
Replaced
");
+ var input = make('
');
+ input.focus();
+ input.click();
+ this.server.respond();
+ byId("d1").innerText.should.equal('Replaced');
+ });
+
+ it('does not submit with a false condition on a form', function() {
+ this.server.respondWith("POST", "/test", "Submitted");
+ var defaultPrevented = false;
+ htmx.on("click", function(evt) {
+ defaultPrevented = evt.defaultPrevented;
+ })
+ var form = make('
');
+ form.click()
+ this.server.respond();
+ defaultPrevented.should.equal(true);
+ })
+
+ it('two elements can listen for the same event on another element', function() {
+ this.server.respondWith("GET", "/test", "triggered");
+
+ make('
' +
+ '
');
+
+
+ var div1 = byId("d1");
+ var div2 = byId("d2");
+
+ document.body.click();
+ this.server.respond();
+
+ div2.innerHTML.should.equal("triggered");
+ div1.innerHTML.should.equal("triggered");
+ })
+
+ it('a form can reset based on the htmx:afterRequest event', function() {
+ this.server.respondWith("POST", "/test", "posted");
+ //htmx.logAll();
+
+ var form = make('
');
+ htmx.trigger(form, "htmx:load"); // have to manually trigger the load event for non-AJAX dynamic content
+
+ var div1 = byId("d1");
+ var input = byId("i1");
+ input.value = "foo";
+ var submit = byId("s1");
+
+ input.value.should.equal("foo");
+ submit.click();
+ this.server.respond();
+
+ div1.innerHTML.should.equal("posted");
+ input.value.should.equal(""); // form should be reset
+ })
+
+ it('supports image maps', function() {
+ this.server.respondWith("GET", "/test", "triggered");
+
+ make('
' +
+ '
' +
+ '
' +
+ '' +
+ '
' +
+ '
');
+
+ var div1 = byId("d1");
+ var area = document.getElementsByTagName('area')[0];
+
+ area.click();
+ this.server.respond();
+
+ div1.innerHTML.should.equal("triggered");
+ })
+
+})
diff --git a/www/test/1.5.1/test/core/security.js b/www/test/1.5.1/test/core/security.js
new file mode 100644
index 00000000..d4be7216
--- /dev/null
+++ b/www/test/1.5.1/test/core/security.js
@@ -0,0 +1,32 @@
+describe("security options", function() {
+
+ beforeEach(function() {
+ this.server = makeServer();
+ clearWorkArea();
+ });
+ afterEach(function() {
+ this.server.restore();
+ clearWorkArea();
+ });
+
+ it("can disable a single elt", function(){
+ this.server.respondWith("GET", "/test", "Clicked!");
+
+ var btn = make('
')
+ btn.click();
+ this.server.respond();
+ btn.innerHTML.should.equal("Initial");
+ })
+
+ it("can disable a parent elt", function(){
+ this.server.respondWith("GET", "/test", "Clicked!");
+
+ var div = make('
')
+ var btn = byId("b1");
+ btn.click();
+ this.server.respond();
+ btn.innerHTML.should.equal("Initial");
+ })
+
+
+});
\ No newline at end of file
diff --git a/www/test/1.5.1/test/core/tokenizer.js b/www/test/1.5.1/test/core/tokenizer.js
new file mode 100644
index 00000000..3071ad9b
--- /dev/null
+++ b/www/test/1.5.1/test/core/tokenizer.js
@@ -0,0 +1,48 @@
+describe("Core htmx tokenizer tests", function(){
+ beforeEach(function() {
+ this.server = makeServer();
+ clearWorkArea();
+ });
+ afterEach(function() {
+ this.server.restore();
+ clearWorkArea();
+ });
+
+ function tokenize(str) {
+ return htmx._("tokenizeString")(str);
+ }
+
+ function tokenizeTest(str, result) {
+ return tokenize(str).should.deep.equal(result);
+ }
+
+ it('tokenizes properly', function()
+ {
+ tokenizeTest("", []);
+ tokenizeTest(" ", [" ", " "]);
+ tokenizeTest("(", ["("]);
+ tokenizeTest("()", ["(", ")"]);
+ tokenizeTest("(,)", ["(", ",", ")"]);
+ tokenizeTest(" ( ) ", [" ", "(", " ", ")", " "]);
+ tokenizeTest(" && ) ", [" ", "&", "&", " ", ")", " "]);
+ tokenizeTest(" && ) 'asdf'", [" ", "&", "&", " ", ")", " ", "'asdf'"]);
+ tokenizeTest(" && ) ',asdf'", [" ", "&", "&", " ", ")", " ", "',asdf'"]);
+ tokenizeTest('",asdf"', ['",asdf"']);
+ tokenizeTest('&& ) ",asdf"', ["&", "&", " ", ")", " ", '",asdf"']);
+ });
+
+ it('generates conditionals property', function()
+ {
+ var tokens = tokenize("[code==4||(code==5&&foo==true)]");
+ var conditional = htmx._("maybeGenerateConditional")(null, tokens);
+ var func = eval(conditional);
+ func({code: 5, foo: true}).should.equal(true);
+ func({code: 5, foo: false}).should.equal(false);
+ func({code: 4, foo: false}).should.equal(true);
+ func({code: 3, foo: true}).should.equal(false);
+ });
+
+
+
+
+})
diff --git a/www/test/1.5.1/test/core/validation.js b/www/test/1.5.1/test/core/validation.js
new file mode 100644
index 00000000..e7f34571
--- /dev/null
+++ b/www/test/1.5.1/test/core/validation.js
@@ -0,0 +1,159 @@
+describe("Core htmx client side validation tests", function(){
+ beforeEach(function() {
+ this.server = makeServer();
+ clearWorkArea();
+ });
+ afterEach(function() {
+ this.server.restore();
+ clearWorkArea();
+ });
+
+ it('HTML5 required validation error prevents request', function()
+ {
+ this.server.respondWith("POST", "/test", "Clicked!");
+
+ var form = make('
');
+ form.textContent.should.equal("No Request");
+ form.click();
+ this.server.respond();
+ form.textContent.should.equal("No Request");
+ byId("i1").value = "foo";
+ form.click();
+ this.server.respond();
+ form.textContent.should.equal("Clicked!");
+ });
+
+ it('Novalidate skips form validation', function()
+ {
+ this.server.respondWith("POST", "/test", "Clicked!");
+
+ var form = make('
');
+ form.textContent.should.equal("No Request");
+ form.click();
+ this.server.respond();
+ form.textContent.should.equal("Clicked!");
+ });
+
+ it('Validation skipped for indirect form submission', function()
+ {
+ this.server.respondWith("POST", "/test", "Clicked!");
+
+ var form = make('
');
+ form.textContent.should.equal("No Request");
+ byId("button").click();
+ this.server.respond();
+ form.textContent.should.equal("Clicked!");
+ });
+
+ it('HTML5 pattern validation error prevents request', function()
+ {
+ this.server.respondWith("POST", "/test", "Clicked!");
+
+ var form = make('
');
+ byId("i1").value = "xyz";
+ form.textContent.should.equal("No Request");
+ form.click();
+ this.server.respond();
+ form.textContent.should.equal("No Request");
+ byId("i1").value = "abc";
+ form.click();
+ this.server.respond();
+ form.textContent.should.equal("Clicked!");
+ });
+
+ it('Custom validation error prevents request', function()
+ {
+ this.server.respondWith("POST", "/test", "Clicked!");
+
+ var form = make('
');
+ byId("i1").setCustomValidity("Nope");
+ form.textContent.should.equal("No Request");
+ form.click();
+ this.server.respond();
+ form.textContent.should.equal("No Request");
+ byId("i1").setCustomValidity("");
+ form.click();
+ this.server.respond();
+ form.textContent.should.equal("Clicked!");
+ });
+
+ it('hyperscript validation error prevents request', function()
+ {
+ this.server.respondWith("POST", "/test", "Clicked!");
+
+ var form = make('
');
+ htmx.trigger(form, "htmx:load");
+ byId("i1").value = "boo";
+ form.textContent.should.equal("No Request");
+ form.click();
+ this.server.respond();
+ form.textContent.should.equal("No Request");
+ byId("i1").value = "foo";
+ form.click();
+ this.server.respond();
+ form.textContent.should.equal("Clicked!");
+ });
+
+ it('calls htmx:validation:failed on failure', function()
+ {
+ var form = make('
');
+ var calledEvent = false;
+ var handler = htmx.on(form, "htmx:validation:failed", function(){
+ calledEvent = true;
+ });
+ try {
+ form.click();
+ this.server.respond();
+ } finally {
+ htmx.off(form, handler);
+ }
+ calledEvent.should.equal(true);
+ });
+
+ it('calls htmx:validation:halted on failure', function()
+ {
+ var form = make('
');
+ var errors = null;
+ var handler = htmx.on(form, "htmx:validation:halted", function(evt){
+ errors = evt.detail.errors;
+ });
+ try {
+ form.click();
+ this.server.respond();
+ } finally {
+ htmx.off(form, handler);
+ }
+ errors.length.should.equal(1);
+ byId("i1").should.equal(errors[0].elt);
+ errors[0].validity.valueMissing.should.equal(true);
+ });
+
+
+
+})
diff --git a/www/test/1.5.1/test/core/verbs.js b/www/test/1.5.1/test/core/verbs.js
new file mode 100644
index 00000000..1d0711c2
--- /dev/null
+++ b/www/test/1.5.1/test/core/verbs.js
@@ -0,0 +1,44 @@
+describe("Core htmx AJAX Verbs", function() {
+ beforeEach(function () {
+ this.server = makeServer();
+ clearWorkArea();
+ });
+ afterEach(function () {
+ this.server.restore();
+ clearWorkArea();
+ });
+
+ it('handles basic posts properly', function () {
+ this.server.respondWith("POST", "/test", "post");
+ var div = make('
click me
');
+ div.click();
+ this.server.respond();
+ div.innerHTML.should.equal("post");
+ })
+
+ it('handles basic put properly', function () {
+ this.server.respondWith("PUT", "/test", "put");
+ var div = make('
click me
');
+ div.click();
+ this.server.respond();
+ div.innerHTML.should.equal("put");
+ })
+
+ it('handles basic patch properly', function () {
+ this.server.respondWith("PATCH", "/test", "patch");
+ var div = make('
click me
');
+ div.click();
+ this.server.respond();
+ div.innerHTML.should.equal("patch");
+ })
+
+ it('handles basic delete properly', function () {
+ this.server.respondWith("DELETE", "/test", "delete");
+ var div = make('
click me
');
+ div.click();
+ this.server.respond();
+ div.innerHTML.should.equal("delete");
+ })
+
+});
+
diff --git a/www/test/1.5.1/test/ext/ajax-header.js b/www/test/1.5.1/test/ext/ajax-header.js
new file mode 100644
index 00000000..0888ef3b
--- /dev/null
+++ b/www/test/1.5.1/test/ext/ajax-header.js
@@ -0,0 +1,21 @@
+describe("ajax-header extension", function() {
+ beforeEach(function () {
+ this.server = makeServer();
+ clearWorkArea();
+ });
+ afterEach(function () {
+ this.server.restore();
+ clearWorkArea();
+ });
+
+ it('Sends the X-Requested-With header', function () {
+ this.server.respondWith("GET", "/test", function (xhr) {
+ xhr.respond(200, {}, xhr.requestHeaders['X-Requested-With'])
+ });
+ var btn = make('
')
+ btn.click();
+ this.server.respond();
+ btn.innerHTML.should.equal("XMLHttpRequest");
+ });
+
+});
\ No newline at end of file
diff --git a/www/test/1.5.1/test/ext/bad-extension.js b/www/test/1.5.1/test/ext/bad-extension.js
new file mode 100644
index 00000000..fcf6a438
--- /dev/null
+++ b/www/test/1.5.1/test/ext/bad-extension.js
@@ -0,0 +1,27 @@
+describe("bad extension", function() {
+ htmx.defineExtension("bad-extension", {
+ onEvent : function(name, evt) {throw "onEvent"},
+ transformResponse : function(text, xhr, elt) {throw "transformRequest"},
+ isInlineSwap : function(swapStyle) {throw "isInlineSwap"},
+ handleSwap : function(swapStyle, target, fragment, settleInfo) {throw "handleSwap"},
+ encodeParameters : function(xhr, parameters, elt) {throw "encodeParmeters"}
+ }
+ )
+ beforeEach(function () {
+ this.server = makeServer();
+ clearWorkArea();
+ });
+ afterEach(function () {
+ this.server.restore();
+ clearWorkArea();
+ });
+
+ it('does not blow up rendering', function () {
+ this.server.respondWith("GET", "/test", "clicked!");
+ var div = make('
Click Me!
')
+ div.click();
+ this.server.respond();
+ div.innerHTML.should.equal("clicked!");
+ });
+
+});
\ No newline at end of file
diff --git a/www/test/1.5.1/test/ext/class-tools.js b/www/test/1.5.1/test/ext/class-tools.js
new file mode 100644
index 00000000..0c5004b5
--- /dev/null
+++ b/www/test/1.5.1/test/ext/class-tools.js
@@ -0,0 +1,55 @@
+describe("class-tools extension", function(){
+ beforeEach(function() {
+ this.server = makeServer();
+ clearWorkArea();
+ });
+ afterEach(function() {
+ this.server.restore();
+ clearWorkArea();
+ });
+
+ it('adds classes properly', function(done)
+ {
+ var div = make('
Click Me!
')
+ should.equal(div.classList.length, 0);
+ setTimeout(function(){
+ should.equal(div.classList.contains("c1"), true);
+ done();
+ }, 100);
+ });
+
+ it('removes classes properly', function(done)
+ {
+ var div = make('
Click Me!
')
+ should.equal(div.classList.contains("foo"), true);
+ should.equal(div.classList.contains("bar"), true);
+ setTimeout(function(){
+ should.equal(div.classList.contains("foo"), true);
+ should.equal(div.classList.contains("bar"), false);
+ done();
+ }, 100);
+ });
+
+ it('adds classes properly w/ data-* prefix', function(done)
+ {
+ var div = make('
Click Me!
')
+ should.equal(div.classList.length, 0);
+ setTimeout(function(){
+ should.equal(div.classList.contains("c1"), true);
+ done();
+ }, 100);
+ });
+
+ it('extension can be on parent', function(done)
+ {
+ var div = make('
')
+ should.equal(div.classList.length, 0);
+ setTimeout(function(){
+ should.equal(div.classList.contains("c1"), false);
+ should.equal(byId("d1").classList.contains("c1"), true);
+ done();
+ }, 100);
+ });
+
+
+})
diff --git a/www/test/1.5.1/test/ext/client-side-templates.js b/www/test/1.5.1/test/ext/client-side-templates.js
new file mode 100644
index 00000000..29206d21
--- /dev/null
+++ b/www/test/1.5.1/test/ext/client-side-templates.js
@@ -0,0 +1,30 @@
+describe("client-side-templates extension", function() {
+ beforeEach(function () {
+ this.server = makeServer();
+ clearWorkArea();
+ });
+ afterEach(function () {
+ this.server.restore();
+ clearWorkArea();
+ });
+
+ it('works on basic mustache template', function () {
+ this.server.respondWith("GET", "/test", '{"foo":"bar"}');
+ var btn = make('
')
+ make('')
+ btn.click();
+ this.server.respond();
+ btn.innerHTML.should.equal("*bar*");
+ });
+
+ it('works on basic handlebars template', function () {
+ this.server.respondWith("GET", "/test", '{"foo":"bar"}');
+ var btn = make('
')
+ Handlebars.partials["hb1"] = Handlebars.compile("*{{foo}}*");
+ btn.click();
+ this.server.respond();
+ btn.innerHTML.should.equal("*bar*");
+ });
+
+
+});
\ No newline at end of file
diff --git a/www/test/1.5.1/test/ext/debug.js b/www/test/1.5.1/test/ext/debug.js
new file mode 100644
index 00000000..4eeca295
--- /dev/null
+++ b/www/test/1.5.1/test/ext/debug.js
@@ -0,0 +1,19 @@
+describe("debug extension", function() {
+ beforeEach(function () {
+ this.server = makeServer();
+ clearWorkArea();
+ });
+ afterEach(function () {
+ this.server.restore();
+ clearWorkArea();
+ });
+
+ it('works on basic request', function () {
+ this.server.respondWith("GET", "/test", "Clicked!");
+ var btn = make('
')
+ btn.click();
+ this.server.respond();
+ btn.innerHTML.should.equal("Clicked!");
+ });
+
+});
\ No newline at end of file
diff --git a/www/test/1.5.1/test/ext/event-header.js b/www/test/1.5.1/test/ext/event-header.js
new file mode 100644
index 00000000..a5a66cf5
--- /dev/null
+++ b/www/test/1.5.1/test/ext/event-header.js
@@ -0,0 +1,23 @@
+describe("event-header extension", function() {
+ beforeEach(function () {
+ this.server = makeServer();
+ clearWorkArea();
+ });
+ afterEach(function () {
+ this.server.restore();
+ clearWorkArea();
+ });
+
+ it('Sends the Triggering-Event header', function () {
+ this.server.respondWith("GET", "/test", function (xhr) {
+ xhr.respond(200, {}, xhr.requestHeaders['Triggering-Event'])
+ });
+ var btn = make('
')
+ btn.click();
+ this.server.respond();
+ var json = JSON.parse(btn.innerText);
+ json.type.should.equal("click");
+ json.target.should.equal("button");
+ });
+
+});
\ No newline at end of file
diff --git a/www/test/1.5.1/test/ext/extension-swap.js b/www/test/1.5.1/test/ext/extension-swap.js
new file mode 100644
index 00000000..0186b525
--- /dev/null
+++ b/www/test/1.5.1/test/ext/extension-swap.js
@@ -0,0 +1,60 @@
+describe("default extensions behavior", function() {
+
+ var loadCalls, afterSwapCalls, afterSettleCalls;
+
+ beforeEach(function () {
+ loadCalls = [];
+ this.server = makeServer();
+ clearWorkArea();
+
+ htmx.defineExtension("ext-testswap", {
+ onEvent : function(name, evt) {
+ if (name === "htmx:load") {
+ loadCalls.push(evt.detail.elt);
+ }
+ },
+ handleSwap: function (swapStyle, target, fragment, settleInfo) {
+ // simple outerHTML replacement for tests
+ var parentEl = target.parentElement;
+ parentEl.removeChild(target);
+ return [parentEl.appendChild(fragment)]; // return the newly added element
+ }
+
+ });
+
+ });
+
+ afterEach(function () {
+ this.server.restore();
+ clearWorkArea();
+ htmx.removeExtension("ext-testswap");
+ });
+
+ it('handleSwap: afterSwap and afterSettle triggered if extension defined on parent', function () {
+ this.server.respondWith("GET", "/test", '
');
+ var div = make('
');
+ var btn = div.firstChild;
+ btn.click()
+ this.server.respond();
+ loadCalls.length.should.equal(1);
+ loadCalls[0].textContent.should.equal('Clicked!'); // the new button is loaded
+ });
+
+ it('handleSwap: new content is handled by htmx', function() {
+ this.server.respondWith("GET", "/test", '
');
+ this.server.respondWith("GET", "/test-inner", 'Loaded!');
+ make('
').querySelector('button').click();
+
+ this.server.respond(); // call /test via button trigger=click
+ var btn = byId('test-ext-testswap');
+ btn.textContent.should.equal('Clicked!');
+ loadCalls.length.should.equal(1);
+ loadCalls[0].textContent.should.equal('Clicked!'); // the new button is loaded
+
+ this.server.respond(); // call /test-inner via span trigger=load
+ btn.textContent.should.equal("Clicked!Loaded!");
+ loadCalls.length.should.equal(2);
+ loadCalls[1].textContent.should.equal('Loaded!'); // the new span is loaded
+ });
+
+});
diff --git a/www/test/1.5.1/test/ext/hyperscript.js b/www/test/1.5.1/test/ext/hyperscript.js
new file mode 100644
index 00000000..47e008ce
--- /dev/null
+++ b/www/test/1.5.1/test/ext/hyperscript.js
@@ -0,0 +1,64 @@
+describe("hyperscript integration", function() {
+ beforeEach(function () {
+ this.server = makeServer();
+ clearWorkArea();
+ });
+ afterEach(function () {
+ this.server.restore();
+ clearWorkArea();
+ });
+
+ it('can trigger with a custom event', function () {
+ this.server.respondWith("GET", "/test", "Custom Event Sent!");
+ var btn = make('
')
+ htmx.trigger(btn, "htmx:load"); // have to manually trigger the load event for non-AJAX dynamic content
+ btn.click();
+ this.server.respond();
+ btn.innerHTML.should.equal("Custom Event Sent!");
+ });
+
+ it('can handle htmx driven events', function () {
+ this.server.respondWith("GET", "/test", "Clicked!");
+ var btn = make('
')
+ htmx.trigger(btn, "htmx:load");
+ btn.classList.contains("afterSettle").should.equal(false);
+ btn.click();
+ this.server.respond();
+ btn.classList.contains("afterSettle").should.equal(true);
+ });
+
+ it('can handle htmx error events', function () {
+ this.server.respondWith("GET", "/test", [404, {}, "Bad request"]);
+ var div = make('
')
+ var btn = make('
')
+ htmx.trigger(btn, "htmx:load");
+ btn.click();
+ this.server.respond();
+ div.innerHTML.should.equal("Response Status Error Code 404 from /test");
+ });
+
+ it('hyperscript in non-htmx annotated nodes is evaluated', function () {
+ this.server.respondWith("GET", "/test", "
");
+ var btn = make('
')
+ btn.click();
+ this.server.respond();
+ var newDiv = byId("d1");
+ newDiv.click();
+ newDiv.innerText.should.equal("Clicked...");
+ });
+
+ it('hyperscript removal example works', function (done) {
+ this.server.respondWith("GET", "/test", "
To Remove
");
+ var btn = make('
')
+ btn.click();
+ this.server.respond();
+ var newDiv = byId("d1");
+ newDiv.innerText.should.equal("To Remove")
+ setTimeout(function(){
+ newDiv = byId("d1");
+ should.equal(newDiv, null);
+ done();
+ }, 100);
+ });
+
+});
\ No newline at end of file
diff --git a/www/test/1.5.1/test/ext/include-vals.js b/www/test/1.5.1/test/ext/include-vals.js
new file mode 100644
index 00000000..fc05a067
--- /dev/null
+++ b/www/test/1.5.1/test/ext/include-vals.js
@@ -0,0 +1,23 @@
+describe("include-vals extension", function() {
+ beforeEach(function () {
+ this.server = makeServer();
+ clearWorkArea();
+ });
+ afterEach(function () {
+ this.server.restore();
+ clearWorkArea();
+ });
+
+ it('Includes values properly', function () {
+ var params = {};
+ this.server.respondWith("POST", "/test", function (xhr) {
+ params = getParameters(xhr);
+ xhr.respond(200, {}, "clicked");
+ });
+ var btn = make('
')
+ btn.click();
+ this.server.respond();
+ params['foo'].should.equal("bar");
+ });
+
+});
\ No newline at end of file
diff --git a/www/test/1.5.1/test/ext/json-enc.js b/www/test/1.5.1/test/ext/json-enc.js
new file mode 100644
index 00000000..ed805a17
--- /dev/null
+++ b/www/test/1.5.1/test/ext/json-enc.js
@@ -0,0 +1,136 @@
+//
+describe("json-enc extension", function() {
+ beforeEach(function () {
+ this.server = makeServer();
+ clearWorkArea();
+ });
+ afterEach(function () {
+ this.server.restore();
+ clearWorkArea();
+ });
+
+ it('handles basic post properly', function () {
+ var jsonResponseBody = JSON.stringify({});
+ this.server.respondWith("POST", "/test", jsonResponseBody);
+ var div = make("
click me
");
+ div.click();
+ this.server.respond();
+ this.server.lastRequest.response.should.equal("{}");
+ })
+
+ it('handles basic put properly', function () {
+ var jsonResponseBody = JSON.stringify({});
+ this.server.respondWith("PUT", "/test", jsonResponseBody);
+ var div = make('
click me
');
+ div.click();
+ this.server.respond();
+ this.server.lastRequest.response.should.equal("{}");
+ })
+
+ it('handles basic patch properly', function () {
+ var jsonResponseBody = JSON.stringify({});
+ this.server.respondWith("PATCH", "/test", jsonResponseBody);
+ var div = make('
click me
');
+ div.click();
+ this.server.respond();
+ this.server.lastRequest.response.should.equal("{}");
+ })
+
+ it('handles basic delete properly', function () {
+ var jsonResponseBody = JSON.stringify({});
+ this.server.respondWith("DELETE", "/test", jsonResponseBody);
+ var div = make('
click me
');
+ div.click();
+ this.server.respond();
+ this.server.lastRequest.response.should.equal("{}");
+ })
+
+ it('handles post with form parameters', function () {
+
+ this.server.respondWith("POST", "/test", function (xhr) {
+ var values = JSON.parse(xhr.requestBody);
+ values.should.have.keys("username","password");
+ values["username"].should.be.equal("joe");
+ values["password"].should.be.equal("123456");
+ var ans = { "passwordok": values["password"] == "123456"};
+ xhr.respond(200, {}, JSON.stringify(ans));
+ });
+
+ var html = make('