Javascript Jasmine测试主干视图事件_Javascript_Backbone.js_Jasmine_Karma Jasmine

Javascript Jasmine测试主干视图事件

javascript backbone.js jasmine

Javascript Jasmine测试主干视图事件,javascript,backbone.js,jasmine,karma-jasmine,Javascript,Backbone.js,Jasmine,Karma Jasmine,我正在尝试使用grunt、karma、jasmine 2和chrome作为输出浏览器来测试我的Backbone.view。我的视图正在响应单击事件： el: $('#wrap'), events: { (...) 'click #sender' : 'observeSender', (...) }, 其中sender是菜单栏中的一个div（由视图呈现），observeSender（）方法会打开一个UI窗口。我对此的测试： it('should s

我正在尝试使用grunt、karma、jasmine 2和chrome作为输出浏览器来测试我的Backbone.view。我的视图正在响应单击事件：

el: $('#wrap'),
events: {
    (...)
    'click #sender'           : 'observeSender',
    (...)
},

其中sender是菜单栏中的一个div（由视图呈现），observeSender（）方法会打开一个UI窗口。我对此的测试：

it('should show error dialog', function() {
    var model = new fooModel({ 'config' : config });
    var view = new barview({ model: model });
    expect($('#errors-dialog').is(':visible')).toBe(false);
    sender = $('#wrap').find('div#sender').eq(0);
    sender.trigger('click');
    expect($('#errors-dialog').is(':visible')).toBe(true);
});

这个测试失败了。我尝试了很多东西，最后，如果我改变我的观点：

events: {
    (...)
    //'click #sender'           : 'observeSender',
    (...)
},
initialize: function(options) {
    (...)
    $('#sender').on('click', function(){ self.observeSender.call(self); });
}

现在测试通过了。第一个示例在尝试应用程序live时工作正常，但不可测试，第二个选项只工作一次，但在重新呈现#发送方（由于其他事件）后不工作。我仍然希望以第一种方式组织它，那么我做错了什么

更新1

按照建议，我将测试中的所有查询都切换到了view.$，但测试仍然失败

expect(view.$('#errors-dialog').is(':visible')).toBe(true);

更新2

我需要澄清observeSender（）方法负责打开UI对话框。从来没有人叫它。我的问题不是DOM中的元素，而是所有元素，我使用Karma Debug Runner和Chrome控制台进行检查

如果我用

console.log（'hello'）替换observeSender方法的全部内容语句，我将永远不会使用第一种方法看到它的输出，在这种方法中，我定义了单击事件“主干方式”。在我看来，测试期间发生了一些事件
更新3
我已经通过了主干库的测试并复制了
输出为：
Expected 0 to be 1.
Error: Expected 0 to be 1.
    at /.../Spec.js:20572
Expected 0 to be 1.
Error: Expected 0 to be 1.
    at /.../Spec.js:20573
Expected 0 to be 2.
Error: Expected 0 to be 2.
    at /.../Spec.js:20576
Expected 0 to be 2.
Error: Expected 0 to be 2.
    at /.../Spec.js:20577
Expected 0 to be 3.
Error: Expected 0 to be 3.
    at /../Spec.js:20581
Expected 0 to be 3.
Error: Expected 0 to be 3.

在Chrome和PhantomJS中运行，结果相同，我现在要去挖掘Jasmine…
我现在正在使用库。因为我使用browserify和jQuery一起构建所有东西，所以将jasmine jQuery库放在我的karma.conf中是行不通的。相反，它必须包含在jQuery之后，因此它会出现在Spec.js中：
var jasminejquery = require('jasmine-jquery');

然后添加装置并触发单击：
describe('Example', function() {
    beforeEach(function(){
        setFixtures('<body><div id="wrap"></div></body>');
    });
    it('should init application and draw stuff', function() {
        var application = new App({container: 'body'});
        // (...)
        $('#sender').click();
    });
});

description（'Example'，function（）{
beforeach（函数（）{
固定装置（“”）；
});
它（'should init application and draw stuff'，function（）{
var application=newapp（{container:'body'}）；
// (...)
$（“#发件人”）。单击（）；
});
});

一切都按预期进行。
是此视图的el
中的#sender
div？是的#wrap是el，#sender本身由其内部的视图渲染。您永远不会将视图附加到DOM。为什么您希望存在$（“#错误对话框”）
？您应该呈现视图，将其附加到DOM中，并使用view.$（）
来查询元素，而不是使用全局jQuery选择器。我省略了大部分代码以保持问题的小型化。我不是检查“错误”对话框是否存在，而是检查它是否可见，因为observeSender方法负责显示它。在我的测试中，我添加了#errors对话框作为固定装置，在应用程序中它位于主模板中。所有元素都存在并被找到，我相信这与视图的事件无关。对于主干视图测试，您几乎肯定希望使用视图。$就像Uzi Kilon说的那样。如果应用程序在现实中运行，这很可能是您的问题。
describe('Example', function() {
    beforeEach(function(){
        setFixtures('<body><div id="wrap"></div></body>');
    });
    it('should init application and draw stuff', function() {
        var application = new App({container: 'body'});
        // (...)
        $('#sender').click();
    });
});