Conditions | 1 |
Paths | 1 |
Total Lines | 495 |
Lines | 0 |
Ratio | 0 % |
Changes | 1 | ||
Bugs | 0 | Features | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
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 |