ngAnimate 1.4.7单元测试不调用动画功能

Question

我一直在使用这个教程并且谷歌搜索广告,但我似乎无法得到似乎是一个简单的ngAnimate单元测试运行.

我ngAnimate在应用程序中运作良好.所有Angular核心库都是1.4.7版.

模

angular.module 'MyAnimation', [ 'ngAnimate' ]
  .animation '.added-class', ->
    addClass: (element, className, done) ->
      console.log 'add class triggered'
      element.css 'opacity', '0.5'
      done()

测试

describe 'MyAnimation', ->
  beforeEach -> module 'ngAnimate'
  beforeEach -> module 'ngAnimateMock'
  beforeEach -> module 'MyAnimation'

  it 'animates', -> inject ($animate, $rootScope, $rootElement) ->
    $animate.enabled(true)
    divElement = angular.element '<div>my div</div>'

    # Kick off initial digest loop in which no animations are run.
    $rootScope.$digest()

    # Trigger animation.
    $animate.addClass divElement, 'added-class'
    $rootScope.$digest()

    # Tried this, doesn't seem to do anything.
    # $animate.flush()

    # Results in AssertionError: expected '' to equal '0.5'
    expect(divElement.css('opacity')).to.eq '0.5'

我确信该模块已包含在测试中,但触发$animate.enter甚至不能让我获得log输出.

我也尝试过其他$animate功能,而且无处可去.救命？

Answer 1

在对Angular的源代码进行了一些认真的挖掘后,看起来罪魁祸首是areAnimationsAllowedAngular用来确定是否提前中止动画的内部检查.除此之外,它还检查被动画化的节点是$rootElement文档主体的后代.

你有两个选择.

1. Plunker.将您正在设置动画的节点$rootElement附加$rootElement到主体并将其附加到主体.后者是必要的,因为ngMock实际上存在内存中$rootElement具有分离<div>节点的存根.例:

var element, body, root;
beforeEach(module('ngAnimate', 'ngAnimateMock', 'MyAnimation'));
beforeEach(inject(function ($animate, $document, $rootElement, $rootScope) {
  // enable animations globally
  $animate.enabled(true);

  // create a node to be animated and inject it into the DOM
  element = angular.element('<div></div>');
  root = $rootElement.append(element)[0];
  body = $document[0].body;
  body.appendChild(root);

  // trigger initial digest
  $rootScope.$digest();
}));
afterEach(function () {
  // clean up
  body.removeChild(root);
});

2. Plunker.不要使用测试动画$animate.addClass,而是使用较低级别的$$animateJs服务.Angular 在自己的测试中使用它,我假设绕过上面的检查.例:

it('should animate', inject(function ($animate, $$animateJs) {
  // trigger animation
  $$animateJs(element, 'addClass', {
    addClass: 'added-class'
  }).start();
  $animate.flush();
}));

如果您运行Plunkers并检查控制台,您应该看到"addClass triggered"消息.我还添加了几个断言.

这两个解决方案都是hacky和notocumented,如果你的addClass动画做了异步的事情(我认为它会),两者都会变得更加复杂.不幸的是,我找不到更好的方法来测试JS动画.在过去,我实际上忽略了覆盖范围内的动画代码,因为它很难测试.