如何使用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?

Answer 1

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.