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
|
describe("hx-swap-oob attribute", function () {
beforeEach(function () {
this.server = makeServer();
clearWorkArea();
});
afterEach(function () {
this.server.restore();
clearWorkArea();
});
it('handles basic response properly', function () {
this.server.respondWith("GET", "/test", "Clicked<div id='d1' hx-swap-oob='true'>Swapped0</div>");
var div = make('<div hx-get="/test">click me</div>');
make('<div id="d1"></div>');
div.click();
this.server.respond();
div.innerHTML.should.equal("Clicked");
byId("d1").innerHTML.should.equal("Swapped0");
})
it('handles more than one oob swap properly', function () {
this.server.respondWith("GET", "/test", "Clicked<div id='d1' hx-swap-oob='true'>Swapped1</div><div id='d2' hx-swap-oob='true'>Swapped2</div>");
var div = make('<div hx-get="/test">click me</div>');
make('<div id="d1"></div>');
make('<div id="d2"></div>');
div.click();
this.server.respond();
div.innerHTML.should.equal("Clicked");
byId("d1").innerHTML.should.equal("Swapped1");
byId("d2").innerHTML.should.equal("Swapped2");
})
it('handles no id match properly', function () {
this.server.respondWith("GET", "/test", "Clicked<div id='d1' hx-swap-oob='true'>Swapped2</div>");
var div = make('<div hx-get="/test">click me</div>');
div.click();
this.server.respond();
div.innerText.should.equal("Clicked");
})
it('handles basic response properly w/ data-* prefix', function () {
this.server.respondWith("GET", "/test", "Clicked<div id='d1' data-hx-swap-oob='true'>Swapped3</div>");
var div = make('<div data-hx-get="/test">click me</div>');
make('<div id="d1"></div>');
div.click();
this.server.respond();
div.innerHTML.should.equal("Clicked");
byId("d1").innerHTML.should.equal("Swapped3");
})
it('handles outerHTML response properly', function () {
this.server.respondWith("GET", "/test", "Clicked<div id='d1' foo='bar' hx-swap-oob='outerHTML'>Swapped4</div>");
var div = make('<div hx-get="/test">click me</div>');
make('<div id="d1"></div>');
div.click();
this.server.respond();
byId("d1").getAttribute("foo").should.equal("bar");
div.innerHTML.should.equal("Clicked");
byId("d1").innerHTML.should.equal("Swapped4");
})
it('handles innerHTML response properly', function () {
this.server.respondWith("GET", "/test", "Clicked<div id='d1' foo='bar' hx-swap-oob='innerHTML'>Swapped5</div>");
var div = make('<div hx-get="/test">click me</div>');
make('<div id="d1"></div>');
div.click();
this.server.respond();
should.equal(byId("d1").getAttribute("foo"), null);
div.innerHTML.should.equal("Clicked");
byId("d1").innerHTML.should.equal("Swapped5");
})
it('oob swaps can be nested in content', function () {
this.server.respondWith("GET", "/test", "<div>Clicked<div id='d1' foo='bar' hx-swap-oob='innerHTML'>Swapped6</div></div>");
var div = make('<div hx-get="/test">click me</div>');
make('<div id="d1"></div>');
div.click();
this.server.respond();
should.equal(byId("d1").getAttribute("foo"), null);
div.innerHTML.should.equal("<div>Clicked</div>");
byId("d1").innerHTML.should.equal("Swapped6");
})
it('oob swaps can use selectors to match up', function () {
this.server.respondWith("GET", "/test", "<div>Clicked<div hx-swap-oob='innerHTML:[oob-foo]'>Swapped7</div></div>");
var div = make('<div hx-get="/test">click me</div>');
make('<div id="d1" oob-foo="bar"></div>');
div.click();
this.server.respond();
should.equal(byId("d1").getAttribute("oob-foo"), "bar");
div.innerHTML.should.equal("<div>Clicked</div>");
byId("d1").innerHTML.should.equal("Swapped7");
})
it('swaps into all targets that match the selector (innerHTML)', function () {
this.server.respondWith("GET", "/test", "<div>Clicked</div><div class='target' hx-swap-oob='innerHTML:.target'>Swapped8</div>");
var div = make('<div hx-get="/test">click me</div>');
make('<div id="d1">No swap</div>');
make('<div id="d2" class="target">Not swapped</div>');
make('<div id="d3" class="target">Not swapped</div>');
div.click();
this.server.respond();
byId("d1").innerHTML.should.equal("No swap");
byId("d2").innerHTML.should.equal("Swapped8");
byId("d3").innerHTML.should.equal("Swapped8");
})
it('swaps into all targets that match the selector (outerHTML)', function () {
var oobSwapContent = '<div class="new-target" hx-swap-oob="outerHTML:.target">Swapped9</div>';
this.server.respondWith("GET", "/test", "<div>Clicked</div>" + oobSwapContent);
var div = make('<div hx-get="/test">click me</div>');
make('<div id="d1"><div>No swap</div></div>');
make('<div id="d2"><div class="target">Not swapped</div></div>');
make('<div id="d3"><div class="target">Not swapped</div></div>');
div.click();
this.server.respond();
byId("d1").innerHTML.should.equal("<div>No swap</div>");
byId("d2").innerHTML.should.equal(oobSwapContent);
byId("d3").innerHTML.should.equal(oobSwapContent);
})
it('oob swap delete works properly', function()
{
this.server.respondWith("GET", "/test", '<div hx-swap-oob="delete" id="d1"></div>');
var div = make('<div id="d1" hx-get="/test">Foo</div>')
div.click();
this.server.respond();
should.equal(byId("d1"), null);
});
});
|
