From 8542eb62b414fcb53353c4e7cafe1691d93df522 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Thu, 11 Feb 2016 10:05:21 +0100 Subject: [PATCH] Gulp: Add test:browser task, to solve CORS issues on Chrome. --- README.md | 18 +++++++++++++- gulp/tasks/test.js | 15 +++++++++--- package.json | 1 + test/helpers.js | 48 ++++++++++++++++++++++++++++++++++++++ test/tests/Path_Boolean.js | 21 ----------------- test/tests/SvgImport.js | 29 ----------------------- 6 files changed, 78 insertions(+), 54 deletions(-) diff --git a/README.md b/README.md index 10692938..3266afac 100644 --- a/README.md +++ b/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 diff --git a/gulp/tasks/test.js b/gulp/tasks/test.js index 8c471149..22ebb275 100644 --- a/gulp/tasks/test.js +++ b/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' + })); +}); + diff --git a/package.json b/package.json index c15e4352..88cd21bc 100644 --- a/package.json +++ b/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", diff --git a/test/helpers.js b/test/helpers.js index ff46689f..b9762b1d 100644 --- a/test/helpers.js +++ b/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(); + }; +}; diff --git a/test/tests/Path_Boolean.js b/test/tests/Path_Boolean.js index 168ddd95..bde9a98c 100644 --- a/test/tests/Path_Boolean.js +++ b/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, diff --git a/test/tests/SvgImport.js b/test/tests/SvgImport.js index cbd05a7c..f0026980 100644 --- a/test/tests/SvgImport.js +++ b/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(); - }; -} -