finished migrating all shape unit tests over to mocha. continued working on context tracing support

test/unit/shapes/Blob-test.js

@@ -0,0 +1,127 @@
+suite('Blob', function(){
+    // ======================================================
+    test('add blob', function() {
+        var stage = buildStage();
+        var layer = new Kinetic.Layer();
+
+        var blob = new Kinetic.Blob({
+            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',
+            tension: 0.8
+        });
+
+        layer.add(blob);
+        stage.add(layer);
+
+        assert.equal(blob.getTension(), 0.8);
+
+        assert.equal(blob.getClassName(), 'Blob');
+
+        //console.log(blob1.getPoints())
+
+        // test setter
+        blob.setTension(1.5);
+        assert.equal(blob.getTension(), 1.5);
+
+        var trace = layer.getContext().getTrace();
+        assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(73,140);bezierCurveTo(90.922,74.135,129.542,38.279,340,23);bezierCurveTo(471.142,13.479,514.876,54.33,500,109);bezierCurveTo(482.876,171.93,463.05,158.163,300,170);bezierCurveTo(121.45,182.963,58.922,191.735,73,140);closePath();fillStyle=#aaf;fill();lineWidth=10;strokeStyle=blue;stroke();restore()');
+    });
+
+    // ======================================================
+    test('define tension first', function() {
+        var stage = buildStage();
+        var layer = new Kinetic.Layer();
+
+     
+        var blob = new Kinetic.Blob({
+            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'
+
+        });
+
+        layer.add(blob);
+        stage.add(layer);
+
+        assert.equal(stage.get('Blob')[0].getPoints().length, 4);
+
+    });
+
+    // ======================================================
+    test('check for kinetic event handlers', function() {
+        var stage = buildStage();
+        var layer = new Kinetic.Layer();
+
+        var blob = new Kinetic.Blob({
+            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',
+            tension: 0.8
+        });
+
+        layer.add(blob);
+
+        stage.add(layer);
+
+        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');
+
+        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');
+
+        assert.equal(blob.eventListeners.pointsChange, undefined);
+        assert.equal(blob.eventListeners.tensionChange, undefined);
+    });
+});

test/unit/shapes/Circle-test.js

@@ -0,0 +1,192 @@
+suite('Circle', function(){
+  // ======================================================
+
+  test('add circle to stage', function(){
+    var stage = buildStage();
+    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();
+
+    assert.equal(attrs.x, 100);
+    assert.equal(attrs.y, 100);
+    assert.equal(attrs.radius, 70);
+    assert.equal(attrs.fill, 'green');
+    assert.equal(attrs.stroke, 'black');
+    assert.equal(attrs.strokeWidth, 4);
+    assert.equal(attrs.name, 'myCircle');
+    assert.equal(attrs.draggable, true);
+    assert.equal(circle.getClassName(), 'Circle');
+
+
+
+    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();lineWidth=4;strokeStyle=black;stroke();restore()');
+  });
+
+  // ======================================================
+  test('add circle with pattern fill', function(done) {
+      var imageObj = new Image();
+      imageObj.onload = function() {
+          var stage = buildStage();
+          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,
+              fillPatternImage: imageObj,
+              fillPatternOffset: -5,
+              fillPatternScale: 0.7,
+              stroke: 'black',
+              strokeWidth: 4,
+              name: 'myCircle',
+              draggable: true
+          });
+
+          group.add(circle);
+          layer.add(group);
+          stage.add(layer);
+
+          assert.equal(circle.getFillPatternOffset().x, -5);
+          assert.equal(circle.getFillPatternOffset().y, -5);
+
+          circle.setFillPatternOffset(1, 2);
+          assert.equal(circle.getFillPatternOffset().x, 1);
+          assert.equal(circle.getFillPatternOffset().y, 2);
+
+          circle.setFillPatternOffset({
+              x: 3,
+              y: 4
+          });
+          assert.equal(circle.getFillPatternOffset().x, 3);
+          assert.equal(circle.getFillPatternOffset().y, 4);
+
+          done();
+      };
+      imageObj.src = 'assets/darth-vader.jpg';
+
+  });
+
+
+  // ======================================================
+  test('add circle with radial gradient fill', function() {
+      var stage = buildStage();
+      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,
+          fillRadialGradientStartPoint: -20,
+          fillRadialGradientStartRadius: 0,
+          fillRadialGradientEndPoint: -60,
+          fillRadialGradientEndRadius: 130,
+          fillRadialGradientColorStops: [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);
+
+      assert.equal(circle.getFillRadialGradientStartPoint().x, -20);
+      assert.equal(circle.getFillRadialGradientStartPoint().y, -20);
+      assert.equal(circle.getFillRadialGradientStartRadius(), 0);
+      assert.equal(circle.getFillRadialGradientEndPoint().x, -60);
+      assert.equal(circle.getFillRadialGradientEndPoint().y, -60);
+      assert.equal(circle.getFillRadialGradientEndRadius(), 130);
+      assert.equal(circle.getFillRadialGradientColorStops().length, 6);
+
+  });
+
+  // ======================================================
+  test('add shape with linear gradient fill', function() {
+      var stage = buildStage();
+      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,
+          fillLinearGradientStartPoint: -35,
+          fillLinearGradientEndPoint: 35,
+          fillLinearGradientColorStops: [0, 'red', 1, 'blue'],
+          stroke: 'black',
+          strokeWidth: 4,
+          name: 'myCircle',
+          draggable: true
+      });
+
+      group.add(circle);
+      layer.add(group);
+      stage.add(layer);
+
+      assert.equal(circle.getName(), 'myCircle');
+
+  });
+
+  // ======================================================
+  test('set opacity after instantiation', function() {
+      var stage = buildStage();
+      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();
+  });
+
+  // ======================================================
+  test('set fill after instantiation', function() {
+      var stage = buildStage();
+      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);
+  });
+});

test/unit/shapes/Ellipse-test.js

@@ -0,0 +1,22 @@
+suite('Ellipse', function(){
+
+  // ======================================================
+  test('add ellipse', function(){
+      var stage = buildStage();
+      var layer = new Kinetic.Layer();
+      var ellipse = new Kinetic.Ellipse({
+          x: stage.getWidth() / 2,
+          y: stage.getHeight() / 2,
+          radius: [70, 35],
+          fill: 'green',
+          stroke: 'black',
+          strokeWidth: 8
+      });
+      layer.add(ellipse);
+      stage.add(layer);
+      assert.equal(ellipse.getClassName(), 'Ellipse');
+
+      var trace = layer.getContext().getTrace();
+      assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();save();scale(1,0.5);arc(0,0,70,0,6.283,false);restore();closePath();fillStyle=green;fill();lineWidth=8;strokeStyle=black;stroke();restore()');
+  });
+});

test/unit/shapes/Image-test.js

@@ -0,0 +1,300 @@
+suite('Image', function(){
+
+  // ======================================================
+  test('add image', function(done) {
+      var imageObj = new Image();
+      imageObj.onload = function() {
+          var stage = buildStage();
+
+          var layer = new Kinetic.Layer();
+          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();
+
+          assert.equal(darth.getX(), 200);
+          assert.equal(darth.getY(), 60);
+          assert.equal(darth.getWidth(), 100);
+          assert.equal(darth.getHeight(), 100);
+          assert.equal(darth.getOffset().x, 50);
+          assert.equal(darth.getOffset().y, 30);
+          assert.equal(Kinetic.Util._isElement(darth.getImage()), true);
+
+          var crop = null;
+          crop = darth.getCrop();
+          assert.equal(crop.x, 135);
+          assert.equal(crop.y, 7);
+          assert.equal(crop.width, 167);
+          assert.equal(crop.height, 134);
+
+          darth.setCrop(0, 1, 2, 3);
+          crop = darth.getCrop();
+          assert.equal(crop.x, 0);
+          assert.equal(crop.y, 1);
+          assert.equal(crop.width, 2);
+          assert.equal(crop.height, 3);
+
+          darth.setCrop([4, 5, 6, 7]);
+          crop = darth.getCrop();
+          assert.equal(crop.x, 4);
+          assert.equal(crop.y, 5);
+          assert.equal(crop.width, 6);
+          assert.equal(crop.height, 7);
+
+          darth.setCrop({
+              x: 8,
+              y: 9,
+              width: 10,
+              height: 11
+          });
+          crop = darth.getCrop();
+          assert.equal(crop.x, 8);
+          assert.equal(crop.y, 9);
+          assert.equal(crop.width, 10);
+          assert.equal(crop.height, 11);
+
+          darth.setCrop({
+              x: 12
+          });
+          crop = darth.getCrop();
+          assert.equal(crop.x, 12);
+          assert.equal(crop.y, 9);
+          assert.equal(crop.width, 10);
+          assert.equal(crop.height, 11);
+
+          darth.setCrop({
+              y: 13
+          });
+          crop = darth.getCrop();
+          assert.equal(crop.x, 12);
+          assert.equal(crop.y, 13);
+          assert.equal(crop.width, 10);
+          assert.equal(crop.height, 11);
+
+          darth.setCrop({
+              width: 14
+          });
+          crop = darth.getCrop();
+          assert.equal(crop.x, 12);
+          assert.equal(crop.y, 13);
+          assert.equal(crop.width, 14);
+          assert.equal(crop.height, 11);
+
+          darth.setCrop({
+              height: 15
+          });
+          crop = darth.getCrop();
+          assert.equal(crop.x, 12);
+          assert.equal(crop.y, 13);
+          assert.equal(crop.width, 14);
+          assert.equal(crop.height, 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)
+          
+          assert.equal(darth.getClassName(), 'Image');
+
+          done();
+
+      };
+      imageObj.src = 'assets/darth-vader.jpg';
+  });
+
+  // ======================================================
+  test('crop and scale image', function(done) {
+      var imageObj = new Image();
+      imageObj.onload = function() {
+          var stage = buildStage();
+          var layer = new Kinetic.Layer();
+          darth = new Kinetic.Image({
+              x: 200,
+              y: 75,
+              image: imageObj,
+              width: 107,
+              height: 75,
+              crop: [186, 211, 106, 74],
+              draggable: true,
+              scale: [0.5, 0.5]
+          });
+
+          layer.add(darth);
+          stage.add(layer);
+
+
+          assert.equal(darth.getCrop().x, 186);
+          assert.equal(darth.getCrop().y, 211);
+          assert.equal(darth.getCrop().width, 106);
+          assert.equal(darth.getCrop().height, 74);
+
+          assert.equal(darth.getCropX(), 186);
+          assert.equal(darth.getCropY(), 211);
+          assert.equal(darth.getCropWidth(), 106);
+          assert.equal(darth.getCropHeight(), 74);
+
+          darth.setCrop([1, 2, 3, 4]);
+          
+          assert.equal(darth.getCrop().x, 1);
+          assert.equal(darth.getCrop().y, 2);
+          assert.equal(darth.getCrop().width, 3);
+          assert.equal(darth.getCrop().height, 4);
+
+          assert.equal(darth.getCropX(), 1);
+          assert.equal(darth.getCropY(), 2);
+          assert.equal(darth.getCropWidth(), 3);
+          assert.equal(darth.getCropHeight(), 4);
+
+          darth.setCropX(5);
+          darth.setCropY(6);
+          darth.setCropWidth(7);
+          darth.setCropHeight(8);
+
+          assert.equal(darth.getCrop().x, 5);
+          assert.equal(darth.getCrop().y, 6);
+          assert.equal(darth.getCrop().width, 7);
+          assert.equal(darth.getCrop().height, 8);
+
+          assert.equal(darth.getCropX(), 5);
+          assert.equal(darth.getCropY(), 6);
+          assert.equal(darth.getCropWidth(), 7);
+          assert.equal(darth.getCropHeight(), 8);  
+
+          done();    
+
+      };
+      imageObj.src = 'assets/darth-vader.jpg';
+  });
+
+  // ======================================================
+  // TODO: skipping for now because I need to setup a node server for this one
+  test.skip('create image hit region', function(done) {
+      var imageObj = new Image();
+
+      var stage = buildStage();
+      var layer = new Kinetic.Layer();
+
+      imageObj.onload = function() {
+
+          var lion = new Kinetic.Image({
+              x: 200,
+              y: 40,
+              image: imageObj,
+              draggable: true,
+              shadowColor: 'black',
+              shadowBlur: 10,
+              shadowOffset: [20, 20],
+              shadowOpacity: 0.2
+          });
+
+          // override color key with black
+          lion.colorKey = '000000';
+
+          layer.add(lion);
+
+          lion.createImageHitRegion(function() {
+              stage.add(layer);
+              layer.drawHit();
+
+              var hitDataUrl = layer.hitCanvas.toDataURL();
+
+              done();  
+
+          });
+      };
+      imageObj.src = 'assets/lion.png';
+
+      showHit(layer);
+  });
+
+  // ======================================================
+  test('image with svg source', function(done) {
+      var imageObj = new Image();
+
+      var stage = buildStage();
+      var layer = new Kinetic.Layer();
+
+      imageObj.onload = function() {
+
+          var tiger = new Kinetic.Image({
+              x: 0,
+              y: 0,
+              image: imageObj,
+              draggable: true,
+              scale: 0.25
+          });
+
+          layer.add(tiger);
+          stage.add(layer);
+
+          done();  
+      };
+      imageObj.src = 'assets/Ghostscript_Tiger.svg';
+  });
+
+  // ======================================================
+  test('opacity test for image with svg source', function(done) {
+      var imageObj = new Image();
+
+      var stage = buildStage();
+      var layer = new Kinetic.Layer();
+
+      layer.add(new Kinetic.Line({
+          points: [0,0,578,200],
+          stroke: 'black',
+          strokeWidth: 5
+      }));
+      
+      imageObj.onload = function() {
+
+          var tiger = new Kinetic.Image({
+              x: 0,
+              y: 0,
+              image: imageObj,
+              draggable: true,
+              scale: 0.25,
+              opacity: 0.5
+          });
+
+          layer.add(tiger);
+          
+          layer.add(new Kinetic.Line({
+              points: [578,0,0,200],
+              stroke: 'blue',
+              strokeWidth: 5
+          }));
+      
+          stage.add(layer);
+
+          done();  
+
+      };
+      imageObj.style.opacity = 0.5;
+      imageObj.src = 'assets/Ghostscript_Tiger.svg';
+              
+  });
+
+});

test/unit/shapes/Line-test.js

@@ -0,0 +1,129 @@
+suite('Line', function() {
+    // ======================================================
+    test('add line', function() {
+        var stage = buildStage();
+        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]);
+        assert.equal(line.getPoints()[0].x, 1);
+
+        line.setPoints([{
+            x: 5,
+            y: 6
+        }, {
+            x: 7,
+            y: 8
+        }]);
+        assert.equal(line.getPoints()[0].x, 5);
+
+        line.setPoints([73, 160, 340, 23]);
+        assert.equal(line.getPoints()[0].x, 73);
+        
+        assert.equal(line.getClassName(), 'Line');
+    });
+
+    // ======================================================
+    test('test default ponts array for two lines', function() {
+        var stage = buildStage();
+        var layer = new Kinetic.Layer();
+
+        var line = new Kinetic.Line({
+            stroke: 'blue',
+            strokeWidth: 20,
+            lineCap: 'round',
+            lineJoin: 'round',
+            draggable: true
+        });
+
+        var redLine = new Kinetic.Line({
+            x: 50,
+            stroke: 'red',
+            strokeWidth: 20,
+            lineCap: 'round',
+            lineJoin: 'round',
+            draggable: true
+        });
+
+        line.setPoints([0,1,2,3]);
+        redLine.setPoints([4,5,6,7]);
+
+        layer.add(line).add(redLine);
+        stage.add(layer);
+
+        assert.equal(line.getPoints()[0].x, 0);
+        assert.equal(redLine.getPoints()[0].x, 4);
+        
+    });
+
+    // ======================================================
+    test('add dashed line', function() {
+        var stage = buildStage();
+        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],
+            shadowColor: '#aaa',
+            shadowBlur: 10,
+            shadowOffset: [20, 20]
+            //opacity: 0.2
+        });
+
+        layer.add(line);
+        stage.add(layer);
+
+        assert.equal(line.getDashArray().length, 6);
+        line.setDashArray([10, 10]);
+        assert.equal(line.getDashArray().length, 2);
+
+        assert.equal(line.getPoints().length, 4);
+
+    });
+});

test/unit/shapes/Polygon-test.js

@@ -0,0 +1,39 @@
+suite('Polygon', function() {
+    test('add polygon', function() {
+        var stage = buildStage();
+
+        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);
+        
+        assert.equal(poly.getClassName(), 'Polygon');
+    });
+});

test/unit/shapes/Rect-test.js

@@ -0,0 +1,163 @@
+suite('Rect', function(){
+
+  // ======================================================
+  test('add rect to stage', function(){
+    var stage = buildStage();
+
+    var layer = new Kinetic.Layer();
+
+    var rect = new Kinetic.Rect({
+      x: 100,
+      y: 50,
+      width: 100,
+      height: 50,
+      fill: 'green',
+      stroke: 'blue'
+    });
+
+    layer.add(rect);
+    stage.add(layer);
+
+    assert.equal(rect.getX(), 100);
+    assert.equal(rect.getY(), 50);
+
+    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();lineWidth=2;strokeStyle=blue;stroke();restore()');
+
+  });
+
+  // ======================================================
+  test('add rect with shadow, rotation, corner radius, and opacity', function(){
+    var stage = buildStage();
+
+    var layer = new Kinetic.Layer();
+
+    var rect = new Kinetic.Rect({
+      x: 100,
+      y: 50,
+      width: 100,
+      height: 50,
+      fill: 'green',
+      stroke: 'blue',
+      shadowColor: 'red',
+      shadowBlur: 10,
+      shadowOffset: 5,
+      shadowOpacity: 0.5,
+      opacity: 0.4,
+      cornerRadius: 5
+    });
+
+    layer.add(rect);
+    stage.add(layer);
+
+    assert.equal(rect.getShadowColor(), 'red');
+    assert.equal(rect.getShadowBlur(), 10);
+    assert.equal(rect.getShadowOffsetX(), 5);
+    assert.equal(rect.getShadowOffsetY(), 5);
+    assert.equal(rect.getShadowOpacity(), 0.5);
+    assert.equal(rect.getOpacity(), 0.4);
+    assert.equal(rect.getCornerRadius(), 5);
+
+    var trace = layer.getContext().getTrace();
+    //console.log(layer.getContext().traceArr);
+    assert.equal(trace, 'clearRect(0,0,578,200);save();globalAlpha=0.4;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();globalAlpha=0.2;shadowColor=red;shadowBlur=10;shadowOffsetX=5;shadowOffsetY=5;fillStyle=green;fill();restore();fillStyle=green;fill();lineWidth=2;strokeStyle=blue;stroke();restore()');
+
+  });
+
+
+
+  // ======================================================
+  test('draw rect', function() {
+      var stage = buildStage();
+      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 = buildStage();
+      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 = buildStage();
+      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 = buildStage();
+      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 = buildStage();
+      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);
+  });
+
+});

test/unit/shapes/Spline-test.js

@@ -0,0 +1,252 @@
+suite('Spline', function() {
+    // ======================================================
+    test('add splines', function() {
+        var stage = buildStage();
+        var layer = new Kinetic.Layer();
+
+        var line1 = new Kinetic.Spline({
+            points: [{
+                x: 73,
+                y: 160
+            }, {
+                x: 340,
+                y: 23
+            }, {
+                x: 500,
+                y: 109
+            }, {
+                x: 300,
+                y: 109
+            }],
+            stroke: 'blue',
+            strokeWidth: 10,
+            lineCap: 'round',
+            lineJoin: 'round',
+            draggable: true,
+            tension: 1
+        });
+
+        var line2 = new Kinetic.Spline({
+            points: [{
+                x: 73,
+                y: 160
+            }, {
+                x: 340,
+                y: 23
+            }, {
+                x: 500,
+                y: 109
+            }],
+            stroke: 'red',
+            strokeWidth: 10,
+            lineCap: 'round',
+            lineJoin: 'round',
+            draggable: true,
+            tension: 1
+        });
+
+        var line3 = new Kinetic.Spline({
+            points: [{
+                x: 73,
+                y: 160
+            }, {
+                x: 340,
+                y: 23
+            }],
+            stroke: 'green',
+            strokeWidth: 10,
+            lineCap: 'round',
+            lineJoin: 'round',
+            draggable: true,
+            tension: 1
+        });
+
+        layer.add(line1);
+        layer.add(line2);
+        layer.add(line3);
+        stage.add(layer);
+
+        assert.equal(line1.getClassName(), 'Spline');
+
+
+    });
+
+    // ======================================================
+    test('update spline points', function() {
+        var stage = buildStage();
+        var layer = new Kinetic.Layer();
+
+        var spline = new Kinetic.Spline({
+            points: [{
+                x: 73,
+                y: 160
+            }, {
+                x: 340,
+                y: 23
+            }, {
+                x: 500,
+                y: 109
+            }, {
+                x: 300,
+                y: 109
+            }],
+            stroke: 'blue',
+            strokeWidth: 10,
+            lineCap: 'round',
+            lineJoin: 'round',
+            draggable: true,
+            tension: 1
+        });
+
+
+        layer.add(spline);
+        stage.add(layer);
+
+        assert.equal(spline.allPoints.length, 6);
+
+        spline.setPoints([{
+            x: 73,
+            y: 160
+        }, {
+            x: 340,
+            y: 23
+        }, {
+            x: 500,
+            y: 109
+        }]);
+
+        assert.equal(spline.allPoints.length, 3);
+
+        layer.draw();
+
+
+    });
+
+    // ======================================================
+    test('add point to spline points', function() {
+        var stage = buildStage();
+        var layer = new Kinetic.Layer();
+
+        var spline = new Kinetic.Spline({
+            points: [{
+                x: 73,
+                y: 160
+            }, {
+                x: 340,
+                y: 23
+            }, {
+                x: 500,
+                y: 109
+            }, {
+                x: 300,
+                y: 109
+            }],
+            stroke: 'blue',
+            strokeWidth: 10,
+            lineCap: 'round',
+            lineJoin: 'round',
+            draggable: true,
+            tension: 1
+        });
+
+
+        layer.add(spline);
+        stage.add(layer);
+
+        assert.equal(spline.getPoints().length, 4);
+
+        spline.addPoint({
+            x: 300,
+            y: 200
+        });
+
+        assert.equal(spline.getPoints().length, 5);
+
+        layer.draw();
+    });
+
+    // ======================================================
+    test('create from points represented as a flat array', function() {
+        var stage = buildStage();
+        var layer = new Kinetic.Layer();
+
+        var line = new Kinetic.Spline({
+            points: [
+                73, 160,
+                340, 23,
+                500, 109,
+                300, 109
+            ],
+            stroke: 'blue',
+            strokeWidth: 10,
+            lineCap: 'round',
+            lineJoin: 'round',
+            draggable: true,
+            tension: 1
+        });
+
+        layer.add(line);
+        stage.add(layer);
+
+        assert.equal(line.getPoints().length, 4);
+    });
+
+    // ======================================================
+    test('create from points represented as an array of objects', function() {
+        var stage = buildStage();
+        var layer = new Kinetic.Layer();
+
+        var line = new Kinetic.Spline({
+            points: [{
+                x: 73,
+                y: 160
+            }, {
+                x: 340,
+                y: 23
+            }, {
+                x: 500,
+                y: 109
+            }, {
+                x: 300,
+                y: 109
+            }],
+            stroke: 'blue',
+            strokeWidth: 10,
+            lineCap: 'round',
+            lineJoin: 'round',
+            draggable: true,
+            tension: 1
+        });
+
+        layer.add(line);
+        stage.add(layer);
+
+        assert.equal(line.getPoints().length, 4);
+    });
+
+    // ======================================================
+    test('create from points represented as an array of arrays', function() {
+        var stage = buildStage();
+        var layer = new Kinetic.Layer();
+
+        var line = new Kinetic.Spline({
+            points: [
+                [73, 160],
+                [340, 23],
+                [500, 109],
+                [300, 109]
+            ],
+            stroke: 'blue',
+            strokeWidth: 10,
+            lineCap: 'round',
+            lineJoin: 'round',
+            draggable: true,
+            tension: 1
+        });
+
+        layer.add(line);
+        stage.add(layer);
+
+        assert.equal(line.getPoints().length, 4);
+    });
+});

test/unit/shapes/Sprite-test.js

@@ -0,0 +1,118 @@
+suite('Sprite', function() {
+    // ======================================================
+    test('add sprite', function(done) {
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            var stage = buildStage();
+            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,
+                frameRate: Math.random() * 6 + 6,
+                frameRate: 10,
+                draggable: true,
+                shadowColor: 'black',
+                shadowBlur: 3,
+                shadowOffset: [3, 1],
+                shadowOpacity: 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);
+
+            assert.equal(sprite.getClassName(), 'Sprite');
+            assert.equal(sprite.getIndex(), 0);
+
+            done();
+        };
+        imageObj.src = 'assets/scorpion-sprite.png';
+    });
+});

test/unit/shapes/Text-test.js

@@ -0,0 +1,278 @@
+suite('Text', function(){
+    // ======================================================
+    test('add text with shadows', function() {
+        var stage = buildStage();
+        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 = buildStage();
+        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 = buildStage();
+        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 = buildStage();
+        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 = buildStage();
+        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');
+
+    });
+});

test/unit/shapes/Wedge-test.js

@@ -0,0 +1,50 @@
+suite('Wedge', function() {
+    // ======================================================
+    test('add wedge', function() {
+        var stage = buildStage();
+        var layer = new Kinetic.Layer();
+        var wedge = new Kinetic.Wedge({
+            x: 100,
+            y: 100,
+            radius: 70,
+            angle: Math.PI * 0.4,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4,
+            name: 'myCircle',
+            draggable: true
+        });
+
+        layer.add(wedge);
+        stage.add(layer);
+
+        assert.equal(wedge.getClassName(), 'Wedge');
+
+        var trace = layer.getContext().getTrace();
+        //console.log(trace);
+        assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,1.257,false);lineTo(0,0);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore()');
+    });
+
+    // ======================================================
+    test('set wedge angle using degrees', function() {
+        var stage = buildStage();
+        var layer = new Kinetic.Layer();
+        var wedge = new Kinetic.Wedge({
+            x: 100,
+            y: 100,
+            radius: 70,
+            angleDeg: 90,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4,
+            name: 'myCircle',
+            draggable: true,
+            lineJoin: 'round'
+        });
+
+        layer.add(wedge);
+        stage.add(layer);
+
+        assert.equal(wedge.getAngle(), Math.PI / 2);
+    });
+});