Core htmx AJAX Tests

• issues a GET request on click and swaps content7ms ‣

  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 properly5ms ‣

  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 properly21ms ‣

  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 properly4ms ‣

  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 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="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 properly7ms ‣

  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 properly5ms ‣

  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 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="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 properly3ms ‣

  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 properly0ms ‣

  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 id24ms ‣

  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 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 handles multiple select input832ms ‣

  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 string1ms ‣

  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 inputs4ms ‣

  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 capture2ms ‣

  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 evaluate1ms ‣

  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 evaluate1ms ‣

  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 functions1ms ‣

  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 children1ms ‣

  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 swap1ms ‣

  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 values0ms ‣

  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/ child3ms ‣

  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 value1ms ‣

  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 works1ms ‣

  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 requests0ms ‣

  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 title4ms ‣

  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 escape2ms ‣

  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 swapped2ms ‣

  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 so1ms ‣

  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)