migrated Rect and Blob tests to Mocha

test/runner.html

@@ -28,6 +28,7 @@
 
     <script src="unit/Rect-test.js"></script>
     <script src="unit/Circle-test.js"></script>
+    <script src="unit/Blob-test.js"></script>
     <script>
       if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
       else { mocha.run(); }

test/unit/Blob-test.js

@@ -1,7 +1,8 @@
-Test.Modules.BLOB = {
+suite('Blob', function(){
-    'add blobs': function(containerId) {
+    // ======================================================
+    test('add blobs', function() {
         var stage = new Kinetic.Stage({
-            container: containerId,
+            container: 'container',
             width: 578,
             height: 200
         });
@@ -54,26 +55,28 @@ Test.Modules.BLOB = {
         layer.add(blob2);
         stage.add(layer);
 
-        test(blob1.getTension() === 0.8, 'blob1 tension should be 0.8');
+        assert.equal(blob1.getTension(), 0.8);
-        test(blob2.getTension() === 1.2, 'blob2 tension should be 1.2');
+        assert.equal(blob2.getTension(), 1.2);
 
-        test(blob1.getClassName() === 'Blob', 'getClassName should be Blob');
+        assert.equal(blob1.getClassName(), 'Blob');
 
         //console.log(blob1.getPoints())
 
         // test setter
         blob1.setTension(1.5);
-        test(blob1.getTension() === 1.5, 'blob1 tension should be 1.5');
+        assert.equal(blob1.getTension(), 1.5);
-    },
+    });
-    'add blob and define tension first': function(containerId) {
+
+    // ======================================================
+    test('add blob and define tension first', function() {
         var stage = new Kinetic.Stage({
-            container: containerId,
+            container: 'container',
             width: 578,
             height: 200
         });
         var layer = new Kinetic.Layer();
 
-        /*
+     
         var blob = new Kinetic.Blob({
             tension: 0.8,
             points: [{
@@ -95,22 +98,18 @@ Test.Modules.BLOB = {
             fill: '#aaf'
 
         });
-        */
-
-        var json = '{"attrs":{"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"},"className":"Blob"}';
-        var blob = Kinetic.Node.create(json);
 
         layer.add(blob);
         stage.add(layer);
 
-        //console.log(blob.toJSON());
+        assert.equal(stage.get('Blob')[0].getPoints().length, 4);
 
-        test(stage.get('Blob')[0].getPoints().length === 4, 'created blob should have 4 points');
+    });
 
-    },
+    // ======================================================
-    'add blobs2': function(containerId) {
+    test('check for kinetic event handlers', function() {
         var stage = new Kinetic.Stage({
-            container: containerId,
+            container: 'container',
             width: 578,
             height: 200
         });
@@ -141,23 +140,21 @@ Test.Modules.BLOB = {
 
         stage.add(layer);
 
-        test(blob.eventListeners.pointsChange[0].name === 'kinetic', 'blob should have kinetic specific pointsChange event handler');
+        assert.equal(blob.eventListeners.pointsChange[0].name, 'kinetic');
-        test(blob.eventListeners.tensionChange[0].name === 'kinetic', 'blob should have kinetic specific tensionChange event handler');
+        assert.equal(blob.eventListeners.tensionChange[0].name, 'kinetic');
 
         // removing handlers should not remove kinetic specific handlers
         blob.off('pointsChange');
         blob.off('tensionChange');
 
-        test(blob.eventListeners.pointsChange[0].name === 'kinetic', 'blob should have kinetic specific pointsChange event handler');
+        assert.equal(blob.eventListeners.pointsChange[0].name, 'kinetic');
-        test(blob.eventListeners.tensionChange[0].name === 'kinetic', 'blob should have kinetic specific tensionChange event handler');
+        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');
 
-        test(!blob.eventListeners.pointsChange, 'blob should have no pointsChange handlers');
+        assert.equal(blob.eventListeners.pointsChange, undefined);
-        test(!blob.eventListeners.tensionChange, 'blob should have no tensionChange handlers');
+        assert.equal(blob.eventListeners.tensionChange, undefined);
-
+    });
-
+});
-    }
-};

test/unit/Rect-test.js

@@ -73,4 +73,120 @@ suite('Rect', function(){
     assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();moveTo(5,0);lineTo(95,0);arc(95,5,5,4.712,0,false);lineTo(100,45);arc(95,45,5,0,1.571,false);lineTo(5,50);arc(5,45,5,1.571,3.142,false);lineTo(0,5);arc(5,5,5,3.142,4.712,false);closePath();fillStyle=green;fill();fillStyle=green;fill();save();lineWidth=2;strokeStyle=blue;stroke();restore();restore()');
 
   });
+
+
+
+  // ======================================================
+  test('draw rect', function() {
+      var stage = new Kinetic.Stage({
+          container: 'container',
+          width: 578,
+          height: 200
+      });
+      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 = new Kinetic.Stage({
+          container: 'container',
+          width: 578,
+          height: 200
+      });
+      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 = new Kinetic.Stage({
+          container: 'container',
+          width: 578,
+          height: 200
+      });
+      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 = new Kinetic.Stage({
+          container: 'container',
+          width: 578,
+          height: 200
+      });
+      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 = new Kinetic.Stage({
+          container: 'container',
+          width: 578,
+          height: 200
+      });
+      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);
+  });
+
 });

tests/js/unit/shapes/rectTests.js

@@ -1,105 +0,0 @@
-Test.Modules.RECT = {
-    'draw rect': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        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);
-        
-        test(rect.getClassName() === 'Rect', 'className should be Rect');
-    },
-    'add fill stroke rect': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        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);
-    },
-    'add stroke rect': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        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);
-    },
-    'use default stroke (stroke color should be black)': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        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);
-    },
-    'use default stroke width (stroke width should be 2)': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        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);
-    }
-};