从Backbone.View测试触发器单击,打开一个新的Backbone.View

Question

我有两个Backbone视图,MainView和PopupView.

MainView包含一个帮助按钮.当触发帮助按钮处理程序时,它会显示Backbone.View.

我的问题是如何从MainView模块中测试这种行为？

---

这是我的代码MainView:

var MainView = Backbone.View.extend({
    events: {
        'click #help' : 'showPopUp'
    },

    showPopUp: function() {
       var popupView = new PopupView();
       app.vent.trigger('showModal', popupView);
    }    
});

---

这是关于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?
    });
});

---

这是关于应用程序的代码:

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'
    });
});

Answer 1

如果你使用的是Sinon和Chai,你可以试试这个:

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);
  });
});

Answer 2

所以你的主视图不应该打开弹出窗口，它甚至不应该知道这样的东西存在。它应该只是通过事件总线通知其他模块应该通过触发事件打开弹出窗口。

当你使用时，app.vent我假设你正在使用木偶。在我的项目中，我有一个 Marionette.Region 来处理覆盖视图。该区域应该打开/关闭视图。

这样做的话，测试就容易多了。在主视图中，您可以监视该app.vent函数并测试单击按钮时它将执行。在您所在的地区，您可以触发事件app.vent并监视您的view.render功能。

在想要测试的对象中创建新实例，会使测试变得更加困难。当然，它在 JavaScript 中更容易，例如在 Java 中，因为您可以在 JavaScript 中覆盖运行时的现有函数，但使用某种依赖项注入方式总是可以更轻松地模拟和监视依赖项。