javascript - ¿Cómo se usa la cobertura del código de Estambul con Typescript transpilado?

gulp karma-runner

Question

He estado leyendo artículos sobre esto toda la mañana tratando de configurar correctamente mi entorno. Pero por alguna razón no lo entiendo. Mi configuración-

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

Las pruebas funcionan bien, y con la depuración de la asignación en el depurador de Chrome se correlaciona correctamente. Pero Estambul ve el archivo typescripts.js como un archivo en lugar de la concatenación de docenas de otros archivos.

Para generar la fuente de mecanografía, estoy usando gulp-typescript . La fuente (excluyendo las pruebas) se transporta a los tiposcriptcripts.js antes mencionados, y las pruebas se transponen de forma individual y se copian a /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
     });
  };

El archivo typescripts.js resultante tiene el mapa fuente en línea. Con el mapa de origen, la docena de archivos ts resulta en 106kb.

Así que desde aquí las pruebas y la depuración funcionan bien.

Ahora, en un intento de que la cobertura del código de Estambul funcione correctamente, he instalado karma-sourcemap-loader y lo he agregado a los preprocesadores.

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

Pensaría que esto es lo que tendría que hacer. Pero no muestra cobertura de código en los archivos fuente. Probé la ruta absoluta desde C:/ pero tampoco funcionó. También probé las diferentes opciones en gulp-sourcemaps como agregar fuente (que empujó el archivo a 160kb) pero tampoco me gusta.

¿Alguien ha conseguido que esto funcione? ¿Alguna idea de lo que podría estar haciendo mal?

Answer 1

Como blakeembrey mencionado. Istanbul 1.x lo maneja bien.

Debajo hay un ejemplo de script pure npm que lo hace con Jasmine.

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

package.json (las cosas relevantes)

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

Salida

Answer 2

Esto es repo funciona. Ejecuté el repositorio y puedo ver las pruebas en ejecución. La vista html también se genera. https://github.com/Izhaki/Typescript-Jasmine-Istanbul-Boilerplate

Answer 3

Ninguno de los ejemplos provistos funcionó para mi proyecto Node.JS (escrito en TypeScript). Quería realizar pruebas unitarias en Jasmine, y cubierto por Estambul.

Terminé trabajando con lo siguiente.

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

Answer 4

Si desea soporte de mapa fuente con Estambul, puede usar la versión 1.0 alfa ya que la versión actual no es compatible con los mapas fuente. Lo tengo configurado usando ts-node en http://github.com/typings/typings (ver https://github.com/typings/typings/blob/bff1abad91dabec1cd8a744e0dd3f54b613830b5/package.json#L19 ) y el código fuente está siendo mapeado. Se ve genial y es bueno tener mis pruebas y cobertura de código ejecutándose en proceso con cero transpilation. Por supuesto, puede usar Istanbul 1.0 con el JavaScript transpilado.

Para la implementación del navegador que estás usando, tendré que ver más código de lo que estás haciendo para ver que esto funcionará para ti, pero prueba el 1.0.0-alpha.2 y ve lo que sucede.

Answer 5

TL; DR: hay una herramienta: https://github.com/SitePen/remap-istanbul descrita como una herramienta para reasignar la cobertura de Estambul a través de los mapas fuente

El article sobre Sitepan lo describe con más detalle:

Practicante, así como otros marcos de prueba de JavaScript utilizan Estambul para su análisis de cobertura de código. A medida que comenzamos a adoptar más y más TypeScript para nuestros propios proyectos, seguimos teniendo dificultades para obtener una imagen clara de la cobertura de nuestro código, ya que todos los informes solo incluían la cobertura de nuestro código emitido. Tuvimos que tratar de utilizar los compiladores en nuestras mentes para tratar de averiguar dónde faltaba la cobertura de prueba. También nos gusta establecer métricas en torno a nuestra cobertura para que podamos rastrear si vamos en la dirección correcta.

Algunos de nosotros comenzamos a explorar cómo podríamos lograr mapear el informe de cobertura hasta sus orígenes y, después de un poco de trabajo, creamos remap-istanbul, un paquete que permite mapear la información de cobertura de Estambul a su origen cuando existe hay mapas fuente disponibles. Si bien nos hemos centrado en TypeScript, se puede usar en cualquier lugar en el que se produzca la cobertura de un código emitido, incluidas las herramientas mencionadas anteriormente.

Cómo usar la herramienta con un trago: https://github.com/SitePen/remap-istanbul#gulp-plugin