htmx/test/attributes/hx-preserve.js
2023-12-21 13:22:10 -05:00

38 lines
1.6 KiB
JavaScript

describe('hx-preserve attribute', function() {
beforeEach(function() {
this.server = makeServer()
clearWorkArea()
})
afterEach(function() {
this.server.restore()
clearWorkArea()
})
it('handles basic response properly', function() {
this.server.respondWith('GET', '/test', "<div id='d1' hx-preserve>New Content</div><div id='d2'>New Content</div>")
var div = make("<div hx-get='/test'><div id='d1' hx-preserve>Old Content</div><div id='d2'>Old Content</div></div>")
div.click()
this.server.respond()
byId('d1').innerHTML.should.equal('Old Content')
byId('d2').innerHTML.should.equal('New Content')
})
it('handles preserved element that might not be existing', function() {
this.server.respondWith('GET', '/test', "<div id='d1' hx-preserve>New Content</div><div id='d2'>New Content</div>")
var div = make("<div hx-get='/test'><div id='d2'>Old Content</div></div>")
div.click()
this.server.respond()
byId('d1').innerHTML.should.equal('New Content')
byId('d2').innerHTML.should.equal('New Content')
})
it('preserved element should not be swapped if it lies outside of hx-select', function() {
this.server.respondWith('GET', '/test', "<div id='d1' hx-preserve>New Content</div><div id='d2'>New Content</div>")
var div = make("<div hx-get='/test' hx-target='#d2' hx-select='#d2' hx-swap='outerHTML'><div id='d1' hx-preserve>Old Content</div><div id='d2'>Old Content</div></div>")
div.click()
this.server.respond()
byId('d1').innerHTML.should.equal('Old Content')
byId('d2').innerHTML.should.equal('New Content')
})
})