你如何使用伊斯坦布尔的代码覆盖与编译脚本?

我一整个早上都在阅读文章,试图正确地设置我的环境。 但由于某种原因,我没有得到它。 我的设置 –

/app ... source (mixed js and ts) /scripts ... copied source (js) typescripts.js // transpiled typescript with inline mapping 

testing运行正常,并且在chromedebugging器中的映射debugging被正确映射。 但伊斯坦布尔把typescripts.js文件视为一个文件,而不是几十个其他文件的连接。

为了生成打字稿源,我使用了gulp-typescript 。 源代码(不包括testing代码)被传输到前面提到的typescripts.js文件中,testing代码被单独转换并复制到/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 }); }; 

生成的typescripts.js具有内联源代码映射。 使用源代码,十几个ts文件的结果是106kb。

所以从这里testing和debugging工作正常。

现在试图让伊斯坦布尔的代码覆盖率正常工作我已经安装了karma-sourcemap-loader并将其添加到预处理器。

 preprocessors: { 'www/scripts/typescripts.js': ['sourcemap'], 'www/scripts/**/*.js': ['coverage'] }, 

我会认为这是我需要做的。 但是它不显示代码覆盖的源文件。 我尝试了从C:/的绝对path,但也没有工作。 我也尝试了gulp-sourcemaps的不同选项,例如添加源文件(将文件压缩到160kb),但是也没有。

有没有人得到这个工作? 任何想法我可能做错了什么?

TL; DR:有一个工具: https : //github.com/SitePen/remap-istanbul描述为通过源地图重新映射伊斯坦布尔覆盖的工具

Sitepan上的文章更详细地描述了它:

实习生以及其他JavaScripttesting框架利用伊斯坦布尔进行代码覆盖率分析。 随着我们开始为自己的项目采用越来越多的TypeScript,我们继续努力清楚地了解我们的代码覆盖范围,因为所有报告都只包含了我们发布的代码的覆盖范围。 我们必须尝试使用​​编译器来试图找出我们错过testing覆盖的地方。 我们还希望围绕我们的覆盖范围制定指标,让我们跟踪我们是否朝着正确的方向前进。

我们中的一些人开始探索如何才能完成将覆盖率报告映射到其起源,并在一些工作之后,我们创build了remap-istanbul,这个包允许伊斯坦布尔覆盖信息在那里被映射回源头是可用的源地图。 虽然我们一直专注于TypeScript,但它可以用于发射代码的覆盖范围,包括上面提到的工具!

如何使用gulp工具: https : //github.com/SitePen/remap-istanbul#gulp-plugin

如果您想要伊斯坦布尔的源地图支持,您可以使用1.0 alpha版本,因为当前版本支持源地图。 我已经使用http://github.com/typings/typings中的; ts-node设置了它(请参阅https://github.com/typings/typings/blob/bff1abad91dabec1cd8a744e0dd3f54b613830b5/package.json#L19 ),源代码正在映射。 它看起来不错,而且我的testing和代码覆盖全部在零进程中进行,非常好。 当然,你可以使用伊斯坦布尔1.0与编译的JavaScript。

对于你正在使用的浏览器实现,我不得不看到你正在做的更多的代码,看看这只会为你工作,但尝试1.0.0-alpha.2 ,看看会发生什么。

正如blakeembrey所说。 伊斯坦布尔1.x处理得好。

下面是一个纯Jasper脚本的例子。

请参阅https://github.com/Izhaki/Typescript-Jasmine-Istanbul-Boilerplate

package.json(相关的东西)

 { "scripts": { "postinstall": "typings install dt~jasmine --save --global", "test": "ts-node node_modules/.bin/jasmine JASMINE_CONFIG_PATH=jasmine.json", "test:coverage": "ts-node node_modules/istanbul/lib/cli.js cover -e .ts -x \"*.d.ts\" -x \"*.spec.ts\" node_modules/jasmine/bin/jasmine.js -- JASMINE_CONFIG_PATH=jasmine.json" }, "devDependencies": { "istanbul": "^1.1.0-alpha.1", "jasmine": "^2.4.1", "ts-node": "^0.9.3", "typescript": "^1.8.10", "typings": "^1.3.1" }, } 

产量

图片

这是回购作品。 我跑了回购,可以看到testing运行。 Html视图也被生成。 https://github.com/Izhaki/Typescript-Jasmine-Istanbul-Boilerplate