mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-10-02 07:21:05 +00:00
d1288d202a
The website used to host every past test suite, copied into the www directory. We no longer need that on the website (and it makes the codebase impossible to search) so I removed all the old tests and the new tests are hosted simply at /test. I also replaced the www.js script with a simpler www.sh one (since we no longer need to do anything besides copying, really), which allowed me to remove a node dependency that was only used in that script.
174 lines
7.9 KiB
JavaScript
174 lines
7.9 KiB
JavaScript
describe("path-deps extension", function() {
|
|
beforeEach(function () {
|
|
this.server = makeServer();
|
|
clearWorkArea();
|
|
});
|
|
afterEach(function () {
|
|
this.server.restore();
|
|
clearWorkArea();
|
|
});
|
|
|
|
it('path-deps basic case works', function () {
|
|
this.server.respondWith("POST", "/test", "Clicked!");
|
|
this.server.respondWith("GET", "/test2", "Deps fired!");
|
|
var btn = make('<button hx-post="/test" hx-ext="path-deps">Click Me!</button>')
|
|
var div = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/test">FOO</div>')
|
|
btn.click();
|
|
this.server.respond();
|
|
btn.innerHTML.should.equal("Clicked!");
|
|
div.innerHTML.should.equal("FOO");
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Deps fired!");
|
|
});
|
|
|
|
it('path-deps works with trailing slash', function () {
|
|
this.server.respondWith("POST", "/test", "Clicked!");
|
|
this.server.respondWith("GET", "/test2", "Deps fired!");
|
|
var btn = make('<button hx-post="/test" hx-ext="path-deps">Click Me!</button>')
|
|
var div = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/test/">FOO</div>')
|
|
btn.click();
|
|
this.server.respond();
|
|
btn.innerHTML.should.equal("Clicked!");
|
|
div.innerHTML.should.equal("FOO");
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Deps fired!");
|
|
});
|
|
|
|
it('path-deps GET does not trigger', function () {
|
|
this.server.respondWith("GET", "/test", "Clicked!");
|
|
this.server.respondWith("GET", "/test2", "Deps fired!");
|
|
var btn = make('<button hx-get="/test" hx-ext="path-deps">Click Me!</button>')
|
|
var div = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/test">FOO</div>')
|
|
btn.click();
|
|
this.server.respond();
|
|
btn.innerHTML.should.equal("Clicked!");
|
|
div.innerHTML.should.equal("FOO");
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("FOO");
|
|
});
|
|
|
|
it('path-deps dont trigger on path mismatch', function () {
|
|
this.server.respondWith("POST", "/test", "Clicked!");
|
|
this.server.respondWith("GET", "/test2", "Deps fired!");
|
|
var btn = make('<button hx-post="/test" hx-ext="path-deps">Click Me!</button>')
|
|
var div = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/test2">FOO</div>')
|
|
btn.click();
|
|
this.server.respond();
|
|
btn.innerHTML.should.equal("Clicked!");
|
|
div.innerHTML.should.equal("FOO");
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("FOO");
|
|
});
|
|
|
|
it('path-deps dont trigger on path longer than request', function () {
|
|
this.server.respondWith("POST", "/test", "Clicked!");
|
|
this.server.respondWith("GET", "/test2", "Deps fired!");
|
|
var btn = make('<button hx-post="/test" hx-ext="path-deps">Click Me!</button>')
|
|
var div = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/test/child">FOO</div>')
|
|
btn.click();
|
|
this.server.respond();
|
|
btn.innerHTML.should.equal("Clicked!");
|
|
div.innerHTML.should.equal("FOO");
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("FOO");
|
|
});
|
|
|
|
it('path-deps trigger on path shorter than request', function () {
|
|
this.server.respondWith("POST", "/test/child", "Clicked!");
|
|
this.server.respondWith("GET", "/test2", "Deps fired!");
|
|
var btn = make('<button hx-post="/test/child" hx-ext="path-deps">Click Me!</button>')
|
|
var div = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/test">FOO</div>')
|
|
btn.click();
|
|
this.server.respond();
|
|
btn.innerHTML.should.equal("Clicked!");
|
|
div.innerHTML.should.equal("FOO");
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Deps fired!");
|
|
});
|
|
|
|
it('path-deps trigger on *-at-start path', function () {
|
|
this.server.respondWith("POST", "/test/child/test", "Clicked!");
|
|
this.server.respondWith("GET", "/test2", "Deps fired!");
|
|
var btn = make('<button hx-post="/test/child/test" hx-ext="path-deps">Click Me!</button>')
|
|
var div = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/*/child/test">FOO</div>')
|
|
btn.click();
|
|
this.server.respond();
|
|
btn.innerHTML.should.equal("Clicked!");
|
|
div.innerHTML.should.equal("FOO");
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Deps fired!");
|
|
});
|
|
|
|
it('path-deps trigger on *-in-middle path', function () {
|
|
this.server.respondWith("POST", "/test/child/test", "Clicked!");
|
|
this.server.respondWith("GET", "/test2", "Deps fired!");
|
|
var btn = make('<button hx-post="/test/child/test" hx-ext="path-deps">Click Me!</button>')
|
|
var div = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/test/*/test">FOO</div>')
|
|
btn.click();
|
|
this.server.respond();
|
|
btn.innerHTML.should.equal("Clicked!");
|
|
div.innerHTML.should.equal("FOO");
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Deps fired!");
|
|
});
|
|
|
|
it('path-deps trigger on *-at-end path', function () {
|
|
this.server.respondWith("POST", "/test/child/test", "Clicked!");
|
|
this.server.respondWith("GET", "/test2", "Deps fired!");
|
|
var btn = make('<button hx-post="/test/child/test" hx-ext="path-deps">Click Me!</button>')
|
|
var div = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/test/child/*">FOO</div>')
|
|
btn.click();
|
|
this.server.respond();
|
|
btn.innerHTML.should.equal("Clicked!");
|
|
div.innerHTML.should.equal("FOO");
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Deps fired!");
|
|
});
|
|
|
|
it('path-deps trigger all *s path', function () {
|
|
this.server.respondWith("POST", "/test/child/test", "Clicked!");
|
|
this.server.respondWith("GET", "/test2", "Deps fired!");
|
|
var btn = make('<button hx-post="/test/child/test" hx-ext="path-deps">Click Me!</button>')
|
|
var div = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/*/*/*">FOO</div>')
|
|
btn.click();
|
|
this.server.respond();
|
|
btn.innerHTML.should.equal("Clicked!");
|
|
div.innerHTML.should.equal("FOO");
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Deps fired!");
|
|
});
|
|
|
|
it('path-deps api basic refresh case works', function () {
|
|
this.server.respondWith("GET", "/test", "Path deps fired!");
|
|
var div = make('<div hx-get="/test" hx-trigger="path-deps" path-deps="/test">FOO</div>')
|
|
PathDeps.refresh("/test");
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Path deps fired!");
|
|
});
|
|
|
|
it('path-deps api parent path case works', function () {
|
|
this.server.respondWith("GET", "/test1", "Path deps 1 fired!");
|
|
this.server.respondWith("GET", "/test2", "Path deps 2 fired!");
|
|
var div = make('<div hx-get="/test1" hx-trigger="path-deps" path-deps="/test/child">FOO</div>')
|
|
var div2 = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/test">BAR</div>')
|
|
PathDeps.refresh("/test/child");
|
|
this.server.respond();
|
|
div.innerHTML.should.equal("Path deps 1 fired!");
|
|
this.server.respond();
|
|
div2.innerHTML.should.equal("Path deps 2 fired!");
|
|
});
|
|
|
|
it('path-deps replacing containing element fires event', function () {
|
|
this.server.respondWith("POST", "/test", "Clicked!");
|
|
this.server.respondWith("GET", "/test2", "Deps fired!");
|
|
var div1 = make('<div><button id="buttonSubmit" hx-post="/test" hx-swap="outerHTML" hx-ext="path-deps" >Click Me!</button></div>')
|
|
var div2 = make('<div hx-get="/test2" hx-trigger="path-deps" path-deps="/test">FOO</div>')
|
|
byId("buttonSubmit").click();
|
|
this.server.respond();
|
|
div1.innerHTML.should.equal('Clicked!');
|
|
div2.innerHTML.should.equal("FOO");
|
|
this.server.respond();
|
|
div2.innerHTML.should.equal("Deps fired!");
|
|
});
|
|
});
|