Come sincronizzare l'animazione di prova in AngularJS 1.3.15?

Immagino di avere un problema di migrazione con angular-animate.js dalla versione 1.2 alla 1.3. Ecco mia animazioneCome sincronizzare l'animazione di prova in 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); 
       } 
      } 
     }; 
    });

prova sincrono

'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(); 
     }); 

    }); 
});

e spec corridore

<!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>

Quando uso angolare-animate 1.2.28 tutte le prove vengono superate ma dopo il passaggio a 1.3. 15 test sono falliti. Ora, sto cercando di indagare la differenza tra due versioni di angolare-animate. Forse, qualcuno ha avuto questo problema. Grazie a tutti per le vostre risposte.

fonte

2015-05-15 BILL

Come si guasta il test? Grazie. – alecxe

@alecxe con questo messaggio 'Mi aspettavo che sia falso.» – BILL

Non sono abbastanza sicuro di come anche il test originale (quando ha funzionato) abbia testato la vera animazione. Sembra che passerebbe anche senza il vero codice di animazione, quindi verifica solo il codice nel test stesso, che sembra leggermente inutile! (Ovviamente se sbaglio, correggimi ...) –

Durante il tentativo di mettere alla prova al lavoro mi sono reso conto che avrei potuto solo:

uso addClass e removeClass da $ animano per aggiungere/rimuovere ng-pelle di classe; utilizzare "ng-show" direttamente non ha funzionato. Quando si utilizzano questi metodi mi sono reso conto che il metodo "removeClass" dall'oggetto registrato come l'animazione non è mai stato chiamato, quelli che sono stati chiamati furono: "beforeAddClass" e "beforeRemoveClass", così ho cambiato che . Quando ho google su di esso ho trovato un problema in qualche modo correlato: $animate.removeClass() doesn't work if addClass animation incomplete.
uso rootScope al posto del campo di applicazione (non riuscivo a capire perché)

Dopo la ricerca di un po 'di più ho trovato questo comment su un tema; sembra che ci siano alcuni bug con le animazioni; il commento suggerisce di utilizzare Differente versioni di angolare e angolare animare come ci sono "alcuni bugfix per animare in cantiere". Quindi provo e uso le versioni di aggiornamento (v1.4.0-build.4010 + sha.213c2a7) e ora sembra funzionare meglio ... L'uso della direttiva ng-show ora funziona. (ma ancora prima che vengano chiamati AddClass e BeforeRemoveClass e che non sia possibile ottenere l'ambito per funzionare ...).

Non sto suggerendo di eseguire l'aggiornamento (anche perché v.1.4.0 non è ancora stato rilasciato) solo indicando che ci sono problemi e bug intorno a questo argomento ...) Ecco il codice (con le versioni suggerite 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(); 
    }); 
    }); 
});

sono anche d'accordo che questo test non sta testando il codice vero e animazione; forse un test di e2e dovrebbe essere migliore.

Ecco il codice utilizzando angolare e angolare animare v1.3.15 e utilizzando addClass e removeClass direttamente:

//...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(); 
    }); 
    //...

Spero che questo aiuta ... Grazie.

fonte

2015-05-22 14:54:51 jmmtcarvalho

Come sincronizzare l'animazione di prova in AngularJS 1.3.15?

risposta

Problemi correlati