lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 13:49:48 +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 {
background-color: green;
color: white;
font-size: 12px;
}
.red {

36
tests/html/functionalTests.html
View File

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

19
tests/js/Test.js
View File

@ -1,9 +1,14 @@
var numTests = 0;
var testCounter = null;
function test(condition, message) {
function test(condition, message, dataUrlTest) {
if(!condition) {
throw new Error(message);
if(dataUrlTest) {
console.warn(message + ' (NOTE: use Google Chrome for data url comparisons)');
}
else {
throw new Error(message);
}
}
numTests++;
@ -46,11 +51,11 @@ Test.prototype = {
var testOnlySpecial = false;
/*
* if a test key has a star in front of it, then
* only run special tests. This lets us easily run
* specific tests without running all of them
*/
/*
* if a test key has a star in front of it, then
* only run special tests. This lets us easily run
* specific tests without running all of them
*/
for(var key in tests) {
if(key.charAt(0) === '*') {
testOnlySpecial = true;

65
tests/js/functionalTests.js
View File

@ -43,13 +43,13 @@ Test.prototype.tests = {
});
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
*/
stage._mousedown({
offsetX: 380,
offsetY: stage.getHeight() / 2
clientX: 380,
clientY: 98
});
test(!dragStart, 'dragstart event should not have been triggered');
@ -58,8 +58,8 @@ Test.prototype.tests = {
setTimeout(function() {
stage._mousemove({
offsetX: 100,
offsetY: stage.getHeight() / 2
clientX: 100,
clientY: 98
});
test(dragStart, 'dragstart event was not triggered');
@ -68,18 +68,65 @@ Test.prototype.tests = {
}, 50);
setTimeout(function() {
stage._mouseup({
offsetX: 100,
offsetY: stage.getHeight() / 2
clientX: 100,
clientY: 98
});
test(dragStart, 'dragstart event was not triggered');
test(dragMove, 'dragmove event was not triggered');
test(dragEnd, 'dragend event was not triggered');
stage.toDataURL(function(endDataUrl) {
test(urls[1] === endDataUrl, 'end data url is incorrect');
//test(urls[1] === endDataUrl, 'end data url is incorrect');
});
}, 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);
},
'TRANSITION - transition callback': 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) {
'ANIMATION - start and stop animation': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -221,192 +96,6 @@ Test.prototype.tests = {
stage.stop();
}, 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) {
function addHovers(shape, easing) {
shape.on("mouseover", function() {
@ -556,39 +245,6 @@ Test.prototype.tests = {
layer.add(circle);
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) {
var stage = new Kinetic.Stage({
container: containerId,

121
tests/js/unitTests.js
View File

@ -4377,22 +4377,127 @@ Test.prototype.tests = {
centerX = 300;
var go = Kinetic.GlobalObject;
test(go.animations.length === 0, 'should be no animations running');
test(stage.animRunning === false, 'animRunning should be false');
rect.transitionTo({
x: 300,
duration: 1,
callback: function() {
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();
}
});
},
'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');
test(stage.animRunning === true, 'animRunning should be false');
layer.add(rect);
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');
}
});
}