|
|
Dans cette page je vais détailler le processus d'obtention de données de couverture des tests QUnit en utilisant [Grunt-Croc-Qunit](https://github.com/CrocInc/grunt-croc-qunit).
|
|
|
|
|
|
### Prerequis
|
|
|
|
|
|
- Installer NodeJs et Npm
|
|
|
- pour un usage au M5 et donc une installation locale, vous pouvez suivre la documentation disponible [ici](InstallationNodeJSNPM)
|
|
|
- sinon référez-vous aux instructions d'installation génériques
|
|
|
|
|
|
- Ouvrir un terminal au niveau de votre projet
|
|
|
|
|
|
- Installer Grunt et Grunt-cli
|
|
|
```
|
|
|
npm install grunt grunt-cli
|
|
|
export PATH=$PATH:`pwd`/node_modules/grunt-cli/bin/grunt #cela permet de pouvoir directement exécuter grunt sans spécifier le chemin complet
|
|
|
```
|
|
|
|
|
|
- Installer phantomjs
|
|
|
```
|
|
|
npm install phantomjs
|
|
|
```
|
|
|
|
|
|
- Installer grunt-croc-qunit et dépendances
|
|
|
```
|
|
|
npm install grunt-contrib-connect serve-static #permettent de créer facilement des serveurs web statiques
|
|
|
npm install grunt-croc-qunit #permet de lancer les tests qunit en ligne de commande
|
|
|
npm install istanbul grunt-istanbul #permettent de réaliser des mesures de couverture sur les tests
|
|
|
```
|
|
|
|
|
|
### Exécuter des tests QUnit
|
|
|
|
|
|
- Afin d’exécuter les tests en utilisant Grunt, il faut définir un fichier gruntfile.js dans lequel vous configurez la tâche d'exécution de tests qunit :
|
|
|
|
|
|
```
|
|
|
|
|
|
module.exports=function(grunt){
|
|
|
|
|
|
grunt.initConfig({
|
|
|
qunit:{ //configurer la tâche qunit
|
|
|
options: {
|
|
|
'phantomPath': 'node_modules/phantomjs/bin/phantomjs', //indique le chemin pour lancer phantomjs
|
|
|
timeout:5000 //timeout phantomjs pour les requêtes
|
|
|
},
|
|
|
all: ['test/*.html'] //exécuter tous les tests tests *.html dans le dossier test
|
|
|
}
|
|
|
});
|
|
|
|
|
|
grunt.loadNpmTasks('grunt-croc-qunit'); //charger les tâches disponibles en grunt-croc-qunit dont qunit décrite précédement
|
|
|
grunt.registerTask('default','qunit'); //par défaut lors de l'appel grunt on exécute la tâche qunit
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
- Si vous tests redéfinissent la méthode window.alert vous devriez les ré-écrire partiellement, car la function window.alert est utilisée par grunt-croc-qunit. Pour éviter tout effet de bord:
|
|
|
- sauvegarder le contenu de window.alert avant re-définir.
|
|
|
- ré-définir à votre convenant la fonction window.alert
|
|
|
- après avoir réalise le traitement spécifique de votre test, remettez window.alert à son contenu initial
|
|
|
|
|
|
```
|
|
|
var old_alert=window.alert;
|
|
|
window.alert=function(){...};
|
|
|
//appels provoquant la levée des alertes
|
|
|
...
|
|
|
|
|
|
//re-mettre en place la version normale de window.alert
|
|
|
window.alert=old_alert;
|
|
|
|
|
|
//assertions ou autres
|
|
|
ok(...);
|
|
|
```
|
|
|
|
|
|
### Obtenir des données de couverture
|
|
|
|
|
|
Afin d'obtenir les données de couverture plusieurs étapes doivent être réalisées :
|
|
|
- instrumenter le code .js de telle sorte à ce que lors de l'exécution des traces soit générées. La tâche coverageInstrument doit être configurée dans ce sens. Dans le code ci-dessour on instrumente le code .js qui se trouve dans le dossier "src" (src: 'src/*.js') à la racine de votre projet. Si besoin, renommer le filtre pour qu'il reflète la structure de votre code (par exemple, src: 'js/*.js').
|
|
|
- exécuter les tests, en remplaçant les sources .js avec les sources instrumentées. Afin de faciliter ce processus, nous pouvons faire usage des packages nodejs de générer des serveurs à la volée et d'éxecuter les scripts dans un environement ou les sources js sont associées aux sources instrumentées.
|
|
|
- Ce processus est rendu possible par l'utilisation des packages connect et serve-static qui mettent en oeuvre un serveur web, au quel on peut associer plusieurs dossiers en passant par les objets de type "middleware".
|
|
|
- Ainsi, nous personnalisons un middleware qui permet de charger dans le serveur différents dossier locaux. La fonction mountFolder va lier différents dossiers locaux aux dossiers en ligne (alias). Ainsi, en appelant mountFolder(connect,"src",".tmp/src"), il est possible de faire en sorte que lorsque l'on accède à http://localhost:port/src qu'on accède en réalité à .tmp/src. Attention, de remplacer le src avec le chemin local (et inclut dans le test/*.html) pour vos sources.
|
|
|
- Par la suite, les tests qunit s'executent et des traces d'exécution sont gardées en .tmp/coverage.json
|
|
|
- Des données de couverture au format LCOV (pour compatibilité sonar) sont générées par makeReport
|
|
|
|
|
|
- La succession des tâches est définie par l'instruction grunt.registerTask('default',...);
|
|
|
|
|
|
```
|
|
|
var serveStatic=require('serve-static');
|
|
|
function mountFolder (connect, alias,dir) {
|
|
|
var y=require('path').resolve(dir); //chemin local du dossier
|
|
|
return connect().use("/"+alias,serveStatic(y)); //associe localhost:port/alias au chemin local du dossier
|
|
|
|
|
|
};
|
|
|
|
|
|
module.exports=function(grunt){
|
|
|
|
|
|
grunt.initConfig({
|
|
|
qunit:{
|
|
|
options: {
|
|
|
'phantomPath': 'node_modules/phantomjs/bin/phantomjs',
|
|
|
timeout:20000
|
|
|
},
|
|
|
test: {
|
|
|
options: {
|
|
|
urls: ['http://127.0.0.1:<%= connect.testcoverage.options.port %>/test/testXXX.html',
|
|
|
'http://127.0.0.1:<%= connect.testcoverage.options.port %>/test/testYYY.html']
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
connect:{
|
|
|
testcoverage: {
|
|
|
options: {
|
|
|
port: 9002,
|
|
|
hostname: '127.0.0.1',
|
|
|
middleware: function (connect) {
|
|
|
return [
|
|
|
mountFolder(connect, 'src','.tmp/src'), //remplacer les src originales avec les src instrumentées se trouvant en .tmp/src
|
|
|
mountFolder(connect, 'test','test'), //lier les tests
|
|
|
mountFolder(connect, OTHERS,OTHER), //indiquer autant de dossiers externes (libs, autres) nécessaires
|
|
|
]
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
coverageInstrument: {
|
|
|
test: {
|
|
|
src: 'src/*.js',
|
|
|
expand: true,
|
|
|
cwd: '.', //chemin de référence / home directory
|
|
|
dest: '.tmp' //les sources instrumentées se retrouveront dans .tmp/src
|
|
|
}
|
|
|
},
|
|
|
makeReport: {
|
|
|
src: '.tmp/*.json',
|
|
|
options: {
|
|
|
type: 'lcov',
|
|
|
dir: '.tmp/coverage/reports',
|
|
|
print: 'detail'
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
grunt.loadNpmTasks('serve-static');
|
|
|
grunt.loadNpmTasks('grunt-contrib-connect');
|
|
|
grunt.loadNpmTasks('grunt-istanbul');
|
|
|
grunt.loadNpmTasks('grunt-croc-qunit');
|
|
|
grunt.registerTask('default', [ 'coverageInstrument','connect:testcoverage','qunit','coverageReport','makeReport']);
|
|
|
}
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
## Intégration des données de couverture en Sonar
|
|
|
|
|
|
Mettez à jour le fichier sonar.project pour indiquer que les données de couverture se retrouvent dans .tmp/coverage/reports/lcov.info
|
|
|
|
|
|
```
|
|
|
...
|
|
|
sonar.javascript.lcov.reportPath=.tmp/coverage/reports/lcov.info
|
|
|
```
|
|
|
|
|
|
Relancez sonar-runner |
|
|
\ No newline at end of file |