Test the view interface.

test/view.js

@@ -48,132 +48,110 @@
     strictEqual(new View().one, 1);
   });
 
-  test("delegateEvents", 6, function() {
-    var counter1 = 0, counter2 = 0;
-
-    var view = new Backbone.View({el: '#testElement'});
-    view.increment = function(){ counter1++; };
-    view.$el.on('click', function(){ counter2++; });
-
-    var events = {'click h1': 'increment'};
-
-    view.delegateEvents(events);
-    view.$('h1').trigger('click');
-    equal(counter1, 1);
-    equal(counter2, 1);
-
-    view.$('h1').trigger('click');
-    equal(counter1, 2);
-    equal(counter2, 2);
-
-    view.delegateEvents(events);
-    view.$('h1').trigger('click');
-    equal(counter1, 3);
-    equal(counter2, 3);
+  test("delegateEvents", 4, function() {
+    var view = new Backbone.View;
+    view.handler = function(){ ok(this === view); };
+    view.undelegateEvents = function(){ ok(true); };
+    view.delegate = function(eventName, selector, handler) {
+      strictEqual(eventName, 'click');
+      strictEqual(selector, 'h1');
+      handler();
+    };
+    view.delegateEvents({'click h1': 'handler'});
   });
 
-  test("delegate", 2, function() {
-    var view = new Backbone.View({el: '#testElement'});
-    view.delegate('click', 'h1', function() {
-      ok(true);
-    });
-    view.delegate('click', function() {
-      ok(true);
-    });
-    view.$('h1').trigger('click');
+  test("delegate", 3, function() {
+    var view = new Backbone.View;
+    view.handler = function(){};
+    view.$el = {
+      on: function(eventName, selector, handler) {
+        strictEqual(eventName, 'click.delegateEvents' + view.cid);
+        strictEqual(selector, 'h1');
+        ok(handler === view.handler);
+      }
+    };
+    view.delegate('click', 'h1', view.handler);
   });
 
-  test("delegateEvents allows functions for callbacks", 3, function() {
-    var view = new Backbone.View({el: '<p></p>'});
-    view.counter = 0;
-
-    var events = {
+  test("delegateEvents allows functions for callbacks", 4, function() {
+    var view = new Backbone.View;
+    view.undelegateEvents = function(){ ok(true); };
+    view.delegate = function(eventName, selector, handler) {
+      strictEqual(eventName, 'click');
+      strictEqual(selector, '');
+      handler();
+    };
+    view.delegateEvents({
       click: function() {
-        this.counter++;
+        ok(this === view);
       }
-    };
-
-    view.delegateEvents(events);
-    view.$el.trigger('click');
-    equal(view.counter, 1);
-
-    view.$el.trigger('click');
-    equal(view.counter, 2);
-
-    view.delegateEvents(events);
-    view.$el.trigger('click');
-    equal(view.counter, 3);
+    });
   });
 
-
   test("delegateEvents ignore undefined methods", 0, function() {
-    var view = new Backbone.View({el: '<p></p>'});
-    view.delegateEvents({'click': 'undefinedMethod'});
-    view.$el.trigger('click');
+    var view = new Backbone.View;
+    view.delegate = function(){ ok(false); };
+    view.delegateEvents({click: 'undefinedMethod'});
   });
 
-  test("undelegateEvents", 6, function() {
-    var counter1 = 0, counter2 = 0;
-
-    var view = new Backbone.View({el: '#testElement'});
-    view.increment = function(){ counter1++; };
-    view.$el.on('click', function(){ counter2++; });
-
-    var events = {'click h1': 'increment'};
-
-    view.delegateEvents(events);
-    view.$('h1').trigger('click');
-    equal(counter1, 1);
-    equal(counter2, 1);
-
+  test("undelegateEvents", 1, function() {
+    var view = new Backbone.View;
+    view.$el = {
+      off: function(eventName) {
+        strictEqual(eventName, '.delegateEvents' + view.cid);
+      }
+    };
     view.undelegateEvents();
-    view.$('h1').trigger('click');
-    equal(counter1, 1);
-    equal(counter2, 2);
-
-    view.delegateEvents(events);
-    view.$('h1').trigger('click');
-    equal(counter1, 2);
-    equal(counter2, 3);
   });
 
-  test("undelegate", 0, function() {
-    view = new Backbone.View({el: '#testElement'});
-    view.delegate('click', function() { ok(false); });
-    view.delegate('click', 'h1', function() { ok(false); });
-
+  test("undelegate", 3, function() {
+    var view = new Backbone.View;
+    view.$el = {
+      off: function(eventName, selector, handler) {
+        strictEqual(eventName, 'click.delegateEvents' + view.cid);
+        ok(!selector);
+        ok(!handler);
+      }
+    };
     view.undelegate('click');
-
-    view.$('h1').trigger('click');
-    view.$el.trigger('click');
   });
 
-  test("undelegate with passed handler", 1, function() {
-    view = new Backbone.View({el: '#testElement'});
-    var listener = function() { ok(false); };
-    view.delegate('click', listener);
-    view.delegate('click', function() { ok(true); });
-    view.undelegate('click', listener);
-    view.$el.trigger('click');
+  test("undelegate with passed handler", 3, function() {
+    var view = new Backbone.View;
+    view.handler = function(){};
+    view.$el = {
+      off: function(eventName, selector, handler) {
+        strictEqual(eventName, 'click.delegateEvents' + view.cid);
+        strictEqual(selector, view.handler);
+        ok(!handler);
+      }
+    };
+    view.undelegate('click', view.handler);
   });
 
-  test("undelegate with selector", 2, function() {
-    view = new Backbone.View({el: '#testElement'});
-    view.delegate('click', function() { ok(true); });
-    view.delegate('click', 'h1', function() { ok(false); });
-    view.undelegate('click', 'h1');
-    view.$('h1').trigger('click');
-    view.$el.trigger('click');
+  test("undelegate with selector", 3, function() {
+    var view = new Backbone.View;
+    view.$el = {
+      off: function(eventName, selector, handler) {
+        strictEqual(eventName, 'click.delegateEvents' + view.cid);
+        strictEqual(selector, 'button');
+        ok(!handler);
+      }
+    };
+    view.undelegate('click', 'button');
   });
 
-  test("undelegate with handler and selector", 2, function() {
-    view = new Backbone.View({el: '#testElement'});
-    view.delegate('click', function() { ok(true); });
-    var handler = function(){ ok(false); };
-    view.delegate('click', 'h1', handler);
-    view.undelegate('click', 'h1', handler);
-    view.$('h1').trigger('click');
-    view.$el.trigger('click');
+  test("undelegate with handler and selector", 3, function() {
+    var view = new Backbone.View;
+    view.handler = function(){};
+    view.$el = {
+      off: function(eventName, selector, handler) {
+        strictEqual(eventName, 'click.delegateEvents' + view.cid);
+        strictEqual(selector, 'button');
+        strictEqual(handler, view.handler);
+      }
+    };
+    view.undelegate('click', 'button', view.handler);
   });
 
   test("tagName can be provided as a string", 1, function() {
@@ -255,45 +233,18 @@
     strictEqual(new View().el.className, 'dynamic');
   });
 
-  test("multiple views per element", 3, function() {
-    var count = 0;
-    var $el = $('<p></p>');
-
-    var View = Backbone.View.extend({
-      el: $el,
-      events: {
-        click: function() {
-          count++;
-        }
+  test("custom events", 3, function() {
+    var view = new Backbone.View;
+    view.delegate = function(eventName, selector, handler) {
+      strictEqual(eventName, 'fake$event');
+      strictEqual(selector, '');
+      handler();
+    };
+    view.delegateEvents({
+      fake$event: function() {
+        strictEqual(this, view);
       }
     });
-
-    var view1 = new View;
-    $el.trigger("click");
-    equal(1, count);
-
-    var view2 = new View;
-    $el.trigger("click");
-    equal(3, count);
-
-    view1.delegateEvents();
-    $el.trigger("click");
-    equal(5, count);
-  });
-
-  test("custom events", 2, function() {
-    var View = Backbone.View.extend({
-      el: $('body'),
-      events: {
-        "fake$event": function() { ok(true); }
-      }
-    });
-
-    var view = new View;
-    $('body').trigger('fake$event').trigger('fake$event');
-
-    $('body').off('fake$event');
-    $('body').trigger('fake$event');
   });
 
   test("#1048 - setElement uses provided object.", 2, function() {
@@ -307,22 +258,12 @@
   });
 
   test("#986 - Undelegate before changing element.", 1, function() {
-    var button1 = $('<button></button>');
-    var button2 = $('<button></button>');
-
-    var View = Backbone.View.extend({
-      events: {
-        click: function(e) {
-          ok(view.el === e.target);
-        }
-      }
-    });
-
-    var view = new View({el: button1});
-    view.setElement(button2);
-
-    button1.trigger('click');
-    button2.trigger('click');
+    var el = document.createElement('p');
+    var view = new Backbone.View({el: el});
+    view.undelegateEvents = function() {
+      strictEqual(this.el, el);
+    };
+    view.setElement(document.createElement('p'));
   });
 
   test("#1172 - Clone attributes object", 2, function() {
@@ -368,38 +309,29 @@
   });
 
   test("events passed in options", 1, function() {
-    var counter = 0;
-
+    var events = {};
     var View = Backbone.View.extend({
-      el: '#testElement',
-      increment: function() {
-        counter++;
+      delegateEvents: function() {
+        ok(this.events === events);
       }
     });
-
-    var view = new View({
-      events: {
-        'click h1': 'increment'
-      }
-    });
-
-    view.$('h1').trigger('click').trigger('click');
-    equal(counter, 2);
+    new View({events: events});
   });
 
   test("remove", 1, function() {
     var view = new Backbone.View;
-    document.body.appendChild(view.el);
 
-    view.delegate('click', function() { ok(false); });
-    view.listenTo(view, 'all x', function() { ok(false); });
+    view.listenTo(view, 'all x', function() {
+      ok(false);
+    });
+    view.$el = {
+      remove: function() {
+        ok(true);
+      }
+    };
 
     view.remove();
-    view.$el.trigger('click');
     view.trigger('x');
-
-    // In IE8 and below, parentNode still exists but is not document.body.
-    notEqual(view.el.parentNode, document.body);
   });
 
 })();