added image unit tests. Added stage factory function to mocha runner

test/unit/Blob-test.js

@@ -1,11 +1,7 @@
 suite('Blob', function(){
     // ======================================================
     test('add blobs', function() {
-        var stage = new Kinetic.Stage({
-            container: 'container',
-            width: 578,
-            height: 200
-        });
+        var stage = buildStage();
         var layer = new Kinetic.Layer();
 
         var blob1 = new Kinetic.Blob({
@@ -69,11 +65,7 @@ suite('Blob', function(){
 
     // ======================================================
     test('add blob and define tension first', function() {
-        var stage = new Kinetic.Stage({
-            container: 'container',
-            width: 578,
-            height: 200
-        });
+        var stage = buildStage();
         var layer = new Kinetic.Layer();
 
      
@@ -108,11 +100,7 @@ suite('Blob', function(){
 
     // ======================================================
     test('check for kinetic event handlers', function() {
-        var stage = new Kinetic.Stage({
-            container: 'container',
-            width: 578,
-            height: 200
-        });
+        var stage = buildStage();
         var layer = new Kinetic.Layer();
 
         var blob = new Kinetic.Blob({

test/unit/Circle-test.js

@@ -2,11 +2,7 @@ suite('Circle', function(){
   // ======================================================
 
   test('add circle to stage', function(){
-    var stage = new Kinetic.Stage({
-        container: 'container',
-        width: 578,
-        height: 200
-    });
+    var stage = buildStage();
     var layer = new Kinetic.Layer();
     var group = new Kinetic.Group();
     var circle = new Kinetic.Circle({
@@ -49,11 +45,7 @@ suite('Circle', function(){
   test('add circle with pattern fill', function(done) {
       var imageObj = new Image();
       imageObj.onload = function() {
-          var stage = new Kinetic.Stage({
-              container: 'container',
-              width: 578,
-              height: 200
-          });
+          var stage = buildStage();
           var layer = new Kinetic.Layer();
           var group = new Kinetic.Group();
           var circle = new Kinetic.Circle({
@@ -96,11 +88,7 @@ suite('Circle', function(){
 
   // ======================================================
   test('add circle with radial gradient fill', function() {
-      var stage = new Kinetic.Stage({
-          container: 'container',
-          width: 578,
-          height: 200
-      });
+      var stage = buildStage();
       var layer = new Kinetic.Layer();
       var group = new Kinetic.Group();
       var circle = new Kinetic.Circle({
@@ -136,11 +124,7 @@ suite('Circle', function(){
 
   // ======================================================
   test('add shape with linear gradient fill', function() {
-      var stage = new Kinetic.Stage({
-          container: 'container',
-          width: 578,
-          height: 200
-      });
+      var stage = buildStage();
       var layer = new Kinetic.Layer();
       var group = new Kinetic.Group();
       var circle = new Kinetic.Circle({
@@ -166,11 +150,7 @@ suite('Circle', function(){
 
   // ======================================================
   test('set opacity after instantiation', function() {
-      var stage = new Kinetic.Stage({
-          container: 'container',
-          width: 578,
-          height: 200
-      });
+      var stage = buildStage();
       var layer = new Kinetic.Layer();
       var group = new Kinetic.Group();
       var circle = new Kinetic.Circle({
@@ -193,11 +173,7 @@ suite('Circle', function(){
 
   // ======================================================
   test('set fill after instantiation', function() {
-      var stage = new Kinetic.Stage({
-          container: 'container',
-          width: 578,
-          height: 200
-      });
+      var stage = buildStage();
       var layer = new Kinetic.Layer();
       var circle = new Kinetic.Circle({
           x: stage.getWidth() / 2,

test/unit/Ellipse-test.js

@@ -2,11 +2,7 @@ suite('Ellipse', function(){
 
   // ======================================================
   test('add ellipse', function(){
-      var stage = new Kinetic.Stage({
-          container: 'container',
-          width: 578,
-          height: 200
-      });
+      var stage = buildStage();
       var layer = new Kinetic.Layer();
       var ellipse = new Kinetic.Ellipse({
           x: stage.getWidth() / 2,

test/unit/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/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/Rect-test.js

@@ -1,12 +1,8 @@
 suite('Rect', function(){
-  // ======================================================
 
+  // ======================================================
   test('add rect to stage', function(){
-    var stage = new Kinetic.Stage({
-      container: 'container',
-      width: 578,
-      height: 200
-    });
+    var stage = buildStage();
 
     var layer = new Kinetic.Layer();
 
@@ -32,13 +28,8 @@ suite('Rect', function(){
   });
 
   // ======================================================
-
   test('add rect with shadow, rotation, corner radius, and opacity', function(){
-    var stage = new Kinetic.Stage({
-      container: 'container',
-      width: 578,
-      height: 200
-    });
+    var stage = buildStage();
 
     var layer = new Kinetic.Layer();
 
@@ -78,11 +69,7 @@ suite('Rect', function(){
 
   // ======================================================
   test('draw rect', function() {
-      var stage = new Kinetic.Stage({
-          container: 'container',
-          width: 578,
-          height: 200
-      });
+      var stage = buildStage();
       var layer = new Kinetic.Layer();
       var rect = new Kinetic.Rect({
           x: 200,
@@ -108,11 +95,7 @@ suite('Rect', function(){
 
   // ======================================================
   test('add fill stroke rect', function() {
-      var stage = new Kinetic.Stage({
-          container: 'container',
-          width: 578,
-          height: 200
-      });
+      var stage = buildStage();
       var layer = new Kinetic.Layer();
       var rect = new Kinetic.Rect({
           x: 200,
@@ -130,11 +113,7 @@ suite('Rect', function(){
 
   // ======================================================
   test('add stroke rect', function() {
-      var stage = new Kinetic.Stage({
-          container: 'container',
-          width: 578,
-          height: 200
-      });
+      var stage = buildStage();
       var layer = new Kinetic.Layer();
       var rect = new Kinetic.Rect({
           x: 200,
@@ -151,11 +130,7 @@ suite('Rect', function(){
 
   // ======================================================
   test('use default stroke (stroke color should be black)', function() {
-      var stage = new Kinetic.Stage({
-          container: 'container',
-          width: 578,
-          height: 200
-      });
+      var stage = buildStage();
       var layer = new Kinetic.Layer();
       var rect = new Kinetic.Rect({
           x: 200,
@@ -171,11 +146,7 @@ suite('Rect', function(){
 
   // ======================================================
   test('use default stroke width (stroke width should be 2)', function() {
-      var stage = new Kinetic.Stage({
-          container: 'container',
-          width: 578,
-          height: 200
-      });
+      var stage = buildStage();
       var layer = new Kinetic.Layer();
       var rect = new Kinetic.Rect({
           x: 200,

test/unit/Text-test.js

@@ -1,11 +1,7 @@
 suite('Text', function(){
     // ======================================================
     test('add text with shadows', function() {
-        var stage = new Kinetic.Stage({
-            container: 'container',
-            width: 578,
-            height: 200
-        });
+        var stage = buildStage();
         var layer = new Kinetic.Layer();
 
         var rect = new Kinetic.Rect({
@@ -61,11 +57,7 @@ suite('Text', function(){
 
     // ======================================================
     test('text getters and setters', function() {
-        var stage = new Kinetic.Stage({
-            container: 'container',
-            width: 578,
-            height: 200
-        });
+        var stage = buildStage();
         var layer = new Kinetic.Layer();
 
         var text = new Kinetic.Text({
@@ -161,11 +153,7 @@ suite('Text', function(){
 
     // ======================================================
     test('text multi line', function() {
-        var stage = new Kinetic.Stage({
-            container: 'container',
-            width: 578,
-            height: 200
-        });
+        var stage = buildStage();
         var layer = new Kinetic.Layer();
 
         var rect = new Kinetic.Rect({
@@ -219,11 +207,7 @@ suite('Text', function(){
 
     // ======================================================
     test('text multi line with shadows', function() {
-        var stage = new Kinetic.Stage({
-            container: 'container',
-            width: 578,
-            height: 200
-        });
+        var stage = buildStage();
         var layer = new Kinetic.Layer();
 
         var text = new Kinetic.Text({
@@ -258,11 +242,7 @@ suite('Text', function(){
 
     // ======================================================
     test('change font size should update text data', function() {
-        var stage = new Kinetic.Stage({
-            container: 'container',
-            width: 578,
-            height: 200
-        });
+        var stage = buildStage();
         var layer = new Kinetic.Layer();
 
         var text = new Kinetic.Text({