Question

有人可以指导我如何测试角度$viewContentLoaded。我的控制器中有一个$watch。

我的相关控制器代码：

$scope.$watch('$viewContentLoaded', function() {
            $scope.variableOne= true;
        });

这是我的相关茉莉花规格：

describe('Testing $viewContentLoaded', function() {
           it('should be true', inject(function ($controller,$scope) {
               $controller('MainCtrl');

              // what to do to invoke $viewContentLoaded ???

              $scope.$digest();
              expect($scope.variableOne).toBe(true);
           }));
        });

Plunkr code

对此有任何帮助将不胜感激！

Answer 1

只有在加载DOM时才会触发

$viewContentLoaded事件。因此，您需要通过为其分配MainCtrl范围来将DOM放入图片中。

为此，我要说添加一个虚拟div并为其分配ng-controller="MainCtrl"。然后使用MainCtrl范围编译该div。因此，一旦你编译了那个div，在编译了那个div后，广播$viewContentLoaded将被监听者监听（这就是为什么虚拟DOM在这里很重要）。

<强>代码

var $scope;
describe('Testing $viewContentLoaded', function() {
  it('should be true', inject(function($controller, $rootScope, $compile) {
    $scope = $rootScope.$new();
    $controller('MainCtrl', {
      $scope: $scope
    });
    var div = '<div ng-controller="MainCtrl"></div>'
    $compile(div)($scope);
    $scope.$digest();
    expect($scope.variableOne).toBe(true);
  }));
});

Demo Here

注意： $viewContentLoaded事件应该通过将监听器置于$scope而不是$scope.$on而非监听它

Answer 2

你也可以这样做（假设你使用$ scope。$ on而不是$ watch for $ viewContentLoaded）：

$scope.$broadcast('$viewContentLoaded');

这可以防止加载任何DOM

编辑：（回答Basheer AL-MOMANI的问题）

因此，假设使用$scope.$on('$viewContentLoaded'代替$scope.$watch('$viewContentLoaded'，您可以在测试中调用$scope.$broadcast('$viewContentLoaded');。这样，就不需要加载任何DOM。

对于前。

在您的控制器中，您可以：

$scope.$on('$viewContentLoaded', function() {
  $scope.variableOne= true;
});

在您的规范中，您可以像这样测试它：

describe('Testing $viewContentLoaded', function() {
  it('should be true', inject(function ($controller, $rootScope) {
    var $scope = $rootScope.$new();
    $controller('MainCtrl', {
      $scope: $scope
    });
    $scope.$broadcast('$viewContentLoaded');
    expect($scope.variableOne).toBe(true);
  }));
});

在watch中测试angular的$ viewContentLoaded

2 个答案: