Fermer

novembre 24, 2020

Test des applications Vue avec la bibliothèque de tests Vue


À propos de l'auteur

Kelvin est un éditeur de logiciels indépendant qui construit actuellement Sailscasts – une plate-forme pour apprendre le JavaScript côté serveur. Il est également rédacteur technique et…
En savoir plus sur
Kelvin
…

La bibliothèque Vue Testing peut vous aider à tester vos applications en reflétant la façon dont un utilisateur interagirait avec elles. Voici tout ce que vous devez savoir si vous voulez commencer tout de suite.

Dans cet article, nous examinerons le test des applications Vue à l'aide de la bibliothèque de test Vue – une bibliothèque légère qui met l'accent sur le test de votre application frontale du point de vue de l'utilisateur .

Les hypothèses suivantes sont formulées tout au long de cet article:

  • Le lecteur est familiarisé avec Vue.
  • Le lecteur est familiarisé avec les tests de l'interface utilisateur de l'application.

Par convention, dans Vue utilisateur, lorsque vous souhaitez tester votre application, vous recherchez @ vue / test-utils – la bibliothèque de test officielle de Vue. @ vue / test-utils fournit des API pour tester les instances des composants Vue rendus. Comme ceci:

 // example.spec.js
importer {shallowMount} depuis '@ vue / test-utils'
importer HelloWorld depuis '@ / components / HelloWorld.vue'

décrire ('HelloWorld.vue', () => {
  it ('rend props.msg lorsqu'il est passé', () => {
    const msg = 'nouveau message'
    wrapper const = shallowMount (HelloWorld, {
      propsData: {msg}
    })
    expect (wrapper.text ()). toMatch (msg)
  })
})

Vous pouvez voir que nous montons une instance du composant Vue en utilisant la fonction shallowMount fournie par @ vue / test-utils .

Le problème avec ce qui précède L'approche pour tester les applications Vue est que l'utilisateur final interagira avec le DOM et n'a aucune connaissance de la façon dont Vue rend l'interface utilisateur. Au lieu de cela, il / elle trouvera les éléments de l'interface utilisateur par le contenu du texte, l'étiquette de l'élément d'entrée et d'autres indices visuels sur la page.

Une meilleure approche sera d'écrire des tests pour vos applications Vue de manière à refléter comment un utilisateur réel interagira avec elle, par exemple en recherchant un bouton pour incrémenter la quantité d'un produit dans une page de paiement, d'où la bibliothèque de test Vue.

Qu'est-ce que la bibliothèque de test Vue?

La bibliothèque de test Vue est une bibliothèque de test légère pour Vue qui fournit des fonctions utilitaires légères en plus de @ vue / test-utils . Il a été créé avec un principe directeur simple:

Plus vos tests ressemblent à la façon dont votre logiciel est utilisé, plus ils peuvent vous donner confiance.
– testing-library.com

Pourquoi utiliser Vue Bibliothèque de tests

  • Vous souhaitez écrire des tests qui ne se concentrent pas sur les détails d'implémentation, c'est-à-dire tester la manière dont la solution est implémentée plutôt que si elle produit le résultat souhaité.

  • les nœuds DOM réels et non les composants Vue rendus.

  • Vous voulez écrire des tests qui interrogent le DOM de la même manière qu'un utilisateur le ferait.

Fonctionnement de Vue Testing Library

Vue Testing Library fonctions en fournissant des utilitaires pour interroger le DOM de la même manière qu'un utilisateur interagirait avec le DOM. Ces utilitaires vous permettent de rechercher des éléments par leur texte d'étiquette, de rechercher des liens et des boutons à partir de leur contenu textuel et d'affirmer que votre application Vue est entièrement accessible.

Pour les cas où cela n'a pas de sens ou n'est pas pratique de trouver des éléments par leur contenu textuel ou leur étiquette, Vue testing Library fournit un moyen recommandé de trouver ces éléments en utilisant l'attribut data-testid comme trappe d'échappement pour trouver ces éléments.

The data-testid ] est ajouté à l'élément HTML que vous prévoyez d'interroger dans votre test. Par exemple,

Premiers pas avec Vue Testing Library

Maintenant que vous avez vu pourquoi vous devriez utiliser Vue Testing Library et comment cela fonctionne, procédons en l'installant dans un tout nouveau projet Vue généré par Vue CLI .

Tout d'abord, nous allons générer une nouvelle application Vue en exécutant la commande ci-dessous dans le terminal (en supposant que Vue CLI est installée sur votre machine):

 vue create vue-testing-library-demo

Pour exécuter nos tests, nous utiliserons Jest – un testeur développé par Facebook. Vue CLI a un plugin qui configure facilement Jest. Ajoutons ce plugin:

 vue add unit-jest

Vous remarquerez que le plugin a ajouté un nouveau script dans package.json:

 "test: unit": "vue-cli-service test: unit",

Ceci serait utilisé pour exécuter les tests. Il a également ajouté un nouveau dossier de tests dans src et à l'intérieur du dossier de tests un dossier d'unité avec un exemple de fichier de test appelé example.spec.js . Basé sur la configuration de Jest, lorsque nous exécutons npm run test: unit Jest cherchera les fichiers dans le répertoire tests et exécutera les fichiers de test. Lançons l'exemple de fichier de test:

 npm run test: unit

Cela devrait exécuter le fichier de test example.spec.js dans le répertoire tests / unit . Regardons le contenu de ce fichier:

 import {shallowMount} de '@ vue / test-utils'
importer HelloWorld depuis '@ / components / HelloWorld.vue'

décrire ('HelloWorld.vue', () => {
  it ('rend props.msg lorsqu'il est passé', () => {
    const msg = 'nouveau message'
    wrapper const = shallowMount (HelloWorld, {
      propsData: {msg}
    })
    expect (wrapper.text ()). toMatch (msg)
  })
})

Par défaut, l'installation de Jest avec le plugin Vue CLI installera @ vue / test-utils donc le fichier de test ci-dessus utilise la fonction shallowMount de @ vue / test-utils . Un moyen rapide de se familiariser avec Vue Testing Library est de modifier rapidement ce même fichier de test pour utiliser Vue Testing Library au lieu de @ vue / test-utils .

Nous le ferions en désinstallant d'abord ] @ vue / test-utils car nous n'en aurons pas besoin.

 npm uninstall @ vue / test-utils --save-dev

Ensuite, nous installons Vue Testing Library en tant que dépendance de développement: [19659010] npm install @ testing-library / vue –save-dev

Ensuite, nous procédons à modifier tests / unit / example.spec.js en ceci:

 import {render} from ' @ testing-library / vue '
importer HelloWorld depuis '@ / components / HelloWorld.vue'

décrire ('HelloWorld.vue', () => {
  it ('rend props.msg lorsqu'il est passé', () => {
    const msg = 'nouveau message'
    const {getByText} = render (HelloWorld, {
      accessoires: {msg}
    })
    getByText (msg)
  })
})

Relancez le test et il devrait toujours réussir. Regardons ce que nous avons fait:

  • Nous utilisons la fonction render exposée par Vue Testing Library pour rendre les composants HelloWorld . render est le seul moyen de rendre des composants dans Vue Testing Library. Lorsque vous appelez render, vous passez le composant Vue et un objet optionnel options .

  • Nous utilisons ensuite l'objet options pour passer les accessoires msg nécessaire au composant HelloWorld . render renverra un objet avec des méthodes d'aide pour interroger le DOM et l'une de ces méthodes est getByText .

  • Nous utilisons ensuite getByText ] pour affirmer si un élément avec le contenu textuel de «nouveau message» existe dans le DOM.

À présent, vous avez peut-être remarqué le passage de la réflexion sur le test du composant Vue rendu à ce que l'utilisateur voit dans le DOM . Ce changement vous permettra de tester vos applications du point de vue de l'utilisateur plutôt que de vous concentrer davantage sur les détails d'implémentation.

Notre application de démonstration

Maintenant que nous avons établi comment les tests sont effectués dans Vue en utilisant Vue Testing Library, nous allons continuer pour tester notre application de démonstration. Mais d'abord, nous allons étoffer l'interface utilisateur de l'application. Notre application de démonstration est une simple page de paiement pour un produit. Nous testerons si l'utilisateur peut augmenter la quantité du produit avant de passer à la caisse, s'il peut voir le nom et le prix du produit, etc. Commençons.

Commencez par créer un nouveau composant Vue appelé checkout dans le répertoire components / et ajoutez l'extrait ci-dessous:

Puis modifiez App.vue en:

Pour notre cas de test, nous allons tester les scénarios suivants:

  1. L'utilisateur peut-il voir le nom du produit?
  2. L'utilisateur peut-il voir le prix du produit?
  3. L'utilisateur peut-il augmenter la quantité du produit?
  4. L'utilisateur peut-il diminuer la quantité du produit?
  5. L'utilisateur peut-il voir le prix total mis à jour en temps réel à mesure que la quantité change?

Notre interface utilisateur est assez minimaliste car l'accent est mis sur les tests avec Vue Testing Library. Passons au test du composant Checkout. Créez un nouveau fichier de test dans tests / unit / appelé checkout.spec.js .

Nous allons ensuite procéder à l'échafaudage du fichier de test:

 import {render, fireEvent } de '@ testing-library / vue'
importer CheckOut depuis '@ / components / CheckOut.vue'

produit const = {
    nom: 'Korg Kronos',
    prix: 1200
}
décrire ('Checkout.vue', () => {
  // les tests vont ici
})

Notre tout premier cas de test sera de vérifier si le nom du produit est rendu. Nous le ferions ainsi:

 it ('rend le nom du produit', () => {
        const {getByText} = render (CheckOut, {
            accessoires: {produit}
        })

        getByText (nom.produit)
 })

Ensuite, nous vérifierons si le prix du produit est rendu:

 it ('renders product price', () => {
        const {getByText} = render (CheckOut, {
            accessoires: {product}
        })

        getByText ("$" + product.price)
 })

À l'avenir avec le test du composant Checkout, nous testerons si la quantité initiale que l'utilisateur voit est 1 en utilisant la méthode d'assistance getByDisplayValue :

 it ('rend la quantité initiale comme 1', () => {
        const {getByDisplayValue, getByText} = render (CheckOut, {
            accessoires: {produit}
        })
        getByDisplayValue (1)
    })

Ensuite, nous vérifierons si, lorsque l'utilisateur clique sur le bouton pour incrémenter la quantité de produit, la quantité est incrémentée. Nous le ferons en déclenchant l'événement click en utilisant l'utilitaire fireEvent de Vue Testing Library. Voici l'implémentation complète:

 it ('incrémente la quantité de produit', async () => {
        const {getByDisplayValue, getByText} = render (CheckOut, {
            accessoires: {produit}
        })
        const incrementQuantityButton = getByText ('+')
        attendre fireEvent.click (incrementQuantityButton)
        getByDisplayValue (2)
})

Nous ferons de même pour décrémenter lorsque la quantité est 1 – dans ce cas, nous ne décrémentons pas la quantité. Et aussi quand la quantité est 2. Écrivons les deux cas de test.

 it ('ne décrémente pas la quantité lorsque quanty est 1', async () => {
        const {getByDisplayValue, getByText} = render (CheckOut, {
            accessoires: {produit}
        })
        const decrementQuantityButton = getByText ('-')
        attendre fireEvent.click (decrementQuantityButton)
        getByDisplayValue (1)
    })

 it ('décrémenter la quantité lorsque la quantité est supérieure à 1', async () => {
        const {getByDisplayValue, getByText} = render (CheckOut, {
            accessoires: {produit}
        })
        const incrementQuantityButton = getByText ('+')
        const decrementQuantityButton = getByText ('-')
        attendre fireEvent.click (incrementQuantityButton)
        attendre fireEvent.click (decrementQuantityButton)
        getByDisplayValue (1)
    })

Enfin, nous testerons si le prix final est calculé en conséquence et affiché à l'utilisateur lorsque les boutons d'augmentation et de diminution de la quantité sont cliqués.

 it ('affiche le prix final correct lorsque le bouton d'incrémentation est cliqué' ' , async () => {
        const {getByText, getByTestId} = render (CheckOut, {
            accessoires: {produit}
        })
        const incrementQuantityButton = getByText ('+')
        attendre fireEvent.click (incrementQuantityButton)
        getByText (product.price * 2)
    })

it ('affiche le prix final correct quand on clique sur le bouton de décrémentation', async () => {
        const {getByText} = render (CheckOut, {
            accessoires: {produit}
        })
        const incrementQuantityButton = getByText ('+')
        const decrementQuantityButton = getByText ('-')
        attendre fireEvent.click (incrementQuantityButton)
        attendre fireEvent.click (decrementQuantityButton)
        getByText (product.price)
    })

Tout au long de nos cas de test, vous remarquerez que nous étions plus concentrés sur l'écriture de nos tests du point de vue de ce que l'utilisateur verra et avec lequel il interagira. Écrire des tests de cette façon garantit que nous testons ce qui compte pour les utilisateurs de l'application.

Conclusion

Cet article présente une bibliothèque alternative et une approche pour tester les applications Vue appelée Vue Testing Library, nous voyons comment la configurer et écrire des tests pour les composants Vue avec.

Ressources

Vous pouvez trouver le projet de démonstration sur GitHub.

Smashing Editorial (ra, yk, il)

Le meilleur outil 2023 pour ta croissance Instagram !



Source link