From 776bc3899975db5a0c849bc994d2783f06209fdf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Tue, 10 Apr 2018 15:10:29 -0700 Subject: [PATCH] test(animations): properly reference body node for SSR environments (#23300) PR Close #23300 --- .../browser/src/render/animation_engine_next.ts | 8 +++++--- .../src/render/timeline_animation_engine.ts | 4 +++- .../src/render/transition_animation_engine.ts | 8 +++++--- .../test/render/timeline_animation_engine_spec.ts | 14 ++++++++------ .../render/transition_animation_engine_spec.ts | 5 +++-- packages/core/test/render3/imported_renderer2.ts | 3 ++- packages/platform-browser/animations/BUILD.bazel | 1 + .../platform-browser/animations/src/providers.ts | 8 +++++--- 8 files changed, 32 insertions(+), 19 deletions(-) diff --git a/packages/animations/browser/src/render/animation_engine_next.ts b/packages/animations/browser/src/render/animation_engine_next.ts index abfdd91764..753d8b52ae 100644 --- a/packages/animations/browser/src/render/animation_engine_next.ts +++ b/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) { - this._transitionEngine = new TransitionAnimationEngine(_driver, normalizer); - this._timelineEngine = new TimelineAnimationEngine(_driver, normalizer); + constructor( + private bodyNode: any, private _driver: AnimationDriver, + 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); diff --git a/packages/animations/browser/src/render/timeline_animation_engine.ts b/packages/animations/browser/src/render/timeline_animation_engine.ts index dad8285e01..d83ad50223 100644 --- a/packages/animations/browser/src/render/timeline_animation_engine.ts +++ b/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[] = []; diff --git a/packages/animations/browser/src/render/transition_animation_engine.ts b/packages/animations/browser/src/render/transition_animation_engine.ts index d388ac1676..5c17d54c34 100644 --- a/packages/animations/browser/src/render/transition_animation_engine.ts +++ b/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); diff --git a/packages/animations/browser/test/render/timeline_animation_engine_spec.ts b/packages/animations/browser/test/render/timeline_animation_engine_spec.ts index a7c188133c..b947141633 100644 --- a/packages/animations/browser/test/render/timeline_animation_engine_spec.ts +++ b/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: '*'}), diff --git a/packages/animations/browser/test/render/transition_animation_engine_spec.ts b/packages/animations/browser/test/render/transition_animation_engine_spec.ts index ad6fc89fcd..8090f81e00 100644 --- a/packages/animations/browser/test/render/transition_animation_engine_spec.ts +++ b/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 = - new TransitionAnimationEngine(driver, normalizer || new NoopAnimationStyleNormalizer()); + const engine = new TransitionAnimationEngine( + getBodyNode(), driver, normalizer || new NoopAnimationStyleNormalizer()); engine.createNamespace(DEFAULT_NAMESPACE_ID, element); return engine; } diff --git a/packages/core/test/render3/imported_renderer2.ts b/packages/core/test/render3/imported_renderer2.ts index 30d25b5789..28873a5eea 100644 --- a/packages/core/test/render3/imported_renderer2.ts +++ b/packages/core/test/render3/imported_renderer2.ts @@ -42,7 +42,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); } diff --git a/packages/platform-browser/animations/BUILD.bazel b/packages/platform-browser/animations/BUILD.bazel index 9f9ac0ed72..efb6d45469 100644 --- a/packages/platform-browser/animations/BUILD.bazel +++ b/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", ], diff --git a/packages/platform-browser/animations/src/providers.ts b/packages/platform-browser/animations/src/providers.ts index fb3f995e33..4832287101 100644 --- a/packages/platform-browser/animations/src/providers.ts +++ b/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) { - super(driver, normalizer); + constructor( + @Inject(DOCUMENT) doc: any, driver: AnimationDriver, normalizer: AnimationStyleNormalizer) { + super(doc.body, driver, normalizer); } }