从主干测试触发器单击.打开新主干的视图.视图

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

本文关键字：视图 新主干 单击 测试 触发器      更新时间：2023-12-01

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

如果你使用的是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);
  });
});

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

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

这样做，测试起来容易多了。在主视图中，您可以监视app.vent函数，并测试它是否会在单击按钮时执行。在您所在的地区，您可以在app.vent上启动事件并监视您的view.render功能。

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

这个怎么样：

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操作，这可能是可以的
相关文章：