Wie synchrone Testanimation in AngularJS 1.3.15?

Ich vermute, ich habe ein Migrationsproblem mit angular-animate.js von Version 1.2 auf 1.3. Hier ist meine AnimationWie synchrone Testanimation 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); 
       } 
      } 
     }; 
    });

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

    }); 
});

und spec Läufer

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

Wenn ich Winkel belebte 1.2.28 alle Tests verwenden sind vergangen, aber nach 1,3 wechseln. 15 Tests sind fehlgeschlagen. Jetzt versuche ich den Unterschied zwischen zwei Versionen von angular-animate zu untersuchen. Vielleicht hatte jemand diese Schwierigkeiten. Vielen Dank für Ihre Antworten.

Quelle

2015-05-15 BILL

Wie schlägt der Test fehl? Vielen Dank. – alecxe

@alecxe mit dieser Nachricht 'Erwartete falsch, truthy zu sein. – BILL

Ich bin nicht ganz sicher, wie sogar der ursprüngliche Test (als es funktionierte) die reale Animation prüfte. Es sieht so aus, als würde es sogar ohne den echten Animationscode bestehen und testet daher nur den Code im Test selbst, was ein wenig sinnlos erscheint! (Natürlich, wenn ich falsch liege, bitte korrigieren Sie mich ...) –

Bei dem Versuch, den Test habe ich realisiert zu arbeiten nur, dass ich konnte:

Verwendung addClass und removeClass von $ animieren zum Hinzufügen/Entfernen ng-hide-Klasse; Verwenden Sie "ng-show" direkt hat nicht funktioniert. Wenn diese Methoden erkannte ich, dass die Methode „removeClass“ aus dem Objekt als Animation registriert wurde nie diejenigen genannt, die aufgerufen wurden, waren: „beforeAddClass“ und „beforeRemoveClass“, so änderte ich, dass . Als ich darüber google, habe ich ein Problem gefunden, das etwas verwandt ist: $animate.removeClass() doesn't work if addClass animation incomplete.
Verwendung rootScope statt Umfang (ich konnte nicht verstehen, warum)

Suche nach einem wenig mehr ich diese comment zu einem Thema gefunden; es scheint, dass es einige Bugs mit Animationen gibt; Kommentar schlägt differente Versionen von Winkel und Winkel animieren, da es „ein paar Fehlerbehebungen für belebter in der Pipeline“ zu verwenden. Also versuche ich es und verwende die Update-Versionen (v1.4.0-build.4010 + sha.213c2a7) und jetzt scheint es besser zu funktionieren ... Die Verwendung der ng-show-Anweisung funktioniert jetzt. (aber immer noch nur bevorAddClass und beforeRemoveClass aufgerufen werden und keinen Bereich für Arbeiten bekommen konnten ...).

Ich bin nicht darauf hindeutet, Sie aktualisieren nur (auch weil sich v.1.4.0 noch nicht erschienen) zeigt, dass es Probleme und Fehler, um dieses Thema ...) Hier ist der Code (mit den vorgeschlagenen Versionen 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(); 
    }); 
    }); 
});

ich stimme auch, dass dieser Test nicht die reale Animation Code testet; vielleicht sollte ein e2e-test besser sein.

Hier ist der Code unter Verwendung von Winkel- und Winkel belebtes v1.3.15 und mit addClass und removeClass direkt:

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

Ich hoffe, das hilft ... Danke.

Quelle

2015-05-22 14:54:51 jmmtcarvalho

Wie synchrone Testanimation in AngularJS 1.3.15?

Antwort

Verwandte Themen