Question

我正在为Backbone视图编写测试，我通过创建$.Event("keypress", { which: 13 })并将其传递到我的测试套件中的trigger方法来模拟按键事件。但是，当我查看我的测试结果时，我发现在我的createOnEnter函数中，这将返回第一个条件，并且测试失败并显示以下消息AssertionError: expected addCommentToCollection to have been called at least once, but it was never called，这意味着它无法识别按键事件为13.

为什么会这样？我的设置不正确吗？

这是我试图测试的骨干功能：

createOnEnter: function(event) {
        if (event.keyCode != 13) return;
        if (!this._input.val()) return;

        this.addCommentToCollection();
        this.resetInputField();
        this.concealButtons();
    }

这是在backbone eventhash中触发的，它监听输入字段上的keypress事件。

此问题的必要测试设置（还有许多其他存根和间谍）：

describe("AppView", function() {

    before(function () {

        // create test fixture
        this.$fixture = $('<div id="app-view-fixture">' +
        '<input id="new-comment" type="text" placeholder="what do you think?">' +
        '<div class="comment-buttons">' +
        '<div class="post-button"></div>' +
        '<div class="cancel-button"></div>' +
        '</div>' +
        '<section id="main" class="comment-list">' +
        '<ul class="comments-container" id="comment-list"></ul>' +
        '</section></div>');

    });

    beforeEach(function () {

        // bind the fixture for each run
        this.$fixture.appendTo($("#fixtures"));

        // instantiate our models
        this.model1 = new Comment({
            "comment": "I like cookies",
            "created": "12-12-2012",
            "modified": "13-01-2013",
            "user": {
                "username": "Mr. Knight"
            }
        });

        this.model2 = new Comment({
            "comment": "I pirate everything!",
            "created": "14-09-2012",
            "modified": "21-01-2013",
            "user": {
                "username": "Mr. Casanova"
            }
        });

        // place models in array for use in collection instantiation
        this.models = [this.model1, this.model2];

        // instantiate our collection with models from above
        this.collection = new CommentList(this.models,
            {url: "items/1234567890/comments"}
        );

        this.addCommentSpy = sinon.spy(AppView.prototype, "addCommentToCollection");

        this.createEnterSpy = sinon.spy(AppView.prototype, "createOnEnter");

        this.resetSpy = sinon.spy(AppView.prototype, "resetInputField");

        this.concealSpy = sinon.spy(AppView.prototype, "concealButtons");

        // instantiate our new view
        this.view = new AppView ({
            "collection": this.collection,
            "el": this.$fixture
        });

    });

    afterEach(function () {

        this.addCommentSpy.restore();

        this.resetSpy.restore();

        this.concealSpy.restore();

        this.createEnterSpy.restore();


        // undo our server
        this.server.restore();

        // destroy our view
        this.view.remove();
    });

    after(function () {
        // empty our fixtures div
        $("#fixtures").empty();
    });

it("should trigger createOnEnter when keypress - 'Enter' - with value in input field", function () {

        this.view.$("#new-comment").val("Cousin Benson, it is broken!");

        this.view.$("#new-comment").trigger($.Event("keypress", { which: 13 }));

        expect(this.createEnterSpy).to.have.been.called;
        expect(this.addCommentSpy).to.have.been.called;
        expect(this.resetSpy).to.have.been.called;
        expect(this.concealSpy).to.have.been.called;
    });
});

Answer 1

基于https://api.jquery.com/category/events/event-object/

事件属性

jQuery规范化以下属性以实现跨浏览器一致性：

target relatedTarget pageX pageY which metaKey

因此请使用event.which或

var code = event.keyCode || event.which;
if (code == 13) { //Enter keycode
    //Do something
}

就像这个answer

一样

事件键码13模拟不起作用

1 个答案: