Angular 2 Testing - Async function call - when to use
angular, angular-test, angular2-testing, karma-jasmine, unit-testing
Solution
`async` will not allow the next test to start until the `async` finishes all its tasks. What `async` does is wrap the callback in a Zone, where all asynchronous tasks (e.g. `setTimeout`) are tracked. Once all the asynchronous tasks are complete, then the `async` completes.
If you have ever worked with Jasmine outside out Angular, you may have seen `done` being passed to the callback
it('..', function(done) {
someAsyncAction().then(() => {
expect(something).toBe(something);
done();
});
});
Here, this is native Jasmine, where we tell Jasmine that this test should delay completion until we call `done()`. If we didn't call `done()` and instead did this:
it('..', function() {
someAsyncAction().then(() => {
expect(something).toBe(something);
});
});
The test would complete even before the expectation, because the promise resolves after the test is finished executing the synchronous tasks.
With Angular (in a Jasmine environment), Angular will actually call `done` behind the scenes when we use `async`. It will keep track of all the asynchronous tasks in the Zone, and when they are all finished, `done` will be called behind the scenes.
In your particular case with the `TestBed` configuration, you would use this generally when you want to `compileComponents`. I rarely run into a situation in which I would have to call it otherwise
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [MyModule],
schemas: [NO_ERRORS_SCHEMA],
})
.compileComponent().then(() => {
fixture = TestBed.createComponent(TestComponent);
});
}));
When testing a component that uses `templateUrl` (if you are not using webpack), then Angular needs to make an XHR request to get the template, so the compilation of the component would be asynchronous. So we should wait until it resolves before continuing testing.
Problem
When do you use the async function in the TestBed when testing in Angular 2? When do you use this? ``` beforeEach(() => { TestBed.configureTestingModule({ declarations: [MyModule], schemas: [NO_ERRORS_SCHEMA], }); }); ``` And when do you use this? ``` beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [MyModule], schemas: [NO_ERRORS_SCHEMA], }); })); ``` Can anyone enlighten me on this ?