角JS单元测试控制器

Question

我有这样

(function(){ 
     var app = angular.module('app', []); 

     app.directive('test', function(){ 
      return { 
       restrict: 'E', 
       templateUrl: 'test.html', 
       controller: ['$scope', function ($scope) { 
     $scope.password = ''; 
     $scope.grade = function() { 
      var size = $scope.password.length; 
      if (size > 8) { 
      $scope.strength = 'strong'; 
      } else if (size > 3) { 
      $scope.strength = 'medium'; 
      } else { 
      $scope.strength = 'weak'; 
     } 
     } 
    }]; 
    }); 

我写一个单元测试到该控制器的控制器

describe('PasswordController', function() { 
    beforeEach(module('app')); 

    var $controller; 

    beforeEach(inject(function(_$controller_){ 
    // The injector unwraps the underscores (_) from around the parameter names when matching 
    $controller = _$controller_; 
    })); 

    describe('$scope.grade', function() { 
    it('sets the strength to "strong" if the password length is >8 chars', function() { 
     var $scope = {}; 
     var controller = $controller('$scope', { $scope: $scope }); 
     $scope.password = 'longerthaneightchars'; 
     $scope.grade(); 
     expect($scope.strength).toEqual('strong'); 
    }); 
    }); 
}); 

我结束了得到一个错误，其 错误：[ng：areq]参数'$ scope'不是函数，未定义

我正在以正确的方式请求帮助

Answer 1

您无法通过执行$scope = {}来创建$scope。你的天赋改成这样：

describe('PasswordController', function() { 
    beforeEach(module('app')); 

    var $controller, $rootScope; 

    beforeEach(inject(function (_$controller_, _$rootScope_) { 
      // The injector unwraps the underscores (_) from around the parameter names when matching 
      $controller = _$controller_; 
      $rootScope = _$rootScope_; 
     })); 

    describe('$scope.grade', function() { 
     it('sets the strength to "strong" if the password length is >8 chars', function() { 
      var $scope = $rootScope.$new(); 
      var controller = $controller('$scope', { 
        $scope : $scope 
       }); 
      $scope.password = 'longerthaneightchars'; 
      $scope.grade(); 
      expect($scope.strength).toEqual('strong'); 
     }); 
    }); 
}); 

Answer 2

你的控制器定义为您的指令定义的一部分，我不相信这些可以单元独立指令themsleves的测试。

如果你想单元测试这个控制器，你应该使用angular的controller方法给它一个单独的名字，然后在你的指令中按名称使用它。然后，您可以使用角度模拟的$controller服务检索控制器，与您现在的操作类似。最终的结果是这样的：

app.controller('YourCtrl', ['$scope', function($scope) { ... }]); 
app.directive('test', function() { 
    return { 
      ... 
      controller: 'YourCtrl', 
      ... 
    }}); 

，并在测试

var controller = $controller('YourCtrl', { $scope: $scope }); 

这里是一个的jsfiddle是puts it all together

Answer 3

这里是我会测试该指令的控制器。 DEMO http://plnkr.co/edit/w9cJ6KDNDvemO8QT3tTN?p=preview

我不会导入控制器。我会编译指令并测试指令的控制器。

describe('PasswordController', function() { 
    var $scope; 
    var element; 

    beforeEach(module('MyApp')); 

    beforeEach(
    inject(function($rootScope, $compile, $templateCache) { 
     // Imports test.html 
     var templateUrl = 'test.html'; 
     var req = new XMLHttpRequest(); 
     req.onload = function() { 
     $templateCache.put(templateUrl, this.responseText); 
     }; 
     req.open('get', templateUrl, false); 
     req.send(); 

     $scope = $rootScope.$new(); 

     element = '<test></test>'; 
     // Compile the directive 
     element = $compile(element)($scope); 

     // Call digest cycle 
     $scope.$apply(); 
    })); 

    describe('$scope.grade', function() { 
    it('sets the strength to "strong" if the password length is >8 chars', function() { 
     $scope.password = 'longerthaneightchars'; 
     $scope.grade(); 
     expect($scope.strength).toEqual('strong'); 
    }); 
    }); 
});