Test de formes dynamiques en angulaire

Apprenez à créer une forme dynamique dans Angular, puis créez des tests pour vérifier que la forme fonctionne comme prévu.

Cet article couvre le test des formes dynamiques en Angular. Les formes dynamiques angulaires sont des formes créées à l'aide de classes de formes réactives telles que Groupe de formes et Commandes de formulaire . Nous allons rédiger des tests pour ces formulaires afin de nous assurer qu'ils fonctionnent comme prévu.

Pour cet article, nous allons tester un formulaire d'inscription. Le formulaire est généré dynamiquement en transmettant au composant un tableau d'objets décrivant les éléments d'entrée. ensuite, un FormControl sera généré pour chaque élément avant que le formulaire ne soit regroupé à l'aide de FormGroup .

Pour commencer, vous devez amorcer un projet Angular à l'aide de la CLI. Pour suivre ce tutoriel, une compréhension de base de Angular est requise. Assurez-vous que Node et npm sont installés avant de commencer. Si vous n'avez aucune connaissance préalable de Angular, suivez le tutoriel ici ici . Revenez et terminez ce didacticiel lorsque vous aurez terminé.

Application d'initialisation

Pour commencer, nous allons utiliser la CLI (interface de ligne de commande) fournie par l'équipe Angular pour initialiser notre projet.

Installez d'abord le CLI en exécutant npm install -g @ angular / cli . npm est un gestionnaire de paquets utilisé pour installer des paquets. Il sera disponible sur votre PC si vous avez Node installé. Sinon, téléchargez Node ici .

Pour créer un nouveau projet Angular à l'aide de la CLI, ouvrez un terminal et exécutez :
ng new dynamic-form-tests

Accédez au dossier de projet et démarrez le serveur de développement angulaire en exécutant ng serve dans un terminal situé dans le dossier racine de votre projet. 19659011] Création d'un formulaire d'inscription

Pour commencer, nous allons configurer le formulaire d'inscription afin de nous préparer pour les tests. Le formulaire lui-même sera rendu par un composant distinct du composant App . Exécutez la commande suivante dans un terminal du dossier racine pour créer le composant:

     ng generate composant dynamic-form

Ouvrez le fichier dynamic-form.component.html et copiez-y le contenu suivant:

    
    
     < form  [formGroup] =  " formulaire  "  (soumettre)  = "  onSubmit ()  " > 
       < div   * ngFor  = 19659017] " let element of formConfig "  > 
         < div   [ngSwitch]  =  " element.inputType  " > 
           < label   
 =  = 

 élément.id "  > [19659035] {{element.name}}  </  label 
          >   < span   * ngIf  =  "élément ? .required  " >  *  </  span > 
           < br   /> 
           < ] div   * ngSwitchCase  =  "[1 9659017] ' input '  " > 
             < div   * ngIf  =  " element.type ===  ' radio ' ; sinon notRadio  " > 
               < div   * ngFor  =  " option option.options "  > 
                 < entrée 
                   [type]  =  " element.type " 
                   [name]  =  " element.name " 
                   urn:uuid:dd93bfd2-a676-49bd-af4f-494802925b9e  =  " option.id " 
                   [formControlName]  =  " element.name " 
                   [value]  =  " option.value " 
                 /> 
                 < label   [for]  =  " option.id "  >  {{option.label}} [19659036] </  label 
                >   < span   * ngIf  =  " élément?. Requis "  >  *  </  span > 
               </  div > 
             </  div > 
             < ng-template   #notRadio > 
               < entrée 
                 [type]  =  " element.type " 
                 urn:uuid:dd93bfd2-a676-49bd-af4f-494802925b9e  =  " element.name " 
                 [formControlName]  =  " element.name " 
               /> 
             </  ng-template > 
           </  div > 
           < sélectionnez 
             [name]  =  " element.name " 
             urn:uuid:dd93bfd2-a676-49bd-af4f-494802925b9e  =  " element.id " 
             * ngSwitchCase  =  " ' sélectionnez ' " 
             [formControlName]  =  " element.name " 
          > 
             < option   [value]  =  " option.value "   * ngFor  =  " option de choix d’éléments.options  " >  {{
              option.label
            }}}  </  option > 
           </  sélectionnez > 
         </  de > 
       </  de site > 
       < bouton >  Envoyer  </  bouton > 
     </  forme > 
 Nous utilisons la liaison  ngSwitch  pour vérifier le type d'entrée   avant le rendu. Le type d'entrée   de l'élément  select  est différent, de sorte qu'il est restitué différemment à l'aide de la liaison  * ngSwitchCase . Vous pouvez ajouter plusieurs  inputTypes  et les gérer à l'aide du  * ngSwitchCase . L'élément d'entrée du fichier  par exemple, peut être rendu différemment des autres éléments d'entrée. Dans ce cas, le type  inputType  spécifié peut être un fichier  .
 Pour chaque élément en entrée, nous ajoutons une directive formControlName  qui prend le nom .  propriété de l'élément. La directive  de formulaire  est utilisée pour suivre chaque valeur de  FormControl . L'élément de formulaire prend également la directive  formGroup et l'objet  formulaire  lui est transmis.
 Mettons à jour le composant pour générer des contrôles de formulaire pour chaque champ d'entrée et pour regrouper les éléments à l'aide de la classe  FormGroup . Ouvrez le fichier  dynamic-form.component.ts  et mettez à jour le fichier de composant pour générer des contrôles de formulaire pour chaque entrée et un groupe de formulaires.
   
    
    
     import   { Composant [ OnInit  Entrée }   de   '@ angular / core' ; 
     import   { FormControl  ] Groupe de formes }   de   '@ angular / forms' 
    @  Composant  ( {
      sélecteur :   'app-dynamic-form' 
      templateUrl :   './ dynamic-form.component.html' 
      styleUrls :   [ './ dynamic-form.component.css' ] 
    } ) 
     export   classe   du logiciel DynamicFormComponent  . implémente   OnInit   {
       constructeur  ()   { } 
      @  Input  ()  formConfig  =   [] 
      formulaire :  FormGroup ; 
      userGroup  =   {} ; 
    
       sur Submit  ()  {
        console .  log  ( ceci .  forme .  valeur ) ; 
      } 
       ngOnInit [19659017] ()  {
         pour  ( laissez  config  de   cette .  formeConfig ). {
           this .  userGroup  [ config .  name ]   =   nouveau   nouveau   de   nouveauContrôle .  config .  valeur  ||   '' ) 
        } 
         le .  formulaire  =   nouveau [19659172] FormGroup  ( this .  userGroup ) ; 
      } 
    } 
 Le composant prendra un  Input  ( formConfig ) qui sera un tableau d'objets contenant des informations sur chaque entrée potentielle. Dans le cycle de vie  OnInit  du composant, nous allons parcourir le tableau  formConfig  et créer un contrôle de formulaire pour chaque entrée à l'aide de la valeur  nommée  et .  propriétés. Les données seront stockées dans un objet  userGroup qui sera transmis à la classe  FormGroup  pour générer un objet  FormGroup  (] []. .
 Enfin, nous mettrons à jour le fichier  app.component.html  pour rendre le composant  de type dynamique  et mettrons également à jour le  app.component.ts  fichier pour créer le tableau  formConfig :
  <-- src/app/app.component.html -->
    
     < section > 
         < app-dynamic-form   [formConfig]  =  " userFormData "  . 19659017]>   </  app-dynamic-form > 
     </  article > 
 Suivant est le fichier de composant. Ouvrez le fichier  app.component.ts  et mettez-le à jour avec l'extrait de code ci-dessous:
     import   { Component  OnInit }   de   '@ angular / core' ; 
    @  Composant  ( {
      sélecteur :   'mon-application' 
      templateUrl :   './ app.component.html' 
      styleUrls :   [ './ app.component.css' ] 
    } ) 
     classe d'exportation   classe   de AppComponent  
      userFormData  =   [
         {
          nom :   'nom' 
          valeur :   '' 
           type :   'texte' 
          id :   'nom' 
          type d'entrée :   'entrée' 
          requis :   true 
        }   {
          nom :   'adresse' 
          valeur :   '' 
           type :   'texte' 
          id :   'adresse' 
          type d'entrée :   'entrée' 
        }   {
          nom :   'age' 
          valeur :   '' 
           type :   'nombre' 
          id :   'age' 
          type d'entrée :   'entrée' 
        }   {
          nom :   'téléphone' 
          valeur :   '' 
           type :   'tel' 
          id :   'téléphone' 
          type d'entrée :   'entrée' 
        }   {
          nom :   'sexe' 
           type :   'radio' 
          type d'entrée :   'entrée' 
          options :   [
             {
              id :   'mâle' 
              étiquette :   'mâle' 
              valeur :   'mâle' 
            } 
             {
              id :   'femme' 
              étiquette :   'femme' 
              valeur :   'femme' 
            } 
          ] 
        }   {
          nom :   'pays' 
          valeur :   '' 
           type :   '' 
          id :   'nom' 
          type d'entrée :   'select' 
          options :   [
             {
              étiquette :   'Nigeria' 
              valeur :   'nigeria' 
            } 
             {
              étiquette :   'États-Unis' 
              valeur :   'us' 
            } 
             {
              étiquette :   'UK' 
              valeur :   'uk' 
            } 
          ] 
        } 
      ] 
    } 
 Le tableau  userForm  contient des objets ayant des propriétés telles que  de type  value  name . Ces valeurs seront utilisées pour générer les champs appropriés dans la vue. Cela nous permet d'ajouter plus de champs de saisie dans le modèle sans mettre à jour manuellement le modèle. Ce tableau est transmis au composant  dynamic-form .
 N'oubliez pas que pour utiliser les formulaires réactifs, vous devez importer le module  ReactiveFormsModule . Ouvrez le fichier  app.module.ts  et mettez-le à jour afin d'y inclure le  ReactiveFormsModule :
    
     import   { FormsModule . ReactiveFormsModule ]}   de   '@ angular / forms' ; 
    
    @  NgModule  ( {
      importations :        [
        
        Formulaire de formulaire réactif
      ] 
      
    } ) 
     export   class   AppModule   { } 
 Vérification du formulaire
 lors de la génération de composants, Angular génère un fichier  spec  à côté du composant à tester. Puisque nous allons tester le composant  dynamic-form nous allons utiliser le fichier  dynamic-form.component.spec.ts .
 La première étape consiste à: configurer le banc d'essai pour le composant. Angular fournit déjà un passe-partout pour tester le composant, et nous allons simplement l'étendre. Ouvrez le  dynamic-form.component.spec.ts  et mettez à jour le banc d'essai pour importer le  ReactiveFormsModule  dont dépend le composant:
     import   {  async  ComponentFixture  TestBed }   de   '@ angular / core / testing' ; 
     importation   {[1945947]. ReactiveFormsModule }   de   '@ angular / forms' ; 19659155] import   { du composant dynamiqueFormComponent }   de   '. form.component '; 
    
     décrivent  (' DynamicFormComponent '  ()   =>   {
       de  composant :  DynamicFormComponent ; 
       laissez luminaire :  ComponentFixture  < DynamicFormComponent >  ; 19659017] ( async  ( ()   =>   {
        TestBed .  configureTestingModule  ( {
          déclarations :   [ composant de formulaire dynamique ] 
          importations :   [ Module de formulaire réactif ] 
        } ) 
        .  compileComponents  () . 19659197]} ) ) ; 
    
       avant chaque  ( ()   =>   {
        fixture  =  TestBed .  createComponent  ( de DynamicFormComponent ) ; 
        composant  =  luminaire .  composantInstance ; 
        luminaire .  detectChanges  () ; 
      } ) ; 
    
        ( 'devrait créer'  ]  ()   =>   {
         expect  ( composant ) .  de BeTruthy  () ) ; 
      } ) ; 
    } ) ; 
 Nous allons tester notre formulaire en utilisant les cas suivants:
 Rendu de formulaire : ici, nous vérifierons si le composant génère les éléments d'entrée corrects lorsqu'un tableau  formConfig  est fourni.
 Validité du formulaire : vérifie que le formulaire renvoie l'état de validité correct
 Validité de saisie : vérifie si le composant répond à la saisie dans le modèle de vue
 Erreurs de saisie : nous allons tester les erreurs sur les éléments d'entrée requis.
 Pour commencer les tests, exécutez la commande suivante sur votre terminal:  test de fil  ou  npm test 
 Rendu de formulaire [19659006] Pour ce test, nous allons passer un tableau d'objets contenant des données sur les éléments d'entrée que nous souhaitons créer, et nous allons vérifier que le composant rend les éléments corrects. Mettez à jour le fichier de spécifications du composant afin d'inclure le test:
     décrivez  ( 'DynamicFormComponent'   ()   =>   {
      
    
     beforeEach [19659017] ( ()   =>   {
        fixture  =  TestBed .  createComponent  ( de DynamicFormComponent ) ; 
        composant  =  luminaire .  composantInstance ; 
        composant .  formConfig  =   [
           {
            nom :   'nom' 
            valeur :   '' 
             type :   'texte' 
            id :   'nom' 
            type d'entrée :   'entrée' 
            required :   true 
          }   {
            nom :   'adresse' 
            valeur :   '' 
             type :   'texte' 
            id :   'adresse' 
            type d'entrée :   'entrée' 
          } 
        ] 
        composant .  ngOnInit  () ; 
        l 'appareil .  detectChanges  () ; 
      } ) ; 
    
       le  (' devrait rendre les éléments d 'entrée'   ()   =>   {
         const  compilé  =  luminaire .  debugElement .  nativeElement ; 
         const  addressInput  =  compilé .  querySelector  ( 'entrée [id="address"]'   ]; 
         const  nameInput  =  compilé .  querySelector  ( 'entrée [id="name"]' ) ;  expect  ( addressInput ) .  toBeTruthy  () ; 
         expect  (). 19659017].  en BeTruthy  () ; 
      } ) ; 
    } )  ]; 
 Nous avons mis à jour la suite de tests avec les modifications suivantes:
 Nous avons affecté un tableau à la propriété  formConfig  du composant. Ce tableau sera traité dans le cycle de vie  OnInit  pour générer des contrôles de formulaire pour les éléments en entrée, puis un groupe de formulaires.
 Nous avons ensuite déclenché le cycle de vie  ngOnInit . Cela se fait manuellement car Angular ne le fait pas lors des tests.
 Les modifications apportées au composant nous obligent à le forcer manuellement à détecter les modifications. Ainsi, la méthode  detectChanges  est déclenchée. Cette méthode garantit que le modèle est mis à jour en réponse aux modifications apportées dans le fichier de composant.
 Nous obtenons le modèle de vue compilé à partir de l'objet fixture . À partir de là, nous rechercherons les éléments d’entrée qui auraient dû être créés par le composant. Nous nous attendions à deux composants - une entrée  adresse  et une entrée  nom .
 Nous allons vérifier si les éléments existent en utilisant la méthode  toBeTruthy .
 Form Validity
 Pour ce test, nous allons vérifier l'état de validité du formulaire après la mise à jour des valeurs des éléments en entrée. Pour ce test, nous mettrons à jour les valeurs de la propriété  form  directement sans accéder à la vue. Ouvrez le fichier de spécifications et mettez à jour la suite de tests pour inclure le test ci-dessous:
 
  il  ( "devrait vérifier la validité du formulaire"   ()   => [19659047] {
  const  form  =  composant .  form ; 
  expect  ( form .
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
 
   
 
Source link 
Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)
Articles similaires