如何使用angular2 + webpack设置karma-coverage？

我从棱角分明的快速启动webpack指南.但覆盖工具是空白的,不显示我的测试.谢谢!

我的文件夹结构是

project
|--src (project files)
|--tests (all my testfiles)

我的webpack.test.js看起来像这样

var helpers = require('./helpers');

module.exports = {
    devtool: 'inline-source-map',

    resolve: {
        extensions: ['', '.ts', '.js']
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['ts']
            },
            {
                test: /\.html$/,
                loader: 'null'

            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'null'
            },
            {
                test: /\.css$/,
                exclude: helpers.root('src', 'app'),
                loader: 'null'
            },
            {
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                loader: 'null'
            }
        ]
    }
}

我的Karma.conf.js

var webpackConfig = require('./webpack.test');

module.exports = …

我有Browserify,6to5ify和Karma玩得很好,成功运行我的规格.然而,当我添加代码覆盖时,事情就会发生变化.我尝试了几种方法:

• 将browserify-istanbul变换添加到我的karma.conf.js.但是,这会导致它尝试在我的spec文件上运行检测,它也会出现.
• coverage在我的源文件上运行预处理器.但是因为istanbul(偶数douglasduteil/karma-coverage#next)没有读取我的6to5ifybrowserify转换,所以它会在它尝试解析的第一个文件(因为该import语句)上立即崩溃,或者当我使用karma-coverage#next时,它不会尊重browser映射我的package.json(移动项目,将Backbone映射到Exoskeleton).

现在我karma.conf.js看起来像这样:

module.exports = function(karma){
  karma.set({
    frameworks: ["browserify", "mocha", "chai-sinon"],
    browserify: {
      debug: true,
      extensions: [".js", ".hbs"],
      transform: ["6to5ify", "hbsfy"]
    },
    reporters: ["dots", "osx", "junit", "coverage"],
    coverageReporter: {
      type: "text"
    },
    junitReporter: {
      outputFile: "spec/reports/test-results.xml"
    },
    preprocessors: {
      "src/javascript/**/*": ["coverage"],
      "spec/**/*": ["browserify"]
    },
    browsers: ["PhantomJS"],
    files: ["spec/unit/**/*Spec.js"],
    logLevel: "LOG_DEBUG",
    autoWatch: true
  });
};

我有点失去了如何让这一切都在一起工作.我尝试按照这些说明操作,但这不起作用,因为它没有跟随我的browser节点package.json.任何帮助将不胜感激.

ng test --code-coverage仅在运行覆盖率报告中报告正在进行测试的源文件的覆盖率时。如何配置检测以包含所有源文件（例如.ts文件src/app夹中的所有文件）？

我尝试过不同的事情：

• 在https://github.com/angular/angular-cli/issues/1735之后，我尝试替换建议的上下文定义。这在我的情况下根本不起作用。输出大量错误，不执行任何测试
• 删除 istanbul 作为依赖项并完全依赖 ，可以在karma-coverage其中进行配置includeAllSources: true- 但是 Angular CLI 不能在没有的情况下运行karma-coverage-istanbul-reporter
• 以上与karma-coverage-istanbul-reporter作为依赖项的组合 - 与原始设置没有区别

必须有某种方法来检测 Angular CLI 以包含所有源文件。添加空规范似乎乏味且容易出错，因为如果类/源文件未进行测试，则覆盖率根本不会显示，因此您必须手动检查它是否包含在覆盖率报告中。

任何建议表示赞赏！

各种资料：

ng --version

@angular/cli: 1.4.8
node: 6.11.3
os: linux x64
@angular/animations: 4.4.6
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.8
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4

包.json：

"devDependencies": {
    "@angular/cli": "1.4.8",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": …

我有一个+ 10K系列Backbone Marionette应用程序,我们正在通过Karma运行测试和覆盖.

我想包括所有来源,以便我们可以更好地了解我们的测试未涵盖的内容.

我一直includeAllSources在karma配置中传递选项,但我仍然没有看到karma显示所有文件的结果(报告只显示+ 3K行覆盖,或多或少我们知道我们测试的行数).

难道我做错了什么？还有其他方法可以包含所有来源吗？

有一个Karma插件能够处理这个,但插件不再工作(修改后使其运行,但结果仍然相同).

--include-all-sources从Karma运行时,有没有办法将选项传递给伊斯坦布尔？

我试图生成HTML覆盖率报告,但它不包含我期望的输出.也许我在这里错了,但它应该只显示从spec文件中调用的那些行和方法,对吧？

不知怎的,它没有.

更新:

我创建了一个存储库来提供一个工作示例,概述了问题:

https://github.com/gearsdigital/stunning-octo-train

这是我的(测试)项目设置.如果需要,我可以将它推送到GitHub仓库,因为我不知道如何设置JSFiddle来运行此代码.

TL; DR

有一个生成HTML覆盖率报告的过程.此报告显示所涵盖的代码,由于没有可用的测试,因此显然没有涵盖.

karma.conf.js:

var webpack = require('webpack');
var path = require('path');

// Reference webpack.config.js, don't repeat it!
var webpackConfig = require('./webpack.config.js');

// The entry point from the referenced Webpack configuration has to be
// removed or tests will fail in weird and inscrutable ways.
// Easy enough, just define an empty entry object (null won't work).
webpackConfig.entry = {};
webpackConfig.module = {
    preLoaders: [
        {
            test: /\.js$/,
            // files within these directories should …

我正在尝试使用覆盖(使用karma-coverage)和webpack(使用karma-webpack)运行单元测试.测试运行正常,但生成一个覆盖报告实际的源文件(未测试)需要通过加载并通过coverage和webpack预处理器.

不幸的是,这失败了以下错误:

ERROR [karma]: { [Error: no such file or directory]
  code: 'ENOENT',
  errno: 34,
  message: 'no such file or directory',
  path: '/_karma_webpack_/views/Foo/Foo.js' }
Error: no such file or directory

Foo.js是包含源的文件.目录结构是这样的:

karma.conf.js
  - src/
      - js/
        - views/
            - Foo/
                - Foo.js
                - test/
                    - FooTest.js

karma.conf.js:

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

    frameworks: ['jasmine'],

    files: [
      '**/test/*Test.js',
      '**/Foo.js',
    ],

    exclude: [],

    preprocessors: {
      '**/test/*Test.js': ['webpack'],
      '**/Foo.js': ['webpack', …

我有一个 Angular 应用程序，我正在尝试进行测试，但是找到需要覆盖的地方是一场噩梦。

输出显示如下：

=============================== Coverage summary ===============================      
Statements   : 91.67% ( 22/24 )
Branches     : 75% ( 3/4 )
Functions    : 75% ( 3/4 )
Lines        : 90.48% ( 19/21 )
================================================================================ 

有没有办法查看这些语句、分支、函数和行没有被覆盖的地方？

例如一些输出说

Statements:
1. file: some/file/name.js line:03
2. file: some/file/name.js line:06

那可能吗？

谢谢

问题：配置 karma 和声纳后，声纳覆盖范围为 0%。

Arch：应用程序使用Angular7和Node v8.14，集成的Sonarqube是最新版本，JDK是java 11。

问题描述：这些是我的本地环境，在我配置并运行覆盖范围和声纳之后，业力覆盖率为 35%，但在声纳中它仍然是 0%。

请看我的代码如下：

package.json:

  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test --code-coverage",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "sonar": "sonar-scanner"
  },
  "dependencies": {
     ...
     "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "puppeteer": "^2.0.1"
   },
  "devDependencies": {
     ...
     "sonarqube-scanner": "^2.6.0",
  }

sonar-project.properties:

sonar.projectKey=aaa
sonar.projectName=AAA
sonar.projectVersion=1.0.0
sonar.sources=src
sonar.sourceEncoding=UTF-8
sonar.test.reportPath=./test-results.xml
sonar.language=ts
sonar.exclusions=**/node_modules/**
sonar.tests=src
sonar.typescript.lcov.reportPaths=coverage/lcov.info
sonar.test.inclusions=**/*.spec.ts

karma.conf.js: …

我正在使用带有辅助入口点的角度库我的库文件夹结构是

• 我的图书馆
  • 次要切入点1
    • 服务1
  • 次要入口点 2
    • 服务2
  • 源代码

我用了这个命令ng test my-library --code-coverage

辅助入口点的服务测试不执行。

然后我尝试将 src 文件夹下的“test.ts”上下文路径（“./”）更改为“../”。测试已执行，但代码覆盖率未创建。

如何对辅助入口点执行测试？

我正在使用 Angular 6 和 karma 覆盖伊斯坦布尔记者来查看代码覆盖率。

它在代码覆盖率报告中仅显示 .ts 文件，这可能会产生误导，因为 HTML 模板也可以包含代码逻辑。

是否有将 HTML 代码包含到单元测试代码覆盖率中的方法？