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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
describe('hx-ext attribute', function() {
var ext1Calls, ext2Calls, ext3Calls, ext4Calls, ext5Calls
beforeEach(function() {
ext1Calls = ext2Calls = ext3Calls = ext4Calls = ext5Calls = 0
this.server = makeServer()
clearWorkArea()
htmx.defineExtension('ext-1', {
onEvent: function(name, evt) {
if (name === 'htmx:afterRequest') {
ext1Calls++
}
}
})
htmx.defineExtension('ext-2', {
onEvent: function(name, evt) {
if (name === 'htmx:afterRequest') {
ext2Calls++
}
}
})
htmx.defineExtension('ext-3', {
onEvent: function(name, evt) {
if (name === 'htmx:afterRequest') {
ext3Calls++
}
}
})
htmx.defineExtension('ext-4', {
onEvent: function(name, evt) {
if (name === 'namespace:example') {
ext4Calls++
}
}
})
htmx.defineExtension('ext-5', {
getSelectors: function() { return ['[foo]'] },
onEvent: function(name, evt) {
if (name === 'htmx:beforeProcessNode' && evt.target.getAttribute('foo')) {
ext5Calls++
}
}
})
})
afterEach(function() {
this.server.restore()
clearWorkArea()
htmx.removeExtension('ext-1')
htmx.removeExtension('ext-2')
htmx.removeExtension('ext-3')
htmx.removeExtension('ext-4')
htmx.removeExtension('ext-5')
})
it('A simple extension is invoked properly', function() {
this.server.respondWith('GET', '/test', 'Clicked!')
var btn = make('<button hx-get="/test" hx-ext="ext-1">Click Me!</button>')
btn.click()
this.server.respond()
ext1Calls.should.equal(1)
ext2Calls.should.equal(0)
ext3Calls.should.equal(0)
})
it('Extensions are merged properly', function() {
this.server.respondWith('GET', '/test', 'Clicked!')
make('<div hx-ext="ext-1"><button id="btn-1" hx-get="/test" hx-ext="ext-2">Click Me!</button>' +
'<button id="btn-2" hx-get="/test" hx-ext="ext-3">Click Me!</button></div>')
var btn1 = byId('btn-1')
var btn2 = byId('btn-2')
btn1.click()
this.server.respond()
ext1Calls.should.equal(1)
ext2Calls.should.equal(1)
ext3Calls.should.equal(0)
btn2.click()
this.server.respond()
ext1Calls.should.equal(2)
ext2Calls.should.equal(1)
ext3Calls.should.equal(1)
})
it('supports comma separated lists', function() {
this.server.respondWith('GET', '/test', 'Clicked!')
make('<div hx-ext="ext-1"><button id="btn-1" hx-get="/test" hx-ext="ext-2, ext-3 ">Click Me!</button></div>')
var btn1 = byId('btn-1')
var btn2 = byId('btn-2')
btn1.click()
this.server.respond()
ext1Calls.should.equal(1)
ext2Calls.should.equal(1)
ext3Calls.should.equal(1)
})
it('A simple extension is invoked properly w/ data-* prefix', function() {
this.server.respondWith('GET', '/test', 'Clicked!')
var btn = make('<button data-hx-get="/test" data-hx-ext="ext-1">Click Me!</button>')
btn.click()
this.server.respond()
ext1Calls.should.equal(1)
ext2Calls.should.equal(0)
ext3Calls.should.equal(0)
})
it('A simple extension is invoked properly when an HX-Trigger event w/ a namespace fires', function() {
this.server.respondWith('GET', '/test', [200, { 'HX-Trigger': 'namespace:example' }, ''])
var btn = make('<button data-hx-get="/test" data-hx-ext="ext-4">Click Me!</button>')
btn.click()
this.server.respond()
ext1Calls.should.equal(0)
ext2Calls.should.equal(0)
ext3Calls.should.equal(0)
ext4Calls.should.equal(1)
})
it('A simple extension is invoked properly for elements it specified in getSelectors', function() {
this.server.respondWith('GET', '/test', [200, { 'HX-Trigger': 'namespace:example' }, ''])
var btn = make('<div data-hx-ext="ext-5"><div foo="bar">test</div></div>')
btn.click()
this.server.respond()
ext1Calls.should.equal(0)
ext2Calls.should.equal(0)
ext3Calls.should.equal(0)
ext4Calls.should.equal(0)
ext5Calls.should.equal(1)
})
it('Extensions are ignored properly', function() {
this.server.respondWith('GET', '/test', 'Clicked!')
make('<div id="div-AA" hx-ext="ext-1,ext-2,ext-5"><button id="btn-AA" hx-get="/test" foo="foo">Click Me!</button>' +
'<div id="div-BB" hx-ext="ignore:ext-1,ignore:ext-5"><button id="btn-BB" hx-get="/test" foo="foo"></button></div></div>')
var btn1 = byId('btn-AA')
var btn2 = byId('btn-BB')
btn1.click()
this.server.respond()
ext1Calls.should.equal(1)
ext2Calls.should.equal(1)
ext3Calls.should.equal(0)
btn2.click()
this.server.respond()
ext1Calls.should.equal(1)
ext2Calls.should.equal(2)
ext3Calls.should.equal(0)
ext5Calls.should.equal(1)
})
})
|
