I'm new to Jasmine and have so far was able to set up a couple of basic tests. 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
My test should be able to determine whether on click of a link a div container expands - I determine this by it classname.
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
<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
!
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
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.
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>') });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.