Comment faire la couverture de code avec karma, typescript, et browserify

comment configurer Karma test runner pour générer des rapports de couverture de code d'un projet en typographie?

compte tenu de la structure du dossier et du karma suivants.conf.fichier js j'utilise déjà karma pour exécuter mes tests écrits à la machine.

j'ai déjà tripoté avec karma-coverage et remap-istanbul mais pas encore de chance. Si possible, j'aimerais le faire sans plus!--7-->.

.
├── 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 quelques progrès en ajoutant browserify-istanbul pour l'installation. Je pense que les mesures globales sont bonnes mais la vue du fichier source est un peu bizarre.

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 n'ai pas réussi à trouver un moyen de créer une configuration Karma "intégrée" avec browserify et typescript. Néanmoins, j'ai une solution différente qui fonctionne pour je.

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

paquet.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"
  },
  ...
}
18
demandé sur Oliver 2016-08-04 13:33:06

1 réponses

Installer karma-typescript:

npm install karma-typescript --save-dev

mettez ça dans votre karma.conf.js:

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

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

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

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

browsers: ["Chrome"]

ceci lancera vos tests d'unité dactylographiée à la volée et générera une couverture HTML D'Istanbul qui ressemblera à ceci:

pas besoin de scripts npm etc, toute la magie se produit dans le plugin.

0
répondu Erik Barke 2016-09-14 03:33:02