fix($animate): make animation onComplete callbacks async

Author: matsko

src/ngAnimate/animate.js

@@ -203,8 +203,8 @@ angular.module('ngAnimate', ['ng'])
     var NG_ANIMATE_STATE = '$$ngAnimateState';
     var rootAnimateState = {running:true};
 
-    $provide.decorator('$animate', ['$delegate', '$injector', '$sniffer', '$rootElement',
-      function($delegate, $injector, $sniffer, $rootElement) {
+    $provide.decorator('$animate', ['$delegate', '$injector', '$sniffer', '$rootElement', '$timeout',
+                            function($delegate,   $injector,   $sniffer,   $rootElement,   $timeout) {
 
       var noop = angular.noop;
       var forEach = angular.forEach;
@@ -463,7 +463,8 @@ angular.module('ngAnimate', ['ng'])
         if ((parent.inheritedData(NG_ANIMATE_STATE) || disabledAnimation).running) {
           //avoid calling done() since there is no need to remove any
           //data or className values since this happens earlier than that
-          (onComplete || noop)();
+          //and also use a timeout so that it won't be asynchronous
+          $timeout(onComplete || noop, 0, false);
           return;
         }
 

test/ngAnimate/animateSpec.js

@@ -32,12 +32,6 @@ describe("ngAnimate", function() {
 
     describe("enable / disable", function() {
 
-      beforeEach(function() {
-        module(function($animateProvider, $provide) {
-          $provide.value('$window', angular.mock.createMockWindow());
-        });
-      });
-
       it("should disable and enable the animations", function() {
         var $animate, initialState = null;
 
@@ -259,8 +253,8 @@ describe("ngAnimate", function() {
 
         $animate.removeClass(element, 'ng-hide');
         if($sniffer.transitions) {
-          $timeout.flushNext(1);
           $timeout.flushNext(0);
+          $timeout.flushNext(1);
         }
         $timeout.flushNext(0);
         expect(element.text()).toBe('memento');
@@ -510,7 +504,7 @@ describe("ngAnimate", function() {
         }));
 
         it("should skip animations if disabled and run when enabled",
-            inject(function($animate, $rootScope, $compile, $sniffer) {
+            inject(function($animate, $rootScope, $compile, $sniffer, $timeout) {
           $animate.enabled(false);
           var style = 'animation: some_animation 2s linear 0s 1 alternate;' +
                       vendorPrefix + 'animation: some_animation 2s linear 0s 1 alternate;'
@@ -519,6 +513,7 @@ describe("ngAnimate", function() {
           element.addClass('ng-hide');
           expect(element).toBeHidden();
           $animate.removeClass(element, 'ng-hide');
+          $timeout.flush();
           expect(element).toBeShown();
         }));
 
@@ -563,9 +558,9 @@ describe("ngAnimate", function() {
           element.addClass('ng-hide');
           expect(element).toBeHidden();
           $animate.removeClass(element, 'ng-hide');
-          expect(element).toBeShown();
-
           $timeout.flushNext(0);
+          $timeout.flushNext(0);
+          expect(element).toBeShown();
 
           $animate.enabled(true);
 
@@ -591,6 +586,7 @@ describe("ngAnimate", function() {
               $timeout.flushNext(1);
               $timeout.flushNext(2000);
             }
+            $timeout.flush();
             expect(element).toBeShown();
           }));
 
@@ -604,10 +600,10 @@ describe("ngAnimate", function() {
 
             element.addClass('ng-hide');
             $animate.removeClass(element, 'ng-hide');
+            $timeout.flushNext(0);
+            $timeout.flushNext(0);
             expect(element).toBeShown();
 
-            $timeout.flushNext(0); //callback which is called
-
             $animate.enabled(true);
 
             element.addClass('ng-hide');
@@ -618,7 +614,7 @@ describe("ngAnimate", function() {
               $timeout.flushNext(1);
               $timeout.flushNext(3000);
             }
-            $timeout.flushNext(0);
+            $timeout.flush();
             expect(element).toBeShown();
         }));
 

test/ngRoute/directive/ngViewSpec.js

@@ -6,7 +6,6 @@ describe('ngView', function() {
   beforeEach(module('ngRoute'));
 
   beforeEach(module(function($provide) {
-    $provide.value('$window', angular.mock.createMockWindow());
     return function($rootScope, $compile, $animate) {
       element = $compile('<div><ng:view onload="load()"></ng:view></div>')($rootScope);
     };
@@ -539,7 +538,6 @@ describe('ngView animations', function() {
 
 
   beforeEach(module(function($provide, $routeProvider) {
-    $provide.value('$window', angular.mock.createMockWindow());
     $routeProvider.when('/foo', {controller: noop, templateUrl: '/foo.html'});
     $routeProvider.when('/bar', {controller: noop, templateUrl: '/bar.html'});
     return function($templateCache) {
@@ -611,7 +609,6 @@ describe('ngView animations', function() {
 
     var window;
     module(function($routeProvider, $animateProvider, $provide) {
-      $provide.value('$window', window = angular.mock.createMockWindow());
       $routeProvider.when('/foo', {template: '<div ng-repeat="i in [1,2]">{{i}}</div>'});
       $routeProvider.when('/bar', {template: '<div ng-repeat="i in [3,4]">{{i}}</div>'});
       $animateProvider.register('.my-animation', function() {