angularjs - 使用 Karma 和 Jasmine 在 Angular JS 中测试父控制器范围的变量

Question

我在一个页面上有两个控制器。它们被“包装”在 HTML 标记上，一个是“父”，另一个是“子”，如下所示：

<div id="parent" ng-controller="parentController">
    <div id="child" ng-controller=childController">
    </div>
</div>

在我的控制器的 JS 文件中，我从“子”控制器中的“父”控制器引用了一个对象。

父控制器：

angular.module('myApp').controller('parentController', function($scope){
    $scope.myReferencedObject = {};
    $scope.myReferencedObject.someProperty = "hello world";
});

子控制器：

angular.module('myApp').controller('childController', function($scope){
    $scope.childControllerVariable = $scope.myReferencedObject.someProperty;
});

因为“子”控制器嵌套在“父”控制器中，所以来自父控制器的对象在子控制器中被继承。

这在 Karma 测试中不起作用，因为所有文件都被分解为单独的单元并单独测试。单元测试时，我的“子”控制器中的$scope.myReferencedObject.someProperty引用未定义，因为没有原型继承。

我如何在 Karma 中解决这个问题？

Answer 1

您可以在测试内部控制器时将 $scope 初始化为您想要的任何内容，这样您就可以模拟出父控制器在其上设置的内容

var controllerInstance;
beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    scope.myReferencedObject = {someProperty: 'hello world'}
    controllerInstance = $controller('childController', {
      $scope: scope
    });
}));

Answer 2

此代码适用于访问Parent 和 Child (With new scope object) Controller。

...

var childCtrl;
var parentCtrl;
var scope;

beforeEach(inject(function($rootScope, $controller) {
  scope = $rootScope.$new();
  // First - Parent
  parentCtrl = $controller('ParentCtrl', {$scope: scope});
  // Second - Child (also with new scope object)
  ChildCtrl = $controller('ChildCtrl', {$scope: scope});
}));

... 

describe("Testing Parent and Child Controller's Scope", function() {

  it('parentObj', function(){
    expect(scope.parentObj).toBeDefined();
  });

  it('childObj', function(){
    expect(scope.childObj).toBeDefined();
  });

  it('parentObj.newPropCreatedInChild', function(){
    expect(scope.parentObj.newPropCreatedInChild).toBeDefined();
  });

});