finished migrating all unit tests over to Mocha

test-old/js/Test.js

@@ -0,0 +1,147 @@
+var numTests = 0;
+var testCounter = null;
+var before, after;
+
+function startTimer() {
+    var date = new Date();
+    before = date.getTime();
+}
+function endTimer(str) {
+    var date = new Date();
+    after = date.getTime();
+    var diff = after - before;
+    console.log(str + ': ' + diff + 'ms');
+}
+function test(condition, message, warn) {
+    if(!condition) {
+        testCounter.style.backgroundColor = 'red';
+        testCounter.style.color = 'black';
+        throw new Error(message);
+    }
+    numTests++;
+
+    testCounter.innerHTML = numTests;
+}
+function warn(condition, message) {
+    if(!condition) {
+        if(testCounter.style.backgroundColor != 'red') {
+            testCounter.style.backgroundColor = 'orange';
+            testCounter.style.color = 'black';
+        }
+        console.warn(message);
+
+    }
+    numTests++;
+    testCounter.innerHTML = numTests;
+}
+function testDataUrl(actual, key, message) {
+    var expected = dataUrls[key];
+
+    if(actual !== expected) {
+        if(testCounter.style.backgroundColor != 'red') {
+            testCounter.style.backgroundColor = 'orange';
+            testCounter.style.color = 'black';
+        }
+        console.warn(message + ' (NOTE: use Google Chrome for data url comparisons, run on web server for caching and filtering)');
+    }
+    numTests++;
+    testCounter.innerHTML = numTests;
+}
+function testJSON(actual, expected, message) {
+
+    if(actual !== expected) {
+        if(testCounter.style.backgroundColor != 'red') {
+            testCounter.style.backgroundColor = 'orange';
+            testCounter.style.color = 'black';
+        }
+        console.warn(message + ' (NOTE: use Google Chrome for data url comparisons, run on web server for caching and filtering)');
+
+        console.log('actual:');
+        console.log(actual);
+        console.log('expected:');
+        console.log(expected);
+    }
+    numTests++;
+    testCounter.innerHTML = numTests;
+}
+function log(message) {
+    console.log('LOG: ' + message);
+}
+
+function showHit(layer) {
+    layer.hitCanvas._canvas.style.position = 'relative';
+	document.body.appendChild(layer.hitCanvas._canvas);
+}
+
+function Test() {
+    this.counter = 0;
+    testCounter = document.createElement('div');
+    testCounter.id = 'testCounter';
+    document.getElementsByTagName('body')[0].appendChild(testCounter);
+}
+
+Test.Modules = {};
+
+Test.prototype = {
+    addTestContainer: function(key) {
+        var row = document.createElement('div');
+        var container = document.createElement('div');
+        var testMessage = document.createElement('p');
+
+        container.id = key;
+
+        document.body.appendChild(testMessage);
+        row.appendChild(container);
+        row.className = 'row';
+        document.body.appendChild(row);
+
+        return {
+            testMessage: testMessage
+        };
+    },
+    run: function() {
+
+        var testOnlySpecial = false;
+
+        var modules = Test.Modules;
+
+		// loop through modules
+        for(var mod in modules) {
+            var tests = modules[mod];
+            /*
+             * if a test key has a star in front of it, then
+             * only run special tests.  This lets us easily run
+             * specific tests without running all of them
+             */
+            for(var key in tests) {
+                if(key.charAt(0) === '*') {
+                    testOnlySpecial = true;
+                    break;
+                }
+            }
+        };
+
+		// loop through modules
+        for(var mod in modules) {
+        	console.log('=================== ' + mod + ' TESTS ===================');
+
+            var tests = modules[mod];
+
+			// loop through tests
+            for(var key in tests) {
+                if(key.charAt(0) !== '!' && (!testOnlySpecial || key.charAt(0) === '*')) {
+                    var obj = this.addTestContainer(key);
+                    this.counter++;
+                    console.log(this.counter + ') ' + mod + ' - ' + key);
+                    tests[key](key);
+                    obj.testMessage.innerHTML = this.counter + ') ' + mod + ' - ' + key + ': PASSED';
+                    obj.testMessage.setAttribute('class', 'gray');
+                }
+            }
+
+
+        }
+
+        console.log('=================== ASYNC OUTPUT ===================');
+    }
+};

test-old/js/filterTests.js

@@ -0,0 +1,552 @@
+
+
+Test.Modules.IMAGE = {
+    'crop add and scale image': function(containerId) {
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            var stage = new Kinetic.Stage({
+                container: containerId,
+                width: 578,
+                height: 200
+            });
+            var layer = new Kinetic.Layer();
+            darth = new Kinetic.Image({
+                x: 200,
+                y: 75,
+                image: imageObj,
+                width: 107,
+                height: 75,
+                crop: [186, 211, 292 - 186, 285 - 211],
+                draggable: true,
+                scale: [0.5, 0.5]
+            });
+
+            layer.add(darth);
+            stage.add(layer);
+            
+            //console.log(layer.toDataURL());
+            
+            testDataUrl(layer.toDataURL(), 'crop and scale image', 'problem rendering cropped and scaled image');
+        };
+        imageObj.src = '../assets/darth-vader.jpg';
+    },
+    'create image hit region': function(containerId) {
+        var imageObj = new Image();
+
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        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();
+
+                //console.log(hitDataUrl);
+                testDataUrl(hitDataUrl,'transparent image hit render', 'problem rendering image on hit graph');
+
+            });
+        };
+        imageObj.src = '../assets/lion.png';
+
+        showHit(layer);
+    },
+    'grayscale image': function(containerId) {
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            var stage = new Kinetic.Stage({
+                container: containerId,
+                width: 578,
+                height: 200
+            });
+            var layer = new Kinetic.Layer({
+                throttle: 999
+            });
+            darth = new Kinetic.Image({
+                x: 10,
+                y: 10,
+                image: imageObj,
+                draggable: true
+            });
+
+            layer.add(darth);
+            stage.add(layer);
+
+            darth.setFilter(Kinetic.Filters.Grayscale);
+
+            layer.draw();
+
+            testDataUrl(layer.toDataURL(), 'grayscale image', 'problem with Grayscale filter.');
+       
+        };
+        imageObj.src = '../assets/darth-vader.jpg';
+    },
+    'invert image': function(containerId) {
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            var stage = new Kinetic.Stage({
+                container: containerId,
+                width: 578,
+                height: 200
+            });
+            var layer = new Kinetic.Layer({
+                throttle: 999
+            });
+            darth = new Kinetic.Image({
+                x: 10,
+                y: 10,
+                image: imageObj,
+                draggable: true
+            });
+
+            layer.add(darth);
+            stage.add(layer);
+
+            darth.setFilter(Kinetic.Filters.Invert);
+
+            layer.draw();
+            var dataUrl = layer.toDataURL();
+
+            testDataUrl(layer.toDataURL(), 'invert image', 'problem with Invert filter.');
+
+        };
+        imageObj.src = '../assets/darth-vader.jpg';
+    },
+    'adjust image brightness': function(containerId) {
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            var stage = new Kinetic.Stage({
+                container: containerId,
+                width: 578,
+                height: 200
+            });
+            var layer = new Kinetic.Layer({
+                throttle: 999
+            });
+            darth = new Kinetic.Image({
+                x: 10,
+                y: 10,
+                image: imageObj,
+                draggable: true
+            });
+
+            layer.add(darth);
+            stage.add(layer);
+
+            darth.setFilter(Kinetic.Filters.Brighten);
+            darth.setFilterBrightness(100);
+
+            layer.draw();
+
+            testDataUrl(layer.toDataURL(), 'adjust image brightness', 'problem with Brighten filter.');
+        };
+        imageObj.src = '../assets/darth-vader.jpg';
+    },
+    'gaussian blur filter': function(containerId) {
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            var stage = new Kinetic.Stage({
+                container: containerId,
+                width: 578,
+                height: 200
+            });
+            var layer = new Kinetic.Layer();
+            darth = new Kinetic.Image({
+                x: 10,
+                y: 10,
+                image: imageObj,
+                draggable: true
+            });
+
+            layer.add(darth);
+            stage.add(layer);
+
+            darth.setFilter(Kinetic.Filters.Blur);
+            darth.setFilterRadius(10);
+            layer.draw();
+            var dataUrl = layer.toDataURL();
+            //console.log(dataUrl);
+            testDataUrl(dataUrl, 'blur filter', 'problem with Blur filter.');
+        };
+        imageObj.src = '../assets/darth-vader.jpg';
+    },
+    'colorizing filter': function(containerId) {
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            var stage = new Kinetic.Stage({
+                container: containerId,
+                width: 578,
+                height: 200
+            });
+            var layer = new Kinetic.Layer();
+            darth = new Kinetic.Image({
+                x: 10,
+                y: 10,
+                image: imageObj,
+                draggable: true
+            });
+
+            layer.add(darth);
+            stage.add(layer);
+
+            darth.setFilter(Kinetic.Filters.Colorize);
+            darth.setFilterColorizeColor([255,0,128]);
+            layer.draw();
+            var dataUrl = layer.toDataURL();
+            //console.log(dataUrl);
+            testDataUrl(dataUrl, 'colorizing filter', 'problem with colorizing filter.');
+        };
+        imageObj.src = '../assets/darth-vader.jpg';
+    },
+    'shift hue filter': function(containerId) {
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            var stage = new Kinetic.Stage({
+                container: containerId,
+                width: 578,
+                height: 200
+            });
+            var layer = new Kinetic.Layer();
+            darth = new Kinetic.Image({
+                x: 10,
+                y: 10,
+                image: imageObj,
+                draggable: true
+            });
+
+            layer.add(darth);
+            stage.add(layer);
+
+            darth.setFilter(Kinetic.Filters.ShiftHue);
+            darth.setFilterHueShiftDeg(360);
+            layer.draw();
+
+            var tween = new Kinetic.Tween({
+              node: darth, 
+              duration: 5.0,
+              filterHueShiftDeg: 0,
+              easing: Kinetic.Easings.EaseInOut
+            });
+        
+            darth.on('mouseover', function() {
+              tween.play();
+            });
+      
+            darth.on('mouseout', function() {
+              tween.reverse();
+            });
+
+            var dataUrl = layer.toDataURL();
+            //console.log(dataUrl);
+            testDataUrl(dataUrl, 'shift hue filter', 'problem with hue shifting filter.');
+        };
+        imageObj.src = '../assets/lion.png';
+    },
+    'unsharp mask filter': function(containerId) {
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            var stage = new Kinetic.Stage({
+                container: containerId,
+                width: 578,
+                height: 200
+            });
+            var layer = new Kinetic.Layer();
+            darth = new Kinetic.Image({
+                x: 10,
+                y: 10,
+                image: imageObj,
+                draggable: true
+            });
+
+            layer.add(darth);
+            stage.add(layer);
+            darth.setFilter(Kinetic.Filters.UnsharpMask);
+            darth.setFilterAmount(100);
+            layer.draw();
+
+            var tween = new Kinetic.Tween({
+              node: darth, 
+              duration: 0.6,
+              filterAmount: 0,
+              easing: Kinetic.Easings.EaseInOut
+            });
+        
+            darth.on('mouseover', function() {
+              tween.play();
+            });
+      
+            darth.on('mouseout', function() {
+              tween.reverse();
+            });
+
+            var dataUrl = layer.toDataURL();
+            //console.log(dataUrl);
+            testDataUrl(dataUrl, 'unsharp mask filter', 'problem with unsharp mask filter.');
+        };
+        //imageObj.src = '../assets/darth-vader.jpg';
+        imageObj.src = '../assets/lion.png';
+    },
+    'soft blur filter': function(containerId) {
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            var stage = new Kinetic.Stage({
+                container: containerId,
+                width: 578,
+                height: 200
+            });
+            var layer = new Kinetic.Layer();
+            darth = new Kinetic.Image({
+                x: 10,
+                y: 10,
+                image: imageObj,
+                draggable: true
+            });
+
+            layer.add(darth);
+            stage.add(layer);
+            darth.setFilter(Kinetic.Filters.SoftBlur);
+            darth.setFilterAmount(100);
+            layer.draw();
+
+            var tween = new Kinetic.Tween({
+              node: darth, 
+              duration: 0.6,
+              filterAmount: 0,
+              easing: Kinetic.Easings.EaseInOut
+            });
+        
+            darth.on('mouseover', function() {
+              tween.play();
+            });
+      
+            darth.on('mouseout', function() {
+              tween.reverse();
+            });
+
+            var dataUrl = layer.toDataURL();
+            //console.log(dataUrl);
+            testDataUrl(dataUrl, 'soft blur filter', 'problem with soft blur filter.');
+        };
+        //imageObj.src = '../assets/darth-vader.jpg';
+        imageObj.src = '../assets/lion.png';
+    },
+    'edge detection filter 1': function(containerId) {
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            var stage = new Kinetic.Stage({
+                container: containerId,
+                width: 578,
+                height: 200
+            });
+            var layer = new Kinetic.Layer();
+            darth = new Kinetic.Image({
+                x: 10,
+                y: 10,
+                image: imageObj,
+                draggable: true
+            });
+
+            layer.add(darth);
+            stage.add(layer);
+            darth.setFilter(Kinetic.Filters.Edge);
+            darth.setFilterAmount(100);
+            layer.draw();
+
+            var tween = new Kinetic.Tween({
+              node: darth, 
+              duration: 0.6,
+              filterAmount: 0,
+              easing: Kinetic.Easings.EaseInOut
+            });
+        
+            darth.on('mouseover', function() {
+              tween.play();
+            });
+      
+            darth.on('mouseout', function() {
+              tween.reverse();
+            });
+
+            var dataUrl = layer.toDataURL();
+            //console.log(dataUrl);
+            testDataUrl(dataUrl, 'sharpen filter', 'problem with sharpen filter.');
+        };
+        //imageObj.src = '../assets/darth-vader.jpg';
+        imageObj.src = '../assets/lion.png';
+    },
+    'emboss filter': function(containerId) {
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            var stage = new Kinetic.Stage({
+                container: containerId,
+                width: 578,
+                height: 200
+            });
+            var layer = new Kinetic.Layer();
+            darth = new Kinetic.Image({
+                x: 10,
+                y: 10,
+                image: imageObj,
+                draggable: true
+            });
+
+            layer.add(darth);
+            stage.add(layer);
+            darth.setFilter(Kinetic.Filters.Emboss);
+            darth.setFilterAmount(50);
+            layer.draw();
+
+            var tween = new Kinetic.Tween({
+              node: darth, 
+              duration: 0.6,
+              filterAmount: 0,
+              easing: Kinetic.Easings.EaseInOut
+            });
+        
+            darth.on('mouseover', function() {
+              tween.play();
+            });
+      
+            darth.on('mouseout', function() {
+              tween.reverse();
+            });
+
+            var dataUrl = layer.toDataURL();
+            //console.log(dataUrl);
+            testDataUrl(dataUrl, 'emboss filter', 'problem with emboss filter.');
+        };
+        //imageObj.src = '../assets/darth-vader.jpg';
+        imageObj.src = '../assets/lion.png';
+    },
+    'filter transformed image': function(containerId) {
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            var stage = new Kinetic.Stage({
+                container: containerId,
+                width: 578,
+                height: 200
+            });
+            var layer = new Kinetic.Layer({
+                throttle: 999
+            });
+            darth = new Kinetic.Image({
+                x: 50,
+                y: 50,
+                //width: 438,
+                //height: 300,
+                image: imageObj,
+                draggable: true,
+                rotationDeg: 10,
+                scale: 0.3
+            });
+
+            darth.setOffset(darth.getWidth() / 2, darth.getHeight() / 2);
+
+            layer.add(darth);
+            stage.add(layer);
+
+            darth.setFilter(Kinetic.Filters.Grayscale);
+
+            layer.draw();
+            //console.log(layer.toDataURL());
+            testDataUrl(layer.toDataURL(), 'filter transformed image', 'problem filtering transformed image');
+        };
+        imageObj.src = '../assets/darth-vader.jpg';
+    },
+    'apply shadow to transparent image': function(containerId) {
+        var imageObj = new Image();
+
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        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
+            });
+
+            layer.add(lion);
+            stage.add(layer);
+
+            var dataUrl = layer.toDataURL();
+
+            testDataUrl(layer.toDataURL(), 'transparent image shadow', 'problem applying shadow to image with transparent pixels');
+
+        };
+        imageObj.src = '../assets/lion.png';
+
+        showHit(layer);
+    },
+     'mask unicolor background filter': function(containerId) {
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            var stage = new Kinetic.Stage({
+                container: containerId,
+                width: 600,
+                height: 200
+            });
+            var layer = new Kinetic.Layer({
+                throttle: 999
+            });
+            var bamoon = new Kinetic.Image({
+                x: 0,
+                y: 0,
+                image: imageObj,
+                draggable: true
+            }),
+            filtered = new Kinetic.Image({
+                x: 300,
+                y: 0,
+                image: imageObj,
+                draggable: true
+            });
+
+            layer.add(bamoon);
+            layer.add(filtered);
+            stage.add(layer);
+
+            filtered.setFilter(Kinetic.Filters.Mask);
+            filtered.setFilterThreshold(10);
+
+            layer.draw();
+            var dataUrl = layer.toDataURL();
+            //console.log(dataUrl);
+            testDataUrl(dataUrl, 'mask filter', 'problem with Mask filter.');
+        };
+        imageObj.src = '../assets/bamoon.jpg';
+    }
+};
+

test-old/js/performanceTests.js

@@ -0,0 +1,83 @@
+var startTime;
+
+function start() {
+  startTime = new Date().getTime();
+}
+
+function stop(build, test) {
+    var t = new Date().getTime();
+    var diff = t - startTime;
+    console.log('[' + build.version + '] ' + test + ': ' + diff);
+}
+
+var tests = {
+  /*
+  'render 2,000 circles': function(Kinetic, container, test) {
+    start();
+    var stage = new Kinetic.Stage({
+      width: 500,
+      height: 200,
+      container: container
+    });
+
+    var layer = new Kinetic.Layer();
+
+    for (var n=0; n<2000; n++) {
+      var circle = new Kinetic.Circle({
+        x: Math.random() * 500,
+        y: Math.random() * 200,
+        radius: 40,
+        fill: 'red',
+        stroke: 'black',
+        strokeWidth: 3
+      });
+
+      layer.add(circle);
+    } 
+
+    stage.add(layer);
+    stop(Kinetic, test);
+  }
+  */
+  'render one circle 2,000 times': function(Kinetic, container, test) {
+    start();
+    var stage = new Kinetic.Stage({
+      width: 500,
+      height: 200,
+      container: container
+    });
+
+    var layer = new Kinetic.Layer();
+
+    var circle = new Kinetic.Circle({
+      x: 43,
+      y: 43,
+      radius: 40,
+      fill: 'red',
+      stroke: 'black',
+      strokeWidth: 3
+    });
+
+    layer.add(circle);
+    stage.add(layer);
+
+
+    for (var n=0; n<2000; n++) {
+      layer.draw();
+    } 
+    
+    stop(Kinetic, test);
+  }
+};
+
+var body = document.getElementsByTagName('body')[0]; 
+function run(Kinetic) {
+    body.innerHTML = '';
+    for (var k in tests) {
+        var div = document.createElement('div');
+        body.appendChild(div);
+        tests[k](Kinetic, div, k);
+    }
+    Kinetic = null;
+}
+