Question

I have a html view which contains a div with class “overlay” and a close button with class “close-overlay”. I have events registered in JS for them like this :

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

and I’ve tests in qunit as below :

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

The first test is getting passed , but the second one is getting failed. Have no idea why !
Could someone please help ? Thanks.

Answer 1

In your second assertion, you are testing that the .close-overlay element has the hide class instead of the .overlay element.

So your test should be:

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");
});