test que karma example javascript angularjs tdd jasmine

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.