자스민 단위 테스트로 마우스 클릭 시뮬레이션

Question

저는 재스민을 처음 접했고 몇 가지 기본 테스트를 설정할 수있었습니다. 내가 지금하려고하는 것은 div, tag 등의 요소에서 마우스 클릭 이벤트를 시뮬레이트하는 테스트를 만드는 것입니다.

div 테스트를 통해 링크가 클릭되는지 여부를 결정할 수 있어야합니다. 그것을 classname으로 결정하십시오.

describe("Filter", function() { 

    it("should use collapse function", function() { 
     loadFixtures('fixture.html'); 
     var filter = new MYSITE.sites.retail.UI.Product.Filter(); 

     jQuery.noConflict(); 
     var btn = jQuery("#filterHeader"); 
     var click = jQuery.Event('click'); 
     btn.trigger(click); 

     expect(filter.toggle.className).toEqual("filterHeader open"); 
    }); 

}); 

:

MYSITE.$("sites.retail.UI.Product").Filter = (function() { 

    var STATE = MYSITE.system.BitState; 
    var NODE = MYSITE.system.DOM.node; 

    function _constructor() { 
     var _searchContainer = document.getElementById("filterWidget"); 
     this.toggle = document.getElementById("filterHeader"); 
     var _self = this; 
     MYSITE.system.event.attach(_searchContainer, "click", 
      function (e) { 
       if (NODE.hasClassName(e.target, "filterHeader")) { 
        if (!STATE.Manager.isFlagSelected('Global', null, STATE.Flags.Global.ProductListShowRefinements)) { 
         _self.collapse(); 
        } else { 
         MYSITE.system.DOM.node.removeClassName(document.getElementById('filterCollapse'), "hide") 
         _self.expand(); 
        } 
        e.prevent(); 
       } 
       else if (NODE.hasClassName(e.target, "showMoreCont")) { 
        NODE.addClassName(NODE.getElementsByClassAndTagName(_searchContainer, "searchShowMoreCount", "div")[0], "hide"); 
        NODE.removeClassName(NODE.getElementsByClassAndTagName(_searchContainer, "hiddenSearchContent", "div")[0], "hide"); 
        e.prevent(); 
       } 
       else if (NODE.hasClassName(e.target, "showLessCont")) { 
        NODE.removeClassName(NODE.getElementsByClassAndTagName(_searchContainer, "searchShowMoreCount", "div")[0], "hide"); 
        NODE.addClassName(NODE.getElementsByClassAndTagName(_searchContainer, "hiddenSearchContent", "div")[0], "hide"); 
        e.prevent(); 
       } 
      } 
     ); 



     _constructor.base.constructor.call(this, document.getElementById("filterWidget"), STATE.Manager.isFlagSelected('Global', null, STATE.Flags.Global.ProductListShowRefinements)); 
     return this; 
    } 
    _constructor.extend(MYSITE.UI.Collapse); 

    _constructor.prototype.collapse = function (settings) { 
     this.toggle.className = "filterHeader closed"; //Set explicitly rather than addNew 
     STATE.Manager.setFlag('Global', null, parseInt(STATE.Flags.Global.ProductListShowRefinements)); 
     _constructor.base.collapse.call(this, { steps: '1' }); 
    } 

및 HTML 마크 업

<div id="filterWidget"> 
<a class="filterHeader closed" id="filterHeader" href="#"> 
<span class="filterHeader">Refine your search</span> 
</a> 
<div class="collapsible" id="filterCollapse"> 
<div class="content"> 
</div></div></div> 

내가 시도하고 단위 테스트입니다 :

내 소스 코드는 클릭 이벤트를 수신 이벤트 리스너를 가지고 그러나 click 이벤트는 소스 코드에 의해 선택되지 않습니다.

내가 뭘 잘못하고 있니? 사전

Answer 1

문제에

감사는 기본적으로 대상 객체가없는 쿼리에 의해 트리거 이벤트입니다. 이 시도 :

var click = jQuery.Event("click", { target: $('<div class="">test</div>') }); 

Answer 2

jQuery의 trigger 방법도 브라우저에서 실제 이벤트를 생성하거나 addEventListener 같은 핵심 JS 방법에 등록 된 이벤트 핸들러를 호출! 테스트는 여기에 기본 브라우저 이벤트를 포함하고 때 JQuery와 팀에 의해 사용되는 GitHub의에서 프로젝트가있다

는 플러그인 : https://github.com/eduardolundgren/jquery-simulate

아이디어는 때하는 실제 이벤트가 궁극적으로 JQuery와 핸들러를 호출하는 것입니다 흐르는 듯 시작하고 보너스는 심지어 jquery없이 등록 된 다른 종류의 핸들러도 반응한다는 것입니다.