Tester unitairement mon code Javascript? Oui c'est possible!

Publié par Vincent Crépin le jeudi 25 avril 2013 à 07:16

Dans mon billet précédent j'ai révélé quelques aspects importants mais souvent méconnus de Javascript. J'ai également présenté des façons de se prémunir contre certains comportements du langage qui peuvent parfois nous jouer de vilains tours. Aujourd'hui, je vous propose d'aborder l’importante question des tests.

Les applications html5 ont en commun de proposer un modèle d'interaction très riche avec l'utilisateur. Pour y arriver, on n'a généralement pas d'autre choix que d'amener sur le poste client beaucoup de logique d'affichage en utiliant Javascript. Et qui dit logique dit risque de mauvais comportement. Sans une stratégie de vérification adéquate il devient malheureusement trop facile d'introduire par inadvertance une problématique dans la couche de présentation et de rendre une fonctionnalité inutilisable.

Habituellement, les tests au niveau des interfaces utilisateurs sont surtout des tests d’acceptation. Cependant, il peut être complexe et coûteux de tenter de couvrir tout le code Javascript à l'aide de ce type d'essais. Aussi, comme développeur, il est toujours intéressant d'avoir une rétroaction rapide en cas de problème, chose qui est souvent plus difficle avec des tests d'acceptation.

Personnellement, j’ai utilisé un framework de tests appelé QUnit (dans la famille JQuery) qui permet de rouler des tests complets des fonctionnalités disponibles dans les pages. Ce qui est très intéressant avec cet outil est la possibilité de manipuler le DOM et d'appeler toute fonction Javascript disponible dans le contexte. Cela permet à un développeur d'appeler de façon unitaire chacune des fonctions qu'il implémente.

L’installation et l’utilisation de QUnit sont extrêmement simples, comme l’illustre le code suivant tiré du site de QUnit:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="/resources/qunit.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="/resources/qunit.js"></script>
  <script src="/resources/tests.js"></script>
</body>
</html>

Voici le contenu de tests.js :

test( "simple test", function() {
      var value = "bonjour";
      equal( value, "bonjour", "Nous attendons la valeur bonjour" );
      });

Pour exécuter les tests, il s’agit simplement d’ouvrir le fichier html dans un navigateur et on obtient un résultat semblable à ce qui suit :

QUnit-basic-sample

Une fois que vous aurez procédé à quelques expérimentation avec QUnit, vous serez en mesure d'apprécier la capacité de celui-ci à garantir la coformité de la couche de logique de présentation de vos applications html5. L'outil supporte l'exécution des fonctions Javascript tout en permettant d'accéder et d'altérer le DOM, ce qui vous permet de simuler des cas assez complexes d'interaction. Avec un tel outil, il devient alors plus facile d'attraper les problématiques sans avoir à tester manuellement l'interaction avec votre application, surtout dans les cas limites (ceux que l'on oublie trop souvent de tester manuellement).

Un des principaux désavantage de ce type d'outil est que, par défaut, ces tests s’exécutent dans le navigateur et nécessitent donc certains ajustements pour être roulés dans un environnement d’intégration continue, mais c’est tout-à-fait faisable. Entre autres, PhantomJS permet de rouler les tests avec un navigateur headless. Un prochain bille fera état de la façon d'utiliser PhantomJS.

Références utiles

Voici quelques liens qui, je l'espère, vous permettront d'approfondir le sujet et de profiter vous aussi des bénéfices des tests unitaires avec Javascript.

blog comments powered by Disqus

0 Comments:

Post a comment

Comments have been closed for this post.