我整个上午都在阅读这篇文章,试图正确设置我的环境.但由于某种原因,我没有得到它.我的设置 -
/app ... source (mixed js and ts) /scripts ... copied source (js) typescripts.js // transpiled typescript with inline mapping
测试运行正常,并且chrome调试器中的映射调试已正确映射.但伊斯坦布尔将typescripts.js
文件视为一个文件,而不是几十个其他文件的串联.
要生成我正在使用的打字稿源gulp-typescript
.源(不包括测试)被转换为前面提到的typescripts.js
,测试被单独转换并复制到/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
具有内联源映射.使用sourcemap,十几个ts文件产生106kb.
所以从这里测试和调试工作正常.
现在,为了使伊斯坦布尔代码覆盖正常工作,我已经安装karma-sourcemap-loader
并将其添加到预处理器中.
preprocessors: { 'www/scripts/typescripts.js': ['sourcemap'], 'www/scripts/**/*.js': ['coverage'] },
我认为这是我需要做的.但它没有显示源文件的代码覆盖率.我尝试了绝对路径,C:/
但也没有用.我也尝试了不同的选项,gulp-sourcemaps
如添加源(将文件推送到160kb),但也没有.
有没有人得到这个工作?我有什么想法可能做错了吗?
TL; DR:有一个工具:https://github.com/SitePen/remap-istanbul被描述为通过源地图重新映射伊斯坦布尔覆盖范围的工具
Sitepan上的文章更详细地描述了它:
实习生以及其他JavaScript测试框架利用伊斯坦布尔进行代码覆盖分析.当我们开始为自己的项目采用越来越多的TypeScript时,我们仍然在努力清楚地了解我们的代码覆盖率,因为所有报告都只包含了我们发出的代码的覆盖范围.我们不得不尝试在我们的脑海中使用编译器来试图找出我们缺少测试覆盖率的地方.我们还希望围绕我们的覆盖范围设置指标,让我们跟踪我们是否朝着正确的方向前进.
我们中的一些人开始探索我们如何能够完成将覆盖率报告映射回原点,经过一些工作后,我们创建了remap-istanbul,这个包允许将伊斯坦布尔覆盖信息映射回其来源.是源地图可用.虽然我们一直专注于TypeScript,但它可以用于在发出的代码上生成coverage的任何地方,包括上面提到的工具!
如何使用gulp工具:https://github.com/SitePen/remap-istanbul#gulp-plugin
如果您希望使用Istanbul支持源映射,则可以使用1.0 alpha版本,因为当前版本不支持源映射.我ts-node
在http://github.com/typings/typings中设置了它(请参阅https://github.com/typings/typings/blob/bff1abad91dabec1cd8a744e0dd3f54b613830b5/package.json#L19),并且正在映射源代码.它看起来很棒,很高兴让我的测试和代码覆盖都在进程中运行,零转换.当然,您可以将Istanbul 1.0与已编译的JavaScript一起使用.
对于你正在使用的浏览器实现,我必须看到更多你正在做的代码,看看这对你有用,但试试看1.0.0-alpha.2
看会发生什么.