should include the HX-Request header9ms ‣
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()
should include the HX-Trigger header2ms ‣
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()
should include the HX-Trigger-Name header3ms ‣
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()
should include the HX-Target header2ms ‣
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()
should handle simple string HX-Trigger response header properly2ms ‣
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)
should handle dot path HX-Trigger response header properly3ms ‣
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)
should handle simple string HX-Trigger response header in different case properly2ms ‣
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)
should handle a namespaced HX-Trigger response header properly1ms ‣
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)
should handle basic JSON HX-Trigger response header properly2ms ‣
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)
should handle JSON with array arg HX-Trigger response header properly7ms ‣
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)
should handle JSON with object arg HX-Trigger response header properly1ms ‣
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)
should handle JSON with target array arg HX-Trigger response header properly1ms ‣
this.server.respondWith('GET', '/test', [200, { 'HX-Trigger': '{"foo":{"target":"#testdiv"}}' }, ''])
var div = make('<div hx-get="/test"></div>')
var testdiv = make('<div id="testdiv"></div>')
var invokedEvent = false
testdiv.addEventListener('foo', function(evt) {
invokedEvent = true
evt.detail.elt.should.equal(testdiv)
})
div.click()
this.server.respond()
invokedEvent.should.equal(true)
should survive malformed JSON in HX-Trigger response header2ms ‣
this.server.respondWith('GET', '/test', [200, { 'HX-Trigger': '{not: valid}' }, ''])
var div = make('<div hx-get="/test"></div>')
div.click()
this.server.respond()
should handle simple string HX-Trigger response header properly w/ outerHTML swap1ms ‣
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)
should handle simple comma separated list HX-Trigger response header properly1ms ‣
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)
should handle simple comma separated list without space HX-Trigger response header properly1ms ‣
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)
should handle dot path in comma separated list HX-Trigger response header properly1ms ‣
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)
should handle a namespaced comma separated list HX-Trigger response header properly1ms ‣
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)
should handle HX-Retarget2ms ‣
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')
should handle HX-Retarget override back to this1ms ‣
this.server.respondWith('GET', '/test', [200, { 'HX-Retarget': 'this' }, 'Result'])
var div1 = make('<div id="d1" hx-get="/test" hx-target="#d2"></div>')
var div2 = make('<div id="d2"></div>')
div1.click()
this.server.respond()
div1.innerHTML.should.equal('Result')
div2.innerHTML.should.equal('')
should handle report target:error when HX-Retarget invalid4ms ‣
try {
var error = false
var handler = htmx.on('htmx:targetError', function(evt) {
evt.detail.target.should.equal('#d2')
error = true
})
this.server.respondWith('GET', '/test', [200, { 'HX-Retarget': '#d2' }, 'Result'])
var div1 = make('<div id="d1" hx-get="/test"></div>')
div1.click()
this.server.respond()
} catch (e) {
} finally {
htmx.off('htmx:targetError', handler)
div1.innerHTML.should.equal('')
error.should.equal(true)
}
should handle HX-Reswap1ms ‣
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')
should handle HX-Reselect2ms ‣
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>')
should handle HX-Reselect unset1ms ‣
this.server.respondWith('GET', '/test', [200, { 'HX-Reselect': 'unset' }, 'bar'])
var div = make('<div hx-get="/test" hx-select="#d2"></div>')
div.click()
this.server.respond()
div.innerHTML.should.equal('bar')
should handle simple string HX-Trigger-After-Swap response header properly w/ outerHTML swap1ms ‣
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)
should handle simple comma separated list HX-Trigger-After-Swap response header properly w/ outerHTML swap1ms ‣
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)
should handle simple string HX-Trigger-After-Settle response header properly w/ outerHTML swap1ms ‣
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)
should handle simple comma separated list HX-Trigger-After-Settle response header properly w/ outerHTML swap1ms ‣
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)
should change body content on HX-Location35ms ‣
this.server.respondWith('GET', '/test', [200, { 'HX-Location': '{"path":"/test2", "target":"#work-area"}' }, ''])
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()
setTimeout(function() {
getWorkArea().innerHTML.should.equal('<div>Yay! Welcome</div>')
done()
}, 30)
should refresh page on HX-Refresh1ms ‣
var refresh = false
htmx.location = { reload: function() { refresh = true } }
this.server.respondWith('GET', '/test', [200, { 'HX-Refresh': 'true' }, ''])
var div = make('<div id="testdiv" hx-trigger="click" hx-get="/test"></div>')
div.click()
this.server.respond()
refresh.should.equal(true)
htmx.location = window.location
should update location.href on HX-Redirect1ms ‣
htmx.location = { href: window.location.href }
this.server.respondWith('GET', '/test', [200, { 'HX-Redirect': 'https: }, ''])
var div = make('<div id="testdiv" hx-trigger="click" hx-get="/test"></div>')
div.click()
this.server.respond()
htmx.location.href.should.equal('https:)
htmx.location = window.location
request to restore history should include the HX-Request header when historyRestoreAsHxRequest true1ms ‣
this.server.respondWith('GET', '/test', function(xhr) {
xhr.requestHeaders['HX-Request'].should.be.equal('true')
xhr.respond(200, {}, '')
})
htmx._('loadHistoryFromServer')('/test')
this.server.respond()
request to restore history should not include the HX-Request header when historyRestoreAsHxRequest false0ms ‣
htmx.config.historyRestoreAsHxRequest = false
this.server.respondWith('GET', '/test', function(xhr) {
should.equal(xhr.requestHeaders['HX-Request'], undefined)
xhr.respond(200, {}, '')
})
htmx._('loadHistoryFromServer')('/test')
this.server.respond()
htmx.config.historyRestoreAsHxRequest = true
request history from server with error status code throws error event0ms ‣
this.server.respondWith('GET', '/test', function(xhr) {
xhr.requestHeaders['HX-Request'].should.be.equal('true')
xhr.respond(404, {}, '')
})
var invokedEvent = false
var handler = htmx.on('htmx:historyCacheMissLoadError', function(evt) {
invokedEvent = true
})
htmx._('loadHistoryFromServer')('/test')
this.server.respond()
invokedEvent.should.equal(true)
htmx.off('htmx:historyCacheMissLoadError', handler)
request to restore history should include the HX-History-Restore-Request header0ms ‣
this.server.respondWith('GET', '/test', function(xhr) {
xhr.requestHeaders['HX-History-Restore-Request'].should.be.equal('true')
xhr.respond(200, {}, '')
})
htmx._('loadHistoryFromServer')('/test')
this.server.respond()
request to restore history should include the HX-Current-URL header0ms ‣
this.server.respondWith('GET', '/test', function(xhr) {
chai.assert(typeof xhr.requestHeaders['HX-Current-URL'] !== 'undefined', 'HX-Current-URL should not be undefined')
xhr.respond(200, {}, '')
})
htmx._('loadHistoryFromServer')('/test')
this.server.respond()