Testing routing and navigation in Angular - Step-by-Step Execution

Concept Flow - Testing routing and navigation

Setup TestBed with RouterTestingModule

↓

Create component instance

↓

Trigger navigation action

↓

Router processes navigation

↓

Check current route and component

↓

Assert expected route and UI changes

↓

Test Pass/Fail

This flow shows how Angular tests routing by setting up a test environment, triggering navigation, and checking the results.

Execution Sample

Angular

import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { Router } from '@angular/router';

// Setup TestBed with RouterTestingModule
// Trigger navigation and check current route

This code sets up Angular's test environment for routing, triggers navigation, and verifies the current route.

Execution Table

Step	Action	Router State Before	Navigation Triggered	Router State After	Assertion
1	Setup TestBed with RouterTestingModule	No router state	No	Router initialized	Router ready for navigation
2	Create component instance	Router initialized	No	Component created	Component ready
3	Trigger navigation to '/home'	At '/'	Yes	Navigating to '/home'	Navigation started
4	Router processes navigation	Navigating to '/home'	No	At '/home'	Route updated
5	Check current route	At '/home'	No	At '/home'	Route is '/home' as expected
6	Assert UI changes	At '/home'	No	UI updated for '/home'	UI matches route
7	Test completes	At '/home'	No	Test finished	Test passes

💡 Test ends after asserting the route and UI match expected '/home' path

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	Final
routerState	undefined	initialized	initialized	navigating to '/home'	at '/home'	at '/home'	at '/home'
componentInstance	undefined	undefined	created	created	created	created	created
navigationTriggered	false	false	false	true	false	false	false
uiState	initial	initial	initial	initial	updated for '/home'	updated for '/home'	updated for '/home'

Key Moments - 3 Insights

Why do we use RouterTestingModule instead of the real RouterModule?

RouterTestingModule provides a simplified router setup for tests without starting a real browser navigation, as shown in Step 1 of the execution_table.

What happens if we trigger navigation but don't wait for it to complete before asserting?

Assertions may fail because the router state hasn't updated yet. Step 4 shows the router processing navigation before assertions in Step 5.

How do we verify the UI matches the current route?

After navigation completes (Step 5), we check the UI updates accordingly (Step 6), ensuring the component reflects the route.

Visual Quiz - 3 Questions

Look at the execution_table, what is the routerState after Step 3?

A Navigating to '/home'

B At '/'

C At '/home'

D Router uninitialized

💡 Hint

Check the 'Router State After' column for Step 3 in the execution_table.

At which step does the test confirm the UI matches the route?

A Step 4

B Step 5

C Step 6

D Step 7

💡 Hint

Look for the step mentioning UI updates in the execution_table.

If navigation is not triggered at Step 3, what would be the routerState at Step 4?

A Navigating to '/home'

B At '/'

C At '/home'

D Router uninitialized

💡 Hint

Refer to the routerState changes in variable_tracker and execution_table rows 3 and 4.

Concept Snapshot

Testing routing in Angular:
- Use RouterTestingModule in TestBed
- Create component instance
- Trigger navigation with router.navigate()
- Wait for navigation to complete
- Assert current route and UI updates
- Ensures navigation works without real browser
- Helps catch routing bugs early

Full Transcript

This visual execution trace shows how Angular tests routing and navigation. First, the test environment is set up using RouterTestingModule to simulate routing without a real browser. Then, a component instance is created. Next, navigation is triggered to a specific route, such as '/home'. The router processes this navigation, updating its internal state. After navigation completes, the test checks the current route and verifies that the UI updates accordingly. Finally, assertions confirm the route and UI are as expected, and the test passes. This step-by-step flow helps beginners understand how routing tests work in Angular.

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