lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-18 19:51:21 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

finished migrating all shape unit tests over to mocha. continued working on context tracing support

Browse Source
This commit is contained in:
Eric Rowell
2013-09-07 17:57:48 -07:00
parent eddcf8ccbe
commit ee5f4c3e3b
17 changed files with 150 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
tests/js/unit/shapes/lineTests.js
View File

@@ -1,136 +0,0 @@
Test.Modules.LINE = {
'add line': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var points = [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}
/*, {
x: 500,
y: 109
}*/
];
var line = new Kinetic.Line({
points: points,
stroke: 'blue',
strokeWidth: 20,
lineCap: 'round',
lineJoin: 'round',
draggable: true
});
layer.add(line);
stage.add(layer);
line.setPoints([1, 2, 3, 4]);
test(line.getPoints()[0].x === 1, 'first point x should be 1');
line.setPoints([{
x: 5,
y: 6
}, {
x: 7,
y: 8
}]);
test(line.getPoints()[0].x === 5, 'first point x should be 5');
line.setPoints([73, 160, 340, 23]);
test(line.getPoints()[0].x === 73, 'first point x should be 73');
test(line.getClassName() === 'Line', 'getClassName should be Line');
},
'test default ponts array for two lines': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var line = new Kinetic.Line({
stroke: 'blue',
strokeWidth: 20,
lineCap: 'round',
lineJoin: 'round',
draggable: true
});
var redLine = new Kinetic.Line({
x: 50,
stroke: 'red',
strokeWidth: 20,
lineCap: 'round',
lineJoin: 'round',
draggable: true
});
line.setPoints([0,1,2,3]);
redLine.setPoints([4,5,6,7]);
layer.add(line).add(redLine);
stage.add(layer);
test(line.getPoints()[0].x === 0, 'line points is wrong');
test(redLine.getPoints()[0].x === 4, 'redLine points is wrong');
},
'add dashed line': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
/*
var points = [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 500,
y: 180
}];
*/
var line = new Kinetic.Line({
points: [73, 160, 340, 23, 500, 109, 500, 180],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
dashArray: [30, 10, 0, 10, 10, 20],
shadowColor: '#aaa',
shadowBlur: 10,
shadowOffset: [20, 20]
//opacity: 0.2
});
layer.add(line);
stage.add(layer);
test(line.getDashArray().length === 6, 'dashArray should have 6 elements');
line.setDashArray([10, 10]);
test(line.getDashArray().length === 2, 'dashArray should have 2 elements');
test(line.getPoints().length === 4, 'line should have 4 points');
}
};

43
tests/js/unit/shapes/polygonTests.js
View File

@@ -1,43 +0,0 @@
Test.Modules.POLYGON = {
'add polygon': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var points = [{
x: 73,
y: 192
}, {
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 499,
y: 139
}, {
x: 342,
y: 93
}];
var poly = new Kinetic.Polygon({
points: points,
fill: 'green',
stroke: 'blue',
strokeWidth: 5
});
layer.add(poly);
stage.add(layer);
test(poly.getClassName() === 'Polygon', 'getClassName should be Polygon');
}
};

265
tests/js/unit/shapes/splineTests.js
View File

@@ -1,265 +0,0 @@
Test.Modules.SPLINE = {
'add splines': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var line1 = new Kinetic.Spline({
points: [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 300,
y: 109
}],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
var line2 = new Kinetic.Spline({
points: [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}],
stroke: 'red',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
var line3 = new Kinetic.Spline({
points: [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}],
stroke: 'green',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
layer.add(line1);
layer.add(line2);
layer.add(line3);
stage.add(layer);
test(line1.getClassName() === 'Spline', 'getClassName should be Spline');
},
'update spline points': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var spline = new Kinetic.Spline({
points: [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 300,
y: 109
}],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
layer.add(spline);
stage.add(layer);
test(spline.allPoints.length === 6, 'spline all points should have 6 points');
spline.setPoints([{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}]);
test(spline.allPoints.length === 3, 'spline all points should have 3 points');
layer.draw();
},
'add point to spline points': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var spline = new Kinetic.Spline({
points: [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 300,
y: 109
}],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
layer.add(spline);
stage.add(layer);
test(spline.getPoints().length === 4, 'spline should have 4 points');
spline.addPoint({
x: 300,
y: 200
});
test(spline.getPoints().length === 5, 'spline should have 5 points');
layer.draw();
},
'create from points represented as a flat array': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var line = new Kinetic.Spline({
points: [
73, 160,
340, 23,
500, 109,
300, 109
],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
layer.add(line);
stage.add(layer);
test(line.getPoints().length === 4, 'line should have 4 points');
},
'create from points represented as an array of objects': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var line = new Kinetic.Spline({
points: [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 300,
y: 109
}],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
layer.add(line);
stage.add(layer);
test(line.getPoints().length === 4, 'line should have 4 points');
},
'create from points represented as an array of arrays': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var line = new Kinetic.Spline({
points: [
[73, 160],
[340, 23],
[500, 109],
[300, 109]
],
stroke: 'blue',
strokeWidth: 10,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
tension: 1
});
layer.add(line);
stage.add(layer);
test(line.getPoints().length === 4, 'line should have 4 points');
}
};

121
tests/js/unit/shapes/spriteTests.js
View File

@@ -1,121 +0,0 @@
Test.Modules.SPRITE = {
'add sprite': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var anims = {
standing: [{
x: 0,
y: 0,
width: 49,
height: 109
}, {
x: 52,
y: 0,
width: 49,
height: 109
}, {
x: 105,
y: 0,
width: 49,
height: 109
}, {
x: 158,
y: 0,
width: 49,
height: 109
}, {
x: 210,
y: 0,
width: 49,
height: 109
}, {
x: 262,
y: 0,
width: 49,
height: 109
}],
kicking: [{
x: 0,
y: 109,
width: 45,
height: 98
}, {
x: 45,
y: 109,
width: 45,
height: 98
}, {
x: 95,
y: 109,
width: 63,
height: 98
}, {
x: 156,
y: 109,
width: 70,
height: 98
}, {
x: 229,
y: 109,
width: 60,
height: 98
}, {
x: 287,
y: 109,
width: 41,
height: 98
}]
};
//for(var n = 0; n < 50; n++) {
sprite = new Kinetic.Sprite({
//x: Math.random() * stage.getWidth() - 30,
x: 200,
//y: Math.random() * stage.getHeight() - 50,
y: 50,
image: imageObj,
animation: 'standing',
animations: anims,
frameRate: Math.random() * 6 + 6,
frameRate: 10,
draggable: true,
shadowColor: 'black',
shadowBlur: 3,
shadowOffset: [3, 1],
shadowOpacity: 0.3
});
layer.add(sprite);
sprite.start();
//}
stage.add(layer);
// kick once
setTimeout(function() {
sprite.setAnimation('kicking');
sprite.afterFrame(5, function() {
sprite.setAnimation('standing');
});
}, 2000);
setTimeout(function() {
sprite.stop();
}, 3000);
//document.body.appendChild(layer.bufferCanvas.element)
test(sprite.getClassName() === 'Sprite', 'getClassName should be Sprite');
test(sprite.getIndex() === 0, 'sprite index should default to 0');
};
imageObj.src = '../assets/scorpion-sprite.png';
}
};

51
tests/js/unit/shapes/wedgeTests.js
View File

@@ -1,51 +0,0 @@
Test.Modules.Wedge = {
'add wedge': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var wedge = new Kinetic.Wedge({
x: 100,
y: 100,
radius: 70,
angle: Math.PI * 0.4,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
layer.add(wedge);
stage.add(layer);
test(wedge.getClassName() === 'Wedge', 'getClassName should be Wedge');
},
'set wedge angle using degrees': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var wedge = new Kinetic.Wedge({
x: 100,
y: 100,
radius: 70,
angleDeg: 90,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true,
lineJoin: 'round'
});
layer.add(wedge);
stage.add(layer);
test(wedge.getAngle() === Math.PI / 2, 'problem setting wedge angle using degrees');
}
};