Testing AngularJS services with $httpBackend

Testing AngularJS services that interact with APIs using $http can be challenging, but it is critical for ensuring that your services function correctly. $httpBackend from ngMock allows you to mock HTTP requests, simulate API responses, and verify that your services are correctly making and handling requests.

In this guide, we’ll go through the process of testing AngularJS services that use $http with $httpBackend to mock API calls. We’ll explore how to set up the testing environment, write test cases, and test different aspects of services like GET, POST, PUT, and DELETE requests.

1. Setting Up the Testing Environment

To begin testing, you need to have the following dependencies in place:

Jasmine: The testing framework.
Karma: The test runner.
ngMock: Provides mock services like $httpBackend to simulate HTTP requests.

Make sure to inject the necessary modules into your test suite:

ngMock for AngularJS-specific mocks, such as $httpBackend.
The module that contains your service.

2. Example Service Code to Test

Let’s assume you have a service that makes API requests using $http:

angular.module('myApp', [])
  .service('MyService', function($http) {
    var apiUrl = '/api/data';

    this.getData = function() {
      return $http.get(apiUrl);
    };

    this.saveData = function(data) {
      return $http.post(apiUrl, data);
    };

    this.updateData = function(id, data) {
      return $http.put(apiUrl + '/' + id, data);
    };

    this.deleteData = function(id) {
      return $http.delete(apiUrl + '/' + id);
    };
  });

This service interacts with a backend API using $http methods to retrieve, save, update, and delete data. We’ll write tests for each of these methods.

3. Basic Structure of Testing a Service

In Jasmine, a typical test for an AngularJS service using $httpBackend includes the following steps:

Inject the necessary services: $httpBackend, the service itself, and any other dependencies.
Mock the HTTP request using $httpBackend.whenXXX().respond().
Trigger the service function that makes the HTTP request.
Flush the request using $httpBackend.flush() to simulate the response.
Verify that the service behaves as expected by checking the data returned or verifying the HTTP request.

4. Test Suite Example: GET, POST, PUT, DELETE

Let’s now write test cases to validate all CRUD operations (GET, POST, PUT, DELETE) for the MyService.

Test Case: Testing GET Request

describe('MyService', function() {
  var MyService, $httpBackend, $rootScope;

  // Load the module containing the service
  beforeEach(module('myApp'));

  // Inject dependencies
  beforeEach(inject(function(_MyService_, _$httpBackend_, _$rootScope_) {
    MyService = _MyService_;
    $httpBackend = _$httpBackend_;
    $rootScope = _$rootScope_;
  }));

  afterEach(function() {
    // Ensure that there are no outstanding HTTP requests
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });

  it('should get data from API', function() {
    var mockData = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];

    // Mock the GET request and set the response
    $httpBackend.whenGET('/api/data').respond(200, mockData);

    // Call the service method
    MyService.getData().then(function(response) {
      expect(response.data).toEqual(mockData);  // Check the response data
    });

    // Simulate the backend response
    $httpBackend.flush();
  });
});

In this test:

We mock the $http.get request using $httpBackend.whenGET().
We simulate the HTTP response with .respond().
We call MyService.getData(), then flush the request with $httpBackend.flush().
Finally, we verify the response data.

Test Case: Testing POST Request

it('should save data to API', function() {
  var postData = { name: 'New Item' };
  var mockResponse = { id: 3, name: 'New Item' };

  // Mock the POST request and set the response
  $httpBackend.whenPOST('/api/data').respond(201, mockResponse);

  // Call the service method
  MyService.saveData(postData).then(function(response) {
    expect(response.data).toEqual(mockResponse);  // Verify that the correct response is received
  });

  // Flush the request to simulate the backend response
  $httpBackend.flush();
});

Here, we:

Mock the POST request using $httpBackend.whenPOST().
Return a response (mockResponse) that represents the data saved on the server.
Verify that the service correctly handles the POST response.

Test Case: Testing PUT Request

it('should update data in API', function() {
  var updateData = { name: 'Updated Item' };
  var mockResponse = { id: 1, name: 'Updated Item' };

  // Mock the PUT request and set the response
  $httpBackend.whenPUT('/api/data/1').respond(200, mockResponse);

  // Call the service method
  MyService.updateData(1, updateData).then(function(response) {
    expect(response.data).toEqual(mockResponse);  // Check that the response matches the expected result
  });

  // Flush the request to simulate the backend response
  $httpBackend.flush();
});

This test case checks:

If the updateData method correctly sends a PUT request with the data to the correct URL.
If the service correctly handles the response after updating the data.

Test Case: Testing DELETE Request

it('should delete data from API', function() {
  var mockResponse = { message: 'Data deleted successfully' };

  // Mock the DELETE request and set the response
  $httpBackend.whenDELETE('/api/data/1').respond(200, mockResponse);

  // Call the service method
  MyService.deleteData(1).then(function(response) {
    expect(response.data.message).toBe('Data deleted successfully');
  });

  // Flush the request to simulate the backend response
  $httpBackend.flush();
});

In this test:

We simulate a DELETE request to the API.
The service is tested to ensure it correctly handles the delete operation and response.

5. Testing Edge Cases (Error Handling)

You should also test how your service handles errors, such as server errors (500) or client errors (400). You can simulate these cases using $httpBackend.

Test Case: Testing Error Handling

it('should handle error when API request fails', function() {
  var mockError = { error: 'Internal Server Error' };

  // Mock the GET request to simulate an error
  $httpBackend.whenGET('/api/data').respond(500, mockError);

  // Call the service method
  MyService.getData().catch(function(error) {
    expect(error.status).toBe(500);
    expect(error.data.error).toBe('Internal Server Error');
  });

  // Flush the request to simulate the backend error
  $httpBackend.flush();
});

In this test case:

We simulate a 500 error (server-side issue).
We check if the service properly catches and handles the error.