itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2026-04-19 05:16:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

make tests fully javascript based rather than split between HTML and the test

Browse Source
This commit is contained in:
carson
2020-04-25 19:56:44 -07:00
parent e3265da10f
commit ace0b3dd06
4 changed files with 54 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
test/core.html
View File

@@ -15,7 +15,7 @@
<script class="mocha-init">
mocha.setup('bdd');
mocha.checkLeaks();
chai.should();
should = chai.should();
</script>
<script>
@@ -23,6 +23,17 @@
function byId(id) {
return document.getElementById(id);
}
function make(htmlStr) {
let range = document.createRange();
let fragment = range.createContextualFragment(htmlStr);
for (let i = fragment.children.length - 1; i >= 0; i--) {
const child = fragment.children[i];
HTMx.processElement(child);
document.body.appendChild(child);
}
return document.body.lastChild;
}
</script>
<script>
@@ -36,31 +47,42 @@
// bootstrap test
it('issues a GET request on click and swaps content', function() {
this.server.respondWith("GET", "/btn-1", "Clicked!");
byId("btn-1").click();
let btn = make('<button hx-get="/test1">Click Me!</button>')
this.server.respondWith("GET", "/test1", "Clicked!");
btn.click();
this.server.respond();
byId("btn-1").innerHTML.should.equal("Clicked!");
btn.innerHTML.should.equal("Clicked!");
});
it('processes inner content properly', function() {
this.server.respondWith("GET", "/div-1", '<a id="a-1" hx-get="/a-1">Click Me</a>');
this.server.respondWith("GET", "/a-1", "Clicked!");
byId("div-1").click();
let div = make('<div hx-get="/test2"></div>')
this.server.respondWith("GET", "/test2", '<a hx-get="/test2_2">Click Me</a>');
this.server.respondWith("GET", "/test2_2", "Clicked!");
div.click();
this.server.respond();
byId("div-1").innerHTML.should.equal('<a id="a-1" hx-get="/a-1">Click Me</a>');
byId("a-1").click();
div.innerHTML.should.equal('<a hx-get="/test2_2">Click Me</a>');
let a = div.querySelector('a');
a.click();
this.server.respond();
byId("a-1").innerHTML.should.equal('Clicked!');
a.innerHTML.should.equal('Clicked!');
});
it('handles swap outerHTML properly', function() {
let div = make('<div id="div-outer-html-test" hx-get="/test3" hx-swap="outerHTML"></div>')
this.server.respondWith("GET", "/test3", '<a id="a-outer-html-test" hx-get="/test3_2">Click Me</a>');
this.server.respondWith("GET", "/test3_2", "Clicked!");
div.click();
should.equal(byId("div-outer-html-test"), div);
this.server.respond();
should.equal(byId("div-outer-html-test"), null);
byId("a-outer-html-test").click();
this.server.respond();
byId("a-outer-html-test").innerHTML.should.equal('Clicked!');
});
})
</script>
<button id="btn-1" hx-get="/btn-1">Click Me!</button>
<div id="div-1" hx-get="/div-1"></div>
<script class="mocha-exec">
mocha.run();
</script>