public/bower_components/lodash/vendor/backbone/test/view.js

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