describe('default extensions behavior', function() { var loadCalls, afterSwapCalls, afterSettleCalls beforeEach(function() { loadCalls = [] this.server = makeServer() clearWorkArea() htmx.defineExtension('ext-testswap', { onEvent: function(name, evt) { if (name === 'htmx:load') { loadCalls.push(evt.detail.elt) } }, handleSwap: function(swapStyle, target, fragment, settleInfo) { // simple outerHTML replacement for tests var parentEl = target.parentElement parentEl.removeChild(target) const arr = [] for (const child of fragment.childNodes) { arr.push(parentEl.appendChild(child)) } return arr // return the newly added elements } }) }) afterEach(function() { this.server.restore() clearWorkArea() htmx.removeExtension('ext-testswap') }) it('handleSwap: afterSwap and afterSettle triggered if extension defined on parent', function() { this.server.respondWith('GET', '/test', '') var div = make('
') var btn = div.firstChild btn.click() this.server.respond() loadCalls.length.should.equal(1) loadCalls[0].textContent.should.equal('Clicked!') // the new button is loaded }) it('handleSwap: new content is handled by htmx', function() { this.server.respondWith('GET', '/test', '') this.server.respondWith('GET', '/test-inner', 'Loaded!') make('
').querySelector('button').click() this.server.respond() // call /test via button trigger=click var btn = byId('test-ext-testswap') btn.textContent.should.equal('Clicked!') loadCalls.length.should.equal(1) loadCalls[0].textContent.should.equal('Clicked!') // the new button is loaded this.server.respond() // call /test-inner via span trigger=load btn.textContent.should.equal('Clicked!Loaded!') loadCalls.length.should.equal(1) // text should not trigger event }) })