Testing routing and navigation in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when navigating to a non-existent route?

Given an Angular app with a routing module that defines routes for /home and /about, what will be the rendered output if the user navigates to /contact?

Angular

const routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', component: NotFoundComponent }
];

A The <code>NotFoundComponent</code> is rendered showing a 404 message.

B The app crashes with a routing error.

C The <code>HomeComponent</code> is rendered by default.

D Nothing is rendered and the page stays blank.

💡 Hint

Look at the wildcard route ** in the routes array.

The wildcard route ** catches any undefined paths and renders the NotFoundComponent. This prevents errors and shows a friendly 404 page.

❓ state_output

intermediate

What is the value of router.url after navigation?

In an Angular component, after calling router.navigate(['/profile', 42]), what will router.url contain?

Angular

constructor(private router: Router) {}

async navigateToProfile() {
  await this.router.navigate(['/profile', 42]);
  console.log(this.router.url);
}

A '/profile/undefined'

B '/profile/42'

C '/profile'

D '/profile?id=42'

💡 Hint

Check how path parameters are passed in the navigate method.

The array ['/profile', 42] creates a URL with the segment 'profile' followed by '42', resulting in '/profile/42'.

🔧 Debug

advanced

Why does this test fail when checking navigation?

Consider this Angular test snippet:

it('should navigate to dashboard', () => {
  const router = TestBed.inject(Router);
  const spy = spyOn(router, 'navigate');
  component.goToDashboard();
  expect(spy).toHaveBeenCalledWith(['/dashboard']);
});

The test fails because spyOn is never called. Why?

Angular

goToDashboard() {
  this.router.navigateByUrl('/dashboard');
}

A The router is not injected properly in the test.

B The spy is set after the method call, so it misses the call.

C The test should use <code>fakeAsync</code> to detect navigation calls.

D The component calls <code>navigateByUrl</code> but the spy watches <code>navigate</code>, so the spy is not triggered.

💡 Hint

Check which router method is called in the component versus which is spied on.

The component calls navigateByUrl, but the spy watches navigate. Since these are different methods, the spy does not detect the call.

📝 Syntax

advanced

Which option correctly mocks ActivatedRoute with query params in a test?

You want to test a component that reads query parameters from ActivatedRoute. Which mock setup is correct?

A { provide: ActivatedRoute, useValue: { queryParams: { search: 'test' } } }

B { provide: ActivatedRoute, useValue: { queryParams: new BehaviorSubject({ search: 'test' }) } }

C { provide: ActivatedRoute, useValue: { queryParams: of({ search: 'test' }) } }

D { provide: ActivatedRoute, useValue: { queryParams: () => ({ search: 'test' }) } }

💡 Hint

Remember that queryParams is an Observable in Angular.

queryParams is an Observable, so it must be mocked with an Observable like of(). Option C correctly uses of({ search: 'test' }).

🧠 Conceptual

expert

What is the main benefit of using RouterTestingModule in Angular tests?

Why should you use RouterTestingModule instead of RouterModule in Angular unit tests that involve routing?

A RouterTestingModule provides a simplified router setup that avoids real navigation and allows mocking routes easily.

B RouterTestingModule automatically runs all routes in a real browser environment during tests.

C RouterTestingModule disables routing completely to speed up tests.

D RouterTestingModule replaces the router with a synchronous version that blocks until navigation completes.

💡 Hint

Think about how tests should avoid side effects like real navigation.

RouterTestingModule provides a mock router environment that prevents actual navigation and lets you control routing behavior in tests.