Un guide de bout en bout pour les tests Vue.js

« Lorsque le nombre d’utilisateurs de Vue a atteint un certain volume, il est devenu une communauté. Tout à coup, toutes ces personnes ont compté sur moi : contributeurs, utilisateurs, éducateurs, étudiants… C’est devenu plus grand que je ne l’aurais jamais imaginé. – Evan Toi.

Il s’agit d’une confession d’un développeur vers la sortie d’un framework JS en 2014 qui est aujourd’hui utilisé par plus de 1,5 million d’utilisateurs. Un framework est devenu important dans le développement de sites Web si l’on considère à quel point il est nouveau. Les développeurs prenant lentement Vue en main, la question des tests Vue.js devient d’autant plus intéressante à décoder au sein de l’organisation.

Le cadre est dans un endroit où il n’est pas extrêmement populaire, donc chaque question peut être trouvée sur les canaux communautaires et n’est pas si nouvelle qu’elle en est encore au stade de l’expérimentation. Lorsque nous voyons des applications à grande échelle construites avec Vue, nous savons que la pertinence des tests Vue.js ne fera qu’augmenter avec le temps.

Tous ces faits font de ce guide une pièce importante du puzzle qui vous guidera finalement vers la publication d’une application Web basée sur Vue.js dans le monde.

Qu’est-ce que Vue.js ?

Vue.js est un framework permettant de créer des interfaces utilisateur complexes ou simples. Il a été publié en 2014 et est aujourd’hui utilisé par près de 1 % des sites Web. Il est léger et construit sur les principaux composants Web tels que HTML, CSS et JavaScript.

Il fonctionne avec un paradigme de cadre de vue modèle basé sur des composants, qui permet aux modules d’être construits en tant que composants faiblement couplés et connectés. Cela aide à décomposer les modules complexes en petits composants que d’autres parties de l’application peuvent également réutiliser.

Un petit exemple de Vue.js exprimant sa fonctionnalité basée sur les composants peut être le suivant :

import { createApp } from 'vue'
createApp({
  data() {
    return {
      counter: 0
    }
  }
}).mount('#app')

Code HTML:

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

Ici, nous voyons un concept important de rendu déclaratif en HTML à travers le code {{count}}. Par rendu déclaratif, nous soulignons la partie de rendu de modèle où nous pouvons rendre directement les données à l’aide de la syntaxe déclarative ou de la syntaxe de modèle, qui est une double accolade comme c’est également le cas dans le moteur de modèle Jinja 2. Il s’agit d’une propriété importante de Vue qui s’avère utile pour un développement rapide et la minimisation du code.

La deuxième propriété est la réactivité, réagissant automatiquement au changement du code JavaScript. Les modifications sont ensuite répercutées dans le DOM sans écrire de code supplémentaire. Cependant, il s’agit d’un bref aperçu de haut niveau de la réactivité qui doit être discuté en détail. Étant donné que ce guide tourne autour du test des composants Vue, gardons cette discussion pour un autre jour.

Présentation du système basé sur les composants Vue.js

L’idée fondamentale d’un système basé sur des composants est de diviser les choses plus grandes en unités plus petites et de se concentrer sur chacune de manière isolée. Cela permet de décomposer un problème plus vaste et de se concentrer sur les détails qui pourraient être manqués si le système complet était pris en une seule fois. Cela se voit également lorsque nous développons des pages HTML simples qui sont divisées en une arborescence basée sur des composants :

Dans Vue, nous effectuons quelque chose de similaire en enregistrant chaque composant dans son fichier avec sa logique en tant que .vue extension.

Pour un exemple minimal de compréhension des composants dans Vue.js, créons une petite page Web comme suit :

<div>
    <h1> Hi This is Div 1.</h1>
</div>

<div>
    <h1> Hi This is Div 2.</h1>
</div>

Dans Vue’s app.js fichier, nous allons créer un composant pour démontrer la réutilisabilité comme suit :

 Vue.component(<component_name>, object)

Lors de l’écriture du code, remplacez-le par le nom du composant que vous souhaitez mettre :

Vue.component(‘vcomp’)

Nous allons déposer un template simple pour remplacer l’objet :

Vue.component(‘vcomp’, {
template: “<h2> Hi this is a Vue Component </h2>”
});

Ici, la partie modèle prend le modèle HTML que vous souhaitez afficher lorsque ce composant est rendu à l’écran.

Avec ce petit code, nous avons notre composant prêt à être implémenté dans la page HTML que nous avons écrite au début. Étant donné que ce composant est désigné par le nom « vcomp”, insérons ceci à l’intérieur du bloc div comme suit :

<div>
    <h1> Hi This is Div 1.</h1>
    <vcomp><vcomp>
</div>

<div>
    <h1> Hi This is Div 2.</h1>
    <vcomp></vcomp>
</div>

Ce que Vue fera ici est de remplacer les balises vcomp par le modèle de composant décrit dans app.js. En conséquence, nous obtenons une petite page Web comme suit :

Si nous inspectons cette page Web, nous pouvons vérifier que le code HTML a été remplacé par le modèle fourni dans Vue :

Un problème simple est que le code est devenu réutilisable mais n’est pas personnalisable selon notre choix. Dans le développement Web, vous pouvez avoir plusieurs éléments avec le même code. Un besoin qui peut être satisfait par notre exemple ci-dessus. Cependant, nous pouvons avoir un nombre encore plus grand de codes qui ne sont pas identiques mais similaires. Par exemple, « Salut, je suis Harish » et « Salut, je suis Jack » sont deux éléments similaires avec 75 % de similarité avec « Salut, je suis ». Si nous pouvions trouver un moyen de mettre des données dans ce modèle, nous aurions un bon composant avec nous.

Ceci est accompli par l’objet de données attaché au composant Vue. Pour l’instant, nous avons notre vue modifiée comme suit :

Vue.component(‘vcomp’, {
template: “<h2> Hi I am </h2>”
});

Cela désigne la partie qui restera la même. Un objet de données s’écrit :

Vue.component(‘vcomp’, {
template: “<h2> Hi I am </h2>,
data: function(){}”
});

Dans la partie fonction, vous pouvez écrire la fonction à exécuter quand vous le souhaitez. Pour notre exemple, vous devez retourner le nom pour le mettre comme suit :

Vue.component(‘vcomp’, {
template: “<h2> Hi I am {{name}}.</h2>,
data: function(){
return {
name: “Harish”
}
}”
});

Notez également le supplément {{name}} nous mettons dans le modèle où nous voulons que le nom soit placé lors du retour.

La dernière chose dont nous avons besoin est de décider quand cette fonction doit être appelée et comment elle doit être appelée. Bien qu’il existe de nombreuses façons d’y parvenir, pour la démonstration, je prendrai le on:click événement attaché à un bouton sur le clic duquel cette fonction peut être appelée.

Le code modifié devient alors le suivant :

Vue.component(‘vcomp’, {
template: “<h2> Hi I am {{name}}. <button v-on:click = “changeName”></button></h2>”,
data: function(){
return {
name: “Harish”
}
},
methods: {
changeName: function(){
this.name = ‘Ashley’;
}
}
});

Les deux éléments modifiés à noter ici sont « méthodes » et « bouton.” Exécutez ce code et vous obtenez un bouton sur le clic duquel le nom « Salut, je suis » se transforme en « Salut, je suis Ashley ».

Tests unitaires : un aperçu général

Les tests unitaires sont l’un des piliers des logiciels de test, l’autre étant les tests d’intégration et les tests de bout en bout. Généralement, les tests logiciels commencent par des tests unitaires, en particulier lorsque TDD est facilité en tant que méthode de développement.

Les tests unitaires divisent le logiciel en unités plus petites afin qu’il soit plus facile de se concentrer sur des parties plus petites et leurs détails, et le débogage devient beaucoup plus facile. Cette définition peut ressembler à ce dont nous avons discuté dans la définition des composants ci-dessus.

En réalité, ils ont tous deux des racines similaires, mais le but qu’ils servent est différent. Étant donné que les composants sont également des unités plus petites dans une application Vue, le travail d’un testeur effectuant des tests unitaires devient beaucoup plus facile et ciblé sur un domaine spécifique. Par conséquent, les tests unitaires dans les composants Vue sont un sujet de discussion populaire parmi les testeurs Vue.

Notez qu’il ne faut pas confondre cela avec « tester un composant », car les tests unitaires fonctionnent avec les applications basées sur Vue. Les tests unitaires signifient toujours tester les fonctionnalités ou la classe pour les sorties attendues, mais pour une plus petite partie de l’application.

Lorsque nous commençons à tester uniquement les composants d’une application Vue, tels que la façon dont elle se monte ou s’affiche, nous l’appelons test de composants dans Vue. Cependant, cela ne signifie pas que les tests unitaires ne couvrent pas « uniquement » les composants. Dans certains cas, c’est possible, et dans quelques cas, non.

Comment démarrer avec les tests unitaires dans Vue.js

Dans cette section du guide de test Vue.js, nous prendrons des tests unitaires dans Vue, qui sont différents des tests unitaires dans les applications Web. Ici, nous nous concentrerons uniquement sur la façon d’effectuer des tests unitaires sur les parties des applications écrites en Vue.

En tenant compte du fonctionnement des fonctionnalités basées sur Vue, nous visons à effectuer des tests unitaires sur deux types de fonctions.

Composables
Composants

Par conséquent, nous pouvons diviser cette section en deux parties logiques.

Comment effectuer des tests unitaires dans Vue Composables

Le concept de composables est entré dans Vue avec sa version 3 et est conçu pour éliminer toutes les faiblesses de Vue 2 conduisant à des composants et mixins complexes. Vue composable fait référence aux fonctions qui utilisent l’API de composition de Vue. Cette API est une solution aux composants qui deviennent trop volumineux et difficiles à maintenir au fil du temps.

Par exemple, disons que nous avons un composant qui peut répertorier certains produits via la recherche. Quelque temps plus tard, nous avons besoin de plus de fonctionnalités dans cette recherche en appliquant certains filtres. Quelques jours plus tard, nous ajouterons peut-être une autre fonctionnalité de recherche. En faisant tout cela, nous pouvons créer un composant très volumineux et complexe, qui peut devenir extrêmement difficile à entretenir.

Au lieu de cela, nous pouvons utiliser l’API de composition, qui sont des fonctions réutilisables appelées à partir de ces composants et éliminent les options et les données volumineuses. Dans cet exemple, nous pouvons créer search(), sort(), filter(), advanceFilter()etc., et appelez chaque fois que nécessaire à partir du composant principal.

Les composables peuvent dépendre de l’une des trois API :

Cycle de vie
Injecter
Réactivité

Parmi ces trois, si la réactivité est utilisée comme suit :

import { createApp } from 'vue'
createApp({
  data() {
    return {
      counter: 0
    }
  }
}).mount('#app')

Cela peut être testé en faisant correspondre directement les résultats attendus et réels, également appelés une assertion dans les tests. Alors que si des crochets de sauvetage et des injections sont utilisés, le testeur…