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'.

Practice

1. What is the main purpose of using RouterTestingModule in Angular tests?

easy

A. To style the router links in the application

B. To disable routing completely in tests

C. To create real HTTP requests during navigation

D. To simulate routing behavior without starting the full app

Solution

1. Step 1: Understand the role of RouterTestingModule

   RouterTestingModule is designed to simulate routing in tests without launching the full Angular app.

2. Step 2: Compare options with this purpose

   Styling the router links is incorrect. Creating real HTTP requests during navigation is wrong. Disabling routing completely is incorrect. Simulating routing behavior without starting the full app correctly describes this testing utility.

3. Final Answer:

   To simulate routing behavior without starting the full app -> Option D

4. Quick Check:

   RouterTestingModule simulates routing [OK]

Hint: RouterTestingModule simulates routes in tests, not real navigation [OK]

Common Mistakes:

• Thinking RouterTestingModule styles links
• Assuming it sends real HTTP requests
• Believing it disables routing

2. Which of the following is the correct way to import RouterTestingModule in an Angular test file?

easy

A. import { RouterTestingModule } from '@angular/router/testing';

B. import { RouterTestingModule } from '@angular/core/testing';

C. import { RouterTestingModule } from '@angular/router';

D. import { RouterTestingModule } from '@angular/testing/router';

Solution

1. Step 1: Recall the correct import path

   The RouterTestingModule is provided by the '@angular/router/testing' package.

2. Step 2: Verify each option's path

   Only import { RouterTestingModule } from '@angular/router/testing'; uses the correct path '@angular/router/testing'. Others are incorrect or do not exist.

3. Final Answer:

   import { RouterTestingModule } from '@angular/router/testing'; -> Option A

4. Quick Check:

   Correct import path is '@angular/router/testing' [OK]

Hint: RouterTestingModule always imports from '@angular/router/testing' [OK]

Common Mistakes:

• Importing from '@angular/core/testing'
• Importing from '@angular/router'
• Using a non-existent path

3. Given this test snippet, what will location.path() return after navigation?

const fixture = TestBed.createComponent(AppComponent);
const router = TestBed.inject(Router);
const location = TestBed.inject(Location);
router.navigate(['/dashboard']);
fixture.detectChanges();
await fixture.whenStable();
console.log(location.path());

medium

A. "/"

B. "/dashboard"

C. "/home"

D. "undefined"

Solution

1. Step 1: Understand navigation and location.path()

   Calling router.navigate(['/dashboard']) changes the URL path to '/dashboard'. The Location service reflects this path.

2. Step 2: Confirm location.path() after navigation

   After navigation and stabilization, location.path() returns the current URL path, which is '/dashboard'.

3. Final Answer:

   "/dashboard" -> Option B

4. Quick Check:

   location.path() shows current URL path [OK]

Hint: location.path() returns the current URL after navigation [OK]

Common Mistakes:

• Expecting location.path() to be '/' by default
• Confusing location.path() with component state
• Not awaiting navigation completion

4. Identify the error in this test setup for routing:

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [RouterTestingModule],
    declarations: [AppComponent]
  });
  router = TestBed.inject(Router);
  location = TestBed.inject(Location);
  fixture = TestBed.createComponent(AppComponent);
  router.navigate(['/profile']);
  fixture.detectChanges();
});

medium

A. router.navigate() must be called after fixture.detectChanges()

B. RouterTestingModule should not be imported in tests

C. Missing call to compileComponents() before creating the component

D. Location service cannot be injected in tests

Solution

1. Step 1: Check Angular test setup best practices

   When using TestBed with components, compileComponents() must be called to compile templates before creating components.

2. Step 2: Analyze the given code

   The code configures the module but does not call compileComponents(), which can cause errors when creating the component.

3. Final Answer:

   Missing call to compileComponents() before creating the component -> Option C

4. Quick Check:

   Always call compileComponents() before createComponent() [OK]

Hint: Always call compileComponents() before createComponent() in tests [OK]

Common Mistakes:

• Skipping compileComponents() causes template errors
• Thinking RouterTestingModule is not needed
• Calling navigate() before detectChanges() is allowed

5. You want to test that navigating to /settings loads the SettingsComponent. Which approach correctly tests this behavior?

hard

A. Use RouterTestingModule with routes, navigate to '/settings', then check if the component instance is of type SettingsComponent

B. Manually create SettingsComponent and call its ngOnInit without routing

C. Use RouterTestingModule but do not define routes, then navigate to '/settings'

D. Navigate to '/settings' without RouterTestingModule and check the URL

Solution

1. Step 1: Set up RouterTestingModule with route definitions

   To test navigation, RouterTestingModule must be configured with routes linking '/settings' to SettingsComponent.

2. Step 2: Navigate to '/settings' and verify component

   After navigation, verify the loaded component instance is SettingsComponent to confirm correct routing.

3. Final Answer:

   Use RouterTestingModule with routes, navigate to '/settings', then check if the component instance is of type SettingsComponent -> Option A

4. Quick Check:

   Define routes and check component after navigation [OK]

Hint: Define routes in RouterTestingModule to test navigation and component loading [OK]

Common Mistakes:

• Not defining routes in RouterTestingModule
• Testing component without routing
• Checking URL without verifying component