当前位置:   jquery > 正文

您如何使用已编译的Typescript使用Istanbul Code Coverage?

javascript,typescript,karma-runner,istanbul,gulp,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具,开发人员工具,站长工具

我整个上午都在阅读这篇文章,试图正确设置我的环境.但由于某种原因,我没有得到它.我的设置 -

/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),但也没有.

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



1> Martin Vseti..:

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

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

实习生以及其他JavaScript测试框架利用伊斯坦布尔进行代码覆盖分析.当我们开始为自己的项目采用越来越多的TypeScript时,我们仍然在努力清楚地了解我们的代码覆盖率,因为所有报告都只包含了我们发出的代码的覆盖范围.我们不得不尝试在我们的脑海中使用编译器来试图找出我们缺少测试覆盖率的地方.我们还希望围绕我们的覆盖范围设置指标,让我们跟踪我们是否朝着正确的方向前进.

我们中的一些人开始探索我们如何能够完成将覆盖率报告映射回原点,经过一些工作后,我们创建了remap-istanbul,这个包允许将伊斯坦布尔覆盖信息映射回其来源.是源地图可用.虽然我们一直专注于TypeScript,但它可以用于在发出的代码上生成coverage的任何地方,包括上面提到的工具!

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



2> blakeembrey..:

如果您希望使用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看会发生什么.

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/blog/jquery/detail/13251
推荐阅读
  • 如何解决《"forin"构造的奇怪行为》经验,为你挑选了1个好方法。html,javascript,for-loop,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,un... [详细]

  • 如何解决《Rails:在JavaScript中捕获错误消息》经验,为你挑选了1个好方法。javascript,ruby,ajax,jquery,ruby-on-rails,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工... [详细]

  • 如何解决《将R数据作为输入传递给html?》经验,为你挑选了0个好方法。html,r,google-maps-api-3,javascript,https,go,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,jso... [详细]

  • 如何解决《SoundCloudAPIv3Stream无法在Chrome中运行》经验,为你挑选了0个好方法。api,google-chrome,stream,soundcloud,chrome,https,javascript,DevBox,... [详细]

  • 如何解决《AMDLoader禁用,在主题中启用》经验,为你挑选了1个好方法。javascript,dojo,xpages,twitter-bootstrap,bootstrap,css,DevBox,在线流程图,编程,编程问答,程序员,开发... [详细]

  • 如何解决《Javascript增量评估的操作顺序》经验,为你挑选了1个好方法。javascript,increment,operator-precedence,lua,chrome,DevBox,在线流程图,编程,编程问答,程序员,开发者工... [详细]

  • 如何解决《从数组中获取最后一次单击项的值》经验,为你挑选了0个好方法。javascript,arrays,jquery,for-loop,if-statement,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,js... [详细]

  • 如何解决《函数中的$http.get方法》经验,为你挑选了1个好方法。javascript,angularjs,json,go,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳... [详细]

  • 如何解决《在带有colspan和rowspan的表中重复》经验,为你挑选了1个好方法。html-table,angularjs,angularjs-ng-repeat,javascript,https,ajax,go,DevBox,在线流程... [详细]

  • 如何解决《在Promise中攻击与捕获》经验,为你挑选了1个好方法。javascript,promise,es6-promise,chrome,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成... [详细]

  • 如何解决《输出文件名未配置Webpack中的错误》经验,为你挑选了4个好方法。javascript,reactjs,webpack,npm,go,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生... [详细]

  • 如何解决《在JavaScript中拳击强制?》经验,为你挑选了1个好方法。javascript,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具,开... [详细]

  • 如何解决《在ubuntu中的Ionic框架中添加Android平台时出错》经验,为你挑选了0个好方法。javascript,ubuntu,android,hybrid-mobile-app,ionic-framework,DevBox,在线... [详细]

  • 如何解决《启用后退按钮,不允许通过URL手动更改》经验,为你挑选了1个好方法。javascript,jquery,jquery-mobile,pushstate,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,jso... [详细]

  • 如何解决《如何动态隐藏asciidoc元素》经验,为你挑选了1个好方法。asciidoc,asciidoctor,css,javascript,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成... [详细]

  • 如何解决《d3.select.style没有在firefox上工作》经验,为你挑选了1个好方法。javascript,d3.js,chrome,firefox,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json... [详细]

  • 如何解决《将内容推送到数组》经验,为你挑选了1个好方法。javascript,arrays,jquery,local-storage,https,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生... [详细]

  • 如何解决《有没有办法在rails控制器方法中提醒/弹出而不渲染任何其他js文件》经验,为你挑选了1个好方法。javascript,ruby,ruby-on-rails,html,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,... [详细]

  • 如何解决《JavaScript确认无法在Chrome中使用》经验,为你挑选了1个好方法。javascript,confirm,chrome,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,u... [详细]

  • 如何解决《使用jQuery将图片从一个div添加到另一个div》经验,为你挑选了1个好方法。html,javascript,css,jquery,dom,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,... [详细]

相关标签
  

闽ICP备14008679号