1
|
|
|
const jq = require('jquery'); |
2
|
|
|
const { |
3
|
|
|
cmd: { node }, |
4
|
|
|
ajax: { command: handler, callback }, |
5
|
|
|
utils: { dom, queue }, |
6
|
|
|
parser: { attr, query }, |
7
|
|
|
} = require('../dist/jaxon.module'); |
8
|
|
|
|
9
|
|
|
// Init the selector library. |
10
|
|
|
query.jq = jq; |
|
|
|
|
11
|
|
|
|
12
|
|
|
const makeRequest = commands => { |
13
|
|
|
const oRequest = { |
14
|
|
|
callback: [], |
15
|
|
|
response: { |
16
|
|
|
content: { |
17
|
|
|
jxn: { |
18
|
|
|
commands, |
19
|
|
|
}, |
20
|
|
|
}, |
21
|
|
|
}, |
22
|
|
|
}; |
23
|
|
|
callback.initCallbacks(oRequest); |
|
|
|
|
24
|
|
|
return oRequest; |
25
|
|
|
}; |
26
|
|
|
|
27
|
|
|
beforeEach(() => attr.reset()); |
|
|
|
|
28
|
|
|
|
29
|
|
|
test('Assign element inner html', () => { |
30
|
|
|
document.body.innerHTML = `<div id="wrapper"><span id="username"></span></div>`; |
31
|
|
|
|
32
|
|
|
node.assign({ |
|
|
|
|
33
|
|
|
attr: 'innerHTML', |
34
|
|
|
value: 'Mister Johnson', |
35
|
|
|
}, { |
36
|
|
|
target: dom.$('username'), |
|
|
|
|
37
|
|
|
}); |
38
|
|
|
|
39
|
|
|
expect(query.jq('#username').text()).toBe('Mister Johnson'); |
|
|
|
|
40
|
|
|
}); |
41
|
|
|
|
42
|
|
|
test('Assign element inner html', () => { |
43
|
|
|
document.body.innerHTML = `<div id="wrapper"><span id="username"></span></div>`; |
44
|
|
|
|
45
|
|
|
const command = { |
46
|
|
|
name: 'node.assign', |
47
|
|
|
args: { |
48
|
|
|
id: 'username', |
49
|
|
|
attr: 'innerHTML', |
50
|
|
|
value: 'Mister Johnson', |
51
|
|
|
}, |
52
|
|
|
}; |
53
|
|
|
|
54
|
|
|
handler.processCommands(makeRequest([command])); |
|
|
|
|
55
|
|
|
|
56
|
|
|
expect(query.jq('#username').text()).toBe('Mister Johnson'); |
|
|
|
|
57
|
|
|
}); |
58
|
|
|
|
59
|
|
|
test('Assign element outer html', () => { |
60
|
|
|
document.body.innerHTML = `<div id="wrapper"><span id="username"></span></div>`; |
61
|
|
|
|
62
|
|
|
node.assign({ |
|
|
|
|
63
|
|
|
attr: 'outerHTML', |
64
|
|
|
value: 'Mister Johnson', |
65
|
|
|
}, { |
66
|
|
|
target: dom.$('username'), |
|
|
|
|
67
|
|
|
queue: queue.create(5), |
|
|
|
|
68
|
|
|
}); |
69
|
|
|
|
70
|
|
|
expect(query.jq('#wrapper').text()).toBe('Mister Johnson'); |
|
|
|
|
71
|
|
|
}); |
72
|
|
|
|
73
|
|
|
test('Assign element outer html', () => { |
74
|
|
|
document.body.innerHTML = `<div id="wrapper"><span id="username"></span></div>`; |
75
|
|
|
|
76
|
|
|
const command = { |
77
|
|
|
name: 'node.assign', |
78
|
|
|
args: { |
79
|
|
|
id: 'username', |
80
|
|
|
attr: 'outerHTML', |
81
|
|
|
value: 'Mister Johnson', |
82
|
|
|
}, |
83
|
|
|
}; |
84
|
|
|
|
85
|
|
|
handler.processCommands(makeRequest([command])); |
|
|
|
|
86
|
|
|
|
87
|
|
|
expect(query.jq('#wrapper').text()).toBe('Mister Johnson'); |
|
|
|
|
88
|
|
|
}); |
89
|
|
|
|
90
|
|
View Code Duplication |
test('Bind a node to a component', () => { |
|
|
|
|
91
|
|
|
document.body.innerHTML = `<div id="wrapper"><span id="username"></span></div>`; |
92
|
|
|
|
93
|
|
|
const bindCommand = { |
94
|
|
|
name: 'node.bind', |
95
|
|
|
args: { |
96
|
|
|
id: 'username', |
97
|
|
|
component: { |
98
|
|
|
name: 'Component', |
99
|
|
|
}, |
100
|
|
|
}, |
101
|
|
|
}; |
102
|
|
|
const assignCommand = { |
103
|
|
|
name: 'node.assign', |
104
|
|
|
args: { |
105
|
|
|
attr: 'innerHTML', |
106
|
|
|
value: 'Mister Johnson', |
107
|
|
|
}, |
108
|
|
|
component: { |
109
|
|
|
name: 'Component', |
110
|
|
|
}, |
111
|
|
|
}; |
112
|
|
|
|
113
|
|
|
handler.processCommands(makeRequest([bindCommand, assignCommand])); |
|
|
|
|
114
|
|
|
|
115
|
|
|
expect(query.jq('#wrapper').text()).toBe('Mister Johnson'); |
|
|
|
|
116
|
|
|
}); |
117
|
|
|
|
118
|
|
View Code Duplication |
test('Bind a node to a component with empty item', () => { |
|
|
|
|
119
|
|
|
document.body.innerHTML = `<div id="wrapper"><span id="username"></span></div>`; |
120
|
|
|
|
121
|
|
|
const bindCommand = { |
122
|
|
|
name: 'node.bind', |
123
|
|
|
args: { |
124
|
|
|
id: 'username', |
125
|
|
|
component: { |
126
|
|
|
name: 'Component', |
127
|
|
|
item: '', |
128
|
|
|
}, |
129
|
|
|
}, |
130
|
|
|
}; |
131
|
|
|
const assignCommand = { |
132
|
|
|
name: 'node.assign', |
133
|
|
|
args: { |
134
|
|
|
attr: 'innerHTML', |
135
|
|
|
value: 'Mister Johnson', |
136
|
|
|
}, |
137
|
|
|
component: { |
138
|
|
|
name: 'Component', |
139
|
|
|
}, |
140
|
|
|
}; |
141
|
|
|
|
142
|
|
|
handler.processCommands(makeRequest([bindCommand, assignCommand])); |
|
|
|
|
143
|
|
|
|
144
|
|
|
expect(query.jq('#wrapper').text()).toBe('Mister Johnson'); |
|
|
|
|
145
|
|
|
}); |
146
|
|
|
|
147
|
|
View Code Duplication |
test('Bind a node to a component with item', () => { |
|
|
|
|
148
|
|
|
document.body.innerHTML = `<div id="wrapper"><span id="username"></span></div>`; |
149
|
|
|
|
150
|
|
|
const bindCommand = { |
151
|
|
|
name: 'node.bind', |
152
|
|
|
args: { |
153
|
|
|
id: 'username', |
154
|
|
|
component: { |
155
|
|
|
name: 'Component', |
156
|
|
|
item: 'item', |
157
|
|
|
}, |
158
|
|
|
}, |
159
|
|
|
}; |
160
|
|
|
const assignCommand = { |
161
|
|
|
name: 'node.assign', |
162
|
|
|
args: { |
163
|
|
|
attr: 'innerHTML', |
164
|
|
|
value: 'Mister Johnson', |
165
|
|
|
}, |
166
|
|
|
component: { |
167
|
|
|
name: 'Component', |
168
|
|
|
item: 'item', |
169
|
|
|
}, |
170
|
|
|
}; |
171
|
|
|
|
172
|
|
|
handler.processCommands(makeRequest([bindCommand, assignCommand])); |
|
|
|
|
173
|
|
|
|
174
|
|
|
expect(query.jq('#wrapper').text()).toBe('Mister Johnson'); |
|
|
|
|
175
|
|
|
}); |
176
|
|
|
|
177
|
|
|
test('Assign a component not bound to a node', () => { |
178
|
|
|
document.body.innerHTML = `<div id="wrapper"><span jxn-bind="Component" jxn-item="item"></span></div>`; |
179
|
|
|
|
180
|
|
|
const assignCommand = { |
181
|
|
|
name: 'node.assign', |
182
|
|
|
args: { |
183
|
|
|
attr: 'innerHTML', |
184
|
|
|
value: 'Mister Johnson', |
185
|
|
|
}, |
186
|
|
|
component: { |
187
|
|
|
name: 'Component', |
188
|
|
|
item: 'item', |
189
|
|
|
}, |
190
|
|
|
}; |
191
|
|
|
|
192
|
|
|
handler.processCommands(makeRequest([assignCommand])); |
|
|
|
|
193
|
|
|
|
194
|
|
|
expect(query.jq('#wrapper').text()).toBe('Mister Johnson'); |
|
|
|
|
195
|
|
|
}); |
196
|
|
|
|
197
|
|
|
test('Assign an unbound component to a node', () => { |
198
|
|
|
document.body.innerHTML = `<div id="wrapper"><span id="username"></span></div>`; |
199
|
|
|
|
200
|
|
|
const bindCommand = { |
201
|
|
|
name: 'node.bind', |
202
|
|
|
args: { |
203
|
|
|
id: 'username', |
204
|
|
|
component: { |
205
|
|
|
name: 'Component', |
206
|
|
|
item: 'item', |
207
|
|
|
}, |
208
|
|
|
}, |
209
|
|
|
}; |
210
|
|
|
|
211
|
|
|
handler.processCommands(makeRequest([bindCommand])); |
|
|
|
|
212
|
|
|
|
213
|
|
|
// This will unbind the component |
214
|
|
|
document.body.innerHTML = `<div id="wrapper"><span jxn-bind="Component" jxn-item="item"></span></div>`; |
215
|
|
|
|
216
|
|
|
const assignCommand = { |
217
|
|
|
name: 'node.assign', |
218
|
|
|
args: { |
219
|
|
|
attr: 'innerHTML', |
220
|
|
|
value: 'Mister Johnson', |
221
|
|
|
}, |
222
|
|
|
component: { |
223
|
|
|
name: 'Component', |
224
|
|
|
item: 'item', |
225
|
|
|
}, |
226
|
|
|
}; |
227
|
|
|
|
228
|
|
|
handler.processCommands(makeRequest([assignCommand])); |
229
|
|
|
|
230
|
|
|
expect(query.jq('#wrapper').text()).toBe('Mister Johnson'); |
|
|
|
|
231
|
|
|
}); |
232
|
|
|
|
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.