Explication détaillée des étapes de tests unitaires et de tests E2E avec Angular CLI-js tutoriel-php.cn

Explication détaillée des étapes de tests unitaires et de tests E2E avec Angular CLI

php中世界最好的语言

Libérer： 2018-05-03 14:22:45

original

1899 Les gens l'ont consulté

Cette fois, je vous apporte une explication détaillée des tests unitaires et des étapes de test E2E de Angular CLI Quelles sont les précautions pour Angular CLI pour effectuer les tests unitaires et les étapes de test E2E. . Voici le combat réel. Jetons un coup d’œil au cas.

Le premier article est : "Utilisation d'angular cli pour générer un projet angulaire5" :http://www.jb51.net/article/136621.htm

Le deuxième article est : "Utilisation d'angular cli cli génère du code à partir de plans" :http://www.jb51.net/article/137031.htm

Le troisième article est : "Utiliser Angular CLI pour générer des routes" :http://www.jb51 . net/article/137033.htm

Le quatrième article : "Utiliser Angular CLI pour Build and Serve" : http://www.jb51.net/article/137034.htm

Cet article est le dernier article de la série.

Tests unitaires.

angular cli utilise le karma pour les tests unitaires.

Premier exécutez ng test --help ou ng test -h pour afficher l'aide.

Pour exécuter le test, exécutez simplement ng test Il exécutera tous les fichiers .spec.ts du projet.

Et il détectera également les modifications de fichier, s'il y a des modifications dans le fichier, il réexécutera le test.

Il doit être exécuté dans un processus de terminal séparé.

Créez d'abord Un projet angulaire avec routage :

ng new sales --routing

Copier après la connexion

Après avoir créé le projet, exécutez directement la commande test :

ng test

Copier après la connexion

et une page apparaîtra , qui sont les données du résultat du test.

Ensuite, j'ajouterai quelques composants supplémentaires et un module d'administration :

ng g c person
ng g c order
ng g m admin --routing
ng g c admin/user
ng g c admin/email

Copier après la connexion

Ensuite, configurez le routage, et le plus important est d'obtenir cela. effet :

À ce moment-là, j'ai réexécuté ng test :

Bien que le programme ait fonctionné sans problème, il y avait encore un problème avec le test : la prise du routeur n'est pas un composant angulaire.

Vous pouvez consulter la liste des spécifications :

À ce stade, lors de l'exécution du test, le module d'administration s'exécute de manière indépendante, donc le module ne fait pas référence au module routeur, donc la prise du routeur ne peut pas être reconnue.

Alors, comment pour résoudre ce problème ?

Ouvrez admin.component.spec.ts :

Remplissez cette phrase, et il n'y aura alors aucune erreur :

NO_

ERREURS_SCHEMA indique à angulaire d'ignorer les éléments ou attributs d'élément non reconnus

--code-coverage -. rapport de couverture du code cc, ceci n'est pas activé par défaut en raison de la vitesse de génération des rapports. Il est encore relativement lent
--les résultats de sortie des couleurs utilisant différentes couleurs sont activés par défaut

Utilisez ng test -sr ou ng test -w false pour exécuter un seul test

Test de couverture du code :

ng test --cc les rapports sont générés dans le /coverage dossier par défaut, mais peut être modifié en modifiant les propriétés dans .angular-cli.json.

下面生成代码覆盖率报告: