angular unit test stateful filter

Question

angular unit test stateful filter

I have a filter that depends upon a service to retrieve some configuration, and hence I have made the filter stateful. It works great! However, I'd like to add unit tests around it but can't work out how to implement them.

An example filter:

.filter("myFilter", function(myService) {
  var data = null, serviceInvoked = false;

  function realFilter(value) {
    return data + value;
  }

  filterStub.$stateful = true;
  function filterStub(value) {
    if( data === null ) {
      if( !serviceInvoked ) {
        console.log('no state'); // dirty console.log for unit test diagnostics
        serviceInvoked = true;
        myService.get().then(function(result){
           data = result;
        });
      }
      return "-";
    }
    else {
      return realFilter(value);
    }
  }

  return filterStub;
});

I can test that "-" is initially returned.

In my next test I have stubbed myService with sinonjs and return a promise. I want to resolve that promise with data and see that the filter updates correctly. My test looks something like:

it('returns the value prepended with the data from the service', 
  function () {
    $scope.value = "World!";
    var markup = "<div>{{value | myFilter}}</div>";
    var element = $compile(markup)($scope);
    $scope.$digest();
    /*
     * Works:
     */
    expect(element.html()).toBe('-');

    /*
     * the following still returns "-" though I want to test 
     * that realFilter was executed
     */
    myServiceMock_getPromise.resolve('Hello ');
    $scope.$digest();

    // FAIL: Expected '-' to be 'Hello World!'
    expect(element.html()).toBe('Hello World!');
});

This works in production, but in the unit test the console.log in the filter outputs 'no state' with each digest, implying its not maintaining the filters state.

Is there something about the way I am compiling the markup that eludes to it being unable to maintain state or have I got something wrong with my test?

angularjs
unit-testing

Answer 1

It's not about template compilation. It's about promises and javascript ticks.

Resolved promise will be executed in a different tick (regardless $scope.$digest which only initiates this process). Thus expectations should be wrapped in .then and test engine should be notified about the fact that the test is asynchronous by done callback.

it('returns the value prepended with the data from the service', 
  function (done) {
    ...

    myServiceMock_getPromise.resolve('Hello ');
    $scope.$digest();
    myServiceMock_getPromise.promise.then(function(){
       expect(element.html()).toBe('Hello World!');
       done();
    });
 }