From 6a2bbffe104089946dbe2dfbdbacf9d1110922c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matias=20Niemel=C3=A4?= <matias@yearofmoo.com>
Date: Thu, 8 Sep 2016 12:20:07 -0700
Subject: [PATCH] fix(animations): allow `group()` to be used as entry point
 for an animation trigger (#11419)

Closes #11312
Closes #11419
---
 .../compiler/src/animation/animation_ast.ts   |  2 +-
 .../src/animation/animation_parser.ts         | 10 +++++---
 .../animation/animation_integration_spec.ts   | 25 +++++++++++++++++++
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/modules/@angular/compiler/src/animation/animation_ast.ts b/modules/@angular/compiler/src/animation/animation_ast.ts
index 4b4a323372..aa4d10a869 100644
--- a/modules/@angular/compiler/src/animation/animation_ast.ts
+++ b/modules/@angular/compiler/src/animation/animation_ast.ts
@@ -52,7 +52,7 @@ export class AnimationStateTransitionExpression {
 export class AnimationStateTransitionAst extends AnimationStateAst {
   constructor(
       public stateChanges: AnimationStateTransitionExpression[],
-      public animation: AnimationSequenceAst) {
+      public animation: AnimationWithStepsAst) {
     super();
   }
   visit(visitor: AnimationAstVisitor, context: any): any {
diff --git a/modules/@angular/compiler/src/animation/animation_parser.ts b/modules/@angular/compiler/src/animation/animation_parser.ts
index 72769c7b68..40ab414ea5 100644
--- a/modules/@angular/compiler/src/animation/animation_parser.ts
+++ b/modules/@angular/compiler/src/animation/animation_parser.ts
@@ -117,11 +117,11 @@ function _parseAnimationStateTransition(
     _fillAnimationAstStartingKeyframes(animationAst, styles, errors);
   }
 
-  var sequenceAst = (animationAst instanceof AnimationSequenceAst) ?
-      <AnimationSequenceAst>animationAst :
+  var stepsAst: AnimationWithStepsAst = (animationAst instanceof AnimationWithStepsAst) ?
+      animationAst :
       new AnimationSequenceAst([animationAst]);
 
-  return new AnimationStateTransitionAst(transitionExprs, sequenceAst);
+  return new AnimationStateTransitionAst(transitionExprs, stepsAst);
 }
 
 function _parseAnimationTransitionExpr(
@@ -180,7 +180,9 @@ function _normalizeStyleSteps(
     entry: CompileAnimationMetadata, stateStyles: {[key: string]: AnimationStylesAst},
     errors: AnimationParseError[]): CompileAnimationMetadata {
   var steps = _normalizeStyleStepEntry(entry, stateStyles, errors);
-  return new CompileAnimationSequenceMetadata(steps);
+  return (entry instanceof CompileAnimationGroupMetadata) ?
+      new CompileAnimationGroupMetadata(steps) :
+      new CompileAnimationSequenceMetadata(steps);
 }
 
 function _mergeAnimationStyles(
diff --git a/modules/@angular/core/test/animation/animation_integration_spec.ts b/modules/@angular/core/test/animation/animation_integration_spec.ts
index ac076100f5..1d8ab43f5e 100644
--- a/modules/@angular/core/test/animation/animation_integration_spec.ts
+++ b/modules/@angular/core/test/animation/animation_integration_spec.ts
@@ -13,6 +13,7 @@ import {MockAnimationDriver} from '@angular/platform-browser/testing/mock_animat
 
 import {Component} from '../../index';
 import {DEFAULT_STATE} from '../../src/animation/animation_constants';
+import {AnimationGroupPlayer} from '../../src/animation/animation_group_player';
 import {AnimationKeyframe} from '../../src/animation/animation_keyframe';
 import {AnimationPlayer} from '../../src/animation/animation_player';
 import {AnimationStyles} from '../../src/animation/animation_styles';
@@ -378,6 +379,30 @@ function declareTests({useJit}: {useJit: boolean}) {
              assertPlaying(player4, true);
              assertPlaying(player5, true);
            }));
+
+        it('should allow a group animation to be set as the entry point for an animation trigger',
+           fakeAsync(() => {
+             TestBed.overrideComponent(DummyIfCmp, {
+               set: {
+                 template: `<div *ngIf="exp" [@myAnimation]="exp"></div>`,
+                 animations: [trigger(
+                     'myAnimation', [transition('void => *', group([
+                                                  animate(1000, style({color: 'red'})),
+                                                  animate('1s 0.5s', style({fontSize: 10})),
+                                                ]))])]
+               }
+             });
+
+             const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
+             const fixture = TestBed.createComponent(DummyIfCmp);
+             const cmp = fixture.debugElement.componentInstance;
+
+             cmp.exp = true;
+             fixture.detectChanges();
+
+             const player = driver.log[0]['player'];
+             expect(player.parentPlayer instanceof AnimationGroupPlayer).toBe(true);
+           }));
       });