web-dev-qa-db-ja.com

Typescriptのコードカバレッジ

TypeScriptでプロジェクトを開始したばかりで、コードカバレッジの数値を取得する必要があります。

私たちの既存のJavaScriptプロジェクトは、報道のためにGruntのInstanbulを使用しています。 TypeScriptでこれを複製する方法がわかりません。

TypeScriptコード自体からコードカバレッジを生成するためのツールはありますか？または、生成されたJavaScriptコードに対してイスタンブール（または同様の）ツールを実行しますか？.

javascriptcode-coveragetypescript
28
Gerard Condon

TypeScriptチームでは、コンパイルされたJavaScriptで通常のコードカバレッジツールを使用します。通常、コードカバレッジでは総カバレッジ％（大幅に変化しない）を調べているか、または式レベル（大幅に変化しない）で詳細に調べているため、これで十分であることがわかりました。

それをサポートするツールを見つけた場合（私はまだ何も知りません）、理論的には、コンパイラーによって出力されたソースマップを使用して、カバレッジデータをTypeScriptコードにマッピングし直すことができます。それはおそらくトラブルの価値はありません。

21
Ryan Cavanaugh

更新：2016年8月

TypeScript Node とともに Istanbul v1 （現在アルファ段階）を使用して、TypeScriptソースコードに対してイスタンブールを実行できるようになりました。

以下は、テストフレームワークとして Mocha を使用し、すべてのテストコードが標準のtest/ディレクトリにあることを前提としています。

まず、必要なパッケージをインストールします。

npm install --save-dev mocha ts-node
npm install --save-dev --save-exact [email protected]

次に、package.jsonに次のようなものを含めます。

"scripts": {
   "test": "istanbul cover -e .ts _mocha -- --compilers ts:ts-node/register"
}

それでおしまい。 npm testを実行すると、カバーされます。

テストファイルがソースコードと同じディレクトリに保存されている実際の例については、my Deep Map プロジェクトを参照してください。次にHTML出力のサンプルを示します。

Deep Map coverage

20
McMath

この質問が最初に投稿されてから2年後、remap-istanbul有望そうです。

詳細については、Sitepenで確認できます。 TypeScriptおよび他の変換された言語のコードカバレッジ

彼らが Githubプロジェクト に書いているように：

JavaScriptソースマップv3に基づいて、イスタンブールのコードカバレッジ情報を元のソース位置に再マッピングする機能を提供するパッケージ。

ドキュメントを読むと、プロジェクトはイスタンブールで生成されたカバレッジをソースマップに基づく変換の入力として受け取ります。これは追加の手順のように聞こえますが、カバレッジレポートで分解されて自動生成された行を取り除くことができるため、メリットがあると思います。

これはまさにあなたが必要とするものだと思います。

12
Jesper Rønn-Jensen

生成されたJavaScriptに対してコードカバレッジを実行します。 TypeScriptが作成する厄介な呼び出し不可能行を無視するようにイスタンブールに指示することで、100％のカバレッジを達成することもできます。

イスタンブールは/ * istanbul ignore next * /のようなコメントを尊重するので、TypeScriptが自動生成するラッパーコードにistanbul ignoreコメントを挿入するgulpタスクで文字列置換を実行します。

これが一過性のタスクです：

var gulp = require('gulp'),
    replace = require('gulp-replace'),
    ts = require('gulp-TypeScript'),

gulp.task('scripts', function () {
    //compile TypeScript into javascript
    gulp.src('src/**/*.ts')
        .pipe(ts({
            declarationFiles: false,
            removeComments: false
        }))

        //write comments to tell istanbul to ignore the code inside the iife parameters
        .js.pipe(replace(/(}\)\()(.*\|\|.*;)/g, '$1/* istanbul ignore next */$2'))

        //write comments to tell istanbul to ignore the extends code that TypeScript generates
        .pipe(replace(/(var __extends = \(this && this.__extends\))/g, '$1/* istanbul ignore next */'))

        //write all of the compiled javascript files to a build folder so we can use them for tests and coverage
        .pipe(gulp.dest('dist/src'))

        //...the rest of your build process
});

これが生成されたコードです。

var __extends = (this && this.__extends)/* istanbul ignore next */ || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var animalApi;
(function (animalApi) {
    var dogs;
    (function (dogs) {
        var BlackLab = (function (_super) {
            __extends(BlackLab, _super);
            //class code...
        });
        dogs.BlackLab = BlackLab;
    })(/* istanbul ignore next */dogs = animalApi.dogs || (animalApi.dogs = {}));
})(/* istanbul ignore next */animalApi || (animalApi = {}));
8
TwitchBronBron

Chutzpah を使用できます

Chutzpahを使用すると、コマンドラインからテストを実行し、テストをVisual Studio Test Explorerと統合できます。

Chutzpahでは、.tsファイル、.jsファイル、.htmlファイル、またはそれらすべてからテストを実行するかどうかを決定できます。

（Visual Studio/Tools/Options/Chutzpahで）.tsファイルからテストを実行するように設定すると、生成されたJavaScriptコードと.tsファイル間のリンクにより、生成された.jsファイルのコードカバレッジを分析できます。それを生成しました。

TypeScriptコードカバレッジでの作業が非常に簡単になり、JavaScriptコードがテスト対象の実際のコードである場合でも同様です。

Visual Studio/Tools/Extensions and updateからChutzpahをインストールできます。

Chutzpahを使用したコードカバレッジの詳細については こちら を参照してください。

7
jfoliveira

karmaカバレッジとKarma TypeScriptプロセッサを使用してTypeScriptファイルのコードカバレッジを生成するサンプルを作成しました。

https://github.com/nitinbhatia-dev/karma-TypeScript-coverage

2
Nitin