4 Tipps zum Schreiben von Angular-Unit-Tests, schauen Sie vorbei!

Testideen:

• 1. Wenn Unit-Tests möglich sind, geben Sie Unit-Tests Vorrang.
• 2. Wenn Unit-Tests nicht möglich sind, testen Sie den Test beispielsweise in einer Komponente, die jedoch schwächer ist Integrationstests.
• 3. Integrationstests
• 4. E2E-Tests

Der Schwierigkeitsgrad des Tests nimmt ebenfalls allmählich zu und je länger er dauert. Wenn Sie das Testen vereinfachen möchten, sollten Sie während der Entwicklung Ihre Ideen bewusst klären und Code schreiben, der einfach und effizient ist ~.

Der in diesem Artikel verwendete Testtechnologie-Stack: Angular12 + Jasmine. Obwohl die Syntax anderer Testtechnologien unterschiedlich ist, ist die Gesamtidee ähnlich. [Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]

Tipps: Jasmine-Testfallbestimmung, welche Methoden gibt es, Sie finden sie hier, klicken Sie auf die Komponente in meinem

Unit-

Test Angular mit der folgenden Syntax

beforeEach(() => { 
  Fixture = TestBed.createComponent(BannerComponent); 
  Komponente = Fixture.ComponentInstance; 
  Fixture.detectChanges(); 
});

Funktionstest

1. Funktionsaufruf ohne Rückgabewert

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

Wie teste ich?

Gegenbeispiel: Direktes Testen des Rückgabewerts undefiniert

const res = Component.test(1,() => {}));
  erwarten(res).tobeUndefiniert();

Empfohlene Vorgehensweise:

# Jasmine verwenden
 it('sollte beim Aufruf von test korrekte Daten erhalten',() =>{
     const param = {
       fn: () => {}
    }
   spyOn(param,'fn')
   Komponente.test(1,param.fn);
   erwarten(param.fn).toHaveBeenCalled();
 })

Strukturanweisung HostListener testet

#

-Codes anzuzeigen

 @Directive({ selector: '[ImageURlError]' })
Die Exportklasse ImageUrlErrorDirective implementiert OnChanges {
  Konstruktor(private el: ElementRef) {}
  
  @HostListener('Fehler')
  öffentlicher Fehler() { 
      this.el.nativeElement.style.display = 'none';
  } 
}

Wie teste ich?

Testidee:

,

• wenn beim Laden des Bildes ein Fehler auftritt.
• Der Befehl wird im Allgemeinen an das Komponentenbildelement angehängt

. Fügen Sie eine benutzerdefinierte Komponente hinzu und fügen Sie die benutzerdefinierte Anweisung @Component({
  Vorlage: `<div>
    <image src="https://xxx.ss.png" ImageURlError></image>
  </div>`
})
Klasse TestHostComponent {

}

#2. Instanziieren Sie die benutzerdefinierte Komponentenansicht und lösen Sie errorEvent aus
beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
        Erklärungen: [
            TestHostComponent,
            ImageURlError
        ]
    });
}));

beforeEach(() => { 
 Fixture = TestBed.createComponent(TestHostComponent); 
 Komponente = Fixture.ComponentInstance; 
 Fixture.detectChanges();
});
  
it('sollte nur Zahlen zulassen', () => {
    const event = new ErrorEvent('error', {} as any);
    const image = Fixture.debugElement.query(By.directive(ImageURlError));
    

-

Methode wird zu diesem Zeitpunkt ausgeführt})

; .ts kann darauf zugreifen; private, geschützte Änderungen sind jedoch nicht zulässig.

• Wenn Sie Unit-Tests durchführen und jede Methode testen möchten, verwenden Sie bitte entsprechend die Option „public“ --- Schwierigkeit *
• Wenn Sie nicht vorhaben, jede Methode zu testen

,

• Dann können Sie die Daten organisieren, den Eingang aufrufen und das Klickereignis „Integration test-difficulty ***“ bestehen

.

Das Auslösen des Klickereignisses kann den direkten Aufruf von js durch Klicken oder die Nachahmung der Maus zum Auslösen des Klickereignisses umfassen.

#xx.component.ts
@Komponente({
 selecotr: 'dashboard-hero-list'
})
Klasse DashBoardHeroComponent {
    öffentliche Karten = [{
        klicken: () => {
            .....
        }
    }]
}
#html
<dashboard-hero-list [cards]="cards" class="card">
</dashboard-hero-list>`

Wie teste ich?

Testidee:

• Testen Sie die Komponente direkt, verwenden Sie nicht
• die vom Host zurückgegebene Sammlung von Objekten mit Klickereignissen und rufen Sie Click nacheinander auf, damit die Codeabdeckung verbessert wird

(„sollte beim Aufruf von Click korrekte Daten erhalten“, () => {
    const Cards = Component.cards;
    Karten?.forEach(card => {
        if(card.click){
            card.click(new Event('click'));
        }
    });
    erwarten(karten?.länge).toBe(1);
});

Weitere Ideen für Klickreferenzen:

Idee 1:

• Verwenden Sie TestHostComponent, um die zu testende Komponente zu umschließen
• , und verwenden Sie dann Fixture.nativeElement.querySelector('.card'), um das an die Komponente gebundene Klickelement zu finden
• . Trigger-DispatchEvent, das war's.

Idee 2:

• Testen Sie die Komponente direkt, ohne Host zu verwenden

• , und verwenden Sie dann Fixture.nativeElement.querySelector('.card'), um das gebundene Click-Element zu finden.

• use triggerEventHandler('click');