migrated more plugin tests, and continued working on context tracer

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(); }

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);
+  });
+});

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);
+    });
+});

test/unit/plugins/RegularPolygon-test.js

@@ -0,0 +1,90 @@
+suite('RegularPolygon', function() {
+    // ======================================================
+    test('add regular polygon triangle', function() {
+        var stage = buildStage();
+        
+        var layer = new Kinetic.Layer();
+
+        var poly = new Kinetic.RegularPolygon({
+            x: 200,
+            y: 100,
+            sides: 3,
+            radius: 50,
+            fill: 'green',
+            stroke: 'blue',
+            strokeWidth: 5,
+            name: 'foobar',
+            offset: {
+                x: 0,
+                y: -50
+            }
+        });
+
+        layer.add(poly);
+        stage.add(layer);
+        
+        assert.equal(poly.getClassName(), 'RegularPolygon');
+
+    });
+
+    // ======================================================
+    test('add regular polygon square', function() {
+        var stage = buildStage();
+        var layer = new Kinetic.Layer();
+
+        var poly = new Kinetic.RegularPolygon({
+            x: 200,
+            y: 100,
+            sides: 4,
+            radius: 50,
+            fill: 'green',
+            stroke: 'blue',
+            strokeWidth: 5,
+            name: 'foobar'
+        });
+
+        layer.add(poly);
+        stage.add(layer);
+    });
+    
+    // ======================================================
+    test('add regular polygon pentagon', function() {
+        var stage = buildStage();
+        var layer = new Kinetic.Layer();
+
+        var poly = new Kinetic.RegularPolygon({
+            x: 200,
+            y: 100,
+            sides: 5,
+            radius: 50,
+            fill: 'green',
+            stroke: 'blue',
+            strokeWidth: 5,
+            name: 'foobar'
+        });
+
+        layer.add(poly);
+        stage.add(layer);
+    });
+    
+    // ======================================================
+    test('add regular polygon octogon', function() {
+        var stage = buildStage();
+        var layer = new Kinetic.Layer();
+
+        var poly = new Kinetic.RegularPolygon({
+            x: 200,
+            y: 100,
+            sides: 8,
+            radius: 50,
+            fill: 'green',
+            stroke: 'blue',
+            strokeWidth: 5,
+            name: 'foobar'
+        });
+
+        layer.add(poly);
+        stage.add(layer);
+    });
+    
+});

test/unit/plugins/Star-test.js

@@ -0,0 +1,75 @@
+suite('Star', function() {
+    // ======================================================
+    test('add five point star', function() {
+        var stage = buildStage();
+
+        var layer = new Kinetic.Layer();
+
+        var star = new Kinetic.Star({
+            x: 200,
+            y: 100,
+            numPoints: 5,
+            innerRadius: 40,
+            outerRadius: 70,
+            fill: 'green',
+            stroke: 'blue',
+            strokeWidth: 5,
+            name: 'foobar',
+            offset: {
+                x: 0,
+                y: -70
+            },
+            scale: {
+                x: 0.5,
+                y: 0.5
+            }
+        });
+
+        layer.add(star);
+        stage.add(layer);
+        
+        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({
+            x: 250,
+            y: 75,
+            width: 100,
+            height: 100,
+            fill: 'red'
+        });
+
+        var star = new Kinetic.Star({
+            x: 200,
+            y: 100,
+            numPoints: 5,
+            innerRadius: 40,
+            outerRadius: 70,
+            fill: 'green',
+            stroke: 'blue',
+            strokeWidth: 5,
+            lineJoin: "round",
+            shadowColor: 'black',
+            shadowBlur: 10,
+            shadowOffset: [20, 20],
+            shadowOpacity: 0.5,
+            draggable: true
+        });
+
+        layer.add(rect);
+        layer.add(star);
+
+        stage.add(layer);
+
+        assert.equal(star.getLineJoin(), 'round');
+        star.setLineJoin('bevel');
+        assert.equal(star.getLineJoin(), 'bevel');
+
+        star.setLineJoin('round');
+    });
+});

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()');
+
 
     });