add CLI testing, add tests to grunt

CONTRIBUTING.md

@@ -3,9 +3,6 @@ Developing
 
 Javascript
 ----------
-
-All code is contained in hopscotch-X.X.X.js, where X.X.X denotes the version number.
-
 * `Hopscotch` - controls tour state and contains the exposed API methods such as `startTour()`, `endTour()`, `showStep()`, and so on. You can think of it as the controller.
 * `HopscotchBubble` - represents the tour step callout bubble that appears next to target elements. It is responsible for rendering, updating step content, and setting its position. You can think of it as the view.
 * `HopscotchCalloutManager` - manages the creation and destruction of single callouts.
@@ -22,16 +19,8 @@ CSS is compiled using [LESS](http://lesscss.org/).
 
 Compiling
 =========
-Use the [Google Closure Compiler](https://developers.google.com/closure/compiler/) to compile hopscotch-X.X.X.js to hopscotch-X.X.X.min.js.
-
-    java -jar /path/to/compiler-latest/compiler.jar --js=js/hopscotch-X.X.X.js --js_output_file=js/hopscotch-X.X.X.min.js
-
-Use the [Less Compiler](http://lesscss.org/) to compile the CSS.
-
-    lessc -x less/hopscotch.less > css/hopscotch.css
+Hopscotch uses Grunt for minification and hinting. Make sure you have [`npm`](https//npmjs.org) installed. Run `npm install` from the hopscotch directory to load in the dev dependencies, then run `grunt`.
 
 Testing
 =======
-Tests are written using [Mocha](http://visionmedia.github.io/mocha/) and executed in a browser environment. Open test/index.html to run. The test suite is contained in test.hopscotch.js. Please add tests for any new functionality you introduce.
-
-Eventually I will look at [mocha-phantomjs](https://github.com/metaskills/mocha-phantomjs) to see if it is suitable for running tests from CLI.
+Hopscotch tests are written using the [Mocha testing framework](http://visionmedia.github.io/mocha/). The tests can be run either in the browser or via the command line. To run the tests in the browser, simply open up test/index.html. To run the tests in the command line, you can run `grunt test`.

Gruntfile.js

@@ -62,13 +62,38 @@ module.exports = function(grunt) {
           'css/hopscotch-<%= pkg.version %>.min.css': 'less/hopscotch.less'
         }
       }
+    },
+    shell: {
+      'mocha-phantomjs': {
+        command: 'mocha-phantomjs test/index.html',
+        options: {
+          stdout: true,
+          stderr: true
+        }
+      }
+    },
+    watch: {
+      jsFiles: {
+        files: ['js/*.js'],
+        tasks: ['shell:mocha-phantomjs', 'jshint:hopscotch']
+      }
     }
   });
 
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-less');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-shell');
 
   // Default task(s).
-  grunt.registerTask('default', ['jshint', 'uglify', 'less']);
+  grunt.registerTask('default', ['jshint', 'uglify', 'less', 'shell']);
+  // Aliasing 'test' task to run Mocha tests
+  grunt.registerTask('test', 'run mocha-phantomjs', function() {
+    var done = this.async();
+    require('child_process').exec('mocha-phantomjs ./test/index.html', function (err, stdout) {
+      grunt.log.write(stdout);
+      done(err);
+    });
+  });
 };

package.json

@@ -25,6 +25,9 @@
     "uglify-js": "~2.3.6",
     "grunt-contrib-uglify": "~0.2.2",
     "grunt-contrib-less": "~0.6.4",
-    "grunt-contrib-jshint": "~0.6.0"
+    "grunt-contrib-jshint": "~0.6.0",
+    "mocha-phantomjs": "~3.1.0",
+    "grunt-shell": "~0.3.1",
+    "grunt-contrib-watch": "~0.5.1"
   }
 }

test/index.html

@@ -21,13 +21,20 @@
   <script src="../js/hopscotch-0.1.1.js"></script>
   <script src="js/jquery-1.7.2.js"></script>
   <script src="js/expect.js"></script>
-  <script src="js/mocha.js"></script>
-  <script>mocha.setup('bdd')</script>
+  <script src="../node_modules/mocha-phantomjs/node_modules/mocha/mocha.js"></script>
+  <script>
+    mocha.setup('bdd')
+  </script>
   <script src="js/test.hopscotch.js"></script>
   <script>
-    mocha.checkLeaks();
-    mocha.globals(['jQuery']);
-    mocha.run();
+    if (window.mochaPhantomJS) {
+      window.mochaPhantomJS.run();
+    }
+    else {
+      mocha.checkLeaks();
+      mocha.globals(['jQuery']);
+      mocha.run();
+    }
   </script>
 </body>
 </html>