Mocking services in tests in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will the component display when the mocked service returns a specific value?

Given an Angular component that uses a mocked service returning of('Hello Mock'), what will the component render?

Angular

import { Component } from '@angular/core';
import { of } from 'rxjs';

class MockService {
  getData() {
    return of('Hello Mock');
  }
}

@Component({
  selector: 'app-test',
  template: `<p>{{ message }}</p>`
})
export class TestComponent {
  message = '';
  constructor(private service: MockService) {
    this.service.getData().subscribe(data => this.message = data);
  }
}

A <p>Error</p>

B <p>undefined</p>

C <p></p>

D <p>Hello Mock</p>

💡 Hint

Think about what the mocked service returns and how the component subscribes to it.

The mocked service returns an observable emitting 'Hello Mock'. The component subscribes and sets message to this value, so the template displays it.

📝 Syntax

intermediate

Which option correctly mocks a service method returning a Promise in Angular test?

In an Angular test, you want to mock a service method fetchData() that returns a Promise resolving to 42. Which mock implementation is correct?

A fetchData: () => Promise.resolve(42)

B fetchData: () => new Promise(42)

C fetchData: () => Promise(42)

D fetchData: () => Promise.reject(42)

💡 Hint

Remember how to create a resolved Promise with a value.

Only Promise.resolve(42) creates a Promise that resolves to 42. The others are either syntax errors or create rejected Promises.

🔧 Debug

advanced

Why does the test fail when the mocked service method is not called?

In an Angular test, the mocked service method getData() is expected to be called once, but the test fails saying it was never called. What is the most likely cause?

A The mocked service method is called twice instead of once.

B The component does not inject the mocked service but the real one.

C The test does not subscribe to the observable returned by the mocked method.

D The mocked service method returns the wrong data type.

💡 Hint

Check which service instance the component uses during the test.

If the component uses the real service instead of the mocked one, the mocked method is never called, causing the test to fail.

❓ lifecycle

advanced

When is the mocked service method called in the component lifecycle?

In an Angular component, a mocked service method is called inside ngOnInit(). When will this method be invoked during testing?

A Immediately after component creation and before change detection.

B Only after the first change detection cycle completes.

C After the component is destroyed.

D Only when a user triggers an event.

💡 Hint

Recall when ngOnInit() runs in Angular.

ngOnInit() runs right after the component is created but before Angular runs change detection, so the mocked service method is called immediately after creation.

🧠 Conceptual

expert

What is the main benefit of using a mocked service in Angular tests?

Why do Angular developers use mocked services instead of real services in unit tests?

A To improve the performance of the real service during tests.

B To automatically generate UI snapshots for the component.

C To isolate the component and test it without dependencies affecting the result.

D To ensure the real backend API is always called during tests.

💡 Hint

Think about what unit tests aim to achieve regarding dependencies.

Mocked services isolate the component from real dependencies, allowing focused and reliable tests without side effects or network calls.