使用Jasmine測試Backbone視圖時，瀏覽器頁面會保持刷新

Question

運行以下Jasmine測試（1），測試成功執行但我面臨主測試頁面的遞歸加載。

這是我的測試（1），這里是我運行測試的模塊（2）：

有任何想法嗎？ 我該如何解決這個問題？

PS：
該問題只涉及Chrome和Safari瀏覽器。
這是一個例子：jsfiddle.net/shioyama/EXvZY

---

（1）

describe('When Submit button handler fired', function () {
    beforeEach(function () {
        spyOn(MyView.prototype, 'submitForm');
        this.view = new MyView();
        this.view.render();
        this.view.$el.find('form').submit();
    });

    it('submitForm should be called', function () {
        expect(MyView.prototype.submitForm).toHaveBeenCalled();
    });
});

---

（2）

var MyView = Backbone.View.extend({
    events: {
        'submit form' : 'submitForm'
    },

    submitForm: function (event) {
        event.preventDefault();
        // some code
    }
});

Answer 1

Backbone使用委托事件 ，這些事件在創建視圖時綁定。 您的view.el在創建時不包含表單，而是在render方法中創建表單。 這就是為什么提交委托事件不受約束，而是您在頁面上提交表單。 該表單提交到同一個URL，觸發Jasmine套件再次運行，從而產生循環。

如果您稍微修改一下代碼，您會發現此版本有效，因為在生成視圖之前<form>元素存在。

var MyView = Backbone.View.extend({
    events: {
        'submit form' : 'submitForm'
    },

    submitForm: function (event) {
        event.preventDefault();
        // some code
    }
});

//start test runner right after we're done defining our tests in this script
window.setTimeout( function(){
    jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
    jasmine.getEnv().execute();
}, 0 );

//TESTS GO HERE
describe('When Submit button handler fired', function () {
    beforeEach(function () {
        spyOn(MyView.prototype, 'submitForm').andCallThrough();
        this.view = new MyView({
            el: $('<div><form><input type="submit" value="Submit" /></form></div>')
        });
        this.view.$el.find('form').submit();
    });

    it('submitForm should be called', function () {
        expect(MyView.prototype.submitForm).toHaveBeenCalled();
    });
});​