Embed Size (px)
DESCRIPTION
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
Citation preview
Tests unitaires JavaScript
Xavier NOPRE – 14/05/2013
GRENOBLE
Xavier NOPRE
@xnopre xnopre.blogspot.com
Indépendant
Développeur
Agiliste
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
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 ?
Jouer mes tests ?
Editer SpecRunner.html :
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() {
...
});
});
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 …
Je veux voir !
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
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
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
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
Annexes
Retrouvez ici quelques captures des écrans
présentés lors de la session
Page de test Jasmine après unzip
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");
});
});
});
Fichier : MonCode.js (function(){
window.htgre = {
expandForHTGrenoble: function(message) {
return message + " Grenoble";
}
};
})();
Page de test Jasmine avec mes tests démo
