htmx/test/attributes/hx-indicator.js

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

    it('Indicator classes are properly put on element with no explicit indicator', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var btn = make('<button hx-get="/test">Click Me!</button>')
        btn.click();
        btn.classList.contains("htmx-request").should.equal(true);
        this.server.respond();
        btn.classList.contains("htmx-request").should.equal(false);
    });

    it('Indicator classes are properly put on element with explicit indicator', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var btn = make('<button hx-get="/test" hx-indicator="#a1, #a2">Click Me!</button>')
        var a1 = make('<a id="a1"></a>')
        var a2 = make('<a id="a2"></a>')
        btn.click();
        btn.classList.contains("htmx-request").should.equal(false);
        a1.classList.contains("htmx-request").should.equal(true);
        a2.classList.contains("htmx-request").should.equal(true);
        this.server.respond();
        btn.classList.contains("htmx-request").should.equal(false);
        a1.classList.contains("htmx-request").should.equal(false);
        a2.classList.contains("htmx-request").should.equal(false);
    });

    it('Indicator classes are properly put on element with relative indicator', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var btn = make('<button hx-get="/test" hx-indicator="next a">Click Me!</button>')
        var a1 = make('<a id="a1"></a>')
        btn.click();
        btn.classList.contains("htmx-request").should.equal(false);
        a1.classList.contains("htmx-request").should.equal(true);
        this.server.respond();
        btn.classList.contains("htmx-request").should.equal(false);
        a1.classList.contains("htmx-request").should.equal(false);
    });

    it('Indicator classes are properly put on element with explicit indicator w/ data-* prefix', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var btn = make('<button hx-get="/test" data-hx-indicator="#a1, #a2">Click Me!</button>')
        var a1 = make('<a id="a1"></a>')
        var a2 = make('<a id="a2"></a>')
        btn.click();
        btn.classList.contains("htmx-request").should.equal(false);
        a1.classList.contains("htmx-request").should.equal(true);
        a2.classList.contains("htmx-request").should.equal(true);
        this.server.respond();
        btn.classList.contains("htmx-request").should.equal(false);
        a1.classList.contains("htmx-request").should.equal(false);
        a2.classList.contains("htmx-request").should.equal(false);
    });

    it('allows closest syntax in hx-indicator', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var div = make('<div id="d1"><button id="b1" hx-get="/test" hx-indicator="closest div">Click Me!</button></div>')
        var btn = byId("b1");
        btn.click();
        btn.classList.contains("htmx-request").should.equal(false);
        div.classList.contains("htmx-request").should.equal(true);
        this.server.respond();
        btn.classList.contains("htmx-request").should.equal(false);
        div.classList.contains("htmx-request").should.equal(false);
    });

    it('is removed when initiating element is removed from the DOM', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var indicator = make('<div id="ind1">Indicator</div>')
        var div = make('<div id="d1" hx-target="this" hx-indicator="#ind1"><button id="b1" hx-get="/test">Click Me!</button></div>')
        var btn = byId("b1");
        btn.click();
        indicator.classList.contains("htmx-request").should.equal(true);
        this.server.respond();
        indicator.classList.contains("htmx-request").should.equal(false);
    });

    it('allows this syntax in hx-indicator', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var div = make('<div id="d1" hx-indicator="this"><button id="b1" hx-get="/test">Click Me!</button></div>')
        var btn = byId("b1");
        btn.click();
        btn.classList.contains("htmx-request").should.equal(false);
        div.classList.contains("htmx-request").should.equal(true);
        this.server.respond();
        btn.classList.contains("htmx-request").should.equal(false);
        div.classList.contains("htmx-request").should.equal(false);
    });

    it('multiple requests with same indicator are handled properly', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var b1 = make('<button hx-get="/test" hx-indicator=".a1">Click Me!</button>')
        var b2 = make('<button hx-get="/test" hx-indicator=".a1">Click Me!</button>')
        var a1 = make('<a class="a1"></a>')

        b1.click();
        b1.classList.contains("htmx-request").should.equal(false);
        b2.classList.contains("htmx-request").should.equal(false);
        a1.classList.contains("htmx-request").should.equal(true);

        b2.click();
        b1.classList.contains("htmx-request").should.equal(false);
        b2.classList.contains("htmx-request").should.equal(false);
        a1.classList.contains("htmx-request").should.equal(true);

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

        b1.classList.contains("htmx-request").should.equal(false);
        b2.classList.contains("htmx-request").should.equal(false);
        a1.classList.contains("htmx-request").should.equal(true);

        this.server.respond();

        b1.classList.contains("htmx-request").should.equal(false);
        b2.classList.contains("htmx-request").should.equal(false);
        a1.classList.contains("htmx-request").should.equal(false);

    });


})