typescript - Cómo hacer cobertura de código con karma, mecanografiado y browserify

karma-runner istanbul

Question

¿Cómo configura karma test runner para generar informes de cobertura de código de un proyecto mecanografiado?

Dada la siguiente estructura de carpetas y el archivo karma.conf.js, ya estoy usando karma para ejecutar mis pruebas escritas en TypeScript.

Ya jugueteaba con karma-coverage y el remap-istanbul pero aún sin suerte. Si es posible, me gustaría hacerlo sin ningún npm scripts adicional.

.
├── karma.conf.js
├── package.json
├── src
│   └── add.ts
├── test
│   └── addSpec.ts
├── tsconfig.json
├── typings
│   ├── globals
│   └── index.d.ts
└── typings.json

karma.conf.js

var istanbul = require(''browserify-istanbul'');
module.exports = function(config) {
config.set({
basePath: '''',
frameworks: [''mocha'', ''chai'', ''sinon'', ''browserify''],
files: [
''test/**/*Spec.ts''
],
exclude: [
],
preprocessors: {
''test/**/*Spec.ts'': [''browserify'']
},
browserify: {
debug: true,
plugin: [''tsify''],
transform: [
istanbul({irgnore: [''**/node_modules/**'']})
]
},
reporters: [''progress'', ''coverage'']
})
}

Actualización 1:

Hice algunos progresos agregando browserify-istanbul a la configuración. Creo que las métricas generales están bien, pero la vista del archivo fuente es un poco extraña.

addSpec.ts

import { add } from ''../src/add''
const expect = chai.expect
describe(''test add module'', () => {
it(''should add 2 numbers'', () => {
expect(add(2, 2)).to.be.equal(4)
})
})

Actualización 2:

Hasta hoy no pude encontrar una manera de crear una configuración de karma "integrada" con browserify y mecanografiado. Sin embargo tengo una solución diferente que está funcionando para mí.

karma.conf.js

module.exports = function(config) {
config.set({
basePath: '''',
frameworks: [''source-map-support'', ''mocha''],
files: [
''test/**/*Spec.ts''
],
exclude: [],
preprocessors: {
''test/**/*Spec.ts'': [''webpack'']
},
webpack: {
devtool: ''inline-source-map'',
resolve: {
extensions: ['''', ''.ts'', ''.js'']
},
module: {
loaders: [
{ test: //.ts$/, exclude: /node_modules/, loader: ''ts-loader'', query: { compilerOptions: { inlineSourceMap: true }} }
],
postLoaders: [
{ test: //.ts$/, include: /src/, loader: ''istanbul-instrumenter'' }
]
}
},
webpackMiddleware: {
noInfo: true
},
reporters: [''progress'', ''coverage''],
coverageReporter: {
dir: ''coverage'',
reporters: [
{ type: ''json'', subdir: ''.'', file: ''coverage.json'' }
]
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: [''Electron''],
singleRun: false,
concurrency: Infinity
})
}

paquete.json

{
...
"scripts": {
"test": "rimraf coverage && karma start --single-run && npm run coverage",
"coverage": "npm run coverage:remap && npm run coverage:report",
"coverage:remap": "remap-istanbul -i coverage/coverage.json -o coverage/coverage.json -t json",
"coverage:report": "istanbul report html"
},
...
}

Answer 1

Instala karma-typescript :

npm install karma-typescript --save-dev

Pon esto en tu karma.conf.js:

frameworks: ["jasmine", "karma-typescript"],
files: [
{ pattern: "src/**/*.ts" }
],
preprocessors: {
"**/*.ts": ["karma-typescript"]
},
reporters: ["progress", "karma-typescript"],
browsers: ["Chrome"]

Esto ejecutará tus pruebas unitarias de Typescript sobre la marcha y generará una cobertura html de Estambul que se verá así:

No se necesitan scripts npm, etc., toda la magia ocurre en el complemento.