siesta-lite
Version:
Stress-free JavaScript unit testing and functional testing tool, works in NodeJS and browsers
317 lines (243 loc) • 13.2 kB
JavaScript
StartTest(function(t) {
//==================================================================================================================================================================================
t.diag("Siesta mouse click simulation");
t.testExtJS(function (t) {
t.it('Verify check box click works', function (t) {
document.body.innerHTML = '<input type="checkbox" />';
t.click('input', function () {
t.selectorExists('input:checked', 'Checkbox should be checked after clicking it');
});
})
t.it('plain simple clicks', function (t) {
var clickDiv = Ext.getBody().createChild({
tag : 'div',
style : 'width : 40px;',
html : 'testing click'
});
t.willFireNTimes(clickDiv, 'mousedown', 1, 'left click is ok #1');
t.willFireNTimes(clickDiv, 'mouseup', 1, 'left click is ok #2');
t.willFireNTimes(clickDiv, 'click', 1, 'left click is ok #3');
clickDiv.on('click', function(event) {
t.is(event.button, 0, 'button to 0 for left click');
// IE and Safari does not support "event.buttons" property
if (!Ext.isIE && !Ext.isSafari) t.is(event.buttons, 1, 'buttons to 1 for left click');
});
t.chain(
{
click : clickDiv
}
)
});
t.it('plain simple clicks with promise', function (t) {
var clickDiv = Ext.getBody().createChild({
tag : 'div',
style : 'width : 40px;',
html : 'testing click'
});
t.willFireNTimes(clickDiv, 'mousedown', 1, 'left click is ok #1');
t.willFireNTimes(clickDiv, 'mouseup', 1, 'left click is ok #2');
t.willFireNTimes(clickDiv, 'click', 1, 'left click is ok #3');
var clicked = false
clickDiv.on('click', function(event) {
clicked = true
t.is(event.button, 0, 'button to 0 for left click');
// IE and Safari does not support "event.buttons" property
if (!Ext.isIE && !Ext.isSafari) t.is(event.buttons, 1, 'buttons to 1 for left click');
});
t.click(clickDiv).then(function () {
t.is(clicked, true, "Click promise resolved correctly")
})
});
t.it('mousedown + mouseup abstraction should fire same event as regular click', function (t) {
var mouseDownUpDiv = Ext.getBody().createChild({
tag : 'div',
style : 'width : 40px;background:red;',
html : 'testing click'
});
t.willFireNTimes(mouseDownUpDiv, 'mousedown', 1);
t.willFireNTimes(mouseDownUpDiv, 'mouseup', 1);
t.willFireNTimes(mouseDownUpDiv, 'click', 1);
mouseDownUpDiv.on('click', function(event) {
t.is(event.button, 0, 'button to 0 for left click');
// IE and Safari does not support "event.buttons" property
if (!Ext.isIE && !Ext.isSafari) t.is(event.buttons, 1, 'buttons to 1 for left click');
});
t.chain(
{ mousedown : mouseDownUpDiv },
{ moveCursorBy : [2,2] },
{ mouseup : mouseDownUpDiv }
)
});
t.it('mousedown + mouseup abstraction should NOT fire click event if mouseup is not in same parent el as the mousedown source', function (t) {
var mouseDownUpDiv = Ext.getBody().createChild({
tag : 'div',
style : 'width : 40px;background:red;',
html : 'testing click'
});
t.willFireNTimes(mouseDownUpDiv, 'mousedown', 1);
t.willFireNTimes(document.body, 'mouseup', 1);
t.wontFire(mouseDownUpDiv, 'mouseup');
t.willFireNTimes(mouseDownUpDiv, 'click', t.bowser.msie || t.bowser.msedge ? '<=1' : 0);
t.mouseDown(mouseDownUpDiv).then(function () {
mouseDownUpDiv.dom.style.display = 'none';
}).then(function () {
return t.mouseUp()
})
});
t.it('right clicks', function (t) {
var rightClickDiv = Ext.getBody().createChild({
tag : 'div',
style : 'width : 40px;',
html : 'testing right click'
});
t.willFireNTimes(rightClickDiv, 'mousedown', 1, 'right click is ok #1');
// Mac doesn't fire mouseup for right click
if (!Ext.isMac) {
t.willFireNTimes(rightClickDiv, 'mouseup', 1, 'right click is ok #2');
}
t.willFireNTimes(rightClickDiv, 'contextmenu', 1, 'right click is ok #3');
rightClickDiv.on('contextmenu', function(event) {
event.preventDefault()
t.is(event.button, 2, 'button to 2 for contextmenu');
// chrome on windows with native fails to set the "buttons" for right click it seems
if (!Ext.isIE && !Ext.isSafari && !(t.simulator.type == 'native' && t.bowser.windows)) t.is(event.buttons, 2, 'buttons to 2 for contextmenu');
});
t.chain(
{
rightClick : rightClickDiv
}
)
});
t.it('double clicks', function (t) {
var doubleClickDiv = Ext.getBody().createChild({
tag : 'div',
style : 'width : 40px;',
html : 'testing double click'
});
t.willFireNTimes(doubleClickDiv, 'mousedown', 2, 'double click is ok #1');
t.willFireNTimes(doubleClickDiv, 'mouseup', 2, 'double click is ok #2');
t.willFireNTimes(doubleClickDiv, 'click', 2, 'double click is ok #3');
t.willFireNTimes(doubleClickDiv, 'dblclick', 1, 'double click is ok #4');
// now clicking in the center of the outer (bigger) div
// but the click should happen on the top-most element at that position in the DOM
var div2 = Ext.getBody().createChild({
tag : 'div',
style : 'width : 100px; height : 100px; background: blue',
children : {
tag : 'div',
style : 'width : 50px; height : 50px; background: yellow; position : relative; top : 25px; left : 25px',
html : ' '
}
});
var innerDiv = div2.child('div')
t.willFireNTimes(innerDiv, 'mousedown', 1, 'top click is ok #1');
t.willFireNTimes(innerDiv, 'mouseup', 1, 'top click is ok #2');
t.willFireNTimes(innerDiv, 'click', 1, 'top click is ok #3');
t.chain(
{
doubleclick : doubleClickDiv
},
{
click : div2
}
)
});
!Ext.isIE10m && t.it("should support clicking SVG element with float values", function (t) {
document.body.innerHTML =
'<svg width="800px" height="800px"><rect id="myrect" x="50.5" y="50.5" width="100.2" height="100.1"></rect></svg>';
//
// The second mouseover is fired as part of the waitForTargetAndSyncMousePosition method
// called from the moveCursor to prepare for the actual action
var firstRect = document.getElementById('myrect');
t.willFireNTimes(firstRect, 'mouseover', 1);
t.willFireNTimes(firstRect, 'mouseout', 1);
t.willFireNTimes(firstRect, 'mouseenter', 1);
t.willFireNTimes(firstRect, 'mouseleave', 1);
t.willFireNTimes(firstRect, 'mousedown', 1);
t.willFireNTimes(firstRect, 'mouseup', 1);
t.willFireNTimes(firstRect, 'click', 1);
t.chain(
{ click : '#myrect' },
// Should trigger inner element 'mouseout' event + 'mouseleave' event (fired manually by Ext if browser doesn't support it)
{ action : 'moveCursor', to : [ 2, 150 ] }
);
})
!Ext.isIE10m && t.it("should support clicking SVG element with translate values", function (t) {
document.body.innerHTML =
'<svg width="800px" height="800px"><g transform="translate(0.5,0.5)"><rect id="myrect" x="50" y="50" width="100" height="100"></rect></g></svg>';
var firstRect = document.querySelector('svg > g rect');
t.willFireNTimes(firstRect, 'mouseover', 1);
t.willFireNTimes(firstRect, 'mouseout', 1);
t.willFireNTimes(firstRect, 'mouseenter', 1);
t.willFireNTimes(firstRect, 'mouseleave', 1);
t.willFireNTimes(firstRect, 'mousedown', 1);
t.willFireNTimes(firstRect, 'mouseup', 1);
t.willFireNTimes(firstRect, 'click', 1);
t.chain(
{ click : '#myrect'},
// Should trigger inner element 'mouseout' event + 'mouseleave' event (fired manually by Ext if browser doesn't support it)
{ action : 'moveCursor', to : [ 2, 150 ] }
);
})
// Interacting with scaled SVG not supported in IE / Edge
!bowser.msie && !bowser.msedge && !bowser.gecko && t.it("should support clicking SVG element with scaled values", function (t) {
document.body.innerHTML =
'<svg width="800px" height="800px" style="position:absolute;left:100px;top:100px"><g transform="scale(0.5)"><rect id="myrect" x="50" y="50" width="100" height="100"></rect></g></svg>';
var firstRect = document.querySelector('svg > g rect');
t.willFireNTimes(firstRect, 'mouseover', 1);
t.willFireNTimes(firstRect, 'mouseout', 1);
t.willFireNTimes(firstRect, 'mouseenter', 1);
t.willFireNTimes(firstRect, 'mouseleave', 1);
t.willFireNTimes(firstRect, 'mousedown', 1);
t.willFireNTimes(firstRect, 'mouseup', 1);
t.willFireNTimes(firstRect, 'click', 1);
t.chain(
{ click : '#myrect'},
// Should trigger inner element 'mouseout' event + 'mouseleave' event (fired manually by Ext if browser doesn't support it)
{ action : 'moveCursor', to : [ 2, 150 ] }
);
})
!bowser.msie && !bowser.msedge && t.it("should support clicking a polyline", function (t) {
document.body.innerHTML =
'<svg style="width: 1px;height: 1px;overflow: visible;position: absolute;pointer-events: none;">' +
'<marker id="arrowStart" markerWidth="12" markerHeight="12" refX="1" refY="3" viewBox="0 0 9 6" orient="auto" markerUnits="userSpaceOnUse">' +
'<path d="M0,3 L9,6 L9,0 z"></path>' +
'</marker>' +
'<marker id="arrowEnd" markerWidth="12" markerHeight="12" refX="8" refY="3" viewBox="0 0 9 6" orient="auto" markerUnits="userSpaceOnUse">' +
'<path d="M0,0 L0,6 L9,3 z"></path>' +
'</marker>' +
'<polyline style="pointer-events:all;fill: transparent;marker-end: url(#arrowEnd);stroke: #999;stroke-width: 1;" class="b-sch-dependency" depId="1" points="300,22.5 312,22.5 312,22.5 312,37 312,37 188,37 188,37 188,68.5 188,68.5 200,68.5"></polyline>' +
'</svg>'
t.firesOk({
observable : '.b-sch-dependency',
events : {
click : 1
}
})
t.chain(
{ click : '.b-sch-dependency', offset : [0, '50%'] }
);
});
!Ext.isIE10m && t.it('moving mouse to svg element should work', function (t) {
document.body.innerHTML = [
'<svg>',
'<marker xmlns="http://www.w3.org/2000/svg" id="arrowEnd" viewBox="0 0 9 6" refX="8" refY="3" markerUnits="userSpaceOnUse" markerWidth="12" markerHeight="12" orient="auto"><path d="M 0 0 L 0 6 L 9 3 Z" /></marker>',
'<polyline style="stroke:#999;marker-end:url(#arrowEnd)" class="target-line" points="100,100 120,120"></polyline>',
'</svg>'
].join('');
var line = document.querySelector('.target-line');
t.willFireNTimes(line, 'mouseover', 1);
t.willFireNTimes(line, 'mouseenter', 1);
t.willFireNTimes(line, 'click', 1);
t.chain(
{ moveMouseTo : '.target-line' },
function (next) {
t.isApprox(t.currentPosition[0], 110, 'X');
t.isApprox(t.currentPosition[1], 110, 'Y');
next();
},
{ click : '.target-line' }
);
});
});
});