使用Jasmine测试Backbone视图时，浏览器页面会保持刷新 [英] Browser page keeps refreshing when testing Backbone views with Jasmine

问题描述

运行以下Jasmine测试（1），测试成功执行，但我面临主测试页面的递归加载。

Running the following Jasmine test(1), the test is successfully performed but I face the recursive loading of the main test page.

这是我的测试（1） ）以及我运行测试的模块（2）：

Here is my test (1) and here the module on which I am running the test (2):

有什么想法吗？我该如何解决这个问题呢？

Any ideas? How can I fix the issue?

PS：

问题仅针对Chrome和Safari浏览器。

这是一个例如：jsfiddle.net/shioyama/EXvZY

P.S.:
The issue regard just Chrome and Safari Browser.
Here is an example: 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）

---

(2)

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

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

推荐答案

Backbone使用委托事件 ，在创建视图时绑定。您的view.el在创建时不包含表单，而是在render方法中创建表单。这就是为什么提交委托事件不受约束，而是您在页面上提交表单。该表单提交到同一个URL，这会触发Jasmine套件再次运行，从而产生一个循环。

Backbone uses delegate events, which are bound when the view is created. Your view.el does not contain a form when it is created, but instead you're creating one in the render method. That's why the submit delegate event does not get bound, and instead you're submitting the form on the page. That form submit goes to the same URL, which triggers the Jasmine suite to be run again, resulting in a loop.

如果您稍微修改一下代码，那么你将会发现此版本有效，因为< form> 元素在生成视图之前就已存在。

If you modify your code a bit, you'll find that this version works, as the <form> element exists before the view is generated.

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();
    });
});​

这篇关于使用Jasmine测试Backbone视图时，浏览器页面会保持刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！