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
|
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)
})
})
|
