如何使用 Jasmine 的测试用例覆盖 Marionette View 的事件？

Question

我正在研究 Marionette's View 的测试用例。通过使用 events 属性，我编写了一个单击 HTML 元素的回调函数。该功能正在运行，但我正在努力编写测试用例。我无法使用 Jasmine 测试用例覆盖该点击事件。

我使用 Marionette Region 来渲染视图。 我尝试过使用间谍，但这些都不起作用。

请在下面找到代码以获取更多详细信息：

var TestView = Backbone.Marionette.CompositeView.extend({
     tagName: 'div',
        className: 'test-menu',
        childView: testMenuView,
        childViewOptions: function() {
            return {
                'componentId': this.cid
            };
        },
        template: _.template(testTemplate),
        initialize: function(options) {
            this.collection = this.options.testData;
        },
        onShow: function(collectionView) {
            collectionView.$el.show();
        },            
       attachHtml: function(collectionView,itemView) {
         collectionView.$("#testMenu").append(itemView.el);
       },
        events: {
            'click #testBtn': function (event) {
                    alert('testBtn Clicked');
            }
        }
    });

Answer 1

我喜欢在编写测试时尽可能使用 JQuery，因为它不那么冗长，而且对于大多数使用 JQuery 触发处理程序的事件也可以正常工作。

鉴于您已经为运行 Jasmine 套件设置了所有其他设置，我会这样做

it('reacts to click events on its button', function() {
    var view = new TestView();
    view.render();
    view.$('#testBtn').click(); // or view.$('#testBtn').trigger('click')

    //(verify that the view did what was expected)
});

如果测试警报是实际问题，那么使用间谍来解决这个问题，例如spyOn(window, 'alert') 和 expect(window.alert).ToHaveBeenCalledWith('testBtn Clicked')

JQuery 并不总是能够触发与addEventListener 绑定的事件处理程序。 Click 不是这些事件之一，但在某些情况下，我必须使用示例触发事件

var event = document.createEvent('Event');
event.initEvent('keydown');
event.keyCode = 40;
event.altKey = true;
view.el.querySelector('input').dispatchEvent(event);

但大多数时候直接在你想要的元素上使用 JQuery 的.trigger 或相应的快捷功能就可以了。