mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
migrated Rect and Blob tests to Mocha
This commit is contained in:
Eric Rowell
parent
c802935208
commit
18d36d9d77
@ -28,6 +28,7 @@
|
||||
|
||||
<script src="unit/Rect-test.js"></script>
|
||||
<script src="unit/Circle-test.js"></script>
|
||||
<script src="unit/Blob-test.js"></script>
|
||||
<script>
|
||||
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
|
||||
else { mocha.run(); }
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
Test.Modules.BLOB = {
|
||||
'add blobs': function(containerId) {
|
||||
suite('Blob', function(){
|
||||
// ======================================================
|
||||
test('add blobs', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
@ -54,26 +55,28 @@ Test.Modules.BLOB = {
|
||||
layer.add(blob2);
|
||||
stage.add(layer);
|
||||
|
||||
test(blob1.getTension() === 0.8, 'blob1 tension should be 0.8');
|
||||
test(blob2.getTension() === 1.2, 'blob2 tension should be 1.2');
|
||||
assert.equal(blob1.getTension(), 0.8);
|
||||
assert.equal(blob2.getTension(), 1.2);
|
||||
|
||||
test(blob1.getClassName() === 'Blob', 'getClassName should be Blob');
|
||||
assert.equal(blob1.getClassName(), 'Blob');
|
||||
|
||||
//console.log(blob1.getPoints())
|
||||
|
||||
// test setter
|
||||
blob1.setTension(1.5);
|
||||
test(blob1.getTension() === 1.5, 'blob1 tension should be 1.5');
|
||||
},
|
||||
'add blob and define tension first': function(containerId) {
|
||||
assert.equal(blob1.getTension(), 1.5);
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('add blob and define tension first', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
/*
|
||||
|
||||
var blob = new Kinetic.Blob({
|
||||
tension: 0.8,
|
||||
points: [{
|
||||
@ -95,22 +98,18 @@ Test.Modules.BLOB = {
|
||||
fill: '#aaf'
|
||||
|
||||
});
|
||||
*/
|
||||
|
||||
var json = '{"attrs":{"tension":0.8,"points":[{"x":73,"y":140},{"x":340,"y":23},{"x":500,"y":109},{"x":300,"y":170}],"stroke":"blue","strokeWidth":10,"draggable":true,"fill":"#aaf"},"className":"Blob"}';
|
||||
var blob = Kinetic.Node.create(json);
|
||||
|
||||
layer.add(blob);
|
||||
stage.add(layer);
|
||||
|
||||
//console.log(blob.toJSON());
|
||||
assert.equal(stage.get('Blob')[0].getPoints().length, 4);
|
||||
|
||||
test(stage.get('Blob')[0].getPoints().length === 4, 'created blob should have 4 points');
|
||||
});
|
||||
|
||||
},
|
||||
'add blobs2': function(containerId) {
|
||||
// ======================================================
|
||||
test('check for kinetic event handlers', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
@ -141,23 +140,21 @@ Test.Modules.BLOB = {
|
||||
|
||||
stage.add(layer);
|
||||
|
||||
test(blob.eventListeners.pointsChange[0].name === 'kinetic', 'blob should have kinetic specific pointsChange event handler');
|
||||
test(blob.eventListeners.tensionChange[0].name === 'kinetic', 'blob should have kinetic specific tensionChange event handler');
|
||||
assert.equal(blob.eventListeners.pointsChange[0].name, 'kinetic');
|
||||
assert.equal(blob.eventListeners.tensionChange[0].name, 'kinetic');
|
||||
|
||||
// removing handlers should not remove kinetic specific handlers
|
||||
blob.off('pointsChange');
|
||||
blob.off('tensionChange');
|
||||
|
||||
test(blob.eventListeners.pointsChange[0].name === 'kinetic', 'blob should have kinetic specific pointsChange event handler');
|
||||
test(blob.eventListeners.tensionChange[0].name === 'kinetic', 'blob should have kinetic specific tensionChange event handler');
|
||||
assert.equal(blob.eventListeners.pointsChange[0].name, 'kinetic');
|
||||
assert.equal(blob.eventListeners.tensionChange[0].name, 'kinetic');
|
||||
|
||||
// you can force remove an event by adding the name
|
||||
blob.off('pointsChange.kinetic');
|
||||
blob.off('tensionChange.kinetic');
|
||||
|
||||
test(!blob.eventListeners.pointsChange, 'blob should have no pointsChange handlers');
|
||||
test(!blob.eventListeners.tensionChange, 'blob should have no tensionChange handlers');
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
assert.equal(blob.eventListeners.pointsChange, undefined);
|
||||
assert.equal(blob.eventListeners.tensionChange, undefined);
|
||||
});
|
||||
});
|
||||
@ -73,4 +73,120 @@ suite('Rect', function(){
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();moveTo(5,0);lineTo(95,0);arc(95,5,5,4.712,0,false);lineTo(100,45);arc(95,45,5,0,1.571,false);lineTo(5,50);arc(5,45,5,1.571,3.142,false);lineTo(0,5);arc(5,5,5,3.142,4.712,false);closePath();fillStyle=green;fill();fillStyle=green;fill();save();lineWidth=2;strokeStyle=blue;stroke();restore();restore()');
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
// ======================================================
|
||||
test('draw rect', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
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);
|
||||
|
||||
assert.equal(rect.getClassName(), 'Rect');
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('add fill stroke rect', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 200,
|
||||
y: 100,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'blue',
|
||||
stroke: 'green',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('add stroke rect', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
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);
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('use default stroke (stroke color should be black)', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
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);
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('use default stroke width (stroke width should be 2)', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
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);
|
||||
});
|
||||
|
||||
});
|
||||
@ -1,105 +0,0 @@
|
||||
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);
|
||||
|
||||
test(rect.getClassName() === 'Rect', 'className should be Rect');
|
||||
},
|
||||
'add fill 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,
|
||||
fill: 'blue',
|
||||
stroke: 'green',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user