4 conseils pour rédiger des tests unitaires angulaires, venez jeter un oeil !

Idées de tests :

• 1. Si les tests unitaires sont possibles, essayez de donner la priorité aux tests unitaires.
• 2. Si les tests unitaires ne sont pas possibles, testez à travers une couche d'emballage. Par exemple, en encapsulant le test dans un composant, mais il est plus faible que. tests d'intégration
• 3. Tests d'intégration
• 4. Tests E2E

La difficulté du test augmente également progressivement, et plus il prend de temps. Si vous souhaitez simplifier les tests, pendant le développement, vous devez consciemment clarifier vos idées et écrire un code simple et efficace ~.

La pile technologique de test utilisée dans cet article : Angular12 + Jasmine Bien que la syntaxe des autres technologies de test soit différente, l'idée générale est similaire. [Recommandation du tutoriel associé : "Tutoriel angulaire"]

Astuces : Détermination du cas de test Jasmine, quelles sont les méthodes, vous pouvez le trouver ici, cliquez sur le composant dans mon

test unitaire

, la valeur par défaut est l'instance de l'objet à tester créée par Angulaire en utilisant la syntaxe suivante

beforeEach(() => { 
  luminaire = TestBed.createComponent(BannerComponent); 
  composant = luminaire.componentInstance ; 
  luminaire.detectChanges(); 
});

Test de fonction

1. Appel de fonction sans valeur de retour

function test(index:number,fn:Function){
 si(fn){
     fn(index);
 }
}

Comment tester ?

Contre-exemple : tester directement la valeur de retour undefined

const res = composant.test(1,() => {}));
  expect(res).tobeUndefined();

Pratique recommandée :

# Utiliser Jasmine
 it('devrait obtenir des données correctes lors de l'appel au test',() =>{
     paramètre const = {
       fn : () => {}
    }
   espionOn(param,'fn')
   composant.test(1,param.fn);
   expect(param.fn).toHaveBeenCalled();
 })

Instruction de structure Les instructions de structure des tests HostListener

sont les mots couramment utilisés pour masquer, afficher et pour afficher de telles fonctions

.
 @Directive({ sélecteur : '[ImageURlError]' })
classe d'exportation ImageUrlErrorDirective implémente OnChanges {
  constructeur (élément privé : ElementRef) {}
  
  @HostListener('erreur')
  erreur publique() { 
      this.el.nativeElement.style.display = 'aucun';
  } 
}

Comment tester ?

Idée de test :

• L'image n'est pas déclenchée jusqu'à ce qu'il y ait une erreur lors du chargement de l'image. Trouvez ensuite un moyen de déclencher l'erreur.
• La commande est généralement attachée au composant, utilisez simplement errorEvent sous dispath

. . Ajoutez un composant personnalisé et ajoutez la directive personnalisée @Component({.
  modèle : `<div>
    <image src="https://xxx.ss.png" ImageURlError></image>
  </div>`
})
classe TestHostComponent {

}

#2. Instanciez la vue du composant personnalisé et distribuez l'événement d'erreur
avantEach(waitForAsync(() => {
    TestBed.configureTestingModule({
        déclarations : [
            TestHostComponent,
            ImageURlErreur
        ]
    });
}));

avantEach(() => { 
 luminaire = TestBed.createComponent(TestHostComponent); 
 composant = luminaire.componentInstance ; 
 luminaire.detectChanges();
});
  
it('ne devrait autoriser que les chiffres', () => {
    const event = new ErrorEvent('error', {} comme n'importe quel);
    const image = luminaire.debugElement.query(By.directive(ImageURlError));
    image.nativeElement.dispatchEvent(event); //Distribuez simplement l'événement et la méthode error() sera exécutée à ce moment-là});

Faites bon usage des modificateurs public, private et protected

dans les spécifications angulaires

.ts peut accéder ; mais les modifications privées et protégées ne sont pas autorisées ;

appuyez sur le tableau noir

• si vous prévoyez de faire des tests unitaires et de tester chaque méthode, veuillez utiliser public de manière appropriée --- Difficulté *
• Si vous ne prévoyez pas de tester chaque méthode, Ensuite, vous pouvez passer Organiser les données, appeler l'entrée et réussir l'événement de clic de test de difficulté d'intégration ***

Le

déclenchement de l'événement de clic peut inclure un appel direct de js ou l'imitation de la souris pour déclencher l'événement de clic.

#xx.component.ts
@Composant({
 selectr : 'tableau de bord-liste-héros'
})
classe DashBoardHeroComponent {
    cartes publiques = [{
        cliquez : () => {
            .....
        }
    }]
}
#html
<dashboard-hero-list [cards]="cards" class="card">
</dashboard-hero-list>`

Comment tester ?

Idée de test :

• testez le composant directement, n'utilisez pas
• la collection d'objets contenant des événements de clic renvoyés par l'hôte et appelez click un par un, afin que la couverture du code soit améliorée

("devrait obtenir des données correctes lors de l'appel click", () => {
    const cartes = composant.cards;
    cartes?.forEach(carte => {
        si(carte.clic){
            card.click(nouvel événement('clic'));
        }
    });
    attendre(cartes?.longueur).toBe(1);
});

Autres idées de référence de clic :

Idée 1 :

• utilisez TestHostComponent pour envelopper le composant qui doit être testé
• , puis utilisez luminaire.nativeElement.querySelector('.card') pour trouver l'élément de clic lié au composant
• sur l'élément ; déclencher dispatchEvent, c'est tout.

Idée 2 :

• tester le composant directement, sans utiliser Host

• , puis utiliser luminaire.nativeElement.querySelector('.card') pour trouver l'élément de clic lié ;

• use triggerEventHandler('click');