fix(input): Ensure animated messages disappear. (#9466)

After some recent changes to the input animations, the input could
get into a state where animated messages were still being shown
even if they were invalid.

The underlying issue was that the animation was not calling the
`done` function and Angular's animation framework was thus not
actually removing the element from the DOM, so any further message
animations found the old message in the DOM and attempted to show
it.

 - Ensure all input animations properly call the `.done()` method
   which is returned by `$animateCss()`.
 - Update tests to check for `.done()` calls and use a better
   method for flushing the animations.
 - Remove some old/commented code.

Fixes #9454.

Author: topherfangio

src/components/input/input-animations.spec.js

@@ -1,5 +1,5 @@
 describe('md-input-container animations', function() {
-  var $rootScope, $compile, $animate, $animateCss,
+  var $rootScope, $compile, $animateCss, $material,
     el, pageScope, invalidAnimation, messagesAnimation, messageAnimation,
     cssTransitionsDisabled = false, lastAnimateCall;
 
@@ -28,7 +28,8 @@ describe('md-input-container animations', function() {
     );
 
     var container = el.find('md-input-container'),
-      input = el.find('input');
+      input = el.find('input'),
+      doneSpy = jasmine.createSpy('done');
 
     // Mimic the real validations/animations that fire
 
@@ -39,10 +40,11 @@ describe('md-input-container animations', function() {
      */
 
     setFoo('asdf');
-    messageAnimation.enter(getError()).start().done(angular.noop);
-    $animate.flush();
+    messageAnimation.enter(getError(), doneSpy);
+    flush();
 
     expectError(getError(), 'pattern');
+    expect(doneSpy).toHaveBeenCalled();
     expect(container).not.toHaveClass('md-input-invalid');
     expect(lastAnimateCall).toEqual({element: getError(), options: {}});
 
@@ -52,11 +54,13 @@ describe('md-input-container animations', function() {
      * Expect to animate in the pattern message
      */
 
+    doneSpy.calls.reset();
     input.triggerHandler('blur');
-    invalidAnimation.addClass(container, 'md-input-invalid', angular.noop);
-    $animate.flush();
+    invalidAnimation.addClass(container, 'md-input-invalid', doneSpy);
+    flush();
 
     expectError(getError(), 'pattern');
+    expect(doneSpy).toHaveBeenCalled();
     expect(container).toHaveClass('md-input-invalid');
     expect(lastAnimateCall.element).toEqual(getError());
     expect(lastAnimateCall.options.event).toEqual('enter');
@@ -71,19 +75,23 @@ describe('md-input-container animations', function() {
     // Grab the pattern error before we change foo and it disappears
     var patternError = getError();
 
-    messageAnimation.leave(patternError).start().done(angular.noop);
-    $animate.flush();
+    doneSpy.calls.reset();
+    messageAnimation.leave(patternError, doneSpy);
+    flush();
 
+    expect(doneSpy).toHaveBeenCalled();
     expect(lastAnimateCall.element).toEqual(patternError);
     expect(lastAnimateCall.options.event).toEqual('leave');
     expect(parseInt(lastAnimateCall.options.to["margin-top"])).toBeLessThan(0);
 
     setFoo('');
     expectError(getError(), 'required');
 
-    messageAnimation.enter(getError()).start().done(angular.noop);
-    $animate.flush();
+    doneSpy.calls.reset();
+    messageAnimation.enter(getError(), doneSpy);
+    flush();
 
+    expect(doneSpy).toHaveBeenCalled();
     expect(container).toHaveClass('md-input-invalid');
     expect(lastAnimateCall.element).toEqual(getError());
     expect(lastAnimateCall.options.event).toEqual('enter');
@@ -116,6 +124,12 @@ describe('md-input-container animations', function() {
     expect(element.text().trim()).toBe(message);
   }
 
+  function flush() {
+    // Note: we use flushInterimElement() because it actually calls everything 3 times which seems
+    // to be enough to actually flush the animations
+    $material.flushInterimElement();
+  }
+
   /*
    * before/afterEach Helper Functions
    */
@@ -152,8 +166,8 @@ describe('md-input-container animations', function() {
     inject(function($injector) {
       $rootScope = $injector.get('$rootScope');
       $compile = $injector.get('$compile');
-      $animate = $injector.get('$animate');
       $animateCss = $injector.get('$animateCss');
+      $material = $injector.get('$material');
 
       // Grab our input animations
       invalidAnimation = $injector.get('mdInputInvalidAnimation');

src/components/input/input.js

@@ -936,11 +936,15 @@ function ngMessageAnimation($$AnimateRunner, $animateCss, $mdUtil) {
 
   return {
     enter: function(element, done) {
-      return showMessage(element);
+      var animator = showMessage(element);
+
+      animator.start().done(done);
     },
 
     leave: function(element, done) {
-      return hideMessage(element);
+      var animator = hideMessage(element);
+
+      animator.start().done(done);
     }
   }
 }
@@ -998,7 +1002,6 @@ function showMessage(element) {
 function hideMessage(element) {
   var height = element[0].offsetHeight;
   var styles = window.getComputedStyle(element[0]);
-  //var styles = { opacity: element.css('opacity') };
 
   // If we are already hidden, just return an empty animation
   if (styles.opacity == 0) {