⌘K
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- groups La communauté
- forum Questions
- live_tv Mentorats
Formations
Articles
Communauté

La certification qualité a été délivrée pour la catégorie d'actions « Actions de formation ».
⌘K
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- groups La communauté
- forum Questions
- live_tv Mentorats
Formations
Articles
Communauté

La certification qualité a été délivrée pour la catégorie d'actions « Actions de formation ».
Deviens membre Premium magic_button
Débloque cette session en devenant Membre Premium 🚀
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte person00:00:00 :Dans cette partie on va enfin tester autre chose que les modèles, on va tester la vue de la paged'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 fichiermais 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 fichierdonc en faisant un clic droit ici, new python file pour tester les vues donc on va l'appelertestviews.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 varien 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 cettefois 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 vaiscré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 vaavoir à 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ésest 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 cessneakers 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 nouspermet de faire des requêtes en fait vers notre site donc dans ce cas ci on va faire une simplerequê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. Doncpour ça on va utiliser la fonction reverse qui est à l'intérieur de django urls qu'on utilisetrè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'accueildonc 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 variableque je vais appeler resp donc c'est un raccourci en fait pour response des fois je mets r aussitout 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êmecomportement que ce qu'on pourrait faire par exemple avec le module request que vous avezpeut-être déjà utilisé qui permet de faire des requêtes web donc quand on utilise request on peutfaire 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 surnotre variable dans l'attribut status code et ce code il peut être donc de 200 par exemple 404 sion 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 çaon 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 cequ'on va faire c'est vérifier si le nom du produit est bien affiché sur la page d'accueil puisque sije 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 exempleici si on testait la description ça ne fonctionnerait pas donc nous ce qu'on va vérifier c'est juste sion 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 foisci 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.contentet 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 vavérifier en fait que cette chaîne de caractère est à l'intérieur de cette chaîne de caractèredonc 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 etjavascript par exemple donc voilà c'est juste ça qu'on va vérifier avec assert in donc dans ce casci 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à onvoit 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 unstatus code de 200 donc on va tester ce fichier donc je vais rouvrir mon terminal et cette foisci 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à encoredont on se rend compte en fait en créant notre test quel est le problème ici et bien c'estqu'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à çafonctionne 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à dansnotre cas on avait mis un prix un stock et une description je pourrais mettre ça quand mêmepour 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'enregistrecet article ici et que je retourne sur ma page d'accueil là on va retrouver exactement cettemême erreur qui nous indique que l'attribut thumbnail n'a pas de fichier associé alors quelest 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.htmlqu'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'estcomme 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 dansle cas où on n'a pas de thumbnail et bien on va tout simplement avoir une page d'erreur moi dansmon 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'iln'ait d'image associée donc moi je ne vais pas toucher au test je vais en fait corriger mon codedonc 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'esttout simplement rajouter une méthode donc je vais la mettre après le save ici et cette méthodeon 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 vaisfaire 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 retournerune 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 mettrethumbnail-url pour aller chercher directement cette méthode ici et ce qu'on peut faire c'estremplacer ça à l'intérieur de tout notre projet donc je vais faire commande shift r le raccourciclavier 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 etnous 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 parthumbnail.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 pourvérifier que ça a bien réglé le problème je reviens dans le terminal je relance le test etlà ç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 alorsplus ou moins puisque la page s'affiche on n'a plus d'erreur donc c'est pour ça que le test estpassé 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'onpourrait faire éventuellement et dans ce cas ci quel est le problème et bien en fait c'est toutsimplement 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 entreles deux et ne pas le remplacer par le nom de la méthode donc si je reviens ici et j'actualise ondevrait 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 pardéfaut ça on va pouvoir le faire avec les fichiers statiques donc je vais le faire assez rapidementparce 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 fonctionqui s'appelle static qu'on va importer alors là vous voyez qu'elle se retrouve à différents endroitsdonc 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 onpeut é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 vadevoir la créer et la déplacer dans un dossier qu'on va devoir renseigner dans les fichiers desettings 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 faireattention ici à la syntaxe c'est important donc static au singulier collé avec files au plurielun 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 jevais faire un dossier je vais l'appeler statique et à l'intérieur de ce dossier on va mettre uneimage 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 produitsqui 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 osj'utilise la touche option pour dupliquer en fait cette image et la glisser dans statique et je vaisl'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 avecle dossier statique donc là on refait le chemin vers ce dossier statique et ça ça va nous permettreen 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 misdirectement à 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 jevais 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 pourraitmettre 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 dece 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 unthumbnail 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 sneakersdoctrine qui elles ne contiennent pas d'image puisque si je reviens sur le produit sneakersdoctrine 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 reviensdans mon projet là j'avais d'autres images ça c'était des images de base par exemple managerici 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 unrefactor rename default voilà donc là on a juste remplacé l'image par défaut je reviens sur lesite 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 lesfichiers statiques là c'était vraiment juste pour vous montrer qu'on peut rajouter une image pardéfaut et si je reviens donc dans mon test là de la même façon ça devrait fonctionner puisqueon 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 ale 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 parcontre je supprime cette image là le test ne devrait plus passer puisque l'image ne sera pluspré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 quevous pouvez tester là j'ai juste testé le nom et l'image on pourrait tester également pas mald'autres choses on pourrait tester dans un autre test probablement que quand on se rend sur la