mirror of
https://github.com/konvajs/konva.git
synced 2025-10-15 12:34:52 +08:00
finished migrating all unit tests over to Mocha
This commit is contained in:
Eric Rowell
125
test/unit/Animation-test.js
Normal file
125
test/unit/Animation-test.js
Normal file
@@ -0,0 +1,125 @@
|
||||
suite('Animation', function() {
|
||||
// ======================================================
|
||||
test('test start and stop', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 200,
|
||||
y: 100,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
var amplitude = 150;
|
||||
var period = 1000;
|
||||
// in ms
|
||||
var centerX = stage.getWidth() / 2 - 100 / 2;
|
||||
|
||||
var anim = new Kinetic.Animation(function(frame) {
|
||||
rect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
|
||||
}, layer);
|
||||
var a = Kinetic.Animation.animations;
|
||||
var startLen = a.length;
|
||||
|
||||
assert.equal(a.length, startLen, '1should be no animations running');
|
||||
|
||||
anim.start();
|
||||
assert.equal(a.length, startLen + 1, '2should be 1 animation running');
|
||||
|
||||
anim.stop();
|
||||
assert.equal(a.length, startLen, '3should be no animations running');
|
||||
|
||||
anim.start();
|
||||
assert.equal(a.length, startLen + 1, '4should be 1 animation running');
|
||||
|
||||
anim.start();
|
||||
assert.equal(a.length, startLen + 1, '5should be 1 animation runningg');
|
||||
|
||||
anim.stop();
|
||||
assert.equal(a.length, startLen, '6should be no animations running');
|
||||
|
||||
anim.stop();
|
||||
assert.equal(a.length, startLen, '7should be no animations running');
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('layer batch draw', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 200,
|
||||
y: 100,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
draws = 0;
|
||||
|
||||
layer.on('draw', function() {
|
||||
//console.log('draw')
|
||||
draws++;
|
||||
});
|
||||
|
||||
layer.draw();
|
||||
layer.draw();
|
||||
layer.draw();
|
||||
|
||||
assert.equal(draws, 3, 'draw count should be 3');
|
||||
|
||||
layer.batchDraw();
|
||||
layer.batchDraw();
|
||||
layer.batchDraw();
|
||||
|
||||
assert.notEqual(draws, 6, 'should not be 6 draws');
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('stage batch draw', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 200,
|
||||
y: 100,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
draws = 0;
|
||||
|
||||
layer.on('draw', function() {
|
||||
//console.log('draw')
|
||||
draws++;
|
||||
});
|
||||
|
||||
stage.draw();
|
||||
stage.draw();
|
||||
stage.draw();
|
||||
|
||||
assert.equal(draws, 3, 'draw count should be 3');
|
||||
|
||||
stage.batchDraw();
|
||||
stage.batchDraw();
|
||||
stage.batchDraw();
|
||||
|
||||
assert.notEqual(draws, 6, 'should not be 6 draws');
|
||||
|
||||
});
|
||||
});
|
||||
1327
test/unit/Container-test.js
Normal file
1327
test/unit/Container-test.js
Normal file
File diff suppressed because it is too large
Load Diff
192
test/unit/Layer-test.js
Normal file
192
test/unit/Layer-test.js
Normal file
@@ -0,0 +1,192 @@
|
||||
suite('Layer', function() {
|
||||
|
||||
// ======================================================
|
||||
test('test canvas inline styles', function() {
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var circle = new Kinetic.Circle({
|
||||
x: 100,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
var style = layer.getCanvas()._canvas.style;
|
||||
|
||||
assert.equal(style.position, 'absolute', 'canvas position style should be absolute');
|
||||
assert.equal(style.border, '0px', 'canvas border style should be 0px');
|
||||
assert.equal(style.margin, '0px', 'canvas margin style should be 0px');
|
||||
assert.equal(style.padding, '0px', 'canvas padding style should be 0px');
|
||||
assert.equal(style.backgroundColor, 'transparent', 'canvas backgroundColor style should be transparent');
|
||||
assert.equal(style.top, '0px', 'canvas top should be 0px');
|
||||
assert.equal(style.left, '0px', 'canvas left should be 0px');
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('layer getIntersection()', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var redCircle = new Kinetic.Circle({
|
||||
x: 380,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
strokeWidth: 4,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
id: 'redCircle'
|
||||
});
|
||||
|
||||
var greenCircle = new Kinetic.Circle({
|
||||
x: 300,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
strokeWidth: 4,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
id: 'greenCircle'
|
||||
});
|
||||
|
||||
layer.add(redCircle);
|
||||
layer.add(greenCircle);
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(layer.getIntersection(300, 100).shape.getId(), 'greenCircle', 'shape should be greenCircle');
|
||||
assert.equal(layer.getIntersection(380, 100).shape.getId(), 'redCircle', 'shape should be redCircle');
|
||||
assert.equal(layer.getIntersection(100, 100), null, 'shape should be null');
|
||||
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('set layer visibility', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Kinetic.Layer({
|
||||
visible: false
|
||||
});
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 200,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
scale: [3, 1],
|
||||
draggable: true,
|
||||
strokeScaleEnabled: false
|
||||
});
|
||||
|
||||
rect.colorKey = '000000';
|
||||
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('set clearBeforeDraw to false, and test toDataURL for stage, layer, group, and shape', function() {
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Kinetic.Layer({
|
||||
clearBeforeDraw: false,
|
||||
throttle: 999
|
||||
});
|
||||
|
||||
var group = new Kinetic.Group();
|
||||
|
||||
var circle = new Kinetic.Circle({
|
||||
x: 100,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
group.add(circle);
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
|
||||
for(var n = 0; n < 20; n++) {
|
||||
circle.move(10, 0);
|
||||
layer.draw();
|
||||
}
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
//console.log(trace);
|
||||
assert.equal(trace, 'save();transform(1,0,0,1,220,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,230,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,240,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,250,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,260,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,270,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,280,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,290,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,300,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore()');
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('save layer as png', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var Circle = new Kinetic.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'violet',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
layer.add(Circle);
|
||||
stage.add(layer);
|
||||
|
||||
var dataUrl = layer.toDataURL();
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('save layer as low quality jpg', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var circle = new Kinetic.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'violet',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
var dataUrl = layer.toDataURL({
|
||||
mimeType: 'image/jpeg',
|
||||
quality: 0.2
|
||||
});
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('save layer as high quality jpg', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var circle = new Kinetic.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'violet',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
var dataUrl = layer.toDataURL({
|
||||
mimeType: 'image/jpeg',
|
||||
quality: 1
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user