lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +08:00
Code Issues Actions 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

43
test/unit/Blob-test.js → test/unit/shapes/Blob-test.js
View File

@@ -1,10 +1,10 @@
suite('Blob', function(){
// ======================================================
test('add blobs', function() {
test('add blob', function() {
var stage = buildStage();
var layer = new Kinetic.Layer();
var blob1 = new Kinetic.Blob({
var blob = new Kinetic.Blob({
points: [{
x: 73,
y: 140
@@ -25,46 +25,25 @@ suite('Blob', function(){
tension: 0.8
});
var blob2 = new Kinetic.Blob({
points: [{
x: 73,
y: 140
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}],
stroke: 'red',
strokeWidth: 10,
draggable: true,
fill: '#faa',
tension: 1.2,
scale: 0.5,
x: 100,
y: 50
});
layer.add(blob1);
layer.add(blob2);
layer.add(blob);
stage.add(layer);
assert.equal(blob1.getTension(), 0.8);
assert.equal(blob2.getTension(), 1.2);
assert.equal(blob.getTension(), 0.8);
assert.equal(blob1.getClassName(), 'Blob');
assert.equal(blob.getClassName(), 'Blob');
//console.log(blob1.getPoints())
// test setter
blob1.setTension(1.5);
assert.equal(blob1.getTension(), 1.5);
blob.setTension(1.5);
assert.equal(blob.getTension(), 1.5);
var trace = layer.getContext().getTrace();
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(73,140);bezierCurveTo(90.922,74.135,129.542,38.279,340,23);bezierCurveTo(471.142,13.479,514.876,54.33,500,109);bezierCurveTo(482.876,171.93,463.05,158.163,300,170);bezierCurveTo(121.45,182.963,58.922,191.735,73,140);closePath();fillStyle=#aaf;fill();lineWidth=10;strokeStyle=blue;stroke();restore()');
});
// ======================================================
test('add blob and define tension first', function() {
test('define tension first', function() {
var stage = buildStage();
var layer = new Kinetic.Layer();

0
test/unit/Circle-test.js → test/unit/shapes/Circle-test.js
View File

0
test/unit/Ellipse-test.js → test/unit/shapes/Ellipse-test.js
View File

0
test/unit/Image-test.js → test/unit/shapes/Image-test.js
View File

0
test/unit/Line-test.js → test/unit/shapes/Line-test.js
View File

39
test/unit/shapes/Polygon-test.js Normal file
View File

@@ -0,0 +1,39 @@
suite('Polygon', function() {
test('add polygon', function() {
var stage = buildStage();
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);
assert.equal(poly.getClassName(), 'Polygon');
});
});

0
test/unit/Rect-test.js → test/unit/shapes/Rect-test.js
View File

252
test/unit/shapes/Spline-test.js Normal file
View File

@@ -0,0 +1,252 @@
suite('Spline', function() {
// ======================================================
test('add splines', function() {
var stage = buildStage();
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);
assert.equal(line1.getClassName(), 'Spline');
});
// ======================================================
test('update spline points', function() {
var stage = buildStage();
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);
assert.equal(spline.allPoints.length, 6);
spline.setPoints([{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}]);
assert.equal(spline.allPoints.length, 3);
layer.draw();
});
// ======================================================
test('add point to spline points', function() {
var stage = buildStage();
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);
assert.equal(spline.getPoints().length, 4);
spline.addPoint({
x: 300,
y: 200
});
assert.equal(spline.getPoints().length, 5);
layer.draw();
});
// ======================================================
test('create from points represented as a flat array', function() {
var stage = buildStage();
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);
assert.equal(line.getPoints().length, 4);
});
// ======================================================
test('create from points represented as an array of objects', function() {
var stage = buildStage();
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);
assert.equal(line.getPoints().length, 4);
});
// ======================================================
test('create from points represented as an array of arrays', function() {
var stage = buildStage();
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);
assert.equal(line.getPoints().length, 4);
});
});

118
test/unit/shapes/Sprite-test.js Normal file
View File

@@ -0,0 +1,118 @@
suite('Sprite', function() {
// ======================================================
test('add sprite', function(done) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = buildStage();
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);
assert.equal(sprite.getClassName(), 'Sprite');
assert.equal(sprite.getIndex(), 0);
done();
};
imageObj.src = 'assets/scorpion-sprite.png';
});
});

0
test/unit/Text-test.js → test/unit/shapes/Text-test.js
View File

50
test/unit/shapes/Wedge-test.js Normal file
View File

@@ -0,0 +1,50 @@
suite('Wedge', function() {
// ======================================================
test('add wedge', function() {
var stage = buildStage();
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);
assert.equal(wedge.getClassName(), 'Wedge');
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,1.257,false);lineTo(0,0);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore()');
});
// ======================================================
test('set wedge angle using degrees', function() {
var stage = buildStage();
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);
assert.equal(wedge.getAngle(), Math.PI / 2);
});
});