fix(animations): stringify state values before running the animation

Closes angular#12337 Closes angular#12899
matsko · Nov 21, 2016 · 635bcc3 · 635bcc3
1 parent 491d5a2
commit 635bcc3
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 3 deletions.
diff --git a/modules/@angular/compiler/src/compiler_util/render_util.ts b/modules/@angular/compiler/src/compiler_util/render_util.ts
@@ -111,14 +111,17 @@ export function triggerAnimation(
       animationTransitionVar
           .set(animationFnExpr.callFn([
             view, renderElement,
-            lastRenderValue.equals(unitializedValue).conditional(emptyStateValue, lastRenderValue),
-            renderValue.equals(unitializedValue).conditional(emptyStateValue, renderValue)
+            lastRenderValue.equals(unitializedValue)
+                .conditional(emptyStateValue, lastRenderValue.callMethod('toString', [])),
+            renderValue.equals(unitializedValue)
+                .conditional(emptyStateValue, renderValue.callMethod('toString', []))
           ]))
           .toDeclStmt());
 
   detachStmts.push(
       animationTransitionVar
-          .set(animationFnExpr.callFn([view, renderElement, lastRenderValue, emptyStateValue]))
+          .set(animationFnExpr.callFn(
+              [view, renderElement, lastRenderValue.callMethod('toString', []), emptyStateValue]))
           .toDeclStmt());
 
   const registerStmts = [

diff --git a/modules/@angular/core/test/animation/animation_integration_spec.ts b/modules/@angular/core/test/animation/animation_integration_spec.ts
@@ -114,6 +114,65 @@ function declareTests({useJit}: {useJit: boolean}) {
            expect(keyframes2[1]).toEqual([1, {'opacity': '0'}]);
          }));
 
+      it('should allow `true` and `false` to be recognized as `true` and `false` within animation states',
+         fakeAsync(() => {
+           TestBed.overrideComponent(DummyIfCmp, {
+             set: {
+               template: `
+                <div *ngIf="exp2" [@myAnimation]="exp" (@myAnimation.start)="callback($event)"></div>
+              `,
+               animations: [trigger(
+                   'myAnimation',
+                   [
+                     transition('true <=> false', animate(543)),
+                     transition('false => void', animate(100))
+                   ])]
+             }
+           });
+
+           const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
+           const fixture = TestBed.createComponent(DummyIfCmp);
+           const cmp = fixture.componentInstance;
+           cmp.exp2 = true;
+           fixture.detectChanges();
+           flushMicrotasks();
+
+           let lastFromState: string;
+           let lastToState: string;
+           cmp.callback = function(event: AnimationTransitionEvent) {
+             lastFromState = event.fromState;
+             lastToState = event.toState;
+           };
+           driver.log = [];
+
+           cmp.exp = true;
+           fixture.detectChanges();
+           flushMicrotasks();
+
+           let time = driver.log.pop()['duration'];
+           expect(time).toEqual(543);
+           expect(lastFromState).toBe('false');
+           expect(lastToState).toBe('true');
+
+           cmp.exp = false;
+           fixture.detectChanges();
+           flushMicrotasks();
+
+           time = driver.log.pop()['duration'];
+           expect(time).toEqual(543);
+           expect(lastFromState).toBe('true');
+           expect(lastToState).toBe('false');
+
+           cmp.exp2 = false;
+           fixture.detectChanges();
+           flushMicrotasks();
+
+           time = driver.log.pop()['duration'];
+           expect(time).toEqual(100);
+           expect(lastFromState).toBe('false');
+           expect(lastToState).toBe('void');
+         }));
+
       it('should animate the element when the expression changes between states',
          fakeAsync(
              () => {