DEV Community

loading...

How to ActivatedRoute in Angular and how to mock it in Unit Tests

amerigom profile image Amerigo Mancino ・2 min read

The topic of testing is always mistreated online. It's easy to check that on a hundred articles explaining how to develop a certain functionality, only one or two include a description of how to test it. Even in large projects and in big companies, it is not rare to just forget about testing because time is short or because workarounds are possible. This is a terrible behavior: the bigger the project, the easier it becomes to break something while implementing something else and - without unit tests - there is no way to know it for sure.

In this tutorial, I will explain you how to use ActivatedRoute to pass a parameter from a component to another and how to mock it in the corresponding Unit Test.

How to pass a parameter with ActivatedRoute

Let's say we have a Home component where we display a list of users. Our goal is to pass the user id via the web url, retrieve it and use it in a User component to collect - for example - all the user details:

Alt Text

To achieve that, first we need to define the route in app-routing.module.ts as the following:

{
  path: 'user/:id',
  component: UserComponent
},
Enter fullscreen mode Exit fullscreen mode

To pass the id we have two possibilities:

The first one is by editing the HTML in the Home component:

<a [routerLink]="['user', id]">
   <!-- When clicked I redirect to the User component -->
</a>
Enter fullscreen mode Exit fullscreen mode

The alternative is to navigate inside a typescript function; import the Router and declare it in the constructor:

constructor(
  private router: Router
) { }
Enter fullscreen mode Exit fullscreen mode

Then use it in your function:

this.router.navigate(['/user', id]);
Enter fullscreen mode Exit fullscreen mode

In the User component we can at last retrieve the id.
Let's import the ActivatedRoute and declare it in the constructor:

constructor(
  private activatedRoute: ActivatedRoute,
) { }
Enter fullscreen mode Exit fullscreen mode

Afterwards in the ngOnInit() we can get the id:

const id = this.activatedRoute.snapshot.params.id;
Enter fullscreen mode Exit fullscreen mode

Once we have it, we can use it the way we like. For example, we can pass it as a parameter to a service and retrieve the User details as stated above.

Unit test

It is pretty straightforward to mock the ActivatedRoute in the User component test file. All we have to do is to edit the providers list as follows:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ UserComponent ],
      imports: [
        RouterTestingModule,
        HttpClientTestingModule
        // ... whatever other module you have
      ],
      providers:
      [
        {
          provide: ActivatedRoute,
          useValue: {
            snapshot: {params: {id: '24fkzrw3487943uf358lovd'}}
          }
        }
      ]
    })
    .compileComponents();
}));
Enter fullscreen mode Exit fullscreen mode

That's it!

Run npm test in a terminal to execute all your unit tests and check the outcome!

Discussion

pic
Editor guide