Les tests en programmation sont des éléments essentiels, car ils permettent de s’assurer du fonctionnement d’un projet, de détecter des erreurs qui peuvent se présenter dans le code qui a été produit, de fournir de la documentation pour mieux comprendre les méthodes, de faciliter la compréhension du code et de repérer les erreurs logiques le plus tôt possible. Vue.Js offre une bibliothèque officielle nommée Vue Test Utils qui a été conçue dans le but de simplifier la réalisation de ces tests. Cette librairie permet d’obtenir des fonctions qui permettent de valider des attributs, de faire des requêtes HTTP, d’exécuter des fonctions asynchrones et de tester des valeurs du store.
Installation
Il existe plusieurs façons d’installer Vue Test Utils dépendamment des configurations actuelles.
Avec Vue CLI :
Pour pouvoir exécuter les tests, il faut installer un outil de test, il en existe plusieurs disponibles sur le web, dans ce cas-ci, Jest, qui est l’un des plus connus, sera utilisé.
La commande pour installer Jest qui récupère toutes les dépendances nécessaires est :$ vue add unit-jest
Ensuite, pour installer Vue Test Utils la commande est :
$ npm install --save-dev @vue/test-utils
Installation manuelle :
La commande pour installer Vue Test Utils et Jest manuellement est :$ npm install --save-dev @vue/test-utils vue-jest
Pour Jest il faut lui indiquer qu’il faut transformer les fichiers .vue en utilisant vue-jest, cela se fait en ajoutant cette configuration dans le fichier package.json du projet :
{ "jest": { "moduleFileExtensions": [ "js", "json", // tell Jest to handle `*.vue` files "vue" ], "transform": { // process `*.vue` files with `vue-jest` ".*\\.(vue)$": "vue-jest" } }}
Concepts
Il y a quelques concepts importants à connaitre pour la réalisation de tests, en voici quelques-uns :
Wrapper :
Un objet qui inclut plusieurs méthodes qui permettent d’interagir et de faire des tests sur le composant monté qu’il enveloppe. Il inclut généralement le texte affiché par le composant monté sous forme de DOM.
Certaines de ces méthodes sont :
attributes : Retourne la liste des attributs associés à l'élément.
classes : Retourne la liste des classes associées à l'élément.
emitted : Retourne les événements émis par l'élément.
find : Recherche un élément en fonction d'un sélecteur CSS ou d'une référence à un composant.
findAll : Retourne toutes les occurrences d'un sélecteur CSS ou d'une référence à un composant donné.
html : Retourne le HTML de l'élément sous forme de chaîne de caractères.
text : Retourne le contenu en texte de l’élément.
destroy : détruit le composant monté.
setData(donnée) : Définit les propriétés de données sur le composant.
Mounting
Envelopper un composant passé en paramètre dans un objet wrapper qui va donner la possibilité d'y effectuer plusieurs actions et méthodes pour des raisons de tests.
ShallowMounting
Similaire au mounting standard, cependant, lors de l’enveloppement du composant dans l’objet wrapper, il n’inclut pas les composants enfants. Ce qui permet de tester un composant sans avoir à penser à son contenu.
Voici quelques exemples de tests :
Test qui va vérifier l’existance d’une balise HTML
Vérification de si le composant contient la balise <p> le test va passer
test('verifier l’existance de la balise <p>', () => { const wrapper = shallowMount(example) expect(wrapper.html()).toContain('<p>')})
Vérification de si la valeur de texte dans le champ est égale a une chaine de caractère spécifique le test va passer
test('vérifier le contenu de la balise <input>', async () => { const wrapper = shallowMount(example) const name = wrapper.find('#nom') await name.setValue('valeur voulue') expect(name.element.value).toBe('valeur voulue')})
Conclusion
En conclusion, Vue Test Utils est un outil qui permet de simplifier la création de tests dans Vue.Js car il offre plusieurs fonctionnalités spécifiques. Son installation peut se faire avec Vue CLI ou manuellement. Les concepts importants à connaitre sont les wrappers qui fournissent des méthodes pour interagir avec les composants montés, le mounting qui est le fait d’envelopper un composant dans un objet wrapper et le shallowmounting qui est essentiellement la même chose, par contre on n’inclut pas les composants enfants.
Références
Nada RIFKI, « Testing Vue.js components with Vue Test Utils »,LogRocket, https://blog.logrocket.com/testing-vue-js-components-vue-test-utils/ (Page consultée le 22 mars)
Usman MOHYUDDIN, « Introduction to vue-test-utils »,Reflect, https://reflect.run/articles/introduction-to-vue-test-utils/ (Page consultée le 22 mars)
« Installation », Vue Test Utils, https://v1.test-utils.vuejs.org/fr/installation/#version-semantique (Page consultée le 22 mars)
Tom ÖSTERLUND, « Testing Vue Components: mount vs shallowMount »,Medium, https://blog.stackademic.com/testing-vue-components-mount-vs-shallowmount-53e130370b65 (Page consultée le 22 mars)
Commentaires