javascript - 使用 qunit.js 查询事件回调测试

Question

我有一个 html 视图，其中包含一个带有“overlay”类的 div 和一个带有“close-overlay”类的关闭按钮。我在 JS 中为他们注册了这样的事件：

$(".overlay").click(function(e){
    var target = $(this); // overlay div

    target.removeClass("hide");

    return target;
});
$(".close-overlay").click(function(e){
    var target = $(e.target) // close-overlay btn
                            .closest(".overlay"); // overlay div

    target.addClass("hide");

    return target;
});

我在 qunit 中进行了如下测试：

test("Basic Test", function(){
    equal($(".overlay").click().hasClass("hide"), false, "Overlay Click" );
    equal($(".close-overlay").click().hasClass("hide"), true, "Overlay Hide" ); 
});

第一个测试通过了，但第二个测试失败了。不知道为什么！有人可以帮忙吗？谢谢。

Answer 1

在您的第二个断言中，您正在测试.close-overlay元素是否具有隐藏类而不是.overlay元素。

所以你的测试应该是：

test("Basic Test", function(){
    equal($(".overlay").click().hasClass("hide"), false, "Overlay Click" );
    var closeOverlayElement = $(".close-overlay");
    closeOverlayElement.click();    
    equal(closeOverlayElement.closest(".overlay").hasClass("hide"), true, "Overlay Hide");
});