Catégories
Plugin et site web

Test des applications Vue avec la bibliothèque de tests Vue – Smashing Magazine

A propos de l'auteur

Kelvin est un fabricant 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…
Plus à propos
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 souhaitez commencer immédiatement.

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 familier avec Vue.
  • Le lecteur est familiarisé avec les tests de l'interface utilisateur de l'application.

De manière conventionnelle, dans la zone utilisateur Vue, lorsque vous souhaitez tester votre application, vous recherchez @vue/test-utils – la bibliothèque de test officielle pour Vue. @vue/test-utils fournit des API pour tester les instances des composants Vue rendus. Ainsi:

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

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

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

Le problème avec l'approche ci-dessus 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 des éléments d'interface utilisateur par le contenu du texte, le libellé de l'élément d'entrée et d'autres indices visuels sur la page.

Une meilleure approche consistera à écrire des tests pour vos applications Vue de manière à refléter la façon dont 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ù Vue Testing Library.

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

Vue Testing Library 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 la bibliothèque de test Vue

  • Vous souhaitez écrire des tests qui ne sont pas axés sur les détails de mise en œuvre, c'est-à-dire tester la façon dont la solution est implémentée plutôt que si elle produit le résultat souhaité.

  • Vous souhaitez écrire des tests qui se concentrent sur les nœuds DOM réels et non sur 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 la bibliothèque de test Vue

Vue Testing Library fonctionne 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 data-testid attribut comme une trappe d'échappement pour trouver ces éléments.

le data-testid L'attribut est ajouté à l'élément HTML que vous prévoyez d'interroger dans votre test. Par exemple

Premiers pas avec la bibliothèque de test Vue

Maintenant que vous avez vu pourquoi vous devriez utiliser la bibliothèque de test Vue et comment cela fonctionne, procédons en la configurant 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",

Cela 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 recherchera les fichiers dans tests répertoire et exécutez les fichiers de test. Exécutons l'exemple de fichier de test:

npm run test:unit

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

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = 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, par conséquent, le fichier de test ci-dessus utilise le shallowMount fonction 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 ferions cela 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:

npm install @testing-library/vue --save-dev

Ensuite, nous procédons à modifier tests/unit/example.spec.js pour ça:

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

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const { getByText } = render(HelloWorld, {
      props: { msg }
    })
    getByText(msg)
  })
})

Exécutez à nouveau le test et il devrait toujours réussir. Voyons ce que nous avons fait:

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

  • On utilise ensuite l'objet options pour passer le msg accessoires nécessaires au HelloWorld composant. render renverra un objet avec des méthodes d'assistance 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 au lieu de vous concentrer davantage sur les détails de mise en œuvre.

Notre application de démonstration

Maintenant que nous avons établi comment les tests sont effectués dans Vue à l'aide de Vue Testing Library, nous allons procéder au test de 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.

Tout d'abord, créez un nouveau composant Vue appelé checkout in components/ répertoire et ajoutez l'extrait ci-dessous:





Puis modifiez App.vue à:






Pour notre cas de test, nous testerons 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é de produit?
  4. L'utilisateur peut-il diminuer la quantité de 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 procéderons ensuite à l'échafaudage du fichier de test:

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

const product = {
    name: 'Korg Kronos',
    price: 1200
}
describe('Checkout.vue', () => {
  // tests goes here
})

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

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

        getByText(product.name)
 })

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

it('renders product price', () => {
        const { getByText } = render(CheckOut, {
            props: { 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 le getByDisplayValue méthode d'assistance:

it('renders initial quantity as 1', () => {
        const { getByDisplayValue, getByText } = render(CheckOut, {
            props: { product }
        })
        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. Pour ce faire, nous déclencherons l'événement de clic à l'aide du fireEvent utilitaire de Vue Testing Library. Voici l'implémentation complète:

it('increments product quantity', async () => {
        const { getByDisplayValue, getByText } = render(CheckOut, {
            props: { product }
        })
        const incrementQuantityButton = getByText('+')
        await fireEvent.click(incrementQuantityButton)
        getByDisplayValue(2)
})

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

it('does not decrement quantity when quanty is 1', async () => {
        const { getByDisplayValue, getByText } = render(CheckOut, {
            props: { product }
        })
        const decrementQuantityButton = getByText('-')
        await fireEvent.click(decrementQuantityButton)
        getByDisplayValue(1)
    })

 it('decrement quantity when quantity greater than 1', async () => {
        const { getByDisplayValue, getByText } = render(CheckOut, {
            props: { product }
        })
        const incrementQuantityButton = getByText('+')
        const decrementQuantityButton = getByText('-')
        await fireEvent.click(incrementQuantityButton)
        await 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('displays correct final price when increment button is clicked', async () => {
        const {  getByText, getByTestId } = render(CheckOut, {
            props: { product }
        })
        const incrementQuantityButton = getByText('+')
        await fireEvent.click(incrementQuantityButton)
        getByText(product.price * 2)
    })

it('displays correct final price when decrement button is clicked', async () => {
        const {  getByText} = render(CheckOut, {
            props: { product }
        })
        const incrementQuantityButton = getByText('+')
        const decrementQuantityButton = getByText('-')
        await fireEvent.click(incrementQuantityButton)
        await fireEvent.click(decrementQuantityButton)
        getByText(product.price)
    })

Tout au long de nos cas de test, vous remarquerez que nous nous sommes davantage 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 manière 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 elle.

Ressources

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

Éditorial fracassant(ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *