lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-22 03:11:53 +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
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() {

34
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,6 +89,7 @@ suite('DragAndDropEvents', function() {
assert(!Kinetic.isDragging(), ' isDragging() should be false 5');
assert(Kinetic.isDragReady(), ' isDragReady()) should be true 6');
setTimeout(function() {
stage._mousemove({
clientX: 100,
clientY: 98 + top
@@ -130,10 +131,13 @@ suite('DragAndDropEvents', function() {
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,6 +198,7 @@ suite('DragAndDropEvents', function() {
assert(!circle.isDragging(), 'circle should not be dragging');
setTimeout(function() {
stage._mousemove({
clientX: 100,
clientY: 98 + top
@@ -212,13 +217,14 @@ suite('DragAndDropEvents', function() {
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,6 +259,7 @@ suite('DragAndDropEvents', function() {
clientY: 40 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 100,
clientY: 100 + top
@@ -267,10 +274,13 @@ suite('DragAndDropEvents', function() {
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,6 +326,7 @@ suite('DragAndDropEvents', function() {
clientY: 100 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 100,
clientY: 100 + top
@@ -330,10 +341,12 @@ suite('DragAndDropEvents', function() {
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,6 +391,7 @@ suite('DragAndDropEvents', function() {
clientY: 96 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 210,
clientY: 109 + top
@@ -395,10 +409,13 @@ suite('DragAndDropEvents', function() {
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,6 +453,7 @@ suite('DragAndDropEvents', function() {
clientY: 100 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 300,
clientY: 110 + top
@@ -451,6 +469,8 @@ suite('DragAndDropEvents', function() {
assert.equal(stage.getX(), 300);
assert.equal(stage.getY(), 10);
done();
}, 20);
});
});

80
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,6 +115,7 @@ suite('MouseEvents', function() {
assert.equal(stageContentMouseup, 3);
//assert.equal(stageContentDblClick, 1);
setTimeout(function() {
stage._mousemove({
clientX: 200,
clientY: 1 + top
@@ -132,6 +136,9 @@ suite('MouseEvents', function() {
});
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,6 +440,7 @@ suite('MouseEvents', function() {
assert.equal(circle.getFill(), 'red', 'circle fill should be red');
assert.equal(circle.getStroke(), 'black', 'circle stroke should be black');
setTimeout(function() {
stage._mousemove({
clientX: 377,
clientY: 101 + top
@@ -441,22 +449,23 @@ suite('MouseEvents', function() {
assert.equal(circle.getFill(), 'yellow', 'circle fill should be yellow');
assert.equal(circle.getStroke(), 'purple', 'circle stroke should be purple');
setTimeout(function() {
// move mouse back out of circle
stage._mousemove({
clientX: 157,
clientY: 138 + top
});
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');
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,6 +527,7 @@ suite('MouseEvents', function() {
var top = stage.content.getBoundingClientRect().top;
setTimeout(function() {
// move mouse to center of circle to trigger mouseover
stage._mousemove({
clientX: 290,
@@ -532,6 +542,7 @@ suite('MouseEvents', function() {
assert(!dblclick, '1) dblclick should be false');
assert(!mouseout, '1) mouseout should be false');
setTimeout(function() {
// move mouse again inside circle to trigger mousemove
stage._mousemove({
clientX: 290,
@@ -602,15 +613,12 @@ suite('MouseEvents', function() {
assert(dblclick, '6) dblclick should be true');
assert(!mouseout, '6) mouseout should be false');
setTimeout(function() {
// move mouse outside of circle to trigger mouseout
stage._mousemove({
clientX: 0,
clientY: 100 + top
});
stage._mousemove({
clientX: 0,
clientY: 100 + top
});
assert(mouseover, '7) mouseover should be true');
assert(mousemove, '7) mousemove should be true');
@@ -619,6 +627,10 @@ suite('MouseEvents', function() {
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,6 +784,7 @@ suite('MouseEvents', function() {
var top = stage.content.getBoundingClientRect().top;
setTimeout(function() {
// move mouse outside of circles
stage._mousemove({
clientX: 177,
@@ -785,6 +798,7 @@ suite('MouseEvents', function() {
assert.equal(groupMouseenters, 0, 'groupMouseenters should be 0');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
setTimeout(function() {
// move mouse inside of red circle
stage._mousemove({
clientX: 236,
@@ -800,6 +814,7 @@ suite('MouseEvents', function() {
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
setTimeout(function() {
// move mouse inside of green circle
stage._mousemove({
clientX: 284,
@@ -813,16 +828,14 @@ suite('MouseEvents', function() {
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
setTimeout(function() {
// move mouse back to red circle
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');
@@ -831,15 +844,13 @@ suite('MouseEvents', function() {
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
setTimeout(function() {
// 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');
@@ -851,6 +862,13 @@ suite('MouseEvents', function() {
//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,12 +978,17 @@ suite('MouseEvents', function() {
circle.on('mouseout', function() {
mouseouts++;
});
setTimeout(function() {
// move mouse far outside circle
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
setTimeout(function() {
assert.equal(mouseovers, 0, '1) mouseovers should be 0');
assert.equal(mouseouts, 0, '1) mouseouts should be 0');
@@ -977,6 +1000,7 @@ suite('MouseEvents', function() {
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
@@ -1002,6 +1026,7 @@ suite('MouseEvents', function() {
layer.getHitCanvas().getContext().clear();
layer.drawHit();
setTimeout(function() {
// move mouse far outside circle
stage._mousemove({
@@ -1012,6 +1037,8 @@ suite('MouseEvents', function() {
assert.equal(mouseovers, 1, '4) mouseovers should be 1');
assert.equal(mouseouts, 1, '4) mouseouts should be 1');
setTimeout(function() {
stage._mousemove({
clientX: 286,
clientY: 118 + top
@@ -1020,6 +1047,7 @@ suite('MouseEvents', function() {
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
@@ -1028,6 +1056,7 @@ suite('MouseEvents', function() {
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,
@@ -1037,5 +1066,14 @@ suite('MouseEvents', function() {
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);
});
});

6
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,6 +215,7 @@ suite('TouchEvents', function() {
assert(tap, '11) tap should be true');
assert(dbltap, '11) dbltap should be true');
setTimeout(function() {
// touchmove circle
stage._touchmove({
touches: [{
@@ -230,5 +231,8 @@ suite('TouchEvents', function() {
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 ================-->