AngularJS 1.3.15 में सिंक्रोनस परीक्षण एनीमेशन कैसे करें?

मुझे लगता है कि मेरे पास संस्करण 1.2 से 1.3 तक कोणीय-animate.js के साथ माइग्रेशन समस्या है। यहाँ मेरी एनीमेशन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); 
       } 
      } 
     }; 
    });

तुल्यकालिक परीक्षण

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

    }); 
});

और कल्पना धावक

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

जब मैं कोणीय-चेतन 1.2.28 सभी परीक्षणों पारित कर रहे हैं का उपयोग करें, लेकिन 1.3 छोड़ने के बाद भी है। 15 परीक्षण विफल रहे हैं। अब, मैं कोणीय-एनिमेट के दो संस्करणों के बीच अंतर की जांच करने की कोशिश कर रहा हूं। शायद, किसी को यह परेशानी थी। आपके जवाबों के लिए आप सभी का धन्यवाद।

स्रोत

2015-05-15 BILL

परीक्षण कैसे विफल हो जाता है? धन्यवाद। – alecxe

@alecxe इस संदेश के साथ 'सच्चाई होने के लिए अपेक्षित झूठ।' – BILL

मुझे पूरा यकीन नहीं है कि मूल परीक्षण (जब यह काम करता है) ने असली एनीमेशन का परीक्षण किया। ऐसा लगता है कि यह असली एनीमेशन कोड के बिना भी पास होगा, और इसलिए केवल परीक्षण में कोड का परीक्षण करता है, जो थोड़ा व्यर्थ लगता है! (बेशक अगर मैं गलत हूं तो कृपया मुझे सही करें ...) –

मैंने महसूस किया कि मैं केवल सकता है काम करने के लिए परीक्षण डाल करने के लिए प्रयास करते समय:

उपयोग addClass और removeClass $ से/निकालें एनजी-हाइड वर्ग को जोड़ने के लिए चेतन; "एनजी-शो" का उपयोग सीधे काम नहीं किया। जब उन तरीकों का उपयोग मैंने महसूस किया कि विधि "removeClass" एनीमेशन के रूप में पंजीकृत वस्तु से कभी नहीं बुलाया गया था, जो कि कहा जाता था थे: "beforeAddClass" और "beforeRemoveClass", तो मैं कुछ बदल । जब मैं इसके बारे में Google हूं तो मुझे कुछ हद तक संबंधित समस्या मिली: $animate.removeClass() doesn't work if addClass animation incomplete।
गुंजाइश के बजाय उपयोग rootScope

के बाद थोड़ा और मैं एक मुद्दे पर इस comment पाया खोज (मैं क्यों नहीं समझ सकते हैं); ऐसा लगता है कि एनिमेशन के साथ कुछ बग हैं; टिप्पणी कोणीय और की differente संस्करण का उपयोग करें कोणीय-चेतन के रूप में देखते हैं "पाइप लाइन में चेतन के लिए कुछ bugfixes" पता चलता है। तो मैं इसे एक कोशिश करता हूं और अद्यतन संस्करणों का उपयोग करता हूं (v1.4.0-build.4010 + sha.213c2a7) और अब यह बेहतर काम करता प्रतीत होता है ... एनजी-शो निर्देश का उपयोग अब काम करता है। (लेकिन अभी भी एडक्लस से पहले और पहले RemoveClass कहा जाता है और काम करने के लिए गुंजाइश नहीं मिल सका ...)।

मैं तुम्हें उन्नत करने के लिए (यहां तक कि क्योंकि v.1.4.0 अभी तक जारी नहीं किया गया है) बस ओर इशारा करते हुए मुद्दों और कीड़े इस विषय के आसपास देखते हैं कि सुझाव दे नहीं कर रहा हूँ ...) यहाँ कोड (सुझाव संस्करणों साथ है 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(); 
    }); 
    }); 
});

मैं भी मानता हूँ कि इस परीक्षण के वास्तविक एनीमेशन कोड का परीक्षण नहीं किया गया है; शायद एक ई 2 टेस्ट बेहतर होना चाहिए।

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

मुझे आशा है कि इस मदद करता है ... धन्यवाद:

यहाँ कोणीय और कोणीय-चेतन v1.3.15 का उपयोग करने और addClass और का उपयोग कर removeClass सीधे कोड है।

स्रोत

2015-05-22 14:54:51 jmmtcarvalho

AngularJS 1.3.15 में सिंक्रोनस परीक्षण एनीमेशन कैसे करें?

उत्तर

संबंधित मुद्दे