javascript - À quoi servent les tests automatisés front-end?

Question

J'utilise souvent Vue cli pour construire des projets
mais je ne le comprends jamais

? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Airbnb
? Setup unit tests with Karma + Mocha? Yes      这个？
? Setup e2e tests with Nightwatch? Yes            这个是干嘛的？

Qu'est-ce que les tests unitaires et qu'est-ce que les tests e2e ? ? Que dois-je faire lors de l’écriture du code ? ?

Answer 1

Du point de vue de la nécessité, je pense que ne pas tester, c'est comme traverser un feu rouge. Un accident ne se produit pas nécessairement, mais à mesure que la quantité de code devient de plus en plus grande et que la distance de conduite devient de plus en plus longue, un accident se produira. un jour.

Si vous avez un projet :

function Swiper (el, options) {
    if (typeof el === 'string') {
        this.el = document.getElementById(el)
    } else {
        this.el = el
    }
    console.log('a swiper is created')
}

Tests unitaires

Contenu : Testez les unités de votre projet. Une fonction peut être une unité et un sous-module peut être une unité

Objectif : Automatisation, vous conduisant à une meilleure conception (par exemple, vous aurez du mal à écrire des tests unitaires pour du code hautement couplé), sans être un voyou

S'il n'y a pas de bibliothèque de tests et que je souhaite tester le code ci-dessus, je pourrais faire ceci :

1. Écrivez un demo.html et introduisez le code ci-dessus

2. Testez l'instanciation de l'identifiant de l'élément transmis

3. Testez l'instanciation de l'élément passé lui-même

4. Testez d'autres fonctions du swiper

5. Et il est préférable de console.loger quelque chose sur la console pour me dire ce qui est actuellement testé et quels sont les résultats des tests

Le cadre de test vous aide à terminer le processus ci-dessus, à classer les cas de test, à afficher la progression, les résultats des tests, à fournir des rapports, etc. Comme le moka

La bibliothèque d'assertions vous permet de faire n'importe quoi sauf ===之外，有很多其他手段去做比较，而且可读性很强，比如：this.obj.should.have.property('id').which.is.a.Number().

Les bibliothèques associées incluent : chai, Should.js, un superagent spécialisé dans les tests http, etc.

Découvrez comment écrire des tests unitaires dans le code source de Vue :

Karma est un outil de test qui permet de tester votre code dans un environnement de navigateur. La raison pour laquelle cela est nécessaire est que votre code peut être conçu pour être exécuté du côté du navigateur et que certains bogues peuvent ne pas être exposés lorsqu'ils sont testés dans l'environnement du nœud. De plus, si le navigateur a des problèmes de compatibilité, karma fournit un moyen de le faire. exécutez automatiquement votre code sur plusieurs navigateurs. Exécutez dans un environnement de navigateur (chrome, firefox, c'est-à-dire, etc.). Si votre code ne s'exécute que côté nœud, vous n'avez pas besoin d'utiliser le karma.

Couverture

Le but des tests unitaires est de diviser votre projet en petites unités. Dans chaque test unitaire, essayez de concevoir un cas pour exécuter chaque branche dans la logique du code, afin que tous les tests unitaires soient exécutés et que chaque ligne de code du projet le soit. Il est préférable de l'exécuter une seule fois, c'est-à-dire que le taux de couverture doit être aussi proche que possible de 100 %.

Si vous avez uniquement testé le code Swiper ci-dessus : new Swiper(document.getElement('mountNode'))的情况的话，那么覆盖率就只有50%，所以要补上new Swiper('mountNode')Exécutez une autre branche pour le test unitaire.

Pour les petits projets, il n'est pas difficile de considérer toutes les branches, mais pour des projets comme Vue, atteindre une couverture à 100 % semble très anormal.

Outil :istanbul

Test E2E

Les tests de bout en bout visent principalement à tester l'entreprise. Dans la plupart des cas, cela signifie effectuer une certaine opération sur un certain site Web sur le navigateur, comme la connexion.

Prenons l'exemple de la page d'accueil de nightwatch :

Je n'ai pas utilisé nightwatch, mais il est facile de voir qu'il s'agit de tester de bout en bout le processus de connexion à Google et de saisie d'un mot-clé pour rechercher l'entreprise. Vous pouvez voir que cette bibliothèque fournit de nombreuses fonctions pour simuler des opérations humaines sur la page, remplaçant ainsi les opérations de saisie par clic humain pour effectuer des tests E2E automatisés.

Vous pouvez également jeter un œil à ce que teste le test E2E du projet Vue :

Connaissez-vous cela ? Ceci teste plusieurs exemples sur le site officiel, car la page est l'affaire de Vue.

Réalité

Phoenix Legend : Le test n'est pas ce que vous voulez écrire, vous pouvez écrire si vous voulez~

L'écriture de tests prend beaucoup de temps, et peut prendre plus de temps que l'écriture du code du projet. De plus, si le code du projet change, les tests doivent être modifiés. Par conséquent, la plupart des entreprises nationales ne disposent pas d'un environnement permettant aux développeurs d'écrire des tests et s'appuient uniquement sur des testeurs pour garantir la qualité des logiciels. Si vous êtes dans une entreprise qui vous oblige à rédiger des tests avec diligence, chérissez-la.

Les tests peuvent améliorer la conception, lisez le livre de Martin Fowler sur les tests.