From 4bb2cfc78052005e4cc81b08830863bec282a2d6 Mon Sep 17 00:00:00 2001
From: filtercake <fabian@superpursuitmo.de>
Date: Wed, 16 Apr 2014 23:14:39 +0200
Subject: [PATCH] first green test with phantomcss. #1

---
 package.json                            |  10 ++-
 screenshots/001-header-title_0.diff.png | Bin 0 -> 2519 bytes
 screenshots/001-header-title_0.png      | Bin 0 -> 2519 bytes
 test/visual/README.md                   |   1 +
 test/visual/testsuite.js                | 111 ++++++++++++++++++++++++
 5 files changed, 120 insertions(+), 2 deletions(-)
 create mode 100644 screenshots/001-header-title_0.diff.png
 create mode 100644 screenshots/001-header-title_0.png
 create mode 100644 test/visual/README.md
 create mode 100755 test/visual/testsuite.js

diff --git a/package.json b/package.json
index b07c889fa..093ae4b7d 100644
--- a/package.json
+++ b/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"
diff --git a/screenshots/001-header-title_0.diff.png b/screenshots/001-header-title_0.diff.png
new file mode 100644
index 0000000000000000000000000000000000000000..c0bf6ae49fcb2e679bc65fbda102871ac387c7f8
GIT binary patch
literal 2519
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

literal 0
HcmV?d00001

diff --git a/screenshots/001-header-title_0.png b/screenshots/001-header-title_0.png
new file mode 100644
index 0000000000000000000000000000000000000000..c0bf6ae49fcb2e679bc65fbda102871ac387c7f8
GIT binary patch
literal 2519
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

literal 0
HcmV?d00001

diff --git a/test/visual/README.md b/test/visual/README.md
new file mode 100644
index 000000000..f85e197da
--- /dev/null
+++ b/test/visual/README.md
@@ -0,0 +1 @@
+        $ ./node_modules/casperjs/bin/casperjs test test/visual/testsuite.js
\ No newline at end of file
diff --git a/test/visual/testsuite.js b/test/visual/testsuite.js
new file mode 100755
index 000000000..ade0ee6da
--- /dev/null
+++ b/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());
+});
+