ジャスミンユニットのテストでマウスクリックをシミュレートする

Question

私はジャスミンを初めて使用しており、これまでにいくつかの基本テストを設定できました。私が今しようとしているのは、div、タグなどの要素のマウスクリックイベントをシミュレートするテストを作成することです。

私のテストでは、divコンテナが展開されたリンクをクリックするかどうかを判断できますそれをクラス名で判断する。

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> 

私がしようとしていますユニットテストは次のとおりです。

私のソースコードは、クリックイベントをリッスンするイベントリスナーを持っていますしかし、クリックイベントは、ソースコードによって決して受け入れられないようです。

私は間違っていますか？事前

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なしで登録された他の種類のハンドラでも応答するということです。