Render the test html files out to PNG for later comparison.

Gruntfile.js

@@ -1,43 +1,35 @@
 /*global module,require*/
 var lrSnippet = require('connect-livereload')();
-var mountFolder = function (connect, dir) {
-    return connect.static(require('path').resolve(dir));
-};
+
+var glob = require('glob');
+var path = require('path');
+var process = require('process');
+var connect = require('connect');
 
 module.exports = function (grunt) {
   // load all grunt tasks
   require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
 
   // configurable paths
   var projectConfig = {
-      src: '',
-      dist: 'dist'
+    src: '',
+    dist: 'dist'
   };
 
   try {
-      projectConfig.src = require('./bower.json').appPath || projectConfig.src;
+    projectConfig.src = require('./bower.json').appPath || projectConfig.src;
   } catch (e) {}
 
+  var testPath = path.join(projectConfig.src, 'tests', 'patternfly');
+  var testFiles = glob(path.join(testPath, '**', '*.html'), { sync: true }, function(err, files) {
+    return files.map(function(x) { return path.join('patternfly', x) });
+  });
+
   grunt.initConfig({
     config: projectConfig,
     clean: {
       build: '<%= config.dist %>'
     },
-    connect: {
-      server: {
-        options: {
-          port: 9000,
-          hostname: '0.0.0.0',
-          middleware: function (connect) {
-            return [
-                lrSnippet,
-                mountFolder(connect, projectConfig.src),
-                mountFolder(connect, projectConfig.src + 'tests')
-            ];
-          }
-        }
-      }
-    },
     watch: {
       options: {
         livereload: true
@@ -81,17 +73,19 @@ module.exports = function (grunt) {
         ext: '.min.css'
       }
     },
-    casperjs: {
-      files: ['tests/casperjs/**/*.js']
+    casper: {
+      reference: {
+        options: {
+          args: testFiles
+        },
+        src: ['tests/render.js']
+      }
     }
   });
 
+  // TODO Make this specific to the shell task
   var branch = grunt.option('branch') || 'master';
-
-  grunt.loadNpmTasks('grunt-contrib-sass');
-  grunt.loadNpmTasks('grunt-contrib-cssmin');
-  grunt.loadNpmTasks('grunt-casperjs');
-  grunt.loadNpmTasks('grunt-shell');
+  var port = grunt.option('port') || 9000;
 
   grunt.registerTask('server', [
     'connect:server',
@@ -104,10 +98,63 @@ module.exports = function (grunt) {
     'cssmin'
   ]);
 
+  grunt.registerTask('default', ['build']);
+
+  var serveStatic = require('serve-static');
+  var serveIndex = require('serve-index');
+
+  grunt.registerTask('reference', 'Serve the reference Patternfly tests.', function() {
+    var keepalive = grunt.option('keepalive') || false;
+    var done = this.async();
+    app = connect();
+    app.use(serveIndex('tests'));
+    app.use('/dist', serveStatic(path.join(projectConfig.src, 'components', 'patternfly', 'dist')));
+    app.use('/components', serveStatic(path.join(projectConfig.src, 'components', 'patternfly', 'components')));
+    app.use('/patternfly', serveStatic(path.join(projectConfig.src, 'tests', 'patternfly')));
+    app.use('/patternfly/img', serveStatic(path.join(projectConfig.src, 'tests', 'patternfly')));
+
+    require('http').createServer(app).listen(port).on('listening', function() {
+      grunt.log.writeln("Started web server on port " + port);
+      if (!keepalive) {
+        done();
+      } else {
+        grunt.log.writeln("Listening forever...");
+      }
+    });
+  });
+
+  grunt.registerTask('serve', 'Serve the Patternfly tests using Sass CSS.', function() {
+    var keepalive = grunt.option('keepalive') || false;
+    var done = this.async();
+    app = connect();
+    app.use(serveIndex('tests'));
+    app.use('/dist/css', serveStatic(path.join(projectConfig.src, 'dist', 'css')));
+
+    var otherAssets = ['img', 'js', 'fonts'];
+    for (var i = 0; i < otherAssets.length; i++) {
+      asset = otherAssets[i];
+      app.use('/dist/' + asset, serveStatic(path.join(projectConfig.src, 'components', 'patternfly', 'dist', asset)));
+    }
+
+    app.use('/components', serveStatic(path.join(projectConfig.src, 'components', 'patternfly', 'components')));
+    app.use('/patternfly', serveStatic(path.join(projectConfig.src, 'tests', 'patternfly')));
+    app.use('/patternfly/img', serveStatic(path.join(projectConfig.src, 'tests', 'patternfly')));
+
+    require('http').createServer(app).listen(port).on('listening', function() {
+      grunt.log.writeln("Started web server on port " + port);
+      if (!keepalive) {
+        done();
+      } else {
+        grunt.log.writeln("Listening forever...");
+      }
+    });
+  });
+
+  grunt.registerTask('render-reference', ['reference', 'casper:reference']);
+
   grunt.registerTask('test', [
     'build',
-    'casperjs'
+    'reference'
+    // TODO create task to render Sass tests.
   ]);
-
-  grunt.registerTask('default', ['build']);
 };

package.json

@@ -12,9 +12,16 @@
     "connect-livereload": "~0.3.0",
     "grunt-contrib-uglify": "~0.3.2",
     "grunt-contrib-cssmin": "~0.10.0",
+    "grunt-shell": "~1.0.1",
+    "grunt-casper": "~0.4.1",
     "phantomcss": "~0.7.2",
-    "casperjs": "~1.1.0",
-    "grunt-casperjs": "~2.0.0",
-    "grunt-shell": "~1.0.1"
+    "connect": "~3.2.0",
+    "process": "~0.8.0",
+    "serve-static": "~1.6.1",
+    "serve-index": "~1.2.1",
+    "http": "0.0.0",
+    "fs": "0.0.2",
+    "path": "~0.4.9",
+    "glob": "~4.0.5"
   }
 }

tests/render.js

@@ -0,0 +1,18 @@
+var casper = require('casper').create({
+  logLevel: 'debug'
+});
+
+// FIXME Get the port passed in
+var port = casper.cli.options.port;
+var host = "http://localhost:" + '9000' + "/";
+var path = require('path');
+
+casper.start().each(casper.cli.args, function(self, test) {
+  self.thenOpen(host + test, function() {
+    var destination = path.join('tmp', path.basename(test, '.html'));
+    casper.echo("Rendering " + test);
+    this.capture(destination + '.png');
+  });
+});
+
+casper.run();