Service testing with dependency injection in Angular - Mini Project: Build & Apply

Service testing with dependency injection

📖 Scenario: You are building a simple Angular service that provides user data. You want to write a test that uses Angular's dependency injection to get the service instance and verify its behavior.

🎯 Goal: Create an Angular service called UserService with a method getUserName() that returns a fixed string. Then write a test that injects this service and checks the returned user name.

📋 What You'll Learn

Create a service class named UserService with a method getUserName() returning the string 'Alice'.

Set up a test bed configuration that provides UserService for dependency injection.

Write a test that injects UserService using Angular's TestBed.inject() method.

Assert that calling getUserName() on the injected service returns 'Alice'.

💡 Why This Matters

🌍 Real World

Testing Angular services with dependency injection ensures your app's logic works correctly and helps catch bugs early.

💼 Career

Understanding service testing and dependency injection is essential for Angular developers to write maintainable and reliable code.

1

Create the UserService with getUserName method

Create an Angular service class called UserService with a method getUserName() that returns the string 'Alice'.

Angular

export class UserService {
  // Your code here
}

Need a hint?

Define a class named UserService with a method getUserName() that returns the exact string 'Alice'.

2

Configure TestBed to provide UserService

Set up Angular's TestBed configuration to provide the UserService for dependency injection in tests.

Angular

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

TestBed.configureTestingModule({
  // Your code here
});

Need a hint?

Use TestBed.configureTestingModule with a providers array that includes UserService.

3

Inject UserService in the test

Write a test that injects UserService using TestBed.inject(UserService) and stores it in a variable called service.

Angular

const service = TestBed.inject(UserService);
// Your code here

Need a hint?

Use TestBed.inject(UserService) and assign it to a constant named service.

4

Assert getUserName returns 'Alice'

Add an assertion that calling service.getUserName() returns the string 'Alice'.

Angular

// Your code here

Need a hint?

Use expect(service.getUserName()).toBe('Alice') to check the returned value.