Why DI makes testing easier in Angular - See It in Action

Why DI makes testing easier

📖 Scenario: You are building a simple Angular service that fetches user data. You want to understand how Dependency Injection (DI) helps make testing this service easier.

🎯 Goal: Create an Angular service that uses DI to get a data source. Then write a test-friendly version by injecting a mock data source.

📋 What You'll Learn

Create a service class called UserService that depends on a data source service called UserDataSource.

Create a configuration variable called mockData with sample user data.

Use DI to inject UserDataSource into UserService and write a method getUsers() that returns user data.

Add a mock UserDataSource class that returns mockData to simulate testing.

💡 Why This Matters

🌍 Real World

In real Angular apps, DI helps swap real services with mocks during testing, making tests reliable and fast.

💼 Career

Understanding DI and testing is essential for Angular developers to write maintainable and testable applications.

1

Create the UserDataSource service

Create an Angular service class called UserDataSource with a method fetchUsers() that returns an array of user names: ["Alice", "Bob", "Charlie"].

Angular

// Create UserDataSource service with fetchUsers method
// Your code here

Need a hint?

Define a class with a method that returns the exact array of user names.

2

Create mock data for testing

Create a constant variable called mockData and assign it the array ["TestUser1", "TestUser2"] to simulate test data.

Angular

export class UserDataSource {
  fetchUsers() {
    return ["Alice", "Bob", "Charlie"];
  }
}

// Create mockData array with test user names
// Your code here

Need a hint?

Use const to create the mockData array with the exact test user names.

3

Create UserService with DI for UserDataSource

Create an Angular service class called UserService that uses Dependency Injection to receive an instance of UserDataSource in its constructor. Add a method getUsers() that returns the result of fetchUsers() from the injected UserDataSource.

Angular

export class UserDataSource {
  fetchUsers() {
    return ["Alice", "Bob", "Charlie"];
  }
}

const mockData = ["TestUser1", "TestUser2"];

// Create UserService class with constructor injection of UserDataSource
// Add getUsers() method that calls fetchUsers() on injected UserDataSource
// Your code here

Need a hint?

Use constructor parameter with private to inject UserDataSource. Then call its fetchUsers() inside getUsers().

4

Create a mock UserDataSource for testing

Create a mock class called MockUserDataSource with a method fetchUsers() that returns the mockData array. This simulates injecting a test data source into UserService.

Angular

export class UserDataSource {
  fetchUsers() {
    return ["Alice", "Bob", "Charlie"];
  }
}

const mockData = ["TestUser1", "TestUser2"];

export class UserService {
  constructor(private userDataSource: UserDataSource) {}

  getUsers() {
    return this.userDataSource.fetchUsers();
  }
}

// Create MockUserDataSource class with fetchUsers() returning mockData
// Your code here

Need a hint?

Create a class with a fetchUsers() method that returns the mockData array exactly.