模拟鼠标点击茉莉花单元测试

我是新来的茉莉花，迄今能够设置几个基本测试。我现在试图做的是创建一个模拟鼠标点击事件的元素，例如div，标签等测试模拟鼠标点击茉莉花单元测试

我的测试应该能够确定是否点击一个div容器扩展的链接 - 我通过它的classname来确定它。

我的源代码中有一个事件侦听器监听点击事件：

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>

我试图单元测试是：

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

});

但是，点击事件似乎从来没有被源代码拾起。

我在做什么错？

在此先感谢

来源

2011-12-06 user502014

找到答案使用createevent和initevent方法：var e = document.createEvent（“MouseEvents”）; e.initEvent（“click”，true，false）; toggleBtn.dispatchEvent（e）; – user502014

问题是由查询触发的事件默认情况下没有目标对象。试试这个：

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

来源

2011-12-06 23:27:51

感谢我遇到的问题是，源代码不会接受点击事件。如果我在Jasmine规范的“it”块中绑定了一个点击监听器，则会启动click事件。所以点击被正确解除了，但是代码没有把它捡起来，任何想法 - 这是茉莉花的限制吗？ – user502014

hi @Andreas，我想在我的单元测试中触发'mouseenter'，但不是运气！我可以为此活动添加目标吗？你有关于这个的任何文件吗？谢谢！ –

我想你可以简单地触发像这样的$ el.trigger（'mouseenter'）'元素的事件。这应该表现得像一个正常事件。如果没有，只需开一个新问题。 –

jQuery的trigger方法既不浏览器创建一个真正的事件，也不要求与核心JS方法，如addEventListener注册的事件处理！

有一个在github上所使用jQuery开发团队在测试时涉及到本地浏览器的事件，在这里的一个项目是插件：https://github.com/eduardolundgren/jquery-simulate

的想法是真实的事件最终会时，它会调用一个jQuery处理程序开始流动和奖金是，即使其他类型的处理程序注册没有jquery也会回应。

来源

2013-12-31 10:17:44 centurian

模拟鼠标点击茉莉花单元测试

回答

相关问题