1
|
|
|
(function() { |
2
|
|
|
|
3
|
|
|
var view; |
4
|
|
|
|
5
|
|
|
QUnit.module('Backbone.View', { |
6
|
|
|
|
7
|
|
|
beforeEach: function(assert) { |
8
|
|
|
$('#qunit-fixture').append( |
9
|
|
|
'<div id="testElement"><h1>Test</h1></div>' |
10
|
|
|
); |
11
|
|
|
|
12
|
|
|
view = new Backbone.View({ |
13
|
|
|
id: 'test-view', |
14
|
|
|
className: 'test-view', |
15
|
|
|
other: 'non-special-option' |
16
|
|
|
}); |
17
|
|
|
}, |
18
|
|
|
|
19
|
|
|
afterEach: function() { |
20
|
|
|
$('#testElement').remove(); |
21
|
|
|
$('#test-view').remove(); |
22
|
|
|
} |
23
|
|
|
|
24
|
|
|
}); |
25
|
|
|
|
26
|
|
|
QUnit.test('constructor', function(assert) { |
27
|
|
|
assert.expect(3); |
28
|
|
|
assert.equal(view.el.id, 'test-view'); |
29
|
|
|
assert.equal(view.el.className, 'test-view'); |
30
|
|
|
assert.equal(view.el.other, void 0); |
31
|
|
|
}); |
32
|
|
|
|
33
|
|
|
QUnit.test('$', function(assert) { |
34
|
|
|
assert.expect(2); |
35
|
|
|
var myView = new Backbone.View; |
36
|
|
|
myView.setElement('<p><a><b>test</b></a></p>'); |
37
|
|
|
var result = myView.$('a b'); |
38
|
|
|
|
39
|
|
|
assert.strictEqual(result[0].innerHTML, 'test'); |
40
|
|
|
assert.ok(result.length === +result.length); |
41
|
|
|
}); |
42
|
|
|
|
43
|
|
|
QUnit.test('$el', function(assert) { |
44
|
|
|
assert.expect(3); |
45
|
|
|
var myView = new Backbone.View; |
46
|
|
|
myView.setElement('<p><a><b>test</b></a></p>'); |
47
|
|
|
assert.strictEqual(myView.el.nodeType, 1); |
48
|
|
|
|
49
|
|
|
assert.ok(myView.$el instanceof Backbone.$); |
50
|
|
|
assert.strictEqual(myView.$el[0], myView.el); |
51
|
|
|
}); |
52
|
|
|
|
53
|
|
|
QUnit.test('initialize', function(assert) { |
54
|
|
|
assert.expect(1); |
55
|
|
|
var View = Backbone.View.extend({ |
56
|
|
|
initialize: function() { |
57
|
|
|
this.one = 1; |
58
|
|
|
} |
59
|
|
|
}); |
60
|
|
|
|
61
|
|
|
assert.strictEqual(new View().one, 1); |
62
|
|
|
}); |
63
|
|
|
|
64
|
|
|
QUnit.test('render', function(assert) { |
65
|
|
|
assert.expect(1); |
66
|
|
|
var myView = new Backbone.View; |
67
|
|
|
assert.equal(myView.render(), myView, '#render returns the view instance'); |
68
|
|
|
}); |
69
|
|
|
|
70
|
|
|
QUnit.test('delegateEvents', function(assert) { |
71
|
|
|
assert.expect(6); |
72
|
|
|
var counter1 = 0, counter2 = 0; |
73
|
|
|
|
74
|
|
|
var myView = new Backbone.View({el: '#testElement'}); |
75
|
|
|
myView.increment = function(){ counter1++; }; |
76
|
|
|
myView.$el.on('click', function(){ counter2++; }); |
77
|
|
|
|
78
|
|
|
var events = {'click h1': 'increment'}; |
79
|
|
|
|
80
|
|
|
myView.delegateEvents(events); |
81
|
|
|
myView.$('h1').trigger('click'); |
82
|
|
|
assert.equal(counter1, 1); |
83
|
|
|
assert.equal(counter2, 1); |
84
|
|
|
|
85
|
|
|
myView.$('h1').trigger('click'); |
86
|
|
|
assert.equal(counter1, 2); |
87
|
|
|
assert.equal(counter2, 2); |
88
|
|
|
|
89
|
|
|
myView.delegateEvents(events); |
90
|
|
|
myView.$('h1').trigger('click'); |
91
|
|
|
assert.equal(counter1, 3); |
92
|
|
|
assert.equal(counter2, 3); |
93
|
|
|
}); |
94
|
|
|
|
95
|
|
|
QUnit.test('delegate', function(assert) { |
96
|
|
|
assert.expect(3); |
97
|
|
|
var myView = new Backbone.View({el: '#testElement'}); |
98
|
|
|
myView.delegate('click', 'h1', function() { |
99
|
|
|
assert.ok(true); |
100
|
|
|
}); |
101
|
|
|
myView.delegate('click', function() { |
102
|
|
|
assert.ok(true); |
103
|
|
|
}); |
104
|
|
|
myView.$('h1').trigger('click'); |
105
|
|
|
|
106
|
|
|
assert.equal(myView.delegate(), myView, '#delegate returns the view instance'); |
107
|
|
|
}); |
108
|
|
|
|
109
|
|
|
QUnit.test('delegateEvents allows functions for callbacks', function(assert) { |
110
|
|
|
assert.expect(3); |
111
|
|
|
var myView = new Backbone.View({el: '<p></p>'}); |
112
|
|
|
myView.counter = 0; |
113
|
|
|
|
114
|
|
|
var events = { |
115
|
|
|
click: function() { |
116
|
|
|
this.counter++; |
117
|
|
|
} |
118
|
|
|
}; |
119
|
|
|
|
120
|
|
|
myView.delegateEvents(events); |
121
|
|
|
myView.$el.trigger('click'); |
122
|
|
|
assert.equal(myView.counter, 1); |
123
|
|
|
|
124
|
|
|
myView.$el.trigger('click'); |
125
|
|
|
assert.equal(myView.counter, 2); |
126
|
|
|
|
127
|
|
|
myView.delegateEvents(events); |
128
|
|
|
myView.$el.trigger('click'); |
129
|
|
|
assert.equal(myView.counter, 3); |
130
|
|
|
}); |
131
|
|
|
|
132
|
|
|
|
133
|
|
|
QUnit.test('delegateEvents ignore undefined methods', function(assert) { |
134
|
|
|
assert.expect(0); |
135
|
|
|
var myView = new Backbone.View({el: '<p></p>'}); |
136
|
|
|
myView.delegateEvents({'click': 'undefinedMethod'}); |
137
|
|
|
myView.$el.trigger('click'); |
138
|
|
|
}); |
139
|
|
|
|
140
|
|
|
QUnit.test('undelegateEvents', function(assert) { |
141
|
|
|
assert.expect(7); |
142
|
|
|
var counter1 = 0, counter2 = 0; |
143
|
|
|
|
144
|
|
|
var myView = new Backbone.View({el: '#testElement'}); |
145
|
|
|
myView.increment = function(){ counter1++; }; |
146
|
|
|
myView.$el.on('click', function(){ counter2++; }); |
147
|
|
|
|
148
|
|
|
var events = {'click h1': 'increment'}; |
149
|
|
|
|
150
|
|
|
myView.delegateEvents(events); |
151
|
|
|
myView.$('h1').trigger('click'); |
152
|
|
|
assert.equal(counter1, 1); |
153
|
|
|
assert.equal(counter2, 1); |
154
|
|
|
|
155
|
|
|
myView.undelegateEvents(); |
156
|
|
|
myView.$('h1').trigger('click'); |
157
|
|
|
assert.equal(counter1, 1); |
158
|
|
|
assert.equal(counter2, 2); |
159
|
|
|
|
160
|
|
|
myView.delegateEvents(events); |
161
|
|
|
myView.$('h1').trigger('click'); |
162
|
|
|
assert.equal(counter1, 2); |
163
|
|
|
assert.equal(counter2, 3); |
164
|
|
|
|
165
|
|
|
assert.equal(myView.undelegateEvents(), myView, '#undelegateEvents returns the view instance'); |
166
|
|
|
}); |
167
|
|
|
|
168
|
|
|
QUnit.test('undelegate', function(assert) { |
169
|
|
|
assert.expect(1); |
170
|
|
|
var myView = new Backbone.View({el: '#testElement'}); |
171
|
|
|
myView.delegate('click', function() { assert.ok(false); }); |
172
|
|
|
myView.delegate('click', 'h1', function() { assert.ok(false); }); |
173
|
|
|
|
174
|
|
|
myView.undelegate('click'); |
175
|
|
|
|
176
|
|
|
myView.$('h1').trigger('click'); |
177
|
|
|
myView.$el.trigger('click'); |
178
|
|
|
|
179
|
|
|
assert.equal(myView.undelegate(), myView, '#undelegate returns the view instance'); |
180
|
|
|
}); |
181
|
|
|
|
182
|
|
|
QUnit.test('undelegate with passed handler', function(assert) { |
183
|
|
|
assert.expect(1); |
184
|
|
|
var myView = new Backbone.View({el: '#testElement'}); |
185
|
|
|
var listener = function() { assert.ok(false); }; |
186
|
|
|
myView.delegate('click', listener); |
187
|
|
|
myView.delegate('click', function() { assert.ok(true); }); |
188
|
|
|
myView.undelegate('click', listener); |
189
|
|
|
myView.$el.trigger('click'); |
190
|
|
|
}); |
191
|
|
|
|
192
|
|
|
QUnit.test('undelegate with selector', function(assert) { |
193
|
|
|
assert.expect(2); |
194
|
|
|
var myView = new Backbone.View({el: '#testElement'}); |
195
|
|
|
myView.delegate('click', function() { assert.ok(true); }); |
196
|
|
|
myView.delegate('click', 'h1', function() { assert.ok(false); }); |
197
|
|
|
myView.undelegate('click', 'h1'); |
198
|
|
|
myView.$('h1').trigger('click'); |
199
|
|
|
myView.$el.trigger('click'); |
200
|
|
|
}); |
201
|
|
|
|
202
|
|
|
QUnit.test('undelegate with handler and selector', function(assert) { |
203
|
|
|
assert.expect(2); |
204
|
|
|
var myView = new Backbone.View({el: '#testElement'}); |
205
|
|
|
myView.delegate('click', function() { assert.ok(true); }); |
206
|
|
|
var handler = function(){ assert.ok(false); }; |
207
|
|
|
myView.delegate('click', 'h1', handler); |
208
|
|
|
myView.undelegate('click', 'h1', handler); |
209
|
|
|
myView.$('h1').trigger('click'); |
210
|
|
|
myView.$el.trigger('click'); |
211
|
|
|
}); |
212
|
|
|
|
213
|
|
|
QUnit.test('tagName can be provided as a string', function(assert) { |
214
|
|
|
assert.expect(1); |
215
|
|
|
var View = Backbone.View.extend({ |
216
|
|
|
tagName: 'span' |
217
|
|
|
}); |
218
|
|
|
|
219
|
|
|
assert.equal(new View().el.tagName, 'SPAN'); |
220
|
|
|
}); |
221
|
|
|
|
222
|
|
|
QUnit.test('tagName can be provided as a function', function(assert) { |
223
|
|
|
assert.expect(1); |
224
|
|
|
var View = Backbone.View.extend({ |
225
|
|
|
tagName: function() { |
226
|
|
|
return 'p'; |
227
|
|
|
} |
228
|
|
|
}); |
229
|
|
|
|
230
|
|
|
assert.ok(new View().$el.is('p')); |
231
|
|
|
}); |
232
|
|
|
|
233
|
|
|
QUnit.test('_ensureElement with DOM node el', function(assert) { |
234
|
|
|
assert.expect(1); |
235
|
|
|
var View = Backbone.View.extend({ |
236
|
|
|
el: document.body |
237
|
|
|
}); |
238
|
|
|
|
239
|
|
|
assert.equal(new View().el, document.body); |
240
|
|
|
}); |
241
|
|
|
|
242
|
|
|
QUnit.test('_ensureElement with string el', function(assert) { |
243
|
|
|
assert.expect(3); |
244
|
|
|
var View = Backbone.View.extend({ |
245
|
|
|
el: 'body' |
246
|
|
|
}); |
247
|
|
|
assert.strictEqual(new View().el, document.body); |
248
|
|
|
|
249
|
|
|
View = Backbone.View.extend({ |
250
|
|
|
el: '#testElement > h1' |
251
|
|
|
}); |
252
|
|
|
assert.strictEqual(new View().el, $('#testElement > h1').get(0)); |
253
|
|
|
|
254
|
|
|
View = Backbone.View.extend({ |
255
|
|
|
el: '#nonexistent' |
256
|
|
|
}); |
257
|
|
|
assert.ok(!new View().el); |
258
|
|
|
}); |
259
|
|
|
|
260
|
|
|
QUnit.test('with className and id functions', function(assert) { |
261
|
|
|
assert.expect(2); |
262
|
|
|
var View = Backbone.View.extend({ |
263
|
|
|
className: function() { |
264
|
|
|
return 'className'; |
265
|
|
|
}, |
266
|
|
|
id: function() { |
267
|
|
|
return 'id'; |
268
|
|
|
} |
269
|
|
|
}); |
270
|
|
|
|
271
|
|
|
assert.strictEqual(new View().el.className, 'className'); |
272
|
|
|
assert.strictEqual(new View().el.id, 'id'); |
273
|
|
|
}); |
274
|
|
|
|
275
|
|
|
QUnit.test('with attributes', function(assert) { |
276
|
|
|
assert.expect(2); |
277
|
|
|
var View = Backbone.View.extend({ |
278
|
|
|
attributes: { |
279
|
|
|
'id': 'id', |
280
|
|
|
'class': 'class' |
281
|
|
|
} |
282
|
|
|
}); |
283
|
|
|
|
284
|
|
|
assert.strictEqual(new View().el.className, 'class'); |
285
|
|
|
assert.strictEqual(new View().el.id, 'id'); |
286
|
|
|
}); |
287
|
|
|
|
288
|
|
|
QUnit.test('with attributes as a function', function(assert) { |
289
|
|
|
assert.expect(1); |
290
|
|
|
var View = Backbone.View.extend({ |
291
|
|
|
attributes: function() { |
292
|
|
|
return {'class': 'dynamic'}; |
293
|
|
|
} |
294
|
|
|
}); |
295
|
|
|
|
296
|
|
|
assert.strictEqual(new View().el.className, 'dynamic'); |
297
|
|
|
}); |
298
|
|
|
|
299
|
|
|
QUnit.test('should default to className/id properties', function(assert) { |
300
|
|
|
assert.expect(4); |
301
|
|
|
var View = Backbone.View.extend({ |
302
|
|
|
className: 'backboneClass', |
303
|
|
|
id: 'backboneId', |
304
|
|
|
attributes: { |
305
|
|
|
'class': 'attributeClass', |
306
|
|
|
'id': 'attributeId' |
307
|
|
|
} |
308
|
|
|
}); |
309
|
|
|
|
310
|
|
|
var myView = new View; |
311
|
|
|
assert.strictEqual(myView.el.className, 'backboneClass'); |
312
|
|
|
assert.strictEqual(myView.el.id, 'backboneId'); |
313
|
|
|
assert.strictEqual(myView.$el.attr('class'), 'backboneClass'); |
314
|
|
|
assert.strictEqual(myView.$el.attr('id'), 'backboneId'); |
315
|
|
|
}); |
316
|
|
|
|
317
|
|
|
QUnit.test('multiple views per element', function(assert) { |
318
|
|
|
assert.expect(3); |
319
|
|
|
var count = 0; |
320
|
|
|
var $el = $('<p></p>'); |
321
|
|
|
|
322
|
|
|
var View = Backbone.View.extend({ |
323
|
|
|
el: $el, |
324
|
|
|
events: { |
325
|
|
|
click: function() { |
326
|
|
|
count++; |
327
|
|
|
} |
328
|
|
|
} |
329
|
|
|
}); |
330
|
|
|
|
331
|
|
|
var view1 = new View; |
332
|
|
|
$el.trigger('click'); |
333
|
|
|
assert.equal(1, count); |
334
|
|
|
|
335
|
|
|
var view2 = new View; |
336
|
|
|
$el.trigger('click'); |
337
|
|
|
assert.equal(3, count); |
338
|
|
|
|
339
|
|
|
view1.delegateEvents(); |
340
|
|
|
$el.trigger('click'); |
341
|
|
|
assert.equal(5, count); |
342
|
|
|
}); |
343
|
|
|
|
344
|
|
|
QUnit.test('custom events', function(assert) { |
345
|
|
|
assert.expect(2); |
346
|
|
|
var View = Backbone.View.extend({ |
347
|
|
|
el: $('body'), |
348
|
|
|
events: { |
349
|
|
|
fake$event: function() { assert.ok(true); } |
350
|
|
|
} |
351
|
|
|
}); |
352
|
|
|
|
353
|
|
|
var myView = new View; |
354
|
|
|
$('body').trigger('fake$event').trigger('fake$event'); |
355
|
|
|
|
356
|
|
|
$('body').off('fake$event'); |
357
|
|
|
$('body').trigger('fake$event'); |
358
|
|
|
}); |
359
|
|
|
|
360
|
|
|
QUnit.test('#1048 - setElement uses provided object.', function(assert) { |
361
|
|
|
assert.expect(2); |
362
|
|
|
var $el = $('body'); |
363
|
|
|
|
364
|
|
|
var myView = new Backbone.View({el: $el}); |
365
|
|
|
assert.ok(myView.$el === $el); |
366
|
|
|
|
367
|
|
|
myView.setElement($el = $($el)); |
368
|
|
|
assert.ok(myView.$el === $el); |
369
|
|
|
}); |
370
|
|
|
|
371
|
|
|
QUnit.test('#986 - Undelegate before changing element.', function(assert) { |
372
|
|
|
assert.expect(1); |
373
|
|
|
var button1 = $('<button></button>'); |
374
|
|
|
var button2 = $('<button></button>'); |
375
|
|
|
|
376
|
|
|
var View = Backbone.View.extend({ |
377
|
|
|
events: { |
378
|
|
|
click: function(e) { |
379
|
|
|
assert.ok(myView.el === e.target); |
380
|
|
|
} |
381
|
|
|
} |
382
|
|
|
}); |
383
|
|
|
|
384
|
|
|
var myView = new View({el: button1}); |
385
|
|
|
myView.setElement(button2); |
386
|
|
|
|
387
|
|
|
button1.trigger('click'); |
388
|
|
|
button2.trigger('click'); |
389
|
|
|
}); |
390
|
|
|
|
391
|
|
|
QUnit.test('#1172 - Clone attributes object', function(assert) { |
392
|
|
|
assert.expect(2); |
393
|
|
|
var View = Backbone.View.extend({ |
394
|
|
|
attributes: {foo: 'bar'} |
395
|
|
|
}); |
396
|
|
|
|
397
|
|
|
var view1 = new View({id: 'foo'}); |
398
|
|
|
assert.strictEqual(view1.el.id, 'foo'); |
399
|
|
|
|
400
|
|
|
var view2 = new View(); |
401
|
|
|
assert.ok(!view2.el.id); |
402
|
|
|
}); |
403
|
|
|
|
404
|
|
|
QUnit.test('views stopListening', function(assert) { |
405
|
|
|
assert.expect(0); |
406
|
|
|
var View = Backbone.View.extend({ |
407
|
|
|
initialize: function() { |
408
|
|
|
this.listenTo(this.model, 'all x', function(){ assert.ok(false); }); |
409
|
|
|
this.listenTo(this.collection, 'all x', function(){ assert.ok(false); }); |
410
|
|
|
} |
411
|
|
|
}); |
412
|
|
|
|
413
|
|
|
var myView = new View({ |
414
|
|
|
model: new Backbone.Model, |
415
|
|
|
collection: new Backbone.Collection |
416
|
|
|
}); |
417
|
|
|
|
418
|
|
|
myView.stopListening(); |
419
|
|
|
myView.model.trigger('x'); |
420
|
|
|
myView.collection.trigger('x'); |
421
|
|
|
}); |
422
|
|
|
|
423
|
|
|
QUnit.test('Provide function for el.', function(assert) { |
424
|
|
|
assert.expect(2); |
425
|
|
|
var View = Backbone.View.extend({ |
426
|
|
|
el: function() { |
427
|
|
|
return '<p><a></a></p>'; |
428
|
|
|
} |
429
|
|
|
}); |
430
|
|
|
|
431
|
|
|
var myView = new View; |
432
|
|
|
assert.ok(myView.$el.is('p')); |
433
|
|
|
assert.ok(myView.$el.has('a')); |
434
|
|
|
}); |
435
|
|
|
|
436
|
|
|
QUnit.test('events passed in options', function(assert) { |
437
|
|
|
assert.expect(1); |
438
|
|
|
var counter = 0; |
439
|
|
|
|
440
|
|
|
var View = Backbone.View.extend({ |
441
|
|
|
el: '#testElement', |
442
|
|
|
increment: function() { |
443
|
|
|
counter++; |
444
|
|
|
} |
445
|
|
|
}); |
446
|
|
|
|
447
|
|
|
var myView = new View({ |
448
|
|
|
events: { |
449
|
|
|
'click h1': 'increment' |
450
|
|
|
} |
451
|
|
|
}); |
452
|
|
|
|
453
|
|
|
myView.$('h1').trigger('click').trigger('click'); |
454
|
|
|
assert.equal(counter, 2); |
455
|
|
|
}); |
456
|
|
|
|
457
|
|
|
QUnit.test('remove', function(assert) { |
458
|
|
|
assert.expect(2); |
459
|
|
|
var myView = new Backbone.View; |
460
|
|
|
document.body.appendChild(view.el); |
461
|
|
|
|
462
|
|
|
myView.delegate('click', function() { assert.ok(false); }); |
463
|
|
|
myView.listenTo(myView, 'all x', function() { assert.ok(false); }); |
464
|
|
|
|
465
|
|
|
assert.equal(myView.remove(), myView, '#remove returns the view instance'); |
466
|
|
|
myView.$el.trigger('click'); |
467
|
|
|
myView.trigger('x'); |
468
|
|
|
|
469
|
|
|
// In IE8 and below, parentNode still exists but is not document.body. |
470
|
|
|
assert.notEqual(myView.el.parentNode, document.body); |
471
|
|
|
}); |
472
|
|
|
|
473
|
|
|
QUnit.test('setElement', function(assert) { |
474
|
|
|
assert.expect(3); |
475
|
|
|
var myView = new Backbone.View({ |
476
|
|
|
events: { |
477
|
|
|
click: function() { assert.ok(false); } |
478
|
|
|
} |
479
|
|
|
}); |
480
|
|
|
myView.events = { |
481
|
|
|
click: function() { assert.ok(true); } |
482
|
|
|
}; |
483
|
|
|
var oldEl = myView.el; |
484
|
|
|
var $oldEl = myView.$el; |
485
|
|
|
|
486
|
|
|
myView.setElement(document.createElement('div')); |
487
|
|
|
|
488
|
|
|
$oldEl.click(); |
489
|
|
|
myView.$el.click(); |
490
|
|
|
|
491
|
|
|
assert.notEqual(oldEl, myView.el); |
492
|
|
|
assert.notEqual($oldEl, myView.$el); |
493
|
|
|
}); |
494
|
|
|
|
495
|
|
|
})(); |
496
|
|
|
|