htmx/test/attributes/hx-target.js

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

    it('targets an adjacent element properly', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var btn = make('<button hx-target="#d1" hx-get="/test">Click Me!</button>')
        var div1 = make('<div id="d1"></div>')
        btn.click();
        this.server.respond();
        div1.innerHTML.should.equal("Clicked!");
    });

    it('targets a parent element properly', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var div1 = make('<div id="d1"><button id="b1" hx-target="#d1" hx-get="/test">Click Me!</button></div>')
        var btn = byId("b1")
        btn.click();
        this.server.respond();
        div1.innerHTML.should.equal("Clicked!");
    });

    it('targets a `this` element properly', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var div1 = make('<div hx-target="this"><button id="b1" hx-get="/test">Click Me!</button></div>')
        var btn = byId("b1")
        btn.click();
        this.server.respond();
        div1.innerHTML.should.equal("Clicked!");
    });

    it('targets a `closest` element properly', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var div1 = make('<div><p><i><button id="b1" hx-target="closest div" hx-get="/test">Click Me!</button></i></p></div>')
        var btn = byId("b1")
        btn.click();
        this.server.respond();
        div1.innerHTML.should.equal("Clicked!");
    });
    
    it('targets a `closest` element properly w/ hyperscript syntax', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var div1 = make('<div><p><i><button id="b1" hx-target="closest <div/>" hx-get="/test">Click Me!</button></i></p></div>')
        var btn = byId("b1")
        btn.click();
        this.server.respond();
        div1.innerHTML.should.equal("Clicked!");
    });

    it('targets a `find` element properly', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var div1 = make('<div hx-target="find span" hx-get="/test">Click Me! <div><span id="s1"></span><span id="s2"></span></div></div>')
        div1.click();
        this.server.respond();
        var span1 = byId("s1")
        var span2 = byId("s2")
        span1.innerHTML.should.equal("Clicked!");
        span2.innerHTML.should.equal("");
    });

    it('targets a `find` element properly w/ hyperscript syntax', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var div1 = make('<div hx-target="find <span/>" hx-get="/test">Click Me! <div><span id="s1"></span><span id="s2"></span></div></div>')
        div1.click();
        this.server.respond();
        var span1 = byId("s1")
        var span2 = byId("s2")
        span1.innerHTML.should.equal("Clicked!");
        span2.innerHTML.should.equal("");
    });

    it('targets an inner element properly', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var btn = make('<button hx-target="#d1" hx-get="/test">Click Me!<div id="d1"></div></button>')
        var div1 = byId("d1")
        btn.click();
        this.server.respond();
        div1.innerHTML.should.equal("Clicked!");
    });

    it('targets an inner element properly w/ hyperscript syntax', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var btn = make('<button hx-target="<#d1/>" hx-get="/test">Click Me!<div id="d1"></div></button>')
        var div1 = byId("d1")
        btn.click();
        this.server.respond();
        div1.innerHTML.should.equal("Clicked!");
    });

    it('handles bad target gracefully', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var btn = make('<button hx-target="bad" hx-get="/test">Click Me!</button>')
        btn.click();
        this.server.respond();
        btn.innerHTML.should.equal("Click Me!");
    });


    it('targets an adjacent element properly w/ data-* prefix', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        var btn = make('<button data-hx-target="#d1" data-hx-get="/test">Click Me!</button>')
        var div1 = make('<div id="d1"></div>')
        btn.click();
        this.server.respond();
        div1.innerHTML.should.equal("Clicked!");
    });

    it('targets a `next` element properly', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        make('<div>' +
            '  <div id="d3"></div>' +
            '  <button id="b1" hx-target="next div" hx-get="/test">Click Me!</button>' +
            '  <div id="d1"></div>' +
            '  <div id="d2"></div>' +
            '</div>')
        var btn = byId("b1")
        var div1 = byId("d1")
        var div2 = byId("d2")
        var div3 = byId("d3")
        btn.click();
        this.server.respond();
        div1.innerHTML.should.equal("Clicked!");
        div2.innerHTML.should.equal("");
        div3.innerHTML.should.equal("");
    });

    it('targets a `next` element properly w/ hyperscript syntax', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        make('<div>' +
            '  <div id="d3"></div>' +
            '  <button id="b1" hx-target="next <div/>" hx-get="/test">Click Me!</button>' +
            '  <div id="d1"></div>' +
            '  <div id="d2"></div>' +
            '</div>')
        var btn = byId("b1")
        var div1 = byId("d1")
        var div2 = byId("d2")
        var div3 = byId("d3")
        btn.click();
        this.server.respond();
        div1.innerHTML.should.equal("Clicked!");
        div2.innerHTML.should.equal("");
        div3.innerHTML.should.equal("");
    });

    it('targets a `previous` element properly', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        make('<div>' +
            '  <div id="d3"></div>' +
            '  <button id="b1" hx-target="previous div" hx-get="/test">Click Me!</button>' +
            '  <div id="d1"></div>' +
            '  <div id="d2"></div>' +
            '</div>')
        var btn = byId("b1")
        var div1 = byId("d1")
        var div2 = byId("d2")
        var div3 = byId("d3")
        btn.click();
        this.server.respond();
        div1.innerHTML.should.equal("");
        div2.innerHTML.should.equal("");
        div3.innerHTML.should.equal("Clicked!");
    });

    it('targets a `previous` element properly w/ hyperscript syntax', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        make('<div>' +
            '  <div id="d3"></div>' +
            '  <button id="b1" hx-target="previous <div/>" hx-get="/test">Click Me!</button>' +
            '  <div id="d1"></div>' +
            '  <div id="d2"></div>' +
            '</div>')
        var btn = byId("b1")
        var div1 = byId("d1")
        var div2 = byId("d2")
        var div3 = byId("d3")
        btn.click();
        this.server.respond();
        div1.innerHTML.should.equal("");
        div2.innerHTML.should.equal("");
        div3.innerHTML.should.equal("Clicked!");
    });

    it('targets a `next` element properly without selector', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        make('<div>' +
            '  <div id="d3"></div>' +
            '  <button id="b1" hx-target="next" hx-get="/test">Click Me!</button>' +
            '  <div id="d1"></div>' +
            '  <div id="d2"></div>' +
            '</div>')
        var btn = byId("b1")
        var div1 = byId("d1")
        var div2 = byId("d2")
        var div3 = byId("d3")
        btn.click();
        this.server.respond();
        div1.innerHTML.should.equal("Clicked!");
        div2.innerHTML.should.equal("");
        div3.innerHTML.should.equal("");
    });

    it('targets a `previous` element properly without selector', function()
    {
        this.server.respondWith("GET", "/test", "Clicked!");
        make('<div>' +
            '  <div id="d3"></div>' +
            '  <button id="b1" hx-target="previous" hx-get="/test">Click Me!</button>' +
            '  <div id="d1"></div>' +
            '  <div id="d2"></div>' +
            '</div>')
        var btn = byId("b1")
        var div1 = byId("d1")
        var div2 = byId("d2")
        var div3 = byId("d3")
        btn.click();
        this.server.respond();
        div1.innerHTML.should.equal("");
        div2.innerHTML.should.equal("");
        div3.innerHTML.should.equal("Clicked!");
    });
})