我想我有一个迁移问题与角度animate.js从版本1.2到1.3.
这是我的动画
这是我的动画
'use strict';
angular.module('cookbook',['ngAnimate'])
.animation('.slide-down',function() {
var NG_HIDE_CLASS = 'ng-hide';
return {
beforeAddClass: function(element,className,done) {
alert('before add');
if(className === NG_HIDE_CLASS) {
element.slideUp(done);
}
},removeClass: function(element,done) {
if(className === NG_HIDE_CLASS) {
element.hide().slideDown(done);
}
}
};
});
同步测试
'use strict';
describe('A Brief Look At Testing Animations(changed) - ',function() {
var scope;
var element;
var $animate;
var $rootElement;
beforeEach(module('cookbook','ngAnimateMock'));
describe('Synchronous testing of animations',function() {
var animatedShow = false;
var animatedHide = false;
beforeEach(module(function($animateProvider) {
$animateProvider.register('.slide-down',function() {
return {
beforeAddClass: function(element,done) {
debugger;alert(1);
animatedHide = true;
done();
},done) {
animatedShow = true;
done();
}
};
});
}));
beforeEach(inject(function($injector) {
scope = $injector.get('$rootScope').$new();
$rootElement = $injector.get('$rootElement');
}));
beforeEach(inject(function($compile) {
element = angular.element('<div class="slide-down" ng-show="hint"></div>');
$compile(element)(scope);
scope.$digest();
$rootElement.append(element);
}));
it('should animate to show',function() {
scope.hint = true;
scope.$digest();
expect(animatedShow).toBeTruthy();
});
it('should animate to hide',function() {
scope.hint = true;
scope.$digest();
scope.hint = false;
scope.$digest();
expect(animatedHide).toBeTruthy();
});
});
});
和规格赛
<!DOCTYPE HTML>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Angular Spec Runner</title>
<link rel="shortcut icon" type="image/png" href="../../lib/jasmine-2.0.0/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="../../lib/jasmine-2.0.0/jasmine.css">
<script type="text/javascript" src="../../lib/jasmine-2.0.0/jasmine.js"></script>
<script type="text/javascript" src="../../lib/jasmine-2.0.0/jasmine-html.js"></script>
<script type="text/javascript" src="../../lib/jasmine-2.0.0/boot.js"></script>
<script type="text/javascript" src="../../lib/angular-1.2.28_/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../lib/angular-1.3.15/angular.js"></script>
<script type="text/javascript" src="../../lib/angular-1.3.15/angular-route.js"></script>
<script type="text/javascript" src="../../lib/angular-1.3.15/angular-ui-router.js"></script>
<script type="text/javascript" src="../../lib/angular-1.3.15/angular-mocks.js"></script>
<script type="text/javascript" src="../../lib/angular-1.2.28_/angular-animate.js"></script>
<!--DOESN'T WORK WITH 1.3.15-->
<!--<script type="text/javascript" src="../../lib/angular-1.3.15/angular-animate.js"></script>-->
<!-- include source files here... -->
<script type="text/javascript" src="../src/cookbook.js"></script>
<link rel="stylesheet" href="../src/styles.css">
<!-- include spec files here... -->
<script type="text/javascript" src="cookbookSpec.js"></script>
</head>
<body>
</body>
</html>
当我使用角度动画1.2.28时,所有的测试都会通过,但是在切换到1.3.15测试失败之后.现在,我正在调查两个版本的角动画之间的区别.也许有人有这个麻烦.感谢大家的答案.
解决方法
在试图让测试工作时,我意识到我只能：
>从$animate使用addClass和removeClass来添加/删除ng-hide类;直接用“ng-show”没用.当使用这些方法时,我意识到从注册为动画的对象中的方法“removeClass”从未被调用,被调用的方法是：“beforeAddClass”和“beforeRemoveClass”,所以我改变了这一点.当我谷歌关于它,我发现一个问题有点相关：$animate.removeClass() doesn’t work if addClass animation incomplete.
>使用rootScope而不是范围(我不明白为什么)
搜索一点以后,我发现这个comment在一个问题上;似乎有一些bug与动画;该评论建议使用角度和角度动画的不同版本,因为“流水线中有一些错误修正”.所以我尝试使用更新版本(v1.4.0-build.4010 sha.213c2a7),现在似乎工作更好…使用ng-show指令现在可以工作. (但是只有beforeAddClass和beforeRemoveClass才被调用,并且无法获取作用范围…).
我不是建议你升级(即使是因为v.1.4.0还没有发布),只是指出这个主题有问题和错误…)
这是代码(建议版本v1.4.0-build.4010)：
describe('animate',function() {
var scope,$animate,$rootElement,$compile,$rootscope;
describe('Synchronous testing of animations',function() {
var animatedShow = false;
var animatedHide = false;
beforeEach(module('cookbook',function( $animateProvider ) {
animatedShow = false;
animatedHide = false;
$animateProvider.register('.slide-down',function() {
return {
beforeAddClass: function( element,done ) {
animatedHide = true;
done();
},beforeRemoveClass: function( element,done ) {
animatedShow = true;
done();
}
};
});
}));
beforeEach(inject(function( _$injector_,_$animate_,_$compile_ ) {
$compile = _$compile_;
$animate = _$animate_;
$rootscope = _$injector_.get('$rootScope');
scope = _$injector_.get('$rootScope').$new();
$rootElement = _$injector_.get('$rootElement');
}));
it('should animate to hide',function() {
$rootscope.hint = true;
var el = $compile('<div class="slide-down" ng-show="hint"></div>')($rootscope);
$rootElement.append(el);
angular.element(document.body).append($rootElement);
$rootscope.$digest();
$rootscope.hint = false;
$rootscope.$digest();
expect(animatedHide).toBeTruthy();
});
it('should animate to show',function() {
$rootscope.hint = false;
var el = $compile('<div class="slide-down" ng-show="hint"></div>')($rootscope);
$rootElement.append(el);
angular.element(document.body).append($rootElement);
$rootscope.$digest();
$rootscope.hint = true;
$rootscope.$digest();
expect(animatedShow).toBeTruthy();
});
});
});
我也同意这个测试没有测试真正的动画代码;也许e2e测试应该更好.
这里是使用角度和角度动画v1.3.15的代码,直接使用addClass和removeClass：
//...the rest of code is identical
it('should animate to hide',function() {
var el = $compile('<div class="slide-down"></div>')($rootscope);
$rootElement.append(el);
angular.element(document.body).append($rootElement);
$rootscope.$digest();
$animate.addClass(el,'ng-hide');
$rootscope.$digest();
expect(animatedHide).toBeTruthy();
});
it('should animate to show',function() {
var el = $compile('<div class="slide-down ng-hide"></div>')($rootscope);
$rootElement.append(el);
angular.element(document.body).append($rootElement);
$rootscope.$digest();
$animate.removeClass(el,'ng-hide');
$rootscope.$digest();
expect(animatedShow).toBeTruthy();
});
//...
我希望这有助于…谢谢.