From 914195356951221b51ab52bcb82170349c62f147 Mon Sep 17 00:00:00 2001
From: Eric Rowell <erowell83@gmail.com>
Date: Sat, 7 Sep 2013 20:55:03 -0700
Subject: [PATCH] migrated more plugin tests, and continued working on context
 tracer

---
 src/Context.js                                |   9 +-
 src/plugins/Label.js                          |  39 ++--
 src/plugins/Path.js                           |   4 +-
 src/plugins/RegularPolygon.js                 |  11 +-
 src/shapes/Ellipse.js                         |   3 +-
 src/shapes/Line.js                            |   7 +-
 src/shapes/Polygon.js                         |  11 +-
 src/shapes/Spline.js                          |  13 +-
 src/shapes/Sprite.js                          |  12 +-
 test/runner.html                              |   5 +
 test/unit/Circle-test.js                      | 192 ++++++++++++++++++
 test/unit/plugins/Label-test.js               |  79 +++++++
 .../unit/plugins/RegularPolygon-test.js       |  55 +++--
 .../unit/plugins/Star-test.js                 |  34 ++--
 test/unit/shapes/Spline-test.js               |   7 +-
 tests/js/unit/plugins/labelTests.js           |  84 --------
 16 files changed, 374 insertions(+), 191 deletions(-)
 create mode 100644 test/unit/Circle-test.js
 create mode 100644 test/unit/plugins/Label-test.js
 rename tests/js/unit/plugins/regularPolygonTests.js => test/unit/plugins/RegularPolygon-test.js (61%)
 rename tests/js/unit/plugins/starTests.js => test/unit/plugins/Star-test.js (66%)
 delete mode 100644 tests/js/unit/plugins/labelTests.js

diff --git a/src/Context.js b/src/Context.js
index 3144d048..a6064890 100644
--- a/src/Context.js
+++ b/src/Context.js
@@ -23,6 +23,7 @@
             'lineTo',
             'moveTo',
             'putImageData',
+            'quadraticCurveTo',
             'rect', 
             'restore', 
             'rotate',
@@ -229,7 +230,7 @@
         },
         createPattern: function() {
             var a = arguments;
-            this._context.createPattern(a[0], a[1]);
+            return this._context.createPattern(a[0], a[1]);
         },
         createRadialGradient: function() {
             var a = arguments;
@@ -270,7 +271,11 @@
         },
         putImageData: function() {
             var a = arguments;
-            this._context.rect(a[0], a[1], a[2]);
+            this._context.putImageData(a[0], a[1], a[2]);
+        },
+        quadraticCurveTo: function() {
+            var a = arguments;
+            this._context.quadraticCurveTo(a[0], a[1], a[2], a[3]);
         },
         restore: function() {
             this._context.restore();
diff --git a/src/plugins/Label.js b/src/plugins/Label.js
index 1698a1b6..69137e21 100644
--- a/src/plugins/Label.js
+++ b/src/plugins/Label.js
@@ -176,48 +176,47 @@
             this.className = 'Tag';
         },
         drawFunc: function(context) {
-            var _context = context._context,
-                width = this.getWidth(),
+            var width = this.getWidth(),
                 height = this.getHeight(),
                 pointerDirection = this.getPointerDirection(),
                 pointerWidth = this.getPointerWidth(),
                 pointerHeight = this.getPointerHeight(),
                 cornerRadius = this.getCornerRadius();
 
-            _context.beginPath();
-            _context.moveTo(0,0);
+            context.beginPath();
+            context.moveTo(0,0);
 
             if (pointerDirection === UP) {
-                _context.lineTo((width - pointerWidth)/2, 0);
-                _context.lineTo(width/2, -1 * pointerHeight);
-                _context.lineTo((width + pointerWidth)/2, 0);
+                context.lineTo((width - pointerWidth)/2, 0);
+                context.lineTo(width/2, -1 * pointerHeight);
+                context.lineTo((width + pointerWidth)/2, 0);
             }
 
-            _context.lineTo(width, 0);
+            context.lineTo(width, 0);
 
             if (pointerDirection === RIGHT) {
-                _context.lineTo(width, (height - pointerHeight)/2);
-                _context.lineTo(width + pointerWidth, height/2);
-                _context.lineTo(width, (height + pointerHeight)/2);
+                context.lineTo(width, (height - pointerHeight)/2);
+                context.lineTo(width + pointerWidth, height/2);
+                context.lineTo(width, (height + pointerHeight)/2);
             }
 
-            _context.lineTo(width, height);
+            context.lineTo(width, height);
 
             if (pointerDirection === DOWN) {
-                _context.lineTo((width + pointerWidth)/2, height);
-                _context.lineTo(width/2, height + pointerHeight);
-                _context.lineTo((width - pointerWidth)/2, height);
+                context.lineTo((width + pointerWidth)/2, height);
+                context.lineTo(width/2, height + pointerHeight);
+                context.lineTo((width - pointerWidth)/2, height);
             }
 
-            _context.lineTo(0, height);
+            context.lineTo(0, height);
 
             if (pointerDirection === LEFT) {
-                _context.lineTo(0, (height + pointerHeight)/2);
-                _context.lineTo(-1 * pointerWidth, height/2);
-                _context.lineTo(0, (height - pointerHeight)/2);
+                context.lineTo(0, (height + pointerHeight)/2);
+                context.lineTo(-1 * pointerWidth, height/2);
+                context.lineTo(0, (height - pointerHeight)/2);
             }
 
-            _context.closePath();
+            context.closePath();
             context.fillStrokeShape(this);
         }
     };
diff --git a/src/plugins/Path.js b/src/plugins/Path.js
index 5c66dd77..5174b46b 100644
--- a/src/plugins/Path.js
+++ b/src/plugins/Path.js
@@ -80,10 +80,10 @@
                 }
             }
             if (this.getFill() !== undefined) {
-                context.fill(this);
+                context.fillShape(this);
             }
                 
-            context.stroke(this);
+            context.strokeShape(this);
         }
     };
     Kinetic.Util.extend(Kinetic.Path, Kinetic.Shape);
diff --git a/src/plugins/RegularPolygon.js b/src/plugins/RegularPolygon.js
index e31d26f3..433421f5 100644
--- a/src/plugins/RegularPolygon.js
+++ b/src/plugins/RegularPolygon.js
@@ -31,20 +31,19 @@
             this.className = 'RegularPolygon';
         },
         drawFunc: function(context) {
-            var _context = context._context,
-                sides = this.attrs.sides,
+            var sides = this.attrs.sides,
                 radius = this.attrs.radius,
                 n, x, y;
 
-            _context.beginPath();
-            _context.moveTo(0, 0 - radius);
+            context.beginPath();
+            context.moveTo(0, 0 - radius);
 
             for(n = 1; n < sides; n++) {
                 x = radius * Math.sin(n * 2 * Math.PI / sides);
                 y = -1 * radius * Math.cos(n * 2 * Math.PI / sides);
-                _context.lineTo(x, y);
+                context.lineTo(x, y);
             }
-            _context.closePath();
+            context.closePath();
             context.fillStrokeShape(this);
         }
     };
diff --git a/src/shapes/Ellipse.js b/src/shapes/Ellipse.js
index b8a82e08..e0aff401 100644
--- a/src/shapes/Ellipse.js
+++ b/src/shapes/Ellipse.js
@@ -23,8 +23,7 @@
             this.className = ELLIPSE;
         },
         drawFunc: function(context) {
-            var _context = context._context, 
-                r = this.getRadius();
+            var r = this.getRadius();
 
             context.beginPath();
             context.save();
diff --git a/src/shapes/Line.js b/src/shapes/Line.js
index 8f693b95..46fe9a40 100644
--- a/src/shapes/Line.js
+++ b/src/shapes/Line.js
@@ -44,15 +44,14 @@
         drawFunc: function(context) {
             var points = this.getPoints(),
                 length = points.length,
-                _context = context._context,
                 n, point;
 
-            _context.beginPath();
-            _context.moveTo(points[0].x, points[0].y);
+            context.beginPath();
+            context.moveTo(points[0].x, points[0].y);
 
             for(n = 1; n < length; n++) {
                 point = points[n];
-                _context.lineTo(point.x, point.y);
+                context.lineTo(point.x, point.y);
             }
 
             context.strokeShape(this);
diff --git a/src/shapes/Polygon.js b/src/shapes/Polygon.js
index 30d1a372..f6011de5 100644
--- a/src/shapes/Polygon.js
+++ b/src/shapes/Polygon.js
@@ -28,16 +28,15 @@
             this.className = 'Polygon';
         },
         drawFunc: function(context) {
-            var _context = context._context, 
-                points = this.getPoints(), 
+            var points = this.getPoints(), 
                 length = points.length;
 
-            _context.beginPath();
-            _context.moveTo(points[0].x, points[0].y);
+            context.beginPath();
+            context.moveTo(points[0].x, points[0].y);
             for(var n = 1; n < length; n++) {
-                _context.lineTo(points[n].x, points[n].y);
+                context.lineTo(points[n].x, points[n].y);
             }
-            _context.closePath();
+            context.closePath();
             context.fillStrokeShape(this);
         }
     };
diff --git a/src/shapes/Spline.js b/src/shapes/Spline.js
index e9fdb662..5be77fef 100644
--- a/src/shapes/Spline.js
+++ b/src/shapes/Spline.js
@@ -40,12 +40,11 @@
         drawFunc: function(context) {
             var points = this.getPoints(),
                 length = points.length,
-                _context = context._context,
                 tension = this.getTension(),
                 ap, len, n, point;
 
-            _context.beginPath();
-            _context.moveTo(points[0].x, points[0].y);
+            context.beginPath();
+            context.moveTo(points[0].x, points[0].y);
 
             // tension
             if(tension !== 0 && length > 2) {
@@ -53,19 +52,19 @@
                 len = ap.length;
                 n = 2;
 
-                _context.quadraticCurveTo(ap[0].x, ap[0].y, ap[1].x, ap[1].y);
+                context.quadraticCurveTo(ap[0].x, ap[0].y, ap[1].x, ap[1].y);
 
                 while(n < len - 1) {
-                    _context.bezierCurveTo(ap[n].x, ap[n++].y, ap[n].x, ap[n++].y, ap[n].x, ap[n++].y);
+                    context.bezierCurveTo(ap[n].x, ap[n++].y, ap[n].x, ap[n++].y, ap[n].x, ap[n++].y);
                 }
 
-                _context.quadraticCurveTo(ap[len - 1].x, ap[len - 1].y, points[length - 1].x, points[length - 1].y);
+                context.quadraticCurveTo(ap[len - 1].x, ap[len - 1].y, points[length - 1].x, points[length - 1].y);
             }
             // no tension
             else {
                 for(n = 1; n < length; n++) {
                     point = points[n];
-                    _context.lineTo(point.x, point.y);
+                    context.lineTo(point.x, point.y);
                 }
             }
 
diff --git a/src/shapes/Sprite.js b/src/shapes/Sprite.js
index aef7644f..1002633e 100644
--- a/src/shapes/Sprite.js
+++ b/src/shapes/Sprite.js
@@ -87,22 +87,20 @@
             var anim = this.getAnimation(),
                 index = this.getIndex(),
                 f = this.getAnimations()[anim][index],
-                _context = context._context,
                 image = this.getImage();
 
             if(image) {
-                _context.drawImage(image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
+                context.drawImage(image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
             }
         },
         drawHitFunc: function(context) {
             var anim = this.getAnimation(),
                 index = this.getIndex(),
-                f = this.getAnimations()[anim][index],
-                _context = context._context;
+                f = this.getAnimations()[anim][index];
 
-            _context.beginPath();
-            _context.rect(0, 0, f.width, f.height);
-            _context.closePath();
+            context.beginPath();
+            context.rect(0, 0, f.width, f.height);
+            context.closePath();
             context.fill(this);
         },
         /**
diff --git a/test/runner.html b/test/runner.html
index 9efe8b8a..12684580 100644
--- a/test/runner.html
+++ b/test/runner.html
@@ -69,6 +69,11 @@
     <script src="unit/shapes/Sprite-test.js"></script>
     <script src="unit/shapes/Wedge-test.js"></script>
 
+    <!-- plugins -->
+    <script src="unit/plugins/Label-test.js"></script>
+    <script src="unit/plugins/Star-test.js"></script>
+    <script src="unit/plugins/RegularPolygon-test.js"></script>
+
     <script>
       if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
       else { mocha.run(); }
diff --git a/test/unit/Circle-test.js b/test/unit/Circle-test.js
new file mode 100644
index 00000000..9c785a62
--- /dev/null
+++ b/test/unit/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);
+  });
+});
\ No newline at end of file
diff --git a/test/unit/plugins/Label-test.js b/test/unit/plugins/Label-test.js
new file mode 100644
index 00000000..f67cea2b
--- /dev/null
+++ b/test/unit/plugins/Label-test.js
@@ -0,0 +1,79 @@
+suite('Label', function() {
+    // ======================================================
+    test('add label', function() {
+        var stage = buildStage();
+        var layer = new Kinetic.Layer();
+
+        var label = new Kinetic.Label({
+            x: 100,
+            y: 100, 
+            draggable: true
+        });
+
+        // add a tag to the label
+        label.add(new Kinetic.Tag({
+            fill: '#bbb',
+            stroke: '#333',
+            shadowColor: 'black',
+            shadowBlur: 10,
+            shadowOffset: [10, 10],
+            shadowOpacity: 0.2,
+            lineJoin: 'round',
+            pointerDirection: 'up',
+            pointerWidth: 20,
+            pointerHeight: 20,
+            cornerRadius: 5
+        }));
+
+        // add text to the label
+        label.add(new Kinetic.Text({
+            text: '',
+            fontSize: 50,
+            //fontFamily: 'Calibri',
+            //fontStyle: 'normal',
+            lineHeight: 1.2, 
+            //padding: 10,
+            fill: 'green'
+        }));
+
+        layer.add(label);
+        stage.add(layer);
+
+        
+        var beforeTextWidth = label.getText().getWidth();
+
+        label.getText().setFontSize(100);
+
+        var afterTextWidth = label.getText().getWidth();
+
+        label.getText().setFontSize(50);
+        
+        label.getText().setText('Hello big world');
+
+        layer.draw();
+      
+        
+        assert.equal(label.getType(), 'Group');
+        assert.equal(label.getClassName(), 'Label');
+
+        var json = label.toJSON();
+        //console.log(json);
+
+        var trace = layer.getContext().getTrace();
+        //console.log(trace);
+        assert.equal(trace, 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,100,120);beginPath();moveTo(0,0);lineTo(-10,0);lineTo(0,-20);lineTo(10,0);lineTo(0,0);lineTo(0,60);lineTo(0,60);closePath();save();globalAlpha=0.2;shadowColor=black;shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;fillStyle=#bbb;fill();restore();fillStyle=#bbb;fill();lineWidth=2;strokeStyle=#333;stroke();restore();save();transform(1,0,0,1,100,120);font=normal 50px Calibri;textBaseline=middle;textAlign=left;save();translate(0,0);translate(0,25);save();fillStyle=green;fillText(,0,0);restore();translate(0,60);restore();restore();clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,-51.5,120);beginPath();moveTo(0,0);lineTo(141.5,0);lineTo(151.5,-20);lineTo(161.5,0);lineTo(303,0);lineTo(303,60);lineTo(0,60);closePath();save();globalAlpha=0.2;shadowColor=black;shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;fillStyle=#bbb;fill();restore();fillStyle=#bbb;fill();lineWidth=2;strokeStyle=#333;stroke();restore();save();transform(1,0,0,1,-51.5,120);font=normal 50px Calibri;textBaseline=middle;textAlign=left;save();translate(0,0);translate(0,25);save();fillStyle=green;fillText(Hello big world,0,0);restore();translate(0,60);restore();restore()');
+    });
+
+    // ======================================================
+    test('create label from json', function() {
+        var stage = buildStage();
+
+        var json = '{"attrs":{"x":100,"y":100,"draggable":true},"className":"Label","children":[{"attrs":{"fill":"#bbb","stroke":"#333","shadowColor":"black","shadowBlur":10,"shadowOffsetX":10,"shadowOffsetY":10,"shadowOpacity":0.2,"lineJoin":"round","pointerDirection":"up","pointerWidth":20,"pointerHeight":20,"cornerRadius":5,"x":-151.5,"y":20,"width":303,"height":60},"className":"Tag"},{"attrs":{"text":"Hello big world","fontSize":50,"lineHeight":1.2,"fill":"green","width":"auto","height":"auto","x":-151.5,"y":20},"className":"Text"}]}';
+        var layer = new Kinetic.Layer();
+
+        var label = Kinetic.Node.create(json);
+
+        layer.add(label);
+        stage.add(layer);
+    });
+});
\ No newline at end of file
diff --git a/tests/js/unit/plugins/regularPolygonTests.js b/test/unit/plugins/RegularPolygon-test.js
similarity index 61%
rename from tests/js/unit/plugins/regularPolygonTests.js
rename to test/unit/plugins/RegularPolygon-test.js
index b66acfdb..76d016dd 100644
--- a/tests/js/unit/plugins/regularPolygonTests.js
+++ b/test/unit/plugins/RegularPolygon-test.js
@@ -1,10 +1,8 @@
-Test.Modules.REGULAR_POLYGON = {
-    'add regular polygon triangle': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
+suite('RegularPolygon', function() {
+    // ======================================================
+    test('add regular polygon triangle', function() {
+        var stage = buildStage();
+        
         var layer = new Kinetic.Layer();
 
         var poly = new Kinetic.RegularPolygon({
@@ -25,15 +23,13 @@ Test.Modules.REGULAR_POLYGON = {
         layer.add(poly);
         stage.add(layer);
         
-        test(poly.getClassName() === 'RegularPolygon', 'sgetClassName should be RegularPolygon');
+        assert.equal(poly.getClassName(), 'RegularPolygon');
 
-    },
-    'add regular polygon square': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
+    });
+
+    // ======================================================
+    test('add regular polygon square', function() {
+        var stage = buildStage();
         var layer = new Kinetic.Layer();
 
         var poly = new Kinetic.RegularPolygon({
@@ -49,13 +45,11 @@ Test.Modules.REGULAR_POLYGON = {
 
         layer.add(poly);
         stage.add(layer);
-    },
-    'add regular polygon pentagon': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
+    });
+    
+    // ======================================================
+    test('add regular polygon pentagon', function() {
+        var stage = buildStage();
         var layer = new Kinetic.Layer();
 
         var poly = new Kinetic.RegularPolygon({
@@ -71,13 +65,11 @@ Test.Modules.REGULAR_POLYGON = {
 
         layer.add(poly);
         stage.add(layer);
-    },
-    'add regular polygon octogon': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
+    });
+    
+    // ======================================================
+    test('add regular polygon octogon', function() {
+        var stage = buildStage();
         var layer = new Kinetic.Layer();
 
         var poly = new Kinetic.RegularPolygon({
@@ -93,5 +85,6 @@ Test.Modules.REGULAR_POLYGON = {
 
         layer.add(poly);
         stage.add(layer);
-    }
-};
\ No newline at end of file
+    });
+    
+});
\ No newline at end of file
diff --git a/tests/js/unit/plugins/starTests.js b/test/unit/plugins/Star-test.js
similarity index 66%
rename from tests/js/unit/plugins/starTests.js
rename to test/unit/plugins/Star-test.js
index ba4d33f7..f7d04a9d 100644
--- a/tests/js/unit/plugins/starTests.js
+++ b/test/unit/plugins/Star-test.js
@@ -1,10 +1,8 @@
-Test.Modules.STAR = {
-    'add five point star': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
+suite('Star', function() {
+    // ======================================================
+    test('add five point star', function() {
+        var stage = buildStage();
+
         var layer = new Kinetic.Layer();
 
         var star = new Kinetic.Star({
@@ -30,14 +28,12 @@ Test.Modules.STAR = {
         layer.add(star);
         stage.add(layer);
         
-        test(star.getClassName() === 'Star', 'getClassName should be Star');
-    },
-    'add five point star with line join and shadow': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
+        assert.equal(star.getClassName(), 'Star');
+    });
+
+    // ======================================================
+    test('add star with line join and shadow', function() {
+        var stage = buildStage();
         var layer = new Kinetic.Layer();
 
         var rect = new Kinetic.Rect({
@@ -70,10 +66,10 @@ Test.Modules.STAR = {
 
         stage.add(layer);
 
-        test(star.getLineJoin() === 'round', 'lineJoin property should be round');
+        assert.equal(star.getLineJoin(), 'round');
         star.setLineJoin('bevel');
-        test(star.getLineJoin() === 'bevel', 'lineJoin property should be bevel');
+        assert.equal(star.getLineJoin(), 'bevel');
 
         star.setLineJoin('round');
-    }
-};
+    });
+});
\ No newline at end of file
diff --git a/test/unit/shapes/Spline-test.js b/test/unit/shapes/Spline-test.js
index 337d3d98..de558bab 100644
--- a/test/unit/shapes/Spline-test.js
+++ b/test/unit/shapes/Spline-test.js
@@ -1,6 +1,6 @@
 suite('Spline', function() {
     // ======================================================
-    test('add splines', function() {
+    test('add spline', function() {
         var stage = buildStage();
         var layer = new Kinetic.Layer();
 
@@ -68,6 +68,11 @@ suite('Spline', function() {
 
         assert.equal(line1.getClassName(), 'Spline');
 
+        var trace = layer.getContext().getTrace();
+
+        //console.log(trace);
+        assert.equal(trace, 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);quadraticCurveTo(74.006,54.77,340,23);bezierCurveTo(501.006,3.77,519.038,68.068,500,109);quadraticCurveTo(479.038,154.068,300,109);lineCap=round;lineWidth=10;strokeStyle=blue;stroke();restore();save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);quadraticCurveTo(74.006,54.77,340,23);quadraticCurveTo(501.006,3.77,500,109);lineCap=round;lineWidth=10;strokeStyle=red;stroke();restore();save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=10;strokeStyle=green;stroke();restore()');
+
 
     });
 
diff --git a/tests/js/unit/plugins/labelTests.js b/tests/js/unit/plugins/labelTests.js
deleted file mode 100644
index 60d50340..00000000
--- a/tests/js/unit/plugins/labelTests.js
+++ /dev/null
@@ -1,84 +0,0 @@
-Test.Modules.LABEL = {
-    'add label': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        var layer = new Kinetic.Layer();
-
-        var label = new Kinetic.Label({
-            x: 100,
-            y: 100, 
-            draggable: true
-        });
-
-        // add a tag to the label
-        label.add(new Kinetic.Tag({
-            fill: '#bbb',
-            stroke: '#333',
-            shadowColor: 'black',
-            shadowBlur: 10,
-            shadowOffset: [10, 10],
-            shadowOpacity: 0.2,
-            lineJoin: 'round',
-            pointerDirection: 'up',
-            pointerWidth: 20,
-            pointerHeight: 20,
-            cornerRadius: 5
-        }));
-
-        // add text to the label
-        label.add(new Kinetic.Text({
-            text: '',
-            fontSize: 50,
-            //fontFamily: 'Calibri',
-            //fontStyle: 'normal',
-            lineHeight: 1.2, 
-            //padding: 10,
-            fill: 'green'
-        }));
-
-        layer.add(label);
-        stage.add(layer);
-
-        
-        var beforeTextWidth = label.getText().getWidth();
-
-        label.getText().setFontSize(100);
-
-        var afterTextWidth = label.getText().getWidth();
-
-        //test(afterTextWidth > beforeTextWidth, 'label text width should have grown');
-
-        label.getText().setFontSize(50);
-        
-        label.getText().setText('Hello big world');
-
-        layer.draw();
-      
-        
-        test(label.getType() === 'Group', 'label should be a group');
-        test(label.getClassName() === 'Label', 'label class name should be Label');
-
-        var json = label.toJSON();
-
-        console.log(json);
-    },
-    'create label from json': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-
-        var json = '{"attrs":{"x":100,"y":100,"draggable":true},"className":"Label","children":[{"attrs":{"fill":"#bbb","stroke":"#333","shadowColor":"black","shadowBlur":10,"shadowOffsetX":10,"shadowOffsetY":10,"shadowOpacity":0.2,"lineJoin":"round","pointerDirection":"up","pointerWidth":20,"pointerHeight":20,"cornerRadius":5,"width":303,"height":60},"className":"Tag"},{"attrs":{"width":"auto","height":"auto","text":"Hello big world","fontSize":50,"lineHeight":1.2,"fill":"green"},"className":"Text"}]}';
-        var layer = new Kinetic.Layer();
-
-        var label = Kinetic.Node.create(json);
-
-        layer.add(label);
-        stage.add(layer);
-    }
- 
-};