From 835e18709d28f546c5da350b061ddb5b7915c6aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matias=20Niemel=C3=A4?= <matias@yearofmoo.com>
Date: Thu, 23 Feb 2017 11:34:14 -0800
Subject: [PATCH] refactor(animations): always flush animations when inserting
 children

---
 .../src/render/animation_renderer.ts          |  2 +
 .../test/animation/animation_renderer_spec.ts | 43 ++++++++++++++++++-
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/modules/@angular/platform-browser/animations/src/render/animation_renderer.ts b/modules/@angular/platform-browser/animations/src/render/animation_renderer.ts
index 706ccb797a..d05e29a4e1 100644
--- a/modules/@angular/platform-browser/animations/src/render/animation_renderer.ts
+++ b/modules/@angular/platform-browser/animations/src/render/animation_renderer.ts
@@ -87,10 +87,12 @@ export class AnimationRenderer implements RendererV2 {
 
   appendChild(parent: any, newChild: any): void {
     this._engine.onInsert(newChild, () => this.delegate.appendChild(parent, newChild));
+    this._queueFlush();
   }
 
   insertBefore(parent: any, newChild: any, refChild: any): void {
     this._engine.onInsert(newChild, () => this.delegate.insertBefore(parent, newChild, refChild));
+    this._queueFlush();
   }
 
   removeChild(parent: any, oldChild: any): void {
diff --git a/modules/@angular/platform-browser/test/animation/animation_renderer_spec.ts b/modules/@angular/platform-browser/test/animation/animation_renderer_spec.ts
index 4e6f580e7e..77cfccc6ee 100644
--- a/modules/@angular/platform-browser/test/animation/animation_renderer_spec.ts
+++ b/modules/@angular/platform-browser/test/animation/animation_renderer_spec.ts
@@ -7,7 +7,7 @@
  */
 import {AnimationTriggerMetadata, animate, state, style, transition, trigger} from '@angular/animations';
 import {USE_VIEW_ENGINE} from '@angular/compiler/src/config';
-import {Component, Injectable, RendererFactoryV2, RendererTypeV2} from '@angular/core';
+import {Component, Injectable, RendererFactoryV2, RendererTypeV2, ViewChild} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {BrowserAnimationModule, ɵAnimationEngine, ɵAnimationRendererFactory} from '@angular/platform-browser/animations';
 
@@ -118,6 +118,9 @@ export function main() {
     });
 
     describe('flushing animations', () => {
+      // these tests are only mean't to be run within the DOM
+      if (typeof Element == 'undefined') return;
+
       beforeEach(() => {
         TestBed.configureCompiler(
             {useJit: true, providers: [{provide: USE_VIEW_ENGINE, useValue: true}]});
@@ -159,6 +162,44 @@ export function main() {
           async();
         });
       });
+
+      it('should properly insert/remove nodes through the animation renderer that do not contain animations',
+         (async) => {
+           @Component({
+             selector: 'my-cmp',
+             template: '<div #elm *ngIf="exp"></div>',
+             animations: [trigger(
+                 'someAnimation',
+                 [transition(
+                     '* => *', [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])],
+           })
+           class Cmp {
+             exp: any;
+             @ViewChild('elm') public element: any;
+           }
+
+           TestBed.configureTestingModule({
+             providers: [{provide: ɵAnimationEngine, useClass: InjectableAnimationEngine}],
+             declarations: [Cmp]
+           });
+
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+           cmp.exp = true;
+           fixture.detectChanges();
+
+           fixture.whenStable().then(() => {
+             cmp.exp = false;
+             const element = cmp.element;
+             expect(element.nativeElement.parentNode).toBeTruthy();
+
+             fixture.detectChanges();
+             fixture.whenStable().then(() => {
+               expect(element.nativeElement.parentNode).toBeFalsy();
+               async();
+             });
+           });
+         });
     });
   });
 }