Unfulfilled promises are left hanging

Question

Unfulfilled promises are left hanging

I've encountered a problem while writing a unit test for my Angular application using Jasmine with a mock service. The promise I am trying to run is not functioning as expected.

Below is the service code:

CreateItemController = $controller('CreateItemController', {
    ItemService: {

        createItem: function(data) {
            console.log('Service running');
            var defer = $q.defer();
            defer.resolve('1');
            return defer.promise;   
        }

The test script looks like this:

it('should create an item', function() {

    var created = false;
    $scope.createItem().then(function(response) {
        // This section is not executing
        console.log("We got through");
        created = true;
    });

    expect(created).toBe(true);

})

And here's the actual function implementation:

$scope.createItem = function() {
    var postData = {
        name: 'Jeans'
    };

    return ItemService.createItem(postData).then(function(response) {
       // This part is also not running
       console.log('Promise received');
    });
}

Can anyone help me figure out what mistake I'm making?

javascript angularjs unit-testing testing jasmine

Answer 1

Answer №1

To enhance your test, consider mocking the $q service to ensure that the promise resolution is no longer asynchronous.

Testing the $q service itself is unnecessary; focus on testing your custom logic instead.

  describe('controller: CreateItemController', function () {
    var subject, $scope;
    beforeEach(module('myModule'));
    beforeEach(inject(function ($rootScope, $controller, $q) {
      $scope = $rootScope.$new();

      subject = $controller('CreateItemController', {
        $scope: $scope,
        ItemService: {
          createItem: function () {
            var defer = $q.defer();
            spyOn(defer.promise, 'then').andCallFake(function (callback) {
              callback();
              return this;
            });
            return defer.promise;
          }
        }
      });
    }));

    it('should create an item', function () {
      var created = false;
      var subject = $scope.createItem().then(function () {
        created = true;
      });

      //deferred.resolve('1'); // unnecessary as callbacks are triggered immediately

      expect(created).toEqual(true);
    });
  });

If maintaining the delay is necessary, you can invoke $scope.$apply() after resolving the deferred object:

  describe('controlle: stack overflow', function () {
    var subject, $scope, deferred;
    beforeEach(module('myModule'));
    beforeEach(inject(function ($rootScope, $controller, $q) {
      $scope = $rootScope.$new();

      subject = $controller('CreateItemController', {
        $scope: $scope,
        ItemService: {
        createItem: function () {
            deferred = $q.defer();
            return deferred.promise;
          }
        }
      });
    }));

    it('should create an item', function () {
      var expected = {
        one: false,
        two: false,
      };
      var subject = $scope.createItem();
      subject.then(function () {
        expected.one = true;
      }).then(function () {
        expected.two = true;
      });

      deferred.resolve();
      expect(expected.one).toEqual(false);
      expect(expected.two).toEqual(false);

      $scope.$apply();

      expect(expected.one).toEqual(true);
      expect(expected.two).toEqual(true);
    });
  });
});

Answer 2

To enhance your test, consider mocking the $q service to ensure that the promise resolution is no longer asynchronous.

Testing the $q service itself is unnecessary; focus on testing your custom logic instead.

  describe('controller: CreateItemController', function () {
    var subject, $scope;
    beforeEach(module('myModule'));
    beforeEach(inject(function ($rootScope, $controller, $q) {
      $scope = $rootScope.$new();

      subject = $controller('CreateItemController', {
        $scope: $scope,
        ItemService: {
          createItem: function () {
            var defer = $q.defer();
            spyOn(defer.promise, 'then').andCallFake(function (callback) {
              callback();
              return this;
            });
            return defer.promise;
          }
        }
      });
    }));

    it('should create an item', function () {
      var created = false;
      var subject = $scope.createItem().then(function () {
        created = true;
      });

      //deferred.resolve('1'); // unnecessary as callbacks are triggered immediately

      expect(created).toEqual(true);
    });
  });

If maintaining the delay is necessary, you can invoke $scope.$apply() after resolving the deferred object:

  describe('controlle: stack overflow', function () {
    var subject, $scope, deferred;
    beforeEach(module('myModule'));
    beforeEach(inject(function ($rootScope, $controller, $q) {
      $scope = $rootScope.$new();

      subject = $controller('CreateItemController', {
        $scope: $scope,
        ItemService: {
        createItem: function () {
            deferred = $q.defer();
            return deferred.promise;
          }
        }
      });
    }));

    it('should create an item', function () {
      var expected = {
        one: false,
        two: false,
      };
      var subject = $scope.createItem();
      subject.then(function () {
        expected.one = true;
      }).then(function () {
        expected.two = true;
      });

      deferred.resolve();
      expect(expected.one).toEqual(false);
      expect(expected.two).toEqual(false);

      $scope.$apply();

      expect(expected.one).toEqual(true);
      expect(expected.two).toEqual(true);
    });
  });
});

Unfulfilled promises are left hanging

Answer №1

Similar questions

access the passport variable within the ng-view

Challenges encountered when unit testing ngx-translate

Issue with Vuex getter not reflecting correct value after modifying an array

invoke a managed bean to execute JavaScript code

How to style focused input using Vue2

What is causing my div exchange using .class to fail?

Is there a way to prevent SignalR from disconnecting when the settings window is moved?

Create compelling visual representations by utilizing Google charts to draw customized charts based on variable

Combine es6 imports from the identical module using an Eslint rule or plugin

Does the react key have scope limited to the local environment or does it have

Express Node fails to launch

I'm having trouble getting my HTML POST request form to connect with the Express app.post. Any tips on how to properly pass on numeric variables to a different POST request?

Revising the input value by updating the properties

Retrieving component attributes using jQuery or alternate event handlers

How can I use JavaScript or JQuery to retrieve the HTML content as a string from a specific URL?

Vue JS encountering Slack API CORS issue while using axios

Ajax fails to transfer the complete data

Is it possible to set up a complete operating system within a pod using Kubernetes and run Selenium tests simultaneously?

Basic color scheme

Creating a concise TypeScript declaration file for an established JavaScript library