Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Tests Unitaires avec Flash Builder et FlexUnit 4

Compatible Flash Builder 4. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par slyc3 (DOMIN Steve), le 09 septembre 2010

Bienvenue dans ce tutoriel qui traite de la mise en place de tests unitaires dans vos projets Flash/Flex à lʼaide du framework Flex Unit dans Flash Builder.

Un test unitaire est un moyen de sʼassurer quʼune partie de votre code vous fournit toujours le résultat que vous attendez d'elle. Ce test permet de sʼassurer, au fur et à mesure des modifications, que ce morceau de code fonctionne toujours, et ceci indépendamment du reste de lʼapplication.

Si vous voulez une définition plus précise du test unitaire je vous invite à vous rendre sur la page wikipédia dédiée à ce sujet : http://fr.wikipedia.org/wiki/Test_unitaire

Jusquʼà maintenant la mise en place de tests unitaires avec les versions précédentes de Flash Builder (Flex Builder) nʼétait pas très aisée.

Cette époque est maintenant révolue. En effet, depuis la dernière version de Flex Builder, qui au passage change de nom pour Flash Builder, le framework FlexUnit est maintenant intégré à lʼIDE. Concrètement cela se traduit par la possibilité de créer un nouveau test ou une suite de tests, de lancer votre projet en mode Normal/Debug/Profile tout en exécutant les tests unitaires et enfin, par un panneau spécialement dédié à lʼanalyse des résultats de ces tests.

FlexUnit : À lʼinverse de ce que son nom laisse penser, FlexUnit est un framework permettant de créer des tests unitaires pour vos projets Flex ainsi que Flash (AS3). Il est aussi bon de noter que FlexUnit est un projet open-source maintenu par Adobe. Pour en savoir plus
http://opensource.adobe.com/wiki/display/flexunit/FlexUnit

Sans tarder, commençons notre premier projet utilisant FlexUnit.

Prérequis
Flash Builder : http://adobe.com/fr/products/flashbuilder/

Création du projet

Commençons par créer un nouveau projet ActionScript.
Pour cela, dans le Package Explorer, effectuez un clic droit et sélectionnez “New > ActionScript Project”.
Nommez votre projet. Personnellement, jʼai choisi de lʼappeler TestsUnitaires. Cliquez sur Finish.

Flash Builder crée alors une classe, TestsUnitaires, qui est la classe principale de votre projet. Pour lʼinstant nous allons la laisser vide et nous concentrer sur la mise en place de notre premier test unitaire.

Création de nos premiers tests

Création de la classe qui sera testée

Avant d'aller plus loin nous allons créer une classe, appelons-la MaClasse, qui sera la classe que nous testerons plus tard. Dans cette classe nous allons juste déclarer une variable de type Booléen et créer une fonction qui retourne le premier caractère dʼun mot quʼon lui passe en paramètre.

Pour la créer, clic droit sur votre projet dans le Package Explorer puis “New > ActionScript Class”.
Entrez juste MaClasse dans le champ Name et cliquez sur Finish.

Remplacez ensuite le code que vous trouvez par celui-ci :

package
{
	import flash.display.Sprite;
 
	public class MaClasse extends Sprite
	{
		public var unBooleen:Boolean;
 
		public function MaClasse()
		{
 
		}
 
		// Quelle que soit la chaîne que nous lui passons cette méthode doit
		// nous retourner le premier caractère
		public function retournerPremierCarac(prenom:String):String
		{
			return prenom.charAt(0);
		}
	}
}

Création de notre classe de test

Nous allons maintenant créer une classe de test dans notre projet. Pour cela, effectuez un clic droit sur votre projet et sélectionnez “New > Test Case Class”.

Vous vous trouvez maintenant devant la fenêtre de création dʼune nouvelle classe de test. Vous avez le choix entre FlexUnit4 et FlexUnit1. FlexUnit4 est sélectionné par défaut. Cʼest la dernière version du framework et cʼest celle que nous allons utiliser pour ce tutoriel.
Vous pouvez changer le package par défaut si vous le souhaitez. Dans mon cas je choisis de laisser tel quel.
Choisissez un nom pour votre classe de test. Pour ce tutoriel, jʼai mis “MonTest”.
Vous voyez que Flash Builder a déjà rempli le champs superclass pour nous. Vous nʼavez pas à changer ça.
Enfin vous apercevez plus bas un champs “Class to test”, cliquez sur Browse et choisissez la classe que vous souhaitez tester avec cette classe de test, à savoir, dans le cadre de ce tutoriel, MaClasse.

Cliquez sur Next.
Vous arrivez sur une fenêtre qui vous sera très utile à l’avenir. En effet elle vous permet de choisir les méthodes pour lesquelles vous voulez que Flash Builder génère des tests.
Pour l’instant ne cochez rien du tout.
Cliquez sur Finish.

Note :
Vous ne pouvez effectuer des tests que sur les méthodes publiques. Les getters et les setters n’apparaîtront pas dans la liste.

Description du code de notre classe de test

Remplacer le code de la classe que vous venez de créer par celui-ci :

package flexUnitTests
{
	import flexunit.framework.Assert;
 
	public class MonTest
	{
		private var classToTestRef:MaClasse;
 
		[Before]
		public function setUp():void
		{
			classToTestRef = new MaClasse();
		}
 
		[After]
		public function tearDown():void
		{
			classToTestRef = null;
		}
 
		[BeforeClass]
		public static function setUpBeforeClass():void
		{
 
		}
 
		[AfterClass]
		public static function tearDownAfterClass():void
		{
 
		}
 
		[Test]
		public function testMaClasse():void
		{
			Assert.fail("Test method Not yet implemented");
		}
 
		[Test]
		public function testRetournerPremierCarac():void
		{
			var a:String = "uneChaine";
 
			Assert.assertEquals("u", classToTestRef.retournerPremierCarac(a));
		}
 
 
	}
}

Tout commence avec la propriété classToTestRef qui contient la référence de la classe que nous testons. Cela permet de créer une instance de notre classe et de forcer le compilateur à importer la classe quand nous lançons nos tests.

Les deux éléments importants qui suivent sont les méthodes setUp() et tearDown().
La méthode setUp(), comme son nom l’indique, crée une nouvelle instance de notre classe de test, la configure et s’assure que tout est bien mis en place pour que nous puissions réaliser notre test.
La méthode tearDown() permet de détruire l’instance de notre classe de test quand les tests sont finis.
C’est important lorsque l’on a de nombreux tests, pour des questions de performance.

En réalité tous nos tests seront des méthodes que nous ajouterons à cette classe. Quand nous lancerons un test, la méthode setUp() sera appelée, nos méthodes de test seront exécutées, puis la méthode tearDown() sera appelée à la fin.
Pour l’instant seuls deux tests sont mis en place, un pour tester le constructeur de la classe et un autre pour tester la méthode retournerPremierCarac().

Examinons un peu le code de la méthode de test testRetournerPremierCarac:
Le premier paramètre est la lettre u, la première lettre de notre chaîne de test.
Le deuxième paramètre est le résultat de l’appel de la méthode retournerPremierCarac() sur la chaîne uneChaine.
Nous passons ces deux éléments en paramètres d’une méthode, Assert.assertEquals().

Comme vous l’avez certainement deviné, cette méthode permet de vérifier que les éléments que nous lui passons en paramètres sont égaux.
C’est notre premier test, dans le domaine des test unitaires, on appelle ça une assertion.
Je vous présenterai plus loin toutes ces assertions.

Lancer un test

Pour lancer ces tests, cliquez sur le menu Run, puis faîtes Run > Flex Units Test.
Vous devriez voir une nouvelle fenêtre, cette dernière va vous permettre de choisir quelles classes de test nous voulons exécuter et même les méthodes à tester.
Cochez “MonTest”.

Cliquez sur Ok.
Vous devriez voir une page html s’ouvrir et peut-être se refermer immédiatement. Ça tombe bien, elle ne nous est pas utile (cette page affiche en fait les résultats de nos tests).
Si ce n’est pas déjà le cas, fermez cette page et retournez sur Flash Builder.
Vous devriez voir un nouveau panneau ouvert, FlexUnit Results. Si ce n’est pas le cas, faîtes Window > Other Views > Flash Builder. Sélectionnez FlexUnit Results et cliquez sur Ok.
Ce panneau contient tous les résultats de nos tests. En haut vous pouvez voir le nombre de tests effectués/le nombre de tests demandés, le nombre de tests qui ont échoué et enfin le nombre d’erreurs.
Il vous permet de parcourir la liste des tests effectués, et en cas d’échec de ce test d’afficher dans la partie “Failure Trace”, les sources du test qui a échoué.

Notez que si vous souhaitez afficher seulement les tests qui ont échoué il vous suffit de cliquer sur le point d’exclamation rouge (!) en haut à droite.

Un point sur les assertions

Introduction

Chacune des assertions suivantes vous permet de tester un comportement en particulier.
Il s’agit des assertions les plus communément utilisées :

assertEquals : permet de tester si une valeur est égale à une autre.
assertFalse : permet de tester si une valeur est égale à “false”.
assertNotNull : permet de tester si une valeur n’est pas égale à “null”.
assertNotUndefined : permet de tester si une valeur n’est pas égale à “undefined”.
assertNull : permet de tester si une valeur est égale à null.
assertStrictlyEquals : permet de tester si deux valeurs sont strictement égales.
assertTrue : permet de tester si une valeur est égale à “true”.
assertUndefined : permet de tester si une valeur est égale à “undefined”.

Dans la suite je vais vous montrer quelques exemples utilisant une partie de ces assertions.

Assert not null

Ici, nous voulons simplement vérifier que l’instance de notre classe n’est jamais null.

[Test]
public function testMonInstance():void
{
	Assert.assertNotNull(classToTestRef);
}

Ajoutez cette méthode à votre classe de test et lancez-les.
Vous devriez maintenant avoir deux succès et un échec.

Assert true

Dans la méthode setUp() rajoutez la ligne suivante :

classToTestRef.unBooleen = true;

enfin, rajoutez la méthode de test suivante :

[Test]
public function testEstVrai():void
{
	Assert.assertTrue(classToTestRef.unBooleen);
}

Vous devriez maintenant avoir trois succès et un échec.

Assert undefined

Nous voulons tester si notre instance est égale à undefined.
Rajoutez la méthode suivante :

[Test]
public function testEstUndefined():void
{
	Assert.assertUndefined(classToTestRef);
}

Si vous exécutez ce test vous devriez avoir trois succès et deux échecs.
Vous pouvez consulter les raisons de cet échec dans la partie “Failure Trace”. Il devrait y être écrit : “Error:object was not undefined”.
En effet, au moment où nous exécutons ce test, notre instance est encore bien définie. Si vous rajoutez la ligne suivante avant la ligne de l’assertion vous devriez avoir quatre succès :

classToTestRef = undefined;

Conclusion

Vous voilà prêts à utiliser les tests unitaires dans vos propres projets.
N’hésitez pas à en abuser sur de gros projets car ils permettent réellement de détecter rapidement les problèmes éventuels dans votre code, et surtout de localiser l’origine de ces problèmes (un webservice qui renvoie une valeur null alors que vous attendez un objet, une méthode qui ne traite pas les données comme vous l’attendez…).
Il existe d’ailleurs une méthode de développement exclusivement bâtie autour de ces tests unitaires : il s’agit du Test Driven Development.
Si le sujet vous intéresse vous pouvez certainement trouver de très bons ouvrages traitant du sujet.

Les sources

En savoir plus

http://docs.flexunit.org/index.php?title=GettingStarted : Getting Started en anglais sur FlexUnit 4

N’hésitez pas à me contacter pour toutes questions : slyc3isback@me.com