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
|
describe("hx-ext attribute", function() {
var ext1Calls, ext2Calls, ext3Calls, ext4Calls;
beforeEach(function () {
ext1Calls = ext2Calls = ext3Calls = ext4Calls = 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++;
}
}
});
});
afterEach(function () {
this.server.restore();
clearWorkArea();
htmx.removeExtension("ext-1");
htmx.removeExtension("ext-2");
htmx.removeExtension("ext-3");
});
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('Extensions are ignored properly', function () {
this.server.respondWith("GET", "/test", "Clicked!");
make('<div id="div-AA" hx-ext="ext-1, ext-2"><button id="btn-AA" hx-get="/test">Click Me!</button>' +
'<div id="div-BB" hx-ext="ignore:ext-1"><button id="btn-BB" hx-get="/test"></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);
})
});
|
