JavaScript : Les tests unitaires et fonctionnels

Écrire un test à l'aide d'outils

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Écrire des tests n'est pas compliqué, il suffit de coder des suites logiques pour valider un code source. Dans cette vidéo, vous comprendrez pourquoi il ne faut pas faire de tests si vous n'avez pas les outils appropriés.
05:26

Transcription

Pour notre simple code ici, a-t-on besoin d'utiliser un outil pour faire des tests ? Pas réellement, en fait. Vous pourriez écrire un test vous-même, sans problème. En fait, vous pourriez tester votre site et écrire des tests. Je vais vous montrer. Un test consiste en quoi ? Un test va garantir que quelque chose se passe bien. On pourrait écrire à la main, ici, en partant du principe que notre application n'a qu'un seul say on va juste activer cette fonctionnalité-là, on va recharger la page et effectivement il n'y en a qu'un seul, un seul au chargement. A partir d'ici, on pourrait commencer à écrire des tests soi-même, à la main. C'est aberrant je vous assure, il ne faut pas faire ça car il y a des outils qui permettent d'écrire des tests et vont garantir que ces tests vont être proprement écrits. On peut en écrire soi-même, ce n'est pas un problème. Le simple test serait de vérifier que notre chat comporte bien un élément parce qu'actuellement on vient de lui insérer un objet say à l'intérieur, qui d'ailleurs est allé jusqu'au processus de génération, ce qui veut dire qu'actuellement notre code est stable et on pourrait s'amuser à le tester. On pourrait dire que chat.length serait = = = à 1 en fait la taille de notre array serait égale à 1 et que, dans ce cas-là, dans la console, on fera un console.log de true et, dans le cas où ça n'a pas fonctionné, on pourrait lui dire sinon, dans le cas contraire, tu vas me faire un consolge.log false et, à ce moment-là, je vais avoir les deux possibilités. Si je recharge ma page, mon premier test qui au final est un test, ici qui va venir tester la concordance de taille de mon chat par rapport à ce que j'ai fait précédemment, va me valider que c'est bon. Si je m'attends ici à avoir du 2 à ce moment-là, ça ne va pas fonctionner. Pour le valider, je vais être obligé d'avoir un peu plus de jeux de test et de faire une deuxième fois un say Ju salut pour avoir une taille à 2 A ce moment-là, je vais valider le test. Vous voyez l'idée de la validation. On pourrait aller plus loin et dire que maintenant je vais tester que mon front réagit bien et que je récupère bien ce qu'il me faut. Je vais créer une var qui va s'appeler text ou alors bodyText et à l'intérieur je vais venir stocker mon bodyText et je vais utiliser le document.querySelector qui me permet de récupérer des éléments document.querySelector comme ça. A l'intérieur je vais lui dire que je veux récupérer le body puisque c'est dans le body qu'on génère et je vais aussi lui dire que ce qui m'intéresse c'est l'innerHTML Vous voyez que ça commence à faire pas mal de lignes pour ne récupérer pas grand-chose. Ici, j'ai mon texte donc maintenant je vais pouvoir créer une pattern, une pattern est une ray gates, je vais lui dire que ce que j'attends c'est Ju : et Salut plus loin. Vous remarquez aussi qu'il y a un espace ici ce qui veut dire qu'il ne fait pas se tromper et mettre le bon pattern qui va permettre de valider que notre interface réagit bien et fait ce qu'on a demandé. Vous allez faire un console.log de pattern.test car on va tester une String qui est le bodyText pour vérifier qu'il y a bien ce qu'il faut à l'intérieur. Donc vous venez d'écrire un test qui va valider votre fonctionnalité render qui est sensée faire un rendu du display chat, le display chat est sensé récupérer les informations et les mettre dans le bon sens. On n'a simplement validé que, quand je mets une phrase, elle vient à l'intérieur directement. On remarque que c'est vrai. On pourrait encore en écrire un autre qui nous permettrait de valider que, quand je vais récupérer l'information, je vais l'avoir dans le sens inverse parce que je sais que si c'est Ju qui parle d'abord et Chris ensuite qui parle, je ne vais plus avoir, ici, la bonne information, je ne vais plus avoir ici que Ju salut mais je vais avoir Chris salut Ju salut donc je peux valider cette partie-là. Le problème d'écrire les tests à la main c'est qu'on ne sait pas vraiment ce qu'on va récupérer à l'intérieur de bodyText donc il va falloir, ici, faire un console.log pour voir ce qui se trouve dedans pour écrire le test qui justifie que ça passe bien. Vous voyez l'idée, c'est cela qu'on va récupérer et ce n'est pas très clair, on va récupérer Chris salut<brJu : salut c'est cette pattern-là qu'on va devoir tester pour faire passer le test. Dans le cas contraire, le test ne passe plus. Vous pouvez remarquer qu'en implémentant celui-la, au-dessus, notre test du dessus ne fonctionne plus, il va falloir le remettre à 2. On a donc beaucoup de choses à modifier à la main quand on commence à écrire des tests soi-même mais c'est tout à fait possible. Vous avez la possibilité d'écrire vos tests vous-même. Vous allez quand même voir qu'en se basant sur un framework pour écrire des tests, ça va vraiment d'abord améliorer votre façon de coder et puis surtout nous n'aurez pas à écrire tout cela, les tests sont déjà prévus pour avoir ce qu'on appelle des assertions donc on va vérifier que quelque chose est égal à autre chose et on va le faire de la façon la plus simple possible. Là, vous avez deux exemples, un test unitaire, un test fonctionnel, on va en reparler puisque je vais vous expliquer la différence entre les deux, il y a une vraie différence. On va laisser cette partie-là, comme ça. Les tests, actuellement, fonctionnent et le pattern Ju salut est bien trouvé. Maintenant, ce n'est pas ce pattern Ju salut qu'on aurait du tester, voyez qu'il y a plein de cas que l'on va devoir tester plus en profondeur pour avoir des tests qui veulent dire quelque chose. Pour le moment, c'est un test à la main, pas vraiment viable, en tout cas je ne vous recommande vraiment pas d'écrire vos tests vous-même, comme ça, basez-vous vraiment sur un framework pour le faire.

JavaScript : Les tests unitaires et fonctionnels

Réalisez des tests unitaires avec Jasmine et des tests fonctionnels avec CasperJS. Testez le code source et le rendu visuel de votre application, et optimisez vos développements.

1h54 (31 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Jasmine Jasmine 2.5
CasperJS CasperJS 1.1.4
Spécial abonnés
Date de parution :5 avr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !