web-dev-qa-db-fra.com

Couverture de code pour Typographie

Nous venons de démarrer un projet en TypeScript et nous devons obtenir des chiffres de couverture de code.

Nos projets JavaScript existants utilisent Instanbul dans Grunt pour la couverture. Nous ne savons pas comment répliquer cela pour TypeScript.

Existe-t-il des outils pour générer une couverture de code à partir du code TypeScript lui-même? Ou exécutons-nous l'outil Istanbul (ou similaire) contre le code JavaScript généré.

javascriptcode-coveragetypescript
28
Gerard Condon

Dans l'équipe TypeScript, nous utilisons simplement des outils de couverture de code standard sur le code JavaScript compilé. Nous avons trouvé que cela était plus que suffisant, car généralement pour la couverture de code, vous regardez la couverture totale% (qui ne change pas de manière significative) ou vous plongez profondément au niveau de l'expression (qui ne change pas non plus de manière significative).

Si vous avez trouvé un outil qui le supportait (je n'en connais pas encore), vous pourriez en théorie utiliser les cartes sources émises par le compilateur pour mapper les données de couverture au code TypeScript. Cela ne vaut probablement pas la peine.

21
Ryan Cavanaugh

Mise à jour: août 2016

Il est désormais possible d'exécuter Istanbul avec le code source TypeScript en utilisant Istanbul v1 (actuellement au stade alpha) avec Noeud TypeScript .

Ce qui suit suppose que vous utilisez Mocha comme cadre de test et que tout le code de test est sous la norme test/ répertoire.

Tout d'abord, installez les packages requis:

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

Incluez ensuite quelque chose comme ce qui suit dans votre package.json:

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

C'est tout. Courir npm test et vous serez couvert.

Voir mon projet Deep Map pour un exemple de travail dans lequel les fichiers de test sont conservés dans le même répertoire que le code source. Voici un exemple de la sortie HTML:

Deep Map coverage

20
McMath

Deux ans après la publication de cette question, il y a maintenant remap-istanbul ce qui semble prometteur.

vous pouvez en savoir plus à ce sujet dans Sitepen: Couverture de code pour TypeScript et autres langages transpilés

Comme ils l'écrivent dans le projet Github :

Un package qui offre la possibilité de remapper les informations de couverture du code d'Istanbul à ses positions source d'origine sur la base d'une carte source JavaScript v3.

En lisant la documentation, le projet prendra votre couverture générée par istanbul comme entrée pour la conversion basée sur le sourcemap. Cela ressemble à une étape supplémentaire, mais je suis sûr que cela bénéficiera afin que vous puissiez vous débarrasser de ces lignes générées automatiquement générées dans le rapport de couverture.

Je crois que c'est exactement ce dont vous aurez besoin.

12
Jesper Rønn-Jensen

Exécutez la couverture du code contre le javascript généré. Vous pouvez même atteindre une couverture de 100% en disant à Istanbul d'ignorer ces embêtantes lignes impossibles à appeler écrites par TypeScript.

Istanbul honore les commentaires comme/* istanbul ignore ensuite * /, donc ce que je fais est d'exécuter un remplacement de chaîne dans ma tâche gulp qui injecte les commentaires d'istanbul ignore dans le code wrapper généré automatiquement que TypeScript écrit.

Voici la tâche de gorgée:

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
});

Voici le code généré.

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

Vous pouvez utiliser Chutzpah pour cela

Avec Chutzpah, vous pouvez exécuter vos tests à partir de la ligne de commande et intégrer vos tests avec Visual Studio Test Explorer.

Chutzpah vous permet de décider si vous souhaitez exécuter les tests à partir des fichiers .ts, .js, .html ou de tous.

Lorsqu'il est configuré (dans Visual Studio/Tools/Options/Chutzpah) pour exécuter des tests à partir de fichiers .ts, vous pourrez analyser la couverture de code de vos fichiers .js générés, avec un lien entre le code JavaScript généré et le fichier .ts qui généré.

Il est très facile de travailler sur votre couverture de code TypeScript, même si le code JavaScript est le vrai code testé.

Vous pouvez installer Chutzpah depuis Visual Studio/Tools/Extensions et mises à jour.

Vous pouvez trouver ici plus de détails sur la couverture du code en utilisant Chutzpah.

7
jfoliveira

j'ai créé un échantillon pour générer une couverture de code pour les fichiers TypeScript à l'aide de la couverture karma et du processeur karma TypeScript.

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

2
Nitin