Service testing with dependency injection in Angular

Introduction

Service testing with dependency injection helps you check if your service works well by giving it the things it needs automatically.

When you want to test a service that uses other services or data sources.

When you want to replace real services with fake ones to test safely.

When you want to make sure your service methods return correct results.

When you want to test how your service handles errors from dependencies.

Syntax

Angular

import { TestBed } from '@angular/core/testing';
import { MyService } from './my-service';
import { DepService } from './dep-service';

const fakeDepService = { getData: () => ['test'] };

let service: MyService;

beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [
      MyService,
      { provide: DepService, useValue: fakeDepService }
    ]
  });
  service = TestBed.inject(MyService);
});

Use TestBed.configureTestingModule to set up the testing environment.

Use TestBed.inject to get the service instance with dependencies injected.

Examples

Basic setup to test a service without dependencies.

Angular

beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [MyService]
  });
  service = TestBed.inject(MyService);
});

Setup with a fake dependency to isolate the service during testing.

Angular

const fakeDepService = { getData: () => ['test'] };

beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [
      MyService,
      { provide: DepService, useValue: fakeDepService }
    ]
  });
  service = TestBed.inject(MyService);
});

Sample Program

This test replaces the real DepService with a fake one that returns controlled data. It checks if MyService uses the injected dependency correctly.

Angular

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

class DepService {
  getData() {
    return ['real data'];
  }
}

class MyService {
  constructor(private dep: DepService) {}

  fetchData() {
    return this.dep.getData();
  }
}

describe('MyService with DI', () => {
  let service: MyService;
  const fakeDepService = { getData: () => ['fake data'] };

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        MyService,
        { provide: DepService, useValue: fakeDepService }
      ]
    });
    service = TestBed.inject(MyService);
  });

  it('should return fake data from dependency', () => {
    const result = service.fetchData();
    expect(result).toEqual(['fake data']);
  });
});

Important Notes

Always provide fake or mock dependencies to isolate the service under test.

Use useValue or useClass to replace dependencies in tests.

TestBed helps create a mini Angular environment for testing services with dependencies.

Summary

Dependency injection lets you give services what they need automatically in tests.

Use TestBed to set up and inject services and their dependencies.

Replace real dependencies with fakes to test services safely and clearly.