Geek asks and answers

Testing a trigger click with Backbone.View that opens a new Backbone.View

I have two Backbone Views, MainViewand PopupView.

MainView contains a help button. When the help button handler starts, it shows Backbone.View.

My question is how to test this behavior with a module MainView?

Here is 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 is my code about 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 is my application code:

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'
    });
});
+5
source share
3 answers

If you use Sinon and Chai, you can try the following:

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);
  });
});
+5
source

, , , - . eventbus , , .

app.vent, , . Marionette.Region . / .

, . app.vent , . app.vent view.render.

, , , . , JavaScript, , , Java, JavaScript, - .

+3

:

describe("When help button handler fired", function() {
    var popupShown;

    beforeEach(function() {
        popupShown = false;

        this.view.render();
        app.vent.on('showModal', function() {
            popupShown = true;      
        });
        this.view.$el.find('#help').trigger('click');
    });
    it("shows the popup", function() {
        expect(popupShown).toBe(true);
    });
});

, :

  • , MainView. .
  • - it("triggers the help event") - . , . .
  • I'm not sure that you are not using too much in your function beforeEach. You might want to at least click a button in the area it, although based on what you describeing, it might be OK.
+1
source

More articles:


All Articles