que - javascript jasmine example
¿Cómo se sincroniza la animación de prueba en AngularJS 1.3.15? (1)
Al intentar poner la prueba a funcionar, me di cuenta de que solo podía:
- utilice addClass y removeClass de $ animate para agregar / eliminar la clase ng-hide; usar "ng-show" directamente no funcionó. Al usar esos métodos me di cuenta de que el método "removeClass" del objeto registrado como la animación nunca se llamó, los que se llamaron fueron: " beforeAddClass " y " beforeRemoveClass ", así que cambié eso. Cuando busqué en Google, encontré un problema relacionado de alguna manera: $ animate.removeClass () no funciona si la animación addClass está incompleta .
- use rootScope en lugar de scope (no pude entender por qué)
Después de buscar un poco más encontré este comentario sobre un problema; parece que hay algunos errores con animaciones; el comentario sugiere usar diferentes versiones de ángulos y ángulos animados, ya que hay "algunas correcciones de errores para animar en la tubería". Así que lo intento y uso las versiones de actualización ( v1.4.0-build.4010 + sha.213c2a7 ) y ahora parece funcionar mejor ... Ahora funciona la directiva ng-show. (pero solo antes de llamar a AddClass y BeforeRemoveClass y no se pudo obtener alcance para las obras ...).
No estoy sugiriendo que actualice (incluso porque v.1.4.0 aún no se ha lanzado) simplemente señalando que hay problemas y errores en torno a este tema ...) Aquí está el código (con las versiones sugeridas 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, className, done ) {
animatedHide = true;
done();
},
beforeRemoveClass: function( element, className, 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();
});
});
});
También estoy de acuerdo en que esta prueba no está probando el código de animación real; tal vez una prueba e2e debería ser mejor.
Aquí está el código que usa v1.3.15 angular y angular-animado y usa addClass y removeClass directamente:
//...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();
});
//...
Espero que esto ayude ... Gracias.
Supongo que tengo un problema de migración con angular-animate.js de la versión 1.2 a la 1.3. Aquí está mi animación
''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);
}
}
};
});
Prueba síncrona
''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();
});
});
});
y corredor especifico
<!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>
Cuando uso angular-animate 1.2.28 todas las pruebas se pasan pero después de cambiar a 1.3.15 las pruebas fallan. Ahora, estoy tratando de investigar la diferencia entre dos versiones de angular-animate. Tal vez, alguien tuvo este problema. Gracias a todos por sus respuestas o comentarios.