wake-up-neo.com

Angular 2 Testen - Asynchroner Funktionsaufruf - Verwendungszeitpunkt

Wann verwenden Sie die asynchrone Funktion im TestBed beim Testen in Angular 2?

Wann benutzt du das?

 beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [MyModule],
            schemas: [NO_ERRORS_SCHEMA],
        });
    });

Und wann benutzt du das?

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [MyModule],
        schemas: [NO_ERRORS_SCHEMA],
    });
}));

Kann mich jemand aufklären?

66
xiotee

async lässt den nächsten Test erst zu, wenn async alle seine Aufgaben abgeschlossen hat. Was async tut, ist das Umbrechen des Rückrufs in eine Zone, in der alle asynchronen Aufgaben (z. B. setTimeout) verfolgt werden. Sobald alle asynchronen Aufgaben abgeschlossen sind, wird das async abgeschlossen.

Wenn Sie jemals mit Jasmine außerhalb von Angular gearbeitet haben, haben Sie möglicherweise gesehen, dass done an den Rückruf übergeben wurde

it('..', function(done) {
  someAsyncAction().then(() => {
    expect(something).toBe(something);
    done();
  });
});

Hier ist dies native Jasmine, wo wir Jasmine mitteilen, dass dieser Test den Abschluss verzögern soll, bis wir done() aufrufen. Wenn wir done() nicht aufgerufen haben und dies stattdessen getan haben:

it('..', function() {
  someAsyncAction().then(() => {
    expect(something).toBe(something);
  });
});

Der Test würde noch vor der Erwartung abgeschlossen sein, da das Versprechen aufgelöst wird nach der Test ist mit der Ausführung der synchronen Aufgaben fertig.

Mit Angular (in einer Jasmine-Umgebung)) ruft Angular tatsächlich done hinter den Kulissen auf, wenn wir async verwenden. Es verfolgt alle asynchronen Aufgaben in der Zone, und wenn alle erledigt sind, wird done hinter den Kulissen aufgerufen.

In Ihrem speziellen Fall mit der Konfiguration TestBed würden Sie dies im Allgemeinen verwenden, wenn Sie compileComponents möchten. Ich stoße selten auf eine Situation, in der ich es anders nennen müsste

beforeEach(async(() => {
   TestBed.configureTestingModule({
     declarations: [MyModule],
     schemas: [NO_ERRORS_SCHEMA],
   })
   .compileComponent().then(() => {
      fixture = TestBed.createComponent(TestComponent);
   });
}));

Wenn Sie eine Komponente testen, die templateUrl verwendet (wenn Sie kein Webpack verwenden), muss Angular) eine XHR-Anfrage stellen, um die Vorlage abzurufen, damit die Komponente kompiliert werden kann Seien Sie asynchron, also sollten wir warten, bis es aufgelöst ist, bevor wir mit dem Testen fortfahren.

75
Paul Samsotha

Wenn Sie in Ihrem Test einen asynchronen Anruf tätigen, ist die eigentliche Testfunktion abgeschlossen, bevor der asynchrone Anruf abgeschlossen ist. Wenn Sie einen Status überprüfen müssen, als der Aufruf abgeschlossen war (was normalerweise der Fall ist), meldet das Test-Framework, dass der Test abgeschlossen ist, während noch asynchrone Arbeiten ausgeführt werden.

Wenn Sie async(...) verwenden, weisen Sie das Test-Framework an, zu warten, bis das Rückgabeversprechen oder das beobachtbare Ergebnis abgeschlossen ist, bevor Sie den Test als abgeschlossen behandeln.

it('should show quote after getQuote promise (async)', async(() => {
  fixture.detectChanges();

  fixture.whenStable().then(() => { // wait for async getQuote
    fixture.detectChanges();        // update view with quote
    expect(el.textContent).toBe(testQuote);
  });
}));

Der an then(...) übergebene Code wird ausgeführt , nachdem die Testfunktion selbst abgeschlossen wurde. Mit async() machen Sie das Test-Framework darauf aufmerksam, dass es auf den Abschluss von Versprechungen und Observablen warten muss, bevor der Test als abgeschlossen behandelt wird.

Siehe auch

22