[英]Simulate mouse click with Jasmine Unit testing
I'm new to Jasmine and have so far was able to set up a couple of basic tests. 我是Jasmine的新手,到目前为止已经能够设置几个基本测试。 What I am now trying to do is to create a test that simulates a mouse click event on an element eg div, a tag etc 我现在要做的是创建一个模拟鼠标点击事件的测试,例如div,tag等
My test should be able to determine whether on click of a link a div container expands - I determine this by it classname. 我的测试应该能够确定点击链接div容器是否扩展 - 我通过它的类名来确定。
My source code has an event listener listening for a click events: 我的源代码有一个事件监听器监听点击事件:
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' });
}
and HTML markup is 和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>
The unit test I am attempting is: 我正在尝试的单元测试是:
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");
});
});
But the click event never seems to be picked up by the source code. 但点击事件似乎从未被源代码拾取。
What am I doing wrong? 我究竟做错了什么?
Thanks in advance 提前致谢
jquery's trigger
method neither creates a real event on browser nor calls event handlers registered with core js methods like addEventListener
! jquery的trigger
方法既不在浏览器上创建真实事件也不调用使用核心js方法注册的事件处理程序,如addEventListener
!
There is a project at github that is used by the jquery team when testing involves native browser events and here is the plugin: https://github.com/eduardolundgren/jquery-simulate 在测试涉及本机浏览器事件时,jquery团队使用github上的一个项目,这里是插件: https : //github.com/eduardolundgren/jquery-simulate
The idea is that a real event will ultimately call a jquery handler when it will start flowing and the bonus is that even other kind of handlers registered without jquery will respond too. 这个想法是一个真实的事件最终会在它开始流动时调用一个jquery处理程序,并且奖励是即使是在没有jquery的情况下注册的其他类型的处理程序也会响应。
The problem is an event triggered by query doesn't have a target object by default. 问题是由查询触发的事件默认情况下没有目标对象。 Try this: 尝试这个:
var click = jQuery.Event("click", { target: $('<div class="">test</div>') });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.