diff --git a/packages/platform-browser/animations/src/animation_builder.ts b/packages/platform-browser/animations/src/animation_builder.ts index 030fb70d01..f0022d711d 100644 --- a/packages/platform-browser/animations/src/animation_builder.ts +++ b/packages/platform-browser/animations/src/animation_builder.ts @@ -5,7 +5,7 @@ * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ -import {AnimationBuilder, AnimationFactory, AnimationMetadata, AnimationOptions, AnimationPlayer, NoopAnimationPlayer, sequence} from '@angular/animations'; +import {AnimationBuilder, AnimationFactory, AnimationMetadata, AnimationOptions, AnimationPlayer, sequence} from '@angular/animations'; import {Inject, Injectable, RendererFactory2, RendererType2, ViewEncapsulation} from '@angular/core'; import {DOCUMENT} from '@angular/platform-browser'; diff --git a/packages/platform-browser/animations/src/private_export.ts b/packages/platform-browser/animations/src/private_export.ts index b37f0e7b95..6fa71c7374 100644 --- a/packages/platform-browser/animations/src/private_export.ts +++ b/packages/platform-browser/animations/src/private_export.ts @@ -7,3 +7,4 @@ */ export {BrowserAnimationBuilder as ɵBrowserAnimationBuilder, BrowserAnimationFactory as ɵBrowserAnimationFactory} from './animation_builder'; export {AnimationRenderer as ɵAnimationRenderer, AnimationRendererFactory as ɵAnimationRendererFactory} from './animation_renderer'; +export {InjectableAnimationEngine as ɵInjectableAnimationEngine} from './providers'; diff --git a/packages/platform-browser/animations/test/BUILD.bazel b/packages/platform-browser/animations/test/BUILD.bazel index bfdf080eb2..a92acc09be 100644 --- a/packages/platform-browser/animations/test/BUILD.bazel +++ b/packages/platform-browser/animations/test/BUILD.bazel @@ -17,6 +17,7 @@ ts_library( "//packages/platform-browser-dynamic", "//packages/platform-browser/animations", "//packages/platform-browser/testing", + "//packages/private/testing", "@rxjs", ], ) @@ -24,9 +25,6 @@ ts_library( jasmine_node_test( name = "test", bootstrap = ["angular/tools/testing/init_node_spec.js"], - tags = [ - "fixme-ivy-aot", - ], deps = [ ":test_lib", "//tools/testing:node", @@ -35,9 +33,6 @@ jasmine_node_test( ts_web_test_suite( name = "test_web", - tags = [ - "fixme-ivy-aot", - ], deps = [ ":test_lib", ], diff --git a/packages/platform-browser/animations/test/animation_renderer_spec.ts b/packages/platform-browser/animations/test/animation_renderer_spec.ts index 0b46f11f6a..966684a649 100644 --- a/packages/platform-browser/animations/test/animation_renderer_spec.ts +++ b/packages/platform-browser/animations/test/animation_renderer_spec.ts @@ -9,11 +9,11 @@ import {AnimationPlayer, AnimationTriggerMetadata, animate, state, style, transi import {ɵAnimationEngine as AnimationEngine} from '@angular/animations/browser'; import {Component, Injectable, NgZone, RendererFactory2, RendererType2, ViewChild} from '@angular/core'; import {TestBed} from '@angular/core/testing'; -import {BrowserAnimationsModule, ɵAnimationRendererFactory as AnimationRendererFactory} from '@angular/platform-browser/animations'; +import {BrowserAnimationsModule, ɵAnimationRendererFactory as AnimationRendererFactory, ɵInjectableAnimationEngine as InjectableAnimationEngine} from '@angular/platform-browser/animations'; import {DomRendererFactory2} from '@angular/platform-browser/src/dom/dom_renderer'; +import {fixmeIvy} from '@angular/private/testing'; import {el} from '../../testing/src/browser_util'; -import {InjectableAnimationEngine} from '../src/providers'; (function() { if (isNode) return; @@ -120,42 +120,44 @@ import {InjectableAnimationEngine} from '../src/providers'; // these tests are only mean't to be run within the DOM if (isNode) return; - it('should flush and fire callbacks when the zone becomes stable', (async) => { - @Component({ - selector: 'my-cmp', - template: '
', - animations: [trigger( - 'myAnimation', - [transition( - '* => state', - [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])], - }) - class Cmp { - exp: any; - event: any; - onStart(event: any) { this.event = event; } - } + fixmeIvy( + `FW-643: Components with animations throw with "Failed to execute 'setAttribute' on 'Element'`) && + it('should flush and fire callbacks when the zone becomes stable', (async) => { + @Component({ + selector: 'my-cmp', + template: '', + animations: [trigger( + 'myAnimation', + [transition( + '* => state', + [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])], + }) + class Cmp { + exp: any; + event: any; + onStart(event: any) { this.event = event; } + } - TestBed.configureTestingModule({ - providers: [{provide: AnimationEngine, useClass: InjectableAnimationEngine}], - declarations: [Cmp] - }); + TestBed.configureTestingModule({ + providers: [{provide: AnimationEngine, useClass: InjectableAnimationEngine}], + declarations: [Cmp] + }); - const engine = TestBed.get(AnimationEngine); - const fixture = TestBed.createComponent(Cmp); - const cmp = fixture.componentInstance; - cmp.exp = 'state'; - fixture.detectChanges(); - fixture.whenStable().then(() => { - expect(cmp.event.triggerName).toEqual('myAnimation'); - expect(cmp.event.phaseName).toEqual('start'); - cmp.event = null; + const engine = TestBed.get(AnimationEngine); + const fixture = TestBed.createComponent(Cmp); + const cmp = fixture.componentInstance; + cmp.exp = 'state'; + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(cmp.event.triggerName).toEqual('myAnimation'); + expect(cmp.event.phaseName).toEqual('start'); + cmp.event = null; - engine.flush(); - expect(cmp.event).toBeFalsy(); - async(); - }); - }); + engine.flush(); + expect(cmp.event).toBeFalsy(); + async(); + }); + }); it('should properly insert/remove nodes through the animation renderer that do not contain animations', (async) => { @@ -195,75 +197,77 @@ import {InjectableAnimationEngine} from '../src/providers'; }); }); - it('should only queue up dom removals if the element itself contains a valid leave animation', - () => { - @Component({ - selector: 'my-cmp', - template: ` + fixmeIvy( + `FW-643: Components with animations throw with "Failed to execute 'setAttribute' on 'Element'`) && + it('should only queue up dom removals if the element itself contains a valid leave animation', + () => { + @Component({ + selector: 'my-cmp', + template: ` `, - animations: [ - trigger('animation1', [transition('a => b', [])]), - trigger('animation2', [transition(':leave', [])]), - ] - }) - class Cmp { - exp1: any = true; - exp2: any = true; - exp3: any = true; + animations: [ + trigger('animation1', [transition('a => b', [])]), + trigger('animation2', [transition(':leave', [])]), + ] + }) + class Cmp { + exp1: any = true; + exp2: any = true; + exp3: any = true; - @ViewChild('elm1') public elm1: any; + @ViewChild('elm1') public elm1: any; - @ViewChild('elm2') public elm2: any; + @ViewChild('elm2') public elm2: any; - @ViewChild('elm3') public elm3: any; - } + @ViewChild('elm3') public elm3: any; + } - TestBed.configureTestingModule({ - providers: [{provide: AnimationEngine, useClass: InjectableAnimationEngine}], - declarations: [Cmp] - }); + TestBed.configureTestingModule({ + providers: [{provide: AnimationEngine, useClass: InjectableAnimationEngine}], + declarations: [Cmp] + }); - const engine = TestBed.get(AnimationEngine); - const fixture = TestBed.createComponent(Cmp); - const cmp = fixture.componentInstance; + const engine = TestBed.get(AnimationEngine); + const fixture = TestBed.createComponent(Cmp); + const cmp = fixture.componentInstance; - fixture.detectChanges(); - const elm1 = cmp.elm1; - const elm2 = cmp.elm2; - const elm3 = cmp.elm3; - assertHasParent(elm1); - assertHasParent(elm2); - assertHasParent(elm3); - engine.flush(); - finishPlayers(engine.players); + fixture.detectChanges(); + const elm1 = cmp.elm1; + const elm2 = cmp.elm2; + const elm3 = cmp.elm3; + assertHasParent(elm1); + assertHasParent(elm2); + assertHasParent(elm3); + engine.flush(); + finishPlayers(engine.players); - cmp.exp1 = false; - fixture.detectChanges(); - assertHasParent(elm1, false); - assertHasParent(elm2); - assertHasParent(elm3); - engine.flush(); - expect(engine.players.length).toEqual(0); + cmp.exp1 = false; + fixture.detectChanges(); + assertHasParent(elm1, false); + assertHasParent(elm2); + assertHasParent(elm3); + engine.flush(); + expect(engine.players.length).toEqual(0); - cmp.exp2 = false; - fixture.detectChanges(); - assertHasParent(elm1, false); - assertHasParent(elm2, false); - assertHasParent(elm3); - engine.flush(); - expect(engine.players.length).toEqual(0); + cmp.exp2 = false; + fixture.detectChanges(); + assertHasParent(elm1, false); + assertHasParent(elm2, false); + assertHasParent(elm3); + engine.flush(); + expect(engine.players.length).toEqual(0); - cmp.exp3 = false; - fixture.detectChanges(); - assertHasParent(elm1, false); - assertHasParent(elm2, false); - assertHasParent(elm3); - engine.flush(); - expect(engine.players.length).toEqual(1); - }); + cmp.exp3 = false; + fixture.detectChanges(); + assertHasParent(elm1, false); + assertHasParent(elm2, false); + assertHasParent(elm3); + engine.flush(); + expect(engine.players.length).toEqual(1); + }); }); }); @@ -279,35 +283,37 @@ import {InjectableAnimationEngine} from '../src/providers'; }); }); - it('should provide hooks at the start and end of change detection', () => { - @Component({ - selector: 'my-cmp', - template: ` + fixmeIvy( + `FW-643: Components with animations throw with "Failed to execute 'setAttribute' on 'Element'`) && + it('should provide hooks at the start and end of change detection', () => { + @Component({ + selector: 'my-cmp', + template: ` `, - animations: [trigger('myAnimation', [])] - }) - class Cmp { - public exp: any; - } + animations: [trigger('myAnimation', [])] + }) + class Cmp { + public exp: any; + } - TestBed.configureTestingModule({ - providers: [{provide: AnimationEngine, useClass: InjectableAnimationEngine}], - declarations: [Cmp] - }); + TestBed.configureTestingModule({ + providers: [{provide: AnimationEngine, useClass: InjectableAnimationEngine}], + declarations: [Cmp] + }); - const renderer = TestBed.get(RendererFactory2) as ExtendedAnimationRendererFactory; - const fixture = TestBed.createComponent(Cmp); - const cmp = fixture.componentInstance; + const renderer = TestBed.get(RendererFactory2) as ExtendedAnimationRendererFactory; + const fixture = TestBed.createComponent(Cmp); + const cmp = fixture.componentInstance; - renderer.log = []; - fixture.detectChanges(); - expect(renderer.log).toEqual(['begin', 'end']); + renderer.log = []; + fixture.detectChanges(); + expect(renderer.log).toEqual(['begin', 'end']); - renderer.log = []; - fixture.detectChanges(); - expect(renderer.log).toEqual(['begin', 'end']); - }); + renderer.log = []; + fixture.detectChanges(); + expect(renderer.log).toEqual(['begin', 'end']); + }); }); })(); diff --git a/packages/platform-browser/animations/test/browser_animation_builder_spec.ts b/packages/platform-browser/animations/test/browser_animation_builder_spec.ts index 49c2b53222..38535fcda5 100644 --- a/packages/platform-browser/animations/test/browser_animation_builder_spec.ts +++ b/packages/platform-browser/animations/test/browser_animation_builder_spec.ts @@ -10,10 +10,9 @@ import {AnimationDriver} from '@angular/animations/browser'; import {MockAnimationDriver} from '@angular/animations/browser/testing'; import {Component, ViewChild} from '@angular/core'; import {TestBed, fakeAsync, flushMicrotasks} from '@angular/core/testing'; -import {NoopAnimationsModule} from '@angular/platform-browser/animations'; +import {NoopAnimationsModule, ɵBrowserAnimationBuilder as BrowserAnimationBuilder} from '@angular/platform-browser/animations'; import {el} from '../../testing/src/browser_util'; -import {BrowserAnimationBuilder} from '../src/animation_builder'; { describe('BrowserAnimationBuilder', () => { diff --git a/packages/platform-browser/animations/test/noop_animations_module_spec.ts b/packages/platform-browser/animations/test/noop_animations_module_spec.ts index bb9bb8f76a..80c1d65948 100644 --- a/packages/platform-browser/animations/test/noop_animations_module_spec.ts +++ b/packages/platform-browser/animations/test/noop_animations_module_spec.ts @@ -9,88 +9,97 @@ import {animate, style, transition, trigger} from '@angular/animations'; import {ɵAnimationEngine} from '@angular/animations/browser'; import {Component} from '@angular/core'; import {TestBed} from '@angular/core/testing'; - -import {NoopAnimationsModule} from '../src/module'; +import {NoopAnimationsModule} from '@angular/platform-browser/animations'; +import {fixmeIvy} from '@angular/private/testing'; { describe('NoopAnimationsModule', () => { beforeEach(() => { TestBed.configureTestingModule({imports: [NoopAnimationsModule]}); }); - it('should flush and fire callbacks when the zone becomes stable', (async) => { - @Component({ - selector: 'my-cmp', - template: - '', - animations: [trigger( - 'myAnimation', - [transition( - '* => state', [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])], - }) - class Cmp { - exp: any; - startEvent: any; - doneEvent: any; - onStart(event: any) { this.startEvent = event; } - onDone(event: any) { this.doneEvent = event; } - } + it('should be removed once FW-643 is fixed', () => { expect(true).toBeTruthy(); }); - TestBed.configureTestingModule({declarations: [Cmp]}); + // TODO: remove the dummy test above ^ once the bug FW-643 has been fixed + fixmeIvy( + `FW-643: Components with animations throw with "Failed to execute 'setAttribute' on 'Element'`) && + it('should flush and fire callbacks when the zone becomes stable', (async) => { + @Component({ + selector: 'my-cmp', + template: + '', + animations: [trigger( + 'myAnimation', + [transition( + '* => state', + [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])], + }) + class Cmp { + exp: any; + startEvent: any; + doneEvent: any; + onStart(event: any) { this.startEvent = event; } + onDone(event: any) { this.doneEvent = event; } + } - const fixture = TestBed.createComponent(Cmp); - const cmp = fixture.componentInstance; - cmp.exp = 'state'; - fixture.detectChanges(); - fixture.whenStable().then(() => { - expect(cmp.startEvent.triggerName).toEqual('myAnimation'); - expect(cmp.startEvent.phaseName).toEqual('start'); - expect(cmp.doneEvent.triggerName).toEqual('myAnimation'); - expect(cmp.doneEvent.phaseName).toEqual('done'); - async(); - }); - }); + TestBed.configureTestingModule({declarations: [Cmp]}); - it('should handle leave animation callbacks even if the element is destroyed in the process', - (async) => { - @Component({ - selector: 'my-cmp', - template: - '', - animations: [trigger( - 'myAnimation', - [transition( - ':leave', [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])], - }) - class Cmp { - exp: any; - startEvent: any; - doneEvent: any; - onStart(event: any) { this.startEvent = event; } - onDone(event: any) { this.doneEvent = event; } - } + const fixture = TestBed.createComponent(Cmp); + const cmp = fixture.componentInstance; + cmp.exp = 'state'; + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(cmp.startEvent.triggerName).toEqual('myAnimation'); + expect(cmp.startEvent.phaseName).toEqual('start'); + expect(cmp.doneEvent.triggerName).toEqual('myAnimation'); + expect(cmp.doneEvent.phaseName).toEqual('done'); + async(); + }); + }); - TestBed.configureTestingModule({declarations: [Cmp]}); - const engine = TestBed.get(ɵAnimationEngine); - const fixture = TestBed.createComponent(Cmp); - const cmp = fixture.componentInstance; + fixmeIvy( + `FW-643: Components with animations throw with "Failed to execute 'setAttribute' on 'Element'`) && + it('should handle leave animation callbacks even if the element is destroyed in the process', + (async) => { + @Component({ + selector: 'my-cmp', + template: + '', + animations: [trigger( + 'myAnimation', + [transition( + ':leave', + [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])], + }) + class Cmp { + exp: any; + startEvent: any; + doneEvent: any; + onStart(event: any) { this.startEvent = event; } + onDone(event: any) { this.doneEvent = event; } + } - cmp.exp = true; - fixture.detectChanges(); - fixture.whenStable().then(() => { - cmp.startEvent = null; - cmp.doneEvent = null; + TestBed.configureTestingModule({declarations: [Cmp]}); + const engine = TestBed.get(ɵAnimationEngine); + const fixture = TestBed.createComponent(Cmp); + const cmp = fixture.componentInstance; - cmp.exp = false; - fixture.detectChanges(); - fixture.whenStable().then(() => { - expect(cmp.startEvent.triggerName).toEqual('myAnimation'); - expect(cmp.startEvent.phaseName).toEqual('start'); - expect(cmp.startEvent.toState).toEqual('void'); - expect(cmp.doneEvent.triggerName).toEqual('myAnimation'); - expect(cmp.doneEvent.phaseName).toEqual('done'); - expect(cmp.doneEvent.toState).toEqual('void'); - async(); + cmp.exp = true; + fixture.detectChanges(); + fixture.whenStable().then(() => { + cmp.startEvent = null; + cmp.doneEvent = null; + + cmp.exp = false; + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(cmp.startEvent.triggerName).toEqual('myAnimation'); + expect(cmp.startEvent.phaseName).toEqual('start'); + expect(cmp.startEvent.toState).toEqual('void'); + expect(cmp.doneEvent.triggerName).toEqual('myAnimation'); + expect(cmp.doneEvent.phaseName).toEqual('done'); + expect(cmp.doneEvent.toState).toEqual('void'); + async(); + }); + }); }); - }); - }); }); }