mirror of
https://github.com/bigskysoftware/htmx.git
synced 2026-01-19 15:22:01 +00:00
d1288d202a
The website used to host every past test suite, copied into the www directory. We no longer need that on the website (and it makes the codebase impossible to search) so I removed all the old tests and the new tests are hosted simply at /test. I also replaced the www.js script with a simpler www.sh one (since we no longer need to do anything besides copying, really), which allowed me to remove a node dependency that was only used in that script.
352 lines
13 KiB
JavaScript
352 lines
13 KiB
JavaScript
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 hx-get="/test"></div>');
|
|
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 id="d1" hx-get="/test"></div>');
|
|
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('<button name="n1" hx-get="/test"></button>');
|
|
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 hx-target="#d1" hx-get="/test"></div><div id="d1" ></div>');
|
|
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('<div hx-get="/test"></div>');
|
|
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('<div hx-get="/test"></div>');
|
|
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('<div hx-get="/test"></div>');
|
|
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('<div hx-get="/test"></div>');
|
|
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('<div hx-get="/test"></div>');
|
|
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('<div hx-get="/test"></div>');
|
|
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('<div hx-get="/test"></div>');
|
|
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 hx-get="/test"></div>');
|
|
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('<div hx-swap="outerHTML" hx-get="/test"></div>');
|
|
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 comma separated list HX-Trigger response header properly", function () {
|
|
this.server.respondWith("GET", "/test", [200, {"HX-Trigger": "foo, bar"}, ""]);
|
|
|
|
var div = make('<div hx-get="/test"></div>');
|
|
var invokedEventFoo = false;
|
|
var invokedEventBar = false;
|
|
div.addEventListener("foo", function (evt) {
|
|
invokedEventFoo = true;
|
|
});
|
|
div.addEventListener("bar", function (evt) {
|
|
invokedEventBar = true;
|
|
});
|
|
div.click();
|
|
this.server.respond();
|
|
invokedEventFoo.should.equal(true);
|
|
invokedEventBar.should.equal(true);
|
|
})
|
|
|
|
it("should handle simple comma separated list without space HX-Trigger response header properly", function () {
|
|
this.server.respondWith("GET", "/test", [200, {"HX-Trigger": "foo,bar"}, ""]);
|
|
|
|
var div = make('<div hx-get="/test"></div>');
|
|
var invokedEventFoo = false;
|
|
var invokedEventBar = false;
|
|
div.addEventListener("foo", function (evt) {
|
|
invokedEventFoo = true;
|
|
});
|
|
div.addEventListener("bar", function (evt) {
|
|
invokedEventBar = true;
|
|
});
|
|
div.click();
|
|
this.server.respond();
|
|
invokedEventFoo.should.equal(true);
|
|
invokedEventBar.should.equal(true);
|
|
})
|
|
|
|
it("should handle dot path in comma separated list HX-Trigger response header properly", function () {
|
|
this.server.respondWith("GET", "/test", [200, {"HX-Trigger": "foo.bar,bar.baz"}, ""]);
|
|
|
|
var div = make('<div hx-get="/test"></div>');
|
|
var invokedEventFoo = false;
|
|
var invokedEventBar = false;
|
|
div.addEventListener("foo.bar", function (evt) {
|
|
invokedEventFoo = true;
|
|
});
|
|
div.addEventListener("bar.baz", function (evt) {
|
|
invokedEventBar = true;
|
|
});
|
|
div.click();
|
|
this.server.respond();
|
|
invokedEventFoo.should.equal(true);
|
|
invokedEventBar.should.equal(true);
|
|
})
|
|
|
|
it("should handle a namespaced comma separated list HX-Trigger response header properly", function () {
|
|
this.server.respondWith("GET", "/test", [200, {"HX-Trigger": "namespace:foo,bar"}, ""]);
|
|
|
|
var div = make('<div hx-get="/test"></div>');
|
|
var invokedEventFoo = false;
|
|
var invokedEventBar = false;
|
|
div.addEventListener("namespace:foo", function (evt) {
|
|
invokedEventFoo = true;
|
|
});
|
|
div.addEventListener("bar", function (evt) {
|
|
invokedEventBar = true;
|
|
});
|
|
div.click();
|
|
this.server.respond();
|
|
invokedEventFoo.should.equal(true);
|
|
invokedEventBar.should.equal(true);
|
|
})
|
|
|
|
it("should handle HX-Retarget", function () {
|
|
this.server.respondWith("GET", "/test", [200, {"HX-Retarget": "#d2"}, "Result"]);
|
|
|
|
var div1 = make('<div id="d1" hx-get="/test"></div>');
|
|
var div2 = make('<div id="d2"></div>');
|
|
div1.click();
|
|
this.server.respond();
|
|
div1.innerHTML.should.equal("");
|
|
div2.innerHTML.should.equal("Result");
|
|
})
|
|
|
|
it("should handle HX-Reswap", function () {
|
|
this.server.respondWith("GET", "/test", [200, {"HX-Reswap": "innerHTML"}, "Result"]);
|
|
|
|
var div1 = make('<div id="d1" hx-get="/test" hx-swap="outerHTML"></div>');
|
|
div1.click();
|
|
this.server.respond();
|
|
div1.innerHTML.should.equal("Result");
|
|
})
|
|
|
|
it("should handle HX-Reselect", function () {
|
|
this.server.respondWith("GET", "/test", [200, {"HX-Reselect": "#d2"}, "<div id='d1'>foo</div><div id='d2'>bar</div>"]);
|
|
|
|
var div = make('<div hx-get="/test" hx-select="#d1"></div>');
|
|
div.click();
|
|
this.server.respond();
|
|
|
|
div.innerHTML.should.equal('<div id="d2">bar</div>');
|
|
});
|
|
|
|
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('<div hx-swap="outerHTML" hx-get="/test"></div>');
|
|
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 comma separated list HX-Trigger-After-Swap response header properly w/ outerHTML swap", function () {
|
|
this.server.respondWith("GET", "/test", [200, {"HX-Trigger-After-Swap": "foo, bar"}, ""]);
|
|
|
|
var div = make('<div hx-swap="outerHTML" hx-get="/test"></div>');
|
|
var invokedEventFoo = false;
|
|
var invokedEventBar = false;
|
|
var handlerFoo = htmx.on('foo', function (evt) {
|
|
invokedEventFoo = true;
|
|
});
|
|
var handlerBar = htmx.on('bar', function (evt) {
|
|
invokedEventBar = true;
|
|
});
|
|
div.click();
|
|
this.server.respond();
|
|
invokedEventFoo.should.equal(true);
|
|
invokedEventBar.should.equal(true);
|
|
htmx.off('foo', handlerFoo);
|
|
htmx.off('bar', handlerBar);
|
|
})
|
|
|
|
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('<div hx-swap="outerHTML" hx-get="/test"></div>');
|
|
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 comma separated list HX-Trigger-After-Settle response header properly w/ outerHTML swap", function () {
|
|
this.server.respondWith("GET", "/test", [200, {"HX-Trigger-After-Settle": "foo, bar"}, ""]);
|
|
|
|
var div = make('<div hx-swap="outerHTML" hx-get="/test"></div>');
|
|
var invokedEventFoo = false;
|
|
var invokedEventBar = false;
|
|
var handlerFoo = htmx.on('foo', function (evt) {
|
|
invokedEventFoo = true;
|
|
});
|
|
var handlerBar = htmx.on('bar', function (evt) {
|
|
invokedEventBar = true;
|
|
});
|
|
div.click();
|
|
this.server.respond();
|
|
invokedEventFoo.should.equal(true);
|
|
invokedEventBar.should.equal(true);
|
|
htmx.off('foo', handlerFoo);
|
|
htmx.off('bar', handlerBar);
|
|
})
|
|
|
|
|
|
it("should change body content on HX-Location", function () {
|
|
this.server.respondWith("GET", "/test", [200, {"HX-Location": '{"path":"/test2", "target":"#testdiv"}'}, ""]);
|
|
this.server.respondWith("GET", "/test2", [200, {}, "<div>Yay! Welcome</div>"]);
|
|
var div = make('<div id="testdiv" hx-trigger="click" hx-get="/test"></div>');
|
|
div.click();
|
|
this.server.respond();
|
|
this.server.respond();
|
|
div.innerHTML.should.equal('<div>Yay! Welcome</div>');
|
|
})
|
|
});
|