关键词：
【中文标题】Angular4如何启用测试覆盖率【英文标题】：Angular4 how to enable test coverage 【发布时间】：2017-10-14 21:02:08 【问题描述】：我正在做一个 Angular4 项目。
我正在尝试设置代码覆盖率。我创建了一个非常简单的小应用程序。
我阅读了所有可能找到的页面，但我迷路了。
如何在 Angular4 中设置代码覆盖率？
更新 2： 我现在决定使用业力报道记者 https://www.npmjs.com/package/karma-coverage 因此根据描述修改了 karma conf 文件。
包 json 已更新为。
我现在看到正在生成的文件夹，但 HTML 文件显示一个空表，
测试正在运行并通过：
不知道从这里做什么。
这是我的 json 包。
"name": "angular2-webpack",
"version": "0.0.1",
"description": "A webpack starter for Angular",
"scripts":
"pretest": "npm run lint",
"start": "webpack-dev-server --inline --progress --port 8080",
"test": "karma start",
"build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
"lint": "tslint --force \"src/**/*.ts\""
,
"license": "MIT",
"dependencies":
"@angular/common": "4.1.2",
"@angular/compiler": "4.1.2",
"@angular/core": "4.1.2",
"@angular/forms": "4.1.2",
"@angular/http": "4.1.2",
"@angular/platform-browser": "4.1.2",
"@angular/platform-browser-dynamic": "4.1.2",
"@angular/router": "4.1.2",
"bootstrap": "^3.3.7",
"core-js": "2.4.1",
"es6-shim": "^0.35.3",
"jquery": "^3.2.0",
"reflect-metadata": "^0.1.10",
"rxjs": "^5.0.1",
"zone.js": "^0.8.10"
,
"devDependencies":
"@types/jasmine": "2.5.47",
"@types/node": "^7.0.18",
"angular2-template-loader": "^0.6.0",
"awesome-typescript-loader": "^3.0.4",
"css-loader": "^0.28.1",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.16.1",
"jasmine-core": "^2.4.1",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.1",
"lint": "^1.1.2",
"node-sass": "^4.5.0",
"null-loader": "^0.1.1",
"phantomjs-prebuilt": "^2.1.7",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.17.0",
"tslint": "^5.2.0",
"tslint-loader": "^3.5.3",
"typescript": "~2.3.2",
"webpack": "^2.2.1",
"webpack-dev-server": "2.4.5",
"webpack-merge": "^4.1.0"
接下来是我的 webpack 配置
var webpack = require('webpack');
var helpers = require('./helpers');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSass = new ExtractTextPlugin(
filename: "[name].[contenthash].css",
disable: process.env.NODE_ENV === "development"
);
module.exports =
devtool: 'inline-source-map',
resolve:
extensions: ['.ts', '.js']
,
module:
rules: [
test: /\.ts$/,
loaders: [
loader: 'awesome-typescript-loader',
options: configFileName: helpers.root('src', 'tsconfig.json')
, 'angular2-template-loader'
]
,
test: /\.html$/,
loader: 'html-loader'
,
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
,
test: /\.css$/,
exclude: helpers.root('src', 'app'),
loader: 'style-loader!css-loader?sourceMap'
,
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw-loader'
,
test: /\.scss$/,
exclude: helpers.root('src', 'app'),
use: extractSass.extract(
use: [
loader: "css-loader"
,
loader: "sass-loader"
],
// use style-loader in development
fallback: "style-loader"
)
,
test: /\.scss$/,
include: helpers.root('src', 'app'),
loader: 'raw-loader'
]
,
plugins: [
extractSass,
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
helpers.root('./src'), // location of your src
// a map of your routes
)
]
接下来是现在更新的 karma conf 文件：
var webpackConfig = require('./webpack.test');
var path = require('path');
var ENV = process.env.npm_lifecycle_event;
var isTestWatch = ENV === 'test-watch';
module.exports = function (config)
var _config =
basePath: './',
frameworks: ['jasmine'],
files: [
pattern: './config/karma-test-shim.js', watched: false,
'../src/**/*.js'
],
// list of files to exclude
exclude: [],
preprocessors:
'./config/karma-test-shim.js': ['webpack', 'sourcemap'],
'../src/**/*.js': ['coverage']
,
coverageReporter:
type : 'html',
dir : 'cover/'
,
webpack: webpackConfig,
webpackMiddleware:
stats: 'errors-only'
,
webpackServer:
noInfo: true
,
reporters: ['progress', 'mocha','coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: isTestWatch ? ['PhantomJS'] : ['PhantomJS'],
singleRun: true
;
config.set(_config);
;
完整的代码可以在这里找到
https://github.com/uweDuesing/angular2-webpack-template
【问题讨论】：
【参考方案1】：我不知道如何从头开始设置，但我可以告诉你，使用 angular-cli 生成的项目已经配置了代码覆盖插件。勾选https://github.com/angular/angular-cli/wiki/test，可以运行ng test -cc。
如果你想检查它是如何配置的，使用 angular-cli 生成一个项目并在根文件夹 ngject 上执行，这将允许你看到 webpack 配置文件。
【讨论】：
我完全放弃了这个故事。我现在正在使用 Angular CLI，它使使用 Angular2 变得容易上千倍。【参考方案2】：我在尝试让 angular4 cli 在ng eject 之后的设置中工作时遇到了类似的问题。在 package.json 和 karma.conf.js 中对我来说是几行简单的代码
也许这会帮助其他人从头开始或从ng eject 的角度来做。
我在 package.json 中添加了一个coverage 脚本
"test": "karma start ./karma.conf.js",
"coverage": "karma start --coverage true ./karma.conf.js",
然后对于业力配置，我必须为 client.args 添加一行并将 angularCli.codeCoverage 设置为我创建的变量 isCoverage，以便从 package.json 读取命令行选项。
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function (config)
const isCoverage = config.coverage || false;
console.log(`Generate Coverage Statistics?: $isCoverage`);
config.set(
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client:
clearContext: false, // leave Jasmine Spec Runner output visible in browser
args: ['--coverage', config.coverage]
,
files: [
pattern: './src/test.ts', watched: false
],
preprocessors:
'./src/test.ts': ['@angular/cli']
,
mime:
'text/x-typescript': ['ts','tsx']
,
coverageIstanbulReporter:
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
,
angularCli:
environment: 'dev',
codeCoverage: isCoverage
,
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'coverage-istanbul']
: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
);
;
【讨论】：
【参考方案3】：将 angularClt 添加到您的 karma.conf 文件中。 像这样的：
angularCli:
environment: 'dev',
codeCoverage: true
如果您想使用脚本命令 npm run test 为弹出的应用程序运行 codeCoverage，则 codeCoverage 是重要的部分
【讨论】：
【参考方案4】：我研究了各种文章，发现最简单的方法是：-
$ npm install karma karma-jasmine karma-chrome-launcher karma-jasmine-html-reporter karma-coverage-istanbul-reporter
$ ng test --code-coverage
确保安装了http-server (npm install http-server -g)，然后安装了$ http-server -c-1 -o -p 9875 ./coverage
只能在 chrome 浏览器中打开。
【讨论】：
如何使用 Angular 4 Jasmine 单元测试用例覆盖 IF/ELSE 条件
】如何使用Angular4Jasmine单元测试用例覆盖IF/ELSE条件【英文标题】：HowtocoverIF/ELSEconditionwithAngular4Jasmineunittestcase【发布时间】：2018-05-2419:55:23【问题描述】：帮助我覆盖IF/Else覆盖范围和返回HTTP响应的方法以及构造函数以覆盖Jasmin... 查看详情
如何在 Xcode 7 中使用代码覆盖率？
】如何在Xcode7中使用代码覆盖率？【英文标题】：HowtousecodecoverageinXcode7?【发布时间】：2015-06-2806:43:40【问题描述】：我知道Xcode7中的新功能-代码覆盖率。我知道如何打开它：转到编辑方案->测试->信息选项卡->启用收集覆... 查看详情
如何：获取代码覆盖率数据
...式衡量测试的有效性。可以通过配置测试运行以产生代码覆盖率数据来做到这一点。得到的数据显示在“代码覆盖率结果”窗口和源代码文件中。当对项目（通常为二进制文件）进行了检测，并在测试运行期间将其加载到了内存... 查看详情
如何在 gitlab.com 上的 PHP 项目的作业列表中启用代码覆盖率输出
】如何在gitlab.com上的PHP项目的作业列表中启用代码覆盖率输出【英文标题】：HowtoenablecodecoverageoutputinjoblistforPHPprojectongitlab.com【发布时间】：2017-11-2409:33:06【问题描述】：对于托管在https://www.gitlab.com的项目，我想在CI设置中设... 查看详情
在 Android Studio Gutter 中启用代码覆盖率指示
】在AndroidStudioGutter中启用代码覆盖率指示【英文标题】：EnablecodecoverageindicationinAndroidStudioGutter【发布时间】：2019-04-0306:38:34【问题描述】：当我在具有代码覆盖率的androidstudio中运行单元测试并选择从Coverage工具栏中查看源代码... 查看详情
什么可能导致启用代码覆盖的构建失败？
...:08【问题描述】：总结我正在尝试从我的项目中获取代码覆盖率报告。但是，当我尝试构建和运行测试时，派生数据文件夹中没有创建CodeCoverage文件夹。我该怎么做？我正在运行xcodebuild，如下所示：xcodebuild\\-workspace 查看详情
如何解释 Python coverage.py 分支覆盖结果？
...问题描述】：我正在使用coverage.py来衡量我的测试的代码覆盖率。我已启用分支覆盖，但我无法完全理解报告。没有分支覆盖，我得到100%的覆盖：NameStmtsMissCoverMissing----- 查看详情
Angular4 mat-form-field textArea 无法启用水平调整大小
】Angular4mat-form-fieldtextArea无法启用水平调整大小【英文标题】：Angular4mat-form-fieldtextAreacannotenablehorizontalresize【发布时间】：2019-04-2603:56:43【问题描述】：我正在尝试将mat-form-field组件与textarea一起使用，我希望能够在x和y上调整... 查看详情
如何在我的颤振测试中生成未测试文件的测试覆盖率？
】如何在我的颤振测试中生成未测试文件的测试覆盖率？【英文标题】：HowcanIgeneratetestcoverageofuntestedfilesonmyfluttertests?【发布时间】：2019-07-0307:28:12【问题描述】：我正在对我的应用程序进行小部件和单元测试，我根据basicguides... 查看详情
OpenCover - 如何查看每个测试的覆盖率？
】OpenCover-如何查看每个测试的覆盖率？【英文标题】：OpenCover-howtoviewcoveragepertest?【发布时间】：2012-03-1813:34:19【问题描述】：在OpenCovergithubpage上，我可以看到OpenCover支持测试覆盖（“版本3（测试支持覆盖，调试符号”）。问... 查看详情
如何保证测试的覆盖率
如何保证测试的覆盖率一、首先测试需求分析要全面。测试需求分析分两步：1、测试需求的获取需求的来源：显式需求：（1）原始需求说明书（2）产品规格书（3）软件需求文档（4）有无继承性文档（5）经验库（6）通用的协... 查看详情
如何使用邮递员测试获得代码覆盖率
】如何使用邮递员测试获得代码覆盖率【英文标题】：Howtogetcodecoverageusingpostmantest【发布时间】：2017-02-1314:49:08【问题描述】：我们在RestEasy中创建了REST服务并在Wildfly服务器中运行。我们正在运行Postman测试用例来测试RestURL。当... 查看详情
如何在测试 React.js App 时从 Jest 获得测试覆盖率？
】如何在测试React.jsApp时从Jest获得测试覆盖率？【英文标题】：HowtogettestcoveragefromJestwhiletestingReact.jsApp?【发布时间】：2015-04-0117:33:20【问题描述】：我们需要检查我们的React.js应用程序的测试覆盖率，理想情况下获取lcov.info输出... 查看详情
Laravel 代码覆盖率：如何测试默认的 BroadcastServiceProvider？
】Laravel代码覆盖率：如何测试默认的BroadcastServiceProvider？【英文标题】：LaravelCodecoverage:howtotestdefaultBroadcastServiceProvider?【发布时间】：2017-10-1704:04:18【问题描述】：为了完整的代码覆盖测试，我想测试自动创建的文件/app/Provider... 查看详情
如何在颤振测试覆盖率中排除文件？
】如何在颤振测试覆盖率中排除文件？【英文标题】：Howtoexcludefileinfluttertestcoverage?【发布时间】：2019-05-0800:19:22【问题描述】：我正在尝试从flutter测试结果的测试覆盖结果中排除几个config文件。当我运行fluttertest--coverage时，输... 查看详情
如何从测试覆盖率中排除 Dagger2 类
】如何从测试覆盖率中排除Dagger2类【英文标题】：HowtoexcludeDagger2classesfromtestcoverage【发布时间】：2017-07-2309:15:30【问题描述】：是否有任何选项可以从AndroidStudio的测试覆盖率报告中排除Dagger2类【问题讨论】：您的意思是由dagger... 查看详情
如何使覆盖范围包括未测试的文件？
...元测试。我目前只测试一小部分，但我正在尝试计算代码覆盖率我运行我的测试并使用以下方法获得覆盖率python-munittestdiscover-stests/cover 查看详情
如何在 Xcode 上生成 Coverage.profdata
...这个问题。我最近尝试使用slather为我的xcode项目生成代码覆盖率报告，但是当我执行slather时它失败并出现以下错误您确定您的项目正在产生覆盖率吗？确保在Xcode方案的测试部分中启用代码覆盖。您是否 查看详情