htmx/test/attributes/hx-disinherit.js

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

  it('basic inheritance sanity-check', function() {
    var response_inner = '<div id="snowflake" class="">Hello world</div>'
    var response = '<div id="unique" class="">' + response_inner + '</div>'
    this.server.respondWith('GET', '/test', response)

    var div = make('<div hx-select="#snowflake" hx-target="#cta" hx-swap="outerHTML"><button id="bx1" hx-get="/test"><span id="cta">Click Me!</span></button></div>')
    var btn = byId('bx1')
    btn.click()
    this.server.respond()
    btn.firstChild.id.should.equal('snowflake')
    btn.innerText.should.equal('Hello world')
  })

  it('disinherit exclude single attribute', function() {
    var response_inner = '<div id="snowflake">Hello world</div>'
    var response = '<div id="unique">' + response_inner + '</div>'
    this.server.respondWith('GET', '/test', response)

    var div = make('<div hx-select="#snowflake" hx-target="#cta" hx-swap="beforebegin" hx-disinherit="hx-select"><button id="bx1" hx-get="/test"><span id="cta">Click Me!</span></button></div>')
    var btn = byId('bx1')
    btn.click()
    this.server.respond()
    btn.firstChild.id.should.equal('unique')
    btn.firstChild.firstChild.id.should.equal('snowflake')
    btn.childNodes[1].innerText.should.equal('Click Me!')
  })

  it('disinherit exclude multiple attributes', function() {
    var response_inner = '<div id="snowflake">Hello world</div>'
    var response = '<div id="unique">' + response_inner + '</div>'
    this.server.respondWith('GET', '/test', response)

    var div = make('<div hx-select="#snowflake" hx-target="#cta" hx-swap="beforebegin" hx-disinherit="hx-select hx-swap">' +
            '  <button id="bx1" hx-get="/test"><span id="cta">Click Me!</span></button>' +
            '</div>')
    var btn = byId('bx1')
    btn.click()
    this.server.respond()
    console.log(btn.innerHTML)
    console.log(response)
    btn.firstChild.id.should.equal('cta')
    btn.firstChild.firstChild.id.should.equal('unique')
    btn.firstChild.firstChild.firstChild.id.should.equal('snowflake')
  })

  it('disinherit exclude all attributes', function() {
    var response_inner = '<div id="snowflake">Hello world</div>'
    var response = '<div id="unique">' + response_inner + '</div>'
    this.server.respondWith('GET', '/test', response)
    var div = make('<div hx-select="#snowflake" hx-target="#cta" hx-swap="beforebegin" hx-disinherit="*">' +
            '  <button id="bx1" hx-get="/test">' +
            '    <span id="cta">Click Me!</span>' +
            '  </button>' +
            '</div>')
    var btn = byId('bx1')
    btn.click()
    this.server.respond()
    btn.firstChild.id.should.equal('unique')
    btn.firstChild.firstChild.id.should.equal('snowflake')
  })

  it('same-element inheritance disable', function() {
    var response_inner = '<div id="snowflake" class="">Hello world</div>'
    var response = '<div id="unique">' + response_inner + '</div>'
    this.server.respondWith('GET', '/test', response)

    var btn = make('<button hx-select="#snowflake" hx-target="#container" hx-trigger="click" hx-get="/test" hx-swap="outerHTML" hx-disinherit="*"><div id="container"></div></button>')
    btn.click()
    this.server.respond()
    btn.firstChild.id.should.equal('snowflake')
    btn.firstChild.innerText.should.equal('Hello world')
  })

  it('same-element inheritance disable with child nodes', function() {
    var response_inner = '<div id="snowflake" class="">Hello world</div>'
    var response = '<div id="unique">' + response_inner + '</div>'
    this.server.respondWith('GET', '/test', response)
    this.server.respondWith('GET', '/test2', 'unique-snowflake')

    var div = make('<div hx-select="#snowflake" hx-target="#container" hx-get="/test" hx-swap="outerHTML" hx-trigger="keyup" hx-disinherit="*"><div id="container"><button id="bx1" hx-get="/test2" hx-trigger="click" hx-target="#target"><div id="target"></div></button></div></div>')
    var btn = byId('bx1')
    btn.click()
    this.server.respond()
    btn.firstChild.id.should.equal('target')
    btn.firstChild.innerText.should.equal('unique-snowflake')
    var count = (div.parentElement.innerHTML.match(/snowflake/g) || []).length
    count.should.equal(2) // hx-select of parent div and newly loaded inner content
  })

  it('boosted element hx-disinherit sanity check', function() {
    try {
      var request
      var handler = htmx.on('htmx:beforeRequest', function(evt) {
        request = evt
      })
      var div = make('<div hx-boost="true" hx-disinherit="false"><a id="a1" href="/test">Click me</a></div>')
      var link = byId('a1')
      link.click()
      // should match the fully resolved href of the boosted element
      should.equal(request.detail.requestConfig.path, '/test')
      should.equal(request.detail.elt['htmx-internal-data'].boosted, true)
    } finally {
      htmx.off('htmx:beforeRequest', handler)
    }
  })

  it('boosted element inheritance manual unset', function() {
    try {
      var request
      var handler = htmx.on('htmx:beforeRequest', function(evt) {
        request = evt
      })
      var div = make('<div hx-boost="true" hx-get="/test"><div hx-boost="unset"><a id="a1" href="/test">Click me</a></div></div>')
      var link = byId('a1')
      should.equal(link['htmx-internal-data'].boosted, undefined)
    } finally {
      htmx.off('htmx:beforeRequest', handler)
    }
  })

  it('nested htmx-node with boosting parent', function() {
    try {
      var request
      var handler = htmx.on('htmx:beforeRequest', function(evt) {
        request = evt
      })
      var div = make('<div hx-boost="true" hx-target="#test" hx-disinherit="*"><div id="test"></div><a id="a1" href="/test" hx-get="/test2">Click me</a></div>')
      var link = byId('a1')
      link.click()
      should.equal(request.detail.requestConfig.path, '/test2')
      should.equal(request.detail.elt['htmx-internal-data'].boosted, undefined)
      should.equal(request.detail.target.id, 'a1')
    } finally {
      htmx.off('htmx:beforeRequest', handler)
    }
  })
})