itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-27 04:50:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

test cleanup and test append/prepend

Browse Source
This commit is contained in:
carson 2020-04-26 10:00:40 -07:00
parent ace0b3dd06
commit 0ed30a8e2e
2 changed files with 77 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/htmx.js
View File

@ -1,13 +1,13 @@
var HTMx = HTMx || (function()
{
// resolve with both hx and data-hx prefixes
function getAttribute(elt, qualifiedName) {
function getAttributeValue(elt, qualifiedName) {
return elt.getAttribute(qualifiedName) || elt.getAttribute("data-" + qualifiedName);
}
function getClosestAttributeValue(elt, attributeName)
{
let attribute = getAttribute(elt, attributeName);
let attribute = getAttributeValue(elt, attributeName);
if(attribute)
{
return attribute;
@ -102,7 +102,7 @@ var HTMx = HTMx || (function()
function processElement(elt) {
if(elt.getAttribute('hx-get')) {
elt.addEventListener("click", function(evt){
issueAjaxRequest(elt, getAttribute(elt, 'hx-get'));
issueAjaxRequest(elt, getAttributeValue(elt, 'hx-get'));
evt.stopPropagation();
});
}

86
test/core.html
View File

@ -46,31 +46,37 @@
});
// bootstrap test
it('issues a GET request on click and swaps content', function() {
let btn = make('<button hx-get="/test1">Click Me!</button>')
this.server.respondWith("GET", "/test1", "Clicked!");
it('issues a GET request on click and swaps content', function()
{
this.server.respondWith("GET", "/core_test1", "Clicked!");
let btn = make('<button hx-get="/core_test1">Click Me!</button>')
btn.click();
this.server.respond();
btn.innerHTML.should.equal("Clicked!");
});
it('processes inner content properly', function() {
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!");
it('processes inner content properly', function()
{
this.server.respondWith("GET", "/core_test2", '<a hx-get="/core_test2_2">Click Me</a>');
this.server.respondWith("GET", "/core_test2_2", "Clicked!");
let div = make('<div hx-get="/core_test2"></div>')
div.click();
this.server.respond();
div.innerHTML.should.equal('<a hx-get="/test2_2">Click Me</a>');
div.innerHTML.should.equal('<a hx-get="/core_test2_2">Click Me</a>');
let a = div.querySelector('a');
a.click();
this.server.respond();
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!");
it('handles swap outerHTML properly', function()
{
this.server.respondWith("GET", "/core_test3", '<a id="a-outer-html-test" hx-get="/core_test3_2">Click Me</a>');
this.server.respondWith("GET", "/core_test3_2", "Clicked!");
let div = make('<div id="div-outer-html-test" hx-get="/core_test3" hx-swap="outerHTML"></div>')
div.click();
should.equal(byId("div-outer-html-test"), div);
this.server.respond();
@ -80,11 +86,67 @@
byId("a-outer-html-test").innerHTML.should.equal('Clicked!');
});
it('handles prepend properly', function()
{
let i = 0;
this.server.respondWith("GET", "/core_test4", function(xhr){
i++;
xhr.respond(200, {}, '<a id="a-prepend-test-' + i + '" hx-get="/core_test4_2" hx-swap="innerHTML">' + i + '</a>');
});
this.server.respondWith("GET", "/core_test4_2", "*");
let div = make('<div hx-get="/core_test4" hx-swap="prepend">*</div>')
div.click();
this.server.respond();
div.innerText.should.equal("1*");
byId("a-prepend-test-1").click();
this.server.respond();
div.innerText.should.equal("**");
div.click();
this.server.respond();
div.innerText.should.equal("2**");
byId("a-prepend-test-2").click();
this.server.respond();
div.innerText.should.equal("***");
});
it('handles append properly', function()
{
let i = 0;
this.server.respondWith("GET", "/core_test5", function(xhr){
i++;
xhr.respond(200, {}, '<a id="a-append-test-' + i + '" hx-get="/core_test5_2" hx-swap="innerHTML">' + i + '</a>');
});
this.server.respondWith("GET", "/core_test5_2", "*");
let div = make('<div hx-get="/core_test5" hx-swap="append">*</div>')
div.click();
this.server.respond();
div.innerText.should.equal("*1");
byId("a-append-test-1").click();
this.server.respond();
div.innerText.should.equal("**");
div.click();
this.server.respond();
div.innerText.should.equal("**2");
byId("a-append-test-2").click();
this.server.respond();
div.innerText.should.equal("***");
});
})
</script>
<script class="mocha-exec">
mocha.run();
</script>
<em>Work Area</em>
<hr/>
</body>
</html>