Slides et quelques captures d'écrans de ma présentation de Jasmine (pour les tests unitaires en JavaScript) lors de la soirée des Human Talks du 14/05/2013 à Grenoble

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