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

我从 this tutorial开始工作,并且有谷歌广告恶心,但我似乎无法得到似乎是一个简单的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甚至没有让我的日志输出.

我已经尝试过其他$动画功能,而且无处可去.帮帮我？

经过一些严肃的挖掘Angular的源代码之后,似乎是内部检查 areAnimationsAllowed,Angular用来确定是否早点中止动画.除此之外,它检查动画节点是$rootElement和文档正文的后代.

你有两个选择.

> Plunker.将动画的节点附加到$rootElement,并将$rootElement附加到正文.后者是必需的,因为ngMock实际上使用已分离的< div>来存根$rootElement.节点保存在内存中.例：

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);
});

> Plunker.不要使用$animate.addClass测试您的动画,而是使用较低级别的$$animateJs服务.角度使用它inside their own tests,我假设绕过上述检查.例：

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

如果您运行Plunkers并检查控制台,您应该看到您的“addClass触发”消息.我也加了几个断言.

这两个解决方案都是黑客和无证件的,如果你的addClass动画做异步的(我认为这样做),这两个解决方案都会变得越来越多.不幸的是,我找不到更好的方式来测试JS动画.在过去我实际上忽略了覆盖的动画代码,因为它很难测试.

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

相关文章