qunit.js를 사용한 이벤트 콜백 테스트 관련 질문

Question

"overlay"클래스의 div와 "close-overlay"클래스의 닫기 버튼이 포함 된 HTML보기가 있습니다. 나는이 같은 그들을 위해 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 요소 대신 hide 클래스가 있는지 테스트하고 있습니다.

그래서 테스트는 다음과 같아야합니다

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