web-dev-qa-db-fra.com

Couverture de code pour TypeScript utilisant karma-jasmine et istanbul

J'essaie d'obtenir la couverture de code pour mon code TypeScript dans le cadre karma à l'aide d'Istanbul Dans karma.conf. Les fichiers TypeScript sont inclus. Le rapport de couverture de code vient pour le code JavaScript trans-empilé 

Comment puis-je obtenir le rapport de couverture pour le code TypeScript?

Voici mon fichier karma.conf.

module.exports = function(config) {
  config.set({

    // base path, that will be used to resolve files and exclude
    basePath: '',


    // frameworks to use
    frameworks: ['jasmine'],

    preprocessors: {
        'src/**/*.ts': ['TypeScript', 'coverage'],
        'test/**/*.ts': ['TypeScript']
    },
    typescriptPreprocessor: {
        options: {
            sourceMap: false, // (optional) Generates corresponding .map file.
            target: 'ES5', // (optional) Specify ECMAScript target version: 'ES3' (default), or 'ES5'
            module: 'AMD', // (optional) Specify module code generation: 'commonjs' or 'AMD'
            noImplicitAny: true, // (optional) Warn on expressions and declarations with an implied 'any' type.
            noResolve: false, // (optional) Skip resolution and preprocessing.
            removeComments: true, // (optional) Do not emit comments to output.
            concatenateOutput: false // (optional) Concatenate and emit output to single file. By default true if module option is omited, otherwise false.
        },
        // extra typing definitions to pass to the compiler (globs allowed)
        // transforming the filenames
        transformPath: function (path) {
            return path.replace(/\.ts$/, '.js');
        }

        //options: {
        //    sourceMap: true,
        //}
    },

    // list of files / patterns to load in the browser
    files: [

      'src/**/*.ts',
      'test/**/*.ts'
    ],


    // list of files to exclude
    exclude: [
      
    ],
    // test results reporter to use
    // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
    reporters: ['progress','coverage'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // Start these browsers, currently available:
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera (has to be installed with `npm install karma-opera-launcher`)
    // - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)
    // - PhantomJS
    // - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)
    browsers: ['PhantomJS'],


    // If browser does not capture in given timeout [ms], kill it
    captureTimeout: 60000,


    // Continuous Integration mode
    // if true, it capture browsers, run tests and exit
    singleRun: false,
    plugins: [
  'karma-jasmine',
  'karma-chrome-launcher',
  'karma-phantomjs-launcher',
  'karma-TypeScript-preprocessor',
  'karma-coverage'
  //require('../../../node_modules/karma-TypeScript-preprocessor/index.js')
    ]

  });
};

typescriptistanbulkarma-coverage
9
Udit S. Ahlawath

Installez 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:

Pour exécuter l'exemple ci-dessus, vous devez installer quelques packages:

npm install @types/jasmine jasmine-core karma karma-chrome-launcher karma-cli karma-jasmine karma-TypeScript typescript

Il s'agit de la configuration complète pour le test unitaire du code Vanilla TypeScript, aucun tsconfig.json n'est nécessaire dans ce cas. Pour des configurations plus complexes avec Angular, React, etc., vous trouverez des exemples dans les examples folder et dans les integration tests .

12
Erik Barke

Nous utilisons instanbul-remap pour notre projet et cela fonctionne assez bien. Pour créer nos rapports de couverture, nous exécutons le script Shell suivant:

#!/bin/bash

PROJECT_PATH="$(dirname $0)/../"

cd $PROJECT_PATH
echo Creating coverage reports for `pwd`

if [ ! -d "target/dist" ]; then
  echo
  echo "target/dist directory not found. Must compile source with \`npm install\` before running tests."
  echo
  exit 1;
fi

COVERAGE_DIR=target/coverage-raw
REMAP_DIR=target/coverage-ts

mkdir -p $COVERAGE_DIR
mkdir -p $REMAP_DIR

# run coverage on unit tests only
echo Creating coverage reports for unit tests
node_modules/.bin/istanbul cover --dir $COVERAGE_DIR nodeunit `find target/dist/test/ -name *.test.js` > /dev/null

# re-map the coverage report so that TypeScript sources are shown
echo Remapping coverage reports for TypeScript
node_modules/.bin/remap-istanbul -i $COVERAGE_DIR/coverage.json -o $REMAP_DIR -t html

echo Coverage report located at $REMAP_DIR/index.html

Notre projet utilise nodeunit en tant que test, car il s’agit d’une application nodale. Cependant, je m'attendrais à ce qu'une approche similaire fonctionne pour le karma.

1
Andrew Eisenberg

Il y a karma-remap-istanbul qui s'intègre bien remap-istanbul avec karma. La documentation est assez explicite, mais une chose - pour avoir un résumé sur la console, la configuration est text: undefined (sinon la sortie de texte va dans le fichier).

Il est donc possible d’obtenir un résumé de la couverture directement à partir de karma. Toutefois, lorsque les sources ts ne sont pas disponibles dans le même répertoire que karma.config.jskarma-remap-istanbul, il faut encore un peu plus de développement concernant la configuration pour pouvoir générer des rapports HTML complets. 

1
ciekawy