passes: 109
failures: 0
duration: 1.10s

Core htmx internals Tests

makeFragment works with janky stuff1ms ‣

htmx._('makeFragment')('<html></html>').children.length.should.equal(0)
htmx._('makeFragment')('<html><body></body></html>').children.length.should.equal(0)
// NB - the tag name should be the *parent* element hosting the HTML since we use the fragment children
// for the swap
htmx._('makeFragment')('<td></td>').firstElementChild.tagName.should.equal('TD')
htmx._('makeFragment')('<thead></thead>').firstElementChild.tagName.should.equal('THEAD')
htmx._('makeFragment')('<col></col>').firstElementChild.tagName.should.equal('COL')
htmx._('makeFragment')('<tr></tr>').firstElementChild.tagName.should.equal('TR')

makeFragment works with template wrapping0ms ‣

htmx._('makeFragment')('<html></html>').children.length.should.equal(0)
htmx._('makeFragment')('<html><body></body></html>').children.length.should.equal(0)
var fragment = htmx._('makeFragment')('<td></td>')
fragment.firstElementChild.tagName.should.equal('TD')
fragment = htmx._('makeFragment')('<thead></thead>')
fragment.firstElementChild.tagName.should.equal('THEAD')
fragment = htmx._('makeFragment')('<col></col>')
fragment.firstElementChild.tagName.should.equal('COL')
fragment = htmx._('makeFragment')('<tr></tr>')
fragment.firstElementChild.tagName.should.equal('TR')

makeFragment works with template wrapping and funky combos1ms ‣

htmx.config.useTemplateFragments = true
try {
  var fragment = htmx._('makeFragment')('<td></td><div></div>')
  fragment.children[0].tagName.should.equal('TD')
  fragment.children[1].tagName.should.equal('DIV')
} finally {
  htmx.config.useTemplateFragments = false
}

set header works with non-ASCII values1ms ‣

var xhr = new XMLHttpRequest()
xhr.open('GET', '/dummy')
htmx._('safelySetHeaderValue')(xhr, 'Example', 'привет')
// unfortunately I can't test the value :/
// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

handles parseInterval correctly1ms ‣

chai.expect(htmx.parseInterval('1ms')).to.be.equal(1)
chai.expect(htmx.parseInterval('300ms')).to.be.equal(300)
chai.expect(htmx.parseInterval('1s')).to.be.equal(1000)
chai.expect(htmx.parseInterval('1.5s')).to.be.equal(1500)
chai.expect(htmx.parseInterval('2s')).to.be.equal(2000)
chai.expect(htmx.parseInterval('0ms')).to.be.equal(0)
chai.expect(htmx.parseInterval('0s')).to.be.equal(0)
chai.expect(htmx.parseInterval('0m')).to.be.equal(0)
chai.expect(htmx.parseInterval('0')).to.be.equal(0)
chai.expect(htmx.parseInterval('5')).to.be.equal(5)
chai.expect(htmx.parseInterval(null)).to.be.undefined
chai.expect(htmx.parseInterval('')).to.be.undefined
chai.expect(htmx.parseInterval('undefined')).to.be.undefined
chai.expect(htmx.parseInterval('true')).to.be.undefined
chai.expect(htmx.parseInterval('false')).to.be.undefined

tokenizes correctly0ms ‣

chai.expect(htmx._('tokenizeString')('a,')).to.be.deep.equal(['a', ','])
chai.expect(htmx._('tokenizeString')('aa,')).to.be.deep.equal(['aa', ','])
chai.expect(htmx._('tokenizeString')('aa,aa')).to.be.deep.equal(['aa', ',', 'aa'])
chai.expect(htmx._('tokenizeString')('aa.aa')).to.be.deep.equal(['aa', '.', 'aa'])

tags respond correctly to shouldCancel2ms ‣

var anchorThatShouldCancel = make("<a href='/foo'></a>")
htmx._('shouldCancel')({ type: 'click' }, anchorThatShouldCancel).should.equal(true)
anchorThatShouldCancel = make("<a href='#'></a>")
htmx._('shouldCancel')({ type: 'click' }, anchorThatShouldCancel).should.equal(true)
var anchorThatShouldNotCancel = make("<a href='#foo'></a>")
htmx._('shouldCancel')({ type: 'click' }, anchorThatShouldNotCancel).should.equal(false)
var form = make('<form></form>')
htmx._('shouldCancel')({ type: 'submit' }, form).should.equal(true)
form = make("<form><input id='i1' type='submit'></form>")
var input = byId('i1')
htmx._('shouldCancel')({ type: 'click' }, input).should.equal(true)
form = make("<form><button id='b1' type='submit'></form>")
var button = byId('b1')
htmx._('shouldCancel')({ type: 'click' }, button).should.equal(true)
form = make("<form id='f1'></form><input id='i1' form='f1' type='submit'><button id='b1' form='f1' type='submit'>")
input = byId('i1')
button = byId('b1')
htmx._('shouldCancel')({ type: 'click' }, input).should.equal(true)
htmx._('shouldCancel')({ type: 'click' }, button).should.equal(true)

unset properly unsets a given attribute0ms ‣

make("<div foo='1'><div foo='2'><div foo='unset' id='d1'></div></div></div>")
var div = byId('d1')
should.equal(undefined, htmx._('getClosestAttributeValue')(div, 'foo'))

unset properly unsets a given attribute on a parent0ms ‣

make("<div foo='1'><div foo='unset'><div id='d1'></div></div></div>")
var div = byId('d1')
should.equal(undefined, htmx._('getClosestAttributeValue')(div, 'foo'))

unset does not unset a value below it in the hierarchy0ms ‣

make("<div foo='unset'><div foo='2'><div id='d1'></div></div></div>")
var div = byId('d1')
should.equal('2', htmx._('getClosestAttributeValue')(div, 'foo'))

encoding values respects enctype on forms1ms ‣

var form = make("<form enctype='multipart/form-data'></form>")
var value = htmx._('encodeParamsForBody')(null, form, {});
(value instanceof FormData).should.equal(true)

Core htmx API test

should find properly0ms ‣

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'))

should find properly from elt0ms ‣

var div = make("<div><a id='a1'></a><a id='a2'></a></div>")
htmx.find(div, 'a').id.should.equal('a1')

should find all properly1ms ‣

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)

should find all properly from elt0ms ‣

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)

should find closest element properly0ms ‣

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)

should remove element properly0ms ‣

var div = make('<div><a></a></div>')
var a = htmx.find(div, 'a')
htmx.remove(a)
div.innerHTML.should.equal('')

should remove element properly w/ selector0ms ‣

var div = make("<div><a id='a1'></a></div>")
var a = htmx.find(div, 'a')
htmx.remove('#a1')
div.innerHTML.should.equal('')

should add class properly0ms ‣

var div = make('<div></div>')
div.classList.contains('foo').should.equal(false)
htmx.addClass(div, 'foo')
div.classList.contains('foo').should.equal(true)

should add class properly w/ selector0ms ‣

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)

should add class properly after delay20ms ‣

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)

should remove class properly1ms ‣

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)

should remove class properly w/ selector0ms ‣

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)

should add class properly after delay20ms ‣

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)

should toggle class properly0ms ‣

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)

should toggle class properly w/ selector0ms ‣

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)

should take class properly0ms ‣

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)

should take class properly w/ selector1ms ‣

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)

eval can be suppressed1ms ‣

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)

ajax api works6ms ‣

this.server.respondWith('GET', '/test', 'foo!')
var div = make('<div></div>')
htmx.ajax('GET', '/test', div)
this.server.respond()
div.innerHTML.should.equal('foo!')

ajax api works by ID1ms ‣

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!')

ajax api does not fall back to body when target invalid0ms ‣

this.server.respondWith('GET', '/test', 'foo!')
var div = make("<div id='d1'></div>")
htmx.ajax('GET', '/test', '#d2')
this.server.respond()
document.body.innerHTML.should.not.equal('foo!')

ajax api fails when target invalid0ms ‣

this.server.respondWith('GET', '/test', 'foo!')
var div = make("<div id='d1'></div>")
htmx.ajax('GET', '/test', '#d2').then(
  (value) => {
  },
  (reason) => {
    done()
  }
)
this.server.respond()
div.innerHTML.should.equal('')

ajax api fails when target invalid even if source set0ms ‣

this.server.respondWith('GET', '/test', 'foo!')
var div = make("<div id='d1'></div>")
htmx.ajax('GET', '/test', {
  source: div,
  target: '#d2'
}).then(
  (value) => {
  },
  (reason) => {
    done()
  }
)
this.server.respond()
div.innerHTML.should.equal('')

ajax api fails when source invalid and no target set0ms ‣

this.server.respondWith('GET', '/test', 'foo!')
var div = make("<div id='d1'></div>")
htmx.ajax('GET', '/test', {
  source: '#d2'
}).then(
  (value) => {
  },
  (reason) => {
    done()
  }
)
this.server.respond()
div.innerHTML.should.equal('')

ajax api falls back to targeting source if target not set2ms ‣

this.server.respondWith('GET', '/test', 'foo!')
var div = make("<div id='d1'></div>")
htmx.ajax('GET', '/test', {
  source: div
})
this.server.respond()
div.innerHTML.should.equal('foo!')

ajax api works with swapSpec2ms ‣

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>')

ajax api works with select3ms ‣

this.server.respondWith('GET', '/test', "<div id='d1'>foo</div><div id='d2'>bar</div>")
var div = make("<div id='target'></div>")
htmx.ajax('GET', '/test', { target: '#target', select: '#d2' })
this.server.respond()
div.innerHTML.should.equal('<div id="d2">bar</div>')

ajax api works with Hx-Select overrides select2ms ‣

this.server.respondWith('GET', '/test', [200, { 'HX-Reselect': '#d2' }, "<div id='d1'>foo</div><div id='d2'>bar</div>"])
var div = make("<div id='target'></div>")
htmx.ajax('GET', '/test', { target: '#target', select: '#d1' })
this.server.respond()
div.innerHTML.should.equal('<div id="d2">bar</div>')

ajax returns a promise2ms ‣

// 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()
}

ajax api can pass parameters1ms ‣

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!')

ajax api Content-Type header is application/x-www-form-urlencoded9ms ‣

this.server.respondWith('POST', '/test', function(xhr) {
  var params = getParameters(xhr)
  xhr.requestHeaders['Content-Type'].should.equal('application/x-www-form-urlencoded;charset=utf-8')
  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!')

ajax api Content-Type header override to application/json1ms ‣

this.server.respondWith('POST', '/test', function(xhr) {
  var params = getParameters(xhr)
  xhr.requestHeaders['Content-Type'].should.equal('application/json;charset=utf-8')
  params.i1.should.equal('test')
  xhr.respond(200, {}, 'Clicked!')
})
var div = make("<div id='d1'></div>")
htmx.ajax('POST', '/test', {
  target: '#d1',
  swap: 'innerHTML',
  headers: {
    'Content-Type': 'application/json'
  },
  values: { i1: 'test' }
})
this.server.respond()
div.innerHTML.should.equal('Clicked!')

can re-init with new attributes3ms ‣

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')

does not trigger load on re-init of an existing element1ms ‣

this.server.respondWith('GET', '/test', 'test')
var div = make('<div hx-get="/test" hx-trigger="load" hx-swap="beforeend"></div>')
this.server.respond()
div.innerHTML.should.equal('test')
div.setAttribute('hx-swap', 'afterbegin')
htmx.process(div)
this.server.respond()
div.innerHTML.should.equal('test')

onLoad is called... onLoad1ms ‣

// 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
}

triggers properly0ms ‣

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')

triggers properly w/ selector0ms ‣

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')

triggers with no details properly1ms ‣

var div = make('<div/>')
var myEventCalled = false
htmx.on('myEvent', function(evt) {
  myEventCalled = true
})
htmx.trigger(div, 'myEvent')
myEventCalled.should.equal(true)

swaps content properly (basic)0ms ‣

var output = make('<output id="output"/>')
htmx.swap('#output', '<div>Swapped!</div>', { swapStyle: 'innerHTML' })
output.innerHTML.should.be.equal('<div>Swapped!</div>')

swaps content properly (with select)1ms ‣

var output = make('<output id="output"/>')
htmx.swap('#output', '<div><p id="select-me">Swapped!</p></div>', { swapStyle: 'innerHTML' }, { select: '#select-me' })
output.innerHTML.should.be.equal('<p id="select-me">Swapped!</p>')

swaps content properly (with oob)2ms ‣

var output = make('<output id="output"/>')
var oobDiv = make('<div id="oob"/>')
htmx.swap('#output', '<div id="oob" hx-swap-oob="innerHTML">OOB Swapped!</div><div>Swapped!</div>', { swapStyle: 'innerHTML' })
output.innerHTML.should.be.equal('<div>Swapped!</div>')
oobDiv.innerHTML.should.be.equal('OOB Swapped!')

swaps content properly (with select oob)0ms ‣

var output = make('<output id="output"/>')
var oobDiv = make('<div id="oob"/>')
htmx.swap('#output', '<div id="oob">OOB Swapped!</div><div>Swapped!</div>', { swapStyle: 'innerHTML' }, { selectOOB: '#oob:innerHTML' })
output.innerHTML.should.be.equal('<div>Swapped!</div>')
oobDiv.innerHTML.should.be.equal('OOB Swapped!')

swap delete works when parent is removed0ms ‣

this.server.respondWith('DELETE', '/test', 'delete')
var parent = make('<div><div id="d1" hx-swap="delete" hx-delete="/test">click me</div></div>')
var div = htmx.find(parent, '#d1')
div.click()
div.remove()
parent.remove()
this.server.respond()
parent.children.length.should.equal(0)

swap outerHTML works when parent is removed1ms ‣

this.server.respondWith('GET', '/test', 'delete')
var parent = make('<div><div id="d1" hx-swap="outerHTML" hx-get="/test">click me</div></div>')
var div = htmx.find(parent, '#d1')
div.click()
div.remove()
parent.remove()
this.server.respond()
parent.children.length.should.equal(0)

Core htmx AJAX Tests

issues a GET request on click and swaps content1ms ‣

this.server.respondWith('GET', '/test', 'Clicked!')
var btn = make('<button hx-get="/test">Click Me!</button>')
btn.click()
this.server.respond()
btn.innerHTML.should.equal('Clicked!')

processes inner content properly3ms ‣

this.server.respondWith('GET', '/test', '<a hx-get="/test2">Click Me</a>')
this.server.respondWith('GET', '/test2', 'Clicked!')
var div = make('<div hx-get="/test"></div>')
div.click()
this.server.respond()
div.innerHTML.should.equal('<a hx-get="/test2">Click Me</a>')
var a = div.querySelector('a')
a.click()
this.server.respond()
a.innerHTML.should.equal('Clicked!')

handles swap outerHTML properly2ms ‣

this.server.respondWith('GET', '/test', '<a id="a1" hx-get="/test2">Click Me</a>')
this.server.respondWith('GET', '/test2', 'Clicked!')
var div = make('<div id="d1" hx-get="/test" hx-swap="outerHTML"></div>')
div.click()
should.equal(byId('d1'), div)
this.server.respond()
should.equal(byId('d1'), null)
byId('a1').click()
this.server.respond()
byId('a1').innerHTML.should.equal('Clicked!')

handles beforebegin properly5ms ‣

var i = 0
this.server.respondWith('GET', '/test', function(xhr) {
  i++
  xhr.respond(200, {}, '<a id="a' + i + '" hx-get="/test2" hx-swap="innerHTML">' + i + '</a>')
})
this.server.respondWith('GET', '/test2', '*')
var div = make('<div hx-get="/test" hx-swap="beforebegin">*</div>')
var parent = div.parentElement
div.click()
this.server.respond()
div.innerText.should.equal('*')
removeWhiteSpace(parent.innerText).should.equal('1*')
byId('a1').click()
this.server.respond()
removeWhiteSpace(parent.innerText).should.equal('**')
div.click()
this.server.respond()
div.innerText.should.equal('*')
removeWhiteSpace(parent.innerText).should.equal('*2*')
byId('a2').click()
this.server.respond()
removeWhiteSpace(parent.innerText).should.equal('***')

handles afterbegin properly3ms ‣

var i = 0
this.server.respondWith('GET', '/test', function(xhr) {
  i++
  xhr.respond(200, {}, '' + i)
})
var div = make('<div hx-get="/test" hx-swap="afterbegin">*</div>')
div.click()
this.server.respond()
div.innerText.should.equal('1*')
div.click()
this.server.respond()
div.innerText.should.equal('21*')
div.click()
this.server.respond()
div.innerText.should.equal('321*')

handles afterbegin properly with no initial content2ms ‣

var i = 0
this.server.respondWith('GET', '/test', function(xhr) {
  i++
  xhr.respond(200, {}, '' + i)
})
var div = make('<div hx-get="/test" hx-swap="afterbegin"></div>')
div.click()
this.server.respond()
div.innerText.should.equal('1')
div.click()
this.server.respond()
div.innerText.should.equal('21')
div.click()
this.server.respond()
div.innerText.should.equal('321')

handles afterend properly2ms ‣

var i = 0
this.server.respondWith('GET', '/test', function(xhr) {
  i++
  xhr.respond(200, {}, '<a id="a' + i + '" hx-get="/test2" hx-swap="innerHTML">' + i + '</a>')
})
this.server.respondWith('GET', '/test2', '*')
var div = make('<div hx-get="/test" hx-swap="afterend">*</div>')
var parent = div.parentElement
div.click()
this.server.respond()
div.innerText.should.equal('*')
removeWhiteSpace(parent.innerText).should.equal('*1')
byId('a1').click()
this.server.respond()
removeWhiteSpace(parent.innerText).should.equal('**')
div.click()
this.server.respond()
div.innerText.should.equal('*')
removeWhiteSpace(parent.innerText).should.equal('*2*')
byId('a2').click()
this.server.respond()
removeWhiteSpace(parent.innerText).should.equal('***')

handles beforeend properly2ms ‣

var i = 0
this.server.respondWith('GET', '/test', function(xhr) {
  i++
  xhr.respond(200, {}, '' + i)
})
var div = make('<div hx-get="/test" hx-swap="beforeend">*</div>')
div.click()
this.server.respond()
div.innerText.should.equal('*1')
div.click()
this.server.respond()
div.innerText.should.equal('*12')
div.click()
this.server.respond()
div.innerText.should.equal('*123')

handles beforeend properly with no initial content3ms ‣

var i = 0
this.server.respondWith('GET', '/test', function(xhr) {
  i++
  xhr.respond(200, {}, '' + i)
})
var div = make('<div hx-get="/test" hx-swap="beforeend"></div>')
div.click()
this.server.respond()
div.innerText.should.equal('1')
div.click()
this.server.respond()
div.innerText.should.equal('12')
div.click()
this.server.respond()
div.innerText.should.equal('123')

handles hx-target properly1ms ‣

this.server.respondWith('GET', '/test', 'Clicked!')
var btn = make('<button hx-get="/test" hx-target="#s1">Click Me!</button>')
var target = make('<span id="s1">Initial</span>')
btn.click()
target.innerHTML.should.equal('Initial')
this.server.respond()
target.innerHTML.should.equal('Clicked!')

handles 204 NO CONTENT responses properly1ms ‣

this.server.respondWith('GET', '/test', [204, {}, 'No Content!'])
var btn = make('<button hx-get="/test">Click Me!</button>')
btn.click()
btn.innerHTML.should.equal('Click Me!')
this.server.respond()
btn.innerHTML.should.equal('Click Me!')

handles 304 NOT MODIFIED responses properly4ms ‣

this.server.respondWith('GET', '/test-1', [200, {}, 'Content for Tab 1'])
this.server.respondWith('GET', '/test-2', [200, {}, 'Content for Tab 2'])
var target = make('<div id="target"></div>')
var btn1 = make('<button hx-get="/test-1" hx-target="#target">Tab 1</button>')
var btn2 = make('<button hx-get="/test-2" hx-target="#target">Tab 2</button>')
btn1.click()
target.innerHTML.should.equal('')
this.server.respond()
target.innerHTML.should.equal('Content for Tab 1')
btn2.click()
this.server.respond()
target.innerHTML.should.equal('Content for Tab 2')
this.server.respondWith('GET', '/test-1', [304, {}, 'Content for Tab 1'])
this.server.respondWith('GET', '/test-2', [304, {}, 'Content for Tab 2'])
btn1.click()
this.server.respond()
target.innerHTML.should.equal('Content for Tab 1')
btn2.click()
this.server.respond()
target.innerHTML.should.equal('Content for Tab 2')

handles hx-trigger with non-default value1ms ‣

this.server.respondWith('GET', '/test', 'Clicked!')
var form = make('<form hx-get="/test" hx-trigger="click">Click Me!</form>')
form.click()
form.innerHTML.should.equal('Click Me!')
this.server.respond()
form.innerHTML.should.equal('Clicked!')

handles hx-trigger with load event1ms ‣

this.server.respondWith('GET', '/test', 'Loaded!')
var div = make('<div hx-get="/test" hx-trigger="load">Load Me!</div>')
div.innerHTML.should.equal('Load Me!')
this.server.respond()
div.innerHTML.should.equal('Loaded!')

sets the content type of the request properly1ms ‣

this.server.respondWith('GET', '/test', function(xhr) {
  xhr.respond(200, {}, 'done')
  xhr.overriddenMimeType.should.equal('text/html')
  done()
})
var div = make('<div hx-get="/test">Click Me!</div>')
div.click()
this.server.respond()

issues two requests when clicked twice before response1ms ‣

var i = 1
this.server.respondWith('GET', '/test', function(xhr) {
  xhr.respond(200, {}, 'click ' + i)
  i++
})
var div = make('<div hx-get="/test"></div>')
div.click()
div.click()
this.server.respond()
div.innerHTML.should.equal('click 1')
this.server.respond()
div.innerHTML.should.equal('click 2')

issues two requests when clicked three times before response1ms ‣

var i = 1
this.server.respondWith('GET', '/test', function(xhr) {
  xhr.respond(200, {}, 'click ' + i)
  i++
})
var div = make('<div hx-get="/test"></div>')
div.click()
div.click()
div.click()
this.server.respondAll()
div.innerHTML.should.equal('click 2')

properly handles hx-select for basic situation1ms ‣

var i = 1
this.server.respondWith('GET', '/test', "<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="d1">foo</div>')

properly handles hx-select for full html document situation1ms ‣

this.server.respondWith('GET', '/test', "<html><body><div id='d1'>foo</div><div id='d2'>bar</div></body></html>")
var div = make('<div hx-get="/test" hx-select="#d1"></div>')
div.click()
this.server.respond()
div.innerHTML.should.equal('<div id="d1">foo</div>')

properly settles attributes on interior elements22ms ‣

this.server.respondWith('GET', '/test', "<div hx-get='/test'><div width='bar' id='d1'></div></div>")
var div = make("<div hx-get='/test' hx-swap='outerHTML settle:10ms'><div id='d1'></div></div>")
div.click()
this.server.respond()
should.equal(byId('d1').getAttribute('width'), null)
setTimeout(function() {
  should.equal(byId('d1').getAttribute('width'), 'bar')
  done()
}, 20)

properly settles attributes elements with single quotes in id22ms ‣

this.server.respondWith('GET', '/test', "<div hx-get='/test'><div width='bar' id=\"d1'\"></div></div>")
var div = make("<div hx-get='/test' hx-swap='outerHTML settle:10ms'><div id=\"d1'\"></div></div>")
div.click()
this.server.respond()
should.equal(byId("d1'").getAttribute('width'), null)
setTimeout(function() {
  should.equal(byId("d1'").getAttribute('width'), 'bar')
  done()
}, 20)

properly settles attributes elements with double quotes in id21ms ‣

this.server.respondWith('GET', '/test', "<div hx-get='/test'><div width='bar' id='d1\"'></div></div>")
var div = make("<div hx-get='/test' hx-swap='outerHTML settle:10ms'><div id='d1\"'></div></div>")
div.click()
this.server.respond()
should.equal(byId('d1"').getAttribute('width'), null)
setTimeout(function() {
  should.equal(byId('d1"').getAttribute('width'), 'bar')
  done()
}, 20)

properly handles multiple select input735ms ‣

var values
this.server.respondWith('Post', '/test', function(xhr) {
  values = getParameters(xhr)
  xhr.respond(204, {}, '')
})
var form = make('<form hx-post="/test" hx-trigger="click">' +
        '<select id="multiSelect" name="multiSelect" multiple="multiple">' +
        '<option id="m1" value="m1">m1</option>' +
        '<option id="m2" value="m2">m2</option>' +
        '<option id="m3" value="m3">m3</option>' +
        '<option id="m4" value="m4">m4</option>' +
        '</select>' +
        '</form>')
form.click()
this.server.respond()
values.should.deep.equal({})
byId('m1').selected = true
form.click()
this.server.respond()
values.should.deep.equal({ multiSelect: 'm1' })
byId('m1').selected = true
byId('m3').selected = true
form.click()
this.server.respond()
values.should.deep.equal({ multiSelect: ['m1', 'm3'] })

properly handles multiple select input when "multiple" attribute is empty string4ms ‣

var values
this.server.respondWith('Post', '/test', function(xhr) {
  values = getParameters(xhr)
  xhr.respond(204, {}, '')
})
var form = make('<form hx-post="/test" hx-trigger="click">' +
        '<select name="multiSelect" id="id_question_list" multiple="" tabindex="-1" aria-hidden="true">' +
        '<option id="m1" value="m1">m1</option>' +
        '<option id="m2" value="m2">m2</option>' +
        '<option id="m3" value="m3">m3</option>' +
        '<option id="m4" value="m4">m4</option>' +
        '</select>' +
        '</form>')
form.click()
this.server.respond()
values.should.deep.equal({})
byId('m1').selected = true
form.click()
this.server.respond()
values.should.deep.equal({ multiSelect: 'm1' })
byId('m1').selected = true
byId('m3').selected = true
form.click()
this.server.respond()
values.should.deep.equal({ multiSelect: ['m1', 'm3'] })

properly handles two multiple select inputs w/ same name2ms ‣

var values
this.server.respondWith('Post', '/test', function(xhr) {
  values = getParameters(xhr)
  xhr.respond(204, {}, '')
})
var form = make('<form hx-post="/test" hx-trigger="click">' +
        '<select id="multiSelect" name="multiSelect" multiple="multiple">' +
        '<option id="m1" value="m1">m1</option>' +
        '<option id="m2" value="m2">m2</option>' +
        '<option id="m3" value="m3">m3</option>' +
        '<option id="m4" value="m4">m4</option>' +
        '</select>' +
        '<select id="multiSelect" name="multiSelect" multiple="multiple">' +
        '<option id="m5" value="m5">m1</option>' +
        '<option id="m6" value="m6">m2</option>' +
        '<option id="m7" value="m7">m3</option>' +
        '<option id="m8" value="m8">m4</option>' +
        '</select>' +
        '</form>')
form.click()
this.server.respond()
values.should.deep.equal({})
byId('m1').selected = true
form.click()
this.server.respond()
values.should.deep.equal({ multiSelect: 'm1' })
byId('m1').selected = true
byId('m3').selected = true
byId('m7').selected = true
byId('m8').selected = true
form.click()
this.server.respond()
values.should.deep.equal({ multiSelect: ['m1', 'm3', 'm7', 'm8'] })

properly handles multiple email input2ms ‣

var values
this.server.respondWith('Post', '/test', function(xhr) {
  values = getParameters(xhr)
  xhr.respond(204, {}, '')
})
var form = make('<form hx-post="/test" hx-trigger="click">' +
        '<input id="multiEmail" name="multiEmail" multiple>' +
        '</form>')
form.click()
this.server.respond()
values.should.deep.equal({ multiEmail: '' })
byId('multiEmail').value = 'foo@example.com'
form.click()
this.server.respond()
values.should.deep.equal({ multiEmail: 'foo@example.com' })
byId('multiEmail').value = 'foo@example.com,bar@example.com'
form.click()
this.server.respond()
values.should.deep.equal({ multiEmail: 'foo@example.com,bar@example.com' })

properly handles checkbox inputs5ms ‣

var values
this.server.respondWith('Post', '/test', function(xhr) {
  values = getParameters(xhr)
  xhr.respond(204, {}, '')
})
var form = make('<form hx-post="/test" hx-trigger="click">' +
        '<input id="cb1" name="c1" value="cb1" type="checkbox">' +
        '<input id="cb2" name="c1" value="cb2" type="checkbox">' +
        '<input id="cb3" name="c1" value="cb3" type="checkbox">' +
        '<input id="cb4" name="c2" value="cb4"  type="checkbox">' +
        '<input id="cb5" name="c2" value="cb5"  type="checkbox">' +
        '<input id="cb6" name="c3" value="cb6"  type="checkbox">' +
        '</form>')
form.click()
this.server.respond()
values.should.deep.equal({})
byId('cb1').checked = true
form.click()
this.server.respond()
values.should.deep.equal({ c1: 'cb1' })
byId('cb1').checked = true
byId('cb2').checked = true
form.click()
this.server.respond()
values.should.deep.equal({ c1: ['cb1', 'cb2'] })
byId('cb1').checked = true
byId('cb2').checked = true
byId('cb3').checked = true
form.click()
this.server.respond()
values.should.deep.equal({ c1: ['cb1', 'cb2', 'cb3'] })
byId('cb1').checked = true
byId('cb2').checked = true
byId('cb3').checked = true
byId('cb4').checked = true
form.click()
this.server.respond()
values.should.deep.equal({ c1: ['cb1', 'cb2', 'cb3'], c2: 'cb4' })
byId('cb1').checked = true
byId('cb2').checked = true
byId('cb3').checked = true
byId('cb4').checked = true
byId('cb5').checked = true
form.click()
this.server.respond()
values.should.deep.equal({ c1: ['cb1', 'cb2', 'cb3'], c2: ['cb4', 'cb5'] })
byId('cb1').checked = true
byId('cb2').checked = true
byId('cb3').checked = true
byId('cb4').checked = true
byId('cb5').checked = true
byId('cb6').checked = true
form.click()
this.server.respond()
values.should.deep.equal({ c1: ['cb1', 'cb2', 'cb3'], c2: ['cb4', 'cb5'], c3: 'cb6' })
byId('cb1').checked = true
byId('cb2').checked = false
byId('cb3').checked = true
byId('cb4').checked = false
byId('cb5').checked = true
byId('cb6').checked = true
form.click()
this.server.respond()
values.should.deep.equal({ c1: ['cb1', 'cb3'], c2: 'cb5', c3: 'cb6' })

properly handles radio inputs1ms ‣

var values
this.server.respondWith('Post', '/test', function(xhr) {
  values = getParameters(xhr)
  xhr.respond(204, {}, '')
})
var form = make('<form hx-post="/test" hx-trigger="click">' +
    '<div role="radiogroup">' +
    '<input id="rb1" name="r1" value="rb1" type="radio">' +
    '<input id="rb2" name="r1" value="rb2" type="radio">' +
    '<input id="rb3" name="r1" value="rb3" type="radio">' +
    '<input id="rb4" name="r2" value="rb4"  type="radio">' +
    '<input id="rb5" name="r2" value="rb5"  type="radio">' +
    '<input id="rb6" name="r3" value="rb6"  type="radio">' +
    '</div>' +
    '</form>')
form.click()
this.server.respond()
values.should.deep.equal({})
byId('rb1').checked = true
form.click()
this.server.respond()
values.should.deep.equal({ r1: 'rb1' })

text nodes dont screw up settling via variable capture5ms ‣

this.server.respondWith('GET', '/test', "<div id='d1' hx-trigger='click consume' hx-get='/test2'></div>fooo")
this.server.respondWith('GET', '/test2', 'clicked')
var div = make("<div hx-get='/test'/>")
div.click()
this.server.respond()
byId('d1').click()
this.server.respond()
byId('d1').innerHTML.should.equal('clicked')

script nodes evaluate2ms ‣

var globalWasCalled = false
window.callGlobal = function() {
  globalWasCalled = true
}
try {
  this.server.respondWith('GET', '/test', "<div></div><script type='text/javascript'>callGlobal()</script>")
  var div = make("<div hx-get='/test'></div>")
  div.click()
  this.server.respond()
  globalWasCalled.should.equal(true)
} finally {
  delete window.callGlobal
}

stand alone script nodes evaluate2ms ‣

var globalWasCalled = false
window.callGlobal = function() {
  globalWasCalled = true
}
try {
  this.server.respondWith('GET', '/test', "<script type='text/javascript'>callGlobal()</script>")
  var div = make("<div hx-get='/test'></div>")
  div.click()
  this.server.respond()
  globalWasCalled.should.equal(true)
} finally {
  delete window.callGlobal
}

script nodes can define global functions0ms ‣

try {
  window.foo = {}
  this.server.respondWith('GET', '/test', "<script type='text/javascript'>foo.bar = function() { return 42 }</script>")
  var div = make("<div hx-get='/test'></div>")
  div.click()
  this.server.respond()
  foo.bar().should.equal(42)
} finally {
  delete window.foo
}

child script nodes evaluate when children0ms ‣

var globalWasCalled = false
window.callGlobal = function() {
  globalWasCalled = true
}
try {
  this.server.respondWith('GET', '/test', "<div><script type='text/javascript'>callGlobal()</script></div>")
  var div = make("<div hx-get='/test'></div>")
  div.click()
  this.server.respond()
  globalWasCalled.should.equal(true)
} finally {
  delete window.callGlobal
}

child script nodes evaluate when first child1ms ‣

var globalWasCalled = false
window.callGlobal = function() {
  globalWasCalled = true
}
try {
  this.server.respondWith('GET', '/test', "<script type='text/javascript'>callGlobal()</script><div></div>")
  var div = make("<div hx-get='/test'></div>")
  div.click()
  this.server.respond()
  globalWasCalled.should.equal(true)
} finally {
  delete window.callGlobal
}

child script nodes evaluate when not explicitly marked javascript1ms ‣

var globalWasCalled = false
window.callGlobal = function() {
  globalWasCalled = true
}
try {
  this.server.respondWith('GET', '/test', '<div><script>callGlobal()</script></div>')
  var div = make("<div hx-get='/test'></div>")
  div.click()
  this.server.respond()
  globalWasCalled.should.equal(true)
} finally {
  delete window.callGlobal
}

script nodes do not evaluate when explicitly marked as something other than javascript1ms ‣

var globalWasCalled = false
window.callGlobal = function() {
  globalWasCalled = true
}
try {
  this.server.respondWith('GET', '/test', "<div><script type='text/samplescript'>callGlobal()</script></div>")
  var div = make("<div hx-get='/test'></div>")
  div.click()
  this.server.respond()
  globalWasCalled.should.equal(false)
} finally {
  delete window.callGlobal
}

script nodes evaluate after swap3ms ‣

window.callGlobal = function() {
  console.log('Here...')
  window.tempVal = byId('d1').innerText
}
try {
  this.server.respondWith('GET', '/test', "<div><script>callGlobal()</script><div id='d1'>After settle...</div> </div>")
  var div = make("<div hx-get='/test'></div>")
  div.click()
  this.server.respond()
  window.tempVal.should.equal('After settle...')
} finally {
  delete window.callGlobal
  delete window.tempVal
}

script node exceptions do not break rendering

allows empty verb values1ms ‣

var path = null
var div = make("<div hx-get=''/>")
htmx.on(div, 'htmx:configRequest', function(evt) {
  path = evt.detail.path
  return false
})
div.click()
this.server.respond()
path.should.not.be.null

allows blank verb values1ms ‣

var path = null
var div = make('<div hx-get/>')
htmx.on(div, 'htmx:configRequest', function(evt) {
  path = evt.detail.path
  return false
})
div.click()
this.server.respond()
path.should.not.be.null

input values are not settle swapped (causes flicker)1ms ‣

this.server.respondWith('GET', '/test', "<input id='i1' value='bar'/>")
var input = make("<input id='i1' hx-get='/test' value='foo' hx-swap='outerHTML settle:50' hx-trigger='click'/>")
input.click()
this.server.respond()
input = byId('i1')
input.value.should.equal('bar')

autofocus attribute works properly3ms ‣

this.server.respondWith('GET', '/test', "<input id='i2' value='bar' autofocus/>")
var input = make("<input id='i1' hx-get='/test' value='foo' hx-swap='afterend' hx-trigger='click'/>")
input.focus()
input.click()
document.activeElement.should.equal(input)
this.server.respond()
var input2 = byId('i2')
document.activeElement.should.equal(input2)

autofocus attribute works properly w/ child2ms ‣

this.server.respondWith('GET', '/test', "<div><input id='i2' value='bar' autofocus/></div>")
var input = make("<input id='i1' hx-get='/test' value='foo' hx-swap='afterend' hx-trigger='click'/>")
input.focus()
input.click()
document.activeElement.should.equal(input)
this.server.respond()
var input2 = byId('i2')
document.activeElement.should.equal(input2)

autofocus attribute works properly w/ true value2ms ‣

this.server.respondWith('GET', '/test', "<div><input id='i2' value='bar' autofocus='true'/></div>")
var input = make("<input id='i1' hx-get='/test' value='foo' hx-swap='afterend' hx-trigger='click'/>")
input.focus()
input.click()
document.activeElement.should.equal(input)
this.server.respond()
var input2 = byId('i2')
document.activeElement.should.equal(input2)

multipart/form-data encoding works2ms ‣

this.server.respondWith('POST', '/test', function(xhr) {
  should.equal(xhr.requestHeaders['Content-Type'], undefined)
  if (xhr.requestBody.get) { // IE 11 does not support
    xhr.requestBody.get('i1').should.equal('foo')
  }
  xhr.respond(200, {}, 'body: ' + xhr.requestBody)
})
var form = make("<form hx-post='/test' hx-encoding='multipart/form-data' hx-trigger='click'>" +
        "<input name='i1'  id='i1' value='foo'/>" +
        '</form>')
form.focus()
form.click()
this.server.respond()

removed elements do not issue requests1ms ‣

var count = 0
this.server.respondWith('GET', '/test', function(xhr) {
  count++
  xhr.respond(200, {}, '')
})
var btn = make('<button hx-get="/test">Click Me!</button>')
htmx.remove(btn)
btn.click()
this.server.respond()
count.should.equal(0)

title tags update title1ms ‣

this.server.respondWith('GET', '/test', function(xhr) {
  xhr.respond(200, {}, "<title class=''>htmx rocks!</title>Clicked!")
})
var btn = make('<button hx-get="/test">Click Me!</button>')
btn.click()
this.server.respond()
btn.innerText.should.equal('Clicked!')
window.document.title.should.equal('htmx rocks!')

svg title tags do not update title2ms ‣

var originalTitle = window.document.title
this.server.respondWith('GET', '/test', function(xhr) {
  xhr.respond(200, {}, "<svg class=''><title>" + originalTitle + 'UPDATE' + '</title></svg>Clicked!')
})
var btn = make('<button hx-get="/test">Click Me!</button>')
btn.click()
this.server.respond()
btn.innerText.should.equal('Clicked!')
window.document.title.should.equal(originalTitle)

first title tag outside svg title tags updates title2ms ‣

var originalTitle = window.document.title
var newTitle = originalTitle + '!!!'
this.server.respondWith('GET', '/test', function(xhr) {
  xhr.respond(200, {}, "<title class=''>" + newTitle + "</title><svg class=''><title>foo</title></svg>Clicked!<title class=''>x</title>")
})
var btn = make('<button hx-get="/test">Click Me!</button>')
btn.click()
this.server.respond()
btn.innerText.should.equal('Clicked!')
window.document.title.should.equal(newTitle)

title update does not URL escape1ms ‣

this.server.respondWith('GET', '/test', function(xhr) {
  xhr.respond(200, {}, '<title>&lt;/> htmx rocks!</title>Clicked!')
})
var btn = make('<button hx-get="/test">Click Me!</button>')
btn.click()
this.server.respond()
btn.innerText.should.equal('Clicked!')
window.document.title.should.equal('</> htmx rocks!')

by default 400 content is not swapped3ms ‣

this.server.respondWith('GET', '/test', function(xhr) {
  xhr.respond(400, {}, 'Clicked!')
})
var btn = make('<button hx-get="/test">Click Me!</button>')
btn.click()
this.server.respond()
btn.innerText.should.equal('Click Me!')

400 content can be swapped if configured to do so1ms ‣

var handler = htmx.on('htmx:beforeSwap', function(event) {
  if (event.detail.xhr.status === 400) {
    event.detail.shouldSwap = true
  }
})
this.server.respondWith('GET', '/test', function(xhr) {
  xhr.respond(400, {}, 'Clicked!')
})
var btn = make('<button hx-get="/test">Click Me!</button>')
btn.click()
this.server.respond()
btn.innerText.should.equal('Clicked!')
htmx.off('htmx:beforeSwap', handler)

400 content can be retargeted if configured to do so2ms ‣

var handler = htmx.on('htmx:beforeSwap', function(event) {
  if (event.detail.xhr.status === 400) {
    event.detail.shouldSwap = true
    event.detail.target = byId('d1')
  }
})
this.server.respondWith('GET', '/test', function(xhr) {
  xhr.respond(400, {}, 'Clicked!')
})
var btn = make('<button hx-get="/test">Click Me!</button>')
var div = make('<div id="d1"></div>')
btn.click()
this.server.respond()
div.innerText.should.equal('Clicked!')
htmx.off('htmx:beforeSwap', handler)

errors are triggered only on 400+1ms ‣

var errors = 0
var handler = htmx.on('htmx:responseError', function() {
  errors++
})
this.server.respondWith('GET', '/test1', function(xhr) {
  xhr.respond(204, {}, 'Clicked!')
})
this.server.respondWith('GET', '/test2', function(xhr) {
  xhr.respond(400, {}, 'Clicked!')
})
var btn1 = make('<button hx-get="/test1">Click Me!</button>')
var btn2 = make('<button hx-get="/test2">Click Me!</button>')
btn1.click()
btn2.click()
this.server.respond()
this.server.respond()
errors.should.equal(1)
htmx.off('htmx:responseError', handler)

content can be modified if configured to do so1ms ‣

var handler = htmx.on('htmx:beforeSwap', function(event) {
  if (event.detail.xhr.status === 400) {
    event.detail.shouldSwap = true
    event.detail.serverResponse = event.detail.serverResponse + '!!'
  }
})
this.server.respondWith('GET', '/test', function(xhr) {
  xhr.respond(400, {}, 'Clicked!')
})
var btn = make('<button hx-get="/test">Click Me!</button>')
btn.click()
this.server.respond()
btn.innerText.should.equal('Clicked!!!')
htmx.off('htmx:beforeSwap', handler)

htmx.js test suite

Scratch Page

Manual Tests

Mocha Test Suite

Core htmx internals Tests

makeFragment works with janky stuff1ms ‣

makeFragment works with template wrapping0ms ‣

makeFragment works with template wrapping and funky combos1ms ‣

set header works with non-ASCII values1ms ‣

handles parseInterval correctly1ms ‣

tokenizes correctly0ms ‣

tags respond correctly to shouldCancel2ms ‣

unset properly unsets a given attribute0ms ‣

unset properly unsets a given attribute on a parent0ms ‣

unset does not unset a value below it in the hierarchy0ms ‣

encoding values respects enctype on forms1ms ‣

Core htmx API test

should find properly0ms ‣

should find properly from elt0ms ‣

should find all properly1ms ‣

should find all properly from elt0ms ‣

should find closest element properly0ms ‣

should remove element properly0ms ‣

should remove element properly w/ selector0ms ‣

should add class properly0ms ‣

should add class properly w/ selector0ms ‣

should add class properly after delay20ms ‣

should remove class properly1ms ‣

should remove class properly w/ selector0ms ‣

should add class properly after delay20ms ‣

should toggle class properly0ms ‣

should toggle class properly w/ selector0ms ‣

should take class properly0ms ‣

should take class properly w/ selector1ms ‣

eval can be suppressed1ms ‣

ajax api works6ms ‣

ajax api works by ID1ms ‣

ajax api does not fall back to body when target invalid0ms ‣

ajax api fails when target invalid0ms ‣

ajax api fails when target invalid even if source set0ms ‣

ajax api fails when source invalid and no target set0ms ‣

ajax api falls back to targeting source if target not set2ms ‣

ajax api works with swapSpec2ms ‣

ajax api works with select3ms ‣

ajax api works with Hx-Select overrides select2ms ‣

ajax returns a promise2ms ‣

ajax api can pass parameters1ms ‣

ajax api Content-Type header is application/x-www-form-urlencoded9ms ‣

ajax api Content-Type header override to application/json1ms ‣

can re-init with new attributes3ms ‣

does not trigger load on re-init of an existing element1ms ‣

onLoad is called... onLoad1ms ‣

triggers properly0ms ‣

triggers properly w/ selector0ms ‣

triggers with no details properly1ms ‣

swaps content properly (basic)0ms ‣

swaps content properly (with select)1ms ‣

swaps content properly (with oob)2ms ‣

swaps content properly (with select oob)0ms ‣

swap delete works when parent is removed0ms ‣

swap outerHTML works when parent is removed1ms ‣

Core htmx AJAX Tests

issues a GET request on click and swaps content1ms ‣

processes inner content properly3ms ‣

handles swap outerHTML properly2ms ‣

handles beforebegin properly5ms ‣

handles afterbegin properly3ms ‣

handles afterbegin properly with no initial content2ms ‣

handles afterend properly2ms ‣

handles beforeend properly2ms ‣

handles beforeend properly with no initial content3ms ‣

handles hx-target properly1ms ‣

handles 204 NO CONTENT responses properly1ms ‣

handles 304 NOT MODIFIED responses properly4ms ‣

handles hx-trigger with non-default value1ms ‣

handles hx-trigger with load event1ms ‣

sets the content type of the request properly1ms ‣

issues two requests when clicked twice before response1ms ‣

issues two requests when clicked three times before response1ms ‣

properly handles hx-select for basic situation1ms ‣