Ything-RepoMirrors/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2026-01-25 05:06:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

port 2.0 tests and fix hx-include overriding

Browse Source
This commit is contained in:
Carson Gross
2025-12-07 09:24:23 -07:00
parent 3b21c64193
commit c96179f3e7
2 changed files with 94 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/htmx.js
View File

@@ -1768,14 +1768,14 @@ var htmx = (() => {
// Return promise for async evaluation
return this.__executeJavaScriptAsync(elt, {}, javascriptContent, true).then(obj => {
for (let key in obj) {
body.append(key, obj[key])
body.set(key, obj[key])
}
});
} else {
// Synchronous path
let obj = this.__parseConfig(hxValsValue);
for (let key in obj) {
body.append(key, obj[key])
body.set(key, obj[key])
}
}
}

92
test/tests/attributes/hx-vals.js
View File

@@ -8,6 +8,98 @@ describe('hx-vals attribute', function() {
cleanupTest(this.currentTest)
})
it('basic hx-vals works with HCON', async function() {
mockResponse('POST', '/vars', 'Clicked!')
let div = createProcessedHTML("<div hx-post='/vars' hx-vals='i1:\"test\"'></div>")
div.click()
await forRequest()
fetchMock.calls[0].request.body.get("i1").should.equal('test');
div.innerHTML.should.equal('Clicked!')
})
it('basic hx-vals works without braces', async function() {
mockResponse('POST', '/vars', 'Clicked!')
let div = createProcessedHTML("<div hx-post='/vars' hx-vals='\"i1\":\"test\"'></div>")
div.click()
await forRequest()
fetchMock.calls[0].request.body.get("i1").should.equal('test');
div.innerHTML.should.equal('Clicked!')
})
it('basic hx-vals works with braces', async function() {
mockResponse('POST', '/vars', 'Clicked!')
let div = createProcessedHTML('<div hx-post="/vars" hx-vals=\'{"i1":"test"}\'></div>')
div.click()
await forRequest()
fetchMock.calls[0].request.body.get("i1").should.equal('test');
div.innerHTML.should.equal('Clicked!')
})
it('multiple hx-vals works', async function() {
mockResponse('POST', '/vars', 'Clicked!')
let div = createProcessedHTML('<div hx-post="/vars" hx-vals=\'{"v1":"test", "v2":42}\'></div>')
div.click()
await forRequest()
fetchMock.calls[0].request.body.get("v1").should.equal('test');
fetchMock.calls[0].request.body.get("v2").should.equal('42');
div.innerHTML.should.equal('Clicked!')
})
it('Dynamic hx-vals using spread operator works', async function() {
mockResponse('POST', '/vars', 'Clicked!')
window.foo = function() {
return { v1: 'test', v2: 42 }
}
let div = createProcessedHTML("<div hx-post='/vars' hx-vals='js:{...foo()}'></div>")
div.click()
await forRequest()
fetchMock.calls[0].request.body.get("v1").should.equal('test');
fetchMock.calls[0].request.body.get("v2").should.equal('42');
div.innerHTML.should.equal('Clicked!')
delete window.foo
})
it('hx-vals can be inherited from parents', async function() {
mockResponse('POST', '/vars', 'Clicked!')
createProcessedHTML("<div hx-vals:inherited='\"i1\":\"test\"'><div id='d1' hx-post='/vars'></div></div>")
let div = find('#d1')
div.click()
await forRequest()
fetchMock.calls[0].request.body.get("i1").should.equal('test');
div.innerHTML.should.equal('Clicked!')
})
it('child hx-vals can override parent', async function() {
mockResponse('POST', '/vars', 'Clicked!')
createProcessedHTML("<div hx-vals:inherited='\"i1\":\"test\"'><div id='d1' hx-post='/vars' hx-vals='\"i1\":\"override\"'></div></div>")
let div = find('#d1')
div.click()
await forRequest()
fetchMock.calls[0].request.body.get("i1").should.equal('override');
div.innerHTML.should.equal('Clicked!')
})
it('hx-vals overrides input values', async function() {
mockResponse('POST', '/vals', 'Submitted')
let form = createProcessedHTML('<form hx-post="/vals" hx-vals=\'{"i1":"test"}\'>' +
'<input name="i1" value="original"/>' +
'<button>Submit</button>' +
'</form>')
form.querySelector('button').click()
await forRequest()
fetchMock.calls[0].request.body.get("i1").should.equal('test');
form.innerHTML.should.equal('Submitted')
})
it('computed values using event in js: prefix', async function() {
mockResponse('POST', '/vars', 'Clicked!')
let div = createProcessedHTML('<div id="myDiv" hx-post="/vars" hx-vals=\'js:{i1: event.target.id}\'></div>')
div.click()
await forRequest()
fetchMock.calls[0].request.body.get("i1").should.equal('myDiv');
div.innerHTML.should.equal('Clicked!')
})
it('hx-vals:append merges JSON objects correctly', async function() {
mockResponse('POST', '/test', 'Success')
const div = createProcessedHTML(