Mettez en place votre environnement de développement
Pour bien suivre ce cours, vous aurez besoin du code source du projet. Ce dernier est hébergé sur un repository GitHub. Clonez-le dès à présent, nous allons regarder ensemble le code source pendant ce chapitre !
C’est bon, vous avez le code du projet ? Parfait !
Maintenant, ouvrez le projet avec votre éditeur de texte préféré, nous allons nous lancer à sa découverte.
Si vous avez suivi le cours sur le débogage, il est possible que ce projet vous dise quelque chose : c’est normal, c’est le même ! Cela dit, si vous comparez le code source du projet de débogage avec l'actuel, vous verrez que pas mal de choses ont changé côté code :
Il y a maintenant un package.json. Ce fichier va nous permettre d’installer les librairies nécessaires.
L’architecture du code est un peu différente : il y a la présence d’un fichier de routage. Ce dernier permet, en fonction de l’URL appelée, d’exécuter la bonne fonction. Notre projet n’est plus simplement un site statique qui utilise du JavaScript, mais une application JavaScript.
Enfin, il y a aussi des
import,exportetexport default. Ces mots clés vont nous permettre de récupérer les fonctions que nous exportons.
Dans la vidéo ci-dessous, vous allez voir le code un peu plus en détail. Vous y verrez plus particulièrement comment fonctionnent les imports, les exports et les modules en JavaScript. :)
Vous savez donc maintenant :
Comment installer les librairies avec Npm.
Comment exporter et importer des fonctions et des variables.
Comment le routeur du projet fonctionne.
Comment sont organisés les différents fichiers.
C’est l’heure de découvrir le projet fil rouge !
Découvrez le projet fil rouge
Notre projet fil rouge permet de suivre des façades par le biais de capteurs. Ces capteurs nous donnent des informations telles que le degré d’humidité ou les coordonnées géographiques. Grâce à l’API WeatherCast et aux coordonnées GPS de chaque capteur, nous récupérons les données météorologiques pour chaque façade.
Le projet comporte quatre pages :
Une page de connexion où on va devoir rentrer son adresse e-mail et son mot de passe ;
La page d’accueil, qui comprend 34 capteurs récupérés via une requête HTTP ;
La page “façade”, qui donne des détails sur une façade ;
La page d’ajout d’une façade. Elle comprend un formulaire.
Vous pouvez jouer un peu avec l’application avant de passer au chapitre suivant. Si vous “cassez” le projet, pensez à faire un git checkout pour revenir à l’état initial.
Écrivez votre premier test
Bon, reprenons notre checklist :
✅ Récupérer le projet depuis GitHub
✅ Découvrir le code source du projet
✅ Présenter le projet fil rouge
▶️ Écrire un premier test pour regarder si tout fonctionne correctement
Quoi ? Déjà un premier test ? Mais nous n’avons même pas vu comment ça marche...
C’est vrai !
Cela dit, rassurez-vous. Le principe de ce test va surtout être de vous assurer que tout va bien, et que tout a été installé comme il faut. 😉
Le problème, c’est que ce test échoue 99 % du temps, et que vous allez perdre du temps à déboguer pour comprendre d’où peut venir le problème. Cela peut être dû à une librairie que vous avez mal paramétrée, ou à des fichiers avec des erreurs. En fait, vous aurez multiplié les sources de problème potentielles, et vous devrez détricoter le tout pour comprendre où ça coince.
Dans la vidéo ci-dessous, nous allons voir ensemble comment rédiger notre premier test : le helloWorld du test ! Pour cette vidéo, nous serons sur la branchepartie-1/chapitre-1-b .
Vous voyez ? C’était pas si compliqué ! Vous venez de réaliser votre premier test unitaire ! 😀
Vous pouvez retrouver le code du test sur la branchepartie-1/chapitre-1-b-solution .
Dans la capture d’écran ci-dessus, vous pouvez voir que votre console vous a affiché des informations intéressantes :
Elle vous indique le fichier qui a été testé. Ici, il s’agit du fichier
js/samples/unit/unit1.test.js.Elle vous donne le temps total d’exécution des tests, et le nombre de tests qui ont été réalisés ; nous reviendrons plus tard sur le terme “Test Suites”.
En résumé
Dans ce chapitre, vous avez récupéré le projet fil rouge depuis GitHub.
Vous avez découvert le projet fil rouge.
Vous avez installé les librairies nécessaires au projet grâce à Npm.
Vous avez écrit votre premier test unitaire, et ce dernier est passé !
Maintenant que vous avez un projet prêt à l’emploi, correctement installé et faisant tourner les tests, vous allez pouvoir découvrir l’objectif des tests automatisés.
