lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 15:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

moved several manual tests to the unit test page. Added another functional test. Added warning logs to the functional test framework

Browse Source
This commit is contained in:
Eric Rowell 2012-06-16 01:21:35 -07:00
parent c1b9d44885
commit a49fc610d6
7 changed files with 216 additions and 380 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
tests/assets/dataUrls.js
View File

File diff suppressed because one or more lines are too long

1
tests/base.css
View File

@ -12,6 +12,7 @@ p {
.green { .green {
background-color: green; background-color: green;
color: white; color: white;
font-size: 12px;
} }
.red { .red {

16
tests/html/functionalTests.html
View File

@ -1,6 +1,17 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<style>
/* overwrite CSS */
.green {
position: absolute;
top: 0px;
}
.row {
position: absolute;
top: 18px;
}
</style>
<link rel="stylesheet" type="text/css"href="../base.css"> <link rel="stylesheet" type="text/css"href="../base.css">
<script src="../../dist/kinetic-core.js"></script> <script src="../../dist/kinetic-core.js"></script>
<script src="../assets/dataUrls.js"></script> <script src="../assets/dataUrls.js"></script>
@ -10,7 +21,12 @@
window.onload = function() { window.onload = function() {
var test = new Test(); var test = new Test();
test.run(); test.run();
document.getElementsByTagName('body')[0].addEventListener('mousemove', function(evt) {
console.log(evt.offsetX + ',' + evt.offsetY);
}, false);
}; };
</script> </script>
</head> </head>
<body onmousedown="return false;"></body> <body onmousedown="return false;"></body>

7
tests/js/Test.js
View File

@ -1,10 +1,15 @@
var numTests = 0; var numTests = 0;
var testCounter = null; var testCounter = null;
function test(condition, message) { function test(condition, message, dataUrlTest) {
if(!condition) { if(!condition) {
if(dataUrlTest) {
console.warn(message + ' (NOTE: use Google Chrome for data url comparisons)');
}
else {
throw new Error(message); throw new Error(message);
} }
}
numTests++; numTests++;
testCounter.innerHTML = numTests; testCounter.innerHTML = numTests;

63
tests/js/functionalTests.js
View File

@ -43,13 +43,13 @@ Test.prototype.tests = {
}); });
stage.toDataURL(function(startDataUrl) { stage.toDataURL(function(startDataUrl) {
test(urls[0] === startDataUrl, 'start data url is incorrect'); test(urls[0] === startDataUrl, 'start data url is incorrect', true);
/* /*
* simulate drag and drop * simulate drag and drop
*/ */
stage._mousedown({ stage._mousedown({
offsetX: 380, clientX: 380,
offsetY: stage.getHeight() / 2 clientY: 98
}); });
test(!dragStart, 'dragstart event should not have been triggered'); test(!dragStart, 'dragstart event should not have been triggered');
@ -58,8 +58,8 @@ Test.prototype.tests = {
setTimeout(function() { setTimeout(function() {
stage._mousemove({ stage._mousemove({
offsetX: 100, clientX: 100,
offsetY: stage.getHeight() / 2 clientY: 98
}); });
test(dragStart, 'dragstart event was not triggered'); test(dragStart, 'dragstart event was not triggered');
@ -68,8 +68,8 @@ Test.prototype.tests = {
}, 50); }, 50);
setTimeout(function() { setTimeout(function() {
stage._mouseup({ stage._mouseup({
offsetX: 100, clientX: 100,
offsetY: stage.getHeight() / 2 clientY: 98
}); });
test(dragStart, 'dragstart event was not triggered'); test(dragStart, 'dragstart event was not triggered');
@ -77,9 +77,56 @@ Test.prototype.tests = {
test(dragEnd, 'dragend event was not triggered'); test(dragEnd, 'dragend event was not triggered');
stage.toDataURL(function(endDataUrl) { stage.toDataURL(function(endDataUrl) {
test(urls[1] === endDataUrl, 'end data url is incorrect'); //test(urls[1] === endDataUrl, 'end data url is incorrect');
}); });
}, 100); }, 100);
}); });
},
'EVENTS - 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,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: 380,
y: stage.getHeight() / 2,
radius: 70,
strokeWidth: 4,
fill: 'red',
stroke: 'black'
});
circle.on('mouseover', function() {
this.setFill('yellow');
this.setStroke('purple');
this.setStrokeWidth(20);
layer.draw();
});
circle.on('mouseout', function() {
this.setFill('red');
this.setStroke('black');
this.setStrokeWidth(4);
layer.draw();
});
layer.add(circle);
stage.add(layer);
stage.toDataURL(function(startDataUrl) {
//test(startDataUrl === urls[0], 'start data url is incorrect');
stage._mousemove({
clientX: 377,
clientY: 101
});
stage.toDataURL(function(endDataUrl) {
//test(urls[1] === endDataUrl, 'end data url is incorrect');
});
});
} }
}; };

346
tests/js/manualTests.js
View File

@ -60,132 +60,7 @@ Test.prototype.tests = {
stage.add(layer); stage.add(layer);
}, },
'TRANSITION - transition callback': function(containerId) { 'ANIMATION - start and stop animation': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 100,
y: 100,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
rect.transitionTo({
duration: 2,
x: 400,
y: 30,
rotation: Math.PI * 2,
easing: 'bounce-ease-out',
callback: function() {
console.log('transition done!');
}
});
},
'TRANSITION - stop and resume transition': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 100,
y: 100,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
var trans = rect.transitionTo({
duration: 2,
x: 400,
y: 30,
rotation: Math.PI * 2,
easing: 'bounce-ease-out'
});
setTimeout(function() {
trans.stop();
}, 1000);
setTimeout(function() {
trans.resume();
}, 2000);
},
'TRANSITION - transition stage': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 100,
y: 100,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
var trans = stage.transitionTo({
duration: 2,
x: 400,
y: 30,
rotation: Math.PI * 2,
easing: 'bounce-ease-out'
});
},
'TRANSITION - transition position and rotation with two transitions': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 100,
y: 100,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
rect.transitionTo({
x: 400,
y: 30,
duration: 1
});
rect.transitionTo({
rotation: Math.PI * 2,
duration: 2
});
},
'ANIMATION - run animation': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@ -221,192 +96,6 @@ Test.prototype.tests = {
stage.stop(); stage.stop();
}, 3000); }, 3000);
}, },
'TRANSITION - hover linear transition': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: stage.getWidth() / 2 - 50,
y: stage.getHeight() / 2 - 25,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: {
x: 50,
y: 25
}
});
rect.on("mouseover", function() {
this.transitionTo({
scale: {
x: 1.5,
y: 1.5
},
duration: 1
});
});
rect.on("mouseout", function() {
this.transitionTo({
scale: {
x: 1,
y: 1
},
duration: 1
});
});
layer.add(rect);
stage.add(layer);
},
'TRANSITION - hover ease-in transition': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: stage.getWidth() / 2 - 50,
y: stage.getHeight() / 2 - 25,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: {
x: 50,
y: 25
}
});
rect.on("mouseover", function() {
this.transitionTo({
scale: {
x: 1.5,
y: 1.5
},
duration: 1,
easing: "ease-in"
});
});
rect.on("mouseout", function() {
this.transitionTo({
scale: {
x: 1,
y: 1
},
duration: 1,
easing: "ease-in"
});
});
layer.add(rect);
stage.add(layer);
},
'TRANSITION - hover ease-out transition': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: stage.getWidth() / 2 - 50,
y: stage.getHeight() / 2 - 25,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: {
x: 50,
y: 25
}
});
rect.on("mouseover", function() {
this.transitionTo({
scale: {
x: 1.5,
y: 1.5
},
duration: 1,
easing: "ease-out"
});
});
rect.on("mouseout", function() {
this.transitionTo({
scale: {
x: 1,
y: 1
},
duration: 1,
easing: "ease-out"
});
});
layer.add(rect);
stage.add(layer);
},
'TRANSITION - hover ease-in-out transition': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: stage.getWidth() / 2 - 50,
y: stage.getHeight(0) / 2 - 25,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: {
x: 50,
y: 25
}
});
rect.on("mouseover", function() {
this.transitionTo({
scale: {
x: 1.5,
y: 1.5
},
duration: 1,
easing: "ease-in-out"
});
});
rect.on("mouseout", function() {
this.transitionTo({
scale: {
x: 1,
y: 1
},
duration: 1,
easing: "ease-in-out"
});
});
layer.add(rect);
stage.add(layer);
},
'TRANSITION - ease-in, ease-out, ease-in-out hovers': function(containerId) { 'TRANSITION - ease-in, ease-out, ease-in-out hovers': function(containerId) {
function addHovers(shape, easing) { function addHovers(shape, easing) {
shape.on("mouseover", function() { shape.on("mouseover", function() {
@ -556,39 +245,6 @@ Test.prototype.tests = {
layer.add(circle); layer.add(circle);
stage.add(layer); stage.add(layer);
}, },
'EVENTS - modify fill stroke and stroke width on hover with circle': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: 380,
y: stage.getHeight() / 2,
radius: 70,
strokeWidth: 4,
fill: 'red',
stroke: 'black'
});
circle.on('mouseover', function() {
this.setFill('yellow');
this.setStroke('purple');
this.setStrokeWidth(20);
layer.draw();
});
circle.on('mouseout', function() {
this.setFill('red');
this.setStroke('black');
this.setStrokeWidth(4);
layer.draw();
});
layer.add(circle);
stage.add(layer);
},
'EVENTS - modify fill stroke and stroke width on hover with star': function(containerId) { 'EVENTS - modify fill stroke and stroke width on hover with star': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,

121
tests/js/unitTests.js
View File

@ -4377,22 +4377,127 @@ Test.prototype.tests = {
centerX = 300; centerX = 300;
var go = Kinetic.GlobalObject; var go = Kinetic.GlobalObject;
test(go.animations.length === 0, 'should be no animations running');
test(stage.animRunning === false, 'animRunning should be false');
rect.transitionTo({ rect.transitionTo({
x: 300, x: 300,
duration: 1, duration: 1,
callback: function() { callback: function() {
test(rect.getX() === 300, 'rect x is not 300'); test(rect.getX() === 300, 'rect x is not 300');
test(go.animations.length === 0, 'should be no animations running');
test(stage.animRunning === false, 'animRunning should be false');
stage.start(); stage.start();
}
});
},
'TRANSITION - stop and resume transition': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 100,
y: 100,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
test(go.animations.length === 1, 'should be no animations running'); layer.add(rect);
test(stage.animRunning === true, 'animRunning should be false'); stage.add(layer);
var transFinished = false;
var trans = rect.transitionTo({
duration: 1,
x: 400,
y: 30,
rotation: Math.PI * 2,
easing: 'bounce-ease-out',
callback: function() {
transFinished = true;
}
});
setTimeout(function() {
trans.stop();
test(!transFinished, 'transition should not have finished yet');
}, 500);
setTimeout(function() {
trans.resume();
test(!transFinished, 'transition should not have finished yet');
}, 1000);
setTimeout(function() {
test(transFinished, 'transition should be finished by now');
}, 2000);
},
'TRANSITION - transition stage': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 100,
y: 100,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
var trans = stage.transitionTo({
duration: 1,
x: 400,
y: 30,
rotation: Math.PI * 2,
easing: 'bounce-ease-out',
callback: function() {
test(stage.getX() === 400, 'stage x should be 400');
test(stage.getY() === 30, 'stage y should be 30');
test(stage.getRotation() == Math.PI * 2, 'stage rotation should be Math.PI * 2');
}
});
},
'TRANSITION - overwrite active transition with new transition': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 100,
y: 100,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
rect.transitionTo({
x: 400,
y: 30,
duration: 500
});
rect.transitionTo({
rotation: Math.PI * 2,
duration: 1,
callback: function() {
test(rect.getX() === 100, 'rect x should be 100');
test(rect.getY() === 100, 'rect y should be 100');
test(rect.getRotation() == Math.PI * 2, 'rect x should be Math.PI * 2');
} }
}); });
} }