1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
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)
})
it('hx-disabled-elt supports multiple extended selectors', function() {
this.server.respondWith('GET', '/test', 'Clicked!')
var form = make('<form hx-get="/test" hx-disabled-elt="find input[type=\'text\'], find button" hx-swap="none"><input id="i1" type="text" placeholder="Type here..."><button id="b2" type="submit">Send</button></form>')
var i1 = byId('i1')
var b2 = byId('b2')
i1.hasAttribute('disabled').should.equal(false)
b2.hasAttribute('disabled').should.equal(false)
b2.click()
i1.hasAttribute('disabled').should.equal(true)
b2.hasAttribute('disabled').should.equal(true)
this.server.respond()
i1.hasAttribute('disabled').should.equal(false)
b2.hasAttribute('disabled').should.equal(false)
})
it('closest/find/next/previous handle nothing to find without exception', function() {
this.server.respondWith('GET', '/test', 'Clicked!')
var btn1 = make('<button hx-get="/test" hx-disabled-elt="closest input">Click Me!</button>')
var btn2 = make('<button hx-get="/test" hx-disabled-elt="find input">Click Me!</button>')
var btn3 = make('<button hx-get="/test" hx-disabled-elt="next input">Click Me!</button>')
var btn4 = make('<button hx-get="/test" hx-disabled-elt="previous input">Click Me!</button>')
btn1.click()
btn1.hasAttribute('disabled').should.equal(false)
this.server.respond()
btn2.click()
btn2.hasAttribute('disabled').should.equal(false)
this.server.respond()
btn3.click()
btn3.hasAttribute('disabled').should.equal(false)
this.server.respond()
btn4.click()
btn4.hasAttribute('disabled').should.equal(false)
this.server.respond()
})
})
|
