如何使用ngMock注入$控制器 [英] How to use ngMock to inject $controller

问题描述

我想学习单元测试使用噶，茉莉花和ngMock角。有在演示如何写一个控制器单元测试的角度文档至少有2个地方，我只是有一个关于他们是如何做的事情几个问题。

I'm trying to learn unit testing for Angular using Karma, Jasmine, and ngMock. There are at least 2 places in the Angular docs that show how to write unit tests for a controller, and I just have a couple of questions about how they're doing things.

从控制器文档，在测试控制器部分：

describe('myController function', function() {

  describe('myController', function() {
    var $scope;

    beforeEach(module('myApp'));

    beforeEach(inject(function($rootScope, $controller) {
      $scope = $rootScope.$new();
      $controller('MyController', {$scope: $scope});
    }));

    it("...");
  });
});

问1：这其中的大多的对我来说很有意义，但这里的东西我不太得到。据我所知， $控制器被抓的myController的一个实例，但它看起来像返回什么没有被保存或在任何地方使用，所以我唯一能想到的的是，我们抓住了控制器，以获得正确的 $范围对象吗？即使是看起来像它没有被保存在一个变量的任何地方，所以我仍然是如何工作的幕后有点困惑。我对如何模块（）作品同样的困惑，因为我们似乎在宣告，我们正在使用的模块，但不保存或使用任何其他地方。是否有缓存模块/控制器/范围幕后的东西，这样我们就不必手动或东西保存呢？

Question 1: This one mostly makes sense to me, but here's something I don't quite get. I understand that $controller is grabbing an instance of "MyController", but it looks like what is returned isn't being saved or used anywhere, so the only thing I can think of is that we grab that controller in order to get the correct $scope object? Even that seems like it isn't being saved in a variable anywhere, so I'm still a little confused on how this works behind the scenes. I had the same confusion about how module() works because we seem to be declaring which module we're using, but not saving or using it anywhere else. Is there something behind the scenes that caches the module/controller/scope so we don't have to save it manually or something?

下面是从单元测试文档另外一个例子：

Here's another example from the Unit Testing docs:

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('PasswordController', { $scope: $scope });
      $scope.password = 'longerthaneightchars';
      $scope.grade();
      expect($scope.strength).toEqual('strong');
    });
  });
});

问题2：在这里，在 beforeEach 函数它做下划线包装的东西。是不是只是让你可以保持整个相同的服务名称，而无需改变呢？

Question 2: Here in the beforeEach function it's doing the underscore wrapping thing. Is that just so that you can keep the same service name throughout without having to change it?

问题3：的它（）块，然后使用 $控制器做它的东西，的这个节省时间得到什么的 VAR控制器的但似乎仍然没有使用它超越了这一点。的等回到为什么它保存到一个变量？我能想到随便的唯一的事情是，你保存它如果你需要这里面再次使用它（）块，但他们只是在这个例子中没？

Question 3: The it() block then uses $controller to do its thing, this time saving what gets returned to var controller but seemingly still never using it beyond this point. So why save it to a variable? The only thing I can think of offhand is that you save it in case you need to use it again inside this it() block, but they just didn't in this example?

我一直在到处找一个很好的解释和我似乎无法找到一个。很抱歉，如果有我失去了一个愚蠢的解释，但我在一个时间紧缩，可以不花更多的时间纺纱我的车轮。

I've been looking all over for a good explanation and I can't seem to find one. Sorry if there's a silly explanation I'm missing, but I'm on a time crunch and can't spend any more time spinning my wheels.

推荐答案

1）调用模块（'对myApp'）会加载你的模块，本质上运行的所有模式功能（供应商，指令控制器）使它们提供的声明为您以后使用。这就是如何角调用$控制器（'myController的'）时，发现我的控制器。

1) Calling module(‘myApp’) will load your module, essentially running the declarations for all your mode functions (providers, directive, controllers) making them available for you to use later. thats how angular finds my Controller when calling $controller(‘myController’).

至于从$控制器返回控制器的引用，这取决于您的实现。如果你正在使用$范围，一旦控制器被实例化，你可以通过$范围内引用的功能。

As for a reference to the controller returned from $controller, it depends on your implementation. If you are using $scope, Once the controller is instantiated you can reference the functions via $scope.

在控制器...

$scope.cancel = function () {
   doStuff();
};

那么您的测试可以是这样的...

Then your test can look like this...

describe(’test Controller', function () {
  var scope;

  beforeEach(module(‘myApp'));

  beforeEach(inject(function ($rootScope, $controller) {
    scope = $rootScope.$new();
    $controller(‘myController', {
      $scope: scope
    });
  }));

  describe(’testing stuff', function () {
    it(’test cancel function', function () {
      scope.cancel();
      expect(...);
    });
  });
});

如果您使用的是controllerAs语法和'这'的控制器，可以在测试使用到控制器的参考...功能分配

If you are using controllerAs syntax and assigning functions to ‘this’ in the controller you can use a reference to the controller in your tests…

在控制器...

this.cancel = function () {
   doStuff();
};

那么您的测试可以是这样的...

Then your test can look like this...

describe(’test Controller', function () {
  var scope,
      controller;

  beforeEach(module(‘myApp'));

  beforeEach(inject(function ($rootScope, $controller) {
    scope = $rootScope.$new();
    controller = $controller(‘myController', {
      $scope: scope
    });
  }));

  describe(’testing stuff', function () {
    it(’test cancel function', function () {
      controller.cancel();
      expect(...);
    });
  });
});

2）是的，的 $控制器的是一个方便的以避免名称冲突;

2) Yes, the $controller is a convenience to avoid name collisions;

3）我认为是一个坏榜样，如果他们不使用它，他们不应该需要保存它。我preFER做我所有的测试设置在beforeEach（）。

3) I think thats a bad example, if they are not using it they shouldn’t need to save it. I prefer to do all my test setup in the beforeEach ().

这篇关于如何使用ngMock注入$控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！