• 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 07/03/2022

Mettez en place votre environnement de test

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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  ,   export  et  export 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.

Ici, la page d’accueil de notre projet Façadia.
Ici, la page d’accueil de notre projet Façadia.

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 ! 😀

Le résultat de notre test dans le terminal
Le résultat de notre test dans le terminal

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.

Exemple de certificat de réussite
Exemple de certificat de réussite