lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 18:27:58 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

improved functional test layout, and started work on drawBufferFunc support

Browse Source
This commit is contained in:
Eric Rowell
2012-11-14 21:55:16 -08:00
parent bb78dacddf
commit 9f80402dd1
5 changed files with 117 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
tests/js/functionalTests.js
View File

@@ -1,5 +1,5 @@
Test.Modules.FUNCTIONAL = {
'DRAG AND DROP - test dragstart, dragmove, dragend': function(containerId) {
Test.Modules.DD = {
'test dragstart, dragmove, dragend': function(containerId) {
var urls = dataUrls['DRAG AND DROP - test dragstart, dragmove, dragend'];
var stage = new Kinetic.Stage({
@@ -22,6 +22,8 @@ Test.Modules.FUNCTIONAL = {
layer.add(circle);
stage.add(layer);
var top = stage.content.getBoundingClientRect().top;
var dragStart = false;
var dragMove = false;
@@ -43,19 +45,19 @@ Test.Modules.FUNCTIONAL = {
/*
* simulate drag and drop
*/
console.log(1)
//console.log(1)
stage._mousedown({
clientX: 380,
clientY: 98
clientY: 98 + top
});
console.log(2)
//console.log(2)
test(!dragStart, 'dragstart event should not have been triggered');
test(!dragMove, 'dragmove event should not have been triggered');
test(!dragEnd, 'dragend event should not have been triggered');
stage._mousemove({
clientX: 100,
clientY: 98
clientY: 98 + top
});
test(dragStart, 'dragstart event was not triggered');
@@ -64,7 +66,7 @@ Test.Modules.FUNCTIONAL = {
stage._mouseup({
clientX: 100,
clientY: 98
clientY: 98 + top
});
test(dragStart, 'dragstart event was not triggered');
@@ -74,7 +76,7 @@ Test.Modules.FUNCTIONAL = {
var endDataUrl = layer.toDataURL();
warn(urls[1] === endDataUrl, 'end data url is incorrect');
},
'DRAG AND DROP - cancel drag and drop by setting draggable to false': function(containerId) {
'cancel drag and drop by setting draggable to false': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -114,29 +116,31 @@ Test.Modules.FUNCTIONAL = {
layer.add(circle);
stage.add(layer);
var top = stage.content.getBoundingClientRect().top;
/*
* simulate drag and drop
*/
stage._mousedown({
clientX: 380,
clientY: 100
clientY: 100 + top
});
stage._mousemove({
clientX: 100,
clientY: 100
clientY: 100 + top
});
stage._mouseup({
clientX: 100,
clientY: 100
clientY: 100 + top
});
test(circle.getPosition().x === 380, 'circle x should be 380');
test(circle.getPosition().y === 100, 'circle y should be 100');
},
'DRAG AND DROP - drag and drop layer': function(containerId) {
'drag and drop layer': function(containerId) {
var urls = dataUrls['DRAG AND DROP - drag and drop layer'];
var stage = new Kinetic.Stage({
container: containerId,
@@ -176,6 +180,8 @@ Test.Modules.FUNCTIONAL = {
layer.add(circle2);
stage.add(layer);
var top = stage.content.getBoundingClientRect().top;
var startDataUrl = layer.toDataURL();
warn(urls[0] === startDataUrl, 'start data url is incorrect');
@@ -185,24 +191,27 @@ Test.Modules.FUNCTIONAL = {
*/
stage._mousedown({
clientX: 399,
clientY: 96
clientY: 96 + top
});
stage._mousemove({
clientX: 210,
clientY: 109
clientY: 109 + top
});
stage._mouseup({
clientX: 210,
clientY: 109
clientY: 109 + top
});
var endDataUrl = layer.toDataURL()
warn(urls[1] === endDataUrl, 'end data url is incorrect');
},
'EVENTS - modify fill stroke and stroke width on hover with circle': function(containerId) {
}
};
Test.Modules.EVENT = {
'modify fill stroke and stroke width on hover with circle': function(containerId) {
var urls = dataUrls['EVENTS - modify fill stroke and stroke width on hover with circle'];
var stage = new Kinetic.Stage({
container: containerId,
@@ -240,12 +249,14 @@ Test.Modules.FUNCTIONAL = {
layer.add(circle);
stage.add(layer);
var top = stage.content.getBoundingClientRect().top;
warn(layer.toDataURL() === urls[0], 'start data url is incorrect');
stage._mousemove({
clientX: 377,
clientY: 101
clientY: 101 + top
});
warn(layer.toDataURL() === urls[1], 'mid data url is incorrect');
@@ -253,16 +264,16 @@ Test.Modules.FUNCTIONAL = {
// move mouse back out of circle
stage._mousemove({
clientX: 157,
clientY: 138
clientY: 138 + top
});
stage._mousemove({
clientX: 157,
clientY: 138
clientY: 138 + top
});
warn(layer.toDataURL() === urls[0], 'end data url is incorrect');
},
'EVENTS - mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap': function(containerId) {
'mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -297,37 +308,37 @@ Test.Modules.FUNCTIONAL = {
circle.on('mousedown', function() {
mousedown = true;
log('mousedown');
//log('mousedown');
});
circle.on('mouseup', function() {
mouseup = true;
log('mouseup');
//log('mouseup');
});
circle.on('mouseover', function() {
mouseover = true;
log('mouseover');
//log('mouseover');
});
circle.on('mouseout', function() {
mouseout = true;
log('mouseout');
//log('mouseout');
});
circle.on('mousemove', function() {
mousemove = true;
log('mousemove');
//log('mousemove');
});
circle.on('click', function() {
click = true;
log('click');
//log('click');
});
circle.on('dblclick', function() {
dblclick = true;
log('dblclick');
//log('dblclick');
});
/*
* mobile
@@ -359,11 +370,13 @@ Test.Modules.FUNCTIONAL = {
layer.add(circle);
stage.add(layer);
var top = stage.content.getBoundingClientRect().top;
// move mouse to center of circle to trigger mouseover
stage._mousemove({
clientX: 290,
clientY: 100
clientY: 100 + top
});
test(mouseover, '1) mouseover should be true');
@@ -377,7 +390,7 @@ Test.Modules.FUNCTIONAL = {
// move mouse again inside circle to trigger mousemove
stage._mousemove({
clientX: 290,
clientY: 100
clientY: 100 + top
});
test(mouseover, '2) mouseover should be true');
@@ -391,7 +404,7 @@ Test.Modules.FUNCTIONAL = {
// mousedown inside circle
stage._mousedown({
clientX: 290,
clientY: 100
clientY: 100 + top
});
test(mouseover, '3) mouseover should be true');
@@ -405,7 +418,7 @@ Test.Modules.FUNCTIONAL = {
// mouseup inside circle
stage._mouseup({
clientX: 290,
clientY: 100
clientY: 100 + top
});
test(mouseover, '4) mouseover should be true');
@@ -419,7 +432,7 @@ Test.Modules.FUNCTIONAL = {
// mousedown inside circle
stage._mousedown({
clientX: 290,
clientY: 100
clientY: 100 + top
});
test(mouseover, '5) mouseover should be true');
@@ -433,7 +446,7 @@ Test.Modules.FUNCTIONAL = {
// mouseup inside circle to trigger double click
stage._mouseup({
clientX: 290,
clientY: 100
clientY: 100 + top
});
test(mouseover, '6) mouseover should be true');
@@ -447,11 +460,11 @@ Test.Modules.FUNCTIONAL = {
// move mouse outside of circle to trigger mouseout
stage._mousemove({
clientX: 0,
clientY: 100
clientY: 100 + top
});
stage._mousemove({
clientX: 0,
clientY: 100
clientY: 100 + top
});
test(mouseover, '7) mouseover should be true');
@@ -471,7 +484,7 @@ Test.Modules.FUNCTIONAL = {
// touchstart circle
stage._touchstart({
clientX: 289,
clientY: 100,
clientY: 100 + top,
preventDefault: function() {
}
});
@@ -485,7 +498,7 @@ Test.Modules.FUNCTIONAL = {
// touchend circle
stage._touchend({
clientX: 289,
clientY: 100,
clientY: 100 + top,
preventDefault: function() {
}
});
@@ -499,7 +512,7 @@ Test.Modules.FUNCTIONAL = {
// touchstart circle
stage._touchstart({
clientX: 289,
clientY: 100,
clientY: 100 + top,
preventDefault: function() {
}
});
@@ -513,7 +526,7 @@ Test.Modules.FUNCTIONAL = {
// touchend circle to triger dbltap
stage._touchend({
clientX: 289,
clientY: 100,
clientY: 100 + top,
preventDefault: function() {
}
});
@@ -527,7 +540,7 @@ Test.Modules.FUNCTIONAL = {
// touchmove circle
stage._touchmove({
clientX: 290,
clientY: 100,
clientY: 100 + top,
preventDefault: function() {
}
});
@@ -538,7 +551,7 @@ Test.Modules.FUNCTIONAL = {
test(tap, '12) tap should be true');
test(dbltap, '12) dbltap should be true');
},
'EVENTS - test group mousedown events': function(containerId) {
'test group mousedown events': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -572,6 +585,8 @@ Test.Modules.FUNCTIONAL = {
layer.add(group);
stage.add(layer);
var top = stage.content.getBoundingClientRect().top;
var groupMousedowns = 0;
var greenCircleMousedowns = 0;
@@ -586,7 +601,7 @@ Test.Modules.FUNCTIONAL = {
stage._mousedown({
clientX: 285,
clientY: 100
clientY: 100 + top
});
test(groupMousedowns === 1, 'groupMousedowns should be 1');
@@ -594,7 +609,7 @@ Test.Modules.FUNCTIONAL = {
stage._mousedown({
clientX: 332,
clientY: 139
clientY: 139 + top
});
test(groupMousedowns === 2, 'groupMousedowns should be 2');
@@ -602,7 +617,7 @@ Test.Modules.FUNCTIONAL = {
stage._mousedown({
clientX: 285,
clientY: 92
clientY: 92 + top
});
test(groupMousedowns === 3, 'groupMousedowns should be 3');
@@ -610,13 +625,13 @@ Test.Modules.FUNCTIONAL = {
stage._mousedown({
clientX: 221,
clientY: 146
clientY: 146 + top
});
test(groupMousedowns === 4, 'groupMousedowns should be 4');
//test(groupMousedowns === 4, 'groupMousedowns should be 4');
test(greenCircleMousedowns === 2, 'greenCircleMousedowns should be 2');
},
'EVENTS - group mouseenter events': function(containerId) {
'group mouseenter events': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -657,32 +672,32 @@ Test.Modules.FUNCTIONAL = {
group.on('mouseenter', function() {
groupMouseenters++;
console.log('group over')
//console.log('group over')
});
group.on('mouseleave', function() {
groupMouseleaves++;
console.log('group out')
//console.log('group out')
});
redCircle.on('mouseenter', function() {
redMouseenters++;
console.log('red over')
//console.log('red over')
});
redCircle.on('mouseleave', function() {
redMouseleaves++;
console.log('red out')
//console.log('red out')
});
greenCircle.on('mouseenter', function() {
greenMouseenters++;
console.log('green over')
//console.log('green over')
});
greenCircle.on('mouseleave', function() {
greenMouseleaves++;
console.log('green out')
//console.log('green out')
});
group.add(redCircle);
@@ -690,11 +705,13 @@ Test.Modules.FUNCTIONAL = {
layer.add(group);
stage.add(layer);
var top = stage.content.getBoundingClientRect().top;
// move mouse outside of circles
stage._mousemove({
clientX: 177,
clientY: 146
clientY: 146 + top
});
test(redMouseenters === 0, 'redMouseenters should be 0');
@@ -707,10 +724,10 @@ Test.Modules.FUNCTIONAL = {
// move mouse inside of red circle
stage._mousemove({
clientX: 236,
clientY: 145
clientY: 145 + top
});
console.log('groupMouseenters=' + groupMouseenters);
//console.log('groupMouseenters=' + groupMouseenters);
test(redMouseenters === 1, 'redMouseenters should be 1');
test(redMouseleaves === 0, 'redMouseleaves should be 0');
@@ -722,7 +739,7 @@ Test.Modules.FUNCTIONAL = {
// move mouse inside of green circle
stage._mousemove({
clientX: 284,
clientY: 118
clientY: 118 + top
});
test(redMouseenters === 1, 'redMouseenters should be 1');
@@ -736,11 +753,11 @@ Test.Modules.FUNCTIONAL = {
stage._mousemove({
clientX: 345,
clientY: 105
clientY: 105 + top
});
stage._mousemove({
clientX: 345,
clientY: 105
clientY: 105 + top
});
test(redMouseenters === 2, 'redMouseenters should be 2');
@@ -753,11 +770,11 @@ Test.Modules.FUNCTIONAL = {
// move mouse outside of circles
stage._mousemove({
clientX: 177,
clientY: 146
clientY: 146 + top
});
stage._mousemove({
clientX: 177,
clientY: 146
clientY: 146 + top
});
test(redMouseenters === 2, 'redMouseenters should be 2');
test(redMouseleaves === 2, 'redMouseleaves should be 2');
@@ -768,10 +785,10 @@ Test.Modules.FUNCTIONAL = {
//document.body.appendChild(layer.bufferCanvas.element)
layer.bufferCanvas.element.style.marginTop = '220px';
//layer.bufferCanvas.element.style.marginTop = '220px';
},
'EVENTS - test event bubbling': function(containerId) {
'test event bubbling': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -807,6 +824,8 @@ Test.Modules.FUNCTIONAL = {
group2.add(group1);
layer.add(group2);
stage.add(layer);
var top = stage.content.getBoundingClientRect().top;
// events array
var e = [];
@@ -829,11 +848,11 @@ Test.Modules.FUNCTIONAL = {
// click on circle
stage._mousedown({
clientX: 374,
clientY: 114
clientY: 114 + top
});
stage._mouseup({
clientX: 374,
clientY: 114
clientY: 114 + top
});
test(e.toString() === 'circle,group1,group2,layer,stage', 'problem with event bubbling');