title: Sinon stubs not been called
body: <p>While writing the tests for <code>baz.View.likeButton</code>, I come across the issue that when I test to see if a stub has been called on an event I triggered, this stub is never called. This is happening too when I directly call <code>this.view._update</code> for example and expect my stubs <code>likeStub</code> or <code>unLikeStub</code> to be called too. I have checked that the element exits, but do not understand why my expectations are failing.
  What am I missing?</p>
  
  <p>My like button view inherits from <code>BaseButton</code>, which in turn inherits from <code>base</code>. </p>
  
  <pre><code>baz.View.likeButton = baz.View.BaseButton.extend({
  
      template: _.template($('#like-button').html()),
      sPaper: null,
      sPolyFill: null,
      sPolyEmpty: null,
      liked: null,
      likeButn: null,
      model: null,
  
      events: {
          "click button.icon": "toggleLike"
      },
  
      initialize: function (options) {
          // inherit from BaseButton
          View.BaseButton.prototype.initialize.apply(this, [options]); // inherit from BaseButtonView
  
          this.model = options.model;
          this.liked = this.model.get('liked');
  
          // set initial variables
          this.likeButn = this.$("button.icon", this);
  
          // pass in el on instantiation
          this.el = options.el;
  
          this.svgNode = this.likeButn.find("svg").get(0); // find the svg in the likeButn and get its first object
          this.sPaper = Snap(this.svgNode); // pass the svg object into Snap.js
          this.sPolyFill = this.sPaper.select('.symbol-solid');
          this.sPolyEmpty = this.sPaper.select('.symbol-empty');
  
          this.likeButn.addClass(this.liked ? "liked": "unliked");
  
          this._update();
  
          if(this.model)
          {
              this.listenTo(this.model, "change:liked", _.bind(this._modelChange, this))
          }
      },
  
      render: function () {
          this.$el.html(this.template());
          this._update();
          return this;
      },
  
      toggleLike: function () {
          this.liked = !this.liked;
          this._update();
      },
  
      _modelChange: function() {
          var bNewState = this.model.get('liked');
          if(bNewState !== this.liked)
          {
              this.liked = bNewState;
              this._update();
          }
      },
  
      _update: function () {
          if ( this.liked === true ) { // if liked is false, remove class, add class and set isLiked to true, then animate svg to liked position
              this._like();
          } else if ( this.liked === false ) { // is liked is false, remove class, add class, set isLiked to false, then animate svg to unliked position
              this._unlike();
          }
      },
  
      _like: function() {
          this.likeButn.removeClass("unliked");
          this.likeButn.addClass("liked");
          this.animateLike();
          if(this.model.get('liked') !== true)
          {
              this.model.set('liked', true);
              this.model.set("numLikes", this.model.get("numLikes") + 1);
              // wrapper for API
              likeEntity("/items/"+this.model.id); // should do something better than this to send like to server
          }
      },
  
      _unlike: function() {
          this.likeButn.removeClass("liked");
          this.likeButn.addClass("unliked");
          this.animateUnlike();
          if(this.model.get('liked') !== false)
          {
              this.model.set('liked', false);
              this.model.set("numLikes", this.model.get("numLikes") - 1);
              // wrapper for API
              unlikeEntity("/items/"+this.model.id); // should do something better than this to send like to server
          }
      },
  
      animateLike: function () {
          this.sPolyFill.animate({ transform: 't9,0' }, 300, mina.easeinout);
          this.sPolyEmpty.animate({ transform: 't-9,0' }, 300, mina.easeinout);
      },
  
      animateUnlike: function () {
          this.sPolyFill.animate({ transform: 't0,0'}, 300, mina.easeinout);
          this.sPolyEmpty.animate({ transform: 't0,0' }, 300, mina.easeinout);
      }
  });
  
  baz.View.base = Backbone.View.extend({
  
          // initialize variables and render template
          initialize: function (options) {
              this.render(); // render template and initializes above values
          },
  
          render: function () {
              return this; // A good convention is to return this at the end of render to enable chained calls.
          }
      });
  
  baz.View.BaseButton = baz.View.base.extend({
  
      // backbone event hash - sets functions to events on selected buttons
      events: {
          "click button": "triggered"
      },
  
      // initialize variables and render template
      initialize: function (options) {
          baz.View.base.prototype.initialize.apply(this, [options]); // inherit from base
          this.btn = this.$("button.normal-buttons");
      },
  
      // fn to be called for normal and cancel buttons
      triggered: function (event) {
          this.trigger('click', this);
          this.btn.blur();
      }
  });
  </code></pre>
  
  <p>My test code:</p>
  
  <pre><code>describe("Like Button View", function () {
  
  
      before(function () {
  
          this.$fixture = $('&lt;div id="likeButton-view-fixture"&gt;&lt;/div&gt;');
  
      });
  
      after(function () {
  
          $("#fixtures").empty();
  
      });
  
      describe("Like button when attribute 'LIKED' is FALSE", function () {
  
          beforeEach(function () {
  
              // set-up fake server
              this.server = sinon.fakeServer.create();
              this.server.autoRespond = true;
  
              // empty out and rebind the fixture for each run
              this.$fixture.empty().appendTo($("#fixtures"));
  
              this.model = new baz.Model.item({
                  liked: false,
                  numLikes: 0
              });
  
              this.view = new baz.View.likeButton ({
                  el: this.$fixture,
                  model: this.model
              });
  
              this.renderSpy = sinon.spy(this.view, "render");
  
              this.updateStub = sinon.stub(this.view, "_update");
  
              this.toggleLikeStub = sinon.stub(this.view, "toggleLike");
  
              this.modelChangeStub = sinon.stub(this.view, "_modelChange");
  
              this.likeStub = sinon.stub(this.view, "_like");
  
              this.unlikeStub = sinon.stub(this.view, "_unlike");
  
              this.animateLikeStub = sinon.stub(this.view, "animateLike");
  
              this.animateUnlikeStub = sinon.stub(this.view, "animateUnlike");
  
              this.snapAnimSpy = sinon.spy(Snap, "animate");
  
          });
  
          afterEach(function () {
  
              this.view.model.destroy();
  
              this.renderSpy.restore();
  
              this.updateStub.restore();
  
              this.toggleLikeStub.restore();
  
              this.modelChangeStub.restore();
  
              this.likeStub.restore();
  
              this.unlikeStub.restore();
  
              this.animateLikeStub.restore();
  
              this.animateUnlikeStub.restore();
  
              this.snapAnimSpy.restore();
  
              // undo our server
              this.server.restore();
  
          });
  
          it("call render and view should exist", function () {
  
              var _view = this.view.render();
  
              expect(_view).to.equal(this.view);
              expect(this.renderSpy).to.have.been.called;
              expect(this.view).to.be.ok;
          });
  
          it("should have class 'unliked'", function () {
  
              var _element = $(".icon")[0];
  
              expect(_element.className).to.include("unliked");
          });
  
          it("trigger 'toggleLike' when button is clicked should change liked value and call update", function () {
  
              var _event = $.Event("click");
  
              var _element = $(".icon");
  
              _element.trigger(_event);
  
              expect(this.toggleLikeStub).to.have.been.called; // this fails
              expect(this.view.model.get("liked")).to.deep.equal(true); // this fails
              expect(this.updateStub).to.have.been.called; // this fails
  
          });
  
          it("should like an item", function () {
  
              var _element = $(".icon")[0];
  
              this.view._like();
  
              expect(_element.className).to.include("liked");
          });
      });
  });
  </code></pre>