How can I get code coverage results in my Aurelia app using karma?

Question

I created an Aurelia app using the Aurelia CLI (au new) and would like to set up code coverage (preferably with karma-coverage, but if that's not possible I'll use whatever).

I first npm install karma-coverage --save-dev then copy the test.js task over to a cover.js (so that I can run au cover).

cover.js

import {Server as Karma} from 'karma';
import {CLIOptions} from 'aurelia-cli';
// import project from "../aurelia.json";

export function cover(done) {
  new Karma({
    // This is the same as what's in karma.conf.js after running
    // Except I added the 'src\\**\\*.js' part
    files: [
      'scripts\\vendor-bundle.js',
      {pattern: 'test\\unit\\**\\*.js', included: false},
      'test/aurelia-karma.js',
      'scripts\\app-bundle.js',
      'scripts\\materialize-bundle.js',
      {pattern: 'src\\**\\*.js', included: false}
    ],
    configFile: __dirname + '/../../karma.conf.js',
    singleRun: !CLIOptions.hasFlag('watch'),
    reporters: ['progress', 'coverage'],
    //logLevel: 'debug',
    preprocessors: {
      // [project.unitTestRunner.source]: [project.transpiler.id],  // Is this actually needed? Nothing changes if I add or remove this...
      'src/**/*.js': ['babel', 'coverage']
    },
    coverageReporter: {
      includeAllSources: true,
      reporters: [
        {type: 'html', dir: 'coverage'},
        {type: 'text'}
      ]
    }
  }, done).start();
}

export default cover;

This... gets me somewhere?

But I don't think the tests are being linked to the individual src files (they're instead being linked to app-bundle.js).

Is there any way to get code coverage at the src file level (i.e. not bundle level) for an Aurelia app?

Other Files of Interest

app.js

export class App {
  constructor() {
    this.message = 'Hello World!';
  }
}

karma.conf.js

"use strict";
const path = require('path');
const project = require('./aurelia_project/aurelia.json');

let testSrc = [
  { pattern: project.unitTestRunner.source, included: false },
  'test/aurelia-karma.js'
];

let output = project.platform.output;
let appSrc = project.build.bundles.map(x => path.join(output, x.name));
let entryIndex = appSrc.indexOf(path.join(output, project.build.loader.configTarget));
let entryBundle = appSrc.splice(entryIndex, 1)[0];
let files = [entryBundle].concat(testSrc).concat(appSrc); console.log(files);

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: [project.testFramework.id],
    files: files,
    exclude: [],
    preprocessors: {
      [project.unitTestRunner.source]: [project.transpiler.id]
    },
    'babelPreprocessor': { options: project.transpiler.options },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    // client.args must be a array of string.
    // Leave 'aurelia-root', project.paths.root in this order so we can find
    // the root of the aurelia project.
    client: {
      args: ['aurelia-root', project.paths.root]
    }
  });
};

Answer 1

在您的终端屏幕截图中，您似乎可以覆盖各个文件src/app.js（12.5％），src/environment.js（0％）和src/main.js（12.5％） ）除了捆绑文件。它与您添加的额外行有关，包括src/中的文件。

我怀疑如果你转到你的报道目录并在浏览器中查看，你会看到更详细的结果。

我不确定Aurelia应用程序，但要获得单独的文件覆盖率，您希望测试针对原始文件而不是捆绑版本运行，并且您希望将原始文件的相同路径运行到也是在预处理器中。

files: [
    ...
    'src/**/*.js',
    'path/to/tests/*.spec.js'
    ...
],
preprocessors: {
    'src/**/*.js': ['coverage']
}

这种模式（你已经完成）告诉Karma加载单个文件，并将它们包含在coverage中。此时，由于您已经加载了所有原始内容，因此我无需加载捆绑的应用程序代码。

还要确保按照他们可能捆绑的顺序加载它们，以便您可以确保Karma可以首先初始化应用程序。

files: [
    'src/app.js',
    'src/environment.js',
    'src/main.js'
]

如果您将名为myTest.spec.js的规范放在他们测试的文件旁边，您可以使用src/!(*.spec).js确保您在没有测试的情况下包含应用程序代码。

Answer 2

我终于让它工作了，但它需要很多引擎盖下的修改= \

首先我必须安装以下软件包

npm install karma-coverage --save-dev
npm install karma-requirejs --save-dev
npm install babel-plugin-istanbul --save-dev

aurelia_project /任务/ cover.js

这基于test.js。

• 将requirejs添加到frameworks列表中（来自 karma-requirejs 包）
• 添加单个src / test文件（包含included: false）以及test/aurelia-karma-cover.js，它可以显示测试文件的实际require。
• 将aurelia-karma.js修改为aurelia-karma-cover.js以不包含/test/unit/setup.js（它给我带来了 aurelia-browser-pal 依赖项的麻烦）
• 从src文件中删除"coverage"预处理（ babel-plugin-istanbul 现在将处理代码检测 - 请参阅最后的语句以获取详细信息。）

import {Server as Karma} from 'karma';
import {CLIOptions} from 'aurelia-cli';
import project from "../aurelia.json";

export function cover(done) {
  new Karma({
    configFile: __dirname + '/../../karma.conf.js',
    frameworks: [project.testFramework.id, 'requirejs'],
    files: [
      {pattern: 'src\\**\\*.js', included: false},
      {pattern: 'test\\unit\\**\\*.js', included: false},
      // This file actually loads the spec files via require - it's based on aurelia-karma.js
      // but removes setup.js and its dependencies
      'test/aurelia-karma-cover.js'
    ],
    exclude: [
      'src/environment.js',
      'src/main.js',
      'src/resources/index.js'
    ],
    preprocessors: {
      'src/**/*.js': ['babel'],
    },
    reporters: ['progress', 'coverage'],
    singleRun: !CLIOptions.hasFlag('watch'),
    coverageReporter: {
      includeAllSources: true,
      reporters: [
        {type: 'html', dir: 'coverage'},
        {type: 'text'}
      ]
    }
  }, done).start();
}

export default cover;

测试/单元/奥里利亚 - 卡玛cover.js

只需将var allTestFiles = ['/base/test/unit/setup.js'];更改为var allTestFiles = [];即可避免 aurelia-pal-browser 依赖项错误。

aurelia_project / aurelia.json

如果使用 babel-plugin-istanbul ，请将"istanbul"添加到transpiler.options.plugins列表。

*没有babel-plugin-istanbul，代码覆盖率适用于转换后的代码，这会增加无法真正测试的样板。这使您可以获得100％的代码覆盖率;）

Answer 3

@lebolo这些是为了让事情在这里工作所必须做的调整：

<强> aurelia_project /任务/ cover.js

在封面功能开头包含供应商路径的常量：

const VENDORS_PATH = __dirname + '/../../node_modules/';

使用VENDORS_PATH在文件中包含我依赖的库：

files: [
  {pattern: VENDORS_PATH + 'moment/min/moment.min.js', included: false},
  {pattern: 'src/**/*.js', included: false},
  {pattern: 'test/unit/**/*.js', included: false},
  'test/aurelia-karma-cover.js'
]

预处理器中包含的测试文件：

preprocessors: {
  'src/**/*.js': ['babel'],
  'test/unit/**/*.js': ['babel']
}

<强>测试/单元/奥里利亚 - 卡玛cover.js

更改requirejs.load函数中构建网址的方式：

url = '/base/' + url; =＆gt; url = ['/base', root, url].join('/');

还包含一个函数来配置requirejs路径并在patchRequireJS()调用后调用它：

  function configRequire() {
    var VENDORS_PATH = '../node_modules/';

    requirejs.config({
      paths: {
        'moment': VENDORS_PATH + 'moment/min/moment.min'
      }
    });
  }