web-dev-qa-db-ja.com

変換されたタイプスクリプトでイスタンブールコードカバレッジをどのように使用しますか？

環境のセットアップを正しく行うために、午前中ずっと記事を読んでいます。しかし、何らかの理由で、私はそれを得ていません。私のセットアップ

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

テストは正常に実行され、マッピングデバッグでchromeデバッガーは正しくマップされます。しかし、イスタンブールはtypescripts.jsファイルを他の多数のファイルの連結ではなく1つのファイルと見なします。

TypeScriptソースを生成するには、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にはインラインソースマップがあります。ソースマップを使用すると、12個程度のtsファイルが106kbになります。

つまり、ここからテストとデバッグが正常に機能します。

イスタンブールのコードカバレッジを適切に機能させるために、karma-sourcemap-loaderをインストールし、プリプロセッサに追加しました。

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

これが必要なことだと思います。ただし、ソースファイルのコードカバレッジは表示されません。 C:/から絶対パスを試しましたが、それも機能しませんでした。ソースを追加する（ファイルを160kbにプッシュする）ようなgulp-sourcemapsのさまざまなオプションも試しましたが、どちらも好きではありませんでした。

誰かがこれを機能させましたか？私が間違っている可能性のあるアイデアはありますか？

javascripttypescriptgulpkarma-runneristanbul
38
micah

TL; DR：次のツールがあります： https://github.com/SitePen/remap-istanbulとして説明されているソースマップを介してイスタンブールのカバレッジを再マッピングするためのツール

Sitepanの 記事 で詳細を説明しています。

インターンおよびその他のJavaScriptテストフレームワークは、コードカバレッジ分析にイスタンブールを利用しています。独自のプロジェクトにますます多くのTypeScriptを採用し始めたとき、すべてのレポートには発行されたコードのカバレッジのみが含まれていたため、コードカバレッジの明確な把握に苦労し続けました。テストカバレッジがどこに欠けているのかを把握するために、コンパイラを念頭に置いて使用する必要がありました。また、カバレッジの周りにメトリックを設定して、正しい方向に進んでいるかどうかを追跡できるようにします。

数人の私たちは、カバレッジレポートを元の場所にマッピングする方法を模索し始め、少し作業した後、remap-istanbulを作成しました。これは、イスタンブールのカバレッジ情報をソースにマッピングして戻すことができるパッケージです。ソースマップが利用可能です。 TypeScriptに焦点を合わせてきましたが、上記のツールを含め、発行されたコードでカバレッジが生成される場所であればどこでも使用できます！

Gulpでツールを使用する方法： https://github.com/SitePen/remap-istanbul#gulp-plugin

25
Martin Vseticka

イスタンブールでソースマップのサポートが必要な場合は、現在のリリースがソースマップをサポートしないとして1.0アルファリリースを使用できます。 http://github.com/typings/typings でts-nodeを使用して設定しています（ https://github.com/typings/typings/blob/ bff1abad91dabec1cd8a744e0dd3f54b613830b5/package.json＃L19 ）およびソースコードがマップされています。見た目も素晴らしく、テストとコードカバレッジをすべてトランスプロセスなしでインプロセスで実行できてうれしいです。もちろん、翻訳されたJavaScriptでIstanbul 1.0を使用できます。

あなたが使用しているブラウザの実装では、これがあなたのために機能することを確認するためにあなたがやっていることのコードをもっと見る必要がありますが、1.0.0-alpha.2を試して何が起こるかを見てください。

5
blakeembrey

Blakeembreyが述べたように。イスタンブール1.xはそれをうまく処理します。

以下は、ジャスミンでそれを行う純粋なnpmスクリプトの例です。

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

出力

image

3
Izhaki

Node.JSプロジェクト（TypeScriptで記述された）で提供されている例はいずれも機能しませんでした。ジャスミンで単体テストを実行したかったのですが、イスタンブールでカバーされていました。

私は次のように動作するようになりました。

package.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

{
  "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"
  ]
}
0
Steve Brush

これはレポジトリです。リポジトリを実行し、テストの実行を確認できます。 HTMLビューも生成されます。 https://github.com/Izhaki/TypeScript-Jasmine-Istanbul-Boilerplate

0
Laksh