first green test with phantomcss. Laverna#1

package.json

@@ -1,7 +1,9 @@
 {
   "name": "laverna",
   "version": "0.5.0",
-  "dependencies": {},
+  "dependencies": {
+    "phantomcss": "~0.5.0"
+  },
   "devDependencies": {
     "grunt": "~0.4.1",
     "grunt-contrib-copy": "~0.4.0",
@@ -28,7 +30,11 @@
     "jshint-stylish": "~0.1.3",
     "grunt-contrib-less": "~0.9.0",
     "grunt-manifest": "~0.4.0",
-    "grunt-string-replace": "~0.2.7"
+    "grunt-string-replace": "~0.2.7",
+    "phantomjs": "~1.9.7-3",
+    "grunt-phantomcss": "~0.2.3",
+    "phantomcss": "~0.5.0",
+    "casperjs": "~1.1.0-beta3"
   },
   "engines": {
     "node": ">=0.8.0"

test/visual/README.md

@@ -0,0 +1 @@
+        $ ./node_modules/casperjs/bin/casperjs test test/visual/testsuite.js

test/visual/testsuite.js

@@ -0,0 +1,111 @@
+/*
+Notes:
+- phantomjs and caspar via homebrew
+- npm install phantomcss
+- bower install phantomcss
+
+[note i installed these locally via npm. @filtercake]
+*/
+
+
+/*
+	Require and initialise PhantomCSS module
+	Paths are relative to CasperJs directory
+*/
+var phantomcss = require('./../../phantomcss/phantomcss.js');
+
+phantomcss.init({
+	/*
+	screenshotRoot: '/screenshots',
+	failedComparisonsRoot: '/failures'
+	casper: specific_instance_of_casper,
+	*/
+	// libraryRoot: './../../phantomcss'
+	libraryRoot: './node_modules/phantomcss'
+	/*
+	fileNameGetter: function overide_file_naming(){},
+	onPass: function passCallback(){},
+	onFail: function failCallback(){},
+	onTimeout: function timeoutCallback(){},
+	onComplete: function completeCallback(){},
+	hideElements: '#thing.selector',
+	addLabelToFailedImage: true,
+	outputSettings: {
+		errorColor: {
+			red: 255,
+			green: 255,
+			blue: 0
+		},
+		errorType: 'movement',
+		transparency: 0.3
+	}
+	*/
+});
+
+
+/*
+	The test scenario
+*/
+// casper.start( './demo/coffeemachine.html' );
+casper.start( 'http://localhost:9000/#notes' );
+
+casper.viewport(1024, 768);
+
+casper.then(function(){
+	phantomcss.screenshot('#header-title', '001-header-title');
+});
+
+// casper.then(function(){
+// 	phantomcss.screenshot('#coffee-machine-button', '001.1 coffee machine button, button only');
+// });
+
+// casper.then(function(){
+// 	casper.click('#coffee-machine-button');
+
+// 	// wait for modal to fade-in 
+// 	casper.waitForSelector('#myModal:not([style*="display: none"])',
+// 		function success(){
+// 			phantomcss.screenshot('#myModal', '002 coffee machine dialog');
+// 		},
+// 		function timeout(){
+// 			casper.test.fail('Should see coffee machine');
+// 		}
+// 	);
+// });
+
+// casper.then(function(){
+// 	casper.click('#cappuccino-button');
+// 	phantomcss.screenshot('#myModal', '003 cappuccino success');
+// });
+
+// casper.then(function(){
+// 	casper.click('#close');
+
+// 	// wait for modal to fade-out
+// 	casper.waitForSelector('#myModal[style*="display: none"]',
+// 		function success(){
+// 			phantomcss.screenshot('#coffee-machine-wrapper', '004 coffee machine close success');
+// 		},
+// 		function timeout(){
+// 			casper.test.fail('Should be able to walk away from the coffee machine');
+// 		}
+// 	);
+// });
+
+casper.then( function now_check_the_screenshots(){
+	// compare screenshots
+	phantomcss.compareAll();
+});
+
+casper.then( function end_it(){
+	casper.test.done();
+});
+
+/*
+Casper runs tests
+*/
+casper.run(function(){
+	console.log('\nTHE END.');
+	phantom.exit(phantomcss.getExitStatus());
+});
+