Add casper test infra (981054)

.gitignore

@@ -19,3 +19,4 @@ node_modules
 config/local.js
 messages.json
 styleguide/static/src/*
+tests/captures

.travis.yml

@@ -5,5 +5,11 @@ notifications:
   irc: "irc.mozilla.org#payments"
 install:
   - "npm install"
+before_script:
+   - git clone -q git://github.com/n1k0/casperjs.git
+   - cd casperjs; git checkout -q tags/1.1-beta1; cd ../
+   - export PATH=$PATH:`pwd`/casperjs/bin
+   - phantomjs --version; casperjs --version
 script:
   - "npm test"
+  - "npm run-script uitest"

Gruntfile.js

@@ -8,6 +8,19 @@ module.exports = function(grunt) {
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
 
+    casper: {
+      options : {
+        test : true,
+      },
+      runtests : {
+        src: ['tests/ui/test-*.js'],
+      }
+    },
+
+    clean: {
+      uitest: ['test/captures']
+    },
+
     jshint: {
       options: {
         jshintrc: __dirname + '/.jshintrc'
@@ -79,6 +92,14 @@ module.exports = function(grunt) {
           script: 'styleguide/index.js',
           background: true,
           port: config.styleguide.port,
+          debug: false,
+        }
+      },
+      test: {
+        options: {
+          script: 'server/index.js',
+          background: true,
+          port: config.uitest.port,
           debug: false
         }
       }
@@ -90,10 +111,10 @@ module.exports = function(grunt) {
     connect: {
       tests: {
         options: {
-          base: ['tests', 'public'],
-          directory: 'tests',
+          base: ['tests/unit', 'public'],
+          directory: 'tests/unit',
           hostname: '*',
-          port: config.testsPort,
+          port: config.test.port,
         }
       }
     },
@@ -164,7 +185,7 @@ module.exports = function(grunt) {
 
     shell: {
       rununittests: {
-        command: 'mocha-phantomjs http://localhost:' + config.testsPort,
+        command: 'mocha-phantomjs http://localhost:' + config.test.port,
         options: {
           stderr: true,
           stdout: true,
@@ -217,10 +238,13 @@ module.exports = function(grunt) {
     },
   });
 
+
   // Always show stack traces when Grunt prints out an uncaught exception.
   grunt.option('stack', true);
 
   grunt.loadNpmTasks('grunt-bower-task');
+  grunt.loadNpmTasks('grunt-casper');
+  grunt.loadNpmTasks('grunt-contrib-clean');
   grunt.loadNpmTasks('grunt-contrib-connect');
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-contrib-stylus');
@@ -237,4 +261,5 @@ module.exports = function(grunt) {
 
   grunt.registerTask('testserver', ['jshint', 'stylus', 'nunjucks', 'connect:tests:keepalive']);
   grunt.registerTask('test', ['jshint', 'stylus', 'nunjucks', 'connect:tests', 'shell:rununittests']);
+  grunt.registerTask('uitest', ['stylus', 'clean:uitest', 'express:test', 'casper']);
 };

config/default.js

@@ -1,9 +1,16 @@
 module.exports = {
   port: 7777,
   liveReloadPort: 35729,
-  testsPort: 7778,
   styleguide: {
     port: 7779,
-    liveReloadPort: 35729
+    liveReloadPort: 35729,
+  },
+  // Unittests.
+  test: {
+    port: 7778,
+  },
+  // UI tests (casper).
+  uitest: {
+    port: 7776,
   }
 };

package.json

@@ -21,10 +21,13 @@
     "mocha-phantomjs": "~3.3.2",
     "nunjucks": "~1.0.1",
     "underscore": "~1.6.0",
-    "js-beautify": "^1.4.2"
+    "js-beautify": "^1.4.2",
+    "grunt-casper": "^0.3.2",
+    "grunt-contrib-clean": "^0.5.0"
   },
   "scripts": {
-    "test": "node -e \"require('grunt').cli()\" null test"
+    "test": "node -e \"require('grunt').cli()\" null test",
+    "uitest": "node -e \"require('grunt').cli()\" null uitest"
   },
   "repository": {
     "type": "git",

server/index.js

@@ -37,6 +37,8 @@ app.get('/', function (req, res) {
   res.render('index.html');
 });
 
-http.createServer(app).listen(config.port, function() {
-  console.log('Listening on port: ' + config.port);
+var port = process.env.PORT || config.port;
+
+http.createServer(app).listen(port, function() {
+  console.log('listening on port: ' + port);
 });

tests/helpers.js

@@ -0,0 +1,37 @@
+var config = require('../config');
+var _currTestId;
+
+function makeToken() {
+  // Return a random ascii string.
+  return Math.random().toString(36).slice(2);
+}
+
+casper.on('started', function() {
+  _currTestId = makeToken();
+  casper.echo('starting test');
+});
+
+
+casper.on('waitFor.timeout', function() {
+  var file = 'captures/timeout-' + _currTestId + '.png';
+  casper.echo('timeout screenshot at ' + file);
+  casper.capture(file);
+});
+
+
+casper.test.on('fail', function() {
+  var file = 'captures/fail-' + _currTestId + '.png';
+  casper.echo('Failed test screenshot at ' + file);
+  casper.capture(file);
+});
+
+
+if (config.showClientConsole === true) {
+  casper.on('remote.message', function(message) {
+    casper.echo('client console: ' + message, 'INFO');
+  });
+}
+
+exports.startCasper = function startCasper(path) {
+  casper.start('http://localhost:' + config.uitest.port + path);
+};

tests/ui/test-basic.js

@@ -0,0 +1,18 @@
+var helpers = require('../helpers');
+
+helpers.startCasper('/');
+
+casper.test.begin('Basic test', {
+
+  test: function(test) {
+
+    // Run the tests.
+    casper.waitForSelector('#app', function then() {
+      test.assertEqual(1, 1);
+    });
+
+    casper.run(function() {
+      test.done();
+    });
+  },
+});

tests/unit/testrunner.js

@@ -0,0 +1,50 @@
+
+require.config({
+  baseUrl: 'js',
+  paths : {
+    'backbone': '../../lib/js/backbone/backbone',
+    'chai': '../../lib/js/chai/chai',
+    'gobbledygook': '../../lib/js/gobbledygook/gobbledygook',
+    'i18n-abide-utils': '../../lib/js/i18n-abide-utils/i18n-abide-utils',
+    'jquery': '../../lib/js/jquery/jquery',
+    'mocha': '../../lib/js/mocha/mocha',
+    'nunjucks': '../../lib/js/nunjucks/nunjucks-slim',
+    'require': '../../lib/js/requirejs/require',
+    'underscore': '../../lib/js/underscore/underscore',
+  },
+  shim : {
+    'jquery': {
+      exports: '$'
+    },
+    'underscore': {
+      exports: '_'
+    },
+    'backbone': {
+      deps: ['underscore'],
+      exports: 'Backbone'
+    },
+  }
+});
+
+
+require([
+  'require',
+  'chai',
+  'mocha',
+  'app',
+], function(require){
+
+  mocha.setup('tdd');
+
+  require([
+    'test-base-view.js',
+    'test-utils.js'
+  ], function() {
+    if (window.mochaPhantomJS) {
+      window.mochaPhantomJS.run();
+    } else {
+      window.mocha.run();
+    }
+  });
+
+});