mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-29 14:04:22 +00:00
289 lines
9.0 KiB
HTML
289 lines
9.0 KiB
HTML
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Mocha Tests</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
|
|
</head>
|
|
<body>
|
|
<div id="mocha"></div>
|
|
<script src="../node_modules/chai/chai.js"></script>
|
|
<script src="../node_modules/mocha/mocha.js"></script>
|
|
<script src="../node_modules/sinon/pkg/sinon.js"></script>
|
|
<script src="../src/htmx.js"></script>
|
|
<script class="mocha-init">
|
|
mocha.setup('bdd');
|
|
mocha.checkLeaks();
|
|
should = chai.should();
|
|
</script>
|
|
|
|
<script>
|
|
/* Utilities */
|
|
function byId(id) {
|
|
return document.getElementById(id);
|
|
}
|
|
|
|
function make(htmlStr) {
|
|
let range = document.createRange();
|
|
let fragment = range.createContextualFragment(htmlStr);
|
|
let wa = getWorkArea();
|
|
for (let i = fragment.children.length - 1; i >= 0; i--) {
|
|
const child = fragment.children[i];
|
|
HTMx.processElement(child);
|
|
wa.appendChild(child);
|
|
}
|
|
return wa.lastChild;
|
|
}
|
|
|
|
function getWorkArea() {
|
|
return byId("work-area");
|
|
}
|
|
|
|
function clearWorkArea() {
|
|
getWorkArea().innerHTML = "";
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
describe("Core HTMx Tests", function(){
|
|
beforeEach(function() {
|
|
this.server = sinon.fakeServer.create();
|
|
clearWorkArea();
|
|
});
|
|
afterEach(function() {
|
|
this.server.restore();
|
|
clearWorkArea();
|
|
});
|
|
|
|
// bootstrap test
|
|
it('issues a GET request on click and swaps content', function()
|
|
{
|
|
this.server.respondWith("GET", "/test", "Clicked!");
|
|
|
|
let btn = make('<button hx-get="/test">Click Me!</button>')
|
|
btn.click();
|
|
this.server.respond();
|
|
btn.innerHTML.should.equal("Clicked!");
|
|
});
|
|
|
|
it('processes inner content properly', function()
|
|
{
|
|
this.server.respondWith("GET", "/test", '<a hx-get="/test2">Click Me</a>');
|
|
this.server.respondWith("GET", "/test2", "Clicked!");
|
|
|
|
let div = make('<div hx-get="/test"></div>')
|
|
div.click();
|
|
this.server.respond();
|
|
div.innerHTML.should.equal('<a hx-get="/test2">Click Me</a>');
|
|
let a = div.querySelector('a');
|
|
a.click();
|
|
this.server.respond();
|
|
a.innerHTML.should.equal('Clicked!');
|
|
});
|
|
|
|
it('handles swap outerHTML properly', function()
|
|
{
|
|
this.server.respondWith("GET", "/test", '<a id="a1" hx-get="/test2">Click Me</a>');
|
|
this.server.respondWith("GET", "/test2", "Clicked!");
|
|
|
|
let div = make('<div id="d1" hx-get="/test" hx-swap="outerHTML"></div>')
|
|
div.click();
|
|
should.equal(byId("d1"), div);
|
|
this.server.respond();
|
|
should.equal(byId("d1"), null);
|
|
byId("a1").click();
|
|
this.server.respond();
|
|
byId("a1").innerHTML.should.equal('Clicked!');
|
|
});
|
|
|
|
it('handles prepend properly', function()
|
|
{
|
|
let i = 0;
|
|
this.server.respondWith("GET", "/test", function(xhr){
|
|
i++;
|
|
xhr.respond(200, {}, '<a id="a' + i + '" hx-get="/test2" hx-swap="innerHTML">' + i + '</a>');
|
|
});
|
|
this.server.respondWith("GET", "/test2", "*");
|
|
|
|
let div = make('<div hx-get="/test" hx-swap="prepend">*</div>')
|
|
div.click();
|
|
this.server.respond();
|
|
div.innerText.should.equal("1*");
|
|
|
|
byId("a1").click();
|
|
this.server.respond();
|
|
div.innerText.should.equal("**");
|
|
|
|
div.click();
|
|
this.server.respond();
|
|
div.innerText.should.equal("2**");
|
|
|
|
byId("a2").click();
|
|
this.server.respond();
|
|
div.innerText.should.equal("***");
|
|
});
|
|
|
|
it('handles prepend properly with no initial content', function()
|
|
{
|
|
let i = 0;
|
|
this.server.respondWith("GET", "/test", function(xhr){
|
|
i++;
|
|
xhr.respond(200, {}, '<a id="a' + i + '" hx-get="/test2" hx-swap="innerHTML">' + i + '</a>');
|
|
});
|
|
this.server.respondWith("GET", "/test2", "*");
|
|
|
|
let div = make('<div hx-get="/test" hx-swap="prepend"></div>')
|
|
div.click();
|
|
this.server.respond();
|
|
div.innerText.should.equal("1");
|
|
|
|
byId("a1").click();
|
|
this.server.respond();
|
|
div.innerText.should.equal("*");
|
|
|
|
div.click();
|
|
this.server.respond();
|
|
div.innerText.should.equal("2*");
|
|
|
|
byId("a2").click();
|
|
this.server.respond();
|
|
div.innerText.should.equal("**");
|
|
});
|
|
|
|
it('handles append properly', function()
|
|
{
|
|
let i = 0;
|
|
this.server.respondWith("GET", "/test", function(xhr){
|
|
i++;
|
|
xhr.respond(200, {}, '<a id="a' + i + '" hx-get="/test2" hx-swap="innerHTML">' + i + '</a>');
|
|
});
|
|
this.server.respondWith("GET", "/test2", "*");
|
|
|
|
let div = make('<div hx-get="/test" hx-swap="append">*</div>')
|
|
div.click();
|
|
this.server.respond();
|
|
div.innerText.should.equal("*1");
|
|
|
|
byId("a1").click();
|
|
this.server.respond();
|
|
div.innerText.should.equal("**");
|
|
|
|
div.click();
|
|
this.server.respond();
|
|
div.innerText.should.equal("**2");
|
|
|
|
byId("a2").click();
|
|
this.server.respond();
|
|
div.innerText.should.equal("***");
|
|
});
|
|
|
|
it('handles append properly with no initial content', function()
|
|
{
|
|
let i = 0;
|
|
this.server.respondWith("GET", "/test", function(xhr){
|
|
i++;
|
|
console.log(xhr);
|
|
xhr.respond(200, {}, '<a id="a' + i + '" hx-get="/test2" hx-swap="innerHTML">' + i + '</a>');
|
|
});
|
|
this.server.respondWith("GET", "/test2", "*");
|
|
|
|
let div = make('<div hx-get="/test" hx-swap="append"></div>')
|
|
div.click();
|
|
this.server.respond();
|
|
div.innerText.should.equal("1");
|
|
|
|
byId("a1").click();
|
|
this.server.respond();
|
|
div.innerText.should.equal("*");
|
|
|
|
div.click();
|
|
this.server.respond();
|
|
div.innerText.should.equal("*2");
|
|
|
|
byId("a2").click();
|
|
this.server.respond();
|
|
div.innerText.should.equal("**");
|
|
});
|
|
|
|
it('handles hx-target properly', function()
|
|
{
|
|
this.server.respondWith("GET", "/test", "Clicked!");
|
|
|
|
let btn = make('<button hx-get="/test" hx-target="#s1">Click Me!</button>');
|
|
let target = make('<span id="s1">Initial</span>');
|
|
btn.click();
|
|
target.innerHTML.should.equal("Initial");
|
|
this.server.respond();
|
|
target.innerHTML.should.equal("Clicked!");
|
|
});
|
|
|
|
it('handles 204 NO CONTENT responses properly', function()
|
|
{
|
|
this.server.respondWith("GET", "/test", [204, {}, "No Content!"]);
|
|
|
|
let btn = make('<button hx-get="/test">Click Me!</button>');
|
|
btn.click();
|
|
btn.innerHTML.should.equal("Click Me!");
|
|
this.server.respond();
|
|
btn.innerHTML.should.equal("Click Me!");
|
|
});
|
|
|
|
it('handles hx-trigger with non-default value', function()
|
|
{
|
|
this.server.respondWith("GET", "/test", "Focused!");
|
|
|
|
let btn = make('<button hx-get="/test" hx-trigger="focus">Focus Me!</button>');
|
|
btn.focus();
|
|
btn.innerHTML.should.equal("Focus Me!");
|
|
this.server.respond();
|
|
btn.innerHTML.should.equal("Focused!");
|
|
});
|
|
|
|
it('handles hx-trigger with load event', function()
|
|
{
|
|
this.server.respondWith("GET", "/test", "Loaded!");
|
|
|
|
let div = make('<div hx-get="/test" hx-trigger="load">Load Me!</div>');
|
|
div.innerHTML.should.equal("Load Me!");
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Loaded!");
|
|
});
|
|
|
|
})
|
|
|
|
describe("HTMx class modification attributes", function(){
|
|
beforeEach(function() {
|
|
this.server = sinon.fakeServer.create();
|
|
clearWorkArea();
|
|
});
|
|
afterEach(function() {
|
|
this.server.restore();
|
|
clearWorkArea();
|
|
});
|
|
|
|
// bootstrap test
|
|
it('add classes properly', function(done)
|
|
{
|
|
let div = make('<div hx-add-class="c1">Click Me!</div>')
|
|
should.equal(div.classList.length, 0);
|
|
setTimeout(function(){
|
|
should.equal(div.classList.contains("c1"), true);
|
|
done();
|
|
}, 100);
|
|
});
|
|
|
|
|
|
})
|
|
</script>
|
|
|
|
<script class="mocha-exec">
|
|
mocha.run();
|
|
</script>
|
|
<em>Work Area</em>
|
|
<hr/>
|
|
<div id="work-area">
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|