Cet article explique comment écrire des tests unitaires pour des formulaires réactifs dans Angular, en créant un exemple de formulaire de connexion avec des champs pour le nom d'utilisateur et le mot de passe. Il décrit également plusieurs cas de test, tels que la vérification des éléments rendus, des valeurs initiales et la validation des champs. Chaque cas de test comprend une série d'étapes pour s'assurer que le formulaire fonctionne correctement et valide les entrées de l'utilisateur.

1. Tests unitaires à l'aide de formulaires réactifs dans Angular
Dans cet article, nous apprendrons à écrire des tests unitaires pour
les formulaires à l'aide de formulaires réactifs.
Jaouad assabbour

2. Formulaire de connexion
Créons un formulaire de connexion avec tout le HTML et la
logique de formulaire requis comme ci-dessous
Formulaire de connexion HTML
Se connecter depuis la classe
Jaouad assabbour

3. À partir de ce qui précède, j'ai créé un exemple de formulaire de
connexion avec deux champs, c'est-à-dire… nom d'utilisateur et
mot de passe, en utilisant le service de création de formulaires de
formulaire réactif et mappé chaque champ aux champs de saisie
HTML.
Pour l'exemple ci-dessus, comprenons les différents cas de test et
leur exécution.
Jaouad assabbour

4. Tester les formulaires réactifs
Configuration du composant et des modules requis comme ci-
dessous
À partir de ce qui précède, nous avons configuré le module de
formulaires réactifs et le composant Demos sur notre banc d'essai.
Nous avons également créé des luminaires et leurs instances de
composants respectivement
Jaouad assabbour

5. Cas d'essai 1 :
Tester le nombre d'éléments rendus dans l'interface utilisateur est
égal aux contrôles de formulaire définis dans le formulaire réactif.
Exécution et compréhension
Étape 1 : débogage et obtention de l'élément de formulaire à partir du
contenu HTML et stockage dans la variable d'élément de formulaire.
Étape 2 : À l'aide du sélecteur de requête, nous recherchons tous les
éléments « d'entrée » à l'intérieur du formulaire.
Étape 3 : Enfin, nous vérifions si le nombre d'éléments d'entrée est égal au
nombre de contrôles de formulaire définis.
Jaouad assabbour

6. Cas d'essai 2 :
Test des valeurs initiales de la forme réactive
Exécution et compréhension
Étape 1 : Récupérez le formulaire de connexion à partir du
composant.
Étape 2 : Créez un objet de valeur par défaut de formulaire de
connexion factice.
Étape 3 : Enfin, comparez les valeurs du groupe de formulaires
avec l'objet factice.
Jaouad assabbour

7. Cas d'essai 3 :
Tester la valeur du nom d'utilisateur et la validation avant d'entrer
des valeurs en HTML
Exécution et compréhension
Étape 1 : Récupérez l'élément de nom d'utilisateur à partir du contenu
HTML à l'aide de debugElement et de querySeclector
Étape 2 : Obtenez la valeur du nom d'utilisateur à partir du générateur de
formulaire de composant.
Étape 3 : Comparez les valeurs de l'étape 1 et de l'étape 2.
Étape 4 : Comme aucune valeur n'est entrée dans l'élément HTML du nom
d'utilisateur, il y aura une erreur requise. Ainsi, le générateur de formulaire
contient un objet d'erreur et ne sera pas égal à "null"
Étape 5 : Comme il n'y a pas de valeur dans le champ du nom d'utilisateur
de HTML, la propriété requise devrait être vraie.
Jaouad assabbour

8. Cas d'essai 4 :
Test de la valeur du nom d'utilisateur après avoir entré la valeur
dans l'élément HTML
Jaouad assabbour

9. Exécution et compréhension
Étape 1 : Récupérez l'élément de nom d'utilisateur à partir du contenu
HTML à l'aide de debugElement et de querySeclector
Étape 2 : Attribuez une valeur à l'élément HTML du nom d'utilisateur.
Étape 3 : Émettez un événement d'entrée pour mettre à jour le contenu
HTML.
Étape 4 : Ici, nous détectons les changements pour le composant.
Étape 5 : Une fois le composant stable et mis à jour, nous obtiendrons le
nom d'utilisateur du formulaire auprès du générateur de formulaires.
Étape 6 : Ici, nous nous attendons à ce que la valeur de l'élément HTML et
la valeur du nom d'utilisateur du contrôle de formulaire soient égales.
Étape 7 : Comme le champ du nom d'utilisateur dans HTML est rempli
avec une certaine valeur, il n'y a pas d'erreurs pour le générateur de
formulaires, donc on s'attend à ce que les erreurs soient "nulles"
Jaouad assabbour

10. Cas d'essai 5 :
Tester l'ensemble du formulaire de connexion pour être valide
Jaouad assabbour

11. Exécution et compréhension
Étape 1 : Récupérez l'élément de nom d'utilisateur à partir du contenu
HTML à l'aide de debugElement et de querySeclector
Étape 2 : Obtenez l'élément de mot de passe à partir du contenu HTML à
l'aide de debugElement et querySeclector
Étape 3 : Remplissez la valeur Nom d'utilisateur avec un exemple de
contenu.
Étape 4 : Remplissez la valeur du mot de passe avec un exemple de
contenu.
Étape 5 : Envoi d'événements sur l'élément Nom d'utilisateur pour mettre
à jour la valeur dans le champ Nom d'utilisateur HTML.
Étape 6 : Envoi d'événements sur l'élément Mot de passe pour mettre à
jour la valeur dans le champ Mot de passe HTML.
Étape 7 : Obtenez la propriété valide du groupe de formulaires de
connexion.
Étape 8 : Attendez-vous à ce que la propriété valide du groupe de
formulaires soit vraie.
Jaouad assabbour