Vous allez maintenant installer Jasmine avant de rentrer dans les détails de son usage.
Vous avez deux options pour le télécharger :
Téléchargez les fichiers sources ici (
BowlingWithJasmine.zip), en sachant que la version de Jasmine a pu être mise à jour entre temps ;Téléchargez la version "standalone" vous-même de la page des releases de Jasmine.
Si vous optez pour la deuxième option :
1. Allez sur la page "Releases" de Jasmine sur GitHub et téléchargez la version la plus récente :
Dans le dossier que vous téléchargez, vous verrez la structure suivante des fichiers :
2. Un des dossiers s'appelle spec. Ouvrez le dossier spec et, à l'intérieur, créez un nouveau fichier appelé BowlingGameSpec.js .
3. Un autre dossier s'appelle src . Dans le dossier src , créez un nouveau fichier appelé BowlingGame.js .
4. Enfin, vous devez relier le fichier de test au fichier de code. Ouvrez SpecRunner.html dans votre éditeur de texte, supprimez tout, collez le contenu suivant et enregistrez le fichier :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.4.1</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.4.1/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-2.4.1/jasmine.css">
<script src="lib/jasmine-2.4.1/jasmine.js"></script>
<script src="lib/jasmine-2.4.1/jasmine-html.js"></script>
<script src="lib/jasmine-2.4.1/boot.js"></script>
<!-- include source files here... -->
<script src="src/BowlingGame.js"></script>
<!-- include spec files here... -->
<script src="spec/BowlingGameSpec.js"></script>
</head>
<body>
</body>
</html>Sinon, il suffit de télécharger les fichiers sources liés en haut du chapitre (BowlingWithJasmine.zip).
Maintenant que vous avez bien configuré vos fichiers Jasmine avec cette structure, commençons par écrire la première étape : les tests !
Les suites
Les suites et les spécifications sont les deux éléments nécessaires pour mettre en place vos tests. Malgré leurs noms différents, ce sont des fonctions auxquelles vous pouvez donner des noms qui sont faciles à lire.
Vous avez déjà vu des suites et des spécifications plus tôt dans ce cours, même si vous ne le saviez pas !
Une suite de tests fait référence à un groupe de tests qui testera la même fonctionnalité.
Par exemple, vous pouvez avoir une suite de tests qui teste un lecteur vidéo.
Que devez-vous tester ? 🤔
Est-ce que la vidéo se lit bien automatiquement lorsque la page est chargée ?
Est-ce que la vidéo se lance quand quelqu'un clic sur le bouton lecture ?
Ces micro fonctionnalités sont liées à la lecture d'une vidéo, et vous devriez tester le code qui les exécute.
Vous pourriez aussi tester la fonctionnalité qui arrête la lecture.
Est-ce que le bouton d'arrêt arrête effectivement la lecture ?
Est ce que le lecteur vidéo s'arrête lorsque la vidéo est finie ?
De même, vous devez tester ces micro-fonctionnalités multiples qui sont associées à l'acte d'arrêter une vidéo.
Les blocs "describe"
Dans Jasmine, vous configurez des tests de différentes fonctionnalités en créant d'abord un bloc describe . describe est tout simplement une fonction à laquelle vous passez une chaîne.
Chaque bloc de description testera les micro-comportements associés à la fonction globale !
Voici un exemple d'un bloc describe (aussi appelé une suite) :
describe("when video is played", function() {
// test video playing functionality here
});
Vous voyez le mot-clé describe , des parenthèses ouvertes : c'est le standard pour tout appel de fonction en JavaScript. Ensuite, vous voyez une chaîne qui décrit la fonctionnalité testée. Cela peut être en français (ou anglais) !
Vous pouvez également avoir des suites dans des suites, par exemple :
describe("Video player", function() {
describe("when the page loads", function() {
// test that the video plays upon page load
});
describe("when user clicks the play button", function() {
// test that when a user clicks the play button, the video plays
});
});Maintenant, nous allons jeter un oeil à l'autre concept important pour les tests : les spécifications.
Spécifications
Vous utilisez une syntaxe similaire à celle des suites pour écrire vos specifications ("specs" tout court), sauf qu'au lieu d'employer le mot describe , vous emploierez it , également une fonction Jasmine globale !
Comme vous avez fait pour describe , it prend une chaîne de caractères et une fonction comme arguments. La chaîne de caractères est le titre du test, qui doit être clair et lisible. La fonction contient le test lui-même.
Le bloc describe dit ce qui va être testé, et le spec dit ce qui doit normalement se passer.
Prenant l'exemple de lecteur vidéo ci-dessus, vous pouvez remplir les suites avec quelques spécifications.
describe("Video player", function() {
describe("when the page loads", function() {
it("should automatically play the video", function() {
};
});
describe("when user clicks the play button", function() {
it("should play the video", function() {
};
});
});Les suites et les spécifications vous permettent d'avoir une structure de tests qui est organisée par fonctionnalité. Grâce à cette structure, vos tests seront toujours organisés et agréables à lire.
Vos specs et vos suites seront seront beaucoup plus faciles à écrire si vous avez fait bien identifier vos besoins de code pendant la phase de BDD.
Exemple de bowling
Vous allez maintenant regarder les fichiers que vous avez créés dans la première partie de ce chapitre ! Ouvrez BowlingGameSpec.js . Vous ajouterez quelques tests dans ce fichier.
Dans les chapitres suivants, on utilisera cet exemple de bowling pour voir comment intégrer des specs, des suites, des résultats attendus, etc. 🎳
Vous verrez comment tester que :
Les scores des joueurs sont calculés correctement, par exemple si quelqu'un ne touche aucune quille pendant tout le match. Son score final devrait être zéro.
Les strikes et les spares sont calculés différemment des tours normaux.
Chaque match a 10 frames.
Afin d'écrire du code qui imite un jeu de bowling, commençons par le concept le plus simple. Un joueur lance la balle !
Pour chaque « tour », un joueur a deux chances (« lancers ») pour toucher des quilles.
Nous testerons deux scénarios généraux qui pourraient avoir lieu lorsqu'un joueur lance la balle :
Le joueur touche les 10 quilles, soit dès le premier lancer, soit au cours des deux lancers.
Le joueur ne touche aucune quille.
Les suites (bowling)
Commençons par le scénario le plus simple : toucher des quilles. Allez-y et écrivez une spec dans BowlingGameSpec.js , par exemple:
describe("Bowling game", function() {
// tests
});Dans la première ligne, j'ai ajouté une spécification pour l'ensemble du groupe de tests. Cela peut s'appeler "Bowling game" ou quelque chose de simple comme ça.
Les specs (bowling)
J'ai mentionné que lorsque vous touchez des quilles, le score d'un joueur devrait augmenter en fonction du nombre de quilles qu'ils touchent, non ? Le score du joueur devrait dépendre du nombre de quilles qu'il a touchées.
Ajoutez ça comme partie de votre spec (voir ligne #3 ci-dessous).
describe("Bowling game", function() {
it("should properly calculate a gutter game", function() {
// test
});
it("should properly calculate a strike", function () {
// test
});
it("should properly calculate a spare", function () {
// test
});
});Rappelez-vous, les blocs de description ( describe ) sont utilisés pour regrouper plusieurs spécifications liées. Regroupez vos tests en fonction de leurs comportements généraux !
Ici, vous avez une bonne configuration pour écrire trois de vos premiers tests. Pour résumer, vous écrirez des tests (et du code) pour gérer ce qui se passe quand un joueur :
Ne touche aucune quille pendant tout le match.
Fait un strike.
Fait un spare.
Dans le chapitre suivant, définissons ce que nous attendons comme résultat dans chacun de ces scénarios.
