Gulp: Add test:browser task, to solve CORS issues on Chrome.

README.md

@@ -242,7 +242,23 @@ folder in your web browser. There should be a green bar at the top, meaning all
 tests have passed. If the bar is red, some tests have not passed. These will be
 highlighted and become visible when scrolling down.
 
-You can also run the unit tests through Gulp.js on the command line:
+If you are testing on Chrome, some of the tests will fail due to the browser's
+CORS restrictions. In order to run the browser based tests on Chrome, you need
+to run a local web-server through Gulp.js. The following command will handle it
+for you, and will also open the browser at the right address straight away:
+
+    gulp test:browser
+
+You can also run the unit tests through PhantomJS in Gulp directly on the
+command line:
+
+    gulp test:phantom
+
+To test the Node.js version of Paper.js, use this command:
+
+    gulp test:node
+
+And to test both the PhantomJS and Node.js environments together, simply run:
 
     gulp test
 

gulp/tasks/test.js

@@ -12,11 +12,12 @@
 
 var gulp = require('gulp'),
     qunits = require('gulp-qunits'),
-    gutil = require('gulp-util');
+    gutil = require('gulp-util'),
+    webserver = require('gulp-webserver');
 
-gulp.task('test', ['test:browser', 'test:node']);
+gulp.task('test', ['test:phantom', 'test:node']);
 
-gulp.task('test:browser', ['minify:acorn'], function() {
+gulp.task('test:phantom', ['minify:acorn'], function() {
     return gulp.src('index.html', { cwd: 'test' })
         .pipe(qunits({
             checkGlobals: true,
@@ -39,3 +40,11 @@ gulp.task('test:node', ['minify:acorn'], function(callback) {
             timeout: 40
         }));
 });
+
+gulp.task('test:browser', ['minify:acorn'], function() {
+    gulp.src('.')
+        .pipe(webserver({
+            open: '/test'
+        }));
+});
+

package.json

@@ -53,6 +53,7 @@
     "gulp-uglify": "^1.5.1",
     "gulp-uncomment": "^0.3.0",
     "gulp-util": "^3.0.0",
+    "gulp-webserver": "^0.9.1",
     "gulp-whitespace": "^0.1.0",
     "gulp-zip": "^3.0.2",
     "jshint": "2.8.x",

test/helpers.js

@@ -437,6 +437,27 @@ var getFunctionMessage = function(func) {
     return message;
 };
 
+var createPath = function(str) {
+    var ctor = (str.match(/z/gi) || []).length > 1 ? CompoundPath : Path;
+    return new ctor(str);
+};
+
+var compareBoolean = function(actual, expected, message, options) {
+    expected = typeof expected === 'string'
+            ? createPath(expected)
+            : expected;
+    if (typeof actual === 'function') {
+        if (!message)
+            message = getFunctionMessage(actual);
+        actual = actual();
+    }
+    actual.style = expected.style = {
+        strokeColor: 'black',
+        fillColor: expected.closed ? 'yellow' : null
+    };
+    equals(actual, expected, message, Base.set({ rasterize: true }, options));
+};
+
 var createSVG = function(str, attrs) {
     if (attrs) {
         // Similar to SvgElement.create():
@@ -451,3 +472,30 @@ var createSVG = function(str, attrs) {
     }
 };
 
+var compareSVG = function(done, actual, expected, message, options) {
+    function getItem(item) {
+        return item instanceof Item
+            ? item
+            : typeof item === 'string'
+            ? new Raster('data:image/svg+xml;base64,' + btoa(item))
+            : null;
+    }
+
+    actual = getItem(actual);
+    expected = getItem(expected);
+    actual.position = expected.position;
+
+    if (typeof actual === 'function') {
+        if (!message)
+            message = getFunctionMessage(actual);
+        actual = actual();
+    }
+
+    expected.onLoad = function() {
+        comparePixels(actual, expected, message, Base.set({
+            tolerance: 1e-2,
+            resolution: 72
+        }, options));
+        done();
+    };
+};

test/tests/Path_Boolean.js

@@ -12,27 +12,6 @@
 
 QUnit.module('Path Boolean Operations');
 
-function createPath(str) {
-    var ctor = (str.match(/z/gi) || []).length > 1 ? CompoundPath : Path;
-    return new ctor(str);
-}
-
-function compareBoolean(actual, expected, message, options) {
-    expected = typeof expected === 'string'
-            ? createPath(expected)
-            : expected;
-    if (typeof actual === 'function') {
-        if (!message)
-            message = getFunctionMessage(actual);
-        actual = actual();
-    }
-    actual.style = expected.style = {
-        strokeColor: 'black',
-        fillColor: expected.closed ? 'yellow' : null
-    };
-    equals(actual, expected, message, Base.set({ rasterize: true }, options));
-}
-
 test('#541', function() {
     var shape0 = new Path.Rectangle({
         insert: false,

test/tests/SvgImport.js

@@ -140,32 +140,3 @@ function importSVG(assert, url, message, options) {
             }
         });
 }
-
-function compareSVG(done, actual, expected, message, options) {
-    function getItem(item) {
-        return item instanceof Item
-            ? item
-            : typeof item === 'string'
-            ? new Raster('data:image/svg+xml;base64,' + btoa(item))
-            : null;
-    }
-
-    actual = getItem(actual);
-    expected = getItem(expected);
-    actual.position = expected.position;
-
-    if (typeof actual === 'function') {
-        if (!message)
-            message = getFunctionMessage(actual);
-        actual = actual();
-    }
-
-    expected.onLoad = function() {
-        comparePixels(actual, expected, message, Base.set({
-            tolerance: 1e-2,
-            resolution: 72
-        }, options));
-        done();
-    };
-}
-