Search code examples
angularjsjasminekarma-jasminejasmine2.0

Catching variable set in timeout in Angular/Jasmine test


In this Angular/Jasmine example I have a controller with a promise and a $timeout.

The test fails because a variable set in the $timeout is undefined. Other variables not set inside the $timeout don't have this problem.

Only this expect fails, the others work:

expect($scope.notes).toBe(notes);

I used $timeout.flush() to wait but it is ignored. Any ideas how to fix this?

PLUNK http://plnkr.co/edit/Jet3KRs7baTIzk8L30JQ

angular.module("mymodule", [])

.service('myHttp', function($http){
    this.call = function($q) {
        var defer = $q.defer();
        $http({url:"gothere"})
              .then(function (response) {
                  defer.resolve(response);
              });
        return defer.promise;
    };
})

.controller('ctl', function($scope,$timeout,myHttp) {
      $scope.read = function (id){
          var data = {};
          data.id = id;
          myHttp.call({url:'/getRecord', data:data})
              .then(function(response) {
                  $scope.id = response.id;
                  $scope.name = response.nm;
                  $scope.descrip = response.dsc;

                  $timeout(function(){
                      $scope.notes = response.nts;
                  },1000);

              });
    };
});



describe('Testing a Controller that uses a Promise', function () {
  var $scope;
  var $q;
  var deferred;

  beforeEach(module('mymodule'));

  beforeEach(inject(function($controller, _$rootScope_, _$q_, $timeout, myHttp) {
    $scope = _$rootScope_.$new();
    $q = _$q_;
    deferred = $q.defer();
    spyOn(myHttp, 'call').and.returnValue(deferred.promise);

    $controller('ctl', { 
      $scope: $scope, 
      $timeout: $timeout,
      myHttp: myHttp
    });

    $scope.read(1)
    $timeout.flush(2000);
  }));

  it('should resolve promise', function () {

    var id = 1;
    var name = "John";
    var descrip = "This is the description";
    var notes = "These are the notes";

    var obj = {
      id: id,
      nm: name,
      dsc: descrip,
      nts: notes
    };

    deferred.resolve(obj);
    $scope.$apply();
    expect($scope.id).toBe(id);
    expect($scope.name).toBe(name);
    expect($scope.descrip).toBe(descrip);
    expect($scope.notes).toBe(notes);
  });

});

Solution

  • The answer is: use $timeout.flush() after $scope.apply();

     $scope.$apply();
     $timeout.flush();