AngularJS : How to test promise logic with a resolve in it?

Question

I have a service method that has some caching logic:

model.fetchMonkeyHamById = function(id)
{
    var that = this;
    var deferred = $q.defer();
    if( that.data.monkeyHam )
    {      
         deferred.resolve( that.data.monkeyHam );
         return deferred.promise;
     } else {
          return this.service.getById( id).then( function(result){
             that.data.monkeyHam = result.data;           
         });
    }
};

I know how to use $httpBackend to force the mocked data to be returned. Now, how do I force it to resolve (and then test the result) when I've set the data explicitly?

I want to test the result in the controller then() function:

            MonkeyHamModel.fetchMonkeyHamById(this.monkeyHamId).then( function() {
                $scope.currentMonkeyHam = MonkeyHamModel.data.monkeyHam;
            });

Then my test I want to explicitly set the data (so it loads from memory "cache" instead of httpBackend)

     MonkeyHamModel.data.monkeyHam = {id:'12345'};
     MonkeyHamModel.fetchMonkeyHamById( '12345');
     // How to "flush" the defer right here like I would have flushed httpBackend?
     expect( $scope.currentMonkeyHam.id ).toEqual('12345'); //fails because it is not defined yet since the $q never resolved

Where $scope is just the scope of my controller, but called $scope here for brevity.

UPDATE:

The suggested answer does not work. I need the function to return a promise, not a value that is the result of a promise:

model._monkeyHams = {} // our cache
model.fetchMonkeyHamById = function(id){
 return model.monkeyHams[id] || // get from cache or
        (model.monkeyHams[id] = this.service.getById(id).then(function(result){
            return result.data;        
        }));
};

The following requires that you have touched the server already. I create a model on the front end (currentMonkeyHam) or whatever, and don't load it back after the first POST (an unnecessary GET request). I just use the current model. So this does not work, it requires going out to the server at least once. Therefore, you can see why I created my own deferred. I want to use current model data OR get it from the server if we don't have it. I need both avenues to return a promise.

var cache = null;
function cachedRequest(){
    return cache || (cache = actualRequest())
}

Answer 1

Your code has the deferred anti pattern which makes it complicated - especially since you're implicitly suppressing errors with it. Moreover it is problematic for caching logic since you can end up making multiple requests if several requests are made before a response is received.

You're overthinkig it - just cache the promise:

model._monkeyHams = {} // our cache
model.fetchMonkeyHamById = function(id){
 return model.monkeyHams[id] || // get from cache or
        (model.monkeyHams[id] = this.service.getById(id).then(function(result){
            return result.data;        
        }));
};

In your case, you were caching all IDs as the same thing, the general pattern for caching promises is something like:

var cache = null;
function cachedRequest(){
    return cache || (cache = actualRequest())
}

Creating deferred is tedious and frankly - not very fun ;)

Answer 2

You can use setTimeout (or $timeout) for resolving the promise.

You can modify your code as -

model.fetchMonkeyHamById = function(id)
{
    var that = this;
    var deferred = $q.defer();
    if( that.data.monkeyHam )
    {      
         setTimeout(function() {
            deferred.resolve(that.data.monkeyHam);
         }, 100);
         return deferred.promise;
     } else {
          return this.service.getById( id).then( function(result){
             that.data.monkeyHam = result.data;           
         });
    }
};

EDIT:

Modified as per Benjamin's suggestion -

Using $rootScope.digest() - code should be something like this

MonkeyHamModel.data.monkeyHam = {id:'12345'};
MonkeyHamModel.fetchMonkeyHamById( '12345');
$rootScope.digest();

Answer 3

We've done something similar in our code base, but instead of having an object with state that constantly changed we went with something that looks more like a traditional repository.

someInjectedRepoistory.getMonkeyHamModel().then(x => $scope.monkeyHam = x);

Repository{
   getMonkeyHamModel() {
       var deferred = $q.defer();
       if( this.cache.monkeyHam )
       {      
            deferred.resolve( this.cache.monkeyHam );
        } else {
             return this.service.getById( id).then( function(result){
                this.cache.monkeyHam  = result.data;           
            });
       }
       return deferred.promise
   }
}

There are no problems with returning a completed deferred. That's part of the purpose of the deferreds, it shouldn't matter when or how they are resolved, they handle all of that for you.

As for your test we do something like this.

testGetFromService(){
   someInjectedRepoistory.getMonkeyHamModel().then(x => verifyMonkeyHam(x));
   verifyHttpBackEndGetsCalled()
}

testGetFromCache(){
   someInjectedRepoistory.getMonkeyHamModel().then(x => verifyMonkeyHam(x));
   verifyHttpBackEndDoesNotGetCalled()
}