lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

now that mousemove and touchmove are async due to throttling, the tests have to be async as well

Browse Source
This commit is contained in:
Eric Rowell 2014-02-26 10:38:03 -08:00
parent 64c657c9ba
commit 160de825fa
5 changed files with 425 additions and 363 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/Global.js
View File

@ -48,6 +48,7 @@ var Kinetic = {};
traceArrMax: 100,
dblClickWindow: 400,
pixelRatio: undefined,
enableThrottling: true,
// user agent
UA: (function() {

210
test/functional/DragAndDropEvents-test.js
View File

@ -1,6 +1,6 @@
suite('DragAndDropEvents', function() {
// ======================================================
test('test dragstart, dragmove, dragend', function() {
test('test dragstart, dragmove, dragend', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
@ -89,51 +89,55 @@ suite('DragAndDropEvents', function() {
assert(!Kinetic.isDragging(), ' isDragging() should be false 5');
assert(Kinetic.isDragReady(), ' isDragReady()) should be true 6');
stage._mousemove({
clientX: 100,
clientY: 98 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 100,
clientY: 98 + top
});
assert(Kinetic.isDragging(), ' isDragging() should be true 7');
assert(Kinetic.isDragReady(), ' isDragReady()) should be true 8');
assert(Kinetic.isDragging(), ' isDragging() should be true 7');
assert(Kinetic.isDragReady(), ' isDragReady()) should be true 8');
assert(dragStart, 'dragstart event was not triggered 9');
//assert.equal(dragMove, 'dragmove event was not triggered');
assert(!dragEnd, 'dragend event should not have been triggered 10');
assert(dragStart, 'dragstart event was not triggered 9');
//assert.equal(dragMove, 'dragmove event was not triggered');
assert(!dragEnd, 'dragend event should not have been triggered 10');
Kinetic.DD._endDragBefore();
stage._mouseup({
clientX: 100,
clientY: 98 + top
});
Kinetic.DD._endDragAfter({dragEndNode:circle});
Kinetic.DD._endDragBefore();
stage._mouseup({
clientX: 100,
clientY: 98 + top
});
Kinetic.DD._endDragAfter({dragEndNode:circle});
assert(dragStart, 'dragstart event was not triggered 11');
assert(dragMove, 'dragmove event was not triggered 12');
assert(dragEnd, 'dragend event was not triggered 13');
assert(dragStart, 'dragstart event was not triggered 11');
assert(dragMove, 'dragmove event was not triggered 12');
assert(dragEnd, 'dragend event was not triggered 13');
assert.equal(events.toString(), 'mouseup,dragend', 'mouseup should occur before dragend 14');
assert.equal(events.toString(), 'mouseup,dragend', 'mouseup should occur before dragend 14');
assert(!Kinetic.isDragging(), ' isDragging() should be false 15');
assert(!Kinetic.isDragReady(), ' isDragReady()) should be false 16');
assert(!Kinetic.isDragging(), ' isDragging() should be false 15');
assert(!Kinetic.isDragReady(), ' isDragReady()) should be false 16');
//console.log(greenCircle.getPosition());
//console.log(circle.getPosition());
//console.log(greenCircle.getPosition());
//console.log(circle.getPosition());
assert.equal(greenCircle.getX(), 40, 'green circle x should be 40');
assert.equal(greenCircle.getY(), 40, 'green circle y should be 40');
assert.equal(circle.getX(), 100, 'circle x should be 100');
assert.equal(circle.getY(), 100, 'circle y should be 100');
assert.equal(greenCircle.getX(), 40, 'green circle x should be 40');
assert.equal(greenCircle.getY(), 40, 'green circle y should be 40');
assert.equal(circle.getX(), 100, 'circle x should be 100');
assert.equal(circle.getY(), 100, 'circle y should be 100');
showHit(layer);
showHit(layer);
done();
}, 20);
});
// ======================================================
test('destroy shape while dragging', function() {
test('destroy shape while dragging', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
@ -194,31 +198,33 @@ suite('DragAndDropEvents', function() {
assert(!circle.isDragging(), 'circle should not be dragging');
stage._mousemove({
clientX: 100,
clientY: 98 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 100,
clientY: 98 + top
});
assert(circle.isDragging(), 'circle should be dragging');
assert(!dragEnd, 'dragEnd should not have fired yet');
assert(circle.isDragging(), 'circle should be dragging');
assert(!dragEnd, 'dragEnd should not have fired yet');
// at this point, we are in drag and drop mode
// at this point, we are in drag and drop mode
// removing or destroying the circle should trigger dragend
circle.destroy();
layer.draw();
assert(!circle.isDragging(), 'destroying circle should stop drag and drop');
assert(dragEnd, 'dragEnd should have fired');
// removing or destroying the circle should trigger dragend
circle.destroy();
layer.draw();
assert(!circle.isDragging(), 'destroying circle should stop drag and drop');
assert(dragEnd, 'dragEnd should have fired');
done();
}, 20);
});
// ======================================================
test('click should not occur after drag and drop', function() {
test('click should not occur after drag and drop', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
@ -253,24 +259,28 @@ suite('DragAndDropEvents', function() {
clientY: 40 + top
});
stage._mousemove({
clientX: 100,
clientY: 100 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 100,
clientY: 100 + top
});
Kinetic.DD._endDragBefore();
stage._mouseup({
clientX: 100,
clientY: 100 + top
});
Kinetic.DD._endDragAfter({dragEndNode:circle});
Kinetic.DD._endDragBefore();
stage._mouseup({
clientX: 100,
clientY: 100 + top
});
Kinetic.DD._endDragAfter({dragEndNode:circle});
assert(!clicked, 'click event should not have been fired');
assert(!clicked, 'click event should not have been fired');
done();
}, 20);
});
// ======================================================
test('cancel drag and drop by setting draggable to false', function() {
test('cancel drag and drop by setting draggable to false', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@ -316,24 +326,27 @@ suite('DragAndDropEvents', function() {
clientY: 100 + top
});
stage._mousemove({
clientX: 100,
clientY: 100 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 100,
clientY: 100 + top
});
Kinetic.DD._endDragBefore();
stage._mouseup({
clientX: 100,
clientY: 100 + top
});
Kinetic.DD._endDragAfter({dragEndNode:circle});
Kinetic.DD._endDragBefore();
stage._mouseup({
clientX: 100,
clientY: 100 + top
});
Kinetic.DD._endDragAfter({dragEndNode:circle});
assert.equal(circle.getPosition().x, 380, 'circle x should be 380');
assert.equal(circle.getPosition().y, 100, 'circle y should be 100');
assert.equal(circle.getPosition().x, 380, 'circle x should be 380');
assert.equal(circle.getPosition().y, 100, 'circle y should be 100');
done();
}, 20);
});
// ======================================================
test('drag and drop layer', function() {
test('drag and drop layer', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer({
drawFunc: function() {
@ -378,27 +391,31 @@ suite('DragAndDropEvents', function() {
clientY: 96 + top
});
stage._mousemove({
clientX: 210,
clientY: 109 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 210,
clientY: 109 + top
});
Kinetic.DD._endDragBefore();
stage._mouseup({
clientX: 210,
clientY: 109 + top
});
Kinetic.DD._endDragAfter({dragEndNode:circle2});
Kinetic.DD._endDragBefore();
stage._mouseup({
clientX: 210,
clientY: 109 + top
});
Kinetic.DD._endDragAfter({dragEndNode:circle2});
//console.log(layer.getPosition())
//console.log(layer.getPosition())
assert.equal(layer.getX(), -189, 'layer x should be -189');
assert.equal(layer.getY(), 13, 'layer y should be 13');
assert.equal(layer.getX(), -189, 'layer x should be -189');
assert.equal(layer.getY(), 13, 'layer y should be 13');
done();
}, 20);
});
// ======================================================
test('drag and drop stage', function() {
test('drag and drop stage', function(done) {
var container = document.createElement('div'),
stage = new Kinetic.Stage({
container: container,
@ -436,21 +453,24 @@ suite('DragAndDropEvents', function() {
clientY: 100 + top
});
stage._mousemove({
clientX: 300,
clientY: 110 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 300,
clientY: 110 + top
});
Kinetic.DD._endDragBefore();
stage._mouseup({
clientX: 300,
clientY: 110 + top
});
Kinetic.DD._endDragAfter();
Kinetic.DD._endDragBefore();
stage._mouseup({
clientX: 300,
clientY: 110 + top
});
Kinetic.DD._endDragAfter();
assert.equal(stage.getX(), 300);
assert.equal(stage.getY(), 10);
assert.equal(stage.getX(), 300);
assert.equal(stage.getY(), 10);
done();
}, 20);
});
});

542
test/functional/MouseEvents-test.js
View File

@ -1,7 +1,10 @@
suite('MouseEvents', function() {
// NOTE: disable throttling so these tests can run synchronously
Kinetic.enableThrottling = false;
// ======================================================
test('stage content mouse events', function() {
test('stage content mouse events', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
@ -112,26 +115,30 @@ suite('MouseEvents', function() {
assert.equal(stageContentMouseup, 3);
//assert.equal(stageContentDblClick, 1);
stage._mousemove({
clientX: 200,
clientY: 1 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 200,
clientY: 1 + top
});
assert.equal(stageContentMousemove, 1);
assert.equal(stageContentMousemove, 1);
stage._mouseout({
clientX: 0,
clientY: 0
});
stage._mouseout({
clientX: 0,
clientY: 0
});
assert.equal(stageContentMouseout, 1);
assert.equal(stageContentMouseout, 1);
stage._mouseover({
clientX: 0,
clientY: 0
});
stage._mouseover({
clientX: 0,
clientY: 0
});
assert.equal(stageContentMouseover, 1);
assert.equal(stageContentMouseover, 1);
done();
}, 20);
});
@ -395,7 +402,7 @@ suite('MouseEvents', function() {
});
// ======================================================
test('modify fill stroke and stroke width on hover with circle', function() {
test('modify fill stroke and stroke width on hover with circle', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer({
throttle: 999
@ -433,30 +440,32 @@ suite('MouseEvents', function() {
assert.equal(circle.getFill(), 'red', 'circle fill should be red');
assert.equal(circle.getStroke(), 'black', 'circle stroke should be black');
stage._mousemove({
clientX: 377,
clientY: 101 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 377,
clientY: 101 + top
});
assert.equal(circle.getFill(), 'yellow', 'circle fill should be yellow');
assert.equal(circle.getStroke(), 'purple', 'circle stroke should be purple');
assert.equal(circle.getFill(), 'yellow', 'circle fill should be yellow');
assert.equal(circle.getStroke(), 'purple', 'circle stroke should be purple');
// move mouse back out of circle
stage._mousemove({
clientX: 157,
clientY: 138 + top
});
stage._mousemove({
clientX: 157,
clientY: 138 + top
});
setTimeout(function() {
// move mouse back out of circle
stage._mousemove({
clientX: 157,
clientY: 138 + top
});
assert.equal(circle.getFill(), 'red', 'circle fill should be red');
assert.equal(circle.getStroke(), 'black', 'circle stroke should be black');
assert.equal(circle.getFill(), 'red', 'circle fill should be red');
assert.equal(circle.getStroke(), 'black', 'circle stroke should be black');
done();
}, 20);
}, 20);
});
// ======================================================
test('mousedown mouseup mouseover mouseout mousemove click dblclick', function() {
test('mousedown mouseup mouseover mouseout mousemove click dblclick', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@ -518,107 +527,110 @@ suite('MouseEvents', function() {
var top = stage.content.getBoundingClientRect().top;
// move mouse to center of circle to trigger mouseover
stage._mousemove({
clientX: 290,
clientY: 100 + top
});
setTimeout(function() {
// move mouse to center of circle to trigger mouseover
stage._mousemove({
clientX: 290,
clientY: 100 + top
});
assert(mouseover, '1) mouseover should be true');
assert(!mousemove, '1) mousemove should be true');
assert(!mousedown, '1) mousedown should be false');
assert(!mouseup, '1) mouseup should be false');
assert(!click, '1) click should be false');
assert(!dblclick, '1) dblclick should be false');
assert(!mouseout, '1) mouseout should be false');
assert(mouseover, '1) mouseover should be true');
assert(!mousemove, '1) mousemove should be true');
assert(!mousedown, '1) mousedown should be false');
assert(!mouseup, '1) mouseup should be false');
assert(!click, '1) click should be false');
assert(!dblclick, '1) dblclick should be false');
assert(!mouseout, '1) mouseout should be false');
// move mouse again inside circle to trigger mousemove
stage._mousemove({
clientX: 290,
clientY: 100 + top
});
setTimeout(function() {
// move mouse again inside circle to trigger mousemove
stage._mousemove({
clientX: 290,
clientY: 100 + top
});
assert(mouseover, '2) mouseover should be true');
assert(mousemove, '2) mousemove should be true');
assert(!mousedown, '2) mousedown should be false');
assert(!mouseup, '2) mouseup should be false');
assert(!click, '2) click should be false');
assert(!dblclick, '2) dblclick should be false');
assert(!mouseout, '2) mouseout should be false');
assert(mouseover, '2) mouseover should be true');
assert(mousemove, '2) mousemove should be true');
assert(!mousedown, '2) mousedown should be false');
assert(!mouseup, '2) mouseup should be false');
assert(!click, '2) click should be false');
assert(!dblclick, '2) dblclick should be false');
assert(!mouseout, '2) mouseout should be false');
// mousedown inside circle
stage._mousedown({
clientX: 290,
clientY: 100 + top
});
// mousedown inside circle
stage._mousedown({
clientX: 290,
clientY: 100 + top
});
assert(mouseover, '3) mouseover should be true');
assert(mousemove, '3) mousemove should be true');
assert(mousedown, '3) mousedown should be true');
assert(!mouseup, '3) mouseup should be false');
assert(!click, '3) click should be false');
assert(!dblclick, '3) dblclick should be false');
assert(!mouseout, '3) mouseout should be false');
assert(mouseover, '3) mouseover should be true');
assert(mousemove, '3) mousemove should be true');
assert(mousedown, '3) mousedown should be true');
assert(!mouseup, '3) mouseup should be false');
assert(!click, '3) click should be false');
assert(!dblclick, '3) dblclick should be false');
assert(!mouseout, '3) mouseout should be false');
// mouseup inside circle
stage._mouseup({
clientX: 290,
clientY: 100 + top
});
// mouseup inside circle
stage._mouseup({
clientX: 290,
clientY: 100 + top
});
assert(mouseover, '4) mouseover should be true');
assert(mousemove, '4) mousemove should be true');
assert(mousedown, '4) mousedown should be true');
assert(mouseup, '4) mouseup should be true');
assert(click, '4) click should be true');
assert(!dblclick, '4) dblclick should be false');
assert(!mouseout, '4) mouseout should be false');
assert(mouseover, '4) mouseover should be true');
assert(mousemove, '4) mousemove should be true');
assert(mousedown, '4) mousedown should be true');
assert(mouseup, '4) mouseup should be true');
assert(click, '4) click should be true');
assert(!dblclick, '4) dblclick should be false');
assert(!mouseout, '4) mouseout should be false');
// mousedown inside circle
stage._mousedown({
clientX: 290,
clientY: 100 + top
});
// mousedown inside circle
stage._mousedown({
clientX: 290,
clientY: 100 + top
});
assert(mouseover, '5) mouseover should be true');
assert(mousemove, '5) mousemove should be true');
assert(mousedown, '5) mousedown should be true');
assert(mouseup, '5) mouseup should be true');
assert(click, '5) click should be true');
assert(!dblclick, '5) dblclick should be false');
assert(!mouseout, '5) mouseout should be false');
assert(mouseover, '5) mouseover should be true');
assert(mousemove, '5) mousemove should be true');
assert(mousedown, '5) mousedown should be true');
assert(mouseup, '5) mouseup should be true');
assert(click, '5) click should be true');
assert(!dblclick, '5) dblclick should be false');
assert(!mouseout, '5) mouseout should be false');
// mouseup inside circle to trigger double click
stage._mouseup({
clientX: 290,
clientY: 100 + top
});
// mouseup inside circle to trigger double click
stage._mouseup({
clientX: 290,
clientY: 100 + top
});
assert(mouseover, '6) mouseover should be true');
assert(mousemove, '6) mousemove should be true');
assert(mousedown, '6) mousedown should be true');
assert(mouseup, '6) mouseup should be true');
assert(click, '6) click should be true');
assert(dblclick, '6) dblclick should be true');
assert(!mouseout, '6) mouseout should be false');
assert(mouseover, '6) mouseover should be true');
assert(mousemove, '6) mousemove should be true');
assert(mousedown, '6) mousedown should be true');
assert(mouseup, '6) mouseup should be true');
assert(click, '6) click should be true');
assert(dblclick, '6) dblclick should be true');
assert(!mouseout, '6) mouseout should be false');
// move mouse outside of circle to trigger mouseout
stage._mousemove({
clientX: 0,
clientY: 100 + top
});
stage._mousemove({
clientX: 0,
clientY: 100 + top
});
setTimeout(function() {
// move mouse outside of circle to trigger mouseout
stage._mousemove({
clientX: 0,
clientY: 100 + top
});
assert(mouseover, '7) mouseover should be true');
assert(mousemove, '7) mousemove should be true');
assert(mousedown, '7) mousedown should be true');
assert(mouseup, '7) mouseup should be true');
assert(click, '7) click should be true');
assert(dblclick, '7) dblclick should be true');
assert(mouseout, '7) mouseout should be true');
assert(mouseover, '7) mouseover should be true');
assert(mousemove, '7) mousemove should be true');
assert(mousedown, '7) mousedown should be true');
assert(mouseup, '7) mouseup should be true');
assert(click, '7) click should be true');
assert(dblclick, '7) dblclick should be true');
assert(mouseout, '7) mouseout should be true');
done();
}, 20);
}, 20);
}, 20);
});
// ======================================================
@ -700,7 +712,7 @@ suite('MouseEvents', function() {
});
// ======================================================
test('group mouseenter events', function() {
test('group mouseenter events', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
@ -772,84 +784,90 @@ suite('MouseEvents', function() {
var top = stage.content.getBoundingClientRect().top;
// move mouse outside of circles
stage._mousemove({
clientX: 177,
clientY: 146 + top
});
setTimeout(function() {
// move mouse outside of circles
stage._mousemove({
clientX: 177,
clientY: 146 + top
});
assert.equal(redMouseenters, 0, 'redMouseenters should be 0');
assert.equal(redMouseleaves, 0, 'redMouseleaves should be 0');
assert.equal(greenMouseenters, 0, 'greenMouseenters should be 0');
assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
assert.equal(groupMouseenters, 0, 'groupMouseenters should be 0');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
assert.equal(redMouseenters, 0, 'redMouseenters should be 0');
assert.equal(redMouseleaves, 0, 'redMouseleaves should be 0');
assert.equal(greenMouseenters, 0, 'greenMouseenters should be 0');
assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
assert.equal(groupMouseenters, 0, 'groupMouseenters should be 0');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
// move mouse inside of red circle
stage._mousemove({
clientX: 236,
clientY: 145 + top
});
setTimeout(function() {
// move mouse inside of red circle
stage._mousemove({
clientX: 236,
clientY: 145 + top
});
//console.log('groupMouseenters=' + groupMouseenters);
//console.log('groupMouseenters=' + groupMouseenters);
assert.equal(redMouseenters, 1, 'redMouseenters should be 1');
assert.equal(redMouseleaves, 0, 'redMouseleaves should be 0');
assert.equal(greenMouseenters, 0, 'greenMouseenters should be 0');
assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
assert.equal(redMouseenters, 1, 'redMouseenters should be 1');
assert.equal(redMouseleaves, 0, 'redMouseleaves should be 0');
assert.equal(greenMouseenters, 0, 'greenMouseenters should be 0');
assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
// move mouse inside of green circle
stage._mousemove({
clientX: 284,
clientY: 118 + top
});
setTimeout(function() {
// move mouse inside of green circle
stage._mousemove({
clientX: 284,
clientY: 118 + top
});
assert.equal(redMouseenters, 1, 'redMouseenters should be 1');
assert.equal(redMouseleaves, 1, 'redMouseleaves should be 1');
assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
assert.equal(redMouseenters, 1, 'redMouseenters should be 1');
assert.equal(redMouseleaves, 1, 'redMouseleaves should be 1');
assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
// move mouse back to red circle
setTimeout(function() {
// move mouse back to red circle
stage._mousemove({
clientX: 345,
clientY: 105 + top
});
stage._mousemove({
clientX: 345,
clientY: 105 + top
});
stage._mousemove({
clientX: 345,
clientY: 105 + top
});
assert.equal(redMouseenters, 2, 'redMouseenters should be 2');
assert.equal(redMouseleaves, 1, 'redMouseleaves should be 1');
assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
assert.equal(greenMouseleaves, 1, 'greenMouseleaves should be 1');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
// move mouse outside of circles
stage._mousemove({
clientX: 177,
clientY: 146 + top
});
stage._mousemove({
clientX: 177,
clientY: 146 + top
});
assert.equal(redMouseenters, 2, 'redMouseenters should be 2');
assert.equal(redMouseleaves, 2, 'redMouseleaves should be 2');
assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
assert.equal(greenMouseleaves, 1, 'greenMouseleaves should be 1');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 1, 'groupMouseleaves should be 1');
assert.equal(redMouseenters, 2, 'redMouseenters should be 2');
assert.equal(redMouseleaves, 1, 'redMouseleaves should be 1');
assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
assert.equal(greenMouseleaves, 1, 'greenMouseleaves should be 1');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
//document.body.appendChild(layer.bufferCanvas.element)
setTimeout(function() {
// move mouse outside of circles
stage._mousemove({
clientX: 177,
clientY: 146 + top
});
//layer.bufferCanvas.element.style.marginTop = '220px';
assert.equal(redMouseenters, 2, 'redMouseenters should be 2');
assert.equal(redMouseleaves, 2, 'redMouseleaves should be 2');
assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
assert.equal(greenMouseleaves, 1, 'greenMouseleaves should be 1');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 1, 'groupMouseleaves should be 1');
//document.body.appendChild(layer.bufferCanvas.element)
//layer.bufferCanvas.element.style.marginTop = '220px';
done();
}, 20);
}, 20);
}, 20);
}, 20);
}, 20);
});
@ -923,7 +941,7 @@ suite('MouseEvents', function() {
});
// ======================================================
test('test custom circle hit function', function() {
test('test custom circle hit function', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@ -960,82 +978,102 @@ suite('MouseEvents', function() {
circle.on('mouseout', function() {
mouseouts++;
});
// move mouse far outside circle
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
assert.equal(mouseovers, 0, '1) mouseovers should be 0');
assert.equal(mouseouts, 0, '1) mouseouts should be 0');
stage._mousemove({
clientX: 286,
clientY: 118 + top
});
assert.equal(mouseovers, 1, '2) mouseovers should be 1');
assert.equal(mouseouts, 0, '2)mouseouts should be 0');
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
assert.equal(mouseovers, 1, '3) mouseovers should be 1');
assert.equal(mouseouts, 1, '3) mouseouts should be 1');
showHit(layer);
setTimeout(function() {
// set drawBufferFunc with setter
// move mouse far outside circle
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
circle.hitFunc(function(context) {
var _context = context._context;
_context.beginPath();
_context.arc(0, 0, this.getRadius() - 50, 0, Math.PI * 2, true);
_context.closePath();
context.fillStrokeShape(this);
setTimeout(function() {
assert.equal(mouseovers, 0, '1) mouseovers should be 0');
assert.equal(mouseouts, 0, '1) mouseouts should be 0');
});
stage._mousemove({
clientX: 286,
clientY: 118 + top
});
layer.getHitCanvas().getContext().clear();
layer.drawHit();
assert.equal(mouseovers, 1, '2) mouseovers should be 1');
assert.equal(mouseouts, 0, '2)mouseouts should be 0');
setTimeout(function() {
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
assert.equal(mouseovers, 1, '3) mouseovers should be 1');
assert.equal(mouseouts, 1, '3) mouseouts should be 1');
showHit(layer);
// move mouse far outside circle
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
// set drawBufferFunc with setter
assert.equal(mouseovers, 1, '4) mouseovers should be 1');
assert.equal(mouseouts, 1, '4) mouseouts should be 1');
circle.hitFunc(function(context) {
var _context = context._context;
_context.beginPath();
_context.arc(0, 0, this.getRadius() - 50, 0, Math.PI * 2, true);
_context.closePath();
context.fillStrokeShape(this);
stage._mousemove({
clientX: 286,
clientY: 118 + top
});
});
assert.equal(mouseovers, 1, '5) mouseovers should be 1');
assert.equal(mouseouts, 1, '5) mouseouts should be 1');
layer.getHitCanvas().getContext().clear();
layer.drawHit();
stage._mousemove({
clientX: 321,
clientY: 112 + top
});
setTimeout(function() {
assert.equal(mouseovers, 1, '6) mouseovers should be 1');
assert.equal(mouseouts, 1, '6) mouseouts should be 1');
// move mouse far outside circle
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
// move to center of circle
stage._mousemove({
clientX: 375,
clientY: 112 + top
});
assert.equal(mouseovers, 1, '4) mouseovers should be 1');
assert.equal(mouseouts, 1, '4) mouseouts should be 1');
assert.equal(mouseovers, 2, '7) mouseovers should be 2');
assert.equal(mouseouts, 1, '7) mouseouts should be 1');
setTimeout(function() {
stage._mousemove({
clientX: 286,
clientY: 118 + top
});
assert.equal(mouseovers, 1, '5) mouseovers should be 1');
assert.equal(mouseouts, 1, '5) mouseouts should be 1');
setTimeout(function() {
stage._mousemove({
clientX: 321,
clientY: 112 + top
});
assert.equal(mouseovers, 1, '6) mouseovers should be 1');
assert.equal(mouseouts, 1, '6) mouseouts should be 1');
setTimeout(function() {
// move to center of circle
stage._mousemove({
clientX: 375,
clientY: 112 + top
});
assert.equal(mouseovers, 2, '7) mouseovers should be 2');
assert.equal(mouseouts, 1, '7) mouseouts should be 1');
done();
}, 20);
}, 20);
}, 20);
}, 20);
}, 20);
}, 20);
}, 20);
});
});

34
test/functional/TouchEvents-test.js
View File

@ -92,7 +92,7 @@ suite('TouchEvents', function() {
// ======================================================
test('touchstart touchend touchmove tap dbltap', function() {
test('touchstart touchend touchmove tap dbltap', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@ -215,20 +215,24 @@ suite('TouchEvents', function() {
assert(tap, '11) tap should be true');
assert(dbltap, '11) dbltap should be true');
// touchmove circle
stage._touchmove({
touches: [{
clientX: 290,
clientY: 100 + top,
}],
preventDefault: function() {
}
});
setTimeout(function() {
// touchmove circle
stage._touchmove({
touches: [{
clientX: 290,
clientY: 100 + top,
}],
preventDefault: function() {
}
});
assert(touchstart, '12) touchstart should be true');
assert(touchmove, '12) touchmove should be true');
assert(touchend, '12) touchend should be true');
assert(tap, '12) tap should be true');
assert(dbltap, '12) dbltap should be true');
assert(touchstart, '12) touchstart should be true');
assert(touchmove, '12) touchmove should be true');
assert(touchend, '12) touchend should be true');
assert(tap, '12) tap should be true');
assert(dbltap, '12) dbltap should be true');
done();
}, 17);
});
});

1
test/runner.html
View File

@ -102,7 +102,6 @@
<script src="functional/MouseEvents-test.js"></script>
<script src="functional/TouchEvents-test.js"></script>
<script src="functional/KineticEvents-test.js"></script>
<script src="functional/DragAndDropEvents-test.js"></script>
<!--=============== manual tests ================-->