Lesson Outline

Testing Asynchronous Code

We're getting into some more complicated situations now, so before we continue with developing the application we are going to spend the next couple of lessons covering a couple more testing concepts.

Up until this point our tests have been reasonably simple, we have just been dealing with calling functions and passing data between pages. All the code we have been testing has been synchronous, which means everything has been getting executed one line after the other and we can just trigger whatever function we are interested in, and then test that something happened.

It gets a little more complicated when we start testing asynchronous code. Unlike synchronous code that gets executed right away, asynchronous code will get executed at some time after all the rest of our synchronous code has run. If we wanted to write a test that relied on the result of an asynchronous function like the following test:

it('someThing should be true after someAsynchronousFunction runs', () => {
  component.someAsynchronousFunction();

  expect(component.someThing).toBe(true);
});

Assuming that someAsynchronousFunction sets someThing to true after some asynchronous operation like resolving a promise, we are going to have issues when running this test.

The flow of our test would look something like this:

1. Call someAsynchronousFunction
2. Check that someThing is true
3. Waiting for promise to resolve...
4. someThing is set to true

Clearly, this is not what we want. We need someThing to be set to true before we check it with our expect statement. What we really want is this:

1. Call someAsynchronousFunction
2. Waiting for promise to resolve...
3. someThing is set to true
4. Check that someThing is true

In order to deal with this situation, we can run the test inside of fakeAsync which essentially gives us the ability to control time in our tests.

fakeAsync, flushMicrotasks, and tick