Angular’s built-in routing framework is robust, but figuring out how to eloquently test routing events in your app can be tricky. In this post, we will go over a clean and easy way to test routing events using tools already provided by the Angular library, with no third-party libraries required.
Let’s say we have the following service that does some simple routing based on the status code of an
To test our routing events, we’ll use an Angular module designed explicitly for this purpose. To use this module, we must give it an array of
Routes similar to what you might see in the
AppRoutingModule. We’ll also create a small standalone component to satisfy the
Route type requirements.
Now that we have a simple standalone component, we can set up our
Route array and our
Under the hood, the
RouterTestingModule creates a spy implementation of
Location. This spy will allow us to see where we are currently routed.
Now that we have configured our
RouterTestingModule, we can write a test. Routing events are asynchronous, but Angular has a few more tools to help make testing this easy:
fakeAsync wraps and runs a function in what Angular calls a “fake async zone.” In a fake async zone, we can step through time synchronously with the
tick method. Let’s see how a simple test might look:
Notice that after we make a call to the function under test,
handleError, we call the
tick() method, which will step us through time so that the asynchronous action of the routing should now be “complete.” Next, we use
TestBed.inject(Location) to get the instance of
Location from the dependency injection system. We can now assert that
location.path() is our intended routing destination.
Full Spec File
Testing Routing Events in Angular
Testing routing events in Angular takes a little additional setup. However, it will improve your codebase‘s test coverage and ensure your application operates as intended.