Testing routing and navigation in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the RouterTestingModule for routing tests.

Angular

import { TestBed } from '@angular/core/testing';
import { [1] } from '@angular/router/testing';

Drag options to blanks, or click blank then click option'

ARoutes

BRouterModule

CRouterLink

DRouterTestingModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing RouterModule instead of RouterTestingModule

Using RouterLink which is a directive, not a module

RouterTestingModule is the Angular module used to test routing without real navigation.

2fill in blank

medium

Complete the code to create a spy for the Router's navigate method.

Angular

const router = TestBed.inject(Router);
spyOn(router, '[1]');

Drag options to blanks, or click blank then click option'

Anavigate

Broute

Cgo

DnavigateByUrl

Attempts:

3 left

💡 Hint

Common Mistakes

Using navigateByUrl instead of navigate

Using go or route which are not Router methods

The navigate method is used to programmatically change routes and is commonly spied on in tests.

3fill in blank

hard

Fix the error in the test setup by completing the providers array to mock ActivatedRoute.

Angular

TestBed.configureTestingModule({
  imports: [RouterTestingModule],
  providers: [{ provide: ActivatedRoute, useValue: [1] }]
});

Drag options to blanks, or click blank then click option'

A{ url: '/home' }

B{ snapshot: { params: { id: '123' } } }

C{ params: of({ id: '123' }) }

D{ queryParams: { page: 1 } }

Attempts:

3 left

💡 Hint

Common Mistakes

Providing snapshot instead of params observable

Using plain objects instead of observables for params

ActivatedRoute params is an observable, so useValue should provide an object with params as an observable using of().

4fill in blank

hard

Fill both blanks to test navigation to '/dashboard' after a button click.

Angular

it('should navigate to dashboard on click', () => {
  const router = TestBed.inject(Router);
  spyOn(router, '[1]');
  component.onButtonClick();
  expect(router.[2]).toHaveBeenCalledWith(['/dashboard']);
});

Drag options to blanks, or click blank then click option'

Anavigate

BnavigateByUrl

CnavigateTo

Dgo

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing navigate and navigateByUrl

Using non-existent methods like navigateTo or go

The navigate method is used to change routes and should be spied on and checked for calls.

5fill in blank

hard

Fill all three blanks to test route parameter extraction in a component.

Angular

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [RouterTestingModule],
    providers: [{ provide: ActivatedRoute, useValue: { [1]: of({ id: '42' }) } }]
  });
  fixture = TestBed.createComponent(MyComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
});

it('should get id param', () => {
  expect(component.[2]).toBe('[3]');
});

Drag options to blanks, or click blank then click option'

Aparams

BrouteParam

Cid

DparamId

E42

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong property names for params or component property

Confusing param keys with property names

ActivatedRoute provides params as an observable; component property holding the param value is routeParam; the value of the 'id' param is '42'.