describe('hx-swap-oob attribute', function() { const savedConfig = htmx.config beforeEach(function() { this.server = makeServer() htmx.config = Object.assign({}, savedConfig) clearWorkArea() }) afterEach(function() { this.server.restore() htmx.config = savedConfig clearWorkArea() }) // Repeat the same test to make sure it works with different configurations for (const config of [{ allowNestedOobSwaps: true }, { allowNestedOobSwaps: false }]) { it('handles basic response properly with config ' + JSON.stringify(config), function() { Object.assign(htmx.config, config) this.server.respondWith('GET', '/test', "Clicked

Swapped0

") var div = make('

click me

') make('

') div.click() this.server.respond() div.innerHTML.should.equal('Clicked') byId('d1').innerHTML.should.equal('Swapped0') }) } for (const config of [{ allowNestedOobSwaps: true }, { allowNestedOobSwaps: false }]) { it('oob swap works when the response has a body tag with config ' + JSON.stringify(config), function() { Object.assign(htmx.config, config) this.server.respondWith('GET', '/test', "Clicked

Swapped0

") var div = make('

click me

') make('

') div.click() this.server.respond() div.innerHTML.should.equal('Clicked') byId('d2').innerHTML.should.equal('Swapped0') }) } for (const config of [{ allowNestedOobSwaps: true }, { allowNestedOobSwaps: false }]) { it('oob swap works when the response has html and body tags with config ' + JSON.stringify(config), function() { Object.assign(htmx.config, config) this.server.respondWith('GET', '/test', "Clicked

Swapped0

") var div = make('

click me

') make('

') div.click() this.server.respond() div.innerHTML.should.equal('Clicked') byId('d3').innerHTML.should.equal('Swapped0') }) } for (const config of [{ allowNestedOobSwaps: true }, { allowNestedOobSwaps: false }]) { it('handles more than one oob swap properly with config ' + JSON.stringify(config), function() { Object.assign(htmx.config, config) this.server.respondWith('GET', '/test', "Clicked

Swapped1

Swapped2

") var div = make('

click me

') make('

') make('

') div.click() this.server.respond() div.innerHTML.should.equal('Clicked') byId('d1').innerHTML.should.equal('Swapped1') byId('d2').innerHTML.should.equal('Swapped2') }) } it('handles no id match properly', function() { this.server.respondWith('GET', '/test', "Clicked

Swapped2

") var div = make('

click me

') div.click() this.server.respond() div.innerText.should.equal('Clicked') }) it('handles basic response properly w/ data-* prefix', function() { this.server.respondWith('GET', '/test', "Clicked

Swapped3

") var div = make('

click me

') make('

') div.click() this.server.respond() div.innerHTML.should.equal('Clicked') byId('d1').innerHTML.should.equal('Swapped3') }) it('handles outerHTML response properly', function() { this.server.respondWith('GET', '/test', "Clicked

Swapped4

") var div = make('

click me

') make('

') div.click() this.server.respond() byId('d1').getAttribute('foo').should.equal('bar') div.innerHTML.should.equal('Clicked') byId('d1').innerHTML.should.equal('Swapped4') }) it('handles innerHTML response properly', function() { this.server.respondWith('GET', '/test', "Clicked

Swapped5

") var div = make('

click me

') make('

') div.click() this.server.respond() should.equal(byId('d1').getAttribute('foo'), null) div.innerHTML.should.equal('Clicked') byId('d1').innerHTML.should.equal('Swapped5') }) it('oob swaps can be nested in content with config {"allowNestedOobSwaps": true}', function() { htmx.config.allowNestedOobSwaps = true this.server.respondWith('GET', '/test', "

Clicked

Swapped6

") var div = make('

click me

') make('

') div.click() this.server.respond() should.equal(byId('d1').getAttribute('foo'), null) div.innerHTML.should.equal('

Clicked

') byId('d1').innerHTML.should.equal('Swapped6') }) it('oob swaps in nested content are ignored and stripped with config {"allowNestedOobSwaps": false}', function() { htmx.config.allowNestedOobSwaps = false this.server.respondWith('GET', '/test', '

Clicked

Swapped6.1

') var div = make('

click me

') make('

') div.click() this.server.respond() byId('d1').innerHTML.should.equal('') div.innerHTML.should.equal('

Clicked

Swapped6.1

') }) it('oob swaps can use selectors to match up', function() { this.server.respondWith('GET', '/test', "

Clicked

Swapped7

") var div = make('

click me

') make('

') div.click() this.server.respond() should.equal(byId('d1').getAttribute('oob-foo'), 'bar') div.innerHTML.should.equal('

Clicked

') byId('d1').innerHTML.should.equal('Swapped7') }) it('swaps into all targets that match the selector (innerHTML)', function() { this.server.respondWith('GET', '/test', "

Clicked

Swapped8

") var div = make('

click me

') make('

No swap

') make('

Not swapped

') make('

Not swapped

') div.click() this.server.respond() byId('d1').innerHTML.should.equal('No swap') byId('d2').innerHTML.should.equal('Swapped8') byId('d3').innerHTML.should.equal('Swapped8') }) it('swaps into all targets that match the selector (outerHTML)', function() { var oobSwapContent = '

Swapped9

' this.server.respondWith('GET', '/test', '

Clicked

' + oobSwapContent) var div = make('

click me

') make('

No swap

') make('

Not swapped

') make('

Not swapped

') div.click() this.server.respond() byId('d1').innerHTML.should.equal('

No swap

') byId('d2').innerHTML.should.equal(oobSwapContent) byId('d3').innerHTML.should.equal(oobSwapContent) }) it('oob swap delete works properly', function() { this.server.respondWith('GET', '/test', '

') var div = make('

Foo

') div.click() this.server.respond() should.equal(byId('d1'), null) }) for (const config of [{ allowNestedOobSwaps: true }, { allowNestedOobSwaps: false }]) { it('oob swap supports table row in fragment along other oob swap elements with config ' + JSON.stringify(config), function() { Object.assign(htmx.config, config) this.server.respondWith('GET', '/test', `Clicked

Test

`) make(`

Bar

foo

Bar

`) var btn = make('') btn.click() this.server.respond() btn.innerText.should.equal('Clicked') byId('r1').innerHTML.should.equal('bar') byId('b2').innerHTML.should.equal('Another button') byId('d1').innerHTML.should.equal('Test') byId('td1').innerHTML.should.equal('hey') }) } })