itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-02 15:25:26 +00:00
Code Issues Packages Projects Releases Wiki Activity
htmx/www/static/test/attributes/hx-sync.js
Alexander Petros d1288d202a
Remove old tests from the website (#1733) 
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.
2023-09-19 11:07:24 -05:00

225 lines
7.7 KiB
JavaScript
Raw Blame History

describe("hx-sync attribute", function(){
beforeEach(function() {
this.server = makeServer();
clearWorkArea();
});
afterEach(function() {
this.server.restore();
clearWorkArea();
});
it('can use drop strategy', function()
{
var count = 0;
this.server.respondWith("GET", "/test", function(xhr){
xhr.respond(200, {}, "Click " + count++);
});
make('<div hx-sync="this:drop"><button id="b1" hx-get="/test">Initial</button>' +
' <button id="b2" hx-get="/test">Initial</button></div>')
var b1 = byId("b1");
var b2 = byId("b2");
b1.click();
b2.click();
this.server.respond();
this.server.respond();
b1.innerHTML.should.equal('Click 0');
b2.innerHTML.should.equal('Initial');
});
it('defaults to the drop strategy', function()
{
var count = 0;
this.server.respondWith("GET", "/test", function(xhr){
xhr.respond(200, {}, "Click " + count++);
});
make('<div hx-sync="this"><button id="b1" hx-get="/test">Initial</button>' +
' <button id="b2" hx-get="/test">Initial</button></div>')
var b1 = byId("b1");
var b2 = byId("b2");
b1.click();
b2.click();
this.server.respond();
this.server.respond();
b1.innerHTML.should.equal('Click 0');
b2.innerHTML.should.equal('Initial');
});
it('can use replace strategy', function()
{
var count = 0;
this.server.respondWith("GET", "/test", function(xhr){
xhr.respond(200, {}, "Click " + count++);
});
make('<div hx-sync="this:replace"><button id="b1" hx-get="/test">Initial</button>' +
' <button id="b2" hx-get="/test">Initial</button></div>')
var b1 = byId("b1");
var b2 = byId("b2");
b1.click();
b2.click();
this.server.respond();
this.server.respond();
b1.innerHTML.should.equal('Initial');
b2.innerHTML.should.equal('Click 0');
});
it('can use queue all strategy', function()
{
var count = 0;
this.server.respondWith("GET", "/test", function(xhr){
xhr.respond(200, {}, "Click " + count++);
});
make('<div hx-sync="this:queue all"><button id="b1" hx-get="/test">Initial</button>' +
' <button id="b2" hx-get="/test">Initial</button>' +
' <button id="b3" hx-get="/test">Initial</button></div>')
var b1 = byId("b1");
b1.click();
var b2 = byId("b2");
b2.click();
var b3 = byId("b3");
b3.click();
this.server.respond();
b1.innerHTML.should.equal('Click 0');
b2.innerHTML.should.equal('Initial');
b3.innerHTML.should.equal('Initial');
this.server.respond();
b1.innerHTML.should.equal('Click 0');
b2.innerHTML.should.equal('Click 1');
b3.innerHTML.should.equal('Initial');
this.server.respond();
b1.innerHTML.should.equal('Click 0');
b2.innerHTML.should.equal('Click 1');
b3.innerHTML.should.equal('Click 2');
});
it('can use queue last strategy', function()
{
var count = 0;
this.server.respondWith("GET", "/test", function(xhr){
xhr.respond(200, {}, "Click " + count++);
});
make('<div hx-sync="this:queue last"><button id="b1" hx-get="/test">Initial</button>' +
' <button id="b2" hx-get="/test">Initial</button>' +
' <button id="b3" hx-get="/test">Initial</button></div>')
var b1 = byId("b1");
b1.click();
var b2 = byId("b2");
b2.click();
var b3 = byId("b3");
b3.click();
this.server.respond();
b1.innerHTML.should.equal('Click 0');
b2.innerHTML.should.equal('Initial');
b3.innerHTML.should.equal('Initial');
this.server.respond();
b1.innerHTML.should.equal('Click 0');
b2.innerHTML.should.equal('Initial');
b3.innerHTML.should.equal('Click 1');
this.server.respond();
b1.innerHTML.should.equal('Click 0');
b2.innerHTML.should.equal('Initial');
b3.innerHTML.should.equal('Click 1');
});
it('can use queue first strategy', function()
{
var count = 0;
this.server.respondWith("GET", "/test", function(xhr){
xhr.respond(200, {}, "Click " + count++);
});
make('<div hx-sync="this:queue first"><button id="b1" hx-get="/test">Initial</button>' +
' <button id="b2" hx-get="/test">Initial</button>' +
' <button id="b3" hx-get="/test">Initial</button></div>')
var b1 = byId("b1");
b1.click();
var b2 = byId("b2");
b2.click();
var b3 = byId("b3");
b3.click();
this.server.respond();
b1.innerHTML.should.equal('Click 0');
b2.innerHTML.should.equal('Initial');
b3.innerHTML.should.equal('Initial');
this.server.respond();
b1.innerHTML.should.equal('Click 0');
b2.innerHTML.should.equal('Click 1');
b3.innerHTML.should.equal('Initial');
this.server.respond();
b1.innerHTML.should.equal('Click 0');
b2.innerHTML.should.equal('Click 1');
b3.innerHTML.should.equal('Initial');
});
it('can use abort strategy to end existing abortable request', function()
{
var count = 0;
this.server.respondWith("GET", "/test", function(xhr){
xhr.respond(200, {}, "Click " + count++);
});
make('<div hx-sync="this"><button hx-sync="closest div:abort" id="b1" hx-get="/test">Initial</button>' +
' <button id="b2" hx-get="/test">Initial</button></div>')
var b1 = byId("b1");
var b2 = byId("b2");
b1.click();
b2.click();
this.server.respond();
this.server.respond();
b1.innerHTML.should.equal('Initial');
b2.innerHTML.should.equal('Click 0');
});
it('can use abort strategy to drop abortable request when one is in flight', function()
{
var count = 0;
this.server.respondWith("GET", "/test", function(xhr){
xhr.respond(200, {}, "Click " + count++);
});
make('<div hx-sync="this"><button hx-sync="closest div:abort" id="b1" hx-get="/test">Initial</button>' +
' <button id="b2" hx-get="/test">Initial</button></div>')
var b1 = byId("b1");
var b2 = byId("b2");
b2.click();
b1.click();
this.server.respond();
this.server.respond();
b1.innerHTML.should.equal('Initial');
b2.innerHTML.should.equal('Click 0');
});
it('can abort a request programmatically', function()
{
var count = 0;
this.server.respondWith("GET", "/test", function(xhr){
xhr.respond(200, {}, "Click " + count++);
});
make('<div><button id="b1" hx-get="/test">Initial</button>' +
' <button id="b2" hx-get="/test">Initial</button></div>')
var b1 = byId("b1");
var b2 = byId("b2");
b1.click();
b2.click();
htmx.trigger(b1, "htmx:abort");
this.server.respond();
this.server.respond();
b1.innerHTML.should.equal('Initial');
b2.innerHTML.should.equal('Click 0');
});
})
Reference in New Issue View Git Blame Copy Permalink