10
Tôi đoán tôi gặp sự cố di chuyển với angular-animate.js từ phiên bản 1.2 đến 1.3. Dưới đây là hình ảnh động của tôiLàm thế nào để hoạt hình thử nghiệm đồng bộ trong AngularJS 1.3.15?
'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, className, done) {
if(className === NG_HIDE_CLASS) {
element.hide().slideDown(done);
}
}
};
});
Synchronous kiểm tra
'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, className, done) {
debugger;alert(1);
animatedHide = true;
done();
},
removeClass: function(element, className, 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();
});
});
});
và spec Á hậu
<!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>
Khi tôi sử dụng góc-Animate 1.2.28 tất cả các bài kiểm tra được thông qua nhưng sau khi chuyển sang 1.3. 15 kiểm tra không thành công. Bây giờ, tôi đang cố gắng để điều tra sự khác biệt giữa hai phiên bản của angular-animate. Có lẽ, ai đó đã gặp rắc rối này. Cảm ơn tất cả các câu trả lời của bạn.
Kiểm tra không thành công như thế nào? Cảm ơn. – alecxe
@alecxe với thông báo này 'Mong đợi sai sự thật.' – BILL
Tôi không hoàn toàn chắc chắn như thế nào ngay cả những thử nghiệm ban đầu (khi nó làm việc) thử nghiệm các hình ảnh động thực sự. Dường như nó sẽ vượt qua ngay cả khi không có mã hoạt hình thực, và vì vậy chỉ kiểm tra mã trong bản thân bài kiểm tra, điều này có vẻ hơi vô nghĩa! (Tất nhiên nếu tôi sai, hãy sửa tôi ...) –