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

AngularWie führt man Unit-Tests durch? In diesem Artikel werde ich Ihnen 4 High-Level-Techniken zum Schreiben von Angular-Unit-Tests vorstellen. Ich hoffe, dass es Ihnen hilfreich sein wird!

Testideen:

• 1. Wenn Unit-Tests möglich sind, versuchen Sie, Unit-Tests Vorrang zu geben.
• 2 Wenn Unit-Tests nicht möglich sind, testen Sie den Test durch eine Kapselung in eine Komponente, aber es gibt Schwächer als Integrationstests
• 3. Integrationstests

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-Empfehlungen: „Angular-Tutorial“]

Tipps: Jasmine-Testfallbestimmung, welche Methoden gibt es, Sie finden sie hier,

Poke me

Unit-Test

Der Standardwert ist Komponente Die Instanz des zu testenden Objekts, die von Angular mit der folgenden Syntax erstellt wurde

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

Funktionstest

1 Funktionsaufruf ohne Rückgabewert

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

Wie teste ich?

Gegenbeispiel: Testen Sie direkt den Rückgabewert undefiniert

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

Empfohlene Vorgehensweise:

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

Strukturanweisung HostListener-Test

Strukturanweisung, allgemeine Begriffe ausblenden, anzeigen und for-Schleife zum Anzeigen solcher Funktionen

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

Wie testen?

Testidee:

Der Bildladefehler wird ausgelöst, dann finden Sie einen Weg, den Fehler auszulösen

• Befehle werden im Allgemeinen an Komponenten angehängt, verwenden Sie einfach errorEvent unter 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 Gute Verwendung der öffentlichen, privaten und geschützten Modifikatoren. In Angular kann auf spec.ts zugegriffen werden, wenn es öffentlich oder geschützt ist Tafel

Wenn Sie Unit-Tests und Testmethoden einzeln durchführen möchten, verwenden Sie bitte entsprechend öffentlich --- Schwierigkeitsgrad *

Wenn Sie nicht vorhaben, jede Methode zu testen, können Sie die Daten organisieren und den Eingang anrufen , und führen Sie die Methode durch Integrationstests – Schwierigkeit ***

Klickereignis testen

• Klickereignisauslösung, es gibt direkte JS-Aufrufe zum Klicken und auch die Nachahmung der Maus, um das Klickereignis auszulösen.

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

Wie testen?

Testidee:

Testen Sie die Komponente direkt, ohne Host zu verwenden

Verwenden Sie die Sammlung von Objekten, die vom Code zurückgegebene Klickereignisse enthalten, um Click nacheinander aufzurufen, sodass die Codeabdeckung verbessert wird

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);
});

Referenzideen für andere Klicks:

Idee 1:
• Verwenden Sie TestHostComponent, um die Komponente zu umschließen, die getestet werden muss

Dann verwenden Sie Fixture.nativeElement.querySelector('.card'), um das an das gebundene Klickelement zu finden Komponente;

DispatchEvent für das Element auslösen, das heißt Ja,

Idee 2:

• Testen Sie die Komponente direkt, ohne Host zu verwenden
• Verwenden Sie dann Fixture.nativeElement.querySelector('.card'), um zu finden das gebundene Klickelement;

Verwenden Sie
• triggerEventHandler

  ('click');

• Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

  Programmiervideo
! !

Das obige ist der detaillierte Inhalt von4 Tipps zum Schreiben von Angular-Unit-Tests, schauen Sie vorbei!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!