Teste Angular 2 - chamada de função assíncrona - quando usar

Quando você usa a função assíncrona no TestBed ao testar no Angular 2?

Quando você usa isso?

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

E quando você usa isso?

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

Alguém pode me esclarecer sobre isso?

asyncnão permitirá que o próximo teste seja iniciado até que asyncconclua todas as suas tarefas. O que asyncfaz é envolver o retorno de chamada em uma Zona, onde todas as tarefas assíncronas (por exemplo setTimeout) são rastreadas. Assim que todas as tarefas assíncronas forem concluídas, o é asyncconcluído.

Se você já trabalhou com Jasmine fora do Angular, pode ter visto donesendo passado para o callback

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

Aqui, é Jasmine nativo, onde dizemos a Jasmine que esse teste deve atrasar a conclusão até que ligemos done(). Se não ligássemos done()e em vez disso fizéssemos:

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

O teste seria concluído antes mesmo da expectativa, porque a promessa é resolvida depois que o teste termina de executar as tarefas síncronas.

Com o Angular (em um ambiente Jasmine), o Angular realmente fará chamadas donenos bastidores quando usarmos async. Ele manterá o controle de todas as tarefas assíncronas na Zona e, quando todas forem concluídas, doneserá chamado nos bastidores.

Em seu caso particular com a TestBedconfiguração, você a usaria geralmente quando quiser compileComponents. Eu raramente me deparo com uma situação em que eu teria que chamar de outra forma

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

Ao testar um componente que usa templateUrl(se você não estiver usando webpack), o Angular precisa fazer uma solicitação XHR para obter o modelo, de forma que a compilação do componente seja assíncrona. Portanto, devemos esperar até que seja resolvido antes de continuar o teste.

Quando você faz uma chamada assíncrona em seu teste, a função de teste real é concluída antes que a chamada assíncrona seja concluída. Quando você precisa verificar algum estado quando a chamada foi concluída (o que geralmente é o caso), a estrutura de teste relatará o teste como concluído enquanto ainda há trabalho assíncrono em andamento.

Com o uso, async(...)você diz à estrutura de teste para esperar até que a promessa de retorno ou observável seja concluída antes de tratar o teste como concluído.

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

O código passado para then(...)será executado depois que a própria função de teste for concluída. Com async()você torna a estrutura de teste ciente de que ela precisa aguardar a conclusão de promessas e observáveis ​​antes de tratar o teste como concluído.

Veja também

• https://angular.io/guide/testing#async