Testing a trigger click from a Backbone.View which opens a new Backbone.View

backbone.js, jasmine, javascript, marionette

Solution

If you are using Sinon and Chai, you can try this:

describe("When help button handler fired", function() {
  beforeEach(function() {
      this.popupSpy = sinon.spy()
      app.vent.on('showModal', this.popupSpy);
      this.view.render();
      this.view.$el.find('#help').trigger('click');
  });
  it("shows the popup", function() {
      this.popupSpy.callCount.should.equal(1);
      this.popupSpy.args[0][0].should.be.an.instanceOf(PopupView);
  });
});

Problem

I have two Backbone Views, `MainView` and `PopupView`. MainView contains a help button. When the help button handler is fired it shows the Backbone.View. My question is how should I test this behavior from the `MainView` module? Here's my code about `MainView`: ``` var MainView = Backbone.View.extend({ events: { 'click #help' : 'showPopUp' }, showPopUp: function() { var popupView = new PopupView(); app.vent.trigger('showModal', popupView); } }); ``` Here's my code about the mainView.spec: ``` describe("When help button handler fired", function() { beforeEach(function() { this.view.render(); this.view.$el.find('#help').trigger('click'); }); it("shows the popup", function() { // what should I do? }); }); ``` Here's my code about the app: ``` var app = new Marionette.Application(); app.addRegions({ header: '#header', sidebar: '#sidebar', main: '#main', modal: '#modal' }); app.vent.on('showModal', function(view) { var modal = app.modal; modal.show(view); modal.$el.modal({ show: true, keyboard: true, backdrop: 'static' }); }); ```

Original source