diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 0f68a840..3140054e 100644
--- a/CONTRIBUTING.md
+++ b/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`.
diff --git a/Gruntfile.js b/Gruntfile.js
index dc70199d..51a6a1d3 100644
--- a/Gruntfile.js
+++ b/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);
+ });
+ });
};
diff --git a/css/hopscotch-0.1.1.min.css b/css/hopscotch-0.1.1.min.css
index 974463e7..8176cdb0 100644
--- a/css/hopscotch-0.1.1.min.css
+++ b/css/hopscotch-0.1.1.min.css
@@ -1,4 +1,4 @@
-/**!
+/*!
*
* Copyright 2013 LinkedIn Corp. All rights reserved.
*
diff --git a/package.json b/package.json
index ec92d1db..83b90e14 100644
--- a/package.json
+++ b/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"
}
}
diff --git a/test/index.html b/test/index.html
index 496e84a8..5aba020d 100644
--- a/test/index.html
+++ b/test/index.html
@@ -21,13 +21,20 @@
-
-
+
+