如何使用 grunt 设置浏览器内测试？答案

【问题标题】：How can I setup in-browser tests using grunt?如何使用 grunt 设置浏览器内测试？
【发布时间】：2013-11-16 14:45:10
【问题描述】：

我是个咕噜咕噜的新手。我正在使用a version of yeoman webapp generator（当我做对时我想分叉）。它似乎可以正确地为网站提供服务并运行 mocha 测试，但 livereload 有问题。

我想做的是让它在浏览器中运行 mocha 测试，这样我就可以使用控制台调试和/或更丰富的输出格式。我在 grunt 中设置了一个 test:browser 任务：

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 );
});

已添加“connect:livereload_test”并修改“watch:livereload”：

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

和：

        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}'
            ]
        }

分别。似乎成功地提供了 test/index.html 。但是，当我修改 test/spec/test.js 以更改测试描述（例如）时，它会注意到更改，但测试结果并未反映更改。我假设我遗漏了一些笨拙的代码，但它可能是什么？

【问题讨论】：

更新：我错过了“”...但是，当我把它放进去时，我得到了“snap “ Chrome 中的错误。（v 30.0.1599.101 mac os 10.7）...这可能是 chrome 错误...确实它在 safari 中有效...叹息-我猜我会放一个 chrome 标签...

标签： javascript google-chrome gruntjs mocha.js grunt-contrib-watch

【解决方案1】：

我们已经在 generator-backbone 中使用 livereload 实现了 mocha 测试在浏览器中运行。

livereload sn-p 由connect-livereload生成。

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

但 require('connect-livereload') 单独不会插入到 index.html 中，您需要在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)
                ];
            }
        }
    },

检查middleware 中的lrSnippet。

然后我们需要指定任务，在 generator-backbone 我们有grunt test:server。 (source)

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

您可以在yeoman/generator-backbone/issues 上找到我们对此的讨论。我最初的解决方法是gist，如果你想看看的话。

希望对你有所帮助。

【讨论】：