单元测试指令控制器在角未做控制器全球 [英] Unit-testing directive controllers in Angular without making controller global

问题描述

在Vojta开发集纳的，在那里他展示了指令测试优秀的资源库，他定义模块封装外的指令控制器。看这里：
<一href=\"https://github.com/vojtajina/ng-directive-testing/blob/master/js/tabs.js\">https://github.com/vojtajina/ng-directive-testing/blob/master/js/tabs.js

In Vojta Jina's excellent repository where he demonstrates testing of directives, he defines the directive controller outside of the module wrapper. See here: https://github.com/vojtajina/ng-directive-testing/blob/master/js/tabs.js

这不就是不好的做法，污染全局命名空间？

Isn't that bad practice and pollute the global namespace?

如果一个人有另一个地方，它可能是合乎逻辑的东西叫TabsController，那不是破东西吗？

If one were to have another place where it might be logical to call something TabsController, wouldn't that break stuff?

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

The tests for the mentioned directive is to be found here: https://github.com/vojtajina/ng-directive-testing/commit/test-controller

是否有可能测试指令控制器从指令的其余部分分开，没有放置控制器全局命名空间？

Is it possible to test directive controllers separate from the rest of the directive, without placing the controller in a global namespace?

这将是很好的封装app.directive（...）定义内的整个指令。

It would be nice to encapsulate the whole directive within the app.directive(...) definition.

推荐答案

很好的问题！

所以，这是一个共同的关注，不仅与控制器，也可能与该指令可能需要执行其工作，但不一定要暴露该控制器/服务的外界的服务。

So, this is a common concern, not only with controllers but also potentially with services that a directive might need to perform its job but don't necessarily want to expose this controller / service to the "external world".

我坚信，全球数据是邪恶的，应该避免这适用于指令控制器以及。如果我们把这个假设，我们可以采取几种不同的方法来定义这些控制器本地。虽然这样做，我们需要记住，控制器应该还是轻松访问单元测试，所以我们不能简单地将其隐藏到指令的关闭。 IMO可能性是：

I strongly believe that global data are evil and should be avoided and this applies to directive controllers as well. If we take this assumption we can take several different approaches to define those controllers "locally". While doing so we need to keep in mind that a controller should be still "easily" accessible to unit tests so we can't simply hide it into directive's closure. IMO possibilities are:

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

1) Firstly, we could simply define directive's controller on a module level, ex::

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
  };
})

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

This is a simple technique that we are using in https://github.com/angular-ui/bootstrap/blob/master/src/tabs/tabs.js which is based on Vojta's work.

虽然这是一个非常简单的技术，应当注意的是，控制器被仍暴露于整个应用程序，这意味着其他模块可能覆盖它。在这个意义上，它使控制器本地AngularJS应用（因此不污染一个全局窗口范围内），但它也全局所有AngularJS模块。

While this is a very simple technique it should be noted that a controller is still exposed to the whole application which means that other module could potentially override it. In this sense it makes a controller local to AngularJS application (so not polluting a global window scope) but it also global to all AngularJS modules.

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

如果我们想完全隐藏控制器的功能，我们可以换code在一个封闭。这是AngularJS使用的技术。例如，在看<一个href=\"https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L891\">NgModelController我们可以看到，它是在其自己的文件定义为一个全球性的功能（因而很容易测试访问），但在制作的时候把整个文件包裹在闭合：

If we want to completely hide a controller function we can wrap code in a closure. This is a technique that AngularJS is using. For example, looking at the NgModelController we can see that it is defined as a "global" function in its own files (and thus easily accessible for testing) but the whole file is wrapped in closure during the build time:

• https://github.com/angular/angular.js/blob/master/src/angular.$p$pfix


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

要总结一下：选择（2）是更安全，但需要构建一个位前期设置的

To sum up: the option (2) is "safer" but requires a bit of up-front setup for the build.

这篇关于单元测试指令控制器在角未做控制器全球的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！