web-dev-qa-db-fra.com

Comment utilisez-vous la couverture de code d'Istanbul avec un dactylographe transpilé?

J'ai lu des articles sur ce sujet toute la matinée pour essayer de configurer correctement mon environnement. Mais pour une raison quelconque, je ne comprends pas. Ma configuration

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

Les tests fonctionnent correctement et avec le débogage de mappage dans le débogueur Chrome, le mappage est correct. Mais Istanbul considère le fichier typescripts.js comme un fichier au lieu de la concaténation de dizaines d'autres fichiers.

Pour générer la source TypeScript, j'utilise gulp-TypeScript. Les sources (à l’exclusion des tests) sont transpilées vers le typescripts.js susmentionné, puis les tests sont transpilés individuellement et copiés dans le /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
     });
  };

Le typescripts.js résultant a le plan source en ligne. Avec la carte source, la dizaine de fichiers ts correspond à 106 Ko.

Alors à partir de là, les tests et le débogage fonctionnent bien.

Maintenant, dans le but de faire fonctionner correctement la couverture de code d'Istanbul, j'ai installé karma-sourcemap-loader et l'a ajouté aux préprocesseurs.

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

Je pense que c'est ce que je devrais faire. Mais il ne montre pas la couverture de code sur les fichiers source. J'ai essayé le chemin absolu de C:/ mais cela n'a pas fonctionné non plus. J'ai aussi essayé les différentes options de gulp-sourcemaps comme l'ajout de source (ce qui a poussé le fichier à 160 Ko), mais pas comme les autres.

Quelqu'un at-il obtenu cela au travail? Des idées que je pourrais faire mal?

javascripttypescriptgulpkarma-runneristanbul
38
micah

TL; DR: Il existe un outil: https://github.com/SitePen/remap-istanbul décrit comme Un outil pour remapper la couverture d’Istanbul via les cartes source

Le article sur Sitepan le décrit plus en détail:

Le stagiaire ainsi que d'autres frameworks de test JavaScript utilisent Istanbul pour leur analyse de couverture de code. Comme nous avons commencé à adopter de plus en plus TypeScript pour nos propres projets, nous avons continué à lutter pour obtenir une image claire de la couverture de notre code que tous les rapports inclus la couverture de notre code émis. Nous devions essayer d'utiliser les compilateurs dans notre esprit pour essayer de savoir où nous manquions de couverture de test . Nous aimons également définir des paramètres autour de notre couverture pour nous permettre de suivre si nous sont dirigés dans la bonne direction.

Quelques-uns d'entre nous ont commencé à explorer comment nous pourrions être en mesure d'accomplir mapper le rapport de couverture à ses origines et après un peu de travail, nous avons créé remap-istanbul, un package qui permet à Istanbul les informations de couverture doivent être mappées à leur source quand il y a Cartes source disponibles. Bien que nous nous sommes concentrés sur TypeScript, cela peut être utilisé partout où la couverture est produite sur du code émis, y compris les outils mentionnés ci-dessus!

Comment utiliser l'outil avec gulp: https://github.com/SitePen/remap-istanbul#gulp-plugin

24
Martin Vseticka

Comme mentionné blakeembrey. Istanbul 1.x le gère bien.

Ci-dessous, un exemple de script pur npm qui le fait avec Jasmine.

Voir https://github.com/Izhaki/TypeScript-Jasmine-Istanbul-Boilerplate .

package.json (les trucs pertinents)

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

Sortie

image

3
Izhaki

Aucun des exemples fournis n'a fonctionné pour mon projet Node.JS (écrit en TypeScript). Je voulais faire des tests unitaires à Jasmin, et couvert par Istanbul. 

J'ai fini par le faire fonctionner avec ce qui suit.

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

C'est repo fonctionne. J'ai couru le repo et je peux voir les tests en cours. La vue HTML est également générée. https://github.com/Izhaki/TypeScript-Jasmine-Istanbul-Boilerplate

0
Laksh