使用 Karma 将测试输出到浏览器答案

【问题标题】：Output tests to browser with Karma使用 Karma 将测试输出到浏览器
【发布时间】：2013-09-11 12:48:01
【问题描述】：

我正在使用 Karma 测试我的项目，并且可以在控制台窗口中看到测试通过失败，但是，如何让这些在浏览器中显示？浏览器只有一个带有

的绿条（即使测试失败）

Karma v0.10.2 - 已连接

写在里面。

我已经尝试将 singleRun :false 添加到 karma.config.js 文件中。

配置文件如下所示：

module.exports = function (config) {
    config.set({
        basePath: '../',

        files: [
            'app/lib/angular/angular.js',
            'app/lib/angular/angular-*.js',
            'test/lib/angular/angular-mocks.js',
            'app/js/**/*.js',
            'test/unit/**/*.js'
        ],

        autoWatch: true,
        singleRun: false,
        frameworks: ['jasmine'],

        browsers: ['Chrome'],

        plugins: [
            'karma-junit-reporter',
            'karma-chrome-launcher',
            'karma-firefox-launcher',
            'karma-jasmine'
        ],

        junitReporter: {
            outputFile: 'test_out/unit.xml',
            suite: 'unit'
        }

    })
}

【问题讨论】：

标签： javascript testing karma-runner

【解决方案1】：

matthias-schuetz 写了一个插件，声称可以产生 html 测试输出。

https://npmjs.org/package/karma-htmlfile-reporter

除了插件页面上的说明外，我还必须在 Karma 配置中包含对插件的引用 -

plugins: [
'karma-htmlfile-reporter'
]

【讨论】：

似乎有一个插件属性覆盖 devDependencies 的错误。一旦我将所有依赖项添加到插件属性（'karma-jasmine' 和 'karma-chrome-launcher'），我在启动时就停止了错误，但结果与没有插件的 karma 一致。
我在插件方面也遇到了一些问题 - Jasmine 框架没有提供者 - 一旦我注释掉插件条目它就可以工作
这只会将结果输出到文件中，而不是输出到运行测试的窗口中。

【解决方案2】：

根据Documention，虽然不是很完美：

如果 'singleRun' 为 false，它将设置 ci-mode，因此，将其设置为 true，您将在浏览器的顶部栏看到一些失败的红色状态。

【讨论】：

【解决方案3】：

使用 Karma 没有直接的方法可以做到这一点。解决这个问题的“最佳”方法是蹲下来为 karma 编写一个 html-reporter（这会让我们很多其他 Karma 用户非常高兴）。

如果这对您来说工作量太大，那么第二好的方法是使用生成 xml 文件的 junit 报告器。然后，您可以以某种方式对 xml 文件进行后处理，将其转换为 HTML 文件，然后您可以在浏览器中查看该文件

【讨论】：

我最近在 npm 上发布了karma-code-reporter。如果有人会测试它，我会很高兴:)

【解决方案4】：

我想在 Karma 中显示 HTML5 Web Notifications，所以我快速写了一些东西来让它与 Karma 0.11 版一起使用。可能与其他版本略有不同。我将此脚本与我的其余应用程序脚本一起加载，它将存储业力测试结果，完成后它将确定测试是否成功，然后重置为原始业力函数，因此当此脚本运行时它们不会更改再次。

// store all my test results
var results = [];
// Wrap the karma result function
var resultFunc = window.__karma__.result;
window.__karma__.result = function(result){
    // run the original function
    resultFunc(result);
    // push each result on my storage array
    results.push(result);
}

// wrap the karma complete function
var completeFunc = window.__karma__.complete;
window.__karma__.complete = function(result){
    // run the original function
    completeFunc(result);
    // determine success
    var success = results.every(function(r){ return r.success });

    if (success) {
        // display a success notification
    }
    else {
        // display a test failure notification
    }

    // reset the result function
    window.__karma__.result = resultFunc;
    // reset the complete function
    window.__karma__.complete = completeFunc;
}

【讨论】：