Управлять событиями пользовательского интерфейса клика по порядку в jQuery

Question

У меня есть <input type="checkbox" />, к которому привязан обработчик кликов с помощью функции jQuery .click. Затем он выполняет некоторые вычисления в зависимости от своего состояния:

$(':checkbox').click(function () {
    if (this.checked) {
        console.log("ACTIVE");
    } else {
        console.log("INACTIVE");
    }
});

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

$(testElement).click();

Проблема в том, что обработчик вызывается до действия браузера по умолчанию, поэтому значения this.checked обращаются в обратном направлении. То есть атрибут checked не изменяется до тех пор, пока не запустится мой обработчик.

Есть ли способ обойти это? Могу ли я связать другое событие? Есть ли другой способ вызвать щелчки программно?

Answer 1

Глядя на это сообщение в блоге , вы можете получить поведение, на которое смотрите, выполнив следующие действия:

$( ":checkbox" )[ 0 ].checked = !$( ":checkbox" )[ 0 ].checked;
$(":checkbox" ).triggerHandler( "click" );

И с использованием triggerHandler(), вы будете запускать только события, связанные jQuery, а не поведение по умолчанию.

Пример кода для jsfiddle .

Answer 2

Попробуйте

$(":checkbox").change(function(){
    if($(this).is(":checked")){
        console.log("ACTIVE");
    } else {
        console.log("INACTIVE");
    }
});

$(":checkbox").attr("checked", true).change();

Answer 3

Зачем обременять свои юнит-тесты тестированием jQuery? Используйте код непосредственно в анонимных функциях для повседневных вещей, а для более важных вещей используйте отдельную функцию, которую можно протестировать независимо

Примерно так:

$(':checkbox').click(function () { checkboxClickHandler($(this)); });

А в вашем модульном тесте:

checkboxClickHandler($(':checkbox'));

И ваша функция:

function checkboxClickHandler(element)
{
    alert(element.is(':checked'));
}