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

Gruntfile.js

@@ -59,18 +59,6 @@ module.exports = function(grunt) {
     'tests/js/unit/ddTests.js', 
     'tests/js/unit/canvasTests.js', 
 
-    'tests/js/unit/shapes/rectTests.js', 
-    'tests/js/unit/shapes/circleTests.js', 
-    'tests/js/unit/shapes/ellipseTests.js', 
-    'tests/js/unit/shapes/wedgeTests.js', 
-    'tests/js/unit/shapes/imageTests.js',
-    'tests/js/unit/shapes/polygonTests.js',
-    'tests/js/unit/shapes/lineTests.js',
-    'tests/js/unit/shapes/splineTests.js',
-    'tests/js/unit/shapes/blobTests.js',
-    'tests/js/unit/shapes/textTests.js',
-    'tests/js/unit/shapes/spriteTests.js',
-
     'tests/js/unit/plugins/pathTests.js',
     'tests/js/unit/plugins/regularPolygonTests.js',
     'tests/js/unit/plugins/starTests.js',

src/Context.js

@@ -16,10 +16,13 @@
             'createLinearGradient',
             'createPattern',
             'createRadialGradient',
+            'drawImage',
             'fill', 
             'fillText', 
+            'getImageData',
             'lineTo',
             'moveTo',
+            'putImageData',
             'rect', 
             'restore', 
             'rotate',
@@ -60,7 +63,6 @@
          */
         getTrace: function() {
             return this.traceArr.join(';');
-
         },
         /**
          * clear trace if trace is enabled
@@ -233,6 +235,16 @@
             var a = arguments;
             return this._context.createRadialGradient(a[0], a[1], a[2], a[3], a[4], a[5]);
         },
+        drawImage: function() {
+            var a = arguments,
+                _context = this._context;
+            if(a.length === 5) {
+                _context.drawImage(a[0], a[1], a[2], a[3], a[4]);
+            }
+            else if(a.length === 9) {
+                _context.drawImage(a[0], a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8]);
+            }
+        },
         fill: function() {
             this._context.fill();
         },
@@ -240,6 +252,10 @@
             var a = arguments;
             this._context.fillText(a[0], a[1], a[2]);
         },
+        getImageData: function() {
+            var a = arguments;
+            return this._context.getImageData(a[0], a[1], a[2], a[3]);
+        },
         lineTo: function() {
             var a = arguments;
             this._context.lineTo(a[0], a[1]);
@@ -252,6 +268,10 @@
             var a = arguments;
             this._context.rect(a[0], a[1], a[2], a[3]);
         },
+        putImageData: function() {
+            var a = arguments;
+            this._context.rect(a[0], a[1], a[2]);
+        },
         restore: function() {
             this._context.restore();
         },

src/shapes/Image.js

@@ -45,7 +45,6 @@
                 height = this.getHeight(),
                 params,
                 that = this,
-                _context = context._context,
                 cropX = this.getCropX() || 0,
                 cropY = this.getCropY() || 0,
                 cropWidth = this.getCropWidth(),
@@ -66,9 +65,9 @@
                 image = this.getImage();
             }
 
-            _context.beginPath();
+            context.beginPath();
-            _context.rect(0, 0, width, height);
+            context.rect(0, 0, width, height);
-            _context.closePath();
+            context.closePath();
             context.fillStrokeShape(this);
 
             if(image) {
@@ -83,31 +82,30 @@
 
                 if(this.hasShadow()) {
                     context.applyShadow(this, function() {
-                        that._drawImage(_context, params);
+                        context.drawImage.apply(context, params);
                     });
                 }
                 else {
-                    this._drawImage(_context, params);
+                    context.drawImage.apply(context, params);
                 }
             }
         },
         drawHitFunc: function(context) {
             var width = this.getWidth(),
                 height = this.getHeight(),
-                imageHitRegion = this.imageHitRegion,
+                imageHitRegion = this.imageHitRegion;
-                _context = context._context;
 
             if(imageHitRegion) {
-                _context.drawImage(imageHitRegion, 0, 0, width, height);
+                context.drawImage(imageHitRegion, 0, 0, width, height);
-                _context.beginPath();
+                context.beginPath();
-                _context.rect(0, 0, width, height);
+                context.rect(0, 0, width, height);
-                _context.closePath();
+                context.closePath();
                 context.stroke(this);
             }
             else {
-                _context.beginPath();
+                context.beginPath();
-                _context.rect(0, 0, width, height);
+                context.rect(0, 0, width, height);
-                _context.closePath();
+                context.closePath();
                 context.fillStrokeShape(this);
             }
         },
@@ -117,7 +115,7 @@
                 width = this.getWidth(),
                 height = this.getHeight(),
                 filter = this.getFilter(),
-                filterCanvas, _context, imageData;
+                filterCanvas, context, imageData;
 
             if (this.filterCanvas){
                 filterCanvas = this.filterCanvas;
@@ -131,13 +129,13 @@
                 });
             }
 
-            _context = filterCanvas.getContext()._context;
+            context = filterCanvas.getContext();
 
             try {
-                this._drawImage(_context, [image, 0, 0, filterCanvas.getWidth(), filterCanvas.getHeight()]);
+                context.drawImage(image, 0, 0, filterCanvas.getWidth(), filterCanvas.getHeight());
-                imageData = _context.getImageData(0, 0, filterCanvas.getWidth(), filterCanvas.getHeight());
+                imageData = context.getImageData(0, 0, filterCanvas.getWidth(), filterCanvas.getHeight());
                 filter.call(this, imageData);
-                _context.putImageData(imageData, 0, 0);
+                context.putImageData(imageData, 0, 0);
             }
             catch(e) {
                 this.clearFilter();
@@ -170,14 +168,14 @@
                     width: width,
                     height: height
                 }),
-                _context = canvas.getContext()._context,
+                context = canvas.getContext(),
                 image = this.getImage(),
                 imageData, data, rgbColorKey, i, n;
 
-            _context.drawImage(image, 0, 0);
+            context.drawImage(image, 0, 0);
 
             try {
-                imageData = _context.getImageData(0, 0, width, height);
+                imageData = context.getImageData(0, 0, width, height);
                 data = imageData.data;
                 rgbColorKey = Kinetic.Util._hexToRgb(this.colorKey);
 
@@ -216,14 +214,6 @@
         getHeight: function() {
             var image = this.getImage();
             return this.attrs.height || (image ? image.height : 0);
-        },
-        _drawImage: function(_context, a) {
-            if(a.length === 5) {
-                _context.drawImage(a[0], a[1], a[2], a[3], a[4]);
-            }
-            else if(a.length === 9) {
-                _context.drawImage(a[0], a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8]);
-            }
         }
     };
     Kinetic.Util.extend(Kinetic.Image, Kinetic.Shape);

src/shapes/Wedge.js

@@ -32,12 +32,10 @@
             this.className = 'Wedge';
         },
         drawFunc: function(context) {
-            var _context = context._context;
+            context.beginPath();
-
+            context.arc(0, 0, this.getRadius(), 0, this.getAngle(), this.getClockwise());
-            _context.beginPath();
+            context.lineTo(0, 0);
-            _context.arc(0, 0, this.getRadius(), 0, this.getAngle(), this.getClockwise());
+            context.closePath();
-            _context.lineTo(0, 0);
-            _context.closePath();
             context.fillStrokeShape(this);
         }
     };

test/runner.html

@@ -52,15 +52,23 @@
           kineticContainer.appendChild(title);
       });
     </script>
+    
+    <!-- core -->
     <script src="unit/Util-test.js"></script>
 
-    <script src="unit/Rect-test.js"></script>
+    <!-- shapes -->
-    <script src="unit/Circle-test.js"></script>
+    <script src="unit/shapes/Rect-test.js"></script>
-    <script src="unit/Image-test.js"></script>
+    <script src="unit/shapes/Circle-test.js"></script>
-    <script src="unit/Line-test.js"></script>
+    <script src="unit/shapes/Image-test.js"></script>
-    <script src="unit/Text-test.js"></script>
+    <script src="unit/shapes/Line-test.js"></script>
-    <script src="unit/Blob-test.js"></script>
+    <script src="unit/shapes/Text-test.js"></script>
-    <script src="unit/Ellipse-test.js"></script>
+    <script src="unit/shapes/Blob-test.js"></script>
+    <script src="unit/shapes/Ellipse-test.js"></script>
+    <script src="unit/shapes/Polygon-test.js"></script>
+    <script src="unit/shapes/Spline-test.js"></script>
+    <script src="unit/shapes/Sprite-test.js"></script>
+    <script src="unit/shapes/Wedge-test.js"></script>
+
     <script>
       if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
       else { mocha.run(); }

test/unit/shapes/Blob-test.js

@@ -1,10 +1,10 @@
 suite('Blob', function(){
     // ======================================================
-    test('add blobs', function() {
+    test('add blob', function() {
         var stage = buildStage();
         var layer = new Kinetic.Layer();
 
-        var blob1 = new Kinetic.Blob({
+        var blob = new Kinetic.Blob({
             points: [{
                 x: 73,
                 y: 140
@@ -25,46 +25,25 @@ suite('Blob', function(){
             tension: 0.8
         });
 
-        var blob2 = new Kinetic.Blob({
+        layer.add(blob);
-            points: [{
-                x: 73,
-                y: 140
-            }, {
-                x: 340,
-                y: 23
-            }, {
-                x: 500,
-                y: 109
-            }],
-            stroke: 'red',
-            strokeWidth: 10,
-            draggable: true,
-            fill: '#faa',
-            tension: 1.2,
-            scale: 0.5,
-            x: 100,
-            y: 50
-        });
-
-
-        layer.add(blob1);
-        layer.add(blob2);
         stage.add(layer);
 
-        assert.equal(blob1.getTension(), 0.8);
+        assert.equal(blob.getTension(), 0.8);
-        assert.equal(blob2.getTension(), 1.2);
 
-        assert.equal(blob1.getClassName(), 'Blob');
+        assert.equal(blob.getClassName(), 'Blob');
 
         //console.log(blob1.getPoints())
 
         // test setter
-        blob1.setTension(1.5);
+        blob.setTension(1.5);
-        assert.equal(blob1.getTension(), 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('add blob and define tension first', function() {
+    test('define tension first', function() {
         var stage = buildStage();
         var layer = new Kinetic.Layer();
 

test/unit/shapes/Polygon-test.js

@@ -1,10 +1,7 @@
-Test.Modules.POLYGON = {
+suite('Polygon', function() {
-    'add polygon': function(containerId) {
+    test('add polygon', function() {
-        var stage = new Kinetic.Stage({
+        var stage = buildStage();
-            container: containerId,
+
-            width: 578,
-            height: 200
-        });
         var layer = new Kinetic.Layer();
 
         var points = [{
@@ -37,7 +34,6 @@ Test.Modules.POLYGON = {
         layer.add(poly);
         stage.add(layer);
         
-        test(poly.getClassName() === 'Polygon', 'getClassName should be Polygon');
+        assert.equal(poly.getClassName(), 'Polygon');
-
+    });
-    }	
+});
-};

test/unit/shapes/Spline-test.js

@@ -1,10 +1,7 @@
-Test.Modules.SPLINE = {
+suite('Spline', function() {
-    'add splines': function(containerId) {
+    // ======================================================
-        var stage = new Kinetic.Stage({
+    test('add splines', function() {
-            container: containerId,
+        var stage = buildStage();
-            width: 578,
-            height: 200
-        });
         var layer = new Kinetic.Layer();
 
         var line1 = new Kinetic.Spline({
@@ -69,16 +66,14 @@ Test.Modules.SPLINE = {
         layer.add(line3);
         stage.add(layer);
 
-        test(line1.getClassName() === 'Spline', 'getClassName should be Spline');
+        assert.equal(line1.getClassName(), 'Spline');
 
 
-    },
+    });
-    'update spline points': function(containerId) {
+
-        var stage = new Kinetic.Stage({
+    // ======================================================
-            container: containerId,
+    test('update spline points', function() {
-            width: 578,
+        var stage = buildStage();
-            height: 200
-        });
         var layer = new Kinetic.Layer();
 
         var spline = new Kinetic.Spline({
@@ -107,7 +102,7 @@ Test.Modules.SPLINE = {
         layer.add(spline);
         stage.add(layer);
 
-        test(spline.allPoints.length === 6, 'spline all points should have 6 points');
+        assert.equal(spline.allPoints.length, 6);
 
         spline.setPoints([{
             x: 73,
@@ -120,18 +115,16 @@ Test.Modules.SPLINE = {
             y: 109
         }]);
 
-        test(spline.allPoints.length === 3, 'spline all points should have 3 points');
+        assert.equal(spline.allPoints.length, 3);
 
         layer.draw();
 
 
-    },
+    });
-    'add point to spline points': function(containerId) {
+
-        var stage = new Kinetic.Stage({
+    // ======================================================
-            container: containerId,
+    test('add point to spline points', function() {
-            width: 578,
+        var stage = buildStage();
-            height: 200
-        });
         var layer = new Kinetic.Layer();
 
         var spline = new Kinetic.Spline({
@@ -160,23 +153,21 @@ Test.Modules.SPLINE = {
         layer.add(spline);
         stage.add(layer);
 
-        test(spline.getPoints().length === 4, 'spline should have 4 points');
+        assert.equal(spline.getPoints().length, 4);
 
         spline.addPoint({
             x: 300,
             y: 200
         });
 
-        test(spline.getPoints().length === 5, 'spline should have 5 points');
+        assert.equal(spline.getPoints().length, 5);
 
         layer.draw();
-    },
+    });
-    'create from points represented as a flat array': function(containerId) {
+
-        var stage = new Kinetic.Stage({
+    // ======================================================
-            container: containerId,
+    test('create from points represented as a flat array', function() {
-            width: 578,
+        var stage = buildStage();
-            height: 200
-        });
         var layer = new Kinetic.Layer();
 
         var line = new Kinetic.Spline({
@@ -197,14 +188,12 @@ Test.Modules.SPLINE = {
         layer.add(line);
         stage.add(layer);
 
-        test(line.getPoints().length === 4, 'line should have 4 points');
+        assert.equal(line.getPoints().length, 4);
-    },
+    });
-    'create from points represented as an array of objects': function(containerId) {
+
-        var stage = new Kinetic.Stage({
+    // ======================================================
-            container: containerId,
+    test('create from points represented as an array of objects', function() {
-            width: 578,
+        var stage = buildStage();
-            height: 200
-        });
         var layer = new Kinetic.Layer();
 
         var line = new Kinetic.Spline({
@@ -232,14 +221,12 @@ Test.Modules.SPLINE = {
         layer.add(line);
         stage.add(layer);
 
-        test(line.getPoints().length === 4, 'line should have 4 points');
+        assert.equal(line.getPoints().length, 4);
-    },
+    });
-    'create from points represented as an array of arrays': function(containerId) {
+
-        var stage = new Kinetic.Stage({
+    // ======================================================
-            container: containerId,
+    test('create from points represented as an array of arrays', function() {
-            width: 578,
+        var stage = buildStage();
-            height: 200
-        });
         var layer = new Kinetic.Layer();
 
         var line = new Kinetic.Spline({
@@ -260,6 +247,6 @@ Test.Modules.SPLINE = {
         layer.add(line);
         stage.add(layer);
 
-        test(line.getPoints().length === 4, 'line should have 4 points');
+        assert.equal(line.getPoints().length, 4);
-    }
+    });
-};
+});

test/unit/shapes/Sprite-test.js

@@ -1,12 +1,9 @@
-Test.Modules.SPRITE = {
+suite('Sprite', function() {
-    'add sprite': function(containerId) {
+    // ======================================================
+    test('add sprite', function(done) {
         var imageObj = new Image();
         imageObj.onload = function() {
-            var stage = new Kinetic.Stage({
+            var stage = buildStage();
-                container: containerId,
-                width: 578,
-                height: 200
-            });
             var layer = new Kinetic.Layer();
 
             var anims = {
@@ -88,14 +85,14 @@ Test.Modules.SPRITE = {
                 frameRate: 10,
                 draggable: true,
                 shadowColor: 'black',
-            	shadowBlur: 3,
+                shadowBlur: 3,
-            	shadowOffset: [3, 1],
+                shadowOffset: [3, 1],
-            	shadowOpacity: 0.3
+                shadowOpacity: 0.3
             });
 
             layer.add(sprite);
             sprite.start();
-            //}
+
 
             stage.add(layer);
 
@@ -110,12 +107,12 @@ Test.Modules.SPRITE = {
             setTimeout(function() {
                 sprite.stop();
             }, 3000);
-            //document.body.appendChild(layer.bufferCanvas.element)
-            
-            test(sprite.getClassName() === 'Sprite', 'getClassName should be Sprite');
 
-            test(sprite.getIndex() === 0, 'sprite index should default to 0');
+            assert.equal(sprite.getClassName(), 'Sprite');
+            assert.equal(sprite.getIndex(), 0);
+
+            done();
         };
-        imageObj.src = '../assets/scorpion-sprite.png';
+        imageObj.src = 'assets/scorpion-sprite.png';
-    }
+    });
-};
+});

test/unit/shapes/Wedge-test.js

@@ -1,10 +1,7 @@
-Test.Modules.Wedge = {
+suite('Wedge', function() {
-    'add wedge': function(containerId) {
+    // ======================================================
-        var stage = new Kinetic.Stage({
+    test('add wedge', function() {
-            container: containerId,
+        var stage = buildStage();
-            width: 578,
-            height: 200
-        });
         var layer = new Kinetic.Layer();
         var wedge = new Kinetic.Wedge({
             x: 100,
@@ -21,14 +18,16 @@ Test.Modules.Wedge = {
         layer.add(wedge);
         stage.add(layer);
 
-        test(wedge.getClassName() === 'Wedge', 'getClassName should be Wedge');
+        assert.equal(wedge.getClassName(), 'Wedge');
-    },
+
-    'set wedge angle using degrees': function(containerId) {
+        var trace = layer.getContext().getTrace();
-        var stage = new Kinetic.Stage({
+        //console.log(trace);
-            container: containerId,
+        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()');
-            width: 578,
+    });
-            height: 200
+
-        });
+    // ======================================================
+    test('set wedge angle using degrees', function() {
+        var stage = buildStage();
         var layer = new Kinetic.Layer();
         var wedge = new Kinetic.Wedge({
             x: 100,
@@ -46,6 +45,6 @@ Test.Modules.Wedge = {
         layer.add(wedge);
         stage.add(layer);
 
-        test(wedge.getAngle() === Math.PI / 2, 'problem setting wedge angle using degrees');
+        assert.equal(wedge.getAngle(), Math.PI / 2);
-    }
+    });
-};
+});

tests/js/unit/shapes/lineTests.js

@@ -1,136 +0,0 @@
-Test.Modules.LINE = {
-    'add line': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        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]);
-        test(line.getPoints()[0].x === 1, 'first point x should be 1');
-
-        line.setPoints([{
-            x: 5,
-            y: 6
-        }, {
-            x: 7,
-            y: 8
-        }]);
-        test(line.getPoints()[0].x === 5, 'first point x should be 5');
-
-        line.setPoints([73, 160, 340, 23]);
-        test(line.getPoints()[0].x === 73, 'first point x should be 73');
-        
-        test(line.getClassName() === 'Line', 'getClassName should be Line');
-    },
-    'test default ponts array for two lines': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        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);
-
-        test(line.getPoints()[0].x === 0, 'line points is wrong');
-        test(redLine.getPoints()[0].x === 4, 'redLine points is wrong');
-        
-    },
-    'add dashed line': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        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);
-
-        test(line.getDashArray().length === 6, 'dashArray should have 6 elements');
-        line.setDashArray([10, 10]);
-        test(line.getDashArray().length === 2, 'dashArray should have 2 elements');
-
-        test(line.getPoints().length === 4, 'line should have 4 points');
-
-    }
-};