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

AngularComment effectuer des tests unitaires ? Dans cet article, je vais partager avec vous 4 techniques de haut niveau pour rédiger des tests unitaires angulaires. J'espère que cela vous sera utile !

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 via une couche d'encapsulation, par exemple en encapsulant le test. dans un composant, mais il existe des tests plus faibles que les tests d'intégration
• 3 Tests d'intégration
• 4 Tests E2E

La difficulté des tests augmente progressivement et plus cela 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. [Recommandations de tutoriel associées : "Tutoriel angulaire"]

Conseils : Détermination des cas de test Jasmine, quelles sont les méthodes, vous pouvez les trouver ici, Poke me

Test unitaire

La valeur par défaut est composant L'instance de l'objet à tester créée par Angular en utilisant la syntaxe suivante

beforeEach(() => { 
  fixture = TestBed.createComponent(BannerComponent); 
  component = fixture.componentInstance; 
  fixture.detectChanges(); 
});

Test de fonction

1 Appel de fonction sans valeur de retour

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

Comment tester ?

Contre-exemple : tester directement la valeur de retour non définie

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

Pratique recommandée :

 # 利用Jasmine
 it('should get correct data when call test',() =>{
     const param = {
       fn：() => {}
    }
   spyOn(param,'fn')
   component.test(1,param.fn);
   expect(param.fn).toHaveBeenCalled();
 })

Instruction structurelle Test HostListener

Instruction structurelle, termes courants cacher, afficher et boucle for pour afficher de telles fonctions

 # code
 @Directive({ selector: '[ImageURlError]' })
export class ImageUrlErrorDirective implements OnChanges {
  constructor(private el: ElementRef) {}
  
  @HostListener('error')
  public error() { 
      this.el.nativeElement.style.display = 'none';
  } 
}

Comment tester ?

Idée de test :

• L'erreur de chargement de l'image se déclenche, puis trouvez un moyen de déclencher l'erreur
• Les commandes sont généralement attachées aux composants sur l'élément image du composant, utilisez simplement errorEvent sous dispath

#1.添加一个自定义组件, 并添加上自定义指令
@Component({
  template: `<div>
    <image src="https://xxx.ss.png" ImageURlError></image>
  </div>`
})
class TestHostComponent {

}

#2.把自定义组件视图实例化，并派发errorEvent
beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
        declarations: [
            TestHostComponent,
            ImageURlError
        ]
    });
}));

beforeEach(() => { 
 fixture = TestBed.createComponent(TestHostComponent); 
 component = fixture.componentInstance; 
 fixture.detectChanges();
});
  
it('should allow numbers only', () => {
    const event = new ErrorEvent('error', {} as any);
    const image = fixture.debugElement.query(By.directive(ImageURlError));
    image.nativeElement.dispatchEvent(event); //派发事件即可，此时error()方法就会被执行到
});

Make. bon usage des modificateurs public, private et protected

En angulaire, spec.ts est accessible s'il est public cependant, s'il est privé ou protégé, il n'est pas accessible

Frappez sur le ; tableau noir

• Si vous envisagez de faire des tests unitaires et de tester les méthodes une par une, veuillez utiliser public de manière appropriée --- Difficulté *
• Si vous ne prévoyez pas de tester chaque méthode, vous pouvez organiser les données, appeler l'entrée , et passez la méthode par les tests d'intégration -- Difficulté ***

Test de l'événement de clic

Déclenchement de l'événement de clic, il y a un clic d'appel direct js, et également l'imitation de la souris pour déclencher l'événement de clic.

# xx.component.ts
@Component({
 selecotr: 'dashboard-hero-list'
})
class DashBoardHeroComponent {
    public cards = [{
        click: () => {
            .....
        }
    }]
}
# html
<dashboard-hero-list [cards]="cards"  class="card">
</dashboard-hero-list>`

Comment tester ?

Idée de test :

• Testez le composant directement sans utiliser Host
• Utilisez la collection d'objets contenant des événements de clic renvoyés par le code pour appeler click un par un, afin que la couverture du code soit améliorée

it('should get correct data when call click',() => {
    const cards = component.cards;
    cards?.forEach(card => {
        if(card.click){
            card.click(new Event('click'));
        }
    });
    expect(cards?.length).toBe(1);
});

Idées de référence pour d'autres clics :

Idée 1 :

• Utilisez TestHostComponent pour envelopper le composant qui doit être testé
• Utilisez ensuite luminaire.nativeElement.querySelector('.card') pour trouver l'élément de clic lié au composant ;
• Déclenchez dispatchEvent sur l'élément, c'est-à-dire Oui,

Idée 2 :

• Testez le composant directement sans utiliser Host

• Utilisez ensuite luminaire.nativeElement.querySelector('.card') pour trouver l'élément de clic lié ;

• Utilisez triggerEventHandler ('click');

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!