10

我正在尝试为嵌套的控制器编写单元测试，但无法弄清楚如何在我的测试中模拟相同的行为。

我有 2 个控制器：

function FirstController ($scope) {
    $scope.childs = [{
         title : 'Hello, earth!'
    }];
};

function SecondController ($scope) {
    $scope.child.title = $scope.child.title + $scope.$index;
};

在我的 HTML 中：

<div data-ng-controller="FirstController">
    <div data-ng-repeat="child in childs" data-ng-controller="SecondController">
        {{ child.title }}
    </div>
</div>

这按预期工作（http://jsfiddle.net/tcayp/1/）

单元测试：

// FirstController
it('Should have childs', function () {
    scope = {};
    ctrl = new FirstController(scope);
    expect(scope.childs.length).toBeGreaterThan(0);
});
// SecondController
it('Should have inherited a child', function () {
    scope = {};
    ctrl = new SecondController(scope);
    expect(scope.child.title).toEqual('Hello, earth!0');
});

在 SecondController-test 中，我无法弄清楚如何从 ng-repeat 模拟继承链。

4

3 回答 3

16

理想情况下，通过单元测试，我们希望单独测试类（单元）。在一次测试中测试 2 个控制器可能太多了：测试会变得更加复杂和脆弱。

仔细查看提供的示例，您可能会注意到它实际上不是测试 2 个控制器，而是确保数据在父范围内可用。因此，只关注一个控制器 ( SecondController) 和继承的数据将编写如下测试：

describe('Testing the SecondController controller', function() {

    var $parentScope, $scope, ctrl;
    it('should prepare title', inject(function($rootScope, $controller) {

        //setup hierarchy of scopes with data             
        $rootScope.childs = [{
            title : 'Hello, earth!'
        }];
        $scope = $rootScope.$new();
        $scope.$index = 1;

        ctrl = $controller('SecondController', {
            $scope: $scope
        });

        expect($scope.childs[0].title).toEqual('Hello, earth!1');        
    }));
});

这是完整的 jsFiddle：http: //jsfiddle.net/pkozlowski_opensource/h8xry/13/

我真的建议不要一起测试 2 个控制器，但只是为了回答这个问题，它也是可能的：

describe('Testing the SecondController controller', function() {

    it('should prepare title', inject(function($rootScope, $controller) {

        $controller('FirstController', {
            $scope: $rootScope
        });

        var $scope = $rootScope.$new();
        $scope.$index = 1;

        ctrl = $controller('SecondController', {
            $scope: $scope
        });

        expect($scope.childs[0].title).toEqual('Hello, earth!1');        
    }));
});

还有 jsFiddle：http: //jsfiddle.net/pkozlowski_opensource/4Qy6b/1/

于 2012-09-18T10:38:08.413 回答
2

AngularJS 文档建议通过实例化每个嵌套控制器并在它们之间建立与您的应用程序中相同的范围层次结构来测试嵌套控制器。这是有道理的，因为（在某种程度上）您希望在现实环境中测试您的控制器。

于 2015-01-22T22:53:23.870 回答
1

在您的测试中，使用新范围实例化父控制器：

mainScope = $rootScope.$new();
$controller('ParentController', {$scope: mainScope});

并在您的子控制器中，使用先前实例化的作用域实例化一个新作用域：

childScope = mainScope.$new();
$controller('ChildController', {$scope: childScope});

AngularJS 文档中的示例：

describe('state', function() {

  var mainScope, childScope, grandChildScope;

  beforeEach(module('myApp'));

  beforeEach(inject(function($rootScope, $controller) {
      mainScope = $rootScope.$new();
      $controller('MainController', {$scope: mainScope});
      childScope = mainScope.$new();
      $controller('ChildController', {$scope: childScope});
      grandChildScope = childScope.$new();
      $controller('GrandChildController', {$scope: grandChildScope});
  }));

  it('should have over and selected', function() {
      expect(mainScope.timeOfDay).toBe('morning');
      expect(mainScope.name).toBe('Nikki');
      expect(childScope.timeOfDay).toBe('morning');
      expect(childScope.name).toBe('Mattie');
      expect(grandChildScope.timeOfDay).toBe('evening');
      expect(grandChildScope.name).toBe('Gingerbread Baby');
    });
});
于 2016-06-29T17:13:07.553 回答