Question

我有一个<input type="checkbox" />，它有一个点击处理程序通过jQuery的.click函数绑定到它。然后根据其状态执行一些计算：

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

在UI中这一切都很好，但是，在我的单元测试中，我想模拟对此元素的单击并确保运行正确的代码。

$(testElement).click();

问题是处理程序在默认浏览器操作之前被称为，因此this.checked的值被反转。也就是说，在我的处理程序运行之后，它才会更改checked属性。

这有什么办法吗？我可以绑定一个不同的事件吗？是否有不同的方式以编程方式触发点击？

Answer 1

通过执行以下操作，您可以查看此blog post以获得您所看到的行为：

$( ":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'));
}

在jQuery中控制订单触发的点击UI事件

3 个答案: