如何在AngularJS控制器中测试服务?

时间:2014-05-07 15:19:45

标签: angularjs unit-testing karma-jasmine

我的控制器是:

angularMoonApp.controller('SourceController', ['$scope', '$rootScope', '$routeParams', 'fileService', function ($scope, $rootScope, $routeParams, fileService) {
  $scope.init = function() {
    $rootScope.currentItem = 'source';

    fileService.getContents($routeParams.path).then(function(response) {
      $scope.contents = response.data;
      $scope.fileContents = null;
      if(_.isArray($scope.contents)) {
        // We have a listing of files
        $scope.breadcrumbPath = response.data[0].path.split('/'); 
      } else {
        // We have one file
        $scope.breadcrumbPath = response.data.path.split('/');
        $scope.breadcrumbPath.push('');

        $scope.fileContents = atob(response.data.content);

        fileService.getCommits(response.data.path).then(function(response) {
          $scope.commits = response.data;
        });
      }
    });
  }

  $scope.init();
}]);

我的测试非常简单:

(function() {
  describe('SourceController', function() {
    var $scope, $rootScope, $httpBackend, createController;

    beforeEach(module('angularMoon'));

    beforeEach(inject(function($injector) {
      $httpBackend = $injector.get('$httpBackend');
      $rootScope = $injector.get('$rootScope');
      $scope = $rootScope.$new();

      var $controller = $injector.get('$controller');

      createController = function() {
        return $controller('SourceController', {
          '$scope': $scope
        });
      };
    }));

    it("should set the current menu item to 'source'", function() {
      createController();
      $scope.init();
      expect($rootScope.currentItem).toBe('source');
    });

    it("should get the contents of the root folder", function() {
      createController();
      $scope.init();

      // NOT SURE WHAT TO DO HERE!
    });

  });
})();

我想测试fileService调用它的getContents函数并模拟响应,以便我可以测试这两种情况(如果是数组,如果不是`)

2 个答案:

答案 0 :(得分:2)

我建议使用Jasmine间谍。

这是一个可能有用的示例。我通常把spyOn调用放在beforeEach中。

var mockedResponse = {};
spyOn(fileService, "getContents").andReturn(mockedResponse);

在'it'部分:

expect(fileService.getContents).toHaveBeenCalled();

要获得响应,只需调用控制器中调用fileService方法的方法。您可能还需要手动运行摘要循环。我的一个测试中的片段:

    var testOrgs = [];
    beforeEach(inject(function(coresvc) {
        deferred.resolve(testOrgs);
        spyOn(coresvc, 'getOrganizations').andReturn(deferred.promise);

        scope.getAllOrganizations();
        scope.$digest();
    }));

    it("getOrganizations() test the spy call", inject(function(coresvc) {
        expect(coresvc.getOrganizations).toHaveBeenCalled();
    }));

    it("$scope.organizations should be populated", function() {
        expect(scope.allOrganizations).toEqual(testOrgs);
        expect(scope.allOrganizations.length).toEqual(0);
    });
在这种情况下,

延迟是使用$ q.defer()创建的承诺;

答案 1 :(得分:1)

您可以创建间谍并仅验证是否已调用fileService.getContents,或通过进行间谍调用来验证额外调用(如承诺解析)。可能你也应该与httpBackend交互,因为你可能需要刷新http服务(即使你使用模拟服务)。

(function() {
  describe('SourceController', function() {
    var $scope, $rootScope, $httpBackend, createController, fileService;

    beforeEach(module('angularMoon'));

    beforeEach(inject(function($injector) {
      $httpBackend = $injector.get('$httpBackend');
      $rootScope = $injector.get('$rootScope');
      $scope = $rootScope.$new();

      // See here
      fileService = $injector.get('fileService');
      spyOn(fileService, 'getContents').andCallThrough();

      var $controller = $injector.get('$controller');

      createController = function() {
        return $controller('SourceController', {
          '$scope': $scope
          'fileService': fileService
        });
      };
    }));

    it("should get the contents of the root folder", function() {
      createController();
      $scope.init();

      expect(fileService.getContents).toHaveBeenCalled();
    });

  });
})();

您还可以对回调中发生的事情添加期望,但您之前应该发出httpBackend.flush()