text: describe('Text Field directives', function() {
    beforeEach(module('material.components.textField'));
  
    describe('- mdInputGroup', function() {
      var scope;
  
      beforeEach(function() {
        scope = {
          user : {
            firstName: 'Thomas',
            lastName: 'Burleson',
            email: 'ThomasBurleson@gmail.com',
            password: 'your password is incorrect'
          }
        };
      });
  
      it('should set input class for focus & blur', function() {
        var expressions = {label:"Firstname", model:"user.firstName"},
            el = setupInputGroup( expressions, scope),
            input = el.find('input');
  
        input.triggerHandler('focus');
        expect(el.hasClass('md-input-focused')).toBe(true);
        input.triggerHandler('blur');
        expect(el.hasClass('md-input-focused')).toBe(false);
      });
  
      it('should set input class for input event', function() {
        var expressions = {label:"email", model:"user.email", type:"email"},
            el = setupInputGroup( expressions, scope),
            input = el.find('input');
  
        expect(el.hasClass('md-input-has-value')).toBe(true);
  
        input.val('');
        input.triggerHandler('input');
        expect(el.hasClass('md-input-has-value')).toBe(false);
  
        input.val('ThomasBurleson@gmail.com');
        input.triggerHandler('input');
        expect(el.hasClass('md-input-has-value')).toBe(true);
      });
  
      it('should set input class for ngModel render', function() {
        var expressions = {label:"Firstname", model:"user.firstName"},
            el = setupInputGroup( expressions, scope),
            input = el.find('input');
  
        expect(el.hasClass('md-input-has-value')).toBe(true);
  
        input.scope().$apply('user.firstName = ""');
        expect(el.hasClass('md-input-has-value')).toBe(false);
  
        input.scope().$apply('user.firstName = "Thomas"');
        expect(el.hasClass('md-input-has-value')).toBe(true);
      });
  
    });
  
    describe(' - mdTextFloat', function() {
      var model;
      beforeEach(function() {
        model = {
          labels : {
            firstName: 'FirstName',
            lastName: 'LastName',
            email: 'eMail',
            password: 'Password'
          },
          user : {
            firstName: 'Andrew',
            lastName: 'Joslin',
            email: 'AndrewJoslin@drifty.com',
            password: 'public'
          }
        };
      });
  
      it('should set input type `password` properly', function() {
        var el = setupTextFloat( { type:"password" }, model);
        expect( el.find('input').attr('type')).toBe("password");
        expect( el.find('input').val()).toBe("");
      });
      it('should set input type `email` properly', function() {
        var el = setupTextFloat( { type:"email" }, model);
        expect( el.find('input').attr('type')).toBe("email");
        expect( el.find('input').val()).toBe("");
      });
  
      it('should set a static label properly', function() {
        var el = setupTextFloat( { label:"motto" }, model);
        expect( el.find('label').text() ).toBe("motto");
  
        expect( el.find('input').attr('type')).toBe("text");
        expect( el.find('input').val()).toBe("");
      });
      it('should update a label from model changes.', function() {
        var markup ='<md-text-float ' +
                      '  label="{{labels.firstName}}" ' +
                      '  ng-model="user.firstName" >' +
                      '</md-text-float>';
        var el = buildElement( markup, model);
  
        expect( el.find('input').val() ).toBe("Andrew");
        expect( el.find('label').text() ).toBe("FirstName");
  
        // Change model value of the `firstName` [field] label
        // then check if the dom is updated
  
        var val2  = "Corporate Title:";
        el.find('label').scope().$apply(function(){
          model.labels.firstName = val2;
        });
        expect( el.find('label').text() ).toBe( val2 );
  
      });
      it('should update an input value from model changes.', function() {
        var markup ='<md-text-float ' +
                    '  label="{{labels.firstName}}" ' +
                    '  ng-model="user.firstName" >' +
                    '</md-text-float>';
        var el = buildElement( markup, model);
        var input = el.find('input');
  
        expect( input.val() ).toBe("Andrew");
  
        var name = "AngularJS";
        input.scope().$apply(function(){
          model.user.firstName = name;
        });
        expect( input.val() ).toBe( name );
  
      });
  
      // Breaks on IE
      xit('should update a model value from input changes.', function() {
        var markup ='<md-text-float ' +
                    '  label="{{labels.firstName}}" ' +
                    '  ng-model="user.firstName" >' +
                    '</md-text-float>';
        var el = buildElement( markup, model);
        var input = el.find('input');
  
        expect( input.val() ).toBe( model.user.firstName );
  
        input.val( "AngularJS" );
        input.triggerHandler('input');
        expect( model.user.firstName ).toBe( "AngularJS" );
  
      });
  
      it('should set input class for focus & blur', function() {
        var expressions = {label:"Firstname", model:"user.firstName"},
            el = setupTextFloat( expressions, model),
            input = el.find('input');
  
        input.triggerHandler('focus');
        expect(el.hasClass('md-input-focused')).toBe(true);
        input.triggerHandler('blur');
        expect(el.hasClass('md-input-focused')).toBe(false);
      });
      it('should set input class for input event', function() {
        var expressions = {label:"password", model:"user.password", type:"password"},
            el = setupTextFloat( expressions, model),
            input = el.find('input');
  
        expect(el.hasClass('md-input-has-value')).toBe(true);
  
        input.val('');
        input.triggerHandler('input');
        expect(el.hasClass('md-input-has-value')).toBe(false);
  
        input.val('ThomasBurleson@gmail.com');
        input.triggerHandler('input');
        expect(el.hasClass('md-input-has-value')).toBe(true);
      });
      it('should set input class for ngModel changes', function() {
        var expressions = {label:"Password", model:"user.password", type:"password"},
            el = setupTextFloat( expressions, model),
            input = el.find('input');
  
        expect(el.hasClass('md-input-has-value')).toBe(true);
  
        input.scope().$apply(function(){  model.user.password = ""; });
        expect(el.hasClass('md-input-has-value')).toBe(false);
  
        input.scope().$apply(function() { model.user.password = "hiddenValley"; });
        expect(el.hasClass('md-input-has-value')).toBe(true);
      });
  
      it('should pair input and label for accessibility.', function() {
        var markup ='<md-text-float ' +
                    '  md-fid="093" ' +
                    '  label="{{labels.firstName}}" ' +
                    '  ng-model="user.firstName" >' +
                    '</md-text-float>';
        var el = buildElement( markup, model);
        var input = el.find('input');
        var label = el.find('label');
  
        expect( label.attr('for') ).toBe( "093" );
        expect( input.attr('id') ).toBe( label.attr('for') );
      });
  
      it('should auto-pair input and label for accessibility.', function() {
        var markup ='<md-text-float ' +
                    '  label="{{labels.firstName}}" ' +
                    '  ng-model="user.firstName" >' +
                    '</md-text-float>';
        var el = buildElement( markup, model);
        var input = el.find('input');
        var label = el.find('label');
  
        expect( label.attr('for') === "" ).toBe( false );
        expect( input.attr('id') ).toBe( label.attr('for') );
      });
  
      it('should add an ARIA attribute for disabled inputs', function() {
        var markup ='<md-text-float ng-disabled="true" ' +
                    '  label="{{labels.firstName}}" ' +
                    '  ng-model="user.firstName" >' +
                    '</md-text-float>';
        var el = buildElement( markup, model);
        var input = el.find('input');
  
        expect( input.attr('aria-disabled') ).toBe( 'true' );
      });
    });
  
    // ****************************************************************
    // Utility `setup` methods
    // ****************************************************************
  
    var templates = {
      md_text_float : '<md-text-float ' +
                  '   type="{{type}}" ' +
                  '   label="{{label}}" ' +
                  '   ng-model="{{model}}" >' +
                  '</md-text-float>',
  
      md_input_group: '<div class="md-input-group" tabindex="-1">' +
                  ' <label>{{label}}</label>' +
                  ' <md-input id="{{id}}" type="{{type}}" ng-model="{{model}}"></md-input>' +
                  '</div>'
    };
  
    /**
     * Build a text float group using the `<md-input-group />` markup template
     */
    function setupInputGroup(expressions, values) {
      values = angular.extend({},{type:"text", id:''},values||{});
  
      return buildElement( templates.md_input_group, values, angular.extend({}, expressions||{}));
    }
  
    /**
     * Build a text float group using the `<md-text-float />` markup template
     */
    function setupTextFloat(expressions, values) {
      values = angular.extend({ modelValue:"",type:'text' }, values || {});
  
      var defaults = {model:"modelValue", label:""};
      var tokens = angular.extend({}, defaults, expressions||{} );
  
      return buildElement( templates.md_text_float, values, tokens );
    }
  
    /**
     * Use the specified template markup, $compile to the DOM build
     * and link both the bindings and attribute assignments.
     * @returns {*} DOM Element
     */
    function buildElement( template, scope, interpolationScope  ) {
      var el;
  
      inject(function($compile, $interpolate, $rootScope) {
        scope = angular.extend( $rootScope.$new(), scope || {});
  
        // First substitute interpolation values into the template... if any
        if ( interpolationScope ) {
          template = $interpolate( template )( interpolationScope );
        }
  
        // Compile the template using the scope model(s)
        el = $compile( template )( scope );
        $rootScope.$apply();
  
      });
      return el;
    }
  
  });
  
  
  