Service testing with dependency injection in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Angular service test?

Given this Angular service and its test, what will the test output?

Angular

import { TestBed } from '@angular/core/testing';
import { DataService } from './data.service';

class MockDataService {
  getData() {
    return 'mock data';
  }
}

describe('DataService with DI', () => {
  let service: DataService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [{ provide: DataService, useClass: MockDataService }]
    });
    service = TestBed.inject(DataService);
  });

  it('should return mock data', () => {
    expect(service.getData()).toBe('mock data');
  });
});

A The test passes but returns undefined because getData is not mocked.

B The test fails because the real DataService is used instead of the mock.

C The test passes because the mock service returns 'mock data'.

D The test throws an error because DataService is not provided.

💡 Hint

Think about how dependency injection replaces the real service with the mock.

The TestBed configuration replaces the real DataService with MockDataService. So when injected, the service is the mock, and getData returns 'mock data'.

🔧 Debug

intermediate

Why does this Angular test fail with 'No provider for HttpClient' error?

Consider this test setup for a service that uses HttpClient. Why does it fail?

Angular

import { TestBed } from '@angular/core/testing';
import { HttpClientModule } from '@angular/common/http';
import { ApiService } from './api.service';

describe('ApiService', () => {
  let service: ApiService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientModule],
      providers: [ApiService]
    });
    service = TestBed.inject(ApiService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });
});

A HttpClientModule is not imported in the test module, so HttpClient provider is missing.

B ApiService is not provided in the test module, causing the error.

C HttpClient is mocked incorrectly causing the error.

D TestBed.inject is used incorrectly; it should be TestBed.get.

💡 Hint

HttpClient needs a module to provide it in Angular tests.

HttpClient is provided by HttpClientModule. Without importing it in TestBed.configureTestingModule imports, the provider is missing, causing the error.

📝 Syntax

advanced

Which option correctly injects a mocked service in Angular test?

Choose the correct way to inject a mocked LoggerService in an Angular test.

Angular

class MockLoggerService {
  log(message: string) { return 'mock log: ' + message; }
}

beforeEach(() => {
  TestBed.configureTestingModule({
    // What goes here?
  });
  const logger = TestBed.inject(LoggerService);
});

A providers: [{ provide: LoggerService, useClass: MockLoggerService }]

B providers: [LoggerService, MockLoggerService]

C providers: [{ provide: MockLoggerService, useClass: LoggerService }]

D providers: [{ useClass: MockLoggerService }]

💡 Hint

Remember to provide the original service token and specify the mock class.

To replace LoggerService with a mock, provide LoggerService token with useClass set to MockLoggerService.

❓ state_output

advanced

What is the value of 'result' after this Angular service test runs?

Given this test with dependency injection, what is the value of result after service.getValue() is called?

Angular

class RealService {
  getValue() { return 42; }
}

class FakeService {
  getValue() { return 100; }
}

let result: number;

beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [{ provide: RealService, useClass: FakeService }]
  });
  const service = TestBed.inject(RealService);
  result = service.getValue();
});

A undefined

B 42

C Throws an error because RealService is not provided

D 100

💡 Hint

Check which class is actually injected for RealService.

The provider replaces RealService with FakeService, so getValue returns 100.

🧠 Conceptual

expert

Which statement best describes Angular's dependency injection in service testing?

Choose the most accurate description of how Angular's dependency injection works in service testing.

A Angular always uses the real service implementation regardless of test configuration.

B Angular replaces the requested service with the provided mock or alternative class during test injection.

C Angular requires manual instantiation of services in tests without using TestBed.

D Angular's dependency injection only works for components, not services.

💡 Hint

Think about how TestBed providers affect injected services.

Angular's DI system allows replacing services with mocks or alternatives by configuring providers in TestBed during tests.