Event key code 13 simulation not working

Question

I'm writing tests for a Backbone view where I simulate a key press event by creating $.Event("keypress", { which: 13 }) and passing it into the trigger method in my test suit. However when I look at my test results, I see that in my createOnEnter function, this returns on the first condition and the tests fail with the following message AssertionError: expected addCommentToCollection to have been called at least once, but it was never called, meaning that it is not recognising the key press event as 13.

Why is this happening? Is my set-up incorrect?

This is the backbone function I am trying to test:

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

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

This is triggered in the backbone eventhash which listens to keypress event on the input field.

The necessary test set-up for this question (there are many other stubs and spies):

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

Based on https://api.jquery.com/category/events/event-object/

Event Properties

jQuery normalizes the following properties for cross-browser consistency:

target relatedTarget pageX pageY which metaKey

So use event.which or

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

like in this answer