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

Query regarding event callback tests with qunit.js

本文关键字：回调 测试 事件 查询 qunit js 使用      更新时间：2023-09-26

我有一个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" ); 
});

第一次考试及格了，但第二次考试不及格了。不知道为什么！有人能帮忙吗？谢谢

在第二个断言中，您正在测试.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");
});
相关文章：