Test event binding / unbinding with Jasmine

item.js

App.ItemPresenter = (function() {
  var ItemPresenter = function($element, options) {
    var self = this;

    this.$element = $element;
    this.bus = options.bus;
    this.model = options.model;
    this.clasName = "item";

    this.listen = function() {
      this.bus.on("list:view:unload", self.unload);
    };

    this.unlisten = function() {
      this.bus.off("list:view:unload", self.unload);
    };

    this.domListen = function(element) {
      (element || this.$element).on("click", ".close", null, self.unload);
    }

    this.domUnlisten = function(element) {
      (element || this.$element).off("click", ".close")
    }

    this.render = function() {
      var $oldElement = this.$element;
      this.hydrate();

      this.domUnlisten($oldElement);
      $oldElement.replaceWith(this.$element);
      this.domListen(this.$element);
    };

    this.hydrate = function() {
      this.$element = $(
        $.render(this.template, { name: this.model.name })
      ).addClass(this.className);
    };

    this.remove = function() {
      this.$element.remove();
    };

    this.$close = function() {
      return $(".close", this.$element);
    }

    this.template = '<li>{name} <a href="#" class="close">x</a></li>';

    this.load = function() {
      self.render.call(self);
      self.listen.call(self);
    };

    this.unload = function(e) {
      if (e) { e.preventDefault(); };
      self.unlisten.call(self);
      self.domUnlisten.call(self);
      self.remove.call(self);
    };
  };

  return ItemPresenter;
})();

itemSpec.js

describe("item presenter", function() {
  var bus;
  var model;
  var $element;
  var presenter;

  beforeEach(function() {
    $page = $("<ul><li></li></ul>");
    bus = $.observable({});
    model = { name: "Item 1" };
    $element = $("li", $page);

    presenter = new App.ItemPresenter($element, {
      bus: bus,
      model: model
    });
  });

  describe("#listen", function() {
    it("binds to list:view:unload on the bus", function() {
      var timesTriggered = 0;
      presenter.unload = function() { timesTriggered += 1; }

      bus.trigger("list:view:unload");
      expect(timesTriggered).toBe(0);

      presenter.listen();
      bus.trigger("list:view:unload");
      expect(timesTriggered).toBe(1);
    });
  });

  describe("#domListen", function() {
    it("binds to click on .close", function() {
      var timesTriggered = 0;
      presenter.unload = function() { timesTriggered = 1; };
     
      presenter.render();
      presenter.listen();
      presenter.$close().trigger('click');
      expect(timesTriggered).toBe(1);
    });
  });

  describe("#unlisten", function() {
    it("unbinds from list:view:unload on the bus", function() {
      var timesTriggered = 0;
      presenter.unload = function() { timesTriggered += 1; };

      presenter.listen();
      bus.trigger("list:view:unload");
      expect(timesTriggered).toBe(1);

      timesTriggered = 0;
      presenter.unlisten();
      bus.trigger("list:view:unload");
      expect(timesTriggered).toBe(0);
    });
  });

  describe("#domUnlisten", function() {
    it("unbinds from click on .close", function() {
      var timesTriggered = 0;
      presenter.unload = function() { timesTriggered += 1; };
     
      presenter.render();
      presenter.$close().trigger('click');
      expect(timesTriggered).toBe(1);

      timesTriggered = 0;
      presenter.domUnlisten();
      presenter.$close().trigger('click');
      expect(timesTriggered).toBe(0);
    });
  });
});