Merge branch 'devel' of https://github.com/triAGENS/ArangoDB into devel

js/apps/system/aardvark/test/css/ResembleJs/resemble.js

@@ -0,0 +1,537 @@
+/*
+Author: James Cryer
+Company: Huddle
+Last updated date: 17 Sep 2013
+URL: https://github.com/Huddle/Resemble.js
+*/
+
+(function(_this){
+	'use strict';
+
+	_this['resemble'] = function( fileData ){
+
+		var data = {};
+		var images = [];
+		var updateCallbackArray = [];
+
+		var tolerance = { // between 0 and 255
+			red: 16,
+			green: 16,
+			blue: 16,
+			minBrightness: 16,
+			maxBrightness: 240
+		};
+
+		var ignoreAntialiasing = false;
+		var ignoreColors = false;
+
+		function triggerDataUpdate(){
+			var len = updateCallbackArray.length;
+			var i;
+			for(i=0;i<len;i++){
+				if (typeof updateCallbackArray[i] === 'function'){
+					updateCallbackArray[i](data);
+				}
+			}
+		}
+
+		function loop(x, y, callback){
+			var i,j;
+
+			for (i=0;i<x;i++){
+				for (j=0;j<y;j++){
+					callback(i, j);
+				}
+			}
+		}
+
+		function parseImage(sourceImageData, width, height){
+
+			var pixleCount = 0;
+			var redTotal = 0;
+			var greenTotal = 0;
+			var blueTotal = 0;
+			var brightnessTotal = 0;
+
+			loop(height, width, function(verticalPos, horizontalPos){
+				var offset = (verticalPos*width + horizontalPos) * 4;
+				var red = sourceImageData[offset];
+				var green = sourceImageData[offset + 1];
+				var blue = sourceImageData[offset + 2];
+				var brightness = getBrightness(red,green,blue);
+
+				pixleCount++;
+
+				redTotal += red / 255 * 100;
+				greenTotal += green / 255 * 100;
+				blueTotal += blue / 255 * 100;
+				brightnessTotal += brightness / 255 * 100;
+			});
+
+			data.red = Math.floor(redTotal / pixleCount);
+			data.green = Math.floor(greenTotal / pixleCount);
+			data.blue = Math.floor(blueTotal / pixleCount);
+			data.brightness = Math.floor(brightnessTotal / pixleCount);
+
+			triggerDataUpdate();
+		}
+
+		function loadImageData( fileData, callback ){
+			var fileReader;
+			var hiddenImage = new Image();
+
+			hiddenImage.onload = function() {
+
+				var hiddenCanvas =  document.createElement('canvas');
+				var imageData;
+				var width = hiddenImage.width;
+				var height = hiddenImage.height;
+
+				hiddenCanvas.width = width;
+				hiddenCanvas.height = height;
+				hiddenCanvas.getContext('2d').drawImage(hiddenImage, 0, 0, width, height);
+				imageData = hiddenCanvas.getContext('2d').getImageData(0, 0, width, height);
+
+				images.push(imageData);
+
+				callback(imageData, width, height);
+			};
+
+			if (typeof fileData === 'string') {
+				hiddenImage.src = fileData;
+			} else {
+				fileReader = new FileReader();
+				fileReader.onload = function (event) {
+					hiddenImage.src = event.target.result;
+				};
+				fileReader.readAsDataURL(fileData);
+			}
+		}
+
+		function isColorSimilar(a, b, color){
+
+			var absDiff = Math.abs(a - b);
+
+			if(typeof a === 'undefined'){
+				return false;
+			}
+			if(typeof b === 'undefined'){
+				return false;
+			}
+
+			if(a === b){
+				return true;
+			} else if ( absDiff < tolerance[color] ) {
+				return true;
+			} else {
+				return false;
+			}
+		}
+
+		function isNumber(n) {
+			return !isNaN(parseFloat(n));
+		}
+
+		function isPixelBrightnessSimilar(d1, d2){
+			return Math.abs(d1.brightness - d2.brightness) < tolerance.minBrightness;
+		}
+
+		function getBrightness(r,g,b){
+			return 0.3*r + 0.59*g + 0.11*b;
+		}
+
+		function isRGBSame(d1,d2){
+			var red = d1.r === d2.r;
+			var green = d1.g === d2.g;
+			var blue = d1.b === d2.b;
+			return red && green && blue;
+		}
+
+		function isRGBSimilar(d1, d2){
+			var red = isColorSimilar(d1.r,d2.r,'red');
+			var green = isColorSimilar(d1.g,d2.g,'green');
+			var blue = isColorSimilar(d1.b,d2.b,'blue');
+
+			return red && green && blue;
+		}
+
+		function isContrasting(d1, d2){
+			return Math.abs(d1.brightness - d2.brightness) > tolerance.maxBrightness;
+		}
+
+		function getHue(r,g,b){
+
+			r = r / 255;
+			g = g / 255;
+			b = b / 255;
+			var max = Math.max(r, g, b), min = Math.min(r, g, b);
+			var h;
+			var d;
+
+			if (max == min){
+				h = 0; // achromatic
+			} else{
+				d = max - min;
+				switch(max){
+					case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+					case g: h = (b - r) / d + 2; break;
+					case b: h = (r - g) / d + 4; break;
+				}
+				h /= 6;
+			}
+
+			return h;
+		}
+
+		function isAntialiased(sourcePix, data, cacheSet, verticalPos, horizontalPos, width){
+			var offset;
+			var targetPix;
+			var distance = 1;
+			var i;
+			var j;
+			var hasHighContrastSibling = 0;
+			var hasSiblingWithDifferentHue = 0;
+			var hasEquivilantSibling = 0;
+
+			addHueInfo(sourcePix);
+
+			for (i = distance*-1; i <= distance; i++){
+				for (j = distance*-1; j <= distance; j++){
+
+					if(i===0 && j===0){
+						// ignore source pixel
+					} else {
+
+						offset = ((verticalPos+j)*width + (horizontalPos+i)) * 4;
+						targetPix = getPixelInfo(data, offset, cacheSet);
+
+						if(targetPix === null){
+							continue;
+						}
+
+						addBrightnessInfo(targetPix);
+						addHueInfo(targetPix);
+
+						if( isContrasting(sourcePix, targetPix) ){
+							hasHighContrastSibling++;
+						}
+
+						if( isRGBSame(sourcePix,targetPix) ){
+							hasEquivilantSibling++;
+						}
+
+						if( Math.abs(targetPix.h - sourcePix.h) > 0.3 ){
+							hasSiblingWithDifferentHue++;
+						}
+
+						if( hasSiblingWithDifferentHue > 1 || hasHighContrastSibling > 1){
+							return true;
+						}
+					}
+				}
+			}
+
+			if(hasEquivilantSibling < 2){
+				return true;
+			}
+
+			return false;
+		}
+
+		function errorPixel(px, offset){
+			px[offset] = 255; //r
+			px[offset + 1] = 0; //g
+			px[offset + 2] = 255; //b
+			px[offset + 3] = 255; //a
+		}
+
+		function copyPixel(px, offset, data){
+			px[offset] = data.r; //r
+			px[offset + 1] = data.g; //g
+			px[offset + 2] = data.b; //b
+			px[offset + 3] = 255; //a
+		}
+
+		function copyGrayScalePixel(px, offset, data){
+			px[offset] = data.brightness; //r
+			px[offset + 1] = data.brightness; //g
+			px[offset + 2] = data.brightness; //b
+			px[offset + 3] = 255; //a
+		}
+
+
+		function getPixelInfo(data, offset, cacheSet){
+			var r;
+			var g;
+			var b;
+			var d;
+
+			if(typeof data[offset] !== 'undefined'){
+				r = data[offset];
+				g = data[offset+1];
+				b = data[offset+2];
+				d = {
+					r: r,
+					g: g,
+					b: b
+				};
+
+				return d;
+			} else {
+				return null;
+			}
+		}
+
+		function addBrightnessInfo(data){
+			data.brightness = getBrightness(data.r,data.g,data.b); // 'corrected' lightness
+		}
+
+		function addHueInfo(data){
+			data.h = getHue(data.r,data.g,data.b);
+		}
+
+		function analyseImages(img1, img2, width, height){
+
+			var hiddenCanvas = document.createElement('canvas');
+
+			var data1 = img1.data;
+			var data2 = img2.data;
+
+			hiddenCanvas.width = width;
+			hiddenCanvas.height = height;
+
+			var context = hiddenCanvas.getContext('2d');
+			var imgd = context.createImageData(width,height);
+			var targetPix = imgd.data;
+
+			var mismatchCount = 0;
+
+			var time = Date.now();
+
+			var skip;
+
+			if( (width > 1200 || height > 1200) && ignoreAntialiasing){
+				skip = 6;
+			}
+
+			loop(height, width, function(verticalPos, horizontalPos){
+
+				if(skip){ // only skip if the image isn't small
+					if(verticalPos % skip === 0 || horizontalPos % skip === 0){
+						return;
+					}
+				}
+
+				var offset = (verticalPos*width + horizontalPos) * 4;
+				var pixel1 = getPixelInfo(data1, offset, 1);
+				var pixel2 = getPixelInfo(data2, offset, 2);
+
+				if(pixel1 === null || pixel2 === null){
+					return;
+				}
+
+				if (ignoreColors){
+
+					addBrightnessInfo(pixel1);
+					addBrightnessInfo(pixel2);
+
+					if( isPixelBrightnessSimilar(pixel1, pixel2) ){
+						copyGrayScalePixel(targetPix, offset, pixel2);
+					} else {
+						errorPixel(targetPix, offset);
+						mismatchCount++;
+					}
+					return;
+				}
+
+				if( isRGBSimilar(pixel1, pixel2) ){
+					copyPixel(targetPix, offset, pixel2);
+
+				} else if( ignoreAntialiasing && (
+						addBrightnessInfo(pixel1), // jit pixel info augmentation looks a little weird, sorry.
+						addBrightnessInfo(pixel2),
+						isAntialiased(pixel1, data1, 1, verticalPos, horizontalPos, width) ||
+						isAntialiased(pixel2, data2, 2, verticalPos, horizontalPos, width)
+					)){
+
+					if( isPixelBrightnessSimilar(pixel1, pixel2) ){
+						copyGrayScalePixel(targetPix, offset, pixel2);
+					} else {
+						errorPixel(targetPix, offset);
+						mismatchCount++;
+					}
+				} else {
+					errorPixel(targetPix, offset);
+					mismatchCount++;
+				}
+
+			});
+
+			data.misMatchPercentage = (mismatchCount / (height*width) * 100).toFixed(2);
+			data.analysisTime = Date.now() - time;
+
+			data.getImageDataUrl = function(text){
+				var barHeight = 0;
+
+				if(text){
+					barHeight = addLabel(text,context,hiddenCanvas);
+				}
+
+				context.putImageData(imgd, 0, barHeight);
+
+				return hiddenCanvas.toDataURL("image/png");
+			};
+		}
+
+		function addLabel(text, context, hiddenCanvas){
+			var textPadding = 2;
+
+			context.font = '12px sans-serif';
+
+			var textWidth = context.measureText(text).width + textPadding*2;
+			var barHeight = 22;
+
+			if(textWidth > hiddenCanvas.width){
+				hiddenCanvas.width = textWidth;
+			}
+
+			hiddenCanvas.height += barHeight;
+
+			context.fillStyle = "#666";
+			context.fillRect(0,0,hiddenCanvas.width,barHeight -4);
+			context.fillStyle = "#fff";
+			context.fillRect(0,barHeight -4,hiddenCanvas.width, 4);
+
+			context.fillStyle = "#fff";
+			context.textBaseline = "top";
+			context.font = '12px sans-serif';
+			context.fillText(text, textPadding, 1);
+
+			return barHeight;
+		}
+
+		function normalise(img, w, h){
+			var c;
+			var context;
+
+			if(img.height < h || img.width < w){
+				c = document.createElement('canvas');
+				c.width = w;
+				c.height = h;
+				context = c.getContext('2d');
+				context.putImageData(img, 0, 0);
+				return context.getImageData(0, 0, w, h);
+			}
+
+			return img;
+		}
+
+		function compare(one, two){
+
+			function onceWeHaveBoth(){
+				var width;
+				var height;
+				if(images.length === 2){
+					width = images[0].width > images[1].width ? images[0].width : images[1].width;
+					height = images[0].height > images[1].height ? images[0].height : images[1].height;
+
+					if( (images[0].width === images[1].width) && (images[0].height === images[1].height) ){
+						data.isSameDimensions = true;
+					} else {
+						data.isSameDimensions = false;
+					}
+
+					data.dimensionDifference = { width: images[0].width - images[1].width, height: images[0].height - images[1].height };
+
+					analyseImages( normalise(images[0],width, height), normalise(images[1],width, height), width, height);
+
+					triggerDataUpdate();
+				}
+			}
+
+			images = [];
+			loadImageData(one, onceWeHaveBoth);
+			loadImageData(two, onceWeHaveBoth);
+		}
+
+		function getCompareApi(param){
+
+			var secondFileData,
+				hasMethod = typeof param === 'function';
+
+			if( !hasMethod ){
+				// assume it's file data
+				secondFileData = param;
+			}
+
+			var self = {
+				ignoreNothing: function(){
+
+					tolerance.red = 16;
+					tolerance.green = 16;
+					tolerance.blue = 16;
+					tolerance.minBrightness = 16;
+					tolerance.maxBrightness = 240;
+
+					ignoreAntialiasing = false;
+					ignoreColors = false;
+
+					if(hasMethod) { param(); }
+					return self;
+				},
+				ignoreAntialiasing: function(){
+
+					tolerance.red = 32;
+					tolerance.green = 32;
+					tolerance.blue = 32;
+					tolerance.minBrightness = 64;
+					tolerance.maxBrightness = 96;
+
+					ignoreAntialiasing = true;
+					ignoreColors = false;
+
+					if(hasMethod) { param(); }
+					return self;
+				},
+				ignoreColors: function(){
+
+					tolerance.minBrightness = 16;
+					tolerance.maxBrightness = 240;
+
+					ignoreAntialiasing = false;
+					ignoreColors = true;
+
+					if(hasMethod) { param(); }
+					return self;
+				},
+				onComplete: function( callback ){
+
+					updateCallbackArray.push(callback);
+
+					var wrapper = function(){
+						compare(fileData, secondFileData);
+					};
+
+					wrapper();
+
+					return getCompareApi(wrapper);
+				}
+			};
+
+			return self;
+		}
+
+		return {
+			onComplete: function( callback ){
+				updateCallbackArray.push(callback);
+				loadImageData(fileData, function(imageData, width, height){
+					parseImage(imageData.data, width, height);
+				});
+			},
+			compareTo: function(secondFileData){
+				return getCompareApi(secondFileData);
+			}
+		};
+
+	};
+}(this));

js/apps/system/aardvark/test/css/ResembleJs/resemblejscontainer.html

@@ -0,0 +1 @@
+<html><body>This blank HTML page is used for processing the images with Resemble.js</body></html>

js/apps/system/aardvark/test/css/phantomcss.js

@@ -0,0 +1,488 @@
+/*
+Author: James Cryer
+Company: Huddle
+Last updated date: 03 Mar 2014
+URL: https://github.com/Huddle/PhantomCSS
+More: http://tldr.huddle.com/blog/css-testing/
+*/
+
+var fs = require('fs');
+
+var _src = '.'+fs.separator+'screenshots';
+var _results; // for backwards compatibility results and src are the same - but you can change it!
+var _failures = '.'+fs.separator+'failures';
+
+var _count = 0;
+var _realPath;
+var _diffsToProcess = [];
+var _libraryRoot = '.';
+var exitStatus;
+var _hideElements;
+var _addLabelToFailedImage = true;
+var _test_match;
+var _test_exclude;
+var _mismatchTolerance = 0.05;
+var diffsCreated = [];
+
+exports.screenshot = screenshot;
+exports.compareAll = compareAll;
+exports.compareMatched = compareMatched;
+exports.compareExplicit = compareExplicit;
+exports.compareSession = compareSession;
+exports.init = init;
+exports.update = update;
+exports.turnOffAnimations = turnOffAnimations;
+exports.getExitStatus = getExitStatus;
+exports.getCreatedDiffFiles = getCreatedDiffFiles;
+
+function update(options){
+
+	function stripslash ( str ){
+		return str.replace(/\/\//g,'/').replace(/\\/g,'\\');
+	}
+
+	options = options || {};
+
+	casper = options.casper || casper;
+	_libraryRoot = options.libraryRoot || _libraryRoot;
+	
+	_src = stripslash(options.screenshotRoot || _src);
+	_results = stripslash(options.comparisonResultRoot || _results || _src);
+	_failures = stripslash(options.failedComparisonsRoot || _failures);
+	
+	_fileNameGetter = options.fileNameGetter || _fileNameGetter;
+
+	_onPass = options.onPass || _onPass;
+	_onFail = options.onFail || _onFail;
+	_onTimeout = options.onTimeout || _onTimeout;
+	_onComplete = options.onComplete || options.report || _onComplete;
+
+	_hideElements = options.hideElements;
+
+	_mismatchTolerance = options.mismatchTolerance || _mismatchTolerance;
+
+	if(options.addLabelToFailedImage !== undefined){
+		_addLabelToFailedImage = options.addLabelToFailedImage;
+	}
+}
+
+function init(options){
+	update(options);
+}
+
+function turnOffAnimations(){
+	console.log('[PhantomCSS] Turning off animations');
+	casper.evaluate(function turnOffAnimations(){
+		window.addEventListener('load', function(){
+
+			var css = document.createElement("style");
+			css.type = "text/css";
+			css.innerHTML = "* { -webkit-transition: none !important; transition: none !important; }";
+			document.body.appendChild(css);
+
+			if(jQuery){
+				jQuery.fx.off = true;
+			}
+		},false);
+	});
+}
+
+function _fileNameGetter(root, fileName){
+	var name;
+
+	fileName = fileName || "screenshot";
+	name = root + fs.separator + fileName + "_" + _count++;
+
+	if(fs.isFile(name+'.png')){
+		return name+'.diff.png';
+	} else {
+		return name+'.png';
+	}
+}
+
+function screenshot(selector, timeToWait, hideSelector, fileName){
+	
+	if(isNaN(Number(timeToWait)) && typeof timeToWait === 'string'){
+		fileName = timeToWait;
+		timeToWait = void 0;
+	}
+
+	casper.captureBase64('png'); // force pre-render
+	casper.wait(timeToWait || 250, function(){
+
+		var srcPath = _fileNameGetter(_src, fileName);
+		var resultPath =  srcPath.replace(_src, _results);
+
+		if(hideSelector || _hideElements){
+			casper.evaluate(function(s1, s2){
+				if(s1){
+					$(s1).css('visibility', 'hidden');
+				}
+				$(s2).css('visibility', 'hidden');
+			}, {
+				s1: _hideElements,
+				s2: hideSelector
+			});
+		}
+
+		capture(srcPath, resultPath, selector);
+
+	}); // give a bit of time for all the images appear
+}
+
+function capture(srcPath, resultPath, selector){
+	var originalForResult = resultPath.replace('.diff', '');
+	var originalFromSource = srcPath.replace('.diff', '');
+
+	try {
+
+		if( isThisImageADiff(resultPath) ){
+
+			casper.captureSelector( resultPath , selector );
+			
+			diffsCreated.push(resultPath);
+
+			if(srcPath !== resultPath){
+				// also copy the original over to the result directory
+				copyAndReplaceFile(originalFromSource, originalForResult);
+			}
+
+		} else {
+
+			casper.captureSelector( srcPath , selector );
+
+			if(srcPath !== resultPath){
+				copyAndReplaceFile(srcPath, resultPath);
+			}
+		}
+
+	}
+	catch(ex){
+		console.log("[PhantomCSS] Screenshot capture failed: ", ex.message);
+	}
+}
+
+function isThisImageADiff(path){
+	return /\.diff\.png/.test(path);
+}
+
+function copyAndReplaceFile(src, dest){
+	if(fs.isFile(dest)){
+		fs.remove(dest);
+	}
+	fs.copy(src, dest);
+}
+
+function asyncCompare(one, two, func){
+
+	if(!casper.evaluate(function(){ return window._imagediff_;})){
+		initClient();
+	}
+
+	casper.fill('form#image-diff', {
+		'one': one,
+		'two': two
+	});
+
+	casper.evaluate(function(filename){
+		window._imagediff_.run( filename );
+	}, {
+		label: _addLabelToFailedImage ? one : false
+	});
+
+	casper.waitFor(
+		function check() {
+			return this.evaluate(function(){
+				return window._imagediff_.hasResult;
+			});
+		},
+		function () {
+
+			var mismatch = casper.evaluate(function(){
+				return window._imagediff_.getResult();
+			});
+
+			if(Number(mismatch)){
+				func(false, mismatch);
+			} else {
+				func(true);
+			}
+
+		}, function(){
+			func(false);
+		},
+		10000
+	);
+}
+
+function getDiffs (path){
+
+	var filePath;
+
+	if(({'..':1,'.':1})[path]){ return true; }
+
+	if(_realPath){
+		_realPath += fs.separator + path;
+	} else {
+		_realPath = path;
+	}
+
+	filePath = _realPath;
+
+	if(fs.isDirectory(_realPath) ){
+		fs.list(_realPath).forEach(getDiffs);
+	} else {
+		if( /\.diff\./.test(path.toLowerCase()) ){
+			if(_test_match){
+				if( _test_match.test(_realPath.toLowerCase()) ){
+					if( !(_test_exclude && _test_exclude.test(_realPath.toLowerCase())) ){
+						console.log('[PhantomCSS] Analysing', _realPath);
+						_diffsToProcess.push(filePath);
+					}
+				}
+			} else {
+				if( !(_test_exclude && _test_exclude.test(_realPath.toLowerCase())) ){
+					_diffsToProcess.push(filePath);
+				}
+			}
+		}
+	}
+
+	_realPath = _realPath.replace(fs.separator + path, '');
+}
+
+function getCreatedDiffFiles(){
+	var d = diffsCreated;
+	diffsCreated = [];
+	return d;
+}
+
+function compareMatched(match, exclude){
+	// Search for diff images, but only compare matched filenames
+	_test_match = typeof match === 'string' ? new RegExp(match) : match;
+	compareAll(exclude);
+}
+
+function compareExplicit(list){
+	// An explicit list of diff images to compare ['/dialog.diff.png', '/header.diff.png']
+	compareAll(void 0, list);
+}
+
+function compareSession(list){
+	// compare the diffs created in this session
+	compareAll(void 0, getCreatedDiffFiles() );
+}
+
+function compareAll(exclude, list){
+	var tests = [];
+	var fails = 0;
+	var errors = 0;
+
+	_test_exclude = typeof exclude === 'string' ? new RegExp(exclude) : exclude;
+	
+	if (list){
+		_diffsToProcess = list;
+	} else {
+		_realPath = undefined;
+		getDiffs(_results);
+	}
+
+	_diffsToProcess.forEach(function(file){
+
+		var baseFile = file.replace('.diff', '');
+		var html = _libraryRoot+fs.separator+"ResembleJs"+fs.separator+"resemblejscontainer.html";
+		var test = {
+			filename: baseFile
+		};
+
+		if(!fs.isFile(baseFile)) {
+			test.error = true;
+			errors++;
+			tests.push(test);
+		} else {
+
+			if( !fs.isFile(html) ){
+				console.log('[PhantomCSS] Can\'t find Resemble container. Perhaps the library root is mis configured. ('+html+')');
+				return;
+			}
+
+			casper.thenOpen ( html , function (){
+
+				asyncCompare(baseFile, file, function(isSame, mismatch){
+
+					tests.push(test);
+
+					if(!isSame){
+
+						test.fail = true;
+						fails++;
+
+						casper.waitFor(
+							function check() {
+								return casper.evaluate(function(){
+									return window._imagediff_.hasImage;
+								});
+							},
+							function () {
+								var failFile, safeFileName, increment;
+
+								if(_failures){
+									// flattened structure for failed diffs so that it is easier to preview
+									failFile = _failures + fs.separator + file.split(fs.separator).pop().replace('.diff.png', '');
+									safeFileName = failFile;
+									increment = 0;
+
+									while ( fs.isFile(safeFileName+'.fail.png') ){
+										increment++;
+										safeFileName = failFile+'.'+increment;
+									}
+
+									failFile = safeFileName + '.fail.png';
+
+									casper.captureSelector(failFile, 'img');
+								}
+
+								casper.captureSelector(file.replace('.diff.png', '.fail.png'), 'img');
+
+								casper.evaluate(function(){
+									window._imagediff_.hasImage = false;
+								});
+
+								if(mismatch){
+									test.mismatch = mismatch;
+									_onFail(test); // casper.test.fail throws and error, this function call is aborted
+									return;  // Just to make it clear what is happening
+								} else {
+									_onTimeout(test);
+								}
+
+							}, function(){},
+							10000
+						);
+					} else {
+						_onPass(test);
+					}
+
+				});
+			});
+		}
+	});
+
+	casper.then(function(){
+		casper.waitFor(function(){
+			return _diffsToProcess.length === tests.length;
+		}, function(){
+			_onComplete(tests, fails, errors);
+		}, function(){
+
+		},
+		10000);
+	});
+}
+
+function initClient(){
+
+	casper.page.injectJs(_libraryRoot+fs.separator+'ResembleJs'+fs.separator+'resemble.js');
+
+	casper.evaluate(function(mismatchTolerance){
+		
+		var result;
+
+		var div = document.createElement('div');
+
+		// this is a bit of hack, need to get images into browser for analysis
+		div.style = "display:block;position:absolute;border:0;top:-1px;left:-1px;height:1px;width:1px;overflow:hidden;";
+		div.innerHTML = '<form id="image-diff">'+
+			'<input type="file" id="image-diff-one" name="one"/>'+
+			'<input type="file" id="image-diff-two" name="two"/>'+
+		'</form><div id="image-diff"></div>';
+		document.body.appendChild(div);
+
+		window._imagediff_ = {
+			hasResult: false,
+			hasImage: false,
+			run: run,
+			getResult: function(){
+				window._imagediff_.hasResult = false;
+				return result;
+			}
+		};
+
+		function run(label){
+
+			function render(data){
+				var img = new Image();
+
+				img.onload = function(){
+					window._imagediff_.hasImage = true;
+				};
+				document.getElementById('image-diff').appendChild(img);
+				img.src = data.getImageDataUrl(label);
+			}
+
+			resemble(document.getElementById('image-diff-one').files[0]).
+				compareTo(document.getElementById('image-diff-two').files[0]).
+				ignoreAntialiasing(). // <-- muy importante
+				onComplete(function(data){
+					var diffImage;
+
+					if(Number(data.misMatchPercentage) > mismatchTolerance){
+						result = data.misMatchPercentage;
+					} else {
+						result = false;
+					}
+
+					window._imagediff_.hasResult = true;
+
+					if(Number(data.misMatchPercentage) > mismatchTolerance){
+						render(data);
+					}
+					
+				});
+		}
+	}, {
+		mismatchTolerance: _mismatchTolerance
+	});
+}
+
+function _onPass(test){
+	console.log('\n');
+	casper.test.pass('No changes found for screenshot ' + test.filename);
+}
+function _onFail(test){
+	console.log('\n');
+	casper.test.fail('Visual change found for screenshot ' + test.filename + ' (' + test.mismatch + '% mismatch)');
+}
+function _onTimeout(test){
+	console.log('\n');
+	casper.test.info('Could not complete image comparison for ' + test.filename);
+}
+function _onComplete(tests, noOfFails, noOfErrors){
+
+	if( tests.length === 0){
+		console.log("\nMust be your first time?");
+		console.log("Some screenshots have been generated in the directory " + _results);
+		console.log("This is your 'baseline', check the images manually. If they're wrong, delete the images.");
+		console.log("The next time you run these tests, new screenshots will be taken.  These screenshots will be compared to the original.");
+		console.log('If they are different, PhantomCSS will report a failure.');
+	} else {
+				
+		if(noOfFails === 0){
+			console.log("\nPhantomCSS found " + tests.length + " tests, None of them failed. Which is good right?");
+			console.log("\nIf you want to make them fail, go change some CSS - weirdo.");
+		} else {
+			console.log("\nPhantomCSS found " + tests.length + " tests, " + noOfFails + ' of them failed.');
+			console.log('\nPhantomCSS has created some images that try to show the difference (in the directory '+_failures+'). Fuchsia colored pixels indicate a difference betwen the new and old screenshots.');
+		}
+
+		if(noOfErrors !== 0){
+			console.log("There were " + noOfErrors + "errors.  Is it possible that a baseline image was deleted but not the diff?");
+		}
+
+		exitStatus = noOfErrors+noOfFails;
+	}
+}
+
+function getExitStatus() {
+	return exitStatus;
+}

js/apps/system/aardvark/test/karma/karma.conf.js

@@ -155,6 +155,7 @@ module.exports = function(karma) {
 
       // Views
       'frontend/js/views/navigationView.js',
+      'frontend/js/views/notificationView.js',
       'frontend/js/views/apiView.js',
       'frontend/js/views/footerView.js',
       'frontend/js/views/queryView.js',
@@ -258,6 +259,7 @@ module.exports = function(karma) {
       'test/specs/views/graphViewSpec.js',
       'test/specs/views/graphManagementViewSpec.js',
       'test/specs/views/addNewGraphViewSpec.js',
+      /*
       'test/specs/views/clusterDashboardViewSpec.js',
       'test/specs/views/clusterOverviewViewSpec.js',
       'test/specs/views/clusterServerViewSpec.js',
@@ -265,16 +267,17 @@ module.exports = function(karma) {
       'test/specs/views/clusterDatabaseViewSpec.js',
       'test/specs/views/clusterCollectionViewSpec.js',
       'test/specs/views/clusterShardsViewSpec.js',
+      */
       // Router
       'test/specs/router/routerSpec.js',
 
       //Planner
       //Router
-      'test/specs/planner/router/routerSpec.js',
+//      'test/specs/planner/router/routerSpec.js',
       //View
-      'test/specs/planner/views/planSymmetricViewSpec.js',
+//      'test/specs/planner/views/planSymmetricViewSpec.js',
-      'test/specs/planner/views/planTestViewSpec.js',
+//      'test/specs/planner/views/planTestViewSpec.js',
-      'test/specs/planner/views/planScenarioSelectorViewSpec.js',
+//      'test/specs/planner/views/planScenarioSelectorViewSpec.js',
       'test/specJSLint/jsLintSpec.js'
     ],
 

js/apps/system/aardvark/test/specs/collections/clusterCollectionsSpec.js

@@ -1,5 +1,5 @@
 /*jslint indent: 2, nomen: true, maxlen: 100, white: true  plusplus: true, browser: true*/
-/*global describe, beforeEach, afterEach, it, */
+/*global describe, beforeEach, afterEach, it, jasmine, */
 /*global spyOn, expect*/
 /*global _*/
 (function() {
@@ -8,9 +8,15 @@
 
   describe("Cluster Collections Collection", function() {
 
-    var col, list, c1, c2, c3;
+    var col, list, c1, c2, c3, oldRouter;
 
     beforeEach(function() {
+      oldRouter = window.App;
+      window.App = {
+        registerForUpdate: function(){},
+        addAuth: function(){},
+        getNewRoute: function(){}
+      };
       list = [];
       c1 = {name: "Documents", id: "123"};
       c2 = {name: "Edges", id: "321"};
@@ -29,7 +35,8 @@
         col.fetch.reset();
         col.getList();
         expect(col.fetch).toHaveBeenCalledWith({
-          async: false
+          async: false,
+          beforeSend: jasmine.any(Function)
         });
       });
       

js/apps/system/aardvark/test/specs/collections/clusterDatabasesSpec.js

@@ -1,5 +1,5 @@
 /*jslint indent: 2, nomen: true, maxlen: 100, white: true  plusplus: true, browser: true*/
-/*global describe, beforeEach, afterEach, it, */
+/*global describe, beforeEach, afterEach, it, jasmine, */
 /*global spyOn, expect*/
 /*global _*/
 (function() {
@@ -8,9 +8,14 @@
 
   describe("Cluster Databases Collection", function() {
 
-    var col, list, db1, db2, db3;
+    var col, list, db1, db2, db3, oldRouter;
 
     beforeEach(function() {
+      oldRouter = window.App;
+      window.App = {
+        registerForUpdate: function() {},
+        addAuth: function() {}
+      };
       list = [];
       db1 = {name: "_system"};
       db2 = {name: "otherDB"};
@@ -23,13 +28,18 @@
       });
     });
 
+    afterEach(function() {
+      window.App = oldRouter;
+    });
+
     describe("list", function() {
 
       it("should fetch the result sync", function() {
         col.fetch.reset();
         col.getList();
         expect(col.fetch).toHaveBeenCalledWith({
-          async: false
+          async: false,
+          beforeSend: jasmine.any(Function)
         });
       });
       

js/apps/system/aardvark/test/specs/collections/clusterServersSpec.js

@@ -1,5 +1,5 @@
 /*jslint indent: 2, nomen: true, maxlen: 100, white: true  plusplus: true, browser: true*/
-/*global describe, beforeEach, afterEach, it, */
+/*global describe, beforeEach, afterEach, it, jasmine, */
 /*global spyOn, expect*/
 /*global templateEngine, $, _, uiMatchers*/
 (function() {
@@ -8,9 +8,14 @@
 
   describe("Cluster Servers Collection", function() {
 
-    var col, list, prim1, prim2, prim3, sec1, sec2, sec3;
+    var col, list, prim1, prim2, prim3, sec1, sec2, sec3, oldRouter;
 
     beforeEach(function() {
+      oldRouter = window.App;
+      window.App = {
+        registerForUpdate: function(){},
+        addAuth: function(){}
+      };
       list = [];
       sec1 = {
         role: "secondary",
@@ -53,13 +58,18 @@
       });
     });
 
+    afterEach(function() {
+      window.App = oldRouter;
+    });
+
     describe("list overview", function() {
 
       it("should fetch the result sync", function() {
         col.fetch.reset();
         col.getOverview();
         expect(col.fetch).toHaveBeenCalledWith({
-          async: false
+          async: false,
+          beforeSend: jasmine.any(Function)
         });
       });
       
@@ -140,7 +150,8 @@
         col.fetch.reset();
         col.getList();
         expect(col.fetch).toHaveBeenCalledWith({
-          async: false
+          async: false,
+          beforeSend: jasmine.any(Function)
         });
       });
       

js/apps/system/aardvark/test/specs/collections/clusterShardsSpec.js

@@ -1,5 +1,5 @@
 /*jslint indent: 2, nomen: true, maxlen: 100, white: true  plusplus: true, browser: true*/
-/*global describe, beforeEach, afterEach, it, */
+/*global describe, beforeEach, afterEach, it, jasmine, */
 /*global spyOn, expect*/
 /*global _*/
 (function() {
@@ -8,19 +8,28 @@
 
   describe("Cluster Shards Collection", function() {
 
-    var col, list, s1, s2, s3;
+    var col, list, s1, s2, s3, oldRouter;
 
     beforeEach(function() {
+      oldRouter = window.App;
+      window.App = {
+        registerForUpdate: function(){},
+        addAuth: function(){},
+        getNewRoute: function(){}
+      };
       list = [];
-      s1 = {id: "Shard 1"};
+      s1 = {name: "Pavel", shards: ["asd", "xyz", "123"]};
-      s2 = {id: "Shard 2"};
+      s2 = {name: "Perry", shards: []};
-      s3 = {id: "Shard 3"};
+      s3 = {name: "Pancho", shards: ["hallo", "hans", "12333"]};
       col = new window.ClusterShards();
+
       spyOn(col, "fetch").andCallFake(function() {
         _.each(list, function(s) {
           col.add(s);
         });
       });
+
+
     });
 
     describe("list overview", function() {
@@ -29,10 +38,10 @@
         col.fetch.reset();
         col.getList();
         expect(col.fetch).toHaveBeenCalledWith({
-          async: false
+          async: false,
+          beforeSend: jasmine.any(Function)
         });
       });
-      
 
       it("should return a list with default ok status", function() {
         list.push(s1);
@@ -40,16 +49,16 @@
         list.push(s3);
         var expected = [];
         expected.push({
-          id: s1.id,
+          server: s1.name,
-          status: "ok"
+          shards: s1.shards
         });
         expected.push({
-          id: s2.id,
+          server: s2.name,
-          status: "ok"
+          shards: s2.shards
         });
         expected.push({
-          id: s3.id,
+          server: s3.name,
-          status: "ok"
+          shards: s3.shards
         });
         expect(col.getList()).toEqual(expected);
       });

js/apps/system/aardvark/test/specs/graphViewer/helper/uiMatchers.js

@@ -112,8 +112,7 @@ var uiMatchers = uiMatchers || {};
         expect(li).toBeTag("li");
         expect(li).toBeOfClass("graph_control");
         expect(btn).toBeTag("button");
-        expect(btn).toBeOfClass("btn");
+        expect(btn).toBeOfClass("button-primary");
-        expect(btn).toBeOfClass("btn-primary");
         expect(btn).toBeOfClass("gv_dropdown_entry");
         return true;
       }

js/apps/system/aardvark/test/specs/graphViewer/specAdapter/arangoAdapterUISpec.js

@@ -259,11 +259,11 @@
           expect($("#" + idPrefix + "4").length).toEqual(1);
           expect($("#" + idPrefix + "5").length).toEqual(1);
           
-          expect($("#" + idPrefix + "1").attr("value")).toEqual("");
+          expect($("#" + idPrefix + "1").val()).toEqual("");
-          expect($("#" + idPrefix + "2").attr("value")).toEqual("");
+          expect($("#" + idPrefix + "2").val()).toEqual("");
-          expect($("#" + idPrefix + "3").attr("value")).toEqual("");
+          expect($("#" + idPrefix + "3").val()).toEqual("");
-          expect($("#" + idPrefix + "4").attr("value")).toEqual("");
+          expect($("#" + idPrefix + "4").val()).toEqual("");
-          expect($("#" + idPrefix + "5").attr("value")).toEqual("");
+          expect($("#" + idPrefix + "5").val()).toEqual("");
           
           expect($("#" + idPrefix + "addLine").length).toEqual(1);
           $("#" + idPrefix + "1").attr("value", "foo");

js/apps/system/aardvark/test/specs/graphViewer/specNodeShaper/nodeShaperUISpec.js

@@ -442,11 +442,11 @@
           expect($(lblAttrPrefix + "4").length).toEqual(1);
           expect($(lblAttrPrefix + "5").length).toEqual(1);
           
-          expect($(lblAttrPrefix + "1").attr("value")).toEqual("");
+          expect($(lblAttrPrefix + "1").val()).toEqual("");
-          expect($(lblAttrPrefix + "2").attr("value")).toEqual("");
+          expect($(lblAttrPrefix + "2").val()).toEqual("");
-          expect($(lblAttrPrefix + "3").attr("value")).toEqual("");
+          expect($(lblAttrPrefix + "3").val()).toEqual("");
-          expect($(lblAttrPrefix + "4").attr("value")).toEqual("");
+          expect($(lblAttrPrefix + "4").val()).toEqual("");
-          expect($(lblAttrPrefix + "5").attr("value")).toEqual("");
+          expect($(lblAttrPrefix + "5").val()).toEqual("");
           
           expect($("#" + addLabelLineId).length).toEqual(1);
           $(lblAttrPrefix + "1").attr("value", lbl1);

js/apps/system/aardvark/test/specs/router/routerSpec.js

@@ -86,7 +86,6 @@
       spyOn(window, "CollectionsView");
       spyOn(window, "DocumentsView");
       spyOn(window, "DocumentView");
-      spyOn(window, "DocumentSourceView");
       spyOn(window, "ArangoLogs").andReturn(logsDummy);
       spyOn(logsDummy, "fetch");
       spyOn(window, "FooterView").andReturn(footerDummy);
@@ -142,11 +141,11 @@
       });
 
       it("should create a documentView", function() {
-        expect(window.DocumentView).toHaveBeenCalledWith();
+        expect(window.DocumentView).toHaveBeenCalledWith(
-      });
+          {
-
+            collection : documentDummy
-      it("should create a documentSourceView", function() {
+          }
-        expect(window.DocumentSourceView).toHaveBeenCalledWith();
+        );
       });
 
       it("should create a documentsView", function() {
@@ -416,32 +415,6 @@
           true
         );
       });
-
-      it("should route to the insalled applications", function() {
-        simpleNavigationCheck(
-          "applications/installed",
-          "FoxxActiveListView",
-          "applications-menu",
-          { collection: foxxDummy},
-          {
-            reload: undefined
-          },
-          true
-        );
-      });
-
-      it("should route to the available applications", function() {
-        simpleNavigationCheck(
-          "applications/available",
-          "FoxxInstalledListView",
-          "applications-menu",
-          { collection: foxxDummy},
-          {
-            reload: undefined
-          },
-          true
-        );
-      });
     });
   });
 }());

js/apps/system/aardvark/test/specs/views/collectionViewSpec.js

@@ -7,11 +7,13 @@
 
   describe("Collection View", function() {
 
-    var myView;
+    var myView, oldRouter;
-    window.App = function() {};
+
-    window.App.navigate = function() {};
 
     beforeEach(function() {
+      oldRouter = window.App;
+      window.App = function() {};
+      window.App.navigate = function() {};
       $('body').append('<div id="content" class="removeMe"></div>');
 
       myView = new window.CollectionView({
@@ -22,6 +24,7 @@
 
     afterEach(function() {
       $('.removeMe').remove();
+      window.App = oldRouter;
     });
 
 

js/apps/system/aardvark/test/specs/views/collectionsViewSpec.js

@@ -70,11 +70,11 @@
       it("Check if System Collections should be drawn", function() {
         myView.render();
         var wasRendered;
-        $('#checkSystem').click();
 
         spyOn(myView, 'render').andCallFake(function(request) {
           wasRendered = true;
         });
+        $('#checkSystem').click();
         myView.checkSystem();
         expect(wasRendered).toBeTruthy();
       });
@@ -93,11 +93,11 @@
       it("Check if Edge Collections should be drawn", function() {
         myView.render();
         var wasRendered;
-        $('#checkEdge').click();
-
         spyOn(myView, 'render').andCallFake(function(request) {
           wasRendered = true;
         });
+
+        $('#checkEdge').click();
         myView.checkEdge();
         expect(wasRendered).toBeTruthy();
       });
@@ -116,11 +116,11 @@
       it("Check if Document Collections should be drawn", function() {
         myView.render();
         var wasRendered;
-        $('#checkDocument').click();
-
         spyOn(myView, 'render').andCallFake(function(request) {
           wasRendered = true;
         });
+
+        $('#checkDocument').click();
         myView.checkDocument();
         expect(wasRendered).toBeTruthy();
       });
@@ -139,11 +139,11 @@
       it("Check if Loaded Collections should be drawn", function() {
         myView.render();
         var wasRendered;
-        $('#checkLoaded').click();
-
         spyOn(myView, 'render').andCallFake(function(request) {
           wasRendered = true;
         });
+
+        $('#checkLoaded').click();
         myView.checkLoaded();
         expect(wasRendered).toBeTruthy();
       });
@@ -162,13 +162,15 @@
       it("Check if Unloaded Collections should be drawn", function() {
         myView.render();
         var wasRendered;
-        $('#checkUnloaded').click();
-
         spyOn(myView, 'render').andCallFake(function(request) {
           wasRendered = true;
         });
-        myView.checkUnloaded();
+
+        $('#checkUnloaded').click();
         expect(wasRendered).toBeTruthy();
+        wasRendered =false;
+        myView.checkUnloaded();
+        expect(wasRendered).toBeFalsy();
       });
 
       it("Check if Name Sort is inactive", function() {

js/apps/system/aardvark/test/specs/views/dbSelectionViewSpec.js

@@ -77,7 +77,7 @@
 */
     it("should not render the selection if the list has only one element", function() {
       var oneCollection = new window.ArangoDatabase();
-      oneCollection.add({name: current});
+      oneCollection.add(current);
       spyOn(oneCollection, "fetch");
       view = new DBSelectionView(
         {

js/apps/system/aardvark/test/specs/views/graphManagementViewSpec.js

@@ -72,19 +72,19 @@
       });
 
       it("should create a sorted list of all graphs", function() {
-        var list = $("tbody > tr > td:last-child > a", "#graphsTable");
+        var list = $("li.tile h5.collectionName", "#graphManagementThumbnailsIn");
         expect(list.length).toEqual(3);
         // Order would be g2, g3, g1
-        expect(list[0].id).toEqual(g2._key);
+        expect($(list[0]).html()).toEqual(g2._key);
-        expect(list[1].id).toEqual(g3._key);
+        expect($(list[1]).html()).toEqual(g3._key);
-        expect(list[2].id).toEqual(g1._key);
+        expect($(list[2]).html()).toEqual(g1._key);
       });
 
       describe("creating a new graph", function() {
 
         it("should navigate to the graph adding view", function() {
           spyOn(window.App, "navigate");
-          $("#addGraphButton").click();
+          $("#createGraph").click();
           expect(window.App.navigate).toHaveBeenCalledWith(
             "graphManagement/add",
             {
@@ -98,7 +98,8 @@
       it("should navigate to graph delete view", function() {
         spyOn(window.App, "navigate");
         var lg = graphs.get("g3");
-        $("#" + g3._key + " > span").click();
+        $("#" + g3._key + "_settings").click();
+        $("#deleteGraph").click();
         expect(window.App.navigate).toHaveBeenCalledWith(
           "graphManagement/delete/" + g3._key,
           {

js/apps/system/aardvark/test/specs/views/graphViewSpec.js

@@ -1,5 +1,5 @@
 /*jslint indent: 2, nomen: true, maxlen: 100, white: true  plusplus: true, browser: true*/
-/*global describe, beforeEach, afterEach, it, */
+/*global describe, beforeEach, afterEach, it, jasmine*/
 /*global spyOn, runs, expect, waitsFor*/
 /*global templateEngine, GraphView, _, $*/
 (function() {
@@ -11,6 +11,7 @@
       div;  
     
     beforeEach(function() {
+      window.App = {navigate : function(){}};
       div = document.createElement("div");
       div.id = "content"; 
       document.body.appendChild(div);
@@ -30,7 +31,7 @@
     describe("after view creation", function() {
       
       var graphs, g1, g2, v1, v2, e1, e2,
-      myStore, sys1, cols, called;
+      myStore, sys1, cols, fakeStartNode;
 
       beforeEach(function() {
 
@@ -43,7 +44,6 @@
             status: "loaded"
           });
         };
-        called = false;
         v1 = createCol("z1", "document");
         v2 = createCol("a2", "document");
         e1 = createCol("y1", "edge");
@@ -76,7 +76,17 @@
           collection: myStore,
           graphs: graphs
         });
+        fakeStartNode = "vertices/123";
         spyOn($, "ajax").andCallFake(function(opts) {
+          if (opts.url === "/_api/simple/any"
+            && _.isFunction(opts.success)) {
+            opts.success({
+              document: {
+                _id: fakeStartNode
+              }
+            });
+            return;
+          }
           throw "Test not implemented";
         });
         view.render();
@@ -142,7 +152,14 @@
           spyOn(window, "GraphViewerUI");
           $("#createViewer").click();
           // Once load graphs, but never load random node
-          expect($.ajax).not.toHaveBeenCalled();
+          expect($.ajax).toHaveBeenCalledWith({
+            cache: false,
+            type: 'PUT',
+            url: '/_api/simple/any',
+            contentType: "application/json",
+            data: JSON.stringify({collection: v2.get("name")}),
+            success: jasmine.any(Function)
+          });
           defaultAdapterConfig.nodeCollection = v2.get("name");
           defaultAdapterConfig.edgeCollection = e2.get("name");
           expect(window.GraphViewerUI).toHaveBeenCalledWith(
@@ -150,7 +167,8 @@
             defaultAdapterConfig,
             $("#content").width(),
             680,
-            defaultGVConfig
+            defaultGVConfig,
+            fakeStartNode
           );
         });
 
@@ -161,7 +179,14 @@
           spyOn(window, "GraphViewerUI");
           $("#createViewer").click();
           // Once load graphs, but never load random node
-          expect($.ajax).not.toHaveBeenCalled();
+          expect($.ajax).toHaveBeenCalledWith({
+            cache: false,
+            type: 'PUT',
+            url: '/_api/simple/any',
+            contentType: "application/json",
+            data: JSON.stringify({collection: g2.vertices}),
+            success: jasmine.any(Function)
+          });
           defaultAdapterConfig.graph = g2._key;
           defaultAdapterConfig.nodeCollection = g2.vertices;
           defaultAdapterConfig.edgeCollection = g2.edges;
@@ -170,7 +195,8 @@
             defaultAdapterConfig,
             $("#content").width(),
             680,
-            defaultGVConfig
+            defaultGVConfig,
+            fakeStartNode
           );
         });
 

js/apps/system/aardvark/test/specs/views/navigationViewSpec.js

@@ -8,11 +8,14 @@
   describe("The navigation bar", function() {
 
     var div, view, currentDBFake, curName, isSystem,
-      DBSelectionViewDummy, StatisticBarViewDummy, UserBarViewDummy;
+      DBSelectionViewDummy, StatisticBarViewDummy, UserBarViewDummy,
+      NotificationViewDummy, UserCollectionDummy, oldRouter;
 
     beforeEach(function() {
       curName = "_system";
       isSystem = true;
+      oldRouter = window.App;
+      window.App = {navigate : function(){}};
 
       window.currentDB = window.currentDB || {
         get: function() {}
@@ -33,9 +36,22 @@
         render : function(){}
       };
 
+      NotificationViewDummy = {
+        id : "NotificationViewDummy",
+        render : function(){}
+      };
+
+      UserCollectionDummy = {
+        id      : "UserCollectionDummy",
+        whoAmI  : function () {return "root";}
+      };
+
+
+
       spyOn(window, "UserBarView").andReturn(UserBarViewDummy);
       spyOn(window, "StatisticBarView").andReturn(StatisticBarViewDummy);
       spyOn(window, "DBSelectionView").andReturn(DBSelectionViewDummy);
+      spyOn(window, "NotificationView").andReturn(NotificationViewDummy);
       spyOn(window.currentDB, "get").andCallFake(function(key) {
         if (key === "name") {
           return curName;
@@ -52,12 +68,13 @@
 
     afterEach(function() {
       document.body.removeChild(div);
+      window.App = oldRouter;
     });
 
     describe("in any database", function() {
 
       beforeEach(function() {
-        view = new window.NavigationView();
+        view = new window.NavigationView({userCollection : UserCollectionDummy});
         view.render();
       });
 
@@ -115,7 +132,7 @@
     describe("in _system database", function() {
 
       beforeEach(function() {
-        view = new window.NavigationView();
+        view = new window.NavigationView({userCollection : UserCollectionDummy});
         view.render();
       });
 
@@ -133,7 +150,7 @@
       beforeEach(function() {
         curName = "firstDB";
         isSystem = false;
-        view = new window.NavigationView();
+        view = new window.NavigationView({userCollection : UserCollectionDummy});
         view.render();
       });