Question

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

我使用了木偶区域来渲染视图。我曾尝试使用间谍，但那些不起作用。

请在下面找到有关详细信息的代码：

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＆＃39; .trigger或相应的快捷方式功能。

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

1 个答案: