Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

test-formulaire-angular.pdf

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Tests unitaires à l'aide de formulaires réactifs dans Angular
Dans cet article, nous apprendrons à écrire des tests unitai...
Formulaire de connexion
Créons un formulaire de connexion avec tout le HTML et la
logique de formulaire requis comme ci-de...
À partir de ce qui précède, j'ai créé un exemple de formulaire de
connexion avec deux champs, c'est-à-dire… nom d'utilisat...
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 11 Publicité

test-formulaire-angular.pdf

Télécharger pour lire hors ligne

Dans cet exemple, nous apprendrons à écrire des tests unitaires pour
les formulaires à l'aide de formulaires réactifs.

Dans cet exemple, nous apprendrons à écrire des tests unitaires pour
les formulaires à l'aide de formulaires réactifs.

Publicité
Publicité

Plus De Contenu Connexe

Plus récents (20)

Publicité

test-formulaire-angular.pdf

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 10. Cas d'essai 5 : Tester l'ensemble du formulaire de connexion pour être valide Jaouad assabbour
  11. 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

×