siesta-lite
Version:
Stress-free JavaScript unit testing and functional testing tool, works in NodeJS and browsers
168 lines (133 loc) • 6.83 kB
JavaScript
StartTest(function(t) {
// no "mouseenter/leave" events except the IE, and frameworks tends to emulate them
// so we use a "raw" DOM subscription
var subscribeToEvent = function (el, event, handler) {
if (el.addEventListener)
el.addEventListener(event, handler, false)
else
if (el.attachEvent)
el.attachEvent('on' + event, handler)
else
throw "Can't subscribe to event"
}
var logEvent = function (el, eventName, log, rawLog, counter, includeInLog) {
var id = el.id
subscribeToEvent(el, eventName, function (event) {
counter[ id ] = counter[ id ] || {}
counter[ id ][ eventName ] = counter[ id ][ eventName ] || 0
counter[ id ][ eventName ]++
if (includeInLog !== false) {
rawLog.push(event)
log.push(id + '/' + eventName + '/' + (event.relatedTarget ? event.relatedTarget.id : 'null'))
}
})
}
var BR = t.bowser
var hasMouseEnter = ('onmouseenter' in window) || BR.msie || BR.gecko && BR.version >= 10 || BR.chrome && BR.version >= 30 || BR.safari
t.testJQuery(function (t) {
t.it('should work', function (t) {
var parent = Ext.getBody().createChild({
id : 'parent',
tag : 'div',
style: 'margin:20px;width:200px;height:200px;background:#ccc;position: relative;'
});
var child = parent.createChild({
id : 'child',
tag : 'div',
style: 'position: absolute; left: 50px; top: 50px; width:100px;height:100px;background:#666;;'
});
var body = document.body
body.id = 'body'
document.documentElement.id = 'html'
var eventsLog = []
var eventsRawLog = []
var counter = {}
var bubbledToDoc = false
subscribeToEvent(t.global.document, 'mousemove', function () { bubbledToDoc = true })
t.chain(
{ moveMouseTo : [ 100, 0 ] },
function (next) {
logEvent(body, 'mouseover', eventsLog, eventsRawLog, counter)
logEvent(body, 'mouseout', eventsLog, eventsRawLog, counter)
logEvent(body, 'mouseenter', eventsLog, eventsRawLog, counter)
logEvent(body, 'mouseleave', eventsLog, eventsRawLog, counter)
logEvent(body, 'mousemove', eventsLog, eventsRawLog, counter, false)
logEvent(parent.dom, 'mouseover', eventsLog, eventsRawLog, counter)
logEvent(parent.dom, 'mouseout', eventsLog, eventsRawLog, counter)
logEvent(parent.dom, 'mouseenter', eventsLog, eventsRawLog, counter)
logEvent(parent.dom, 'mouseleave', eventsLog, eventsRawLog, counter)
logEvent(parent.dom, 'mousemove', eventsLog, eventsRawLog, counter, false)
logEvent(child.dom, 'mouseover', eventsLog, eventsRawLog, counter)
logEvent(child.dom, 'mouseout', eventsLog, eventsRawLog, counter)
logEvent(child.dom, 'mouseenter', eventsLog, eventsRawLog, counter)
logEvent(child.dom, 'mouseleave', eventsLog, eventsRawLog, counter)
logEvent(child.dom, 'mousemove', eventsLog, eventsRawLog, counter, false)
next()
},
{ moveMouseTo : [ 100, 250 ] },
function() {
// no "mouseenter/leave" events except the IE
t.isDeeply(counter.child, {
mouseover : 1,
mouseout : 1,
mouseenter : hasMouseEnter ? 1 : 0 ,
mouseleave : hasMouseEnter ? 1 : 0,
mousemove : t.any()
}, 'Correct events detected for child');
t.isDeeply(counter.parent, {
mouseover : 3,
mouseout : 3,
mouseenter : hasMouseEnter ? 1 : 0,
mouseleave : hasMouseEnter ? 1 : 0,
mousemove : t.any()
}, 'Correct events detected for parent');
t.isGreater(counter.parent.mousemove, 0, "Mouse move fired for parent")
t.isGreater(counter.child.mousemove, 0, "Mouse move fired for child")
t.ok(bubbledToDoc, '`mousemove` event bubbled up to document')
t.isDeeply(eventsLog, [
"parent/mouseover/html",
"body/mouseover/html",
"body/mouseenter/html",
"parent/mouseenter/html",
"parent/mouseout/child",
"body/mouseout/child",
"child/mouseover/parent",
"parent/mouseover/parent",
"body/mouseover/parent",
"child/mouseenter/parent",
"child/mouseout/parent",
"parent/mouseout/parent",
"body/mouseout/parent",
"child/mouseleave/parent",
"parent/mouseover/child",
"body/mouseover/child",
"parent/mouseout/body",
"body/mouseout/body",
"parent/mouseleave/body",
"body/mouseover/parent"
])
}
);
})
t.it('`mouseenter/leave` should work correctly', function (t) {
document.body.innerHTML =
'<div id="outer" style="position:absolute; width: 100px; height: 100px;left:0;top:0;">' +
'<div id="inner" style="position:absolute; width: 50px; height: 50px;left:25px;top:25px">' +
'Some text' +
'</div>' +
'</div>'
t.chain(
{ moveCursorTo : [ 150, 50 ] },
t.getSubTest('going outside', function (t) {
t.firesOk('#outer', 'mouseenter', 1)
t.firesOk('#outer', 'mouseleave', 0)
t.firesOk('#inner', 'mouseenter', 1)
t.firesOk('#inner', 'mouseleave', 0)
t.chain(
{ moveCursorTo : [ 50, 50 ] }
)
})
)
})
})
});