События, которые не запускаются в тестах QUnit

Question

Я новичок в QUnit. Я использую jQuery (протестирован с 1.4.2 и 1.5.1) и последнюю версию QUnit. Я могу просто инициировать события в одном тесте, но любой тест впоследствии не проходит. Вот упрощенное воспроизведение:

// code under test - "#Test1" is just an empty div
$(document).ready(function() {
  $('#Test1').mouseenter(function(e) { console.log('ENTER');});
  $('#Test1').mouseleave(function(e) { console.log('LEAVE');});
});

// tests
test('enter', function() {
    $('#Test1').mouseenter();
});

test('leave', function() {
    $('#Test1').mouseleave();
});

Когда я запускаю тесты, консоль выводит только ENTER. Однако, если я использую один тест ...

test('enterleave', function() {
    $('#Test1').mouseenter();
    $('#Test1').mouseleave();
});

... консоль выводит ENTER и LEAVE. Я пытался использовать QUEIT TriggerEvent, JQuery.trigger и т. Д. Безрезультатно. Эта проблема воспроизводится в нескольких браузерах. Правильно ли я тестирую события?

Полное воспроизведение здесь: http://jsbin.com/obehu5/edit.

Answer 1

QUnit, по-видимому, очищает привязку события для элемента при возникновении триггера. Я исправил эту проблему, переместив мой код "init" в настройку QUnit. Я не уверен, является ли это хорошей практикой или нет, но, похоже, это решило проблему. Я также исправил образец сверху: http://jsbin.com/obehu5/5/.

Answer 2

Попробуйте сначала создать объект события

Пример,

var e = jQuery.Event("keydown", true);
e.which = 40;  // down key
e.stopImmediatePropagation();

Затем в вашем тесте

$('#testEmpty').trigger( e ); // down  

Без stopImmediatePropagation мой тест также не удался из-за нескольких вызовов,Это может немного помочь.

Answer 3

изменить свой идентификатор на класс.на каждой странице разрешен только один уникальный идентификатор, поэтому jquery перестает присматривать за первым идентификатором, и функция никогда не срабатывает во втором случае.

$(document).ready(function(){

    //change the id to a class
    $(".test1").mouseenter(function(){
        console.log("enter");
    });

    $(".test1").mouseleave(function(){
        console.log("leave");
    });

});