Angular中的单元测试指令控制器，无需将控制器全局化

Question

在Vojta Jina的优秀存储库中，他演示了指令的测试，他定义了模块包装器之外的指令控制器。看到这里： https://github.com/vojtajina/ng-directive-testing/blob/master/js/tabs.js

是不是不好的做法和污染全球命名空间？

如果有人在另一个地方调用TabsController可能是合乎逻辑的，那会不会破坏东西？

对于所提到的指令的测试是在这里找到：https://github.com/vojtajina/ng-directive-testing/commit/test-controller

是否有可能测试指令控制器从指示的其余部分分开，不将其控制在一个全局命名空间？

将整个指令封装在app.directive（...）定义中会很好。

Answer 1

优秀的问题！

所以，这是一个普遍的问题，不仅与控制器有关，而且可能与服务有关，指令可能需要执行其工作，但不一定要将此控制器/服务公开给“外部世界”。

我坚信全球数据是邪恶的，应该避免，这也适用于指令控制器以及。如果我们采取这种假设，我们可以采取几种不同的方法来“本地”定义这些控制器。在这样做的时候，我们需要记住，控制器应该仍然可以“容易”进入单元测试，所以我们不能简单地将它隐藏到指令的关闭中。 IMO可能性是：

1）首先，我们可以简单地定义在模块级指令的控制器，前::

angular.module('ui.bootstrap.tabs', []) 
    .controller('TabsController', ['$scope', '$element', function($scope, $element) { 
    ... 
    }]) 
.directive('tabs', function() { 
    return { 
    restrict: 'EA', 
    transclude: true, 
    scope: {}, 
    controller: 'TabsController', 
    templateUrl: 'template/tabs/tabs.html', 
    replace: true 
    }; 
}) 

这是一个简单的技术，我们正在使用https://github.com/angular-ui/bootstrap/blob/master/src/tabs/tabs.js这是基于Vojta的工作。

虽然这是一个非常简单的技术，但应该注意的是，控制器仍然暴露给整个应用程序，这意味着其他模块可能会覆盖它。从这个意义上说，它使得AngularJS应用程序成为本地控制器（所以不会污染全局窗口范围），但它对所有AngularJS模块也是全局的。

2）使用封闭范围和特殊文件设置进行测试。

如果我们想完全隐藏控制器函数，我们可以将代码封装在闭包中。这是AngularJS正在使用的技术。例如，看着NgModelController我们可以看到，它是在其自己的文件定义为一个“全球性”的功能（并因此很容易测试访问），但在构建时整个文件被包裹在封闭：

• https://github.com/angular/angular.js/blob/master/src/angular.prefix
• https://github.com/angular/angular.js/blob/master/src/angular.suffix

综上所述：选项（2）为“安全”的，但需要为构建一个位的前期设置的。

Answer 2

我喜欢有时包括我的控制器与指令，所以我需要一种方法来测试。

首先指令

angular.module('myApp', []) 
    .directive('myDirective', function() { 
    return { 
     restrict: 'EA', 
     scope: {}, 
     controller: function ($scope) { 
     $scope.isInitialized = true 
     }, 
     template: '<div>{{isInitialized}}</div>' 
    } 
}) 

则测试：

describe("myDirective", function() { 
    var el, scope, controller; 

    beforeEach inject(function($compile, $rootScope) { 
    # Instantiate directive. 
    # gotacha: Controller and link functions will execute. 
    el = angular.element("<my-directive></my-directive>") 
    $compile(el)($rootScope.$new()) 
    $rootScope.$digest() 

    # Grab controller instance 
    controller = el.controller("myDirective") 

    # Grab scope. Depends on type of scope. 
    # See angular.element documentation. 
    scope = el.isolateScope() || el.scope() 
    }) 

    it("should do something to the scope", function() { 
    expect(scope.isInitialized).toBeDefined() 
    }) 
}) 

更多的方式来从一个实例化的指令得到的数据见angular.element documentation。

请注意，实例化指令意味着控制器和所有链接函数已经运行，因此可能会影响您的测试。

Answer 3

詹姆斯的方法适用于我。一个小的转折是，当你有一个外部模板时，你必须在$ rootScope。$ digest（）之前调用$ httpBackend.flush（）以让角度执行你的控制器。

我想这不应该是一个问题，如果你正在使用https://github.com/karma-runner/karma-ng-html2js-preprocessor

Answer 4

有什么不妥做这种方式？似乎更好，因为你避免把你的控制器放在全局名字空间中，并且能够测试你想要的东西（即控制器）而不会不必要地编译html。

举例指令定义：

.directive('tabs', function() { 
    return { 
    restrict: 'EA', 
    transclude: true, 
    scope: {}, 
    controller: function($scope, $attrs) { 
     this.someExposedMethod = function() {}; 
    }, 
    templateUrl: 'template/tabs/tabs.html', 
    replace: true 
    }; 

然后在你的茉莉花测试，要求该指令您已使用 “姓名+指令”（如 “tabsDirective”。）：

var tabsDirective = $injector.get('tabsDirective')[0]; 
// instantiate and override locals with mocked test data 
var tabsDirectiveController = $injector.instantiate(tabsDirective.controller, { 
    $scope: {...} 
    $attrs: {...} 
}); 

现在你可以测试控制器的方法：

expect(typeof tabsDirectiveController.someExposedMethod).toBe('function'); 

Answer 5

使用IIFE，这是一种常见的技术，以避免全局命名空间冲突&它还可以节省棘手的内联体操，并在你的范围内提供自由。

(function(){ 

    angular.module('app').directive('myDirective', function(){ 
    return { 
     ............. 
     controller : MyDirectiveController, 
     ............. 
    } 
    }); 

    MyDirectiveController.$inject = ['$scope']; 

    function MyDirectiveController ($scope) { 

    } 

})();