Les tests unitaires sont une partie importante (et parfois ignorée) du développement d'applications. Ils nous aident à sécuriser nos processus et nos flux de travail, en veillant à ce que les parties les plus critiques de nos projets soient protégées contre les erreurs accidentelles ou les surbrillances dans notre développement. C'est pourquoi Vue a son propre utilitaire de test appelé vue-test-utils. Il fournit des fonctionnalités utiles pour interagir avec les composants Vue et travaille avec de nombreux lanceurs de test populaires.
Vuetify utilise Typescript et doit actuellement importer et étendre l'objet Vue. Cela a le potentiel dans certaines applications pour générer un avertissement $attrs ou $listeners est en lecture seule. Il y a en ce moment une discussion Github avec de potentiels contournements dans une variété de cas d'utilisation. Si vous avez des questions supplémentaires, veuillez nous rejoindre dans notre communauté en ligne.
Vous trouverez d'autres informations sur la façon de configurer un lancement de test avec Vue CLI sur la documentation officielle. En un coup d'oeil, Vue CLI a commencé des dépôts pour les lanceurs de test suivants :
Afin d'utiliser correctement Typescript, Vuetify étend l'objet Vue. Ceci a le potentiel de cause problèmes comme indiqué dans l'alerte ci-dessus. Au lieu d'utiliser une instance localVue, nous devons plutôt installer Vuetify globalement dans le fichier de configuration des tests unitaires. Cela peut varier entre les coureurs de test. Assurez-vous de consulter la documentation appropriée sur les fichiers de configuration.
Si vous n'utilisez pas un fichier setup.js, vous devez ajouter Vue.use(Vuetify) dans la section utilitaires de votre test.
La création de tests unitaires dans Vuetify est similaire à vuex et vue-router en ce sens que vous utiliserez l'objet Vuetify dans une instance localVue et passerez une instance aux options de la fonction mount.
Créons un exemple de cas d'utilisation de test que nous pourrions trouver dans notre application.
Dans l'exemple ci-dessus, nous avons créé un composant personnalisé avec un prop title et un v-btn qui émet un event personnalisé lorsque cliqué. Nous voulons maintenant créer des tests qui assurent que ce comportement fonctionne correctement et continue à le faire après des changements futurs. Les exemples ci-dessous sont créés avec le lanceur de tests Jest.
Si vous êtes coincé et avez des questions supplémentaires sur les tests ou besoin d'aide en général, veuillez nous rejoindre dans notre communauté en ligne.
Lorsque vous écrivez des tests, vous vous retrouverez souvent à répéter les mêmes choses. Dans ce cas, il est avantageux de créer des fonctions d'aide pour réduire la duplication de chaque test unitaire. Fondamentalement, appliquer le principe DRY à notre code.
L'une des duplications de code les plus courantes dans les tests unitaires sont les fonctions mount. Cela peut facilement être réduit en une fonction réutilisable pour chaque lancement.
Beaucoup de composants de Vuetify utilisent l'objet $vuetify global pour obtenir des paramètres tels que des informations par défaut sur le texte ou le point d'arrêt. Lorsque vous testez ces composants, vous devrez fournir un objet mock vue-test-utils.
Gardez à l'esprit, vous devez seulement étouffer les services qui sont utilisés. tels que lang ou application. Vous pouvez également importer ces services manuellement.
Une liste complète de tous les services disponibles est listée ci-dessous :
Vuetify passe les attributs data-* des composants aux éléments HTML pertinents, ce qui permet de localiser facilement le cadre de test E2E.
Par exemple, Cypress recommande d'ajouter des attributs data-cy pour rendre les éléments cibles faciles.
Prêt pour plus ? Continuez la lecture avec :