Premiers pas avec Jasmine : outil de test applications Javascript

Faîtes vos tout premiers pas avec l’outil Jasmine. Comprenez la notion de ’Behavioral Driven Development’ (BDD). Apprenez à tester avant de coder. Puis , d’échec en échec, créez progressivement votre code source, jusqu’à réussir votre test !

Téléchargement

Aller sur https://jasmine.github.io

PNG - 104.3 ko
tutoriel-jasmine-00

- Cliquez sur ’Releases’

PNG - 27.5 ko
tutoriel-jasmine-01

- Téléchargez le zip de la dernière version, ici 2.5.2

PNG - 3 ko
tutoriel-jasmine-1

- En local, dézippez

PNG - 5.9 ko
tutoriel-jasmine-2

Question : à quoi servent les répertoires ’spec’ et ’src’ ?

- Ouvrez dans un navigateur la page SpecRunner.html

PNG - 18.8 ko
tutoriel-jasmine-3

- En utilisant l’approche ’Given - When - Then’ des BDD (Behavioral Driven Development) initié par Dan North Expliquez le contenu de cette page

- Ouvrez dans un éditeur de texte la page SpecRunner.html

PNG - 129.3 ko
tutoriel-jasmine-4

- Expliquez l’impact de la suppression de la ligne de code associée au script PlayerSpec.js

PNG - 8.6 ko
tutoriel-jasmine-5

- 

PNG - 7.4 ko
tutoriel-jasmine-6

- 

PNG - 12.8 ko
tutoriel-jasmine-7

Création d’une suite de test

Considérons que nous devons tester un écrzn d’une application secteur Finance, permettant à l’utilisateur d’investir dans une action financière, de préciser le nombre de parts, et la valeur d’une part.

CRITERE D’ACCEPTANCE

Soit le critère d’acceptance suivant : "Etant donné un investissement, ce doit être une action" . Nous allons le tester avec Jasmine pas à pas.

Etape 1

Créer un fichier vide ’Investissement.js’ dans le répertoire ’spec’

PNG - 4.8 ko
tutoriel-jasmine-8

Etape 2

- Ajouter le code suivant :

PNG - 6 ko
tutoriel-jasmine-9

- Expliquez

Etape 3

- Ajouter le code suivant :

PNG - 9.2 ko
tutoriel-jasmine-10

Etape 4

- Ajouter le code suivant :

PNG - 8.7 ko
tutoriel-jasmine-11

Etape 5

- Rafraîchir la page SpecRunner.html (F5)

PNG - 19 ko
tutoriel-jasmine-12

- Expliquez

Etape 6

- Ajouter le code suivant :

PNG - 11.5 ko
tutoriel-jasmine-13

- Expliquez

Etape 7

- Rafraîchir la page SpecRunner.html (F5)

PNG - 44 ko
tutoriel-jasmine-14

- Expliquez

Etape 8

- Ajouter le code suivant :

PNG - 13 ko
tutoriel-jasmine-15

- Expliquez

Etape 9

- Rafraîchir la page SpecRunner.html (F5)

PNG - 7.8 ko
tutoriel-jasmine-16

- Exlpliquez

Etape 10

- Ajouter le code suivant :

PNG - 4.5 ko
tutoriel-jasmine-17

- 

PNG - 9.4 ko
tutoriel-jasmine-18

- 

PNG - 16.1 ko
tutoriel-jasmine-19

Etape 11

- Rafraîchir la page SpecRunner.html (F5)

PNG - 7.4 ko
tutoriel-jasmine-20

- Expliquez

Etape 12

- Ajouter le code suivant :

- 

PNG - 4.9 ko
tutoriel-jasmine-22

- 

PNG - 2.8 ko
tutoriel-jasmine-23

- 

PNG - 14.3 ko
tutoriel-jasmine-24

- 

PNG - 16.1 ko
tutoriel-jasmine-21

Etape 12

- Rafraîchir la page SpecRunner.html (F5)

PNG - 4.4 ko
tutoriel-jasmine-25

- Expliquez

PNG - 3.1 ko
tutoriel-jasmine-26

Projet final

Zip - 42.2 ko
jasmine-standalone-2.5.2-demo-bdd-objis

Pour aller plus loin

- Setup et TearDown
- describe imbriqué (nested describe)
- Comportement partagé
- Matchers prédéfinis et Matchers perso
- Extensions Jasmine JQuery
- Extensions Jasmine Ajax
- Vues
- Pattern Module
- Fixture HTML
- Pattern Observateur
- Mocking (Jasmine Spies)
- Packaging avec webpack
- Automatisation avec Phantom.js (headless browser) + Karma (spec runner)