lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 18:27:58 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

restructured unit tests and created a unit test build target which concatenates source test files

Browse Source
This commit is contained in:
Eric Rowell
2012-11-13 21:37:28 -08:00
parent 5be1802729
commit a5e23c426d
29 changed files with 11470 additions and 4959 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
tests/js/Test.js
View File

@@ -3,103 +3,105 @@ var testCounter = null;
var before, after;
function startTimer() {
var date = new Date();
before = date.getTime();
var date = new Date();
before = date.getTime();
}
function endTimer(str) {
var date = new Date();
after = date.getTime();
var diff = after - before;
console.log(str + ': ' + diff + 'ms');
var date = new Date();
after = date.getTime();
var diff = after - before;
console.log(str + ': ' + diff + 'ms');
}
function warn(condition, message) {
test(condition, message, true);
test(condition, message, true);
}
function test(condition, message, warn) {
if(!condition) {
if(warn) {
if(testCounter.style.backgroundColor != 'red') {
testCounter.style.backgroundColor = 'orange';
testCounter.style.color = 'black';
}
console.warn(message + ' (NOTE: use Google Chrome for data url comparisons, run on web server for caching and filtering)');
}
else {
testCounter.style.backgroundColor = 'red';
testCounter.style.color = 'black';
throw new Error(message);
}
if(!condition) {
if(warn) {
if(testCounter.style.backgroundColor != 'red') {
testCounter.style.backgroundColor = 'orange';
testCounter.style.color = 'black';
}
console.warn(message + ' (NOTE: use Google Chrome for data url comparisons, run on web server for caching and filtering)');
}
else {
testCounter.style.backgroundColor = 'red';
testCounter.style.color = 'black';
throw new Error(message);
}
}
numTests++;
}
numTests++;
testCounter.innerHTML = numTests;
testCounter.innerHTML = numTests;
}
function log(message) {
console.log("LOG: " + message);
console.log('LOG: ' + message);
}
/**
* Test constructor
*/
function Test() {
this.counter = 0;
testCounter = document.createElement('div');
testCounter.id = 'testCounter';
document.getElementsByTagName('body')[0].appendChild(testCounter);
this.counter = 0;
testCounter = document.createElement('div');
testCounter.id = 'testCounter';
document.getElementsByTagName('body')[0].appendChild(testCounter);
}
/**
* Test methods
*/
Test.Modules = {};
Test.prototype = {
addTestContainer: function(key) {
var row = document.createElement('div');
var container = document.createElement('div');
var testMessage = document.createElement('p');
addTestContainer: function(key) {
var row = document.createElement('div');
var container = document.createElement('div');
var testMessage = document.createElement('p');
container.id = key;
container.id = key;
document.body.appendChild(testMessage);
row.appendChild(container);
row.className = "row";
document.body.appendChild(row);
document.body.appendChild(testMessage);
row.appendChild(container);
row.className = 'row';
document.body.appendChild(row);
return {
testMessage: testMessage
};
},
run: function() {
var tests = this.tests;
return {
testMessage: testMessage
};
},
run: function() {
var testOnlySpecial = false;
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
*/
for(var key in tests) {
if(key.charAt(0) === '*') {
testOnlySpecial = true;
break;
}
var modules = Test.Modules;
// loop through modules
for(var mod in modules) {
console.log('=================== ' + mod + ' TESTS ===================');
var tests = modules[mod];
/*
* 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;
break;
}
}
// loop through tests
for(var key in tests) {
if(!testOnlySpecial || key.charAt(0) === '*') {
var obj = this.addTestContainer(key);
this.counter++;
console.log(this.counter + ') ' + key);
tests[key](key);
obj.testMessage.innerHTML = this.counter + ') ' + key + ': PASSED';
obj.testMessage.setAttribute('class', 'green');
}
}
}
console.log('=================== ASYNC OUTPUT ===================');
}
for(var key in tests) {
if(!testOnlySpecial || key.charAt(0) === '*') {
var obj = this.addTestContainer(key);
this.counter++;
console.log(this.counter + ") " + key);
tests[key](key);
obj.testMessage.innerHTML = this.counter + ") " + key + ': PASSED';
obj.testMessage.setAttribute("class", "green");
}
}
}
};

2
tests/js/functionalTests.js
View File

@@ -1,4 +1,4 @@
Test.prototype.tests = {
Test.Modules.FUNCTIONAL = {
'DRAG AND DROP - test dragstart, dragmove, dragend': function(containerId) {
var urls = dataUrls['DRAG AND DROP - test dragstart, dragmove, dragend'];

2
tests/js/manualTests.js
View File

@@ -1,4 +1,4 @@
Test.prototype.tests = {
Test.Modules.MANUAL = {
'EVENTS - mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,

2
tests/js/performanceTests.js
View File

@@ -1,4 +1,4 @@
Test.prototype.tests = {
Test.Modules.PERFORMANCE = {
'DRAWING - draw rect': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,

60
tests/js/unit/animationTests.js Normal file
View File

@@ -0,0 +1,60 @@
Test.Modules.ANIMATION = {
/*
* WARNING: make sure that this is the first unit test that uses
* animation because it's accessing the global animation object which could
* be modified by other unit tests
*/
'ANIMATION - test start and stop': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
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({
func: function(frame) {
rect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
layer.draw();
}
});
var a = Kinetic.Animation;
test(a.animations.length === 0, 'should be no animations running');
anim.start();
test(a.animations.length === 1, 'should be 1 animation running');
anim.stop();
test(a.animations.length === 0, 'should be no animations running');
anim.start();
test(a.animations.length === 1, 'should be 1 animation running');
anim.start();
test(a.animations.length === 1, 'should be 1 animation runningg');
anim.stop();
test(a.animations.length === 0, 'should be no animations running');
anim.stop();
test(a.animations.length === 0, 'should be no animations running');
}
};

1437
tests/js/unit/containerTests.js Normal file
View File

File diff suppressed because it is too large Load Diff

91
tests/js/unit/customShapeTests.js Normal file
View File

@@ -0,0 +1,91 @@
Test.Modules['CUSTOM SHAPE'] = {
'custom shape with fill, stroke, and strokeWidth': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var shape = new Kinetic.Shape({
drawFunc: function(context) {
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
context.lineTo(100, 100);
context.closePath();
this.fill(context);
this.stroke(context);
},
x: 200,
y: 100,
fill: 'green',
stroke: 'blue',
strokeWidth: 5
});
layer.add(shape);
stage.add(layer);
},
'change custom shape draw func': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var shape = new Kinetic.Shape({
drawFunc: function(context) {
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
context.lineTo(100, 100);
context.closePath();
this.fill(context);
this.stroke(context);
},
x: 200,
y: 100,
fill: 'green',
stroke: 'blue',
strokeWidth: 5
});
shape.setDrawFunc(function(context) {
context.beginPath();
context.moveTo(0, 0);
context.lineTo(200, 0);
context.lineTo(200, 100);
context.closePath();
this.fill(context);
this.stroke(context);
});
var rect = new Kinetic.Rect({
x: 10,
y: 10,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
rect.setDrawFunc(function(context) {
context.beginPath();
context.moveTo(0, 0);
context.lineTo(200, 0);
context.lineTo(200, 100);
context.closePath();
this.fill(context);
this.stroke(context);
});
layer.add(shape);
layer.add(rect);
stage.add(layer);
var dataUrl = layer.toDataURL();
test(dataUrls['SHAPE - change custom shape draw func'] === dataUrl, 'problem with setDrawFunc');
}
};

59
tests/js/unit/ddTests.js Normal file
View File

@@ -0,0 +1,59 @@
Test.Modules.DD = {
'test drag and drop properties and methods': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle'
});
stage.add(layer);
layer.add(circle);
layer.draw();
// test defaults
test(circle.attrs.draggable === false, 'draggable should be false');
//change properties
circle.setDraggable(true);
// test new properties
test(circle.attrs.draggable === true, 'draggable should be true');
},
'DRAG AND DROP - multiple drag and drop sets with setDraggable()': 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.setDraggable(true);
test(circle.getDraggable(), 'draggable should be true');
circle.setDraggable(true);
test(circle.getDraggable(), 'draggable should be true');
circle.setDraggable(false);
test(!circle.getDraggable(), 'draggable should be false');
layer.add(circle);
stage.add(layer);
}
};

82
tests/js/unit/layerTests.js Normal file
View File

@@ -0,0 +1,82 @@
Test.Modules.LAYER = {
'beforeDraw and afterDraw': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
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 counter = 0;
layer.beforeDraw(function() {
counter++;
test(counter === 1, 'counter should be 1');
});
layer.afterDraw(function() {
counter++;
test(counter === 2, 'counter should be 2');
});
layer.draw();
},
'set clearBeforeDraw to false, and test toDataURL for stage, layer, group, and shape': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
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();
}
//console.log(layer.toDataURL());
stage.toDataURL({
callback: function(dataUrl) {
warn(dataUrls['stacked green circles'] === dataUrl, 'stacked green circles stage data url is incorrect');
}
});
warn(dataUrls['stacked green circles'] === layer.toDataURL(), 'stacked green circles layer data url is incorrect');
}
};

2036
tests/js/unit/nodeTests.js Normal file
View File

File diff suppressed because it is too large Load Diff

48
tests/js/unit/shapeTests.js Normal file
View File

@@ -0,0 +1,48 @@
Test.Modules.SHAPE = {
'SHAPE - test intersects()': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
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);
test(rect.intersects({
x: 200,
y: 100
}) === true, '(200,100) should intersect the shape');
test(rect.intersects({
x: 197,
y: 97
}) === false, '(197, 97) should not intersect the shape');
test(rect.intersects({
x: 250,
y: 125
}) === true, '(250, 125) should intersect the shape');
test(rect.intersects({
x: 300,
y: 150
}) === true, '(300, 150) should intersect the shape');
test(rect.intersects({
x: 303,
y: 153
}) === false, '(303, 153) should not intersect the shape');
}
};

267
tests/js/unit/shapes/circleTests.js Normal file
View File

@@ -0,0 +1,267 @@
Test.Modules.CIRCLE = {
'test attrs': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: 100,
y: 100,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
stage.add(layer);
layer.add(group);
group.add(circle);
layer.draw();
var attrs = circle.getAttrs();
test(attrs.x === 100, 'x attr should be 100');
test(attrs.y === 100, 'y attr should be 100');
test(attrs.radius === 70, 'radius attr should be 70');
test(attrs.fill === 'green', 'fill attr should be fill');
test(attrs.stroke === 'black', 'stroke attr should be stroke');
test(attrs.strokeWidth === 4, 'strokeWidth attr should be strokeWidth');
test(attrs.name === 'myCircle', 'name attr should be myCircle');
test(attrs.draggable === true, 'draggable attr should be true');
},
'add circle with pattern fill': 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 group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: {
image: imageObj,
repeat: 'no-repeat',
offset: [-200, -70],
scale: 0.7
},
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
group.add(circle);
layer.add(group);
stage.add(layer);
test(circle.getFill().repeat === 'no-repeat', 'repeat option should be no-repeat');
test(circle.getFill().offset.x === -200, 'fill offset x should be -200');
test(circle.getFill().offset.y === -70, 'fill offset y should be -70');
/*
* test offset setting
*/
circle.setFill({
offset: [1, 2]
});
test(circle.getFill().offset.x === 1, 'fill offset x should be 1');
test(circle.getFill().offset.y === 2, 'fill offset y should be 2');
circle.setFill({
offset: {
x: 3,
y: 4
}
});
test(circle.getFill().offset.x === 3, 'fill offset x should be 3');
test(circle.getFill().offset.y === 4, 'fill offset y should be 4');
circle.setFill({
offset: {
x: 5
}
});
test(circle.getFill().offset.x === 5, 'fill offset x should be 5');
test(circle.getFill().offset.y === 4, 'fill offset y should be 4');
circle.setFill({
offset: {
y: 6
}
});
test(circle.getFill().offset.x === 5, 'fill offset x should be 5');
test(circle.getFill().offset.y === 6, 'fill offset y should be 6');
circle.setFill({
offset: [-200, -70]
});
//document.body.appendChild(layer.bufferCanvas.element)
};
imageObj.src = '../assets/darth-vader.jpg';
},
'add circle with radial gradient fill': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: {
start: {
x: -20,
y: -20,
radius: 0
},
end: {
x: -60,
y: -60,
radius: 130
},
colorStops: [0, 'red', 0.2, 'yellow', 1, 'blue']
},
name: 'myCircle',
draggable: true,
scale: {
x: 0.5,
y: 0.5
}
});
group.add(circle);
layer.add(group);
stage.add(layer);
var fill = circle.getFill();
test(fill.start.x === -20, 'fill start x should be 20');
test(fill.start.y === -20, 'fill start y should be 20');
test(fill.start.radius === 0, 'fill start radius should be 0');
test(fill.end.x === -60, 'fill end x should be 60');
test(fill.end.y === -60, 'fill end y should be 60');
test(fill.end.radius === 130, 'fill end radius should be 130');
test(fill.colorStops.length === 6, 'fill colorStops length should be 6');
//document.body.appendChild(layer.bufferCanvas.element)
},
'add 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: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(circle);
stage.add(layer);
},
'add shape with linear gradient fill': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: {
start: {
x: -35,
y: -35
},
end: {
x: 35,
y: 35
},
colorStops: [0, 'red', 1, 'blue']
},
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
group.add(circle);
layer.add(group);
stage.add(layer);
test(circle.getName() === 'myCircle', 'circle name should be myCircle');
document.body.appendChild(layer.bufferCanvas.element)
},
'add circle with opacity': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'red'
});
group.add(circle);
layer.add(group);
stage.add(layer);
circle.setOpacity(0.5);
layer.draw();
circle.setOpacity(0.5);
layer.draw();
},
'set fill after instantiation': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(circle);
circle.setFill('blue');
stage.add(layer);
}
};

20
tests/js/unit/shapes/ellipseTests.js Normal file
View File

@@ -0,0 +1,20 @@
Test.Modules.ELLISPE = {
'add ellipse': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Ellipse({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: [70, 35],
fill: 'green',
stroke: 'black',
strokeWidth: 8
});
layer.add(circle);
stage.add(layer);
}
};

366
tests/js/unit/shapes/imageTests.js Normal file
View File

@@ -0,0 +1,366 @@
Test.Modules.IMAGE = {
'add image': 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({
throttle: 999
});
darth = new Kinetic.Image({
x: 200,
y: 60,
image: imageObj,
width: 100,
height: 100,
offset: [50, 30],
crop: [135, 7, 167, 134],
draggable: true
});
layer.add(darth);
stage.add(layer);
darth.setHeight(200);
layer.draw();
darth.setHeight(100);
layer.draw();
test(darth.getX() === 200, 'x should be 200');
test(darth.getY() === 60, 'y should be 60');
test(darth.getWidth() === 100, 'width should be 100');
test(darth.getHeight() === 100, 'height should be 100');
test(darth.getOffset().x === 50, 'center offset x should be 50');
test(darth.getOffset().y === 30, 'center offset y should be 30');
test(Kinetic.Type._isElement(darth.getImage()), 'darth image should be an element');
var crop = null;
crop = darth.getCrop();
test(crop.x === 135, 'crop x should be 135');
test(crop.y === 7, 'crop y should be 7');
test(crop.width === 167, 'crop width should be 167');
test(crop.height === 134, 'crop height should be134');
darth.setCrop(0, 1, 2, 3);
crop = darth.getCrop();
test(crop.x === 0, 'crop x should be 0');
test(crop.y === 1, 'crop y should be 1');
test(crop.width === 2, 'crop width should be2');
test(crop.height === 3, 'crop height should be 3');
darth.setCrop([4, 5, 6, 7]);
crop = darth.getCrop();
test(crop.x === 4, 'crop x should be 4');
test(crop.y === 5, 'crop y should be 5');
test(crop.width === 6, 'crop width should be 6');
test(crop.height === 7, 'crop height should be 7');
darth.setCrop({
x: 8,
y: 9,
width: 10,
height: 11
});
crop = darth.getCrop();
test(crop.x === 8, 'crop x should be 8');
test(crop.y === 9, 'crop y should be 9');
test(crop.width === 10, 'crop width should be 10');
test(crop.height === 11, 'crop height should be 11');
darth.setCrop({
x: 12
});
crop = darth.getCrop();
test(crop.x === 12, 'crop x should be 12');
test(crop.y === 9, 'crop y should be 9');
test(crop.width === 10, 'crop width should be 10');
test(crop.height === 11, 'crop height should be 11');
darth.setCrop({
y: 13
});
crop = darth.getCrop();
test(crop.x === 12, 'crop x should be 12');
test(crop.y === 13, 'crop y should be 13');
test(crop.width === 10, 'crop width should be 10');
test(crop.height === 11, 'crop height should be 11');
darth.setCrop({
width: 14
});
crop = darth.getCrop();
test(crop.x === 12, 'crop x should be 12');
test(crop.y === 13, 'crop y should be 13');
test(crop.width === 14, 'crop width should be 14');
test(crop.height === 11, 'crop height should be 11');
darth.setCrop({
height: 15
});
crop = darth.getCrop();
test(crop.x === 12, 'crop x should be 12');
test(crop.y === 13, 'crop y should be 13');
test(crop.width === 14, 'crop width should be 14');
test(crop.height === 15, 'crop height should be 15');
darth.setAttrs({
x: 200,
y: 60,
image: imageObj,
width: 100,
height: 100,
offset: [50, 30],
crop: [135, 7, 167, 134],
draggable: true
});
//document.body.appendChild(layer.bufferCanvas.element)
};
imageObj.src = '../assets/darth-vader.jpg';
},
'grayscale image': 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({
throttle: 999
});
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
test(darth.getWidth() === 438, 'image width should be 438');
test(darth.getHeight() === 300, 'image height should be 300');
darth.applyFilter({
filter: Kinetic.Filters.Grayscale,
callback: function() {
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
warn(dataUrl === dataUrls['Filters - grayscale image'], 'problem with Grayscale filter.');
}
});
};
imageObj.src = '../assets/darth-vader.jpg';
},
'invert image': 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({
throttle: 999
});
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
test(darth.getWidth() === 438, 'image width should be 438');
test(darth.getHeight() === 300, 'image height should be 300');
darth.applyFilter({
filter: Kinetic.Filters.Invert,
callback: function() {
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
//warn(dataUrl === dataUrls['Filters - invert image'], 'problem with Invert filter.');
}
});
};
imageObj.src = '../assets/darth-vader.jpg';
},
'adjust image brightness': 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({
throttle: 999
});
darth = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj,
draggable: true
});
layer.add(darth);
stage.add(layer);
test(darth.getWidth() === 438, 'image width should be 438');
test(darth.getHeight() === 300, 'image height should be 300');
darth.applyFilter({
filter: Kinetic.Filters.Brighten,
config: {
val: 100
},
callback: function() {
layer.draw();
var dataUrl = layer.toDataURL();
//console.log(dataUrl);
warn(dataUrl === dataUrls['Filters - adjust image brightness'], 'problem with Brighten filter.');
}
});
};
imageObj.src = '../assets/darth-vader.jpg';
},
'filter transformed image': function(containerId) {
var urls = dataUrls['SHAPE - filter transformed image'];
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer({
throttle: 999
});
darth = new Kinetic.Image({
x: 50,
y: 50,
//width: 438,
//height: 300,
image: imageObj,
draggable: true,
rotationDeg: 10,
scale: 0.3
});
darth.setOffset(darth.getWidth() / 2, darth.getHeight() / 2);
layer.add(darth);
stage.add(layer);
test(darth.getWidth() === 438, 'image width should be 438');
test(darth.getHeight() === 300, 'image height should be 300');
darth.applyFilter({
filter: Kinetic.Filters.Grayscale,
callback: function() {
//stage.start();
layer.draw();
warn(layer.toDataURL() === urls[0], 'data url is incorrect');
}
});
};
imageObj.src = '../assets/darth-vader.jpg';
},
'set image fill to color then image then linear gradient then back to image': 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 circle = new Kinetic.Circle({
x: 200,
y: 60,
radius: 50,
fill: 'blue'
});
layer.add(circle);
stage.add(layer);
test(circle.getFill() === 'blue', 'circle fill should be blue');
circle.setFill({
image: imageObj,
repeat: 'no-repeat',
offset: [-200, -70]
});
test(circle.getFill().image !== undefined, 'circle fill image should be defined');
test(circle.getFill().repeat === 'no-repeat', 'circle fill repeat should be no-repeat');
test(circle.getFill().offset.x === -200, 'circle fill offset x should be -200');
test(circle.getFill().offset.y === -70, 'circle fill offset y should be -70');
circle.setFill({
start: {
x: -35,
y: -35
},
end: {
x: 35,
y: 35
},
colorStops: [0, 'red', 1, 'blue']
});
test(circle.getFill().image === undefined, 'circle fill image should be undefined');
circle.setFill({
image: imageObj,
repeat: 'no-repeat',
offset: [-200, -70]
});
layer.draw();
};
imageObj.src = '../assets/darth-vader.jpg';
},
'apply shadow to transparent image': 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 lion = new Kinetic.Image({
x: 200,
y: 40,
image: imageObj,
draggable: true,
shadow: {
color: 'black',
blur: 10,
offset: [20, 20],
opacity: 0.2
}
});
layer.add(lion);
lion.createImageBuffer(function() {
stage.add(layer);
});
//document.body.appendChild(layer.bufferCanvas.element);
};
imageObj.src = '../assets/lion.png';
}
};

101
tests/js/unit/shapes/lineTests.js Normal file
View File

@@ -0,0 +1,101 @@
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');
},
'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],
shadow: {
color: '#aaa',
blur: 10,
offset: [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');
}
};

809
tests/js/unit/shapes/pathTests.js Normal file
View File

File diff suppressed because one or more lines are too long

41
tests/js/unit/shapes/polygonTests.js Normal file
View File

@@ -0,0 +1,41 @@
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);
}
};

83
tests/js/unit/shapes/rectTests.js Normal file
View File

@@ -0,0 +1,83 @@
Test.Modules.RECT = {
'draw rect': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
y: 90,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: {
x: 50
},
scale: [2, 2],
cornerRadius: 15,
draggable: true
});
layer.add(rect);
stage.add(layer);
},
'add stroke rect': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
stroke: 'green',
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
},
'use default stroke (stroke color should be black)': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
},
'use default stroke width (stroke width should be 2)': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
stroke: 'blue'
});
layer.add(rect);
stage.add(layer);
}
};

95
tests/js/unit/shapes/regularPolygonTests.js Normal file
View File

@@ -0,0 +1,95 @@
Test.Modules.REGULAR_POLYGON = {
'add regular polygon triangle': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var poly = new Kinetic.RegularPolygon({
x: 200,
y: 100,
sides: 3,
radius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar',
offset: {
x: 0,
y: -50
}
});
layer.add(poly);
stage.add(layer);
},
'add regular polygon square': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var poly = new Kinetic.RegularPolygon({
x: 200,
y: 100,
sides: 4,
radius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar'
});
layer.add(poly);
stage.add(layer);
},
'add regular polygon pentagon': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var poly = new Kinetic.RegularPolygon({
x: 200,
y: 100,
sides: 5,
radius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar'
});
layer.add(poly);
stage.add(layer);
},
'add regular polygon octogon': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var poly = new Kinetic.RegularPolygon({
x: 200,
y: 100,
sides: 8,
radius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar'
});
layer.add(poly);
stage.add(layer);
}
};

120
tests/js/unit/shapes/spriteTests.js Normal file
View File

@@ -0,0 +1,120 @@
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,
index: 0,
frameRate: Math.random() * 6 + 6,
frameRate: 10,
draggable: true,
shadow: {
color: 'black',
blur: 3,
offset: [3, 1],
opacity: 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)
};
imageObj.src = '../assets/scorpion-sprite.png';
}
};

79
tests/js/unit/shapes/starTests.js Normal file
View File

@@ -0,0 +1,79 @@
Test.Modules.STAR = {
'add five point star': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var star = new Kinetic.Star({
x: 200,
y: 100,
numPoints: 5,
innerRadius: 40,
outerRadius: 70,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar',
offset: {
x: 0,
y: -70
},
scale: {
x: 0.5,
y: 0.5
}
});
layer.add(star);
stage.add(layer);
},
'add five point star with line join and shadow': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 250,
y: 75,
width: 100,
height: 100,
fill: 'red'
});
var star = new Kinetic.Star({
x: 200,
y: 100,
numPoints: 5,
innerRadius: 40,
outerRadius: 70,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
lineJoin: "round",
shadow: {
color: 'black',
blur: 10,
offset: [20, 20],
opacity: 0.5
},
draggable: true
});
layer.add(rect);
layer.add(star);
stage.add(layer);
test(star.getLineJoin() === 'round', 'lineJoin property should be round');
star.setLineJoin('bevel');
test(star.getLineJoin() === 'bevel', 'lineJoin property should be bevel');
star.setLineJoin('round');
}
};

128
tests/js/unit/shapes/textPathTests.js Normal file
View File

File diff suppressed because one or more lines are too long

316
tests/js/unit/shapes/textTests.js Normal file
View File

@@ -0,0 +1,316 @@
Test.Modules.Text = {
'text getters and setters': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var text = new Kinetic.Text({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
stroke: '#555',
strokeWidth: 5,
fill: '#ddd',
text: 'Hello World!',
fontSize: 50,
fontFamily: 'Calibri',
fontStyle: 'normal',
textFill: '#888',
textStroke: '#333',
align: 'right',
lineHeight: 1.2,
width: 400,
height: 100,
padding: 10,
shadow: {
color: 'black',
blur: 1,
offset: [10, 10],
opacity: 0.2
},
cornerRadius: 10,
draggable: true
});
// center text box
text.setOffset(text.getWidth() / 2, text.getHeight() / 2);
layer.add(text);
stage.add(layer);
/*
* test getters and setters
*/
test(text.getX() === stage.getWidth() / 2, 'text box x should be in center of stage');
test(text.getY() === stage.getHeight() / 2, 'text box y should be in center of stage');
test(text.getStroke() === '#555', 'text box stroke should be #555');
test(text.getStrokeWidth() === 5, 'text box stroke width should be 5');
test(text.getFill() === '#ddd', 'text box fill should be #ddd');
test(text.getText() === 'Hello World!', 'text should be Hello World!');
test(text.getFontSize() == 50, 'font size should 50');
test(text.getFontFamily() == 'Calibri', 'font family should be Calibri');
test(text.getFontStyle() == 'normal', 'font style should be normal');
test(text.getTextFill() == '#888', 'text fill should be #888');
test(text.getTextStroke() == '#333', 'text fill should be #333');
test(text.getAlign() === 'right', 'text should be aligned right');
test(text.getLineHeight() === 1.2, 'line height should be 1.2');
test(text.getWidth() === 400, 'width should be 400');
test(text.getHeight() === 100, 'height should be 100');
test(text.getPadding() === 10, 'padding should be 10');
test(text.getShadow().color === 'black', 'text box shadow color should be black');
test(text.getCornerRadius() === 10, 'text box corner radius should be 10');
test(text.getDraggable() === true, 'text should be draggable');
test(text.getWidth() === 400, 'box width should be 400');
test(text.getHeight() === 100, 'box height should be 100');
test(text.getTextWidth() > 0, 'text width should be greater than 0');
test(text.getTextHeight() > 0, 'text height should be greater than 0');
text.setX(1);
text.setY(2);
text.setStroke('orange');
text.setStrokeWidth(20);
text.setFill('red');
text.setText('bye world!');
text.setFontSize(10);
text.setFontFamily('Arial');
text.setFontStyle('bold');
text.setTextFill('green');
text.setTextStroke('yellow');
text.setAlign('left');
text.setWidth(300);
text.setHeight(75);
text.setPadding(20);
text.setShadow({
color: 'green'
});
text.setCornerRadius(20);
text.setDraggable(false);
test(text.getX() === 1, 'text box x should be 1');
test(text.getY() === 2, 'text box y should be 2');
test(text.getStroke() === 'orange', 'text box stroke should be orange');
test(text.getStrokeWidth() === 20, 'text box stroke width should be 20');
test(text.getFill() === 'red', 'text box fill should be red');
test(text.getText() === 'bye world!', 'text should be bye world!');
test(text.getFontSize() == 10, 'font size should 10');
test(text.getFontFamily() == 'Arial', 'font family should be Arial');
test(text.getFontStyle() == 'bold', 'font style should be bold');
test(text.getTextFill() == 'green', 'text fill should be green');
test(text.getTextStroke() == 'yellow', 'text fill should be yellow');
test(text.getAlign() === 'left', 'text should be aligned left');
test(text.getWidth() === 300, 'width should be 300');
test(text.getHeight() === 75, 'height should be 75');
test(text.getPadding() === 20, 'padding should be 20');
test(text.getShadow().color === 'green', 'text box shadow color should be green');
test(text.getCornerRadius() === 20, 'text box corner radius should be 20');
test(text.getDraggable() === false, 'text draggable should be false');
// test set text to integer
text.setText(5);
//document.body.appendChild(layer.bufferCanvas.element)
//layer.setListening(false);
layer.drawBuffer();
},
'test size setters and getters': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 50,
fill: 'red'
});
var ellipse = new Kinetic.Ellipse({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: {
x: 100,
y: 50
},
fill: 'yellow'
});
layer.add(ellipse);
layer.add(circle);
stage.add(layer);
// circle tests
test(circle.attrs.width === undefined, 'circle.attrs.width should be undefined');
test(circle.attrs.height === undefined, 'circle.attrs.height should be undefined');
test(circle.getWidth() === 100, 'circle width should be 100');
test(circle.getHeight() === 100, 'circle height should be 100');
test(circle.getSize().width === 100, 'circle width should be 100');
test(circle.getSize().height === 100, 'circle height should be 100');
test(circle.getRadius() === 50, 'circle radius should be 50');
circle.setWidth(200);
test(circle.attrs.width === 200, 'circle.attrs.width should be 200');
test(circle.attrs.height === undefined, 'circle.attrs.height should be undefined');
test(circle.getWidth() === 200, 'circle width should be 200');
test(circle.getHeight() === 200, 'circle height should be 200');
test(circle.getSize().width === 200, 'circle width should be 200');
test(circle.getSize().height === 200, 'circle height should be 200');
test(circle.getRadius() === 100, 'circle radius should be 100');
// ellipse tests
test(ellipse.attrs.width === undefined, 'ellipse.attrs.width should be undefined');
test(ellipse.attrs.height === undefined, 'ellipse.attrs.height should be undefined');
test(ellipse.getWidth() === 200, 'ellipse width should be 200');
test(ellipse.getHeight() === 100, 'ellipse height should be 100');
test(ellipse.getSize().width === 200, 'ellipse width should be 200');
test(ellipse.getSize().height === 100, 'ellipse height should be 100');
test(ellipse.getRadius().x === 100, 'ellipse radius x should be 100');
ellipse.setWidth(400);
test(ellipse.attrs.width === 400, 'ellipse.attrs.width should be 400');
test(ellipse.attrs.height === undefined, 'ellipse.attrs.height should be undefined');
test(ellipse.getWidth() === 400, 'ellipse width should be 400');
test(ellipse.getHeight() === 100, 'ellipse height should be 100');
test(ellipse.getSize().width === 400, 'ellipse width should be 400');
test(ellipse.getSize().height === 100, 'ellipse height should be 100');
test(ellipse.getRadius().x === 200, 'ellipse radius x should be 200');
},
'text multi line': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var text = new Kinetic.Text({
x: 10,
y: 10,
stroke: '#555',
strokeWidth: 5,
fill: '#ddd',
text: 'HEADING\n\nAll the world\'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.',
//text: 'HEADING\n\nThis is a really cool paragraph. \n And this is a footer.',
fontSize: 16,
fontFamily: 'Calibri',
fontStyle: 'normal',
textFill: '#555',
//width: 20,
width: 380,
//width: 200,
padding: 20,
align: 'center',
shadow: {
color: 'black',
blur: 1,
offset: [10, 10],
opacity: 0.2
},
cornerRadius: 10,
draggable: true,
detectionType: 'path'
});
// center text box
//text.setOffset(text.getBoxWidth() / 2, text.getBoxHeight() / 2);
layer.add(text);
stage.add(layer);
/*
text.transitionTo({
width: 500,
duration: 10
});
*/
},
'text multi line with shadows': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var text = new Kinetic.Text({
x: 10,
y: 10,
//stroke: '#555',
//strokeWidth: 5,
text: 'HEADING\n\nAll the world\'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.',
//text: 'HEADING\n\nThis is a really cool paragraph. \n And this is a footer.',
fontSize: 16,
fontFamily: 'Calibri',
fontStyle: 'normal',
textFill: '#555',
//width: 20,
width: 380,
//width: 200,
padding: 20,
align: 'center',
shadow: {
color: 'red',
blur: 1,
offset: [10, 10],
opacity: 0.5
},
cornerRadius: 10,
draggable: true,
detectionType: 'path'
});
layer.add(text);
stage.add(layer);
//console.log(layer.toDataURL());
warn(layer.toDataURL() === dataUrls['multi line text with shadows'], 'multi line text with shadows data url is incorrect');
},
'change font size should update text data': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var text = new Kinetic.Text({
x: 10,
y: 10,
fill: '#ddd',
text: 'Some awesome text',
fontSize: 16,
fontFamily: 'Calibri',
fontStyle: 'normal',
textFill: '#555',
align: 'center',
padding: 5,
draggable: true,
detectionType: 'path'
});
var width = text.getWidth();
var height = text.getHeight();
layer.add(text);
stage.add(layer);
text.setFontSize(30);
layer.draw();
test(text.getWidth() > width, 'text box width should have increased.');
test(text.getHeight() > height, 'text box height should have increased.');
}
};

263
tests/js/unit/stageTests.js Normal file
View File

@@ -0,0 +1,263 @@
Test.Modules.STAGE = {
'instantiate stage with id': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
},
'instantiate stage with dom element': function(containerId) {
var containerDom = document.getElementById(containerId);
var stage = new Kinetic.Stage({
container: containerDom,
width: 578,
height: 200
});
},
'set stage size': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle'
});
test(stage.getSize().width === 578 && stage.getSize().height === 200, 'stage size should be 578 x 200');
stage.setSize(1, 2);
test(stage.getSize().width === 1 && stage.getSize().height === 2, 'stage size should be 1 x 2');
stage.setSize(3);
test(stage.getSize().width === 3 && stage.getSize().height === 3, 'stage size should be 3 x 3');
stage.setSize({
width: 4,
height: 5
});
test(stage.getSize().width === 4 && stage.getSize().height === 5, 'stage size should be 4 x 5');
stage.setSize({
width: 6
});
test(stage.getSize().width === 6 && stage.getSize().height === 5, 'stage size should be 6 x 5');
stage.setSize({
height: 7
});
test(stage.getSize().width === 6 && stage.getSize().height === 7, 'stage size should be 6 x 7');
stage.setSize([8, 9]);
test(stage.getSize().width === 8 && stage.getSize().height === 9, 'stage size should be 8 x 9');
stage.setSize([1, 1, 10, 11]);
test(stage.getSize().width === 10 && stage.getSize().height === 11, 'stage size should be 10 x 11');
layer.add(circle);
stage.add(layer);
stage.setSize(333, 155);
test(stage.getSize().width === 333, 'stage width should be 333');
test(stage.getSize().height === 155, 'stage height should be 155');
test(stage.getDOM().style.width === '333px', 'content width should be 333');
test(stage.getDOM().style.height === '155px', 'content height should be 155px');
test(layer.getCanvas().element.width === 333, 'layer canvas element width should be 333');
test(layer.getCanvas().element.height === 155, 'layer canvas element width should be 155');
},
'reset stage': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200,
x: 100
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
stage.add(layer);
layer.add(group);
group.add(circle);
layer.draw();
test(stage.getChildren().length === 1, 'stage should have one child');
test(stage.getX() === 100, 'stage x should be 100');
stage.reset();
test(stage.getChildren().length === 0, 'stage should have no children');
test(stage.getX() === 0, 'stage x should be 0');
},
'get stage DOM': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
test(stage.getDOM().className === 'kineticjs-content', 'stage DOM class name is wrong');
},
'test getIntersections': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200,
throttle: 999
});
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);
// test individual shapes
test(stage.getIntersections(266, 114).length === 1, '17) getIntersections should return one shape');
test(stage.getIntersections(266, 114)[0].getId() === 'greenCircle', '19) first intersection should be greenCircle');
test(stage.getIntersections(414, 115).length === 1, '18) getIntersections should return one shape');
test(stage.getIntersections(414, 115)[0].getId() === 'redCircle', '20) first intersection should be redCircle');
test(stage.getIntersections(350, 118).length === 2, '1) getIntersections should return two shapes');
test(stage.getIntersections(350, 118)[0].getId() === 'redCircle', '2) first intersection should be redCircle');
test(stage.getIntersections(350, 118)[1].getId() === 'greenCircle', '3) second intersection should be greenCircle');
// hide green circle. make sure only red circle is in result set
greenCircle.hide();
layer.draw();
test(stage.getIntersections(350, 118).length === 1, '4) getIntersections should return one shape');
test(stage.getIntersections(350, 118)[0].getId() === 'redCircle', '5) first intersection should be redCircle');
// show green circle again. make sure both circles are in result set
greenCircle.show();
layer.draw();
test(stage.getIntersections(350, 118).length === 2, '6) getIntersections should return two shapes');
test(stage.getIntersections(350, 118)[0].getId() === 'redCircle', '7) first intersection should be redCircle');
test(stage.getIntersections(350, 118)[1].getId() === 'greenCircle', '8) second intersection should be greenCircle');
// hide red circle. make sure only green circle is in result set
redCircle.hide();
layer.draw();
test(stage.getIntersections(350, 118).length === 1, '9) getIntersections should return one shape');
test(stage.getIntersections(350, 118)[0].getId() === 'greenCircle', '10) first intersection should be greenCircle');
// show red circle again. make sure both circles are in result set
redCircle.show();
layer.draw();
test(stage.getIntersections(350, 118).length === 2, '11) getIntersections should return two shapes');
test(stage.getIntersections(350, 118)[0].getId() === 'redCircle', '12) first intersection should be redCircle');
test(stage.getIntersections(350, 118)[1].getId() === 'greenCircle', '13) second intersection should be greenCircle');
// test from layer
test(layer.getIntersections(350, 118).length === 2, '14) getIntersections should return two shapes');
test(layer.getIntersections(350, 118)[0].getId() === 'redCircle', '15) first intersection should be redCircle');
test(layer.getIntersections(350, 118)[1].getId() === 'greenCircle', '16) second intersection should be greenCircle');
},
'scale stage after add layer': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(circle);
stage.add(layer);
stage.setScale(0.5);
test(stage.getScale().x === 0.5, 'stage scale x should be 0.5');
test(stage.getScale().y === 0.5, 'stage scale y should be 0.5');
stage.draw();
},
'scale stage before add shape': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
stage.setScale(0.5);
test(stage.getScale().x === 0.5, 'stage scale x should be 0.5');
test(stage.getScale().y === 0.5, 'stage scale y should be 0.5');
layer.add(circle);
stage.add(layer);
},
'scale stage with no shapes': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
stage.add(layer);
stage.setScale(0.5);
stage.draw();
},
'test stage.getStage()': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
test(stage.getStage() !== undefined, 'stage is undefined');
//console.log(stage.getStage());
}
};

163
tests/js/unit/transitionTests.js Normal file
View File

@@ -0,0 +1,163 @@
Test.Modules.TRANSITION = {
'start animation when transition completes': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 0,
y: 100,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
var amplitude = 150;
var period = 1000;
var centerX = 0;
var anim = new Kinetic.Animation({
func: function(frame) {
rect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
layer.draw();
}
});
anim.start();
anim.stop();
centerX = 300;
var go = Kinetic.Global;
rect.transitionTo({
x: 300,
duration: 1,
callback: function() {
test(rect.getX() === 300, 'rect x is not 300');
anim.start();
}
});
},
'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 transFinished = false;
var trans = rect.transitionTo({
duration: 0.2,
x: 400,
y: 30,
rotation: Math.PI * 2,
easing: 'bounce-ease-out',
callback: function() {
transFinished = true;
}
});
setTimeout(function() {
trans.stop();
}, 100);
setTimeout(function() {
trans.resume();
}, 100);
},
'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');
}
});
},
'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() {
/*
* TODO: this method fails every now and then, seemingly
* from a race condition. need to investigate
*/
/*
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');
*/
}
});
}
};

9541
tests/js/unitTests.js
View File

File diff suppressed because one or more lines are too long