How can I setup in-browser tests using grunt?

Question

I am a newbie to grunt. I am using the a version of yeoman webapp generator (which I would like to fork when I get this right). It seems to serve website and run mocha tests correctly, but having trouble with livereload.

What I would like to do is have it run mocha tests in browser, so I can use console debugging and/or richer output formats. I have set up a test:browser task in grunt:

grunt.registerTask('test', function( target ) { 
    var tasks;
    if ( target === 'browser' ) {
        tasks = [
            'clean:server',
            'concurrent:test',
            'autoprefixer',
            'connect:livereload_test',
            'watch' ];
    } else {
        tasks = [
            'clean:server',
            'concurrent:test',
            'autoprefixer',
            'connect:test',
            'mocha' 
        ];
    }
    grunt.task.run( tasks );
});

Have added "connect:livereload_test" and modified "watch:livereload":

        livereload_test: {
            options: {
                open: 'test/index.html',
                base: [
                    '.tmp',
                    '.',
                    '<%= yeoman.app %>'
                ]
            }
        },

and:

        livereload: {
            options: {
                livereload: '<%= connect.options.livereload %>'
            },
            files: [
                '{<%= yeoman.app %>,test}/*.html',
                '.tmp/styles/{,*/}*.css',
                '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
                'test/*.js',
                'test/spec/{,*/}*.js',
                '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
                'test/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
            ]
        }

respectively. Seems to serve test/index.html successfully. However, when I modify a test/spec/test.js to change test description (for example), it notices the change, but the test results don't reflect the change. I assume that there is some grunt code I've missed, but what could it be?

Update: I was missing ""... however, when I do put that in I get "snap" error in Chrome. (v 30.0.1599.101 mac os 10.7) ... this could be a chrome error.... Indeed it works in safari... sigh -- I'll put in a chrome tag I guess... — shaunc, Nov 15 '13 at 02:21

score 1 · Accepted Answer · answered Nov 16 '13 at 06:45

We have implemented mocha tests runs in browser with livereload in generator-backbone.

The livereload snippet is generated by connect-livereload.

var LIVERELOAD_PORT = 35729;
var SERVER_PORT = 9000;
var lrSnippet = require('connect-livereload')({port: LIVERELOAD_PORT});

But require('connect-livereload') alone won't insert into index.html, you need to specify it in the connect:test

    livereload: {
        options: {
            middleware: function (connect) {
                return [
                    lrSnippet,
                    mountFolder(connect, '.tmp'),
                    mountFolder(connect, yeomanConfig.app)
                ];
            }
        }
    },
    test: {
        options: {
            port: 9001,
            middleware: function (connect) {
                return [
                    lrSnippet,
                    mountFolder(connect, '.tmp'),
                    mountFolder(connect, 'test'),
                    mountFolder(connect, yeomanConfig.app)
                ];
            }
        }
    },

Check the lrSnippet in the middleware.

Then we need to specify the task, in generator-backbone we have grunt test:server. (source)

if (target === 'test') {
    return grunt.task.run([
        'clean:server',
        'coffee',
        'createDefaultTemplate',
        'jst',
        'compass:server',
        'connect:test',
        'watch:livereload'
    ]);
}

You can find our discussions on the same on yeoman/generator-backbone/issues. My initial workaround for the same is available as gist, if you want to take a look.

Hope that helps you.

How can I setup in-browser tests using grunt?

1 Answers1