Gruntfile.js

module.exports = function(grunt) {
	'use strict';

	require('matchdep')
		.filterDev('grunt-*')
		.forEach(grunt.loadNpmTasks);

	grunt.initConfig({
		// ...

		qunit: {
			options: {
				timeout: 30000 // 30sec
			},
			mini: ['../test/mini.html'],
			touch: ['../test/touch.html'],
			desk: ['../test/desk.html']
		},

		shell: {
			options: {
				stdout: true
			},
			phantomcss: {
				command: 'cd ../test/casperjs/ && casperjs test test.js'
			}
		},
		
		// ...
	});

	// ...

	grunt.registerTask('test', ['qunit', 'shell:phantomcss', 'notify:test']);
	
	// ...
}

package.json

{
  "name": "MRM",
  "title": "Mail.Ru Maps JavaScript API",
  "description": "Mail.Ru Maps JavaScript API",
  "version": "3.3.4",
  "homepage": "http://maps.mail.ru",
  "author": {
    "name": "Alexander Burtsev",
    "email": "burtsev@corp.mail.ru"
  },
  "repository": {
    "type": "git",
    "url": "ssh://git@cvs.p.mail.ru:2222/maps.mail.ru.git"
  },
  "licenses": [],
  "dependencies": {
    "chalk": "~0.3.0",
    "lodash": "~2.2.1"
  },
  "devDependencies": {
    "casperjs": "~1.1.0-beta3",
    "glob": "~3.2.7",
    "grunt": "~0.4.0",
    "grunt-contrib-concat": "~0.4.0",
    "grunt-contrib-jshint": "*",
    "grunt-contrib-qunit": "*",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-stylus": "~0.16.0",
    "grunt-contrib-uglify": "0.2.0",
    "grunt-contrib-watch": "*",
    "grunt-notify": "^0.3.1",
    "grunt-shell": "~0.5.0",
    "grunt-spritesmith": "~1.26.0",
    "jake": "~0.7.9",
    "lodash": "~2.2.1",
    "matchdep": "~0.3.0",
    "optimist": "~0.6.0",
    "phantomcss": "~0.5.0",
    "shelljs": "~0.2.6"
  },
  "keywords": []
}

test.js

// Host and pathes
var	host = 'i4.map1.corp.mail.ru',
	path = 'http://' + host + '/api/test/casperjs/',
	page = path + 'test.html',
	modules = './../../dev/node_modules/',
	phantomcss = require(modules + 'phantomcss/phantomcss.js');

// PhantomCSS settings
phantomcss.init({
	screenshotRoot: './screenshots',
	failedComparisonsRoot: './screenshots/failures',
	libraryRoot: modules + 'phantomcss',
	addLabelToFailedImage: false,

	fileNameGetter: function(root, filename) {
		var name = root + '/' + filename;
		if ( fs.isFile(name + '.png') ) {
			return name + '.diff.png';
		} else {
		    return name + '.png';
		}
	}
});

// Test
casper
	.start(page)
	.viewport(1024, 768)

	// Simple map
	.then(function() {
		casper.waitForSelector('.map_loaded', function() {
			phantomcss.screenshot('.container', 'simple_map');
		});
	})

	// Small simple map
	.then(function() {
		casper.viewport(280, 768);
	})
	.thenOpen(page, function() {
		casper.waitForSelector('.map_loaded', function() {
			phantomcss.screenshot('.container', 'simple_small_map');
		});
	})
	.then(function() {
		casper.viewport(1024, 768);
	})
	.thenOpen(page, function() {
		casper.waitForSelector('.map_loaded', function() {});
	})

	// Standart controls
	.thenEvaluate(function() {
		window.controlZoom = new mrm.Control.Zoom({ map: map });
		window.controlScaleline = new mrm.Control.Scaleline({ map: map });
		window.controlPOI = new mrm.Control.POI({ map: map });
		window.controlJams = new mrm.Control.Jams({ map: map });
	})
	.then(function() {
		phantomcss.screenshot('.container', 'standart_controls');
	})

	// Opened POI droplist
	.then(function() {
		casper.click('.mrm-icon_name_text_show');
		phantomcss.screenshot('.container', 'standart_controls_poi_droplist');
	})
	.thenEvaluate(function() {
		window.controlZoom.remove();
		window.controlScaleline.remove();
		window.controlPOI.remove();
		window.controlJams.remove();
	})

	// Default marker
	.thenEvaluate(function() {
		window.marker = mrm.marker({
			map: map,
			point: map.getCenter()
		});
	})
	.then(function() {
		phantomcss.screenshot('.container', 'default_marker');
	})
	.thenEvaluate(function() {
		window.marker.remove();
	})

	// Default balloon
	.thenEvaluate(function() {
		window.balloon = mrm.balloon({
			title: 'Заголовок балуна',
			content: '<i>HTML-содержимое балуна</i>',
			map: map,
			point: map.getCenter()
		});
	})
	.then(function() {
		phantomcss.screenshot('.container', 'default_balloon');
	})
	.thenEvaluate(function() {
		window.balloon.remove();
	})

	// Balloon-control
	.thenEvaluate(function() {
		window.balloon = mrm.balloon({
			minWidth: 350,
			title: 'Заголовок балуна',
			content: '<i>HTML-содержимое балуна</i>',
			map: map,
			point: map.getCenter()
		});

		new mrm.BalloonControl({
			content: 'Просто текст',
			balloon: balloon
		});

		new mrm.BalloonControl({
			type: 'link',
			content: 'Приблизить',
			balloon: balloon
		});

		var minus = new mrm.BalloonControl({
			type: 'link',
			content: 'Отдалить',
			balloon: balloon
		});
		minus.disable();

		new mrm.BalloonControl({
			type: 'link',
			href: 'http://maps.mail.ru/',
			align: 'right',
			content: 'Maps@Mail.Ru',
			balloon: balloon
		});

		new mrm.BalloonControl({
			idx: 0,
			content: 'First',
			balloon: balloon
		});
	})
	.then(function() {
		phantomcss.screenshot('.container', 'balloon_controls');
	})
	.thenEvaluate(function() {
		window.balloon.remove();
	})

	// Alert
	.thenEvaluate(function() {
		window.alert = new mrm.Alert({
			title: 'Произошла непредвиденная ошибка',
			text: 'Проверьте правильность введенного запроса',
			map: map
		});
	})
	.then(function() {
		phantomcss.screenshot('.container', 'alert');
	})
	.thenEvaluate(function() {
		window.alert.remove();
	})

	// Polyline
	.thenEvaluate(function() {
		window.line = mrm.polyline([
			mrm.lonlat(37.368636, 55.757381),
			mrm.lonlat(37.526465, 55.781773),
			mrm.lonlat(37.838301, 55.766672)
		]);
		window.line.addTo(map);
	})
	.then(function() {
		phantomcss.screenshot('.container', 'default_polyline');
	})
	.thenEvaluate(function() {
		map.removeLayer(window.line);
	})

	// Polygon
	.thenEvaluate(function() {
		window.polygon = mrm.polygon([
			mrm.lonlat(37.368636, 55.757381),
			mrm.lonlat(37.526465, 55.781773),
			mrm.lonlat(37.838301, 55.766672)
		]);
		window.polygon.addTo(map);
	})
	.then(function() {
		phantomcss.screenshot('.container', 'default_polygon');
	})
	.thenEvaluate(function() {
		map.removeLayer(window.polygon);
	})

	// Route
	.thenEvaluate(function() {
		window.route = mrm.route({
			map: map,
			points: [
				mrm.lonlat(37.368636, 55.757381),
				mrm.lonlat(37.838301, 55.766672)
			]
		});
		window.route.on('routeend', function() {
			window.routeend = true;
		});
	})
	.then(function() {
		casper.waitFor(function() {
			return this.evaluate(function() {
				return window.routeend;
			});
		}, function() {
			phantomcss.screenshot('.container', 'route');
		});
	})
	.thenEvaluate(function() {
		window.route.remove();
	})

	// Compare screenshots
	.then(function() {
		phantomcss.compareAll();
	})
	.then(function() {
		casper.test.done();
	});

casper.run(function() {
	// Do nothing
});