JavascriptTDD
mardi 30 octobre 2007
Ajouter des fonctionnalités Ajax se fait de plus en plus sur des applications web existantes. Pour garantir la qualité du code Javascript créé, il est nécessaire d’appliquer les principes du TDD sur le code javascript de la même façon que sur le code Java,Perl,Python.
Cet article présente rapidement comment faire du TDD en javascript. Il s’attache à présenter les frameworks de test Javascript JSUnit et JSMock.
JSUnit
JSUnit est un framework de tests unitaires Javascript côté client, c’est un portage de JUnit en Javascript. Les mêmes fonctions existent: assertEquals, assertTrue, fail,…
Exemple Hello world
- Télécharger JSUnit
- Déziper dans le répertoire jsunit
- Créer une page test.html
<html>
<head>
<script src=“jsunit/app/jsUnitCore.js”></script>
<script>
function testOK() {
}
</script>
</head>
<body>
</body>
</html>
- Ouvrir le fichier jsunit/testRunner.html et ajouter le fichier test.html
- Cliquer sur le bouton Run
- Vérifier la présence de la barre verte
- Modifier le fichier test.html:
<html>
<head>
<script src=“jsunit/app/jsUnitCore.js”></script>
<script>
function testHelloWorld() {
assertEquals(“hello world!”,helloworld );
}
</script>
</head>
<body>
</body>
</html>
- Lancer le script et vérifier la présence de la barre rouge
- Modifier le fichier test.html:
<html>
<head>
<script src=“jsunit/app/jsUnitCore.js”></script>
<script>
function testHelloWorld() {
assertEquals(“hello world!”,helloworld );
}
function helloworld {
return ’hello world!’;
}
</script>
</head>
<body>
</body>
</html>
- Lancer le script et vérifier la présence de la barre verte
Intégration de JSUnit dans l’environnement Eclipse
Il existe un plugin Eclipse permettant de lancer des tests jsUnit dans l’environnement Eclipse comme le plugin JSUnit:
- Télécharger le plugin http://downloads.sourceforge.net/jsunit/eclipse_plugin1.0alpha3.zip?modtime=1143183913&big_mirror=0
- Déziper le contenu dans le répertoire d’eclipse
- Afficher la vue JSUnit à partir du menu …
- Paramétrer le plugin JSUnit à partir de Options > Preferences > JSUnit:
- Entrer le chemin d’installation de jsUnit (le répertoire déziper, par exemple c:/junit)
- Entrer le chemin des navigateurs à tester, par exemple c:/Program Files/Internet Explorer/iexplore.exe pour Internet Explorer
- Intégrer le fichier test.html dans un projet Eclipse
- Sélectionner ce fichier et faire Run as > JSUnit
JSMock
JSMock est un framework de tests javascript comme JMock pour Java. Il permet de tester les interactions avec des objets javascript. Dans le cas présent, nous allons modifier le fichier test.html pour mocker le comportement d’un objet Hello comportant la méthode helloworld
- Télécharger JSMock
- Modifier le fichier test.html
<html>
<head>
<script src=“jsunit/app/jsUnitCore.js”></script>
<script src=“jsmock.js”></script>
<script>
function testHelloWorld() {
var mockControl = new MockControl();
helloMock = mockControl.createMock(Hello);
helloMock.expects().helloworld().andReturn(’hello world!’);
assertEquals(“hello world!”,hello(helloMock));
}
</script>
</head>
<body>
</body>
</html>
- Vérifier la barre rouge
- Modifier le fichier test.html
<html>
<head>
<script src=“jsunit/app/jsUnitCore.js”></script>
<script src=“jsmock.js”></script>
<script>
function Hello {
this.helloworld {
return ’hello world!’;
}
}
function sayHello(objHello) {
return objHello.helloworld ;
}
function testHelloWorld {
var mockControl = new MockControl ;
helloMock = mockControl.createMock(Hello);
helloMock.expects .helloworld .andReturn(’hello world!’);
assertEquals(“hello world!”,sayHello(helloMock));
mockControl.verify ;
}
</script>
</head>
<body>
</body>
</html>
Ressources
publié par Jeff Helie à
13:29
0 commentaires
