大佬教程收集整理的这篇文章主要介绍了angularjs – ngAnimate 1.4.7单元测试不调用动画功能,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有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甚至没有让我的日志输出.
我已经尝试过其他$动画功能,而且无处可去.帮帮我?
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单元测试不调用动画功能全部内容,希望文章能够帮你解决angularjs – ngAnimate 1.4.7单元测试不调用动画功能所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。