lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -6,7 +6,9 @@ To build a development version of the library, run `thor build:dev VERSION`, whe
If you add a file in the src directory, be sure to add the filename to the filename array in the Thorfile.
#Tests
To run tests, open `unitTests.html`, `functionalTests.html`, `manualTests.html`, or `performanceTests.html` in the `tests/html` directory. Unit, functional, and performance tests output the results to the console via `console.log()` so be sure to have it open. Use test() for hard tests which will throw an error if something fails, and use warn() for soft tests that will allow the tests to continue. The warn() method is great for tests that will have different results in different browsers, such as canvas data url comparisons, text metric dimensions, etc. All tests should pass in Google Chrome with no warnings, and all tests should pass with some warnings in other browsers.
To run unit tests, you'll need to build the `unitTests.js` file by running `thor build:test` and then opening `unitTests.html` in the `tests/html` directory. The other tests can be ran directly by opening `functionalTests.html`, `manualTests.html`, or `performanceTests.html` in the `tests/html` directory. Unit, functional, and performance tests output the results to the console via `console.log()` so be sure to have it open.
To add / modify unit tests, be sure to do so in the `tests/js/unit` directory, because these are the source test files that are concatenated together when building `unitTests.js`. Use `test()` for hard tests which will throw an error if something fails, and use `warn()` for soft tests that will allow the tests to continue if the test condition fails. The `warn()` method is great for tests that will have different results in different browsers, such as canvas data url comparisons, text metric dimensions, etc. All tests should pass in Google Chrome with no warnings, and all tests should pass with some warnings in other browsers.
#Pull Requests
I'd be happy to review any pull requests that may better the KineticJS project, in particular if you have a bug fix, enhancement, or a new shape (see `src/shapes` for examples). Before doing so, please first make sure that all of the unit tests and functional tests pass.

54
Thorfile
View File

@ -9,12 +9,35 @@ class Build < Thor
"src/Animation.js", "src/Node.js", "src/DragAndDrop.js", "src/Transition.js", "src/Container.js", "src/Stage.js", "src/Layer.js", "src/Group.js", "src/Shape.js",
"src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Sprite.js", "src/shapes/Star.js", "src/shapes/RegularPolygon.js", "src/shapes/Path.js", "src/shapes/TextPath.js"
]
UNIT_TESTS = [
"tests/js/unit/nodeTests.js",
"tests/js/unit/stageTests.js",
"tests/js/unit/containerTests.js",
"tests/js/unit/layerTests.js",
"tests/js/unit/shapeTests.js",
"tests/js/unit/ddTests.js",
"tests/js/unit/customShapeTests.js",
"tests/js/unit/animationTests.js",
"tests/js/unit/transitionTests.js",
"tests/js/unit/shapes/rectTests.js",
"tests/js/unit/shapes/circleTests.js",
"tests/js/unit/shapes/ellipseTests.js",
"tests/js/unit/shapes/imageTests.js",
"tests/js/unit/shapes/polygonTests.js",
"tests/js/unit/shapes/lineTests.js",
"tests/js/unit/shapes/regularPolygonTests.js",
"tests/js/unit/shapes/starTests.js",
"tests/js/unit/shapes/textTests.js",
"tests/js/unit/shapes/pathTests.js"
]
if !File.directory?("dist")
puts ":: Creating dist directory..."
Dir.mkdir("dist")
end
# dev build
desc "dev", "Concatenate all the js files into /dist/kinetic-VERSION.js."
def dev(version)
@ -36,6 +59,26 @@ class Build < Thor
puts " -> Done!"
end
# test build
desc "test", "Concatenate all the unit test js files into tests/js/unitTests.js"
def test()
file_name = "tests/js/unitTests.js"
puts ":: Deleting old unitTests.js..."
if File.file?("tests/js/unitTests.js")
File.delete("tests/js/unitTests.js")
end
puts ":: Building new unitTests.js..."
File.open(file_name, "w") do |file|
file.puts concatenateUnitTests
end
puts " -> Done!"
end
#prod build
desc "prod", "Concatenate all the js files in into /dist/kinetic-VERSION.min.js and minify it."
def prod(version)
file_name = "dist/kinetic-#{version}.min.js"
@ -51,13 +94,11 @@ class Build < Thor
#build full minfiied prod file
#=begin
File.open(file_name, "w") do |file|
uglify = Uglifier.compile(concatenate())
uglify.sub!(/\*\/ .+ \*\//xm, "*/")
file.puts replace_tokens(uglify, version)
end
#=end
#build modular minified files
puts ":: Building minified modules..."
@ -86,6 +127,15 @@ class Build < Thor
return content
end
def concatenateUnitTests()
content = ""
UNIT_TESTS.each do |file|
content << IO.read(File.expand_path(file)) << "\n"
end
return content
end
def replace_tokens(content, version)
date = Time.now.strftime("%b %d %Y")

2
src/shapes/TextPath.js
View File

@ -306,7 +306,7 @@ Kinetic.Global.extend(Kinetic.TextPath, Kinetic.Shape);
Kinetic.Node.addGettersSetters(Kinetic.TextPath, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth']);
Kinetic.Node.addGetters(Kinetic.TextPath, ['text']);
// create reference to Text methods
// reference Text methods
Kinetic.TextPath.prototype.fillText = Kinetic.Text.prototype.fillText;
Kinetic.TextPath.prototype._fillTextScene = Kinetic.Text.prototype._fillTextScene;
Kinetic.TextPath.prototype._fillTextBuffer = Kinetic.Text.prototype._fillTextBuffer;

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