mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-10-01 06:51:32 +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.
335 lines
11 KiB
JavaScript
335 lines
11 KiB
JavaScript
describe("Core htmx API test", function(){
|
|
beforeEach(function() {
|
|
this.server = makeServer();
|
|
clearWorkArea();
|
|
});
|
|
afterEach(function() {
|
|
this.server.restore();
|
|
clearWorkArea();
|
|
});
|
|
|
|
it('should find properly', function(){
|
|
var div = make("<div id='d1' class='c1 c2'>");
|
|
div.should.equal(htmx.find("#d1"));
|
|
div.should.equal(htmx.find(".c1"));
|
|
div.should.equal(htmx.find(".c2"));
|
|
div.should.equal(htmx.find(".c1.c2"));
|
|
});
|
|
|
|
it('should find properly from elt', function(){
|
|
var div = make("<div><a id='a1'></a><a id='a2'></a></div>");
|
|
htmx.find(div, "a").id.should.equal('a1');
|
|
});
|
|
|
|
it('should find all properly', function(){
|
|
var div = make("<div class='c1 c2 c3'><div class='c1 c2'><div class='c1'>");
|
|
htmx.findAll(".c1").length.should.equal(3);
|
|
htmx.findAll(".c2").length.should.equal(2);
|
|
htmx.findAll(".c3").length.should.equal(1);
|
|
});
|
|
|
|
it('should find all properly from elt', function(){
|
|
var div = make("<div><div class='c1 c2 c3'><div class='c1 c2'><div class='c1'></div>");
|
|
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("<div><a id='a1'></a><a id='a2'></a></div>");
|
|
var a = htmx.find(div, "a");
|
|
htmx.closest(a, "div").should.equal(div);
|
|
});
|
|
|
|
it('should remove element properly', function () {
|
|
var div = make("<div><a></a></div>");
|
|
var a = htmx.find(div, "a");
|
|
htmx.remove(a);
|
|
div.innerHTML.should.equal("");
|
|
});
|
|
|
|
it('should remove element properly w/ selector', function () {
|
|
var div = make("<div><a id='a1'></a></div>");
|
|
var a = htmx.find(div, "a");
|
|
htmx.remove("#a1");
|
|
div.innerHTML.should.equal("");
|
|
});
|
|
|
|
it('should add class properly', function () {
|
|
var div = make("<div></div>");
|
|
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 id='div1'></div>");
|
|
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></div>");
|
|
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("<div></div>");
|
|
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("<div id='div1'></div>");
|
|
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("<div></div>");
|
|
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></div>");
|
|
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 id='div1'></div>");
|
|
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("<div></div>");
|
|
var div2 = make("<div></div>");
|
|
var div3 = make("<div></div>");
|
|
|
|
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("<div id='div1'></div>");
|
|
var div2 = make("<div id='div2'></div>");
|
|
var div3 = make("<div id='div3'></div>");
|
|
|
|
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('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("<div></div>");
|
|
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("<div id='d1'></div>");
|
|
htmx.ajax("GET", "/test", "#d1")
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("foo!");
|
|
});
|
|
|
|
it('ajax api works with swapSpec', function()
|
|
{
|
|
this.server.respondWith("GET", "/test", "<p class='test'>foo!</p>");
|
|
var div = make("<div><div id='target'></div></div>");
|
|
htmx.ajax("GET", "/test", {target: "#target", swap:"outerHTML"});
|
|
this.server.respond();
|
|
div.innerHTML.should.equal('<p class="test">foo!</p>');
|
|
});
|
|
|
|
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("<div id='d1'></div>");
|
|
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("<div id='d1'></div>");
|
|
htmx.ajax("POST", "/test", {target:"#d1", values:{i1: 'test'}})
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Clicked!");
|
|
});
|
|
|
|
it('can re-init with new attributes', function () {
|
|
this.server.respondWith("PATCH", "/test", "patch");
|
|
this.server.respondWith("DELETE", "/test", "delete");
|
|
|
|
var div = make('<div hx-patch="/test">click me</div>');
|
|
div.click();
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("patch");
|
|
|
|
div.removeAttribute("hx-patch");
|
|
div.setAttribute("hx-delete", "/test");
|
|
htmx.process(div);
|
|
|
|
div.click();
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("delete");
|
|
})
|
|
|
|
it('onLoad is called... onLoad', function(){
|
|
// also tests on/off
|
|
this.server.respondWith("GET", "/test", "<div id='d1' hx-get='/test'></div>")
|
|
var helper = htmx.onLoad(function (elt) {
|
|
elt.setAttribute("foo", "bar");
|
|
});
|
|
|
|
try {
|
|
var div = make("<div id='d1' hx-get='/test' hx-swap='outerHTML'></div>");
|
|
div.click();
|
|
this.server.respond();
|
|
byId("d1").getAttribute("foo").should.equal("bar");
|
|
htmx.off("htmx:load", helper);
|
|
} catch (error) {
|
|
// Clean up the event if the test fails, then throw it again
|
|
htmx.off("htmx:load", helper);
|
|
throw error;
|
|
}
|
|
});
|
|
|
|
it('triggers properly', function () {
|
|
var div = make("<div/>");
|
|
var myEventCalled = false;
|
|
var detailStr = "";
|
|
htmx.on("myEvent", function(evt){
|
|
myEventCalled = true;
|
|
detailStr = evt.detail.str;
|
|
})
|
|
htmx.trigger(div, "myEvent", {str:"foo"})
|
|
|
|
myEventCalled.should.equal(true);
|
|
detailStr.should.equal("foo");
|
|
});
|
|
|
|
it('triggers properly w/ selector', function () {
|
|
var div = make("<div id='div1'/>");
|
|
var myEventCalled = false;
|
|
var detailStr = "";
|
|
htmx.on("myEvent", function(evt){
|
|
myEventCalled = true;
|
|
detailStr = evt.detail.str;
|
|
})
|
|
htmx.trigger("#div1", "myEvent", {str:"foo"})
|
|
|
|
myEventCalled.should.equal(true);
|
|
detailStr.should.equal("foo");
|
|
});
|
|
|
|
it('triggers with no details properly', function () {
|
|
var div = make("<div/>");
|
|
var myEventCalled = false;
|
|
htmx.on("myEvent", function(evt){
|
|
myEventCalled = true;
|
|
})
|
|
htmx.trigger(div, "myEvent")
|
|
myEventCalled.should.equal(true);
|
|
});
|
|
|
|
})
|