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 :
< 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
formConfigest 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 () ;
} ) ;
} ) ];
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é
formConfigdu composant. Ce tableau sera traité dans le cycle de vieOnInitpour 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
detectChangesest 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éeadresseet une entréenom. - 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 .
Source link