角UI的路由器测试范围内的继承 [英] Angular UI-Router testing scope inheritance

问题描述

我想写单元测试嵌套的状态。国家继承父状态的一些范围元素。在我的测试，我创建了控制器，它显然没有父状态的可见性，因此没有继承的范围项目的可见性。

I am trying to write units tests for a nested state. The state inherits some scope elements from the parent state. In my tests I am creating the controller, which obviously has no visibility of the parent state, and therefore no visibility of the inherited scope items.

it('should show the account page', inject(['$controller', 'security', function ($controller, security){
  // set up controller with a scope
  var $scope = $rootScope.$new();

  // the parent controller calls this
  var user = { first: 'First', last: 'Last', email: '[e-mail]', gender:'male', hasPassword:true};
  $httpBackend.when('GET', '/api/user/current-user').respond(200, user);
  $controller('AccountViewCtrl', { $scope: $scope});

  $rootScope.$digest();

  // verify the initial setup
  //scope attributes defined on the parent controller
  expect($scope.user).toEqual(user);
  expect($scope.account).toEqual(user);

  // scope attribute defined on the controller
  expect($scope.genders.length).toEqual(2);
  expect($scope.editable).toBe(false);
  expect($scope.editCheck()).toBe(false);
}]));

该AccountCtrl定义了一些被所有子状态所需的元素。

The AccountCtrl defines a number of elements needed by all child states.

.controller('AccountCtrl', ['$scope', 'security', function ($scope, security){
  $scope.user = security.requestCurrentUser();
  $scope.account = angular.copy($scope.user);
}])

的AccountViewCtrl定义其它元素，但继承父AccountCtrl

The AccountViewCtrl defines the other elements, but inherits the elements from the parent AccountCtrl

.controller('AccountViewCtrl', ['$scope', function ($scope) {
  $scope.editable = false;
  $scope.genders = [
    { name: 'Male', value: 'male' },
    { name: 'Female', value: 'female' }
  ];

  $scope.editCheck = function(){
    return $scope.editable;
  };

  ....
}])

的测试失败，因为我只实例化所述控制器，并且没有父状态和相关联的元件的可见度。是否有一个最佳实践的方法来测试UI路由器的状态？

The tests are failing as I am only instantiating the controller and there is no visibility of the parent state and associated elements. Is there a best practice approach to testing ui-router states?

推荐答案

范围继承是角的功能。因此，我认为没有必要在我的测试进行测试。

Scope inheritance is a feature of Angular. I therefore think that it is not necessary to test in my tests.

我的解决方法是测试该AccountCtrl工作，然后只是把值其它测试：

My workaround is to test that the AccountCtrl works and then just put the values in the other tests:

it("should set scope when account Ctrl loaded", inject(['$controller', 'security', function($controller, security){
  // Add your behavior testing code here
  var $scope = $rootScope.$new();
  var user = { first: 'First', last: 'Last', email: '[e-mail]', gender:'male', birthday:'password'};
  security.currentUser = user;
  $controller('AccountCtrl', { $scope: $scope});
  $rootScope.$digest();

  // verify the initial setup
  expect($scope.user).toEqual(user);
  expect($scope.account).toEqual(user);
}]));

然后在其他测试中，我手动填充值：

Then in the other tests I manually populate the values:

it('should set scope on account page', inject(['$controller', 'I18N.MESSAGES', function ($controller, i18nMessages){
  // set up controller with a scope
  var $scope = $rootScope.$new();
  var user = { first: 'First', last: 'Last', email: '[e-mail]', gender:'male', birthday:'password'};
  $scope.account = $scope.user = user;
  ...
}]));

这篇关于角UI的路由器测试范围内的继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！