Allow to make screenshots in Phantomjs (#4705)

* Load CSS in PhantomJS

* Allow to take screenshot in PhantomJS while running tests

For that, one need to run this call:

    window.top.callPhantom({'render': 'screenshot.png'});

* Make PhantomJS serve images

* Bonus: those tests now passe in Phantom too

* Add helper to make screenshot in tests

	takeScreenshot();

or

	takeScreenshot('path/to/screenshot.png');

build/build.js

@@ -193,7 +193,7 @@ exports.test = function(complete, fail) {
 	var karma = require('karma'),
 	    testConfig = {configFile : __dirname + '/../spec/karma.conf.js'};
 
-	testConfig.browsers = ['PhantomJS'];
+	testConfig.browsers = ['PhantomJSCustom'];
 
 	function isArgv(optName) {
 		return process.argv.indexOf(optName) !== -1;

spec/.eslintrc

@@ -14,6 +14,7 @@
     "expect": false,
     "sinon": false,
     "happen": false,
-    "Hand": false
+    "Hand": false,
+    "takeScreenshot"
   }
 }

spec/karma.conf.js

@@ -1,7 +1,7 @@
 // Karma configuration
 module.exports = function (config) {
 
-	var libSources = require(__dirname+'/../build/build.js').getFiles();
+	var libSources = require(__dirname + '/../build/build.js').getFiles();
 
 	var files = [
 		"spec/sinon.js",
@@ -12,7 +12,8 @@ module.exports = function (config) {
 		"node_modules/prosthetic-hand/dist/prosthetic-hand.js",
 		"spec/suites/SpecHelper.js",
 		"spec/suites/**/*.js",
-		{pattern: "dist/images/*.png", included: false}
+		"dist/*.css",
+		{pattern: "dist/images/*.png", included: false, serve: true}
 	]);
 
 	config.set({
@@ -32,6 +33,9 @@ module.exports = function (config) {
 
 		// list of files / patterns to load in the browser
 		files: files,
+		proxies: {
+			'/base/dist/images/': 'dist/images/'
+		},
 		exclude: [],
 
 		// test results reporter to use
@@ -59,7 +63,21 @@ module.exports = function (config) {
 		// - Safari (only Mac)
 		// - PhantomJS
 		// - IE (only Windows)
-		browsers: ['PhantomJS'],
+		browsers: ['PhantomJSCustom'],
+
+		customLaunchers: {
+			'PhantomJSCustom': {
+				base: 'PhantomJS',
+				flags: ['--load-images=true'],
+				options: {
+					onCallback: function (data) {
+						if (data.render) {
+							page.render(data.render);
+						}
+					}
+				}
+			}
+		},
 
 		// If browser does not capture in given timeout [ms], kill it
 		captureTimeout: 5000,

spec/suites/SpecHelper.js

@@ -60,3 +60,8 @@ it.skipIfNotTouch = window.TouchEvent ? it : it.skip;
 
 // A couple of tests need the browser to be pointer-capable
 it.skipIfNotEdge = window.PointerEvent ? it : it.skip;
+
+
+function takeScreenshot(path) {
+	window.top.callPhantom({'render': path || 'screenshot.png'});
+}

spec/suites/layer/tile/GridLayerSpec.js

@@ -135,7 +135,7 @@ describe('GridLayer', function () {
 		});
 
 		// Passes on Firefox, but fails on phantomJS: done is never called.
-		it.skipInPhantom('only creates tiles for visible area on zoom in', function (done) {
+		it('only creates tiles for visible area on zoom in', function (done) {
 			map.remove();
 			map = L.map(div);
 			map.setView([0, 0], 10);

spec/suites/map/MapSpec.js

@@ -653,7 +653,7 @@ describe("Map", function () {
 			document.body.removeChild(div);
 		});
 
-		it.skipInPhantom('move to requested center and zoom, and call zoomend once', function (done) {
+		it('move to requested center and zoom, and call zoomend once', function (done) {
 			this.timeout(10000); // This test takes longer than usual due to frames
 
 			var spy = sinon.spy(),
@@ -670,7 +670,7 @@ describe("Map", function () {
 			map.on('zoomend', callback).flyTo(newCenter, newZoom);
 		});
 
-		it.skipInPhantom('flyTo start latlng == end latlng', function (done) {
+		it('flyTo start latlng == end latlng', function (done) {
 			this.timeout(10000); // This test takes longer than usual due to frames
 
 			var dc = new L.LatLng(38.91, -77.04);