fix(input): Fix message animation not running.

If an input switched from one error state directly to another error
state, the second error animation would fail.

Update input animation code to handle this situation and be
drastically cleaner and fix a bug in  `getMessagesElement()`
method which disallowed multiple `ng-messages` elements.

Fixes #8635. Fixes #8864. Fixes #8973.

Closes #9044

Author: topherfangio

.travis.yml

@@ -50,9 +50,7 @@ before_script:
 - "./scripts/sauce/start-tunnel.sh"
 
 script:
-- gulp ddescribe-iit
-- gulp build
-- gulp karma --config=config/karma-sauce.conf.js --browsers=$BROWSER --reporters='dots'
+- ./scripts/travis-run-script.sh
 
 after_script:
 - "./scripts/sauce/stop-tunnel.sh"

gulp/tasks/server.js

@@ -4,17 +4,19 @@ var LR_PORT = require('../const').LR_PORT;
 var util = require('../util');
 
 exports.task = function() {
-    var openUrl = false;
-    if (typeof util.args.o === 'string' ||
-        typeof util.args.o === 'boolean') {
-        openUrl = util.args.o;
-    }
-    return gulp.src('.')
-      .pipe(webserver({
-            host: '0.0.0.0',
-            livereload: true,
-            port: LR_PORT,
-            directoryListing: true,
-            open: openUrl
-        }));
+  var openUrl = false;
+
+  if (typeof util.args.o === 'string' ||
+    typeof util.args.o === 'boolean') {
+    openUrl = util.args.o;
+  }
+
+  return gulp.src('.')
+    .pipe(webserver({
+      host: '0.0.0.0',
+      livereload: true,
+      port: LR_PORT,
+      directoryListing: false,
+      open: openUrl
+    }));
 };

scripts/travis-run-script.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+# Run our check to make sure all tests will actually run
+gulp ddescribe-iit
+
+# Run our actual build
+gulp build
+gulp karma --config=config/karma-sauce.conf.js --browsers=$BROWSER --reporters='dots'

src/components/input/demoErrors/index.html

@@ -8,7 +8,7 @@
         <input md-maxlength="30" required md-no-asterisk name="description" ng-model="project.description">
         <div ng-messages="projectForm.description.$error">
           <div ng-message="required">This is required.</div>
-          <div ng-message="md-maxlength">The name has to be less than 30 characters long.</div>
+          <div ng-message="md-maxlength">The description must be less than 30 characters long.</div>
         </div>
       </md-input-container>
 

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

@@ -0,0 +1,174 @@
+describe('md-input-container animations', function() {
+  var $rootScope, $compile, $animate, $animateCss,
+    el, pageScope, invalidAnimation, messagesAnimation, messageAnimation,
+    cssTransitionsDisabled = false;
+
+  // Load our modules
+  beforeEach(module('ngAnimate', 'ngMessages', 'material.components.input'));
+
+  // Run pre-test setup
+  beforeEach(decorateAnimateCss);
+  beforeEach(injectGlobals);
+  beforeEach(setupVariables);
+
+  // Run after-test teardown
+  afterEach(teardown);
+
+  it('set the proper styles when showing messages', function() {
+    compile(
+      '<form name="testForm">' +
+      '  <md-input-container>' +
+      '    <input name="foo" ng-model="foo" required ng-pattern="/^1234$/" />' +
+      '    <div class="errors" ng-messages="testForm.foo.$error">' +
+      '      <div ng-message="required">required</div>' +
+      '      <div ng-message="pattern">pattern</div>' +
+      '    </div>' +
+      '  </md-input-container>' +
+      '</form>'
+    );
+
+    var container = el.find('md-input-container'),
+      input = el.find('input');
+
+    // Mimic the real validations/animations that fire
+
+    /*
+     * 1. Set to an invalid pattern but don't blur (so it's not invalid yet)
+     *
+     * Expect nothing to happen ($animateCss called with no options)
+     */
+
+    setFoo('asdf');
+    messageAnimation.enter(getError()).start().done(angular.noop);
+    $animate.flush();
+
+    expectError(getError(), 'pattern');
+    expect(container).not.toHaveClass('md-input-invalid');
+    expect(lastAnimateCall()).toEqual({element: getError(), options: {}});
+
+    /*
+     * 2. Blur the input, which adds the md-input-invalid class
+     *
+     * Expect to animate in the pattern message
+     */
+
+    input.triggerHandler('blur');
+    invalidAnimation.addClass(container, 'md-input-invalid', angular.noop);
+    $animate.flush();
+
+    expectError(getError(), 'pattern');
+    expect(container).toHaveClass('md-input-invalid');
+    expect(lastAnimateCall().element).toEqual(getError());
+    expect(lastAnimateCall().options.event).toEqual('enter');
+    expect(lastAnimateCall().options.to).toEqual({"opacity": 1, "margin-top": "0"});
+
+    /*
+     * 3. Clear the field
+     *
+     * Expect to animate away pattern message and animate in the required message
+     */
+
+    // Grab the pattern error before we change foo and it disappears
+    var patternError = getError();
+
+    messageAnimation.leave(patternError).start().done(angular.noop);
+    $animate.flush();
+
+    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();
+
+    expect(container).toHaveClass('md-input-invalid');
+    expect(lastAnimateCall().element).toEqual(getError());
+    expect(lastAnimateCall().options.event).toEqual('enter');
+    expect(lastAnimateCall().options.to).toEqual({"opacity": 1, "margin-top": "0"});
+  });
+
+  /*
+   * Test Helper Functions
+   */
+
+  function compile(template) {
+    el = $compile(template)(pageScope);
+    angular.element(document.body).append(el);
+
+    pageScope.$apply();
+
+    return el;
+  }
+
+  function lastAnimateCall() {
+    return {
+      element: $animateCss.calls.mostRecent().args[0],
+      options: $animateCss.calls.mostRecent().args[1]
+    }
+  }
+
+  function setFoo(value) {
+    pageScope.foo = value;
+    pageScope.$digest();
+  }
+
+  function getError() {
+    return angular.element(el[0].querySelector('.errors div'));
+  }
+
+  function expectError(element, message) {
+    expect(element.text().trim()).toBe(message);
+  }
+
+  /*
+   * before/afterEach Helper Functions
+   */
+
+  // Decorate the $animateCss service so we can spy on it and disable any CSS transitions
+  function decorateAnimateCss() {
+    module(function($provide) {
+      $provide.decorator('$animateCss', function($delegate) {
+        return jasmine.createSpy('$animateCss').and.callFake(function(element, options) {
+          // Make sure any transitions happen immediately; NOTE: this is REQUIRED for the above
+          // tests to pass without using window.setTimeout to wait for the animations
+          if (cssTransitionsDisabled) {
+            element.css('transition', '0s none');
+          }
+
+          return $delegate(element, options);
+        });
+      });
+    });
+  }
+
+  // Setup/grab our variables
+  function injectGlobals() {
+    inject(function($injector) {
+      $rootScope = $injector.get('$rootScope');
+      $compile = $injector.get('$compile');
+      $animate = $injector.get('$animate');
+      $animateCss = $injector.get('$animateCss');
+
+      // Grab our input animations
+      invalidAnimation = $injector.get('mdInputInvalidAnimation');
+      messagesAnimation = $injector.get('mdInputMessagesAnimation');
+      messageAnimation = $injector.get('mdInputMessageAnimation');
+    });
+  }
+
+  // Setup some custom variables for these tests
+  function setupVariables() {
+    pageScope = $rootScope.$new();
+    cssTransitionsDisabled = true;
+  }
+
+  // Teardown our tests by resetting variables and removing our element
+  function teardown() {
+    cssTransitionsDisabled = false;
+
+    el && el.remove && el.remove();
+  }
+});