Ajouter les tests pour la page d'accueil

00:00:00 :Dans cette partie on va enfin tester autre chose que les modèles, on va tester la vue de la page d'accueil. Donc pour ça on va dans notre application store et dans le dossier test créer un nouveau
00:00:10 :fichier qui va nous permettre de tester les vues. On pourrait le faire à l'intérieur du même fichier mais on va préférer séparer les choses. Là on l'a appelé testmodels donc dans testmodels on va
00:00:19 :vraiment tester uniquement tout ce qui concerne les modèles et on va faire un nouveau fichier donc en faisant un clic droit ici, new python file pour tester les vues donc on va l'appeler testviews.py tout simplement et on va tester les vues à l'intérieur de ce fichier. Donc je vais
00:00:34 :réimporter depuis django.test le testcase donc import testcase donc jusqu'à présent ça ne va rien changer on va créer en fait une classe qui va également hériter de testcase. C'est
00:00:44 :vraiment juste par la suite qu'on va utiliser une technique un petit peu différente pour cette fois ci ne pas créer un produit mais vraiment tester en fait une url. Donc ce que je vais
00:00:52 :faire c'est déjà une méthode setup donc comme on avait fait pour les modèles dans laquelle je vais créer un premier produit donc on va faire self.product égale à product.objects.create et
00:01:03 :on va reprendre ce qu'on avait donc dans le modèle ici je vais reprendre tout ça en fait donc on va avoir à peu près le même setup je vais le mettre ici de la même façon et on va importer le product à partir de store.models. Donc ça c'est la méthode de setup et là où ça va différer c'est dans le
00:01:18 :test que l'on va créer. Donc on va faire un test qu'on va appeler products are shown on index page.Donc ce que je veux tester en fait ici c'est est ce que les produits sont correctement affichés est ce qu'ils sont bien visibles sur la page d'accueil quand on a un produit dans la base de
00:01:33 :données donc là on a ajouté des sneakers et on veut s'assurer que sur la page d'accueil ces sneakers sont bien affichés. Donc pour ça on va utiliser ce qu'on appelle un client qui est
00:01:42 :disponible avec ce testcase ici donc pour ça on va utiliser self.client et self.client ça nous permet de faire des requêtes en fait vers notre site donc dans ce cas ci on va faire une simple requête get on peut faire aussi des requêtes post là dans ce cas ci on veut juste récupérer une
00:01:57 :page donc on va faire une requête get et on va faire une requête vers la page d'accueil. Donc pour ça on va utiliser la fonction reverse qui est à l'intérieur de django urls qu'on utilise très souvent dans ce projet qui va me permettre de récupérer une url à partir de son nom. Donc
00:02:11 :là on va aller chercher dans shop urls on a l'url index ici qui redirige vers la page d'accueil donc c'est cette url qu'on souhaite récupérer avec la fonction reverse. Donc avec cette ligne
00:02:21 :ici on va faire une requête vers la page d'accueil et je vais récupérer la réponse dans une variable que je vais appeler resp donc c'est un raccourci en fait pour response des fois je mets r aussi tout simplement là je vais mettre un petit entre deux entre r et response ça me semble être
00:02:35 :suffisant. Donc cette variable elle va récupérer le résultat de la requête c'est vraiment le même comportement que ce qu'on pourrait faire par exemple avec le module request que vous avez peut-être déjà utilisé qui permet de faire des requêtes web donc quand on utilise request on peut faire un get on peut faire un post et quand on fait une requête on peut récupérer le résultat de
00:02:52 :la requête et vérifier des choses comme par exemple le code de statut donc qu'on va récupérer sur notre variable dans l'attribut status code et ce code il peut être donc de 200 par exemple 404 si on a une page d'erreur etc. Donc dans ce cas ci on va vérifier que ce statut est égal à 200 donc
00:03:08 :on va vérifier en fait que la page est correctement affichée et qu'on n'a pas d'erreur donc pour ça on va faire tout simplement un assert equal pour vérifier que resp.statuscode est égal à 200.
00:03:19 :Donc si c'est le cas et bien ça veut dire que la page a été correctement affichée et ensuite ce qu'on va faire c'est vérifier si le nom du produit est bien affiché sur la page d'accueil puisque si je retourne sur ma boutique ici vous voyez que quand on va sur la page d'accueil qu'est ce qu'on
00:03:33 :a on a le nom du produit on a l'image et c'est tout on n'a pas la description donc par exemple ici si on testait la description ça ne fonctionnerait pas donc nous ce qu'on va vérifier c'est juste si on a bien le nom du produit qu'on a créé dans notre base de données qui est affichée sur la
00:03:46 :page d'accueil donc si je reviens dans mon fichier ici on va vérifier avec un assert in cette fois ci donc on va vérifier si self.product.name est à l'intérieur du contenu de la page qui est
00:03:56 :retourné par cette requête donc le contenu de la page on peut le récupérer dans resp.content et resp.content ça va nous retourner un objet qui n'est pas une chaîne de caractère donc on va
00:04:05 :devoir le convertir en chaîne de caractère avec la fonction string donc avec assert in on va vérifier en fait que cette chaîne de caractère est à l'intérieur de cette chaîne de caractère donc assert in ici c'est exactement la même chose que si on avait un in comme ceci en python donc si
00:04:19 :par exemple on voulait vérifier que python est à l'intérieur de la chaîne de caractère python et javascript par exemple donc voilà c'est juste ça qu'on va vérifier avec assert in donc dans ce cas ci on va vérifier qu'on a bien sneakers.string à l'intérieur de tout le code html en fait de
00:04:34 :cette page donc normalement ça devrait être le cas si je fais un clic droit inspect et que à l'intérieur de ce code html je fais un commande f pour chercher je vais chercher sneakers et là on voit qu'on a bien le nom du produit qui est affiché donc ce assert in il devrait retourner vrai et
00:04:48 :notre test devrait fonctionner de la même façon que le assert equal ici devrait nous retourner un status code de 200 donc on va tester ce fichier donc je vais rouvrir mon terminal et cette fois ci on va aller tester ce fichier donc on va aller dans store.test.testviews et je vais valider avec
00:05:05 :entrée et là qu'est ce qu'on a on a un problème et alors le problème c'est quelque chose là encore dont on se rend compte en fait en créant notre test quel est le problème ici et bien c'est qu'on a l'attribut thumbnail qui n'a pas de fichier associé alors c'est quoi le
00:05:20 :problème en fait c'est que quand on a créé notre produit vous voyez ici on n'a pas passé d'éléments à thumbnail et pour l'instant si je reviens sur mon site quand j'actualise là ça fonctionne alors quel est le problème en fait c'est si je crée un produit ici que je fais ajouter
00:05:32 :produit je vais l'appeler donc sneakers duck strings et je ne mets rien d'autre alors là dans notre cas on avait mis un prix un stock et une description je pourrais mettre ça quand même pour avoir exactement la même chose donc je vais juste mettre ça de superbes sneakers mais je ne
00:05:47 :vais pas mettre d'image et donc le problème c'est que quand je ne mets pas d'image si j'enregistre cet article ici et que je retourne sur ma page d'accueil là on va retrouver exactement cette même erreur qui nous indique que l'attribut thumbnail n'a pas de fichier associé alors quel est le problème et bien c'est tout simplement que dans notre vue si on va voir dans la vue
00:06:04 :d'index qui doit être donc à l'intérieur de notre fichier de template ici dans index.html qu'est ce qu'on fait et bien on affiche thumbnail.url directement et donc là le problème c'est que si
00:06:14 :thumbnail ici ne contient rien et bien product.thumbnail ça va retourner non donc c'est comme si on faisait non.url et donc c'est pour ça qu'on se retrouve avec cette erreur alors
00:06:24 :qu'est ce qu'on peut faire là on pourrait être tenté de modifier notre test de dire que dans le cas où on n'a pas de thumbnail et bien on va tout simplement avoir une page d'erreur moi dans mon cas en fait ce que je préfère faire c'est fixer le code à la base puisque moi je veux
00:06:36 :permettre à quelqu'un de pouvoir ajouter un produit dans ma boutique sans forcément qu'il n'ait d'image associée donc moi je ne vais pas toucher au test je vais en fait corriger mon code donc ce qu'on va faire c'est qu'on va revenir dans le modèle donc dans le modèle de notre
00:06:49 :application dans product ici donc dans product on a le champ thumbnail et ce qu'on va faire c'est tout simplement rajouter une méthode donc je vais la mettre après le save ici et cette méthode on va l'appeler thumbnail url et qu'est ce qu'on va faire et bien on va tout simplement retourner
00:07:04 :thumbnail.url si on a un thumbnail et sinon on va retourner une image par défaut donc je vais faire un return ici on va dire self.thumbnail.url if self.thumbnail et sinon donc else pour l'instant
00:07:18 :je vais juste mettre une chaîne de caractère vide et par la suite on va voir comment retourner une image statique par défaut. Donc ensuite qu'est ce qu'il me reste à faire et bien juste à
00:07:26 :modifier à l'intérieur de mon fichier html ici à la place de thumbnail.url je vais mettre thumbnail-url pour aller chercher directement cette méthode ici et ce qu'on peut faire c'est remplacer ça à l'intérieur de tout notre projet donc je vais faire commande shift r le raccourci clavier sur windows vous devez pouvoir le retrouver par exemple dans edit ça va être je crois dans
00:07:46 :replace alors je vais essayer de vous le retrouver dans edit on doit avoir find voilà et replace et nous ce qui nous intéresse c'est le replace in path puisqu'on veut remplacer dans l'intégralité de notre projet donc c'est ce raccourci clavier ici qui sur mac et shift commande r donc ce qu'on
00:08:02 :va faire c'est tout simplement modifier tous les fichiers pour remplacer thumbnail.url par thumbnail.url donc là on a trois occurrences ici donc je vais toutes les remplacer je vais cliquer
00:08:11 :sur replace all et confirmer ici en cliquant sur replace donc on va relancer notre test pour vérifier que ça a bien réglé le problème je reviens dans le terminal je relance le test et là ça a fonctionné on a bien un test qui est passé donc ça veut dire qu'on n'a plus cette page
00:08:26 :d'erreur et si je reviens sur ma boutique ici que j'actualise et cette fois ci ça fonctionne alors plus ou moins puisque la page s'affiche on n'a plus d'erreur donc c'est pour ça que le test est passé puisque ici on vérifie uniquement que le nom du produit est bien affiché sur la page
00:08:39 :d'accueil on ne teste pas si l'image est correctement affichée donc ça c'est un autre test qu'on pourrait faire éventuellement et dans ce cas ci quel est le problème et bien en fait c'est tout simplement qu'en faisant le search and replace on a également remplacé le thumbnail.url ici
00:08:52 :donc je vais remplacer par thumbnail.url puisque dans ce cas ci on veut bien garder le point entre les deux et ne pas le remplacer par le nom de la méthode donc si je reviens ici et j'actualise on devrait retrouver les images pour les deux produits qui en ont et l'image ici qui n'est pas affichée
00:09:06 :pour le produit qui n'en a pas. Alors maintenant comment on va pouvoir afficher une image par défaut ça on va pouvoir le faire avec les fichiers statiques donc je vais le faire assez rapidement parce que ce n'est pas le but de cette vidéo mais je vais quand même vous montrer comment on peut
00:09:18 :utiliser les fichiers statiques donc je vais le rajouter ici en fait on va utiliser une fonction qui s'appelle static qu'on va importer alors là vous voyez qu'elle se retrouve à différents endroits donc je crois que c'est la même à chaque fois moi je vais l'importer à partir de template tags
00:09:29 :puisque généralement c'est une fonction qu'on utilise à l'intérieur des fichiers html mais on peut également l'utiliser à l'intérieur des fichiers python. Donc qu'est ce qu'on va faire
00:09:38 :en fait ici on va récupérer une image statique qui n'existe pour l'instant pas puisqu'on va devoir la créer et la déplacer dans un dossier qu'on va devoir renseigner dans les fichiers de settings donc je vais me rendre dans le fichier de settings settings.py ici et tout à la fin du
00:09:52 :fichier on va rajouter une variable qui s'appelle static files tiré du bas de dirs donc bien faire attention ici à la syntaxe c'est important donc static au singulier collé avec files au pluriel un tiré du bas et dirs également au pluriel. Donc là qu'est ce qu'on va faire en fait on va
00:10:07 :rajouter tout simplement un dossier statique que je vais mettre à l'intérieur de shop ici donc je vais faire un dossier je vais l'appeler statique et à l'intérieur de ce dossier on va mettre une image donc là je vais utiliser une image que j'ai à l'intérieur des médias ici donc ça c'est toutes
00:10:20 :des images en fait qu'on a utilisé quand on a créé l'application et c'est les images des produits qui se retrouvent à l'intérieur du dossier de médias. Donc je vais tout simplement copier par
00:10:29 :exemple les sneakers 4 ici et les dupliquer ici à l'intérieur du dossier statique donc sur mac os j'utilise la touche option pour dupliquer en fait cette image et la glisser dans statique et je vais l'appeler default tout simplement et cliquer sur refactor. Donc là on se retrouve avec cette image
00:10:44 :par défaut donc c'est l'image des chaussures un peu rose comme ceci qu'on va mettre donc à l'intérieur du dossier statique. Donc là il ne reste plus qu'à spécifier le dossier dans lequel on peut
00:10:54 :retrouver des images statiques donc là je vais concaténer base dir avec le dossier shop et avec le dossier statique donc là on refait le chemin vers ce dossier statique et ça ça va nous permettre en fait d'utiliser cette image à l'intérieur de notre modèle. Donc là je vais le passer à cette
00:11:09 :fonction statique et je vais lui dire d'afficher l'image default.jpg. Également là je l'ai mis directement à l'intérieur du dossier généralement pour les ressources statiques on préfère séparer ça dans différents dossiers donc là il s'agit d'une image donc je vais faire un dossier images et je vais la déplacer à l'intérieur de ce dossier images et on pourrait avoir d'autres ressources
00:11:27 :statiques comme par exemple des feuilles de style ou des polices d'écriture etc qu'on pourrait mettre dans d'autres dossiers. Donc là je vais devoir changer également le chemin puisque le
00:11:35 :chemin il va être relatif par rapport à ce qu'on a mis à l'intérieur de cette variable ici donc là on a mis le chemin vers le dossier statique et nous il va donc falloir concaténer à partir de ce dossier le chemin vers img et default.jpg. Donc on va mettre img slash default.jpg tout
00:11:50 :simplement. Donc je vais retourner sur mon site normalement ça devrait fonctionner si on a un thumbnail et bien on retourne thumbnail.url sinon on va retourner cette image statique. Donc je
00:12:01 :reviens sur le site j'actualise et là on retrouve bien donc cette image par défaut pour les sneakers doctrine qui elles ne contiennent pas d'image puisque si je reviens sur le produit sneakers doctrine ici ne contient pas d'image donc là c'est un petit peu perturbant puisqu'on a la même image
00:12:15 :pour les deux produits mais c'est vraiment juste parce qu'on a dupliqué cette image. Si je reviens dans mon projet là j'avais d'autres images ça c'était des images de base par exemple manager ici voilà on va dupliquer en fait je vais juste le déplacer ici voilà et je vais supprimer l'image
00:12:29 :par défaut que j'avais et la remplacer donc refactor oui je vais la remplacer en faisant un refactor rename default voilà donc là on a juste remplacé l'image par défaut je reviens sur le site j'actualise et là on se retrouve bien avec donc cette image par défaut dans le cas où on n'a
00:12:45 :pas d'image à l'intérieur de notre modèle. Donc voilà pour la petite explication sur les fichiers statiques là c'était vraiment juste pour vous montrer qu'on peut rajouter une image par défaut et si je reviens donc dans mon test là de la même façon ça devrait fonctionner puisque on devrait bien réussir à accéder à la page donc un statut de 200 et on devrait bien retrouver le
00:13:03 :nom du produit sur la page d'accueil. Dans ce cas ci on pourrait également vérifier donc qu'on a le thumbnail URL à l'intérieur de la réponse et ça devrait fonctionner également puisque à l'intérieur du fichier html on va également retrouver l'image. Donc je relance mon test
00:13:20 :et là le test fonctionne de la même façon et si je reviens dans le fichier index.html et que par contre je supprime cette image là le test ne devrait plus passer puisque l'image ne sera plus présente dans le fichier et là c'est exactement ce qui nous est indiqué ici on a un test qui a
00:13:34 :échoué puisque on a enlevé l'image. Donc vous voyez là encore il y a différentes choses que vous pouvez tester là j'ai juste testé le nom et l'image on pourrait tester également pas mal d'autres choses on pourrait tester dans un autre test probablement que quand on se rend sur la
00:13:47 :page d'accueil on a bien par exemple le titre de la boutique qui est affiché et plein d'autres choses comme le bouton voir l'article et ce genre de choses. Donc voilà pour ce test et voilà pour
00:13:56 :l'ajout des fichiers statiques qui nous permettent de nous assurer que le site s'affiche correctement donc encore un cas de figure dans lequel vous voyez grâce au test on s'est rendu compte d'un problème potentiel à l'intérieur de notre application.

Deviens membre Premium magic_button

Premium

Rechercher sur le site

Formulaire de contact

Inscris-toi à Docstring