So far, we have tested routing by placing a spy on the navigation method and in the case with routing parameters, we had to build a mock for an Observable. There is another approach, though, and that is to let the routing happen and afterwards investigate where we ended up. Let's say we have the following scenario: we are at a list component and want to navigate to a detail component. After navigation has taken place, we want to investigate what state we are in. Let us first define our list component:

import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'list-component',
  template : ``
})
export class ListComponent {
  constructor(private router: Router) {}
   
  goToDetail() {
    this.router.navigateByUrl('detail/1');
  }
}

As you can see, we have a goToDetail() method that, if invoked, will navigate you to a new route. For this to work, however, we need to have had routing set up properly in the module file, like so:

const appRoutes: Routes = [
  { path: 'detail/:id', component: DetailComponent }
];

@NgModule({
  ...
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes),
    TestModule
  ],
  ...
  })
export class AppModule { }

The important part here is the definition of appRoutes and calling RouterModule.forRoot() in the imports array.

The time has come to define the test for this. We need to interact with a module called RouterTestingModule and we need to provide that module with the routes it should contain. RouterTestingModule is a very qualified stub version of the routing, so in that sense, there isn't much difference in principle from creating your own stub. Look at it this way though, you can create your own stub, but as you use more and more advanced functionality, using an advanced stub quickly pays off.

We will start off by instructing our RouterTestingModule that it should load the DetailComponent when the detail/:id route is being hit. This doesn't really differ from how we would set up the routing from our root module. The benefit is that we only need to set up the routes we need for our test, rather than every single route in the app:

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [ 
      RouterTestingModule.withRoutes([{ 
        path: 'detail/:id', 
        component: DetailComponent
      }]) 
    ],
    declarations: [ListComponent, DetailComponent]
  });
});

After we have done the setup, we need to grab a copy of the component in our test so that we can invoke the method that navigates us away from the list component. Your test should look like the following:

it('should navigate to /detail/1 when invoking gotoDetail()', async() => {

  let fixture = TestBed.createComponent(ListComponent);
  let router = TestBed.get(Router);
  let component = fixture.debugElement.componentInstance;

  fixture.whenStable().then(() => {
    expect(router.url).toBe('/detail/1');
  });
  component.goToDetail();
}) 

The important part here is the invocation of the method that makes us navigate:

component.goToDetail();

And the assertion where we verify that our router has indeed changed state:

expect(router.url).toBe('/detail/1');