htmx/test/attributes/hx-headers.js

describe('hx-headers attribute', function() {
  beforeEach(function() {
    this.server = makeServer()
    clearWorkArea()
  })
  afterEach(function() {
    this.server.restore()
    clearWorkArea()
  })

  it('basic hx-headers works', function() {
    this.server.respondWith('POST', '/vars', function(xhr) {
      xhr.requestHeaders.i1.should.equal('test')
      xhr.respond(200, {}, 'Clicked!')
    })
    var div = make("<div hx-post='/vars' hx-headers='\"i1\":\"test\"'></div>")
    div.click()
    this.server.respond()
    div.innerHTML.should.equal('Clicked!')
  })

  it('basic hx-headers works with braces', function() {
    this.server.respondWith('POST', '/vars', function(xhr) {
      xhr.requestHeaders.i1.should.equal('test')
      xhr.respond(200, {}, 'Clicked!')
    })
    var div = make("<div hx-post='/vars' hx-headers='{\"i1\":\"test\"}'></div>")
    div.click()
    this.server.respond()
    div.innerHTML.should.equal('Clicked!')
  })

  it('multiple hx-headers works', function() {
    this.server.respondWith('POST', '/vars', function(xhr) {
      xhr.requestHeaders.v1.should.equal('test')
      xhr.requestHeaders.v2.should.equal('42')
      xhr.respond(200, {}, 'Clicked!')
    })
    var div = make("<div hx-post='/vars' hx-headers='\"v1\":\"test\", \"v2\":42'></div>")
    div.click()
    this.server.respond()
    div.innerHTML.should.equal('Clicked!')
  })

  it('hx-headers can be on parents', function() {
    this.server.respondWith('POST', '/vars', function(xhr) {
      xhr.requestHeaders.i1.should.equal('test')
      xhr.respond(200, {}, 'Clicked!')
    })
    make("<div hx-headers='\"i1\":\"test\"'><div id='d1' hx-post='/vars'></div></div>")
    var div = byId('d1')
    div.click()
    this.server.respond()
    div.innerHTML.should.equal('Clicked!')
  })

  it('hx-headers can override parents', function() {
    this.server.respondWith('POST', '/vars', function(xhr) {
      xhr.requestHeaders.i1.should.equal('best')
      xhr.respond(200, {}, 'Clicked!')
    })
    make("<div hx-headers='\"i1\":\"test\"'><div id='d1' hx-headers='\"i1\":\"best\"' hx-post='/vars'></div></div>")
    var div = byId('d1')
    div.click()
    this.server.respond()
    div.innerHTML.should.equal('Clicked!')
  })

  it('hx-headers overrides inputs', function() {
    this.server.respondWith('POST', '/include', function(xhr) {
      xhr.requestHeaders.i1.should.equal('best')
      xhr.respond(200, {}, 'Clicked!')
    })
    var div = make("<div hx-target='this'><input hx-post='/include' hx-headers='\"i1\":\"best\"' hx-trigger='click' id='i1' name='i1' value='test'/></div>")
    var input = byId('i1')
    input.click()
    this.server.respond()
    div.innerHTML.should.equal('Clicked!')
  })

  it('basic hx-headers javascript: works', function() {
    this.server.respondWith('POST', '/vars', function(xhr) {
      xhr.requestHeaders.i1.should.equal('test')
      xhr.respond(200, {}, 'Clicked!')
    })
    var div = make('<div hx-post="/vars" hx-headers="javascript:i1:\'test\'"></div>')
    div.click()
    this.server.respond()
    div.innerHTML.should.equal('Clicked!')
  })

  it('hx-headers works with braces', function() {
    this.server.respondWith('POST', '/vars', function(xhr) {
      xhr.requestHeaders.i1.should.equal('test')
      xhr.respond(200, {}, 'Clicked!')
    })
    var div = make('<div hx-post="/vars" hx-headers="javascript:{i1:\'test\'}"></div>')
    div.click()
    this.server.respond()
    div.innerHTML.should.equal('Clicked!')
  })

  it('multiple hx-headers works', function() {
    this.server.respondWith('POST', '/vars', function(xhr) {
      xhr.requestHeaders.v1.should.equal('test')
      xhr.requestHeaders.v2.should.equal('42')
      xhr.respond(200, {}, 'Clicked!')
    })
    var div = make('<div hx-post="/vars" hx-headers="javascript:v1:\'test\', v2:42"></div>')
    div.click()
    this.server.respond()
    div.innerHTML.should.equal('Clicked!')
  })

  it('hx-headers can be on parents', function() {
    this.server.respondWith('POST', '/vars', function(xhr) {
      xhr.requestHeaders.i1.should.equal('test')
      xhr.respond(200, {}, 'Clicked!')
    })
    make('<div hx-headers="javascript:i1:\'test\'"><div id="d1" hx-post="/vars"></div></div>')
    var div = byId('d1')
    div.click()
    this.server.respond()
    div.innerHTML.should.equal('Clicked!')
  })

  it('hx-headers can override parents', function() {
    this.server.respondWith('POST', '/vars', function(xhr) {
      xhr.requestHeaders.i1.should.equal('best')
      xhr.respond(200, {}, 'Clicked!')
    })
    make('<div hx-headers="javascript:i1:\'test\'"><div id="d1" hx-headers="javascript:i1:\'best\'" hx-post="/vars"></div></div>')
    var div = byId('d1')
    div.click()
    this.server.respond()
    div.innerHTML.should.equal('Clicked!')
  })

  it('hx-headers overrides inputs', function() {
    this.server.respondWith('POST', '/include', function(xhr) {
      xhr.requestHeaders.i1.should.equal('best')
      xhr.respond(200, {}, 'Clicked!')
    })
    var div = make('<div hx-target="this"><input hx-post="/include" hx-headers="javascript:i1:\'best\'" hx-trigger="click" id="i1" name="i1" value="test"/></div>')
    var input = byId('i1')
    input.click()
    this.server.respond()
    div.innerHTML.should.equal('Clicked!')
  })
})