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

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

这在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

此代码适用于访问父级和子级（使用新范围对象）控制器。

...

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

});

使用Karma和Jasmine在Angularjs中测试父控制器范围的变量

2 个答案: