mirror of
https://github.com/konvajs/konva.git
synced 2025-09-19 02:37:59 +08:00
migrated text tests. added more context wrapper methods and properties
This commit is contained in:
Eric Rowell
@@ -1,4 +1,4 @@
|
||||
<html>
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>KineticJS Mocha Tests</title>
|
||||
@@ -28,6 +28,7 @@
|
||||
|
||||
<script src="unit/Rect-test.js"></script>
|
||||
<script src="unit/Circle-test.js"></script>
|
||||
<script src="unit/Text-test.js"></script>
|
||||
<script src="unit/Blob-test.js"></script>
|
||||
<script>
|
||||
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
|
||||
|
||||
60
test/sandbox.html
Normal file
60
test/sandbox.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>KineticJS Mocha Tests</title>
|
||||
<link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
|
||||
<style>
|
||||
#mocha .test {
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="mocha"></div>
|
||||
|
||||
<!-- used for KineticJS container -->
|
||||
<div id="container"></div>
|
||||
|
||||
<script src="../node_modules/mocha/mocha.js"></script>
|
||||
<script src="../node_modules/chai/chai.js"></script>
|
||||
<script src="../dist/kinetic-dev.js"></script>
|
||||
<script>
|
||||
Kinetic.enableTrace = true;
|
||||
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
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',
|
||||
fill: '#555',
|
||||
//width: 20,
|
||||
width: 380,
|
||||
//width: 200,
|
||||
padding: 20,
|
||||
align: 'center',
|
||||
shadowColor: 'red',
|
||||
shadowBlur: 1,
|
||||
shadowOffset: [10, 10],
|
||||
shadowOpacity: 0.5,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(text);
|
||||
stage.add(layer);
|
||||
|
||||
console.log(layer.getContext().getTrace());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -42,7 +42,7 @@ suite('Circle', function(){
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
//console.log(trace);
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();save();lineWidth=4;strokeStyle=black;stroke();restore();restore()');
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();save();fillStyle=green;fill();restore();save();lineWidth=4;strokeStyle=black;stroke();restore();restore()');
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
|
||||
@@ -27,13 +27,13 @@ suite('Rect', function(){
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
//console.log(trace);
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();save();lineWidth=2;strokeStyle=blue;stroke();restore();restore()');
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();rect(0,0,100,50);closePath();save();fillStyle=green;fill();restore();save();lineWidth=2;strokeStyle=blue;stroke();restore();restore()');
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
|
||||
test('add rect to stage with shadow, rotation, corner radius, and opacity', function(){
|
||||
test('add rect with shadow, rotation, corner radius, and opacity', function(){
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
@@ -70,7 +70,7 @@ suite('Rect', function(){
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
//console.log(trace);
|
||||
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()');
|
||||
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();save();fillStyle=green;fill();restore();save();fillStyle=green;fill();restore();save();lineWidth=2;strokeStyle=blue;stroke();restore();restore()');
|
||||
|
||||
});
|
||||
|
||||
|
||||
298
test/unit/Text-test.js
Normal file
298
test/unit/Text-test.js
Normal file
@@ -0,0 +1,298 @@
|
||||
suite('Text', function(){
|
||||
// ======================================================
|
||||
test('add text with shadows', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var rect = new Kinetic.Rect({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
stroke: '#555',
|
||||
strokeWidth: 5,
|
||||
fill: '#ddd',
|
||||
width: 400,
|
||||
height: 100,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 1,
|
||||
shadowOffset: [10, 10],
|
||||
shadowOpacity: 0.2,
|
||||
cornerRadius: 10
|
||||
});
|
||||
|
||||
var text = new Kinetic.Text({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
text: 'Hello World!',
|
||||
fontSize: 50,
|
||||
fontFamily: 'Calibri',
|
||||
fontStyle: 'normal',
|
||||
fill: '#888',
|
||||
stroke: '#333',
|
||||
align: 'right',
|
||||
lineHeight: 1.2,
|
||||
width: 400,
|
||||
height: 100,
|
||||
padding: 10,
|
||||
shadowColor: 'red',
|
||||
shadowBlur: 1,
|
||||
shadowOffset: [10, 10],
|
||||
shadowOpacity: 0.2
|
||||
});
|
||||
|
||||
var group = new Kinetic.Group({
|
||||
draggable: true
|
||||
});
|
||||
|
||||
// center text box
|
||||
rect.setOffset(text.getWidth() / 2, text.getHeight() / 2);
|
||||
text.setOffset(text.getWidth() / 2, text.getHeight() / 2);
|
||||
|
||||
group.add(rect);
|
||||
group.add(text);
|
||||
layer.add(group);
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(text.getClassName(),'Text', 'getClassName should be Text');
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('text getters and setters', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var text = new Kinetic.Text({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
text: 'Hello World!',
|
||||
fontSize: 50,
|
||||
fontFamily: 'Calibri',
|
||||
fontStyle: 'normal',
|
||||
fill: '#888',
|
||||
stroke: '#333',
|
||||
align: 'right',
|
||||
lineHeight: 1.2,
|
||||
width: 400,
|
||||
height: 100,
|
||||
padding: 10,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 1,
|
||||
shadowOffset: [10, 10],
|
||||
shadowOpacity: 0.2,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
// center text box
|
||||
text.setOffset(text.getWidth() / 2, text.getHeight() / 2);
|
||||
|
||||
layer.add(text);
|
||||
stage.add(layer);
|
||||
|
||||
/*
|
||||
* test getters and setters
|
||||
*/
|
||||
|
||||
assert.equal(text.getX(), stage.getWidth() / 2);
|
||||
assert.equal(text.getY(), stage.getHeight() / 2);
|
||||
assert.equal(text.getText(), 'Hello World!');
|
||||
assert.equal(text.getFontSize(), 50);
|
||||
assert.equal(text.getFontFamily(), 'Calibri');
|
||||
assert.equal(text.getFontStyle(), 'normal');
|
||||
assert.equal(text.getFill(), '#888');
|
||||
assert.equal(text.getStroke(), '#333');
|
||||
assert.equal(text.getAlign(), 'right');
|
||||
assert.equal(text.getLineHeight(), 1.2);
|
||||
assert.equal(text.getWidth(), 400);
|
||||
assert.equal(text.getHeight(), 100);
|
||||
assert.equal(text.getPadding(), 10);
|
||||
assert.equal(text.getShadowColor(), 'black');
|
||||
assert.equal(text.getDraggable(), true);
|
||||
assert.equal(text.getWidth(), 400);
|
||||
assert.equal(text.getHeight(), 100);
|
||||
assert(text.getTextWidth() > 0, 'text width should be greater than 0');
|
||||
assert(text.getTextHeight() > 0, 'text height should be greater than 0');
|
||||
|
||||
text.setX(1);
|
||||
text.setY(2);
|
||||
text.setText('bye world!');
|
||||
text.setFontSize(10);
|
||||
text.setFontFamily('Arial');
|
||||
text.setFontStyle('bold');
|
||||
text.setFill('green');
|
||||
text.setStroke('yellow');
|
||||
text.setAlign('left');
|
||||
text.setWidth(300);
|
||||
text.setHeight(75);
|
||||
text.setPadding(20);
|
||||
text.setShadowColor('green');
|
||||
text.setDraggable(false);
|
||||
|
||||
assert.equal(text.getX(), 1);
|
||||
assert.equal(text.getY(), 2);
|
||||
assert.equal(text.getText(), 'bye world!');
|
||||
assert.equal(text.getFontSize(), 10);
|
||||
assert.equal(text.getFontFamily(), 'Arial');
|
||||
assert.equal(text.getFontStyle(), 'bold');
|
||||
assert.equal(text.getFill(), 'green');
|
||||
assert.equal(text.getStroke(), 'yellow');
|
||||
assert.equal(text.getAlign(), 'left');
|
||||
assert.equal(text.getWidth(), 300);
|
||||
assert.equal(text.getHeight(), 75);
|
||||
assert.equal(text.getPadding(), 20);
|
||||
assert.equal(text.getShadowColor(), 'green');
|
||||
assert.equal(text.getDraggable(), false);
|
||||
|
||||
// test set text to integer
|
||||
text.setText(5);
|
||||
|
||||
//document.body.appendChild(layer.bufferCanvas.element)
|
||||
|
||||
//layer.setListening(false);
|
||||
layer.drawHit();
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('text multi line', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var rect = new Kinetic.Rect({
|
||||
x: 10,
|
||||
y: 10,
|
||||
width: 380,
|
||||
height: 300,
|
||||
fill: 'red'
|
||||
});
|
||||
|
||||
var text = new Kinetic.Text({
|
||||
x: 10,
|
||||
y: 10,
|
||||
text: 'HEADING\n\nAll the world\'s a stage, 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: 24,
|
||||
fontFamily: 'Calibri',
|
||||
fontStyle: 'normal',
|
||||
fill: '#555',
|
||||
//width: 20,
|
||||
width: 380,
|
||||
//width: 200,
|
||||
padding: 10,
|
||||
align: 'center',
|
||||
draggable: true,
|
||||
wrap: 'WORD'
|
||||
});
|
||||
|
||||
// center text box
|
||||
//text.setOffset(text.getBoxWidth() / 2, text.getBoxHeight() / 2);
|
||||
|
||||
layer.add(rect).add(text);
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(text.getLineHeight(), 1);
|
||||
|
||||
/*
|
||||
text.transitionTo({
|
||||
width: 50,
|
||||
duration: 20
|
||||
});
|
||||
|
||||
rect.transitionTo({
|
||||
width: 50,
|
||||
duration: 20
|
||||
});
|
||||
*/
|
||||
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('text multi line with shadows', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
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',
|
||||
fill: '#555',
|
||||
//width: 20,
|
||||
width: 380,
|
||||
//width: 200,
|
||||
padding: 20,
|
||||
align: 'center',
|
||||
shadowColor: 'red',
|
||||
shadowBlur: 1,
|
||||
shadowOffset: [10, 10],
|
||||
shadowOpacity: 0.5,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(text);
|
||||
stage.add(layer);
|
||||
|
||||
console.log(layer.getContext().getTrace());
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('change font size should update text data', function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: 'container',
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
|
||||
var text = new Kinetic.Text({
|
||||
x: 10,
|
||||
y: 10,
|
||||
text: 'Some awesome text',
|
||||
fontSize: 16,
|
||||
fontFamily: 'Calibri',
|
||||
fontStyle: 'normal',
|
||||
fill: '#555',
|
||||
align: 'center',
|
||||
padding: 5,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
var width = text.getWidth();
|
||||
var height = text.getHeight();
|
||||
|
||||
|
||||
|
||||
layer.add(text);
|
||||
stage.add(layer);
|
||||
|
||||
text.setFontSize(30);
|
||||
layer.draw();
|
||||
|
||||
//console.log(text.getHeight() + ',' + height);
|
||||
|
||||
assert(text.getWidth() > width, 'width should have increased');
|
||||
assert(text.getHeight() > height, 'height should have increased');
|
||||
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user