Je travaille sur un projet Angular4.
J'essaie de configurer la couverture de code. J'ai créé une application très simple et petite. P>
J'ai lu chaque page possible que je pouvais trouver, mais je suis perdu. P>
Comment configurer la couverture de code en angular4? p>
update2: strong>
J'ai maintenant décidé d'utiliser le journaliste de la couverture de Karma
https://www.npmjs.com/package/karma-couverage
et donc retravaillé le fichier Conf karma selon la description. p> Le package JSON a été mis à jour à. p> Je vois maintenant le dossier étant généré, mais le fichier HTML indique une table vide,
Le test est en cours d'exécution et passe: p> Voici mon package JSON. p> suivi de la configuration WebPack p> suivi du fichier Karma Conf maintenant mis à jour: p> 
p> 
Je ne sais pas quoi faire d'ici. P> var webpackConfig = require('./webpack.test');
var path = require('path');
var ENV = process.env.npm_lifecycle_event;
var isTestWatch = ENV === 'test-watch';
module.exports = function (config) {
var _config = {
basePath: './',
frameworks: ['jasmine'],
files: [
{pattern: './config/karma-test-shim.js', watched: false},
'../src/**/*.js'
],
// list of files to exclude
exclude: [],
preprocessors: {
'./config/karma-test-shim.js': ['webpack', 'sourcemap'],
'../src/**/*.js': ['coverage']
},
coverageReporter: {
type : 'html',
dir : 'cover/'
},
webpack: webpackConfig,
webpackMiddleware: {
stats: 'errors-only'
},
webpackServer: {
noInfo: true
},
reporters: ['progress', 'mocha','coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: isTestWatch ? ['PhantomJS'] : ['PhantomJS'],
singleRun: true
};
config.set(_config);
};
4 Réponses :
Je ne sais pas comment le configurer à partir de zéro, mais je peux vous dire que les projets générés avec la CLI angular ont déjà configuré le plugin de couverture de code. Vérifiez https://github.com/angular/angular-cli/wiki/test - A>, vous pouvez exécuter NG Test -CC .
Si vous souhaitez inspecter comment il a été configuré, génère un projet avec le cli angulaire et exécutez sur le dossier racine ng éjecter , qui vous permettra de voir le fichier de configuration WebPack.
Je vais bien et j'ai vraiment abandonné cette histoire. J'utilise maintenant CLI angulaire, cela facilite le travail avec angular2 mille fois.
J'ai eu un problème similaire tente d'obtenir Angular4 CLI de travailler dans une configuration après Peut-être que cela aidera quelqu'un d'autre à le faire à partir de zéro ou du point d'éjection code> vue. p> J'ai ajouté une couverture puis pour la configuration de karma, je devais ajouter Une ligne pour le client.args et définir l'angulaireCli.codecoverage à une variable ng éjecter code>. Il s'est avéré être quelques lignes simples pour moi dans le paquet.json et le karma.conf.js code> script sur le package.json p> iScoverage code> i Création Pour lire l'option de ligne de commande à partir du package.json. P> // Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function (config) {
const isCoverage = config.coverage || false;
console.log(`Generate Coverage Statistics?: ${isCoverage}`);
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client:{
clearContext: false, // leave Jasmine Spec Runner output visible in browser
args: ['--coverage', config.coverage]
},
files: [
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['@angular/cli']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev',
codeCoverage: isCoverage
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'coverage-istanbul']
: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
Ajouter Angularclt à votre fichier karma.conf. Quelque chose comme ceci:
p>
angularCli: {
environment: 'dev',
codeCoverage: true
}J'ai recherché à travers divers articles et le moyen le plus simple que j'ai trouvé était: -
Assurez-vous que vous avez Ouvrez-le dans un navigateur chrome uniquement. $ NPM Installez karma karma-jasmine karma-chrome-launcher karma-jasmin-html-reporter karma-couverture-istanbul-reporter
$ NG test - Couverture de code
http-serveur installé ( NPM installer http-server -g ), puis $ http-server -c-1 -O -P 9875 ./coverage