siesta-lite
Version:
Stress-free JavaScript unit testing and functional testing tool, works in NodeJS and browsers
309 lines (256 loc) • 11.1 kB
JavaScript
StartTest(function (t) {
t.it('dragTo: Should support options when dragging', function (t) {
document.body.innerHTML =
'<div id="div" style="position:absolute; left: 0; top: 0px; height:50px; width:50px;background:red;">div</div>'
t.$('#div').bind('mousedown', function (e) {
t.it('mousedown', function (t) {
t.is(e.clientX, 20, 'Correct X');
t.is(e.clientY, 30, 'Correct Y');
t.ok(e.shiftKey, 'options passed through for mousedown');
})
});
t.$('#div').bind('mouseup', function (e) {
t.it('mouseup', function (t) {
t.is(e.clientX, 30, 'Correct X');
t.is(e.clientY, 40, 'Correct Y');
t.ok(e.shiftKey, 'options passed through for mouseup');
});
});
t.$('#div').bind('click', function (e) {
t.it('click', function (t) {
t.is(e.clientX, 30, 'Correct X');
t.is(e.clientY, 40, 'Correct Y');
t.ok(e.shiftKey, 'options passed through click');
});
});
t.$('#div').bind('mousemove', function (e) {
t.ok(e.shiftKey, e.type + ' options passed through');
})
t.chain(
{
drag : '#div',
fromOffset : [ 20, 30 ],
to : document.body,
toOffset : [ 30, 40 ],
options : { shiftKey : true }
},
function () {
t.$('#div').unbind('mousemove');
t.$('#div').unbind('mousedown');
t.$('#div').unbind('mouseup');
t.$('#div').unbind('click');
}
)
})
t.it('dragTo: Should return promise', function (t) {
document.body.innerHTML =
'<div id="div" style="position:absolute; left: 0; top: 0px; height:50px; width:50px;background:red;">div</div>'
t.$('#div').bind('mousedown', function (e) {
t.it('mousedown', function (t) {
t.is(e.clientX, 20, 'Correct X');
t.is(e.clientY, 30, 'Correct Y');
t.ok(e.shiftKey, 'options passed through for mousedown');
})
});
t.$('#div').bind('mouseup', function (e) {
t.it('mouseup', function (t) {
t.is(e.clientX, 30, 'Correct X');
t.is(e.clientY, 40, 'Correct Y');
t.ok(e.shiftKey, 'options passed through for mouseup');
});
});
t.$('#div').bind('click', function (e) {
t.it('click', function (t) {
t.is(e.clientX, 30, 'Correct X');
t.is(e.clientY, 40, 'Correct Y');
t.ok(e.shiftKey, 'options passed through click');
});
});
t.dragTo('#div', document.body, null, null, { shiftKey : true }, false, [ 20, 30 ], [ 30, 40 ]).then(function () {
t.$('#div').unbind('mousedown');
t.$('#div').unbind('mouseup');
t.$('#div').unbind('click');
})
})
t.it('dragBy: Should support options when dragging', function (t) {
document.body.innerHTML =
'<div id="div" style="position:absolute; left: 0; top: 0px; height:50px; width:50px;background:red;">div</div>'
t.$('#div').bind('mousedown', function (e) {
t.is(e.clientX, 20, e.type + 'Correct X');
t.is(e.clientY, 30, e.type + 'Correct Y');
t.ok(e.shiftKey, e.type + 'options passed through for mousedown');
})
t.$('#div').bind('mousemove', function (e) {
t.ok(e.shiftKey, e.type + ' options passed through');
})
t.$('#div').bind('mouseup', function (e) {
t.is(e.clientX, 30, e.type + 'Correct X');
t.is(e.clientY, 40, e.type + 'Correct Y');
t.ok(e.shiftKey, e.type + 'options passed through for mouseup');
});
t.$('#div').bind('click', function (e) {
t.is(e.clientX, 30, e.type + 'Correct X');
t.is(e.clientY, 40, e.type + 'Correct Y');
t.ok(e.shiftKey, e.type + 'options passed through click');
});
t.chain(
{
drag : '#div',
fromOffset : [ 20, 30 ],
by : [ 10, 10 ],
options : { shiftKey : true }
},
function () {
t.$('#div').unbind('mousedown');
t.$('#div').unbind('mousemove');
t.$('#div').unbind('mouseup');
t.$('#div').unbind('click');
}
)
})
// native FF does fire click in this case
if (!(t.bowser.firefox && t.simulator.type == 'native'))
t.it('drag should NOT fire click event if mouseup moves target to another parent', function (t) {
document.body.innerHTML =
'<div id="newcontainer" style="position:absolute; left: 0; top: 0px; height:50px; width:100px;background:#aaa;"></div>' +
'<div id="div" style="position:absolute; left: 0; top: 0px; height:50px; width:50px;background:red;">div</div>'
var div = t.$('#div')[ 0 ];
t.$(div).bind('mousedown', function (e) {
t.$(document.body).bind('mousemove', function (e) {
div.style.left = (e.clientX - 25) + 'px';
});
t.$(document.body).bind('mouseup', function (e) {
document.getElementById('newcontainer').appendChild(div);
t.$(document.body).unbind('mousemove');
t.$(document.body).unbind('mouseup');
});
})
t.willFireNTimes(div, 'mousedown', 1);
t.willFireNTimes(div, 'mouseup', 1);
t.wontFire(div, 'click');
t.wontFire(document.body, 'click');
// document.getElementById('newcontainer').addEventListener('click', function (e) {
// console.log(e.type, e.target)
// })
// document.body.addEventListener('click', function (e) {
// console.log(e.type, e.target)
// })
// div.addEventListener('click', function (e) {
// console.log(e.type, e.target)
// })
// div.addEventListener('mouseup', function (e) {
// console.log(e.type, e.target)
// })
// div.addEventListener('mousedown', function (e) {
// console.log(e.type, e.target)
// })
t.chain(
{ drag : div, by : [ 20, 0 ] }
)
});
t.it('drag should fire click event on closest parent element if mouseup is on another element', function (t) {
var BR = t.bowser
document.body.innerHTML =
'<div id="container" style="position:absolute; left: 0; top: 0px; height:50px; width:100px;background:#aaa;">' +
'<div id="div1" style="position:absolute; left: 0; top: 0px; height:50px; width:50px;background:red;">div</div>' +
'<div id="div2" style="position:absolute; left: 50px; top: 0px; height:50px; width:50px;background:blue;">div</div>' +
'</div>';
var div1 = t.$('#div1')[ 0 ];
var div2 = t.$('#div2')[ 0 ];
var container = t.$('#container')[ 0 ];
var containerClickCalled = false;
t.willFireNTimes(div2, 'mousedown', 1);
t.willFireNTimes(div1, 'mouseup', 1);
t.wontFire(div1, 'click');
t.wontFire(div2, 'click');
t.$(container).bind('click', function () {
containerClickCalled = true;
})
// var handler = function (e) {
// console.log(e.type, this.id || this.tagName);
// }
//
// var nodes = [
// div1,
// div2,
// container,
// document.body
// ];
//
// nodes.forEach(function(el) {
// el.addEventListener('click', handler)
// el.addEventListener('mouseup', handler)
// el.addEventListener('mousedown', handler)
// });
t.chain(
{ drag : div2, to : div1 },
function () {
t.is(containerClickCalled, BR.gecko || BR.safari ? false : true, 'Chrome + IE drag should fire click event on common ancestor node of targets of mousedown/mouseup actions');
}
)
});
t.it('drag should NOT fire click event if mousedown removes the node from DOM', function (t) {
document.body.innerHTML =
'<div id="div" style="position:absolute; left: 0; top: 0px; height:50px; width:50px;background:red;">div</div>'
var div = t.$('#div')[ 0 ];
t.$(div).bind('mousedown', function (e) {
document.body.removeChild(div);
t.$(document.body).unbind('mousedown');
})
t.willFireNTimes(document.body, 'mouseup', 1);
t.wontFire(document.body, 'click');
t.wontFire(div, 'mouseup');
t.wontFire(div, 'click');
//
// document.body.addEventListener('click', function (e) {
// console.log(e.type, e.target)
// })
// div.addEventListener('click', function (e) {
// console.log(e.type, e.target)
// })
// div.addEventListener('mouseup', function (e) {
// console.log(e.type, e.target)
// })
// div.addEventListener('mousedown', function (e) {
// console.log(e.type, e.target)
// })
t.chain(
{ drag : div, by : [ 20, 0 ] }
)
});
t.it('drag should NOT fire click event if mouseup removes the node from DOM', function (t) {
document.body.innerHTML =
'<div id="div" style="position:absolute; left: 0; top: 0px; height:50px; width:50px;background:red;">div</div>'
var div = t.$('#div')[ 0 ];
t.$(div).bind('mousedown', function (e) {
t.$(document.body).bind('mousemove', function (e) {
div.style.left = (e.clientX - 25) + 'px';
});
t.$(document.body).bind('mouseup', function (e) {
document.body.removeChild(div);
t.$(document.body).unbind('mousemove');
t.$(document.body).unbind('mouseup');
t.$(div).unbind('mousedown');
});
})
t.willFireNTimes(div, 'mousedown', 1);
t.willFireNTimes(div, 'mouseup', 1);
t.wontFire(div, 'click');
t.wontFire(document.body, 'click');
// document.body.addEventListener('click', function (e) {
// console.log(e.type, e.target)
// })
// div.addEventListener('click', function (e) {
// console.log(e.type, e.target)
// })
// div.addEventListener('mouseup', function (e) {
// console.log(e.type, e.target)
// })
// div.addEventListener('mousedown', function (e) {
// console.log(e.type, e.target)
// })
t.chain(
{ drag : div, by : [ 20, 0 ] }
)
});
});