htmx/test/attributes/hx-disabled-elt.js

describe("hx-disabled-elt attribute", function(){
    beforeEach(function() {
        this.server = sinon.fakeServer.create();
        clearWorkArea();
    });
    afterEach(function()  {
        this.server.restore();
        clearWorkArea();
    });

    it('single element can be disabled w/ hx-disabled elts', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var btn = make('<button hx-get="/test" hx-disabled-elt="this">Click Me!</button>')
        btn.hasAttribute('disabled').should.equal(false);
        btn.click();
        btn.hasAttribute('disabled').should.equal(true);
        this.server.respond();
        btn.hasAttribute('disabled').should.equal(false);
    });


    it('single element can be disabled w/ data-hx-disabled elts', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var btn = make('<button hx-get="/test" data-hx-disabled-elt="this">Click Me!</button>')
        btn.hasAttribute('disabled').should.equal(false);
        btn.click();
        btn.hasAttribute('disabled').should.equal(true);
        this.server.respond();
        btn.hasAttribute('disabled').should.equal(false);
    });

    it('single element can be disabled w/ closest syntax', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var fieldset = make('<fieldset><button id="b1" hx-get="/test" hx-disabled-elt="closest fieldset">Click Me!</button></fieldset>')
        var btn = byId('b1');
        fieldset.hasAttribute('disabled').should.equal(false);
        btn.click();
        fieldset.hasAttribute('disabled').should.equal(true);
        this.server.respond();
        fieldset.hasAttribute('disabled').should.equal(false);
    });

    it('multiple requests with same disabled elt are handled properly', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var b1 = make('<button hx-get="/test" hx-disabled-elt="#b3">Click Me!</button>')
        var b2 = make('<button hx-get="/test" hx-disabled-elt="#b3">Click Me!</button>')
        var b3 = make('<button id="b3">Demo</button>')
        b3.hasAttribute('disabled').should.equal(false);

        b1.click();
        b3.hasAttribute('disabled').should.equal(true);

        b2.click();
        b3.hasAttribute('disabled').should.equal(true);


        // hack to make sinon process only one response
        this.server.processRequest(this.server.queue.shift());

        b3.hasAttribute('disabled').should.equal(true);

        this.server.respond();

        b3.hasAttribute('disabled').should.equal(false);

    });

    it('multiple elts can be disabled', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var b1 = make('<button hx-get="/test" hx-disabled-elt="#b2, #b3">Click Me!</button>')
        var b2 = make('<button id="b2">Click Me!</button>')
        var b3 = make('<button id="b3">Demo</button>')

        b2.hasAttribute('disabled').should.equal(false);
        b3.hasAttribute('disabled').should.equal(false);

        b1.click();
        b2.hasAttribute('disabled').should.equal(true);
        b3.hasAttribute('disabled').should.equal(true);

        this.server.respond();

        b2.hasAttribute('disabled').should.equal(false);
        b3.hasAttribute('disabled').should.equal(false);

    });


})