通过 Jasmine 对 AngularJS 控制器进行单元测试

Question

当谈到 Jasmine 的单元测试和一般的单元测试时，我是一个完整的新手。我最近的任务是尝试对 AngularJS 控制器进行单元测试。下面您将看到我的代码以及我尝试过的内容，其中大部分都未能将我带到我需要去的地方。任何帮助将不胜感激！

控制器

 angular
       .module('TDE')
       .controller('LocationController', ['$rootScope', '$scope', '$location', '$window', '$document', 'LocationService', 'HeaderFooterService', 'SearchService', 'TranslationService', 'MTDE_CONFIG', 'LocationPartnerAssignmentService', 'ExperimentService', function ($rootScope, $scope, $location, $window, $document, $LocationService, $HeaderFooterService, $SearchService, $TranslationService, $MTDE_CONFIG, $LocationPartnerAssignmentService, $ExperimentService) {

       //some non important code
       //What I'm trying to test
       $scope.boolTest= function(var){
          return true; //this method only returns true
       }
       //all I'm after is basic understanding, I've done countless searches but I can't get it

  //other code

帮助文件（测试文件）

beforeEach(function () {
        angular.mock.module('LocationController'); //
        inject(function ($injector) {
            //$rootScope = $injector.get('$rootScope');
            //$scope = $rootScope.$new();
            //ctrl = $injector.get('$controller')("LocationController", { $scope: $scope });
            //Neither ctrl really functions that well

            injector = $injector;
            ctrl = $injector.get('$controller');
            scope = $injector.get('$rootScope').$new();
        });
    });

规范.html

<!-- jasmine source -->
    <link rel="shortcut icon" type="image/png" href="spec/lib/jasmine-1.2.0/jasmine_favicon.png">
    <link rel="stylesheet" type="text/css" href="spec/lib/jasmine-1.2.0/jasmine.css">
    <script type="text/javascript" src="spec/lib/jasmine-1.2.0/jasmine.js"></script>
    <script type="text/javascript" src="spec/lib/jasmine-1.2.0/jasmine-html.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.1.0/angular-mocks.js"></script>

    <!-- include source files here... -->
    <script type="text/javascript" src="js/Location/LocationController.js"></script>
    <!-- include spec files here... -->
    <script type="text/javascript" src="spec/RTHelper.js"></script>

到目前为止，我被卡住了，我可以像 a + b 一样进行真正的基本测试并验证结果，但是我无法获得（至少我认为）访问 $scope 的权限，就像我需要该方法一样.

当前错误是没有模块：LocationController

我已经尝试过使用“TDE”但没有，请有人帮助我！

Answer 1

抱歉上一个链接，我不太明白你的问题。

如果您要设置单元测试，我建议您检查 Karma (http://karma-runner.github.io/0.12/index.html)，这是测试 Angular 代码并集成到 CI 环境中的最简单方法。

不管怎样，下面是一个在 Jasmine 中测试基本控制器的示例：

function MyControllerCtrl ($scope, Service) {
  $scope.something = true;
  $scope.set = Service.set;
};

describe('MyControllerCtrl', function () {

  // load the controller's module using angular.mock.module
  beforeEach(module('myApp'));

  var subject
    , $scope
    , Service = { // mock the Service service
        set: function () {},
      }
    ;

  beforeEach(inject(function ($controller, $rootScope) {
    $scope = $rootScope.$new(); // create a new clean scope
    subject = $controller('MyControllerCtrl', {
      Service: Service,
      $scope: $scope,
    });

  }));

  it('should do something', function () {
    expect($scope.something).toEqual(true);
  });

  it('bind Service.set', function () {
    expect($scope.set).toEqual(Service.set);
  });

});

这背后的想法是，在每次测试之前，你将你的模拟服务传递给控制器​​（$scope 只不过是一个服务），然后你测试控制器是否做了它必须做的事情。

在你的情况下，你可以期望($scope.boolTest()).toEqual(true);