mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-28 05:21:18 +00:00
96 lines
3.5 KiB
JavaScript
96 lines
3.5 KiB
JavaScript
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)
|
|
})
|
|
|
|
it('load trigger does not prevent disabled element working', function() {
|
|
this.server.respondWith('GET', '/test', 'Loaded!')
|
|
var div1 = make('<div id="d1" hx-get="/test" hx-disabled-elt="#b1" hx-trigger="load">Load Me!</div><button id="b1">Demo</button>')
|
|
var div = byId('d1')
|
|
var btn = byId('b1')
|
|
div.innerHTML.should.equal('Load Me!')
|
|
btn.hasAttribute('disabled').should.equal(true)
|
|
this.server.respond()
|
|
div.innerHTML.should.equal('Loaded!')
|
|
btn.hasAttribute('disabled').should.equal(false)
|
|
})
|
|
})
|