你如何使用伊斯坦布尔的代码覆盖与编译脚本？ [英] How do you use Istanbul Code Coverage with transpiled Typescript?
问题描述
/ app
... source（混合js和ts）
/ scripts
...复制的源代码（js）
typescripts.js //通过内联映射转录打字稿
测试运行正常，并且使用chrome调试器中的映射调试正确映射。但伊斯坦布尔将 typescripts.js 文件视为一个文件，而不是其他几十个文件的连接。
生成打字稿源我正在使用 gulp-typescript 。源代码（不包括测试代码）被转换为前面提到的 typescripts.js ，并且测试被单独转换并复制到 / scripts 。
var ts = require（'gulp-typecript'）;
var sourcemaps = require（'gulp-sourcemaps'）;
var concat = require（'gulp-concat'）;
module.exports = function（gulp，config）{
'use strict';
//通过打字稿编译器运行`www`中的点ts文件，并将它们作为js
//文件复制到脚本目录
gulp.task （'typescript'，['typescript：tests']，function（）{
return gulp.src（config.paths.typescript）// ['./www/app/**/*.ts'， '！./ www / app / ** / *。test.ts'，'！./ www / app / ** / *。mock.ts']
.pipe（sourcemaps.init（））
.pipe（ts（ts.createProject（config.paths.tsConfig）））//'./tsconfig.json'
.js
.pipe（concat（config.sourcemaps.dest） ）// typescripts.js
.pipe（sourcemaps.write（config.sourcemaps））// {includeContent：false，sourceRoot：'/ app'} - 我也试过绝对本地路径
。 pipe（gulp.dest（config.paths.tmpScripts））; // ./www/scripts
}）;
$ b $ gulp.task（'typescript：tests'，[]，function（）{
return gulp.src（config.paths.typescriptTests）// ['./www/app/ ** / *。test.ts'，'./www/app/**/*.mock.ts']
.pipe（ts（ts.createProject（config.paths.tsConfig）））// './tsconfig.json'
.pipe（gulp.dest（config.paths.tmpScripts））; // ./www/scripts
}）;
};
生成的 typescripts.js sourcemap。使用sourcemap，十几个ts文件的结果为106kb。
所以从这里开始测试和调试工作正常。
现在为了让伊斯坦布尔的代码覆盖率正常工作，我安装了 karma-sourcemap-loader 并将其添加到预处理器中。
预处理器：{
'www / scripts / typescripts.js'：['sourcemap']，
'www / scripts / ** / *。js'：['coverage']
}，
我认为这是我需要做的。但它没有显示源代码文件的代码覆盖率。我尝试了从 C：/ 的绝对路径，但这也不起作用。我也尝试了 gulp-sourcemaps 中的不同选项，例如添加源文件（将文件推送到160kb），但不支持。
有没有人得到这个工作？任何想法，我可能做错了什么？
TL; DR：有一个工具： https://github.com/SitePen/remap-istanbul 描述为通过源地图重新映射伊斯坦布尔覆盖的工具
关于Sitepan的文章更详细地描述了它：
实习生以及其他JavaScript测试框架利用伊斯坦布尔
进行代码覆盖率分析。随着我们开始为自己的项目采用越来越多的
TypeScript，我们继续努力获得
a清晰的代码覆盖图，因为所有的报告都只包含
我们的发布代码的覆盖范围。我们必须尝试在我们的脑海中使用编译器
来试图找出我们错过测试覆盖的位置。
我们也希望在我们的覆盖范围内设定指标，让我们跟踪我们的b $ b是否朝着正确的方向前进。
我们中的一些人开始探索我们如何能够完成
将覆盖率报告映射到它的起源，并且在
的一些工作之后，我们创建了remap-istanbul，这是一个允许映射伊斯坦布尔
覆盖信息的软件包当有
的源地图可用时返回其源。虽然我们一直专注于TypeScript，但是无论发布代码的覆盖范围在哪里，都可以使用
，
包括上面提到的工具！
如何使用此工具： https：// github.com/SitePen/remap-istanbul#gulp-plugin
I've been reading articles on this all morning trying to get my environment setup correctly. But for some reason I'm not getting it. My setup-
/app
... source (mixed js and ts)
/scripts
... copied source (js)
typescripts.js // transpiled typescript with inline mapping
Tests run fine, and with the mapping debugging in the chrome debugger is mapped correctly. But Istanbul sees the typescripts.js file as one file instead of the concatenation of dozens of other files.
To generate the typescript source I'm using gulp-typescript. The source (excluding tests) are transpiled to the aforementioned typescripts.js, and the tests are transpiled individually and copied to /scripts.
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
module.exports = function (gulp, config) {
'use strict';
// Runs dot ts files found in `www` through the typescript compiler and copies them as js
// files to the scripts directory
gulp.task('typescript', ['typescript:tests'], function () {
return gulp.src(config.paths.typescript) // [ './www/app/**/*.ts', '!./www/app/**/*.test.ts', '!./www/app/**/*.mock.ts' ]
.pipe(sourcemaps.init())
.pipe(ts(ts.createProject(config.paths.tsConfig))) // './tsconfig.json'
.js
.pipe(concat(config.sourcemaps.dest)) // typescripts.js
.pipe(sourcemaps.write(config.sourcemaps)) // { includeContent: false, sourceRoot: '/app' } - i've also tried absolute local path
.pipe(gulp.dest(config.paths.tmpScripts)); // ./www/scripts
});
gulp.task('typescript:tests', [], function() {
return gulp.src(config.paths.typescriptTests) // [ './www/app/**/*.test.ts', './www/app/**/*.mock.ts' ]
.pipe(ts(ts.createProject(config.paths.tsConfig))) // './tsconfig.json'
.pipe(gulp.dest(config.paths.tmpScripts)); // ./www/scripts
});
};
The resulting typescripts.js has the inline sourcemap. With the sourcemap, the dozen or so ts files results in 106kb.
So from here tests and debugging works fine.
Now in an attempt to get Istanbul code coverage working properly i've installed karma-sourcemap-loader and added it to the preprocessors.
preprocessors: {
'www/scripts/typescripts.js': ['sourcemap'],
'www/scripts/**/*.js': ['coverage']
},
I'd think this is what I'd need to do. But it does not show code coverage on the source files. I tried the absolute path from C:/ but that didn't work either. I also tried the different options in gulp-sourcemaps like adding source (which pushed the file to 160kb) but no like either.
Has anyone gotten this to work? Any ideas what I could be doing wrong?
TL;DR: There is a tool: https://github.com/SitePen/remap-istanbul described as A tool for remapping Istanbul coverage via Source Maps
The article on Sitepan describes it in more detail:
Intern as well as other JavaScript testing frameworks utilise Istanbul for their code coverage analysis. As we started to adopt more and more TypeScript for our own projects, we continued to struggle with getting a clear picture of our code coverage as all the reports only included the coverage of our emitted code. We had to try to use the compilers in our minds to try to figure out where we were missing test coverage. We also like to set metrics around our coverage to let us track if we are headed the right direction.
A couple of us started exploring how we might be able to accomplish mapping the coverage report back to its origins and after a bit of work, we created remap-istanbul, a package that allows Istanbul coverage information to be mapped back to its source when there are Source Maps available. While we have been focused on TypeScript, it can be used wherever the coverage is being produced on emitted code, including the tools mentioned above!
How to use the tool with gulp: https://github.com/SitePen/remap-istanbul#gulp-plugin
这篇关于你如何使用伊斯坦布尔的代码覆盖与编译脚本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
