Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

JavaScript : Les tests unitaires et fonctionnels

Travailler avec les formulaires

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les formulaires peuvent être remplis comme si une personne le faisait réellement sur un ordinateur. Saisissez les champs, soumettez le formulaire et vérifiez que les données soient présentes à l'écran.
05:17

Transcription

Pour les formulaires, on va avoir aussi la possibilité de les remplir. Par contre, attention quand vous allez vouloir travailler avec les formulaires, il va falloir respecter quelques petites syntaxes. Notamment tous nos inputs doivent avoir obligatoirement des names parce que c'est avec les names qu'on va venir les travailler. De même, votre formulaire doit avoir un id, c'est obligatoire. Pensez-y, c'est comme ça que ça doit fonctionner, on doit avoir ici un id et des names sur le formulaire, c'est comme ça que ça marche. On a déjà l'id, pour notre input ici on va lui ajouter un name qui va être message et comme ça on va pouvoir facilement récupérer ses informations et les remplir. Sachez qu'avec ce framework de formulaire, on va pouvoir remplir tout et n'importe quoi. Il m'est déjà arrivé de tester endToEnd, d'aller jusqu'au bout d'un processus de paiement, de remplir carrément le paiement sur l'interface carte bancaire, vous savez, avec des données facultatives fournies par les fournisseur de paiement en ligne. Vous les remplissez, même sur un site externe. Vous pouvez allez très loin dans un processus de remplissage et un processus de test. Vous n'êtes jamais bloqué avec Casper, il faut le savoir, c'est très important. Ici, on va récupérer cette partie-là. C'est le this.file qui va nous intéresser essentiellement. Bien sûr, vous vous doutez qu'on va faire un casper.then et puis une fonction anonyme pour ajouter un comportement. Ça va toujours dans la suite de tests de l'utilisateur qui peut chatter car ça correspond vraiment. Puis on va faire un this.fill. Le this.fill qu'on a ici, il va falloir forcément le remplir à nos données à nous. On sait que notre formulaire, ici, va être le formulaire qu'on a là donc on va utiliser l'identifiant de notre formulaire, c'est-à-dire send et ensuite on va pouvoir remplir n'importe quel champ. Vous remarquez qu'on vous donne, ici, différentes valeurs. Par exemple un champ de type file, on va pouvoir le remplir en lui passant un document qui serait stocké sur la machine. On pourrait aussi venir travailler avec différentes cases à cocher, il y a les true, les false. On peut vraiment faire tout et n'importe quoi, c'est vraiment très intéressant comme framework. Ici, ce que vous allez lui demander, ça va être de remplir un des éléments du formulaire, nous c'est l'élément message, l'input message qu'on a là. On va utiliser ce name-là, message, et on va lui mettre, ici, le texte que l'on veut, par exemple : bonjour à tous. En mettant bonjour à tous comme ça, ça veut dire que, derrière, on va s'attendre à quelque chose de particulier. Le booléen que vous avez ici, qui est true, si vous ne le mettez pas, ça ne marchera pas. Si vous mettez true, ça validera le formulaire donc ça valide ou ça ne valide pas en fonction de. Ici, on peut le laisser à true, comme ça ça valide tout de suite le formulaire. C'est comme si vous aviez appuyé sur Entrée, pour valider le formulaire. Ce qui veut dire qu'on va pouvoir rajouter tout de suite derrière une assertion. Qu'est-ce qu'on va attendre cette fois-ci ? Ça va être un petit peu différent. On pourrait le tester pour vérifier ce qu'on va attendre dans l'interface. En réalité, vous le savez déjà. On va attendre Julien : et le message. On va recharger quand même. Je remplis, j'envoie. Voilà exactement la chaîne de caractères que l'on va attendre. Ça veut dire que celle-ci, on pourrait tout à fait venir ici et la rajouter à cet endroit-là, dans les assert de ce qu'on attend vraiment. Il y a quelque chose que vous pouvez faire aussi et qui peut être intéressant, c'est de préparer à l'avance, au-dessus, de petites variables qui vont avoir les différentes informations qui vous intéressent, pour les ajouter. En fait, des variables de configuration, vous pourriez avoir de la configuration et cette configuration la réutiliser à l'intérieur de vos tests. Ça pourra être très utile quand vous aurez beaucoup de tests. Pensez-y parce que ça va vous simplifier la vie, notamment sur tous les sélecteurs, le form send, si on l'utilise plusieurs fois, les différents champs, etc.. Ce sont des choses que vous pouvez mettre de côté en tant que configuration. Il n'y a plus qu'à tester. Est-ce que ça va fonctionner ? Que va-t-il se passer ? Là, ça marche mais il y a un problème. Quel est-il ? Vous vous souvenez ou pas ? On vient de rajouter une suite de tests donc on doit rajouter, ici, la suite de tests. Pensez toujours : j'ajoute une assertion, j'augmente le numéro de mes assertions sur ma suite. Petite chose importante : on n'a pas mis du tout de message. Ce serait bien, quand même, de mettre également ici un message : user fill the form and submit. Il soumet également, une fois qu'il a rempli le formulaire. Il remplit le formulaire et il soumet. A ce moment-là, on va avoir une suite de tests un peu plus jolie et qui fonctionne, jusqu'au bout. On vient d'implémenter six tests, ce n'est pas énorme mais ça veut dire qu'on commence à tester notre interface. On commence à avoir des suites de jeux de tests qui vont garantir que ça fonctionne bien, ce qui fait que, là, on est bien d'accord qu'on est en train de tester l'interface réelle, le fait de cliquer, remplir, etc... mais aussi de vrais comportements qui sont des comportements de code. Concrètement le fait d'aller remplir, comme cela et de mettre des informations, c'est ce que l'application doit faire, c'est la règle métier. Vous êtes en train de tester des règles métier et, en même temps, vous testez l'interface. C'est ce qui est intéressant avec Casper, c'est qu'on va avoir les deux aspects en même temps. On va tout tester en même temps, non seulement l'interface mais, en plus de ça, le code fonctionnel derrière, on sait que ça fonctionne, que ça marche et c'est exactement ce qu'on demande.

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 !