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

Utiliser la souris avec CasperJS

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Avec un clic de souris, vous pourrez interagir avec la page et développer de vrais scénarios de test utilisateur. Ainsi, vous ferez comme si quelqu'un utilisait réellement votre interface.
05:15

Transcription

Nous allons apprendre à utiliser la souris avec CasperJS. Si on veut utiliser la souris avec CasperJS Il va bien falloir qu'on ait quelque chose à cliquer. Évidemment, vous pouvez cliquer des liens, attendre d'arriver sur la prochaine page pour faire quelque chose. C'est un des comportements. Mais nous, en l’occurrence, ce qu'on veut actuellement, ce serait avoir ici un bouton qui nous permette de valider le formulaire et pouvoir cliquer sur ce bouton. C'est assez simple à faire. Il suffira simplement de créer ici un petit bouton et de coder le comportement en Casper pour vérifier que ça clique bien, qu'il y a bien un fonctionnement. Je vais vous montrer ici pour que vous puissiez avoir la même chose que moi le CSS que j'ai appliqué sur le bouton. Ce n'est pas très compliqué. On a un petit CSS très simple et le rendu visuel, ce sera ça. On aura ici le bouton sur le côté. Qu'est-ce qui va se passer quand je vais cliquer sur le bouton ? Ca va soumettre. Donc si j'ai rien mis ici, forcément ça va soumettre et on va avoir ici le texte qui apparaît si j'ai rempli. Si je n'ai pas rempli, on va avoir rien du tout. Quoi qu'il arrive, en fait, le comportement qu'on a actuellement qui est le comportement de l'interface, quand j'appuie, il y a bien du texte qui apparaît, actuellement, il y a le texte «Julien». Bien sûr, on n'a pas fait le choix du pseudo, etc. C'est des choses que vous pourrez rajouter pour vous entraîner un peu plus tard. Maintenant, comment je vais coder ça ? On va ici le coder à l'intérieur de notre userCanChat. En fait, userCanChat, ça va déjà prendre en charge que le bouton peut être cliqué. Le bouton, c'est un nouvel élément. On va aussi penser à le rajouter à notre suite de tests. C'est hyper important de faire évoluer vos suites de tests au fur et à mesure de l'évolution de votre interface. On a ajouté un bouton. Parfait. Dans ce cas-là, on va coder qu'il y a un bouton ici et on va le valider. Ensuite, on va s'attarder sur la souris. Qu'est-ce qu'on peut faire avec la souris et Casper ? Je vous propose d'aller regarder la documentation pour le click. Le click nous permet de passer un sélecteur et puis de demander simplement de cliquer. On voit effectivement ici qu'on peut aussi lui donner des nombres. Les nombres vont vous permettre de placer soit le curseur sur des liens dans une liste ou alors ça va vous permettre de placer précisément en fait à l'endroit où vous commencez et puis, à combien de pourcentage du haut, à combien de pourcentage de la gauche. Donc ça, ça vous permet aussi de gérer l'emplacement de la sourisc ce qui est quand même une très bonne chose. Ensuite pour cliquer, rien de plus simple. On va simplement utiliser le casper.click ou this.click si on est à l'intérieur d'un casper. quelque chose et puis on va aller récupérer ici le bouton qui, chez nous, va s'appeler simplement «bouton». Et on va cliquer dessus. Et ça, ça va être suffisant pour cliquer. this.click, et «bouton». Alors ici, il a cliqué sur le bouton. Qu'est-ce qui vous garantit qu'il clique sur le bouton ? Vous allez voir, rien du tout. Imaginons qu'ici, je joue ma suite de tests en console. Je vais bien avoir ici les éléments au-dessus donc les quatre éléments et puis après, regardez, je n'ai aucun message, je ne peux pas savoir ce qui s'est passé réellement. Ça c'est un petit problème de Casper, c'est qu'il y a pas vraiment de retours sur ce genre de choses. Mais vous pouvez tout à fait utiliser this.echo ici pour donner de l'information. Je vous conseille toujours de mettre ici this.echo quelque chose quand vous effectuez des actions. Parce que, quand vous effectuez des actions, c'est bien de savoir dans l'interface de test que vous êtes en train de faire des choses et il faut le documenter et le documenter, ça passera par le this.echo. Donc là, on va simplement mettre «user click the button». Comme ça, quand vous allez jouer la suite de tests ici, vous allez avoir l'information ce qui va être un peu plus parlant que de le laisser comme ça. Maintenant, j'ai envie de vérifier si ça a fonctionné. Qu'est-ce que je vais pouvoir faire ? Je sais que quand je clique sur ce bouton, il y a «Julien» qui apparaît dans la page. Je pourrais simplement demander à Casper de me donner l'information et de vérifier s'il y a bien un texte. Là encore, on va refaire un tour du côté des assertions. On va regarder au niveau des assertions s'il y a pas une assertion intéressante. Je vous conseille à chaque fois de faire ça c'est-à-dire d'aller regarder ce qui existe et de se dire : « Alors attendez, est-ce qu'il n'y a pas une petite assertion intéressante pour moi ? » Regardez, celle-ci, elle est géniale. assertTextExists. On va vérifier partout dans la page s'il y a un texte qui existe. Donc on va faire un petit this.assertTextExists et attention, ça passe par test non pas par this this, c'est relatif à Casper, test, c'est vraiment l'environnement test donc, faites un test assertTextExists. Et ici, on va demander un texte. Alors attention, si je demande le texte « Julien » avec une majuscule, il me le trouvera pas. Forcément, parce lui s'attend à trouver quelque chose de vraiment très précis. Donc vous devez être précis quand vous écrivez vos tests sous peine de les voir échouer. Malheureusement, il faut vraiment être très précis quand on écrit un test fonctionnel, il faut que ça fasse exactement ce qui se passe à l'écran. Maintenant, on va bien sûr faire évoluer le chiffre. On a une assertion, on met un 1. Bien sûr, les comportements d'interface, cliquer, se déplacer, etc. remplir un formulaire, ce ne sont pas des tests. Ce ne sont pas des assertions donc on n'est pas obligé ici de les référencer, c'est vraiment du comportement. Par contre ici, on va bien valider que le click va être utilisé et va nous permettre d'afficher un texte à l'écran, c'est exactement ce qu'on veut. On va relancer et on va voir qu'effectivement ici, on a cliqué sur le bouton, on a bien, du moins le framework, a bien trouvé le texte qu'on lui a demandé directement dans l'interface. Ça c'est génial parce que ça va vous permettre de créer des vrais comportements et des vrais scénarios d'utilisation de l'application.

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 !