add drawing tests to casper

src/js/app.js

@@ -115,8 +115,10 @@
       }
       this.storageService.init();
 
+
+      var href = document.location.href.toLowerCase();
       // test tools
-      var testModeOn = document.location.href.toLowerCase().indexOf('test=true') !== -1;
+      var testModeOn = href.indexOf('test=true') !== -1;
       if (testModeOn) {
         this.testRecorder = new pskl.devtools.TestRecorder(this.piskelController);
         this.testRecorder.init();
@@ -125,6 +127,13 @@
         this.testRecordController.init();
       }
 
+      // test tools
+      var runTestModeOn = href.indexOf('test-run=') !== -1;
+      if (runTestModeOn) {
+        var testName = href.split('test-run=')[1];
+        this.testRunner = new pskl.devtools.DrawingTestRunner(testName);
+      }
+
       var drawingLoop = new pskl.rendering.DrawingLoop();
       drawingLoop.addCallback(this.render, this);
       drawingLoop.start();
@@ -135,6 +144,10 @@
       if (piskelData && piskelData.piskel) {
         this.loadPiskel_(piskelData.piskel, piskelData.descriptor, piskelData.fps);
       }
+
+      if (this.testRunner) {
+        this.testRunner.start();
+      }
     },
 
     loadPiskel_ : function (serializedPiskel, descriptor, fps) {

src/js/devtools/DrawingTestRunner.js

@@ -0,0 +1,37 @@
+(function () {
+  var ns = $.namespace('pskl.devtools');
+
+  ns.DrawingTestRunner = function (testName) {
+    this.testName = testName;
+    $.subscribe(Events.TEST_RECORD_END, this.onTestRecordEnd_.bind(this));
+  };
+
+  ns.DrawingTestRunner.prototype.start = function () {
+    var testName = this.testName;
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', testName, true);
+
+    xhr.onload = function(e) {
+      if (this.status == 200) {
+        var recordPlayer = new ns.TestRecordPlayer(JSON.parse(this.responseText));
+        recordPlayer.start();
+      } else {
+        this.onerror(e);
+      }
+    };
+    xhr.onerror = function(e) {
+      console.error('Could not load file : ' + testName);
+    };
+    xhr.send();
+  };
+
+  ns.DrawingTestRunner.prototype.onTestRecordEnd_ = function (evt, success, png) {
+    var testResult = document.createElement('div');
+    testResult.id = 'drawing-test-result';
+    testResult.setAttribute('data-test-name', this.testName);
+    // pskl.app.paletteController.setPrimaryColor('rgba(0,255,0,0)');
+    testResult.innerHTML = success ? 'OK' : ('KO:'+png);
+    document.body.appendChild(testResult);
+  };
+
+})();

src/js/devtools/MouseEvent.js

@@ -17,6 +17,7 @@
     if (otherEvent && otherEvent instanceof ns.MouseEvent) {
       var sameEvent = JSON.stringify(otherEvent.event) == JSON.stringify(this.event);
       var sameCoords = JSON.stringify(otherEvent.coords) == JSON.stringify(this.coords);
+      return sameEvent && sameCoords;
     } else {
       return false;
     }

src/js/devtools/TestRecordPlayer.js

@@ -4,11 +4,11 @@
   ns.TestRecordPlayer = function (testRecord) {
     this.initialState = testRecord.initialState;
     this.events = testRecord.events;
-    this.png = testRecord.png;
+    this.referencePng = testRecord.png;
     this.shim = null;
   };
 
-  ns.TestRecordPlayer.STEP = 30;
+  ns.TestRecordPlayer.STEP = 40;
 
   ns.TestRecordPlayer.prototype.start = function () {
     this.setupInitialState_();
@@ -74,12 +74,19 @@
     var renderer = new pskl.rendering.PiskelRenderer(pskl.app.piskelController);
     var png = renderer.renderAsCanvas().toDataURL();
 
-    var success = png === this.png;
+    var image = new Image();
+    image.onload = function () {
+      var canvas = pskl.CanvasUtils.createFromImage(image);
+      var referencePng = canvas.toDataURL();
+      var success = png === referencePng;
 
-    this.shim.parentNode.removeChild(this.shim);
-    this.shim = null;
+      this.shim.parentNode.removeChild(this.shim);
+      this.shim = null;
+
+      $.publish(Events.TEST_RECORD_END, [success, png + '  vs  ' + referencePng]);
+    }.bind(this);
+    image.src = this.referencePng;
 
-    $.publish(Events.TEST_RECORD_END, [success]);
   };
 
   ns.TestRecordPlayer.prototype.playMouseEvent_ = function (recordEvent) {

src/js/utils/CanvasUtils.js

@@ -26,6 +26,13 @@
       return canvas;
     },
 
+    createFromImage : function (image) {
+      var canvas = pskl.CanvasUtils.createCanvas(image.width, image.height);
+      var context = canvas.getContext('2d');
+      context.drawImage(image, 0, 0);
+      return canvas;
+    },
+
     /**
      * By default, all scaling operations on a Canvas 2D Context are performed using antialiasing.
      * Resizing a 32x32 image to 320x320 will lead to a blurry output.

src/js/utils/core.js

@@ -14,13 +14,26 @@ jQuery.namespace = function() {
 /**
  * Need a polyfill for PhantomJS
  */
-if (typeof Function.prototype.bind !== "function") {
-  Function.prototype.bind = function(scope) {
-    "use strict";
-    var _function = this;
-    return function() {
-      return _function.apply(scope, arguments);
-    };
+if (!Function.prototype.bind) {
+  Function.prototype.bind = function (oThis) {
+    if (typeof this !== "function") {
+      // closest thing possible to the ECMAScript 5
+      // internal IsCallable function
+      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+    }
+
+    var bindArgs = Array.prototype.slice.call(arguments, 1),
+        fToBind = this,
+        fNOP = function () {},
+        fBound = function () {
+          var args = bindArgs.concat(Array.prototype.slice.call(arguments));
+          return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, args);
+        };
+
+    fNOP.prototype = this.prototype;
+    fBound.prototype = new fNOP();
+
+    return fBound;
   };
 }