mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-10-02 15:25:26 +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.
229 lines
9.4 KiB
JavaScript
229 lines
9.4 KiB
JavaScript
describe("hx-include attribute", function() {
|
|
beforeEach(function () {
|
|
this.server = makeServer();
|
|
clearWorkArea();
|
|
});
|
|
afterEach(function () {
|
|
this.server.restore();
|
|
clearWorkArea();
|
|
});
|
|
|
|
it('By default an input includes itself', function () {
|
|
this.server.respondWith("POST", "/include", function (xhr) {
|
|
var params = getParameters(xhr);
|
|
params['i1'].should.equal("test");
|
|
xhr.respond(200, {}, "Clicked!")
|
|
});
|
|
var div = make('<div hx-target="this"><input hx-post="/include" hx-trigger="click" id="i1" name="i1" value="test"/></div>')
|
|
var input = byId("i1")
|
|
input.click();
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Clicked!");
|
|
});
|
|
|
|
it('non-GET includes closest form', function () {
|
|
this.server.respondWith("POST", "/include", function (xhr) {
|
|
var params = getParameters(xhr);
|
|
params['i1'].should.equal("test");
|
|
xhr.respond(200, {}, "Clicked!")
|
|
});
|
|
var div = make('<form hx-target="this"><div id="d1" hx-post="/include"></div><input name="i1" value="test"/></form>')
|
|
var input = byId("d1")
|
|
input.click();
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Clicked!");
|
|
});
|
|
|
|
it('non-GET includes closest form and overrides values included that exist outside the form', function () {
|
|
this.server.respondWith("POST", "/include", function (xhr) {
|
|
var params = getParameters(xhr);
|
|
params['i1'].should.equal("test");
|
|
xhr.respond(200, {}, "Clicked!")
|
|
});
|
|
var div = make('<div hx-include="*" hx-target="this">' +
|
|
'<input name="i1" value="before"/>' +
|
|
'<form><div id="d1" hx-post="/include"></div><input name="i1" value="test"/></form>' +
|
|
'<input name="i1" value="after"/>')
|
|
var input = byId("d1")
|
|
input.click();
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Clicked!");
|
|
});
|
|
|
|
it('GET does not include closest form by default', function () {
|
|
this.server.respondWith("GET", "/include", function (xhr) {
|
|
var params = getParameters(xhr);
|
|
should.equal(params['i1'], undefined);
|
|
xhr.respond(200, {}, "Clicked!")
|
|
});
|
|
var div = make('<form hx-target="this"><div id="d1" hx-get="/include"></div><input name="i1" value="test"/></form>')
|
|
var input = byId("d1")
|
|
input.click();
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Clicked!");
|
|
});
|
|
|
|
it('Single input not included twice when in form', function () {
|
|
this.server.respondWith("POST", "/include", function (xhr) {
|
|
var params = getParameters(xhr);
|
|
params['i1'].should.equal("test");
|
|
xhr.respond(200, {}, "Clicked!")
|
|
});
|
|
var div = make('<form hx-target="this"><input hx-post="/include" hx-trigger="click" id="i1" name="i1" value="test"/></form>')
|
|
var input = byId("i1")
|
|
input.click();
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Clicked!");
|
|
});
|
|
|
|
it('Two inputs are included twice when they have the same name', function () {
|
|
this.server.respondWith("POST", "/include", function (xhr) {
|
|
var params = getParameters(xhr);
|
|
params['i1'].should.deep.equal(["test", "test2"]);
|
|
xhr.respond(200, {}, "Clicked!")
|
|
});
|
|
var div = make('<div hx-include="*" hx-target="this">' +
|
|
'<input hx-post="/include" hx-trigger="click" id="i1" name="i1" value="test"/>' +
|
|
'<input name="i1" value="test2"/>' +
|
|
'</div>')
|
|
var input = byId("i1")
|
|
input.click();
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Clicked!");
|
|
});
|
|
|
|
it('Two inputs are included twice when in form when they have the same name', function () {
|
|
this.server.respondWith("POST", "/include", function (xhr) {
|
|
var params = getParameters(xhr);
|
|
params['i1'].should.deep.equal(["test", "test2"]);
|
|
xhr.respond(200, {}, "Clicked!")
|
|
});
|
|
var div = make('<form hx-target="this">' +
|
|
'<input hx-post="/include" hx-trigger="click" id="i1" name="i1" value="test"/>' +
|
|
'<input name="i1" value="test2"/>' +
|
|
'</form>')
|
|
var input = byId("i1")
|
|
input.click();
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Clicked!");
|
|
});
|
|
|
|
it('Input not included twice when it explicitly refers to parent form', function () {
|
|
this.server.respondWith("POST", "/include", function (xhr) {
|
|
var params = getParameters(xhr);
|
|
params['i1'].should.equal("test");
|
|
xhr.respond(200, {}, "Clicked!")
|
|
});
|
|
var div = make('<form id="f1" hx-target="this">' +
|
|
'<input hx-include="#f1" hx-post="/include" hx-trigger="click" id="i1" name="i1" value="test"/>' +
|
|
'</form>')
|
|
var input = byId("i1")
|
|
input.click();
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Clicked!");
|
|
});
|
|
|
|
it('Input can be referred to externally', function () {
|
|
this.server.respondWith("POST", "/include", function (xhr) {
|
|
var params = getParameters(xhr);
|
|
params['i1'].should.equal("test");
|
|
xhr.respond(200, {}, "Clicked!")
|
|
});
|
|
make('<input id="i1" name="i1" value="test"/>');
|
|
var div = make('<div hx-post="/include" hx-include="#i1"></div>')
|
|
div.click();
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Clicked!");
|
|
});
|
|
|
|
it('Two inputs can be referred to externally', function () {
|
|
this.server.respondWith("POST", "/include", function (xhr) {
|
|
var params = getParameters(xhr);
|
|
params['i1'].should.equal("test");
|
|
params['i2'].should.equal("test");
|
|
xhr.respond(200, {}, "Clicked!")
|
|
});
|
|
make('<input id="i1" name="i1" value="test"/>');
|
|
make('<input id="i2" name="i2" value="test"/>');
|
|
var div = make('<div hx-post="/include" hx-include="#i1, #i2"></div>')
|
|
div.click();
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Clicked!");
|
|
});
|
|
|
|
it('A form can be referred to externally', function () {
|
|
this.server.respondWith("POST", "/include", function (xhr) {
|
|
var params = getParameters(xhr);
|
|
params['i1'].should.equal("test");
|
|
params['i2'].should.equal("test");
|
|
xhr.respond(200, {}, "Clicked!")
|
|
});
|
|
make('<form id="f1">' +
|
|
'<input name="i1" value="test"/>' +
|
|
'<input name="i2" value="test"/>' +
|
|
'</form> ');
|
|
var div = make('<div hx-post="/include" hx-include="#f1"></div>')
|
|
div.click();
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Clicked!");
|
|
});
|
|
|
|
it('By default an input includes itself w/ data-* prefix', function () {
|
|
this.server.respondWith("POST", "/include", function (xhr) {
|
|
var params = getParameters(xhr);
|
|
params['i1'].should.equal("test");
|
|
xhr.respond(200, {}, "Clicked!")
|
|
});
|
|
var div = make('<div data-hx-target="this"><input data-hx-post="/include" data-hx-trigger="click" id="i1" name="i1" value="test"/></div>')
|
|
var input = byId("i1")
|
|
input.click();
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Clicked!");
|
|
});
|
|
|
|
it('If the element is not includeable, its descendant inputs are included', function () {
|
|
this.server.respondWith("POST", "/include", function (xhr) {
|
|
var params = getParameters(xhr);
|
|
params['i1'].should.equal("test");
|
|
params['i2'].should.equal("test");
|
|
xhr.respond(200, {}, "Clicked!")
|
|
});
|
|
make('<div id="i"><input name="i1" value="test"/><input name="i2" value="test"/></div>');
|
|
var div = make('<div hx-post="/include" hx-include="#i"></div>')
|
|
div.click();
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Clicked!");
|
|
})
|
|
|
|
it('The `closest` modifier can be used in the hx-include selector', function () {
|
|
this.server.respondWith("POST", "/include", function (xhr) {
|
|
var params = getParameters(xhr);
|
|
params['i1'].should.equal("test");
|
|
params['i2'].should.equal("test");
|
|
xhr.respond(200, {}, "Clicked!")
|
|
});
|
|
make('<div id="i"><input name="i1" value="test"/><input name="i2" value="test"/>'+
|
|
'<button id="btn" hx-post="/include" hx-include="closest div"></button></div>');
|
|
var btn = byId('btn')
|
|
btn.click();
|
|
this.server.respond();
|
|
btn.innerHTML.should.equal("Clicked!");
|
|
})
|
|
|
|
it('The `this` modifier can be used in the hx-include selector', function () {
|
|
this.server.respondWith("POST", "/include", function (xhr) {
|
|
var params = getParameters(xhr);
|
|
params['i1'].should.equal("test");
|
|
params['i2'].should.equal("test");
|
|
xhr.respond(200, {}, "Clicked!")
|
|
});
|
|
make('<div id="i" hx-include="this"><input name="i1" value="test"/><input name="i2" value="test"/>'+
|
|
'<button id="btn" hx-post="/include"></button></div>');
|
|
var btn = byId('btn')
|
|
btn.click();
|
|
this.server.respond();
|
|
btn.innerHTML.should.equal("Clicked!");
|
|
})
|
|
|
|
});
|