fix(ngAnimate): correctly animate transcluded clones with templateUrl

Previously, `$animate` would decide whether an animation should be cancelled
based on some assumption that didn't hold in specific cases (e.g. when animating
transcluded clones with `templateUrl` directives on them for the first time). As
a result, the entering elements would not be animated. This affected commonly
used, structural built-in directives (`ngIf`, `ngRepeat`, `ngSwitch` etc).
This commit fixes it by avoiding invalid assumptions (i.e. by taking into
account the transformations that take place while compiling such elements).

Fixes angular#15510

Author: gkalpak

src/ngAnimate/animateQueue.js

@@ -302,13 +302,13 @@ var $$AnimateQueueProvider = ['$animateProvider', /** @this */ function($animate
 
     return $animate;
 
-    function queueAnimation(element, event, initialOptions) {
+    function queueAnimation(originalElement, event, initialOptions) {
       // we always make a copy of the options since
       // there should never be any side effects on
       // the input data when running `$animateCss`.
       var options = copy(initialOptions);
 
-      element = stripCommentsFromElement(element);
+      var element = stripCommentsFromElement(originalElement);
       var node = getDomNode(element);
       var parentNode = node && node.parentNode;
 
@@ -479,6 +479,15 @@ var $$AnimateQueueProvider = ['$animateProvider', /** @this */ function($animate
       markElementAnimationState(node, PRE_DIGEST_STATE, newAnimation);
 
       $rootScope.$$postDigest(function() {
+        // It is possible that the DOM nodes inside `originalElement` have been replaced. This can
+        // happen if the animated element is a transcluded clone and also has a `templateUrl`
+        // directive on it. Therefore, we must recreate `element` in order to interact with the
+        // actual DOM nodes.
+        // Note: We still need to use the old `node` for certain things, such as looking up in
+        //       HashMaps where it was used as the key.
+
+        element = stripCommentsFromElement(originalElement);
+
         var animationDetails = activeAnimationsLookup.get(node);
         var animationCancelled = !animationDetails;
         animationDetails = animationDetails || {};

test/ngAnimate/animateSpec.js

@@ -459,6 +459,26 @@ describe('animations', function() {
       expect(commentNode[0].parentNode).not.toBe(parentNode);
     }));
 
+    it('enter() should animate a transcluded clone with `templateUrl`', function() {
+      module(function($compileProvider) {
+        $compileProvider.directive('foo', valueFn({templateUrl: 'foo.html'}));
+      });
+
+      inject(function($animate, $compile, $rootScope, $templateCache) {
+        parent.append(jqLite('<foo ng-if="showFoo"></foo>'));
+        $templateCache.put('foo.html', '<div>FOO</div>');
+        $compile(parent)($rootScope);
+
+        expect(capturedAnimation).toBe(null);
+
+        $rootScope.$apply('showFoo = true');
+
+        expect(parent.text()).toBe('parentFOO');
+        expect(capturedAnimation[0].html()).toBe('<div>FOO</div>');
+        expect(capturedAnimation[1]).toBe('enter');
+      });
+    });
+
     it('enter() should issue an enter animation and fire the DOM operation right away before the animation kicks off', inject(function($animate, $rootScope) {
       expect(parent.children().length).toBe(0);
 
@@ -2437,15 +2457,13 @@ describe('animations', function() {
 
         return function($rootElement, $q, $animate, $$AnimateRunner, $document) {
           defaultFakeAnimationRunner = new $$AnimateRunner();
-          $animate.enabled(true);
 
           element = jqLite('<div class="element">element</div>');
           parent = jqLite('<div class="parent1">parent</div>');
           parent2 = jqLite('<div class="parent2">parent</div>');
 
           $rootElement.append(parent);
           $rootElement.append(parent2);
-          jqLite($document[0].body).append($rootElement);
         };
       }));