Jak synchronicznej animacji testu w AngularJS 1.3.15?

Zgaduję, że mam problem z migracją z anime-animate.js z wersji 1.2 do 1.3. Oto moja animacjaJak synchronicznej animacji testu w 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); 
       } 
      } 
     }; 
    });

synchronicznego Test

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

    }); 
});

i Spec Biegacz

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

Gdy używam kątowe-animate 1.2.28 wszystkie testy zakończyły się pomyślnie, ale po włączeniu do 1,3. 15 testów nie powiodło się. Teraz próbuję zbadać różnicę między dwiema wersjami animacji kątowej. Może ktoś miał takie kłopoty. Dziękuję wszystkim za odpowiedzi.

Źródło

2015-05-15 BILL

Jak kończy się test? Dzięki. – alecxe

@alecxe z tą wiadomością: "Oczekiwano, że będzie to prawda". – BILL

Nie jestem pewien, czy nawet oryginalny test (kiedy zadziałał) przetestował prawdziwą animację. Wygląda na to, że przejdzie on nawet bez prawdziwego kodu animacji, a więc tylko testuje kod w samym teście, co wydaje się nieco bezcelowe! (Oczywiście, jeśli się mylę, popraw mnie ...) –

przy próbie testu pracować zdałem sobie sprawę, że mogłem tylko:

użytku addClass i removeClass od $ animować do Dodaj/Usuń ng-hide klasę; użycie "ng-show" bezpośrednio nie zadziałało. Korzystając z tych metod, zdałem sobie sprawę, że metoda „removeClass” z obiektu zarejestrowanego jako animacji nigdy nie został powołany, te, które były nazywane były: „beforeAddClass” i „beforeRemoveClass”, więc zmieniłem że . Kiedy google o tym, znalazłem problem nieco związany: $animate.removeClass() doesn't work if addClass animation incomplete.
użycie rootScope zamiast zakresu (I nie mógł zrozumieć, dlaczego)

Po trochę więcej Znalazłem comment na emisję; wydaje się, że są pewne błędy z animacjami; komentarz sugeruje użycie differente wersje kątowej i kątowe-animować jak istnieje „kilka poprawek do ożywionej w rurociągu”. Tak więc próbuję i używam wersji aktualizacji (v1.4.0-build.4010 + sha.213c2a7) i teraz wydaje się działać lepiej ... Używanie dyrektywy ng-show działa teraz. (ale wciąż tylko przed wywołaniem metody AddClass i beforeRemoveClass i nie może uzyskać zasięgu do działania ...).

Nie sugeruję, abyś uaktualnił (nawet dlatego, że v.1.4.0 nie został jeszcze wydany) tylko wskazuje, że są problemy i błędy wokół tego tematu ...) Oto kod (z sugerowanymi wersjami 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(); 
    }); 
    }); 
});

zgadzam się również, że ten test nie jest testowanie kodu rzeczywistym animacji; może test e2e powinien być lepszy.

Oto kod za pomocą kątowego i kątowe-animate v1.3.15 i korzystania addClass i removeClass bezpośrednio:

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

Mam nadzieję, że to pomoże ... Dzięki.

Źródło

2015-05-22 14:54:51 jmmtcarvalho

Jak synchronicznej animacji testu w AngularJS 1.3.15?

Odpowiedz

Powiązane problemy