如何在AngularJS中使用Jasmine测试$ scope。$ watch

Question

I'm new to AngularJS and unit testing,
I'm testing a list that gets changing by selected category.
The test is passing but only if I use the httpBackend.expectGET() that expects the XMLHttpRequest from the "getSomethingElse" method.
I also tried to use the scope.$digest() but I got the same results...

The Controller:

app.controller('mainCtrl', ['$scope', 'myService', function($scope, 
myService) {
  $scope.category = null;

  myService.getSomethingElse().then(function(res) {
    $scope.somethingElse = res.data;
  });

  $scope.$watch('category', function() {
    if ($scope.category !== null) {
      myService.getListByCat($scope.category.name).then(function(res) {
        $scope.list = res.data;
      });
    }
    else {
      myService.getLongList().then(function(res) {
        $scope.list = res.data;
      });
    }
  });
}]);

The Service:

app.service('myService', ['$http', function($http) {
  this.getListByCat = function(category) {
    return $http.get('getting-list?cat=' + category);
  };

  this.getLongList = function() {
    return $http.get('getting-long-list');
  };

  this.getSomethingElse = function() {
    return $http.get('getting-something-else');
  };
}]);

The Test

describe('Testing mainCtrl', function() {
  var scope, ctrl;

  var myServiceMock = { 
    getSomethingElse: jasmine.createSpy().and.returnValue(1),
    getListByCat: jasmine.createSpy().and.returnValue(2)
  };

  beforeEach(function() {
    module('app');
    inject(function($rootScope, $controller) {
      scope = $rootScope.$new();
      ctrl = $controller('mainCtrl', {
        $scope: scope,
        myService: myServiceMock
      });

    });
  });

  it('should update the list by selected category', function() {
    expect(scope.category).toBeNull();
    expect(scope.list).toBeUndefined();

    scope.category = {
      id: 1,
      name: 'Jobs'
    };

    scope.$apply();

    expect(myServiceMock.getSomethingElse).toHaveBeenCalled();
    expect(myServiceMock.getListByCat).toHaveBeenCalled();
  });
});

Answer 1

The test is passing but only if I use the httpBackend.expectGET() that expects the XMLHttpRequest from the "getSomethingElse" method.

This is because your myServiceMock is not replacing the original myService . You have various ways to test this - one of them is given below. Here we are replacing myService with the service mock:-

beforeEach(function() {
    module('app');
    module(function($provide){
    $provide.factory('myServiceMock', 
        function(){
           return myServiceMock;
        );
    });
    inject(function($rootScope, $controller) {
      scope = $rootScope.$new();
      ctrl = $controller('mainCtrl', {
        $scope: scope,
        myService: myServiceMock
      });

    });
  });

Answer 2

You can add your watcher like this.

$scope.categoryWatcher = categoryWatcher;
$scope.$watch('category', categoryWatcher);

function categoryWatcher() {
if ($scope.category !== null) {
    myService.getListByCat($scope.category.name).then(function(res) {
      $scope.list = res.data;
    });
  }
  else {
    myService.getLongList().then(function(res) {
      $scope.list = res.data;
    });
  }
}

and in Unit testing just create new it construct for that handler

it('should test categoryWatcher for null value', function(){
  $scope.category = null;
  $scope.categoryWatcher();
  // your expectations
});

it('should test categoryWatcher for "desiredValue" value', function(){
  $scope.category = "desiredValue";
  $scope.categoryWatcher();
  // your expectations
});

that way, if&else clauses will be taken in the test.