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
|
describe("hx-ext attribute", function() {
var ext1Calls, ext2Calls, ext3Calls;
beforeEach(function () {
ext1Calls = ext2Calls = ext3Calls = 0;
this.server = makeServer();
clearWorkArea();
htmx.defineExtension("ext-1", {
onEvent : function(name, evt) {
if(name === "afterRequest.htmx"){
ext1Calls++;
}
}
});
htmx.defineExtension("ext-2", {
onEvent : function(name, evt) {
if(name === "afterRequest.htmx"){
ext2Calls++;
}
}
});
htmx.defineExtension("ext-3", {
onEvent : function(name, evt) {
if(name === "afterRequest.htmx"){
ext3Calls++;
}
}
});
});
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);
});
});
|
