javascript - 在 watch 中测试 Angular $viewContentLoaded

Question

有人可以指导我如何测试 Angular $viewContentLoaded。我的 Controller 中有一个 $watch。

我的相关 Controller 代码:

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

这是我的相关 Jasmine 规范:

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

$viewContentLoaded 事件仅在加载 DOM 时触发。因此，您需要通过为图片分配 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

Note:$viewContentLoaded event should be listen by placing listener over $scope like $scope.$on instead of putting watch over it.