Core htmx internals Tests

• tags respond correctly to shouldCancel3ms ‣

  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 divThatShouldNotCancel = make('<div></div>')
  htmx._('shouldCancel')({ type: 'click' }, divThatShouldNotCancel).should.equal(false)
  var form = make('<form></form>')
  htmx._('shouldCancel')({ type: 'submit', target: form }, form).should.equal(true)
  htmx._('shouldCancel')({ type: 'click', target: form }, form).should.equal(true)
  // falls back to check elt tag when target is not an element
  htmx._('shouldCancel')({ type: 'click', target: null }, form).should.equal(true)
  // check that events targeting elements that shouldn't cancel don't cancel
  htmx._('shouldCancel')({ type: 'submit', target: anchorThatShouldNotCancel }, form).should.equal(false)
  htmx._('shouldCancel')({ type: 'click', target: divThatShouldNotCancel }, form).should.equal(false)
  // check elements inside links getting click events should cancel parent links
  var anchorWithButton = make("<a href='/foo'><button></button></a>")
  htmx._('shouldCancel')({ type: 'click', target: anchorWithButton.firstChild }, anchorWithButton).should.equal(true)
  htmx._('shouldCancel')({ type: 'click', target: anchorWithButton.firstChild }, anchorWithButton.firstChild).should.equal(true)
  form = make('<form id="f1">' +
      '<input id="insideInput" type="submit">' +
      '<button id="insideFormBtn"></button>' +
      '<button id="insideSubmitBtn" type="submit"></button>' +
      '<button id="insideResetBtn" type="reset"></button>' +
      '<button id="insideButtonBtn" type="button"></button>' +
      '</form>' +
      '<input id="outsideInput" form="f1" type="submit">' +
      '<button id="outsideFormBtn" form="f1"></button>' +
      '<button id="outsideSubmitBtn" form="f1" type="submit"></button>")' +
      '<button id="outsideButtonBtn" form="f1" type="button"></button>")' +
      '<button id="outsideResetBtn" form="f1" type="reset"></button>")' +
      '<button id="outsideNoFormBtn"></button>")')
  htmx._('shouldCancel')({ type: 'click' }, byId('insideInput')).should.equal(true)
  htmx._('shouldCancel')({ type: 'click' }, byId('insideFormBtn')).should.equal(true)
  htmx._('shouldCancel')({ type: 'click' }, byId('insideSubmitBtn')).should.equal(true)
  htmx._('shouldCancel')({ type: 'click' }, byId('insideResetBtn')).should.equal(false)
  htmx._('shouldCancel')({ type: 'click' }, byId('insideButtonBtn')).should.equal(false)
  htmx._('shouldCancel')({ type: 'click' }, byId('outsideInput')).should.equal(true)
  htmx._('shouldCancel')({ type: 'click' }, byId('outsideFormBtn')).should.equal(true)
  htmx._('shouldCancel')({ type: 'click' }, byId('outsideSubmitBtn')).should.equal(true)
  htmx._('shouldCancel')({ type: 'click' }, byId('outsideButtonBtn')).should.equal(false)
  htmx._('shouldCancel')({ type: 'click' }, byId('outsideResetBtn')).should.equal(false)
  htmx._('shouldCancel')({ type: 'click' }, byId('outsideNoFormBtn')).should.equal(false)