diff --git a/packages/core/test/animation/animation_integration_spec.ts b/packages/core/test/animation/animation_integration_spec.ts index bfc08b651d..51932332f9 100644 --- a/packages/core/test/animation/animation_integration_spec.ts +++ b/packages/core/test/animation/animation_integration_spec.ts @@ -1318,6 +1318,70 @@ export function main() { expect(count).toEqual(2); }); + it('should cancel all animations on the element when a removal animation is set', + fakeAsync(() => { + const sharedAnimation = [style({opacity: 0}), animate('1s', style({opacity: 1}))]; + + @Component({ + selector: 'ani-cmp', + template: ` +
+ `, + animations: [ + trigger( + 'one', + [ + transition('* => go', sharedAnimation), + transition( + ':leave', [style({opacity: 1}), animate('1s', style({opacity: 0}))]), + ]), + trigger( + 'two', + [ + transition('* => go', sharedAnimation), + ]), + trigger( + 'three', + [ + transition('* => go', sharedAnimation), + ]), + ] + }) + class Cmp { + public exp0: any; + public exp1: any; + public exp2: any; + public exp3: any; + } + + TestBed.configureTestingModule({declarations: [Cmp]}); + + const fixture = TestBed.createComponent(Cmp); + const cmp = fixture.componentInstance; + + cmp.exp0 = true; + cmp.exp1 = 'go'; + cmp.exp2 = 'go'; + cmp.exp3 = 'go'; + fixture.detectChanges(); + flushMicrotasks(); + + const players = getLog(); + resetLog(); + + expect(players.length).toEqual(3); + + let count = 0; + players.forEach(player => { player.onDone(() => count++); }); + + expect(count).toEqual(0); + cmp.exp0 = false; + fixture.detectChanges(); + flushMicrotasks(); + + expect(count).toEqual(3); + })); + it('should destroy inner animations when a parent node is set for removal', () => { @Component({ selector: 'ani-cmp',