javascript - Angular.js 单元测试不调用 $animate.enter 回调

Question

我写了一个指令，它将有条件地添加一个包装器元素，我在 Angular 的 ngIf 指令之后建模。该指令在生产环境中运行时效果很好，但在尝试添加单元测试时，$animate.enter 函数从不调用我的回调函数。这导致我所有的单元测试都在假设包装器不应该存在时失败。

我正在使用 Angular.js 版本 1.2.16 并为单元测试加载 ngMock 和 ngAnimate。代码触发了 ngAnimate enter 函数，但它永远不会触发回调。

可以查看代码here ，只需取消注释 appSpec.js 脚本标签，指令就不再有效。

现在有人知道如何在单元测试中触发 $animate.enter 来调用我的回调函数吗？

addWrapperIf.js

angular.module('myModule', ['ngAnimate'])

.directive('addWrapperIf', ['$animate', function($animate) {
  return {
    transclude: 'element',
    priority: 1000,
    restrict: 'A',
    compile: function (element, attr, transclude) {
      return function ($scope, $element, $attr) {
        var childElement, childScope;
        $scope.$watch($attr.addWrapperIf, function addWrapperIfWatchAction(value) {
          if (childElement) {
            $animate.leave(childElement);
            childElement = undefined;
          }
          if (childScope) {
            childScope.$destroy();
            childScope = undefined;
          }

          // add the wrapper
          if (value) {
            childScope = $scope.$new();
            transclude(childScope, function (clone) {
              childElement = clone
              $animate.enter(clone, $element.parent(), $element);
            });
          }
          // remove the wrapper
          else {
            childScope = $scope.$new();
            transclude(childScope, function (clone) {
              $animate.enter(clone, $element.parent(), $element, function() {
                childElement = clone.contents();
                clone.replaceWith(clone.contents());
              });
            });
          }
        });
      }
    }
  };
}]);

addWrapperIfSpec.js

var expect = chai.expect;

describe('addWrapperIf', function () {
  var $template;
  var $compile;
  var $scope;

  beforeEach(window.module('myModule'));

  beforeEach(inject(function(_$compile_, $rootScope){
    $compile = _$compile_;
    $scope = $rootScope.$new();
  }));

  function compileDirective(template) {
    $template = $compile(template)($scope)[0];
    $scope.$apply();
  }

  it('should output the correct values with default options', function() {

    compileDirective('<div add-wrapper-if="false"><span>child</span></div>');

    console.log($template); // <div add-wrapper-if="false"><span>child</span></div>
  });

});

Answer 1

所以我想出了你必须做什么。我深入研究了代码，发现在 ngAnimate 内部它将回调函数推送到 $$asyncCallback。 $$asyncCallback 有一个 flush 函数，它会调用推送到它上面的任何函数。要让 $animate.enter 触发回调，您必须将 $$asyncCallback 注入(inject)单元测试，然后调用 $$asyncCallback.flush()。然后这将运行您的回调函数。

你可以在这个 Plunker 中看到这个.