Question

我尝试使用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); });
}

现在测试通过了。第一个示例在尝试实时应用时工作正常，但它不可测试，第二个选项可以工作一次但不会在重新呈现#sender之后（由于其他事件）。我仍然希望第一种方式组织起来，所以我做错了什么？

更新1

根据建议，我在测试中切换了所有查询以查看。$，但测试仍然失败

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

更新2

我需要澄清一下，observeSender（）方法负责启动UI对话框。永远不会被称为。我的问题不是关于DOM中的元素，它都在那里，我使用Karma Debug Runner和Chrome控制台来检查它。

如果我用console.log('hello');语句替换observeSender方法的全部内容，我将永远不会使用第一种方法看到它的输出，我定义了点击事件＆＃34;骨干方式＆＃34; 。在我看来，测试期间事件正在发生一些事情。

更新3

我已经完成了骨干库的测试并复制了a test from their view tests

it('should delegateEvents', function() {
    var counter1 = 0, counter2 = 0;

    var view = new Backbone.View({el: '#testElement'});
    view.increment = function(){ counter1++; };
    view.$el.on('click', function(){ counter2++; });

    var events = {'click h1': 'increment'};

    view.delegateEvents(events);
    view.$('h1').trigger('click');
    expect(counter1).toBe(1);
    expect(counter2).toBe(1);

    view.$('h1').trigger('click');
    expect(counter1).toBe(2);
    expect(counter2).toBe(2);

    view.delegateEvents(events);
    view.$('h1').trigger('click');
    expect(counter1).toBe(3);
    expect(counter2).toBe(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，同样的结果，我现在要去挖掘茉莉花......

Answer 1

我现在正在使用jasmine-jquery库。由于我使用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();
    });
});

一切都按预期工作。

Jasmine测试Backbone查看事件

1 个答案: