From cbfe44f85902e10f7a659ceeac4d4bf3812a9752 Mon Sep 17 00:00:00 2001
From: JoostK <joost.koehoorn@gmail.com>
Date: Sun, 22 Oct 2017 15:40:33 +0200
Subject: [PATCH] fix(animations): ensure consistent transition namespace
 ordering
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When including a component in a template, the component's host element
is immediately appended as child of the parent node upon creation.
Hence, `hostElement.parentNode` will be a valid reference. However, if
the parent component is being inserted as an embedded view—through
`ngIf` for example—then the parent's node itself will not have been
inserted yet. This means that we cannot properly determine the position
of the transition namespace, as any `containsElement` check will return
false given that the partial DOM tree has not been inserted yet, even
though it will be contained within an existing transition namespace once
the partial tree is attached.

This commit fixes the issue by not just looking at the existence of a
parent node, but rather a more extensive check using the driver's
`containsElement` method.
---
 .../src/render/transition_animation_engine.ts |  4 +-
 .../animation_query_integration_spec.ts       | 85 +++++++++++++++++++
 2 files changed, 87 insertions(+), 2 deletions(-)

diff --git a/packages/animations/browser/src/render/transition_animation_engine.ts b/packages/animations/browser/src/render/transition_animation_engine.ts
index d6f7547991803..807939a228d4a 100644
--- a/packages/animations/browser/src/render/transition_animation_engine.ts
+++ b/packages/animations/browser/src/render/transition_animation_engine.ts
@@ -571,7 +571,7 @@ export class TransitionAnimationEngine {
 
   createNamespace(namespaceId: string, hostElement: any) {
     const ns = new AnimationTransitionNamespace(namespaceId, hostElement, this);
-    if (hostElement.parentNode) {
+    if (this.bodyNode && this.driver.containsElement(this.bodyNode, hostElement)) {
       this._balanceNamespaceList(ns, hostElement);
     } else {
       // defer this later until flush during when the host element has
@@ -580,7 +580,7 @@ export class TransitionAnimationEngine {
       this.newHostElements.set(hostElement, ns);
 
       // given that this host element is apart of the animation code, it
-      // may or may not be inserted by a parent node that is an of an
+      // may or may not be inserted by a parent node that is of an
       // animation renderer type. If this happens then we can still have
       // access to this item when we query for :enter nodes. If the parent
       // is a renderer then the set data-structure will normalize the entry
diff --git a/packages/core/test/animation/animation_query_integration_spec.ts b/packages/core/test/animation/animation_query_integration_spec.ts
index 527fb0f58fe3b..ee403ec1daa41 100644
--- a/packages/core/test/animation/animation_query_integration_spec.ts
+++ b/packages/core/test/animation/animation_query_integration_spec.ts
@@ -2374,6 +2374,91 @@ describe('animation query tests', function() {
          ]);
        });
 
+    it(`should emulate a leave animation on a nested sub component's inner elements when a parent leave animation occurs with animateChild`,
+       () => {
+         @Component({
+           selector: 'ani-cmp',
+           template: `
+            <div @myAnimation *ngIf="exp" class="parent">
+              <child-cmp></child-cmp>
+            </div>
+          `,
+           animations: [
+             trigger(
+                 'myAnimation',
+                 [
+                   transition(
+                       ':leave',
+                       [
+                         query('@*', animateChild()),
+                       ]),
+                 ]),
+           ]
+         })
+         class ParentCmp {
+           public exp: boolean = true;
+         }
+
+         @Component({
+           selector: 'child-cmp',
+           template: `
+               <nested-child-cmp></nested-child-cmp>
+             `
+         })
+         class ChildCmp {
+         }
+
+         @Component({
+           selector: 'nested-child-cmp',
+           template: `
+               <section>
+                 <div class="inner-div" @myChildAnimation></div>
+               </section>
+             `,
+           animations: [
+             trigger(
+                 'myChildAnimation',
+                 [
+                   transition(
+                       ':leave',
+                       [
+                         style({opacity: 0}),
+                         animate('1s', style({opacity: 1})),
+                       ]),
+                 ]),
+           ]
+         })
+         class NestedChildCmp {
+         }
+
+         TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp, NestedChildCmp]});
+
+         const engine = TestBed.inject(ɵAnimationEngine);
+         const fixture = TestBed.createComponent(ParentCmp);
+         const cmp = fixture.componentInstance;
+
+         cmp.exp = true;
+         fixture.detectChanges();
+
+         cmp.exp = false;
+         fixture.detectChanges();
+
+         // Inspect the players of the AnimationEngine and not those from getLog. The latter only
+         // returns the actual animation players, which the parent leave animation is not part
+         // of given that it does not have animation instructions of its own.
+         const players = engine.players;
+         expect(players.length).toEqual(1);
+         const player = players[0] as TransitionAnimationPlayer;
+         const realPlayer = player.getRealPlayer() as MockAnimationPlayer;
+
+         expect(player.element.classList.contains('parent')).toBeTruthy();
+         expect(realPlayer.element.classList.contains('inner-div')).toBeTruthy();
+         expect(realPlayer.keyframes).toEqual([
+           {opacity: '0', offset: 0},
+           {opacity: '1', offset: 1},
+         ]);
+       });
+
     it('should not cause a removal of inner @trigger DOM nodes when a parent animation occurs',
        fakeAsync(() => {
          @Component({