Mocking services in tests in Angular - Mini Project: Build & Apply

Mocking services in tests

📖 Scenario: You are building a simple Angular component that shows a user's name fetched from a service. To test this component without calling the real service, you will create a mock service in your tests.

🎯 Goal: Build a test setup that mocks a user service to provide a fake user name, then verify the component uses this mocked data correctly.

📋 What You'll Learn

Create a mock user service with a method returning a fixed user name

Configure the Angular test module to use the mock service instead of the real one

Write a test that checks the component displays the mocked user name

Use Angular TestBed and Jasmine testing framework

💡 Why This Matters

🌍 Real World

Mocking services in tests helps developers isolate components and test them without relying on real backend calls. This makes tests faster and more reliable.

💼 Career

Understanding how to mock services is essential for Angular developers to write effective unit tests and maintain high-quality codebases.

1

Create the mock user service

Create a class called MockUserService with a method getUserName() that returns the string 'Test User'.

Angular

# Your code here

Hint

Think of the mock service as a simple class that returns fixed data instead of calling a real backend.

2

Configure TestBed to use the mock service

In the test setup, use TestBed.configureTestingModule to provide MockUserService instead of the real UserService by adding { provide: UserService, useClass: MockUserService } to the providers array.

Angular

class MockUserService {
  getUserName() {
    return 'Test User';
  }
}

import { TestBed } from '@angular/core/testing';
import { UserService } from './user.service';
import { UserComponent } from './user.component';

// Configure TestBed with mock service
// Your code here

Hint

Use Angular's dependency injection system to replace the real service with your mock in tests.

3

Create the component instance and detect changes

Create a fixture for UserComponent using TestBed.createComponent(UserComponent), then get the component instance from fixture.componentInstance. Call fixture.detectChanges() to apply data binding.

Angular

class MockUserService {
  getUserName() {
    return 'Test User';
  }
}

import { TestBed } from '@angular/core/testing';
import { UserService } from './user.service';
import { UserComponent } from './user.component';

TestBed.configureTestingModule({
  declarations: [UserComponent],
  providers: [{ provide: UserService, useClass: MockUserService }]
});

// Create component fixture and instance
// Your code here

Hint

Creating the component fixture lets Angular run its lifecycle and update the template with data.

4

Write a test to check the displayed user name

Write a test that gets the native element from fixture.nativeElement and checks that its text content contains the string 'Test User'.

Angular

class MockUserService {
  getUserName() {
    return 'Test User';
  }
}

import { TestBed } from '@angular/core/testing';
import { UserService } from './user.service';
import { UserComponent } from './user.component';

TestBed.configureTestingModule({
  declarations: [UserComponent],
  providers: [{ provide: UserService, useClass: MockUserService }]
});

const fixture = TestBed.createComponent(UserComponent);
const component = fixture.componentInstance;
fixture.detectChanges();

// Check that the component displays 'Test User'
// Your code here

Hint

Access the rendered HTML and check if it contains the mocked user name.

Practice

1. What is the main purpose of mocking services in Angular tests?

easy

A. To automatically generate service code

B. To speed up the Angular application in production

C. To add new features to the service during testing

D. To replace real services with fake ones for isolated testing

Solution

1. Step 1: Understand the role of mocking

   Mocking replaces real dependencies with controlled fake versions to isolate the component under test.

2. Step 2: Identify the testing benefit

   This isolation helps tests run faster and more reliably without depending on real service behavior.

3. Final Answer:

   To replace real services with fake ones for isolated testing -> Option D

4. Quick Check:

   Mocking = Replace real with fake [OK]

Hint: Mocking means replacing real services with fakes in tests [OK]

Common Mistakes:

• Thinking mocking speeds up production app
• Confusing mocking with adding features
• Believing mocking auto-generates code

2. Which syntax correctly provides a mock service using useClass in Angular test setup?

easy

A. providers: [{ provide: RealService, useClass: MockService }]

B. providers: [{ useClass: RealService, provide: MockService }]

C. providers: [{ provide: MockService, useClass: RealService }]

D. providers: [{ useValue: MockService, provide: RealService }]

Solution

1. Step 1: Recall Angular provider syntax

   Angular expects an object with 'provide' as the token and 'useClass' as the mock class.

2. Step 2: Match correct order and keys

   The correct order is 'provide' first, then 'useClass' with the mock class.

3. Final Answer:

   providers: [{ provide: RealService, useClass: MockService }] -> Option A

4. Quick Check:

   Provide token, then useClass mock [OK]

Hint: Remember: provide token first, then useClass mock class [OK]

Common Mistakes:

• Swapping provide and useClass keys
• Using useValue instead of useClass incorrectly
• Providing mock as token instead of real service

3. Given this Angular test setup, what will component.getData() return?

class MockService {
  fetch() { return 'mocked data'; }
}

TestBed.configureTestingModule({
  providers: [{ provide: RealService, useClass: MockService }]
});

const service = TestBed.inject(RealService);
const component = new MyComponent(service);

component.getData = function() { return this.service.fetch(); };

medium

A. undefined

B. 'real data'

C. 'mocked data'

D. Throws runtime error

Solution

1. Step 1: Identify the injected service

   The test replaces RealService with MockService using useClass, so service is an instance of MockService.

2. Step 2: Trace method call in component

   component.getData calls service.fetch(), which returns 'mocked data' from MockService.

3. Final Answer:

   'mocked data' -> Option C

4. Quick Check:

   MockService fetch() returns 'mocked data' [OK]

Hint: Injected service is mock, so method returns mock's value [OK]

Common Mistakes:

• Assuming real service is used
• Expecting undefined instead of mock return
• Thinking method throws error without real service

4. What is wrong with this Angular test provider setup?

providers: [{ provide: RealService, useValue: MockService }]

medium

A. Missing import for RealService

B. useValue expects an instance, not a class reference

C. useValue cannot be used in providers

D. provide should be MockService, not RealService

Solution

1. Step 1: Understand useValue usage

   useValue expects an actual instance or object, not a class reference.

2. Step 2: Identify the mistake

   MockService is a class, but useValue is given the class itself, not an instance like new MockService().

3. Final Answer:

   useValue expects an instance, not a class reference -> Option B

4. Quick Check:

   useValue needs instance, not class [OK]

Hint: useValue needs instance (new), not class name [OK]

Common Mistakes:

• Passing class instead of instance to useValue
• Confusing provide token with mock class
• Assuming useValue can't be used in providers

5. You want to mock a service method that returns different values on consecutive calls in Angular tests. Which approach correctly achieves this?

hard

A. Create a mock class with a method using a call count variable to return different values

B. Use useValue with a plain object having the method returning a fixed value

C. Use useClass with the real service and override the method in the test

D. Inject the real service and spy on the method without mocking

Solution

1. Step 1: Understand requirement for different returns

   Returning different values on consecutive calls requires state tracking inside the mock method.

2. Step 2: Choose correct mocking approach

   A mock class with a call count variable can track calls and return different values accordingly.

3. Step 3: Evaluate other options

   useValue with fixed return can't vary returns; overriding real service method is complex; spying alone doesn't mock service.

4. Final Answer:

   Create a mock class with a method using a call count variable to return different values -> Option A

5. Quick Check:

   Mock class with state tracks calls for varied returns [OK]

Hint: Use mock class with call count to vary method returns [OK]

Common Mistakes:

• Using fixed return object for varying outputs
• Overriding real service instead of mocking
• Relying only on spies without mocks