mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-10-02 07:21:05 +00:00
0b9448e727
Before this commit, the content that were swapped by an extension via `handleSwap` was not handled by htmx: elemtents with `hx-` attributes, scripts, no `load.htmx` event... With this commit, if the `handleSwap` command returns an array of newly added elements (only the first level), then they will be handled by htmx like it's done for internal swap. To not break existing extensions, `handleSwap` can still return `true` to tell that the swap was handled, assuming than there is no new elements to handle. A new test was added with a button that, when clicked, loads a text and a span with `hx-trigger=load`, both handled by an extension. This commit allows this span to be loaded. The return of the `morphdom-swap` extension was updated to return the target element, even if unchanged, to let htmx check in the maybe new content that there is something new to handle. This is tested in a new test.
32 lines
1.3 KiB
JavaScript
32 lines
1.3 KiB
JavaScript
describe("morphdom-swap extension", function() {
|
|
beforeEach(function () {
|
|
this.server = makeServer();
|
|
clearWorkArea();
|
|
});
|
|
afterEach(function () {
|
|
this.server.restore();
|
|
clearWorkArea();
|
|
});
|
|
|
|
it('works on basic request', function () {
|
|
this.server.respondWith("GET", "/test", "<button>Clicked!</button>!");
|
|
var btn = make('<button hx-get="/test" hx-ext="morphdom-swap" hx-swap="morphdom" >Click Me!</button>')
|
|
btn.click();
|
|
should.equal(btn.getAttribute("hx-get"), "/test");
|
|
this.server.respond();
|
|
should.equal(btn.getAttribute("hx-get"), null);
|
|
btn.innerHTML.should.equal("Clicked!");
|
|
});
|
|
|
|
it('works with htmx elements in new content', function () {
|
|
this.server.respondWith("GET", "/test", '<button>Clicked!<span hx-get="/test-inner" hx-trigger="load" hx-swap="morphdom"></span></button>');
|
|
this.server.respondWith("GET", "/test-inner", 'Loaded!');
|
|
var btn = make('<div hx-ext="morphdom-swap"><button hx-get="/test" hx-swap="morphdom">Click Me!</button></div>').querySelector('button');
|
|
btn.click();
|
|
this.server.respond(); // call /test via button trigger=click
|
|
this.server.respond(); // call /test-inner via span trigger=load
|
|
btn.innerHTML.should.equal("Clicked!Loaded!");
|
|
});
|
|
|
|
});
|