Angulajs: The correct way to simulate a Promise received from $http

Question

Angulajs: The correct way to simulate a Promise received from $http

Seeking guidance after struggling with unit testing an angular service, specifically the failed part of a promise.

(function () {
angular.module('testable')
    .factory('myService', ["$http", "$q", function ($http, $q) {
        return {
            createThing: function(thing) {
                return $http.post("//...", thing)
                        .then(function (response) {
                            return response.data;
                        }, function (response) {
                            return $q.reject(response.statusText);
                        });
            }
        };
    }]);
}());

Despite reviewing multiple resources on Stack Overflow, I am unable to successfully test a rejected promise. I have attempted various approaches but none have produced the desired outcome. Here is the current setup:

    beforeEach(inject(function ($injector, myService) {
        sut = myService;
        $httpBackend = $injector.get('$httpBackend');
        $q = $injector.get('$q');
        $rootScope = $injector.get('$rootScope');
        dataToSend = "send me!";
        deferred = $q.defer();
    }));

    it("should handle error appropriately", function () {
        var result,
            expected = "FAIL!!!!!";

        deferred.reject(expected);
        $httpBackend.expectPOST(testUrl, dataToSend).respond(deferred.promise);

        sut.createThing(dataToSend).then(function (returnFromPromise) {
            result = returnFromPromise;
        });

        $rootScope.$apply();
        $httpBackend.flush();

        // Assertion goes here but result is consistently incorrect
    });

Understanding the asynchronous nature of promises, I've pieced together information from various sources. However, I welcome any advice or suggestions on how to effectively complete this unit test.

javascript angularjs unit-testing jasmine angular-promise

Answer 1

Answer №1

Utilizing the $httpBackend service eliminates the necessity of dealing with promises to mimic HTTP requests. The respond() method is structured as follows:

respond: function(status, data, headers, statusText) { 
  ...
}

To simulate an error, simply return a non-success status code (!= 200):

it('should not create a thing', function() {
    var result;

    // Arrange
    $httpBackend.expectPOST('https://domain.com/api')
      .respond(500, null, null, 'some error');

    // Act
    myService.createThing('foo').then(angular.noop, function(data) {
      result = data;
    });

    $httpBackend.flush();

    // Assert
    expect(result).toBe('some error');
  });

The comprehensive spec below covers both success and error scenarios:

describe('Testing a factory', function() {
  var myService, $httpBackend;

  beforeEach(function() {
    module('plunker');

    inject(function(_$httpBackend_, _myService_) {
      $httpBackend = _$httpBackend_;
      myService = _myService_;
    })
  });

  afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });

  it('should create a thing', function() {
    var result;

    // Arrange
    $httpBackend.expectPOST('https://domain.com/api')
  .respond(200, 'some data');

    // Act
    myService.createThing('foo').then(function(data) {
      result = data;
    });

    $httpBackend.flush();

    // Assert
    expect(result).toBe('some data');
  });

  it('should not create a thing', function() {
    var result;

    // Arrange
    $httpBackend.expectPOST('https://domain.com/api')
  .respond(500, null, null, 'some error');

    // Act
    myService.createThing('foo').then(angular.noop, function(data) {
      result = data;
    });

    $httpBackend.flush();

    // Assert
    expect(result).toBe('some error');
  });
});

Working Plunker

No need to execute $rootScope.$apply() as no digest cycle is required for updates.

Answer 2

Utilizing the $httpBackend service eliminates the necessity of dealing with promises to mimic HTTP requests. The respond() method is structured as follows:

respond: function(status, data, headers, statusText) { 
  ...
}

To simulate an error, simply return a non-success status code (!= 200):

it('should not create a thing', function() {
    var result;

    // Arrange
    $httpBackend.expectPOST('https://domain.com/api')
      .respond(500, null, null, 'some error');

    // Act
    myService.createThing('foo').then(angular.noop, function(data) {
      result = data;
    });

    $httpBackend.flush();

    // Assert
    expect(result).toBe('some error');
  });

The comprehensive spec below covers both success and error scenarios:

describe('Testing a factory', function() {
  var myService, $httpBackend;

  beforeEach(function() {
    module('plunker');

    inject(function(_$httpBackend_, _myService_) {
      $httpBackend = _$httpBackend_;
      myService = _myService_;
    })
  });

  afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });

  it('should create a thing', function() {
    var result;

    // Arrange
    $httpBackend.expectPOST('https://domain.com/api')
  .respond(200, 'some data');

    // Act
    myService.createThing('foo').then(function(data) {
      result = data;
    });

    $httpBackend.flush();

    // Assert
    expect(result).toBe('some data');
  });

  it('should not create a thing', function() {
    var result;

    // Arrange
    $httpBackend.expectPOST('https://domain.com/api')
  .respond(500, null, null, 'some error');

    // Act
    myService.createThing('foo').then(angular.noop, function(data) {
      result = data;
    });

    $httpBackend.flush();

    // Assert
    expect(result).toBe('some error');
  });
});

Working Plunker

No need to execute $rootScope.$apply() as no digest cycle is required for updates.

Angulajs: The correct way to simulate a Promise received from $http

Answer №1

Similar questions

Is there a way to eliminate the black seam that is visible on my floor mesh that has been separated? I am utilizing A

AngularJS utilizes the trustAsHtml function to enable the inclusion of specific portions of a string

Effective strategies for organizing component features in React

Is it feasible to update just one key within an exported type using setState in TypeScript?

Encountered a CastError in Mongoose when trying to cast the value "Object" to a string

Guide on how to efficiently navigate and extract data from a (local) XML file using Prototype JS

The functionality of the delete button in Datatables is only operational on the initial page, failing to

How can one transform an array (in the form of a JSON array) into a map?

Add data to a DataTable without the need to manually refresh the page

Issue with Vue JS: e.preventDefault not functioning correctly when using Axios

What is the best way to incorporate Vuetify into a new application?

React Hook Form: Reset function triggers changes across all controllers on the page

Learn how to automatically set the checked state of a radio button by toggling another radio button

Updating the $_GET parameter using JQuery when a button is clicked

My Gatsby website is being rendered in its HTML form on Netlify

Switching between different elements in an array using React

VUE JS - My methods are triggering without any explicit invocation from my side

Utilizing AngularJS and ADAL.JS to Define Resource ID (Audience)

"Server request with ajax did not yield a response in JSON format

Is it possible to validate an email domain using node.js? For example, checking if gmail.com is a valid email domain, and ensuring that users do not enter incorrect variations such as egmail.com