Angulaire 2 Tests - Async appel de fonction - quand utiliser

Question

Lorsque vous utilisez la fonction async dans le Banc d'essai lors de l'essai de Angulaire 2?

Quand pensez-vous l'utiliser?

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

Et quand pensez-vous l'utiliser?

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

Quelqu'un peut-il m'éclairer sur ce point ?

Answer 1

async ne permettra pas le test suivant pour démarrer jusqu'à ce que l' async finitions de toutes ses tâches. Ce async n'est envelopper le rappel dans une Zone, où toutes les tâches asynchrones (par exemple, setTimeout) sont suivis. Une fois que toutes les tâches asynchrones sont complètes, puis l' async complète.

Si vous avez jamais travaillé avec de Jasmin à l'extérieur hors Angulaire, vous pouvez avoir vu done d'être passé à la fonction de rappel

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

Ici, c'est le natif de Jasmin, où nous raconter Jasmin que ce test devrait retarder l'achèvement jusqu'à ce que nous appelons done(). Si nous n'avons pas d'appel done() et au lieu de cela fait cela:

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

Le test complet avant même l'attente, parce que la promesse se résout après le test est fini de l'exécution de la machine synchrone tâches.

Angulaire (dans un Jasmin de l'environnement), Angulaire sera fait appel done derrière les coulisses lorsque nous utilisons async. Il va garder la trace de toutes les tâches asynchrones dans la Zone, et quand ils sont tous finis, done sera appelé en coulisses.

Dans votre cas particulier, avec l' TestBed de configuration, vous pouvez utiliser cette généralement lorsque vous souhaitez compileComponents. J'ai rarement dans une situation où je dois l'appeler autrement

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

Lors du test d'un composant qui utilise templateUrl (si vous n'êtes pas à l'aide de webpack), puis Angulaire besoin de faire une demande XHR pour obtenir le modèle, de sorte que la compilation de la composante serait asynchrone. Donc, nous devrions attendre jusqu'à ce qu'il décide, avant de poursuivre les tests.

Answer 2

Lorsque vous effectuez un appel asynchrone dans votre test, le test de la fonction est terminée avant que l'appel asynchrone est terminée. Lorsque vous avez besoin de vérifier certaines de l'état lors de l'appel qui a été achevé (ce qui est généralement le cas), alors le test de cadre de rapport sur le test terminé alors qu'il est encore async des travaux en cours.

Avec l'aide d' async(...) vous dire le framework de test d'attendre la promesse ou de l'observable est terminé avant de traiter le test terminé.

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

Le code est passé de then(...) sera exécuté après le test de la fonction elle-même terminée. Avec async() vous rendre le framework de test conscient qu'il faut attendre que les promesses et les phénomènes observables à remplir avant de traiter le test terminé.

Voir aussi

• https://angular.io/docs/ts/latest/guide/testing.html#!#async