mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-10-02 15:25:26 +00:00
8520f6f374
Native form handling submits repeated empty inputs as an array with an empty value for each input, but htmx would only submit the first non-empty input and any following inputs. Fix the value collection code so that it correctly distinguishes between empty values and new inputs.
174 lines
7.9 KiB
JavaScript
174 lines
7.9 KiB
JavaScript
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('<input name="foo" value="bar"/>');
|
|
var vals = htmx._('getInputValues')(input).values;
|
|
vals['foo'].should.equal('bar');
|
|
})
|
|
|
|
it('Input includes value on get', function () {
|
|
var input = make('<input name="foo" value="bar"/>');
|
|
var vals = htmx._('getInputValues')(input, "get").values;
|
|
vals['foo'].should.equal('bar');
|
|
})
|
|
|
|
it('Input includes form', function () {
|
|
var form = make('<form><input id="i1" name="foo" value="bar"/><input id="i2" name="do" value="rey"/></form>');
|
|
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('<form><input id="i1" name="foo" value="bar"/><input id="i2" name="do" value="rey"/></form>');
|
|
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('<form><div id="d1"/><input id="i2" name="do" value="rey"/></form>');
|
|
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('<form><div id="d1"/><input id="i2" name="do" value="rey"/></form>');
|
|
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('<form><input id="i1" name="foo" value="bar"/><input id="i2" name="do" value="rey"/></form>');
|
|
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('<form><input id="i1" name="foo" value="bar"/><input id="i2" name="do" value="rey"/></form>');
|
|
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('<form><input id="i1" name="foo" value="bar"/><input id="i2" name="do" value="rey"/><input id="i2" name="do" value="rey"/></form>');
|
|
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('<form><input id="i1" name="foo" value="bar"/><input id="i2" name="do" value="rey1"/><input id="i3" name="do" value="rey2"/></form>');
|
|
var vals = htmx._('getInputValues')(byId("i3")).values;
|
|
vals['foo'].should.equal('bar');
|
|
vals['do'].should.deep.equal(['rey1', 'rey2']);
|
|
})
|
|
|
|
it('Double empty values are included as array in correct order', function () {
|
|
var form = make('<form><input id="i1" name="do" value=""/><input id="i2" name="do" value="rey"/><input id="i3" name="do" value=""/></form>');
|
|
var vals = htmx._('getInputValues')(byId("i3")).values;
|
|
vals['do'].should.deep.equal(['', 'rey', '']);
|
|
})
|
|
|
|
it('hx-include works with form', function () {
|
|
var form = make('<form id="f1"><input id="i1" name="foo" value="bar"/><input id="i2" name="do" value="rey"/><input id="i2" name="do" value="rey"/></form>');
|
|
var div = make('<div hx-include="#f1"></div>');
|
|
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('<form id="f1"><input id="i1" name="foo" value="bar"/><input id="i2" name="do" value="rey"/><input id="i2" name="do" value="rey"/></form>');
|
|
var div = make('<div hx-include="#i1"></div>');
|
|
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('<form id="f1"><input id="i1" name="foo" value="bar"/><input id="i2" name="do" value="rey"/><input id="i2" name="do" value="rey"/></form>');
|
|
var div = make('<div hx-include="#i1, #i2"></div>');
|
|
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('<form id="f1"><input id="i1" name="foo" value="bar"/><input id="i2" name="do" value="rey"/><input id="i2" name="do" value="rey"/></form>');
|
|
var div = make('<div hx-include="#i1, #i2, #f1"></div>');
|
|
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('<form hx-get="/foo"><input id="i1" name="foo" value="bar"/><input id="i2" name="do" value="rey"/><button id="b1" name="btn" value="bar"></button></form>');
|
|
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('<form hx-get="/foo"><input id="i1" name="foo" value="bar"/><input id="i2" name="do" value="rey"/><input type="submit" id="s1" name="s1" value="bar"/></form>');
|
|
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('<form hx-get="/foo"><input id="i1" name="foo" value="bar"/><input id="i2" name="do" value="rey"/><input type="submit" id="s1" name="s1" value="bar"/></form>');
|
|
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('<form hx-get="/foo"><input id="i1" name="foo" value="bar"/><input id="i2" name="do" value="rey"/><input type="submit" id="s1" name="s1" value="bar"/></form>');
|
|
var anchor = make('<button id="a1"></button>');
|
|
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);
|
|
})
|
|
|
|
});
|
|
|