test(animations): properly reference body node for SSR environments (#23300)

PR Close #23300

packages/animations/browser/src/render/animation_engine_next.ts

@@ -25,9 +25,11 @@ export class AnimationEngine {
   // this method is designed to be overridden by the code that uses this engine
   public onRemovalComplete = (element: any, context: any) => {};
 
-  constructor(private _driver: AnimationDriver, normalizer: AnimationStyleNormalizer) {
+  constructor(
-    this._transitionEngine = new TransitionAnimationEngine(_driver, normalizer);
+      private bodyNode: any, private _driver: AnimationDriver,
-    this._timelineEngine = new TimelineAnimationEngine(_driver, normalizer);
+      normalizer: AnimationStyleNormalizer) {
+    this._transitionEngine = new TransitionAnimationEngine(bodyNode, _driver, normalizer);
+    this._timelineEngine = new TimelineAnimationEngine(bodyNode, _driver, normalizer);
 
     this._transitionEngine.onRemovalComplete = (element: any, context: any) =>
         this.onRemovalComplete(element, context);

packages/animations/browser/src/render/timeline_animation_engine.ts

@@ -25,7 +25,9 @@ export class TimelineAnimationEngine {
   private _playersById: {[id: string]: AnimationPlayer} = {};
   public players: AnimationPlayer[] = [];
 
-  constructor(private _driver: AnimationDriver, private _normalizer: AnimationStyleNormalizer) {}
+  constructor(
+      public bodyNode: any, private _driver: AnimationDriver,
+      private _normalizer: AnimationStyleNormalizer) {}
 
   register(id: string, metadata: AnimationMetadata|AnimationMetadata[]) {
     const errors: any[] = [];

packages/animations/browser/src/render/transition_animation_engine.ts

@@ -16,7 +16,7 @@ import {AnimationStyleNormalizer} from '../dsl/style_normalization/animation_sty
 import {ENTER_CLASSNAME, LEAVE_CLASSNAME, NG_ANIMATING_CLASSNAME, NG_ANIMATING_SELECTOR, NG_TRIGGER_CLASSNAME, NG_TRIGGER_SELECTOR, copyObj, eraseStyles, iteratorToArray, setStyles} from '../util';
 
 import {AnimationDriver} from './animation_driver';
-import {getBodyNode, getOrSetAsInMap, listenOnPlayer, makeAnimationEvent, normalizeKeyframes, optimizeGroupPlayer} from './shared';
+import {getOrSetAsInMap, listenOnPlayer, makeAnimationEvent, normalizeKeyframes, optimizeGroupPlayer} from './shared';
 
 const QUEUED_CLASSNAME = 'ng-animate-queued';
 const QUEUED_SELECTOR = '.ng-animate-queued';
@@ -530,7 +530,9 @@ export class TransitionAnimationEngine {
   /** @internal */
   _onRemovalComplete(element: any, context: any) { this.onRemovalComplete(element, context); }
 
-  constructor(public driver: AnimationDriver, private _normalizer: AnimationStyleNormalizer) {}
+  constructor(
+      public bodyNode: any, public driver: AnimationDriver,
+      private _normalizer: AnimationStyleNormalizer) {}
 
   get queuedPlayers(): TransitionAnimationPlayer[] {
     const players: TransitionAnimationPlayer[] = [];
@@ -890,7 +892,7 @@ export class TransitionAnimationEngine {
       }
     });
 
-    const bodyNode = getBodyNode();
+    const bodyNode = this.bodyNode;
     const allTriggerElements = Array.from(this.statesByElement.keys());
     const enterNodeMap = buildRootMap(allTriggerElements, this.collectedEnterElements);
 

packages/animations/browser/test/render/timeline_animation_engine_spec.ts

@@ -9,15 +9,16 @@ import {AnimationMetadata, animate, style} from '@angular/animations';
 
 import {AnimationStyleNormalizer, NoopAnimationStyleNormalizer} from '../../src/dsl/style_normalization/animation_style_normalizer';
 import {AnimationDriver} from '../../src/render/animation_driver';
+import {getBodyNode} from '../../src/render/shared';
 import {TimelineAnimationEngine} from '../../src/render/timeline_animation_engine';
 import {MockAnimationDriver, MockAnimationPlayer} from '../../testing/src/mock_animation_driver';
 
 (function() {
   const defaultDriver = new MockAnimationDriver();
 
-  function makeEngine(driver?: AnimationDriver, normalizer?: AnimationStyleNormalizer) {
+  function makeEngine(body: any, driver?: AnimationDriver, normalizer?: AnimationStyleNormalizer) {
     return new TimelineAnimationEngine(
-        driver || defaultDriver, normalizer || new NoopAnimationStyleNormalizer());
+        body, driver || defaultDriver, normalizer || new NoopAnimationStyleNormalizer());
   }
 
   // these tests are only mean't to be run within the DOM
@@ -35,7 +36,7 @@ import {MockAnimationDriver, MockAnimationPlayer} from '../../testing/src/mock_a
     afterEach(() => document.body.removeChild(element));
 
     it('should animate a timeline', () => {
-      const engine = makeEngine();
+      const engine = makeEngine(getBodyNode());
       const steps = [style({height: 100}), animate(1000, style({height: 0}))];
       expect(MockAnimationDriver.log.length).toEqual(0);
       invokeAnimation(engine, element, steps);
@@ -43,7 +44,7 @@ import {MockAnimationDriver, MockAnimationPlayer} from '../../testing/src/mock_a
     });
 
     it('should not destroy timeline-based animations after they have finished', () => {
-      const engine = makeEngine();
+      const engine = makeEngine(getBodyNode());
 
       const log: string[] = [];
       function capture(value: string) {
@@ -66,7 +67,8 @@ import {MockAnimationDriver, MockAnimationPlayer} from '../../testing/src/mock_a
 
     it('should normalize the style values that are animateTransitioned within an a timeline animation',
        () => {
-         const engine = makeEngine(defaultDriver, new SuffixNormalizer('-normalized'));
+         const engine =
+             makeEngine(getBodyNode(), defaultDriver, new SuffixNormalizer('-normalized'));
 
          const steps = [
            style({width: '333px'}),
@@ -82,7 +84,7 @@ import {MockAnimationDriver, MockAnimationPlayer} from '../../testing/src/mock_a
 
     it('should normalize `*` values', () => {
       const driver = new SuperMockDriver();
-      const engine = makeEngine(driver);
+      const engine = makeEngine(getBodyNode(), driver);
 
       const steps = [
         style({width: '*'}),

packages/animations/browser/test/render/transition_animation_engine_spec.ts

@@ -11,6 +11,7 @@ import {TriggerAst} from '../../src/dsl/animation_ast';
 import {buildAnimationAst} from '../../src/dsl/animation_ast_builder';
 import {buildTrigger} from '../../src/dsl/animation_trigger';
 import {AnimationStyleNormalizer, NoopAnimationStyleNormalizer} from '../../src/dsl/style_normalization/animation_style_normalizer';
+import {getBodyNode} from '../../src/render/shared';
 import {TransitionAnimationEngine} from '../../src/render/transition_animation_engine';
 import {MockAnimationDriver, MockAnimationPlayer} from '../../testing/src/mock_animation_driver';
 
@@ -34,8 +35,8 @@ const DEFAULT_NAMESPACE_ID = 'id';
     afterEach(() => { document.body.removeChild(element); });
 
     function makeEngine(normalizer?: AnimationStyleNormalizer) {
-      const engine =
+      const engine = new TransitionAnimationEngine(
-          new TransitionAnimationEngine(driver, normalizer || new NoopAnimationStyleNormalizer());
+          getBodyNode(), driver, normalizer || new NoopAnimationStyleNormalizer());
       engine.createNamespace(DEFAULT_NAMESPACE_ID, element);
       return engine;
     }

packages/core/test/render3/imported_renderer2.ts

@@ -50,7 +50,8 @@ export function getAnimationRendererFactory2(document: any): RendererFactory2 {
   const fakeNgZone: NgZone = new NoopNgZone();
   return new ɵAnimationRendererFactory(
       getRendererFactory2(document),
-      new ɵAnimationEngine(new MockAnimationDriver(), new ɵNoopAnimationStyleNormalizer()),
+      new ɵAnimationEngine(
+          document.body, new MockAnimationDriver(), new ɵNoopAnimationStyleNormalizer()),
       fakeNgZone);
 }
 

packages/platform-browser/animations/BUILD.bazel

@@ -16,6 +16,7 @@ ng_module(
     deps = [
         "//packages/animations",
         "//packages/animations/browser",
+        "//packages/common",
         "//packages/core",
         "//packages/platform-browser",
     ],

packages/platform-browser/animations/src/providers.ts

@@ -8,7 +8,8 @@
 
 import {AnimationBuilder} from '@angular/animations';
 import {AnimationDriver, ɵAnimationEngine as AnimationEngine, ɵAnimationStyleNormalizer as AnimationStyleNormalizer, ɵCssKeyframesDriver as CssKeyframesDriver, ɵNoopAnimationDriver as NoopAnimationDriver, ɵWebAnimationsDriver as WebAnimationsDriver, ɵWebAnimationsStyleNormalizer as WebAnimationsStyleNormalizer, ɵsupportsWebAnimations as supportsWebAnimations} from '@angular/animations/browser';
-import {Injectable, InjectionToken, NgZone, Provider, RendererFactory2} from '@angular/core';
+import {DOCUMENT} from '@angular/common';
+import {Inject, Injectable, InjectionToken, NgZone, Provider, RendererFactory2} from '@angular/core';
 import {ɵDomRendererFactory2 as DomRendererFactory2} from '@angular/platform-browser';
 
 import {BrowserAnimationBuilder} from './animation_builder';
@@ -16,8 +17,9 @@ import {AnimationRendererFactory} from './animation_renderer';
 
 @Injectable()
 export class InjectableAnimationEngine extends AnimationEngine {
-  constructor(driver: AnimationDriver, normalizer: AnimationStyleNormalizer) {
+  constructor(
-    super(driver, normalizer);
+      @Inject(DOCUMENT) doc: any, driver: AnimationDriver, normalizer: AnimationStyleNormalizer) {
+    super(doc.body, driver, normalizer);
   }
 }