如何使用grunt設置瀏覽器內測試？

Question

我是個新手。 我正在使用yeoman webapp生成器的版本 （當我理解正確時，我想對其進行分叉）。 它似乎可以為網站提供服務並正確運行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來更改測試描述（例如）時，它會注意到更改，但是測試結果無法反映更改。 我以為我錯過了一些咕unt的代碼，但是可能是什么呢？

Answer 1

我們已經在generator-backbone中的 livereload中實現了在瀏覽器中運行的mocha測試。

livereload代碼片段由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)
                ];
            }
        }
    },

檢查中間件中的lrSnippet 。

然后我們需要指定任務，在generator-backbone中，我們有grunt test:server 。 （ 來源 ）

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

您可以在yeoman / generator-backbone / issues上找到我們的討論。 如果您想看一看，我最初的解決方法可與gist一起使用。

希望對您有幫助。