您如何将伊斯坦布尔代码覆盖率与转译的 Typescript 一起使用？

Question

提问by micah

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.jsfile as one file instead of the concatenation of dozens of other files.

测试运行良好，并且 chrome 调试器中的映射调试被正确映射。但伊斯坦布尔将typescripts.js文件视为一个文件，而不是数十个其他文件的串联。

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.

要生成我正在使用的打字稿源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
     });
  };

The resulting typescripts.jshas the inline sourcemap. With the sourcemap, the dozen or so ts files results in 106kb.

结果typescripts.js具有内联源映射。使用源映射，十几个 ts 文件的结果为 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-loaderand added it to the preprocessors.

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

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-sourcemapslike adding source (which pushed the file to 160kb) but no like either.

我想这就是我需要做的。但它没有显示源文件的代码覆盖率。我尝试了绝对路径，C:/但这也不起作用。我还尝试了不同的选项，gulp-sourcemaps比如添加源（将文件推送到 160kb），但也不喜欢。

Has anyone gotten this to work? Any ideas what I could be doing wrong?

有没有人让这个工作？任何想法我可能做错了什么？

Answer 1

回答by Martin Vseticka

TL;DR: There is a tool: https://github.com/SitePen/remap-istanbuldescribed as A tool for remapping Istanbul coverage via Source Maps

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

The articleon Sitepan describes it in more detail:

Sitepan上的文章对其进行了更详细的描述：

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!

Intern 以及其他 JavaScript 测试框架利用Istanbul 进行代码覆盖率分析。随着我们开始在自己的项目中采用越来越多的 TypeScript，我们继续努力获得代码覆盖率的清晰图片，因为所有报告仅包括我们发出的代码的覆盖率。我们不得不尝试使用我们头脑中的编译器来试图找出我们缺少测试覆盖的地方。我们还喜欢围绕我们的覆盖范围设置指标，让我们跟踪我们是否朝着正确的方向前进。
我们中的一些人开始探索如何才能完成将覆盖率报告映射回其源头的工作，经过一些工作，我们创建了 remap-istanbul，一个允许将伊斯坦布尔覆盖率信息映射回其源头时的包是否有可用的 Source Maps。虽然我们一直专注于 TypeScript，但它可以用于在发出的代码上生成覆盖率的任何地方，包括上面提到的工具！

How to use the tool with gulp: https://github.com/SitePen/remap-istanbul#gulp-plugin

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

Answer 2

回答by blakeembrey

If you want source map support with Istanbul, you can use the 1.0 alpha release as the current release does notsupport source maps. I have it set up using ts-nodein http://github.com/typings/typings(see https://github.com/typings/typings/blob/bff1abad91dabec1cd8a744e0dd3f54b613830b5/package.json#L19) and source code is being mapped. It looks great and is nice to have my tests and code coverage all running in-process with zero transpilation. Of course, you can use Istanbul 1.0 with the transpiled JavaScript.

如果您希望伊斯坦布尔的源地图支持，您可以使用 1.0 alpha 版本，因为当前版本不支持源地图。我ts-node在http://github.com/typings/typings 中设置了它（参见https://github.com/typings/typings/blob/bff1abad91dabec1cd8a744e0dd3f54b613830b5/package.json#L19）并且正在映射源代码。看起来很棒，而且很高兴让我的测试和代码覆盖率都在零转译的进程中运行。当然，您可以将Istanbul 1.0 与转译后的JavaScript 一起使用。

For the browser implementation you're using, I'd have to see more of code of what you're doing to see this'll just work for you, but try the 1.0.0-alpha.2and see what happens.

对于您正在使用的浏览器实现，我必须查看更多关于您正在执行的操作的代码，才能看到这对您有用，但请尝试1.0.0-alpha.2看看会发生什么。

Answer 3

回答by Izhaki

As blakeembrey mentioned. Istanbul 1.x handles it well.

正如布莱克姆布雷所说。伊斯坦布尔 1.x 处理得很好。

Below an example of pure npm script that does it with Jasmine.

下面是使用 Jasmine 执行此操作的纯 npm 脚本示例。

See https://github.com/Izhaki/Typescript-Jasmine-Istanbul-Boilerplate.

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

package.json (the relevant stuff)

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"
  },
}

Output

输出

Answer 4

回答by Laksh

This is repo works. I ran the repo and can see the tests running. Html view is also generated. https://github.com/Izhaki/Typescript-Jasmine-Istanbul-Boilerplate

这是回购工程。我运行了 repo，可以看到正在运行的测试。还会生成 Html 视图。 https://github.com/Izhaki/Typescript-Jasmine-Istanbul-Boilerplate

Answer 5

回答by Steve Brush

None of the examples provided worked for my Node.JS project (written in TypeScript). I wanted to run unit tests in Jasmine, and covered by Istanbul.

提供的示例都不适用于我的 Node.JS 项目（用 TypeScript 编写）。我想在 Jasmine 中运行单元测试，并由伊斯坦布尔覆盖。

I ended up getting it working with the following.

我最终让它与以下一起工作。

package.json:

包.json：

{
  "scripts": {
    "lint": "tslint 'src/**/*.ts'",
    "remap": "./node_modules/.bin/remap-istanbul -i ./coverage/coverage-final.json -t html -o ./coverage && rimraf ./coverage/dist",
    "test": "npm run lint && rimraf dist coverage && tsc --project tsconfig-test.json && ./node_modules/.bin/istanbul cover ./node_modules/.bin/jasmine JASMINE_CONFIG_PATH=jasmine.json && npm run remap"
  },
  "devDependencies": {
    "@types/jasmine": "2.8.6",
    "@types/node": "9.6.6",
    "istanbul": "0.4.5",
    "jasmine": "3.1.0",
    "remap-istanbul": "0.11.1",
    "rimraf": "2.6.2",
    "tslint": "5.9.1",
    "typescript": "2.8.1"
  }
}

jasmine.json

茉莉花.json

{
  "spec_dir": "dist",
  "spec_files": [
    "**/*.spec.js"
  ],
  "stopSpecOnExpectationFailure": false,
  "random": false
}

.istanbul.yml

instrumentation:
  root: ./dist
  excludes: ['**/*.spec.js', '**/fixtures/*.js']
  include-all-sources: true
reporting:
  reports:
    - html
    - json
    - text-summary
  dir: ./coverage

tsconfig-test.json

{
  "compilerOptions": {
    "declaration": true,
    "lib": [
      "dom",
      "es6"
    ],
    "module": "commonjs",
    "noImplicitAny": true,
    "outDir": "dist",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

您如何将伊斯坦布尔代码覆盖率与转译的 Typescript 一起使用？

提问by micah

回答by Martin Vseticka

回答by blakeembrey

回答by Izhaki

package.json (the relevant stuff)

package.json（相关的东西）

Output

输出

回答by Laksh

回答by Steve Brush

相关推荐

最近更新

标签

您如何将伊斯坦布尔代码覆盖率与转译的 Typescript 一起使用？

提问by micah

回答by Martin Vseticka

回答by blakeembrey

回答by Izhaki

package.json (the relevant stuff)

package.json（相关的东西）

Output

输出

回答by Laksh

回答by Steve Brush

相关推荐

TypeScript 中的匿名/内联接口实现

接口中的 TypeScript 通用方法签名

typescript 打字稿：检查字符串中的数字

将 AngularJS 作为 AMD 导入 Typescript

相关推荐

最近更新

标签