describe("disable-element extension", function() { beforeEach(function () { this.server = makeServer(); clearWorkArea(); }); afterEach(function () { this.server.restore(); clearWorkArea(); }); it('disables the triggering element during htmx request', function () { // GIVEN: // - A button triggering an htmx request with disable-element extension // - The button is enabled this.server.respondWith("GET", "/test", function (xhr) { xhr.respond(200, {}) }); var btn = make('') btn.disabled.should.equal(false); // WHEN clicking btn.click(); // THEN it's disabled btn.disabled.should.equal(true); // WHEN server response has arrived this.server.respond(); // THEN it's re-enabled btn.disabled.should.equal(false); }); it('disables the designated element during htmx request', function () { // GIVEN: // - A button triggering an htmx request with disable-element extension // - Another button that needs to be disabled during the htmx request // - Both buttons are enabled this.server.respondWith("GET", "/test", function (xhr) { xhr.respond(200, {}) }); var btn = make('') var btn2 = make('') btn.disabled.should.equal(false); btn2.disabled.should.equal(false); // WHEN clicking btn.click(); // THEN it's not disabled, but the other one is btn.disabled.should.equal(false); btn2.disabled.should.equal(true); // WHEN server response has arrived this.server.respond(); // THEN both buttons are back enabled btn.disabled.should.equal(false); btn2.disabled.should.equal(false); }); });