htmx/test/attributes/hx-sync.js

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

  it('can use drop strategy', function() {
    var count = 0
    this.server.respondWith('GET', '/test', function(xhr) {
      xhr.respond(200, {}, 'Click ' + count++)
    })
    make('<div hx-sync="this:drop"><button id="b1" hx-get="/test">Initial</button>' +
            '                                      <button id="b2" hx-get="/test">Initial</button></div>')
    var b1 = byId('b1')
    var b2 = byId('b2')
    b1.click()
    b2.click()
    this.server.respond()
    this.server.respond()
    b1.innerHTML.should.equal('Click 0')
    b2.innerHTML.should.equal('Initial')
  })

  it('defaults to the drop strategy', function() {
    var count = 0
    this.server.respondWith('GET', '/test', function(xhr) {
      xhr.respond(200, {}, 'Click ' + count++)
    })
    make('<div hx-sync="this"><button id="b1" hx-get="/test">Initial</button>' +
            '                                      <button id="b2" hx-get="/test">Initial</button></div>')
    var b1 = byId('b1')
    var b2 = byId('b2')
    b1.click()
    b2.click()
    this.server.respond()
    this.server.respond()
    b1.innerHTML.should.equal('Click 0')
    b2.innerHTML.should.equal('Initial')
  })

  it('can use replace strategy', function() {
    var count = 0
    this.server.respondWith('GET', '/test', function(xhr) {
      xhr.respond(200, {}, 'Click ' + count++)
    })
    make('<div hx-sync="this:replace"><button id="b1" hx-get="/test">Initial</button>' +
            '                                      <button id="b2" hx-get="/test">Initial</button></div>')
    var b1 = byId('b1')
    var b2 = byId('b2')
    b1.click()
    b2.click()
    this.server.respond()
    this.server.respond()
    b1.innerHTML.should.equal('Initial')
    b2.innerHTML.should.equal('Click 0')
  })

  it('can use queue all strategy', function() {
    var count = 0
    this.server.respondWith('GET', '/test', function(xhr) {
      xhr.respond(200, {}, 'Click ' + count++)
    })
    make('<div hx-sync="this:queue all"><button id="b1" hx-get="/test">Initial</button>' +
            '                                      <button id="b2" hx-get="/test">Initial</button>' +
            '                                      <button id="b3" hx-get="/test">Initial</button></div>')
    var b1 = byId('b1')
    b1.click()

    var b2 = byId('b2')
    b2.click()

    var b3 = byId('b3')
    b3.click()

    this.server.respond()
    b1.innerHTML.should.equal('Click 0')
    b2.innerHTML.should.equal('Initial')
    b3.innerHTML.should.equal('Initial')

    this.server.respond()
    b1.innerHTML.should.equal('Click 0')
    b2.innerHTML.should.equal('Click 1')
    b3.innerHTML.should.equal('Initial')

    this.server.respond()
    b1.innerHTML.should.equal('Click 0')
    b2.innerHTML.should.equal('Click 1')
    b3.innerHTML.should.equal('Click 2')
  })

  it('can use queue last strategy', function() {
    var count = 0
    this.server.respondWith('GET', '/test', function(xhr) {
      xhr.respond(200, {}, 'Click ' + count++)
    })
    make('<div hx-sync="this:queue last"><button id="b1" hx-get="/test">Initial</button>' +
            '                                      <button id="b2" hx-get="/test">Initial</button>' +
            '                                      <button id="b3" hx-get="/test">Initial</button></div>')
    var b1 = byId('b1')
    b1.click()

    var b2 = byId('b2')
    b2.click()

    var b3 = byId('b3')
    b3.click()

    this.server.respond()
    b1.innerHTML.should.equal('Click 0')
    b2.innerHTML.should.equal('Initial')
    b3.innerHTML.should.equal('Initial')

    this.server.respond()
    b1.innerHTML.should.equal('Click 0')
    b2.innerHTML.should.equal('Initial')
    b3.innerHTML.should.equal('Click 1')

    this.server.respond()
    b1.innerHTML.should.equal('Click 0')
    b2.innerHTML.should.equal('Initial')
    b3.innerHTML.should.equal('Click 1')
  })

  it('can use queue first strategy', function() {
    var count = 0
    this.server.respondWith('GET', '/test', function(xhr) {
      xhr.respond(200, {}, 'Click ' + count++)
    })
    make('<div hx-sync="this:queue first"><button id="b1" hx-get="/test">Initial</button>' +
            '                                      <button id="b2" hx-get="/test">Initial</button>' +
            '                                      <button id="b3" hx-get="/test">Initial</button></div>')
    var b1 = byId('b1')
    b1.click()

    var b2 = byId('b2')
    b2.click()

    var b3 = byId('b3')
    b3.click()

    this.server.respond()
    b1.innerHTML.should.equal('Click 0')
    b2.innerHTML.should.equal('Initial')
    b3.innerHTML.should.equal('Initial')

    this.server.respond()
    b1.innerHTML.should.equal('Click 0')
    b2.innerHTML.should.equal('Click 1')
    b3.innerHTML.should.equal('Initial')

    this.server.respond()
    b1.innerHTML.should.equal('Click 0')
    b2.innerHTML.should.equal('Click 1')
    b3.innerHTML.should.equal('Initial')
  })

  it('can use abort strategy to end existing abortable request', function() {
    var count = 0
    this.server.respondWith('GET', '/test', function(xhr) {
      xhr.respond(200, {}, 'Click ' + count++)
    })
    make('<div hx-sync="this"><button hx-sync="closest div:abort" id="b1" hx-get="/test">Initial</button>' +
            '                                      <button id="b2" hx-get="/test">Initial</button></div>')
    var b1 = byId('b1')
    var b2 = byId('b2')
    b1.click()
    b2.click()
    this.server.respond()
    this.server.respond()
    b1.innerHTML.should.equal('Initial')
    b2.innerHTML.should.equal('Click 0')
  })

  it('can use abort strategy to drop abortable request when one is in flight', function() {
    var count = 0
    this.server.respondWith('GET', '/test', function(xhr) {
      xhr.respond(200, {}, 'Click ' + count++)
    })
    make('<div hx-sync="this"><button hx-sync="closest div:abort" id="b1" hx-get="/test">Initial</button>' +
            '                                      <button id="b2" hx-get="/test">Initial</button></div>')
    var b1 = byId('b1')
    var b2 = byId('b2')
    b2.click()
    b1.click()
    this.server.respond()
    this.server.respond()
    b1.innerHTML.should.equal('Initial')
    b2.innerHTML.should.equal('Click 0')
  })

  it('can abort a request programmatically', function() {
    var count = 0
    this.server.respondWith('GET', '/test', function(xhr) {
      xhr.respond(200, {}, 'Click ' + count++)
    })
    make('<div><button id="b1" hx-get="/test">Initial</button>' +
            '             <button id="b2" hx-get="/test">Initial</button></div>')
    var b1 = byId('b1')
    var b2 = byId('b2')
    b1.click()
    b2.click()

    htmx.trigger(b1, 'htmx:abort')

    this.server.respond()
    this.server.respond()
    b1.innerHTML.should.equal('Initial')
    b2.innerHTML.should.equal('Click 0')
  })
})