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

Need a 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

Need a 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

Need a 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

Need a hint?

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