5

我有两个主干视图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'
    });
});
4

3 回答 3

6

如果你使用的是 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);
  });
});
于 2012-07-23T08:09:16.527 回答
3

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

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

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

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

于 2012-07-21T10:40:27.313 回答
1

这个怎么样：

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

也就是说，我会推荐一些东西：

  1. 正如在别处提到的，不要在 MainView 中创建模态视图。这将两者结合得太紧了。
  2. 在您的测试中，您可能想说类似it("triggers the help event")或类似的话。这一点尤其重要，因为您正在单独对该对象进行单元测试。对于集成测试，情况正好相反。
  3. 我不确定你在你的beforeEach功能中没有做太多。您可能希望至少触发it范围内的按钮单击，尽管根据您正在执行的操作describe，这可能没问题。
于 2012-07-25T13:48:31.397 回答