Angular 2 Testing-Llamada a la función asincrónica-cuándo usar

Question

Angular 2 Testing-Llamada a la función asincrónica-cuándo usar

¿Cuándo se utiliza la función asincrónica en el banco de pruebas cuando se prueba en Angular 2?

¿Cuándo usas esto?

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

¿Y cuándo usas esto?

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

¿Alguien puede iluminarme sobre esto?

37

angular unit-testing karma-jasmine angular2-testing

Author: Paul Samsotha, 2016-10-19

Source

2 answers

Cuando realiza una llamada asincrónica en su prueba, la función de prueba real se completa antes de que se complete la llamada asincrónica. Cuando necesita verificar algún estado cuando se completó la llamada (que suele ser el caso), entonces el marco de prueba reportaría la prueba como completada mientras todavía hay trabajo asincrónico en curso.

Con el uso de async(...) le dice al marco de prueba que espere hasta que se complete la promesa de retorno u observable antes de tratar la prueba como completada.

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

El código passed to then(...) will be executed after the test function itself completed. Con async() usted hace que el marco de prueba sea consciente de que necesita esperar a que las promesas y los observables se completen antes de tratar la prueba como completada.

Véase también

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

12

Author: Günter Zöchbauer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-19 09:11:14

score 46 · Accepted Answer

async permitirá que la siguiente prueba no comience hasta que el async termine todas sus tareas. Lo que hace async es envolver la devolución de llamada en una Zona, donde se rastrean todas las tareas asíncronas (por ejemplo, setTimeout). Una vez completadas todas las tareas asíncronas, se completa async.

Si alguna vez has trabajado con Jasmine outside out Angular, es posible que hayas visto done pasando a la devolución de llamada

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

Aquí, este es el Jazmín nativo, donde le decimos a Jasmine que esta prueba debe retrasarse finalización hasta que llamemos done(). Si no hiciéramos esto

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

La prueba se completaría incluso antes de la expectativa, porque la promesa resuelve después de que la prueba termine de ejecutar las tareas síncronas.

Con Angular (en un entorno Jasmine), Angular realmente llamará a done detrás de escena, cuando usemos async. Hará un seguimiento de todas las tareas asíncronas en la Zona, y cuando todas hayan terminado, done se llamará detrás del escena.

En su caso particular con la configuración TestBed, generalmente usaría esto cuando desee compileComponents. Rara vez me encuentro en una situación en la que tendría que llamarlo de otra manera

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

Al probar un componente que usa templateUrl (si no está usando webpack), Angular necesita hacer una solicitud XHR para obtener la plantilla, por lo que la compilación del componente sería asincrónica. Así que debemos esperar hasta que se resuelva para continuar las pruebas.