Recently, I wanted to add test coverage to Halloween Bash<\/a> and keep using it in the browser. This doesn’t seem to be an\u00a0unreasonable request, but it turns out that it involves many things. You have many choices of test runners & testing frameworks, and I didn’t want to setup a\u00a0[cci]SpecRunner.html[\/cci] to unit test my JS.<\/p>\n The setup that I ended up using is:<\/p>\n What you’ll need:<\/p>\n Try out the demo app that squares your input<\/a>.<\/p>\n With my demo, my file structure looks like:<\/p>\n There are countless ways to organize your non-html assets, and my demo asset structure is intended to be\u00a0easy to follow.<\/p>\n My demo contains jquery and two unit testable lib functions (multiply & square):<\/p>\n Once NodeJS is installed on your machine, setup your node environment:<\/p>\n The [cci]npm init[\/cci] command will walk you through your project, ask you a series of questions, and setup your configuration in [cci]package.json[\/cci].<\/p>\n Next, setup\u00a0Gulp<\/a>\u00a0via npm on your command line:<\/p>\n You now have Node & Gulp setup to run your Gulp tasks. The default Gulp task doesn’t do anything, but you can try it out by running [cci]gulp[\/cci].<\/p>\n Save gulp-jasmine into your gulpfile.js:<\/p>\n Create your tests:<\/p>\n [cci]assets\/js\/spec\/lib\/multiply-spec.js[\/cci] will contain:<\/p>\n [cci]assets\/js\/spec\/lib\/square-spec.js[\/cci] will contain:<\/p>\n Next, we’re going to move the unit testable functions (multiply & square) into\u00a0node.js-style modules.<\/p>\n [cci]assets\/js\/lib\/multiply.js[\/cci] will contain:<\/p>\n [cci]assets\/js\/lib\/square.js[\/cci] will contain:<\/p>\n Update\u00a0your\u00a0[cci]gulpfile.js[\/cci]\u00a0to run the tests:<\/p>\n You’ve created your libs (multiply & square), the lib specs (multiply-spec.js & square-spec.js), and setup Gulp to run your tests with Jasmine.<\/p>\n [cci]square.js[\/cci] is setup to use the\u00a0[cci]multiply.js[\/cci] lib through the Node require module syntax. Woot!<\/p>\n You can run the default task, which is setup to run your specs task. It should look like:<\/p>\n Great! Your modules are unit tested (feel free to add more tests), and you want to use them in the browser.<\/p>\n Up to this point, we’ve been using\u00a0jQuery through our local file at [cci]\/assets\/js\/jquery-1.10.2.min.js[\/cci]. We’ll want to get rid of managing\u00a0jQuery ourselves\u00a0and let Node manage our jQuery\u00a0dependency.<\/p>\n Let’s create a new file for our page’s JS to organize itself around:<\/p>\n Add jQuery to your dependencies and remove your local copy of jQuery:<\/p>\n [cci]assets\/js\/app.js[\/cci] will contain:<\/p>\n Now we need to use Browserify to build our JS file with gulp.<\/p>\n Add Browserify related dependencies into your gulpfile and setup your new task:<\/p>\n Update your [cci]gulpfile.js[\/cci] to include the new browserify task:<\/p>\n You’ll notice that we did a few things: declare new modules at the top through [cci]require[\/cci], add a new gulp task called [cci]scripts[\/cci], and update the default task to run our JS specs & scripts tasks.<\/p>\n At [cci]public\/all.min.js[\/cci], your new JS is ready to use in your browser.<\/p>\n Let’s remove the old file and update our [cci]index.html[\/cci] to use our new minified JS:<\/p>\n Remove the following lines from [cci]index.html[\/cci]:<\/p>\n Add the following line into [cci]index.html[\/cci]:<\/p>\n Voila! Open up [cci]index.html[\/cci] in your browser and your [cci]square()[\/cci] function is working again.<\/p>\n GulpJS is an amazing tool to run tasks, and the Gulp streaming build system\u00a0is very easy to read and understand.<\/p>\n There are countless tasks that you can setup on Gulp to lint your JS,\u00a0compile your sass, etc. Livereload<\/a> is useful for front end development.<\/p>\n\n
\n
index.html\r\nassets\/js\r\nassets\/css\r\n<\/pre>\n
\/\/ define multiply()\r\nwindow.unitTestJsDemo.multiply = function(x, y) {\r\n return x*y;\r\n};\r\n\r\n\/\/ define square()\r\nwindow.unitTestJsDemo.square = function(x) {\r\n return unitTestJsDemo.multiply(x, x);\r\n};\r\n<\/pre>\nSetup NodeJS & GulpJS<\/h1>\n
npm init<\/pre>\n
\/\/ Install gulp globally\r\nnpm install -g gulp\r\n\r\n\/\/ Install gulp in your project devDependencies\r\nnpm install --save-dev gulp\r\n\r\n\/\/ Create a gulpfile.js at the root of your project\r\ntouch gulpfile.js\r\n\r\n\/\/ gulpfile.js file contents\r\n var gulp = require('gulp');\r\n\r\n gulp.task('default', function() {\r\n \/\/ place code for your default task here\r\n }); \r\n\r\n\/\/ Run gulp default task\r\ngulp\r\n<\/pre>\nSetup gulp-jasmine<\/h1>\n
npm install --save-dev gulp-jasmine\r\n<\/pre>\n
mkdir -p assets\/js\/spec\/lib\r\ntouch assets\/js\/spec\/lib\/multiply-spec.js\r\ntouch assets\/js\/spec\/lib\/square-spec.js\r\n<\/pre>\n
\/* jslint node: true *\/\r\n\/* global describe, it, expect *\/\r\n\r\n\"use strict\";\r\n\r\nvar multiply_lib = require('..\/..\/lib\/multiply');\r\n\r\ndescribe(\"#multiply\", function () {\r\n it(\"returns the correct multiplied value\", function () {\r\n var product = multiply_lib.multiply(2, 3);\r\n expect(product).toBe(6);\r\n });\r\n});\r\n<\/pre>\n\/* jslint node: true *\/\r\n\/* global describe, it, expect *\/\r\n\r\n\"use strict\";\r\n\r\nvar square_lib = require('..\/..\/lib\/square');\r\n\r\ndescribe(\"#square\", function () {\r\n it(\"returns the correct squared value\", function () {\r\n var squared = square_lib.square(3);\r\n expect(squared).toBe(9);\r\n });\r\n});<\/pre>\nmkdir assets\/js\/lib\r\ntouch assets\/js\/lib\/square.js\r\ntouch assets\/js\/lib\/multiply.js\r\n<\/pre>\n
exports.multiply = function(x, y) {\r\n\r\n \"use strict\";\r\n\r\n return x*y;\r\n};<\/pre>\nvar multiply_lib = require('.\/multiply');\r\n\r\nexports.square = function(x) {\r\n\r\n \"use strict\";\r\n\r\n return multiply_lib.multiply(x, x);\r\n};<\/pre>\n\"use strict\";\r\n\r\n\/\/ Include gulp\r\nvar gulp = require('gulp');\r\n\r\n\/\/ Include plugins\r\nvar jasmine = require('gulp-jasmine');\r\n\r\n\/\/ Test JS\r\ngulp.task('specs', function () {\r\n return gulp.src('assets\/js\/spec\/lib\/*.js')\r\n .pipe(jasmine());\r\n});\r\n\r\n\/\/ Default Task\r\ngulp.task('default', function() {\r\n \/\/ place code for your default task here\r\n});\r\n\r\ngulp.task('default', ['specs']);\r\n\r\n<\/pre>\n$ gulp\r\n[16:29:18] Using gulpfile your\/path\/unit-test-js-demo\/gulpfile.js\r\n[16:29:18] Starting 'specs'...\r\n[16:29:18] Finished 'specs' after 44 ms\r\n[16:29:18] Starting 'default'...\r\n[16:29:18] Finished 'default' after 20 \u03bcs\r\n..\r\n\r\nFinished in 0.008 seconds\r\n2 tests, 2 assertions, 0 failures<\/pre>\n
Browserify your JS<\/h1>\n
touch assets\/js\/app.js<\/pre>\n
npm install --save-dev jquery\r\nrm assets\/js\/jquery-1.10.2.min.js<\/pre>\n
var $ = require('jquery');\r\nvar square_lib = require('.\/lib\/square');\r\n\r\n$(function() {\r\n\r\n \"use strict\";\r\n\r\n $(\"#squareValue\").change(function() {\r\n var $this = $(this),\r\n squareValue = $this.val(),\r\n squareResult;\r\n\r\n \/\/ if squareValue is not numeric\r\n if (isNaN(squareValue)) {\r\n\r\n $(\"#squareResult\").html('N\/A');\r\n return false;\r\n\r\n \/\/ else squareValue is numeric\r\n } else {\r\n\r\n squareResult = square_lib.square(squareValue);\r\n $(\"#squareResult\").html(squareResult);\r\n return true;\r\n }\r\n });\r\n\r\n});<\/pre>\nnpm install --save-dev gulp-uglify\r\nnpm install --save-dev vinyl-source-stream\r\nnpm install --save-dev gulp-streamify\r\nnpm install --save-dev browserify<\/pre>\n
\"use strict\";\r\n\r\n\/\/ Include gulp\r\nvar gulp = require('gulp');\r\n\r\n\/\/ Include plugins\r\nvar jasmine = require('gulp-jasmine');\r\nvar uglify = require('gulp-uglify');\r\nvar source = require('vinyl-source-stream'); \/\/ makes browserify bundle compatible with gulp\r\nvar streamify = require('gulp-streamify');\r\nvar browserify = require('browserify');\r\n\r\n\/\/ Test JS\r\ngulp.task('specs', function () {\r\n return gulp.src('assets\/js\/spec\/lib\/*.js')\r\n .pipe(jasmine());\r\n});\r\n\r\n\/\/ Concatenate, Browserify & Minify JS\r\ngulp.task('scripts', function() {\r\n return browserify('.\/assets\/js\/app.js').bundle()\r\n .pipe(source('all.min.js'))\r\n .pipe(streamify(uglify()))\r\n .pipe(gulp.dest('.\/public\/'));\r\n});\r\n\r\n\/\/ Default Task\r\ngulp.task('default', function() {\r\n \/\/ place code for your default task here\r\n});\r\n\r\ngulp.task('default', ['specs', 'scripts']);<\/pre>\nrm assets\/js\/main.js \r\n<\/pre>\n
< script src=\"assets\/js\/jquery-1.10.2.min.js\">\r\n< script src=\"assets\/js\/main.js\"><\/pre>\n
< script src=\"public\/all.min.js\"><\/pre>\n
Conclusion<\/h1>\n