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

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

Hide file tree

Showing 2 changed files with 48 additions and 2 deletions.
diff --git a/modules/@angular/compiler/src/compiler_util/render_util.ts b/modules/@angular/compiler/src/compiler_util/render_util.ts
@@ -111,8 +111,10 @@ 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());
 

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,50 @@ 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 [@myAnimation]="exp" (@myAnimation.start)="callback($event)"></div>
+              `,
+               animations: [trigger('myAnimation', [transition('true <=> false', animate(543))])]
+             }
+           });
+
+           const driver = TestBed.get(AnimationDriver) as MockAnimationDriver;
+           const fixture = TestBed.createComponent(DummyIfCmp);
+           const cmp = fixture.componentInstance;
+           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');
+         }));
+
       it('should animate the element when the expression changes between states',
          fakeAsync(
              () => {