Add visual tests.

.gitignore

@@ -1,4 +1,7 @@
 nbproject
 npm-debug.log
 node_modules
-.sass-cache
+.sass-cache
+failures/
+screenshots/*.fail.png
+screenshots/*.diff.png

gulpfile.js

@@ -40,6 +40,7 @@ gulp.task('sass-minify', function() {
 
 gulp.task('browser-sync', function() {
     browserSync.init({
+        notify: false,
         server: {
             baseDir: './'
         },
@@ -57,4 +58,4 @@ gulp.task('watch', function() {
 });
 
 // Default Task
-gulp.task('default', ['browser-sync', 'watch']);
+gulp.task('default', ['browser-sync', 'watch']);

package.json

@@ -3,7 +3,7 @@
   "version": "1.3.0",
   "description": "Gentelella Admin is a free to use Bootstrap admin template",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "casperjs test tests/visual-regression-tests.js"
   },
   "repository": {
     "type": "git",
@@ -32,11 +32,14 @@
   "homepage": "https://github.com/puikinsh/gentelella#readme",
   "devDependencies": {
     "browser-sync": "^2.12.10",
+    "casperjs": "^1.1.4",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.0",
     "gulp-concat": "^2.6.0",
     "gulp-rename": "^1.2.2",
     "gulp-ruby-sass": "^2.0.6",
-    "gulp-uglify": "^1.5.3"
+    "gulp-uglify": "^1.5.3",
+    "phantomcss": "^1.1.5",
+    "phantomjs-prebuilt": "^2.1.14"
   }
 }

tests/visual-regression-tests.js

@@ -0,0 +1,112 @@
+var phantomcss = require('phantomcss');
+
+function _onPass(test) {
+  console.log('\n');
+  var name = 'Should look the same ' + test.filename;
+  casper.test.pass(name, { name: name });
+}
+
+function _onFail(test) {
+  console.log('\n');
+  var name = 'Should look the same ' + test.filename;
+  casper.test.fail(name, { name: name, message: 'Looks different (' + test.mismatch + '% mismatch) ' + test.failFile });
+}
+
+casper.test.begin('Gentelella visual tests', function (test) {
+  phantomcss.init({
+    rebase: casper.cli.get("rebase"),
+    // SlimerJS needs explicit knowledge of this Casper, and lots of absolute paths
+    casper: casper,
+    libraryRoot: fs.absolute(fs.workingDirectory + ''),
+    screenshotRoot: fs.absolute(fs.workingDirectory + '/screenshots'),
+    failedComparisonsRoot: fs.absolute(fs.workingDirectory + '/failures'),
+    addLabelToFailedImage: true,
+
+    /*
+    screenshotRoot: '/screenshots',
+    failedComparisonsRoot: '/failures'
+    casper: specific_instance_of_casper,
+    libraryRoot: '/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
+      }
+      */
+  });
+
+  casper.on('remote.message', function (msg) {
+    this.echo(msg);
+  });
+  casper.on('error', function (err) {
+    this.die("PhantomJS has errored: " + err);
+  });
+  casper.on('resource.error', function (err) {
+    casper.log('Resource load error: ' + err, 'warning');
+  });
+
+  // The test scenario
+  casper.start();
+  casper.viewport(1920, 1080);
+  casper.thenOpen('http://localhost:3000/./production/index.html', function () {
+    phantomcss.screenshot('body', 'index');
+  });
+
+  casper.then(function () {
+    casper.click('.user-profile.dropdown-toggle');
+    // wait for modal to fade-in
+    casper.waitForSelector('li.open .user-profile.dropdown-toggle',
+      function success() {
+        phantomcss.screenshot('body', 'index-with-user-profile-dropdown');
+      },
+      function timeout() {
+        casper.test.fail('Should see coffee machine');
+      }
+    );
+  });
+  casper.then(function () {
+    casper.click('#cappuccino-button');
+    phantomcss.screenshot('#myModal', '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 close success': {
+            selector: '#coffee-machine-wrapper',
+            ignore: '.selector'
+          },
+          'Coffee machine button success': '#coffee-machine-button'
+        });
+      },
+      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 runs tests
+  */
+  casper.run(function () {
+    console.log('\nTHE END.');
+    // phantomcss.getExitStatus() // pass or fail?
+    casper.test.done();
+  });
+});