Жасмин тест Макинтош события

Я пытаюсь проверить мой Backbone.view с помощью grunt, karma, jasmine 2 и chrome в качестве браузера вывода. Мое мнение реагирует на событие щелчка:Жасмин тест Макинтош события

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

Где отправитель в DIV (вынесенное по мнению) в строке меню и метод observeSender() вызывает окно пользовательского интерфейса. Мой тест для этого:

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 (из-за других событий). Я все равно хотел бы, чтобы он организовал первый путь, так что я делаю неправильно?

Update 1

Как предложил я переключил все мои вопросы в тесте для просмотра. $, Но тест-прежнему не на

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

Update 2

I необходимо выяснить, что метод observSender() отвечает за создание диалогового окна пользовательского интерфейса. Его никогда не называют. Мой вопрос не в элементах DOM, это все, я использую Karma Debug Runner и консоль Chrome, чтобы проверить это.

Если я заменил все содержимое метода observSender оператором console.log('hello');, я никогда не увижу его вывод, используя первый подход, в котором я определяю событие click «основной путь». Как я вижу, во время теста происходит что-то с событиями .

Update 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, тот же результат, я собираюсь поехать в Жасмин сейчас ...

источник

2014-12-16 M_rivermount

Является ли '# sender' div внутри этого представления' el'? – bowheart

Да #wrap - это el, #sender сам визуализируется видом внутри него –

Вы никогда не добавляете свой взгляд на DOM. почему вы ожидаете существования '$ ('# errors-dialog')'? Вы должны визуализировать представление, добавить его в DOM и использовать 'view. $()' Для запроса элементов, вместо использования глобальных селекторов jQuery. –

Теперь я пользуюсь библиотекой jasmine-jquery. Поскольку я использую браузер для создания всего, вместе с 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(); 
    }); 
});

и все работает, как ожидалось.

источник

2015-02-24 21:48:28

Жасмин тест Макинтош события

ответ

Смежные вопросы