Le document présente Jasmine, un framework de tests unitaires pour JavaScript, qui permet d'écrire et d'organiser des tests sans dépendance à d'autres bibliothèques. Il décrit les étapes pour configurer Jasmine, les structures de test comme 'describe' et 'it', ainsi que l'utilisation d'extensions supplémentaires pour tester le DOM et simuler des requêtes AJAX. Enfin, l'auteur partage son expérience en tant que développeur agile et indépendant, soulignant l'importance des tests dans le développement logiciel.

1. Tests unitaires JavaScript
Xavier NOPRE – 14/05/2013
GRENOBLE

2. Xavier NOPRE
@xnopre xnopre.blogspot.com
Indépendant
Développeur
Agiliste

3. Jasmine : C'est quoi ?
 Un framework de tests unitaires pour JavaScript
  fournit un cadre pour écrire les tests unitaires
 Indépendant d'autres librairies
 Ne nécessitant pas de DOM

4. Mise en route ?
 Le site et la doc : http://pivotal.github.io/jasmine/
 Télécharger le ZIP et dézipper :
 https://github.com/downloads/pivotal/jasmine/jasmine-
standalone-1.3.1.zip
 Afficher SpecRunner.html dans le navigateur
 Editer :
 Les tests dans le répertoire spec
 Le code dans le répertoire src
 Et pour mes tests ?

5. Jouer mes tests ?
 Editer SpecRunner.html :

6. Et ça ressemble à quoi ? 1/2
 Suite de tests :
describe("Ma suite de tests : ", function() {
...
});
 Suite dans des suites :
describe("Ma suite de tests : ", function() {
...
describe("Suite dans la suite: ", function() {
...
});
});

7. Et ça ressemble à quoi ? 2/2
 Code avant chaque test "before" :
beforeEach(function() {
...
});
 Test :
it("should display initial message", function() {
expect(xxx).toEqual(yyy);
});
 Etc …

8. Je veux voir !

9. Et tester le DOM ?
Extension jasmine-jquery :
 https://github.com/velesin/jasmine-jquery
 Ajoute des assertions spécifiques :
 toBe(selector), toBeHidden, toHaveCss, toHaveAttr,
toBeFocused, …
 Ajoute une API de chargement de fixtures HTML, CSS,
JSON
 Usage :
 Ajouter jasmine-jquery.js au test runner

10. Et tester mes requêtes Ajax ?
Extension jasmine-ajax :
 https://github.com/pivotal/jasmine-ajax
 Compatible avec jQuery
 Permet de "mocker" les requêtes jQuery.ajax pour :
 Vérifier ces requêtes et leurs paramètres
 Simuler leurs succès, échecs, et données renvoyées
 Usage :
 Ajouter jasmine-ajax.js au test runner

11. Et actuellement, t'en es où ? (REX)
 Jasmine (ou autre) : super !
 Traitement de données, formatages, … : OK !
 Tests sur le DOM : ….
 Investissement important
 Très proche du rendu (trop ? …)
 Mais bien pratique !
 Exemples

12.  Xavier NOPRE :
 Développeur logiciel passionné (Java &Web)
 Pratique et partage l’agilité depuis 2007
 Indépendant. Missions :
 Développements sur mesure et accompagnement de projet
 En mode agile
 Coaching en agilité, Scrum, et ingénierie agile
MERCI
@xnopre xnopre.blogspot.com

13. Annexes
Retrouvez ici quelques captures des écrans
présentés lors de la session

14. Page de test Jasmine après unzip

15. Fichier : MesTests.js
describe("Ma suite de tests : ", function() {
var message;
beforeEach(function() {
message = "Hello HumanTalks";
});
it("should display initial message", function() {
expect(message).toEqual("Hello HumanTalks");
});
describe("Une 'sous' suite de tests : ", function() {
it("should add Grenoble", function() {
message = htgre.expandForHTGrenoble(message);
expect(message).toEqual("Hello HumanTalks Grenoble");
});
});
});

16. Fichier : MonCode.js
(function(){
window.htgre = {
expandForHTGrenoble: function(message) {
return message + " Grenoble";
}
};
})();

17. Page de test Jasmine avec mes tests démo