Automatically run client-side mocha specs via grunt/mocha/PhantomJS

For a grunt task for server-side mocha tests, see https://github.com/yaymukund/grunt-simple-mocha

grunt-mocha

(package/README format heavily borrowed from grunt-jasmine-task and builtin QUnit task)

Grunt plugin for running Mocha browser specs in a headless browser (PhantomJS)

Getting Started

Task config

1mocha: {
2    // runs all html files (except test2.html) in the test dir
3    // In this example, there's only one, but you can add as many as
4    // you want. You can split them up into different groups here
5    // ex: admin: [ 'test/admin.html' ]
6    all: [ 'test/**/!(test2).html' ],
7    
8    // Runs 'test/test2.html' with specified mocha options.
9    // This variant auto-includes 'mocha-helper.js' so you do not have
10    // to include it in your HTML spec file. Instead, you must add an
11    // environment check before you run `mocha.run` in your HTML.
12    test2: {
13
14        // Test files
15        src: [ 'test/test2.html' ],
16
17        // mocha options
18        options: {
19            ignoreLeaks: false,
20            grep: 'food'
21        },
22
23        // Indicates whether 'mocha.run()' should be executed in 
24        // 'mocha-helper.js'
25        //
26        // NOTE: If you use AMD, you should not use this and just add a call to 
27        // `mocha.run` after you load the specs
28        run: true
29    }
30}

Vanilla JS

• Write mocha task description in grunt config using full format and specify run: true option (see example/grunt.js for details);
• Check for PhantomJS userAgent in a test html file and run tests only in a real browser (see example/test/test2.html for details).

In this case you shouldn't include mocha-helper.js (it will be included automatically) and tests will be run from mocha-helper.js.

Alternatively, include mocha-helper.js from tasks/mocha after you include mocha.js and run mocha.setup in your HTML file. The helper will override mocha.setup if it detects PhantomJS. See example/test/test.html.

AMD

Example setup with AMD (advanced): https://gist.github.com/2655876

Grunt and this plugin

First, make sure you have grunt installed globally, npm install grunt -g

Install this grunt plugin next to your project's grunt.js gruntfile with: npm install grunt-mocha

Then add this line to your project's grunt.js gruntfile at the bottom:

1grunt.loadNpmTasks('grunt-mocha');

Also add this to the grunt.initConfig object in the same file:

1mocha: {
2  index: ['specs/index.html']
3},

Replace specs/index.html with the location of your mocha spec running html file.

Now you can run the mocha task with grunt mocha, but it won't work. That's because you need...

PhantomJS

This task is for running Mocha tests in a headless browser, PhantomJS. See the FAQ on how to install PhantomJS.

Mocha

Use Mocha

Maybe Growl?

Growl support is optional. I'm not sure what the Windows situation is with growl.

Hacks

The PhantomJS -> Grunt superdimensional conduit uses alert. If you have disabled or aliased alert in your app, this won't work. I have conveniently set a global PHANTOMJS on window so you can conditionally override alert in your app.

License

Copyright (c) 2012 Kelly Miyashiro Licensed under the MIT license.