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
|
describe("hx-boost attribute", function() {
beforeEach(function () {
this.server = makeServer();
clearWorkArea();
});
afterEach(function () {
this.server.restore();
clearWorkArea();
});
it('handles basic anchor properly', function () {
this.server.respondWith("GET", "/test", "Boosted");
var div = make('<div hx-target="this" hx-boost="true"><a id="a1" href="/test">Foo</a></div>');
var a = byId('a1');
a.click();
this.server.respond();
div.innerHTML.should.equal("Boosted");
})
it('handles basic form post properly', function () {
this.server.respondWith("POST", "/test", "Boosted");
var div = make('<div hx-target="this" hx-boost="true"><form id="f1" action="/test" method="post"><button id="b1">Submit</button></form></div>');
var btn = byId('b1');
btn.click();
this.server.respond();
div.innerHTML.should.equal("Boosted");
})
it('handles basic form post with button formaction properly', function () {
this.server.respondWith("POST", "/test", "Boosted");
var div = make('<div hx-target="this" hx-boost="true"><form id="f1" method="post"><button id="b1" formaction="/test">Submit</button></form></div>');
var btn = byId('b1');
btn.click();
this.server.respond();
div.innerHTML.should.equal("Boosted");
})
it('handles basic form post with button formmethod properly', function () {
this.server.respondWith("POST", "/test", "Boosted");
var div = make('<div hx-target="this" hx-boost="true"><form id="f1" action="/test"><button id="b1" formmethod="post">Submit</button></form></div>');
var btn = byId('b1');
btn.click();
this.server.respond();
div.innerHTML.should.equal("Boosted");
})
it('handles basic form post properly w/ explicit action', function () {
this.server.respondWith("POST", "/test", "Boosted");
var div = make('<div hx-target="this"><form id="f1" action="/test" method="post" hx-trigger="click" hx-boost="true"></form></div>');
var form = byId('f1');
form.click();
this.server.respond();
div.innerHTML.should.equal("Boosted");
})
it('handles basic form get properly', function () {
this.server.respondWith("GET", "/test", "Boosted");
var div = make('<div hx-target="this" hx-boost="true"><form id="f1" action="/test" method="get"><button id="b1">Submit</button></form></div>');
var btn = byId('b1');
btn.click();
this.server.respond();
div.innerHTML.should.equal("Boosted");
})
it('handles basic form with no explicit method property', function () {
this.server.respondWith("GET", "/test", "Boosted");
var div = make('<div hx-target="this" hx-boost="true"><form id="f1" action="/test"><button id="b1">Submit</button></form></div>');
var btn = byId('b1');
btn.click();
this.server.respond();
div.innerHTML.should.equal("Boosted");
})
it('handles basic anchor properly w/ data-* prefix', function () {
this.server.respondWith("GET", "/test", "Boosted");
var div = make('<div data-hx-target="this" data-hx-boost="true"><a id="a1" href="/test">Foo</a></div>');
var a = byId('a1');
a.click();
this.server.respond();
div.innerHTML.should.equal("Boosted");
})
it('overriding default swap style does not effect boosting', function () {
htmx.config.defaultSwapStyle = "afterend";
try {
this.server.respondWith("GET", "/test", "Boosted");
var a = make('<a hx-target="this" hx-boost="true" id="a1" href="/test">Foo</a>');
a.click();
this.server.respond();
a.innerHTML.should.equal("Boosted");
} finally {
htmx.config.defaultSwapStyle = "innerHTML";
}
})
it('anchors w/ explicit targets are not boosted', function () {
var a = make('<a hx-target="this" hx-boost="true" id="a1" href="/test" target="_blank">Foo</a>');
var internalData = htmx._("getInternalData")(a);
should.equal(undefined, internalData.boosted);
})
it('includes an HX-Boosted Header', function()
{
this.server.respondWith("GET", "/test", function(xhr){
should.equal(xhr.requestHeaders['HX-Boosted'], "true");
xhr.respond(200, {}, "Boosted!");
});
var btn = make('<a hx-boost="true" hx-target="this" href="/test">Click Me!</a>')
btn.click();
this.server.respond();
btn.innerHTML.should.equal("Boosted!");
});
});
|
