Question

我正在为Backbone视图编写测试，我正在尝试模拟按下Enter按钮。我已经找到了关于如何模拟按键和点击事件的几个答案，但我不认为它们有效。运行我的测试时收到以下错误消息： AssertionError: expected createOnEnter to have been called exactly once, but it was called 0 times。

当我们使用jquery的trigger方法时，我试图测试的函数不应该自动触发吗？当模拟点击和按键事件时，是否会出现一些特殊警告？

我的测试代码如下：

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

        // set-up fake server
        this.server = sinon.fakeServer.create();
        this.server.autoRespond = true;

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


        // stub fetch because it is called in the initialize method of AppView and causes an error if not stubbed
        this.fetchStub = sinon.stub(CommentList.prototype, "fetch", function() {return this.models});

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

        this.createSpy = sinon.spy(this.view, "createOnEnter");

    });

    afterEach(function () {
        // destroy our view
        this.view.remove();

        // restore our stub
        this.fetchStub.restore();

        this.createSpy.restore();

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

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



it("should create new comment on 'Enter'", function () {

        // Simulate an "enter" (keycode 13) event on `enterNote` after
        // we have entered a title in the new note input field.
        //
        // See: http://stackoverflow.com/questions/6124692
        $("#new-comment")
            .val("Hot models up-stairs")
            .trigger($.Event("keypress", { which: 13 }));

        expect(this.createSpy).to.have.been.calledOnce;
    });

我试图测试的代码是AppView的一部分：

// persist new comment to collection
    addCommentToCollection: function () {
        this._collection.create({comment: this._input.val()}, {success: function () {
            console.log("Success!");
        }});
    },

// If you hit return in the main input field, create new **Comment** model,
    // persisting it to *localStorage*.
    createOnEnter: function(event) {
        if (event.keyCode != 13) return;
        if (!this._input.val()) return;

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

它在事件哈希中设置了createOnEnter：

events: {
        "keypress #new-comment": "createOnEnter"
}

Answer 1

问题是我在Backbone已经将keypress事件绑定到函数后创建了间谍，如本答案中所述： stackoverflow.com/questions/9113186

在测试骨干应用程序不工作时使用jquery进行Keypress事件模拟

1 个答案: