Merge pull request #539 from juliandescottes/fix-drawing-tests

Fix drawing tests

Gruntfile.js

@@ -9,8 +9,6 @@ module.exports = function(grunt) {
     TEST : 9991
   };
 
-  var DEV_MODE = '?debug';
-
   // create a version based on the build timestamp
   var dateFormat = require('dateformat');
   var version = '-' + dateFormat(new Date(), "yyyy-mm-dd-hh-MM");
@@ -34,25 +32,8 @@ module.exports = function(grunt) {
   var stylePaths = require('./src/piskel-style-list.js').styles;
   var piskelStyles = prefixPaths(stylePaths, "src/");
 
-  var getCasperConfig = function (suiteName, delay, host) {
-    var testPaths = require('./test/casperjs/' + suiteName).tests;
-    var tests = prefixPaths(testPaths, "test/casperjs/");
-
-    return {
-      files : {src: tests},
-      options : {
-        casperjsOptions: [
-          '--baseUrl=http://' + host + ':' + PORT.TEST,
-          '--mode=' + DEV_MODE,
-          '--delay=' + delay,
-          '--verbose=false',
-          '--log-level=info',
-          '--print-command=false',
-          '--print-file-paths=true',
-        ]
-      },
-    };
-  };
+  var casperTestPaths = require('./test/casperjs/TestSuite.js').tests;
+  var casperTests = prefixPaths(casperTestPaths, "test/casperjs/");
 
   var getConnectConfig = function (base, port, host) {
     if (typeof base === 'string') {
@@ -134,7 +115,7 @@ module.exports = function(grunt) {
         path : 'http://' + hostname + ':' + PORT.PROD + '/'
       },
       dev : {
-        path : 'http://' + hostname + ':' + PORT.DEV + '/' + DEV_MODE
+        path : 'http://' + hostname + ':' + PORT.DEV + '/?debug'
       }
     },
 
@@ -282,8 +263,19 @@ module.exports = function(grunt) {
     },
 
     casperjs : {
-      'travis' : getCasperConfig('TravisTestSuite.js', 10000, hostname),
-      'local' : getCasperConfig('LocalTestSuite.js', 50, hostname)
+      files : {
+        src: casperTests
+      },
+      options : {
+        casperjsOptions: [
+          '--baseUrl=http://' + hostname + ':' + PORT.TEST,
+          '--mode=?debug',
+          '--verbose=false',
+          '--log-level=info',
+          '--print-command=false',
+          '--print-file-paths=true',
+        ]
+      },
     },
 
     /**
@@ -312,38 +304,39 @@ module.exports = function(grunt) {
     }
   });
 
-  // Validate
+  // TEST TASKS
+  // Run linting
   grunt.registerTask('lint', ['jscs:js', 'leadingIndent:css', 'jshint']);
-
-  // karma/unit-tests task
+  // Run unit-tests
   grunt.registerTask('unit-test', ['karma']);
+  // Run linting, unit tests and drawing tests
+  grunt.registerTask('test', ['lint', 'unit-test', 'build-dev', 'connect:test', 'casperjs']);
 
-  // Validate & Test
-  grunt.registerTask('test-travis', ['lint', 'unit-test', 'build-dev', 'connect:test', 'casperjs:travis']);
-  // Validate & Test (faster version) will NOT work on travis !!
-  grunt.registerTask('test-local', ['lint', 'unit-test', 'build-dev', 'connect:test', 'casperjs:local']);
-  grunt.registerTask('test-local-nolint', ['unit-test', 'build-dev', 'connect:test', 'casperjs:local']);
-
-  grunt.registerTask('test', ['test-travis']);
-  grunt.registerTask('precommit', ['test-local']);
+  // Run the tests, even if the linting fails
+  grunt.registerTask('test-nolint', ['unit-test', 'build-dev', 'connect:test', 'casperjs']);
+  // Used by optional precommit hook
+  grunt.registerTask('precommit', ['test']);
 
+  // BUILD TASKS
   grunt.registerTask('build-index.html', ['includereplace']);
   grunt.registerTask('merge-statics', ['concat:js', 'concat:css', 'uglify']);
   grunt.registerTask('build',  ['clean:prod', 'sprite', 'merge-statics', 'build-index.html', 'replace:mainPartial', 'copy:prod']);
   grunt.registerTask('build-dev',  ['clean:dev', 'sprite', 'build-index.html', 'copy:dev']);
-
-  // Validate & Build
-  grunt.registerTask('default', ['lint', 'build']);
-
-  // Build stand alone app with nodewebkit
   grunt.registerTask('desktop', ['clean:desktop', 'default', 'replace:desktop', 'nwjs:windows']);
   grunt.registerTask('desktop-mac', ['clean:desktop', 'default', 'replace:desktop', 'nwjs:macos']);
 
+  // SERVER TASKS
   // Start webserver and watch for changes
   grunt.registerTask('serve', ['build', 'connect:prod', 'open:prod', 'watch:prod']);
   // Start webserver on src folder, in debug mode
-  grunt.registerTask('serve-dev', ['build-dev', 'connect:dev', 'open:dev', 'watch:dev']);
+  grunt.registerTask('play', ['build-dev', 'connect:dev', 'open:dev', 'watch:dev']);
 
-  grunt.registerTask('serve-debug', ['serve-dev']);
-  grunt.registerTask('play', ['serve-dev']);
+  // ALIASES, kept for backward compatibility
+  grunt.registerTask('serve-debug', ['play']);
+  grunt.registerTask('serve-dev', ['play']);
+  grunt.registerTask('test-travis', ['test']);
+  grunt.registerTask('test-local', ['test']);
+
+  // Default task
+  grunt.registerTask('default', ['lint', 'build']);
 };

package.json

@@ -23,7 +23,7 @@
   "scripts": {
     "test": "grunt test",
     "start": "nodewebkit",
-    "preversion": "grunt test-local build",
+    "preversion": "grunt test build",
     "postversion": "git push && git push --tags && npm publish"
   },
   "devDependencies": {

src/js/devtools/DrawingTestPlayer.js

@@ -15,7 +15,7 @@
   ns.DrawingTestPlayer.prototype.start = function () {
     this.setupInitialState_();
     this.createMouseShim_();
-    this.regenerateReferencePng().then(function () {
+    this.regenerateReferencePng(function () {
       this.playEvent_(0);
     }.bind(this));
   };
@@ -45,21 +45,13 @@
     return piskel;
   };
 
-  ns.DrawingTestPlayer.prototype.regenerateReferencePng = function () {
+  ns.DrawingTestPlayer.prototype.regenerateReferencePng = function (callback) {
     var image = new Image();
-    var then = function () {};
-
     image.onload = function () {
-      this.referencePng = pskl.utils.CanvasUtils.createFromImage(image).toDataURL();
-      then();
+      this.referenceCanvas = pskl.utils.CanvasUtils.createFromImage(image);
+      callback();
     }.bind(this);
     image.src = this.referencePng;
-
-    return {
-      then : function (cb) {
-        then = cb;
-      }
-    };
   };
 
   /**
@@ -129,8 +121,8 @@
 
   ns.DrawingTestPlayer.prototype.playKeyboardEvent_ = function (recordEvent) {
     var event = recordEvent.event;
-    if (pskl.utils.UserAgent.isMac && event.ctrlKey) {
-      event.metaKey = true;
+    if (pskl.utils.UserAgent.isMac) {
+      event.metaKey = event.ctrlKey;
     }
 
     event.preventDefault = function () {};
@@ -164,14 +156,26 @@
   ns.DrawingTestPlayer.prototype.onTestEnd_ = function () {
     this.removeMouseShim_();
 
+    // Retrieve the imageData corresponding to the spritesheet created by the test.
     var renderer = new pskl.rendering.PiskelRenderer(pskl.app.piskelController);
-    var png = renderer.renderAsCanvas().toDataURL();
+    var canvas = renderer.renderAsCanvas();
+    var testData = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
 
-    var success = png === this.referencePng;
+    // Retrieve the reference imageData corresponding to the reference data-url png stored for this test.
+    var refCanvas = this.referenceCanvas;
+    this.referenceData = refCanvas.getContext('2d').getImageData(0, 0, refCanvas.width, refCanvas.height);
 
-    $.publish(Events.TEST_RECORD_END, [success, png, this.referencePng]);
+    // Compare the two imageData arrays.
+    var success = true;
+    for (var i = 0 ; i < this.referenceData.data.length ; i++) {
+      if (this.referenceData.data[i] != testData.data[i]) {
+        success = false;
+      }
+    }
+
+    $.publish(Events.TEST_RECORD_END, [success]);
     this.callbacks.forEach(function (callback) {
-      callback(success, png, this.referencePng);
+      callback(success);
     });
   };
 

src/js/devtools/DrawingTestRunner.js

@@ -14,11 +14,11 @@
     }.bind(this));
   };
 
-  ns.DrawingTestRunner.prototype.onTestRecordEnd_ = function (evt, success, png) {
+  ns.DrawingTestRunner.prototype.onTestRecordEnd_ = function (evt, success) {
     var testResult = document.createElement('div');
     testResult.id = 'drawing-test-result';
     testResult.setAttribute('data-test-name', this.testName);
-    testResult.innerHTML = success ? 'OK' : ('KO:' + png);
+    testResult.innerHTML = success ? 'OK' : 'KO';
     document.body.appendChild(testResult);
   };
 })();

src/js/devtools/DrawingTestSuiteRunner.js

@@ -44,7 +44,7 @@
     testPlayer.start();
   };
 
-  ns.DrawingTestSuiteRunner.prototype.onTestEnd_ = function (success, png, referencePng) {
+  ns.DrawingTestSuiteRunner.prototype.onTestEnd_ = function (success) {
     var path = this.testPaths[this.currentIndex];
     this.testStatus[path] = success;
     $.publish(Events.TEST_CASE_END, [path, success]);

test/casperjs/DrawingTest.js

@@ -18,10 +18,6 @@
 
       casper.then(function () {
         this.echo('Running test : ' + currentTest);
-        this.wait(casper.cli.get('delay'));
-      });
-
-      casper.then(function () {
         this.echo('... Waiting for test result : ' + resultSelector);
         this.waitForSelector(resultSelector, function () {
           // then

test/casperjs/SmokeTest.js

@@ -1,17 +1,13 @@
-casper.test.begin('Smoke Test', 2, function(test) {
+casper.test.begin('Smoke Test', 1, function(test) {
   casper
     .start(casper.cli.get('baseUrl')+"/?debug")
-    .then(function () {
-      this.wait(casper.cli.get('delay'));
-    })
     .then(function () {
       this.echo(casper.cli.get('baseUrl')+"/?debug");
-      // If there was a JS error after the page load, casper won't perform asserts
-      test.assertExists('html', 'Casper JS cannot assert DOM elements. A JS error has probably occured.');
-
       this.waitForSelector('#drawing-canvas-container canvas', function() {
         test.assertExists('#drawing-canvas-container canvas', 'Check if drawing canvas element is created');
-      });
+      }, function () {
+        test.fail('Test timed out');
+      }, 10000);
     })
     .run(function () {
       test.done();

test/casperjs/TravisTestSuite.js

@@ -1,4 +0,0 @@
-(typeof exports != "undefined" ? exports : pskl_exports).tests = [
-  'SmokeTest.js',
-  'DrawingTest.js'
-];