web-dev-qa-db-fra.com

Comment couvrir le code avec karma, TypeScript et browserify

Comment configurez-vous Karma Test Runner pour générer des rapports de couverture de code d'un projet TypeScript?

Étant donné la structure de dossiers suivante et le fichier karma.conf.js, j'utilise déjà le karma pour exécuter mes tests écrits en TypeScript.

Je me suis déjà amusé avec karma-coverage et remap-istanbul mais sans aucune chance pour le moment. Si possible, j'aimerais le faire sans aucun npm scripts supplémentaire.

.
├── 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']
  })
}

Mise à jour 1:

J'ai fait des progrès en ajoutant browserify-istanbul à la configuration. Je pense que les mesures globales sont correctes mais la vue du fichier source est un peu étrange.

 source file view

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

Mise à jour 2:

Jusqu'à aujourd'hui, je ne pouvais pas trouver un moyen de créer une configuration de karma "intégrée" avec browserify et TypeScript. Néanmoins, j'ai une solution différente qui fonctionne pour moi.

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

package.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"
  },
  ...
}
typescriptkarma-runnerbrowserifyistanbulkarma-coverage
18
Oliver

Installer karma-TypeScript :

npm install karma-TypeScript --save-dev

Mettez ceci dans votre karma.conf.js:

frameworks: ["jasmine", "karma-TypeScript"],

files: [
    { pattern: "src/**/*.ts" }
],

preprocessors: {
    "**/*.ts": ["karma-TypeScript"]
},

reporters: ["progress", "karma-TypeScript"],

browsers: ["Chrome"]

Ceci exécutera vos tests unitaires TypeScript à la volée et générera une couverture html pour Istanbul ressemblant à ceci:

Pas besoin de scripts NPM, etc., toute la magie se passe dans le plugin.

1
Erik Barke