Preventing Real Service Calls in Tests: A Clean Approach with Angular

Gabriel Luis Freitas — Fri, 21 Feb 2025 14:34:29 +0000

The Problem

When writing tests for applications that interact with external services, we want to ensure that:

No real external calls are made during testing
We have predictable test data
Tests run quickly without external dependencies
We get clear error messages when something is misconfigured

The Solution

To fix these problems, we can follow this simple pattern:

A utility function to prevent real service calls
A testing provider that mocks the service
Implementation in the actual service

1. The Error Prevention Utility

export const throwErrorIfTesting = (serviceName: string, testingProviderName: string): void => {  
  if (window.location.port === '9876') { // Karma's default test port  
    throw new Error(  
      `${serviceName} is not available in test mode, add ${testingProviderName} to the providers to fix the error`  
    );  
  }  
};

This utility function detects when code is running in a test environment (by checking Karma’s default port) and throws a helpful error message if the real service is accidentally used.

2. The Testing Provider

export const provideApiTesting = () => ({  
  provide: ApiService,  
  useValue: {  
    getElements: jasmine.createSpy('getElements').and.returnValue(Promise.resolve([]))  
  }  
});

This provider:

Creates a mock version of the service
Uses Jasmine spies for the method that calls the API
Returns predictable test data
Can be easily configured in individual tests

3. Implementation in the Service

@Injectable({  
  providedIn: 'root'  
})  
export class ApiService{  
  async getElements<T>(…) {  
    throwErrorIfTesting('ApiService', 'provideApiTesting');  
    // Real service implementation  
  }  
}

The real service implements the error prevention check at the start of each method that would make external calls.

How to Mock responses

In Your Tests, you can easily mock the responses of this provider just by injecting the service and changing the returnValue of the Spy.

describe('YourComponent', () => {  
  let mockApiService: jasmine.SpyObj<ApiService>;  

  beforeEach(() => {  
    TestBed.configureTestingModule({  
      declarations: [YourComponent],  
      providers: [  
        provideApiTesting() // Use the testing provider  
      ]  
    });  
  });  

  beforeEach(() => {  
    fixture = TestBed.createComponent(YourComponent);  
    component = fixture.componentInstance;  
    fixture.detectChanges();  
  });  

  it('should load content', async () => {  
    const apiService= TestBed.inject(ApiService);  

    // Configure the mock response if needed  
    (apiService.getElementsas jasmine.Spy).and.returnValue(  
    Promise.resolve([/* your test data */])  
    );  

    // Run your test…  
  });  
});

Benefits

Fail-Fast Development: Issues are caught immediately with clear error messages
Predictable Testing: No external dependencies or network calls
Clear Separation: Test environment vs production code is clearly separated
Type Safety: Testing providers maintain the same interface as the real service
Easy to Mock: Simple to provide custom test data when needed
Maintainable: Pattern is easy to understand and implement for new services

This pattern ensures that your tests remain reliable, fast, and maintainable while preventing accidental real service calls during testing.

How to Avoid Unnecessary Calls in Your Tests — Angular

Gabriel Luis Freitas — Tue, 26 Nov 2024 08:53:25 +0000

Introduction

Services that interact with external APIs, like Contentful, play a key role in many Angular applications. However, when it comes to writing unit tests, these same services can pose significant challenges.

Common issues with real calls:

Fragility: Tests can fail if there are issues with the network or the external service.
Costs: Making real calls can consume resources from a production account.

Mocking services is a powerful technique for streamlining testing and improving reliability. By simulating the behavior of external dependencies, such as APIs, it becomes easier to focus on the application’s logic without relying on live data or network conditions. This guide demonstrates how to set up a service with mocking, showcasing its implementation and how it can drastically reduce real API calls to a service like Contentful during testing. The result is faster, more efficient test runs and greater control over test scenarios.

How to Set Up an API service

Before diving into mocking, it’s essential to understand how the real service is typically implemented. This service will interact with the Contentful API to fetch entries of different content types.

A Basic ContentfulService Example

import { Injectable } from '@angular/core';
import { createClient, ContentfulClientApi } from 'contentful';
import { Page } from './model';

@Injectable({
  providedIn: 'root',
})
export class ContentfulService {
  private client: ContentfulClientApi;
  constructor() {
    this.client = createClient({
      space: 'YOUR_SPACE_ID',
      accessToken: 'YOUR_ACCESS_TOKEN',
      host: 'YOUR_HOST'
    });
  }
  // Method to get a type of content from Contentful
  getPages(): Promise<Page[]>
    const response = this.client.getEntries({ content_type: 'page' });
    return response.items.map((item) => ({
      title: item.fields.title,
      content: item.fields.content,
      // Map the rest of the items
    })
  }
}

Key Elements in `ContentfulService`

createClient: Initializes the Contentful client using your space ID, accessToken and host. These are typically stored in environment variables for security.
getPages: A method that retrieves entries from Contentful and map them into the type you are going to use in your app.

The Problem

Before implementing the mock solution, tests directly depended on the real ContentfulService, leading to:

Lots of calls during a complete test suite, making tests dependent on real data and the service’s state (More than 170 calls in my case).
Inconsistent results due to network issues or changes in the service data.
Unnecessary usage of resources from the service account.

The Solution: Mocking `ContentfulService`

The key to solving this problem is replacing the real service with a mock version in the tests, avoiding any external calls. Here’s the code that implements this solution:

Creating a Mock Provider

import { ContentfulService } from './contentful.service';

export const provideContentfulTesting = () => ({
  provide: ContentfulService,
  useValue: {
    getPages: jasmine.createSpy('getPages').and.returnValue(Promise.resolve([])),
  },
});

This mock:

Replaces the real function (getPages) with a Jasmine spy.
Returns default values (in this case, an empty list) to ensure the tests don’t rely on external data.

Using the Mock in the Test Module

import { provideContentfulTesting } from '@shared/services/contentful/contentful-testing';

describe('ImportDialogComponent', () => {
  beforeEach(async() => {
    await TestBed.configureTestingModule({
      imports: [yourModules], 
      declarations: [yourImplementedComponents], 
      providers: [
        otherProviders,
        provideContentfulTesting(),
      ],
    }).compileComponents();
  });
  // Rest of your code
});

By including provideContentfulTesting() in the providers array, Angular uses the mock instead of the real service for all tests in that module.

Benefits

1. Increased Consistency
Tests no longer depend on changing data in Contentful or the service’s availability, ensuring reliable results.

2. Easier Edge Case Testing
Using spies allows you to control return data and test specific scenarios (e.g., handling errors from getEntries).

contentfulMock.getEntries.and.returnValue(Promise.reject(new Error('API Error')));

3. Reduced Costs and Load on External APIs
No unnecessary resources are consumed from the Contentful account. Remember that Contentful have a cost, and you don’t want to exceed the limit of your account. In some projects, I have seen that the amount of calls made by tests reached 400K calls in a month, so be careful with these things.

Conclusion

For services like Contentful, you should always have a service that manages the API calls, and mocking it in unit tests something essential to avoid an extra cost in your account.

DEV Community: Gabriel Luis Freitas

Preventing Real Service Calls in Tests: A Clean Approach with Angular

The Problem

The Solution

1. The Error Prevention Utility

2. The Testing Provider

3. Implementation in the Service

How to Mock responses

Benefits

How to Avoid Unnecessary Calls in Your Tests — Angular

Introduction

How to Set Up an API service

Key Elements in ContentfulService

The Problem

The Solution: Mocking ContentfulService

Creating a Mock Provider

Using the Mock in the Test Module

Benefits

Conclusion

Key Elements in `ContentfulService`

The Solution: Mocking `ContentfulService`