formSpec.js

/* global FormController: false */
'use strict';

describe('form', function() {
  var doc, control, scope, $compile, changeInputValue;

  beforeEach(module(function($compileProvider) {
    $compileProvider.directive('storeModelCtrl', function() {
      return {
        require: 'ngModel',
        link: function(scope, elm, attr, ctrl) {
          control = ctrl;
        }
      };
    });
  }));

  beforeEach(inject(function($injector, $sniffer) {
    $compile = $injector.get('$compile');
    scope = $injector.get('$rootScope');

    changeInputValue = function(elm, value) {
      elm.val(value);
      browserTrigger(elm, $sniffer.hasEvent('input') ? 'input' : 'change');
    };
  }));

  afterEach(function() {
    dealoc(doc);
  });


  it('should instantiate form and attach it to DOM', function() {
    doc = $compile('<form>')(scope);
    expect(doc.data('$formController')).toBeTruthy();
    expect(doc.data('$formController') instanceof FormController).toBe(true);
  });


  it('should remove form control references from the form when nested control is removed from the DOM', function() {
    doc = $compile(
      '<form name="myForm">' +
        '<input ng-if="inputPresent" name="alias" ng-model="value" store-model-ctrl/>' +
      '</form>')(scope);
    scope.inputPresent = true;
    scope.$digest();

    var form = scope.myForm;
    control.$setValidity('required', false);
    expect(form.alias).toBe(control);
    expect(form.$error.required).toEqual([control]);

    // remove nested control
    scope.inputPresent = false;
    scope.$apply();

    expect(form.$error.required).toBeFalsy();
    expect(form.alias).toBeUndefined();
  });


  it('should ignore changes in manually removed controls', function() {
    doc = $compile(
      '<form name="myForm">' +
        '<input name="control" ng-maxlength="1" ng-model="value" store-model-ctrl/>' +
      '</form>')(scope);

    var form = scope.myForm;

    var input = doc.find('input').eq(0);
    var inputController = input.controller('ngModel');

    changeInputValue(input, 'ab');
    scope.$apply();

    expect(form.$error.maxlength).toBeTruthy();
    expect(form.$dirty).toBe(true);
    expect(form.$error.maxlength[0].$name).toBe('control');

    // remove control
    form.$removeControl(form.control);
    expect(form.control).toBeUndefined();
    expect(form.$error.maxlength).toBeFalsy();

    inputController.$setPristine();
    expect(form.$dirty).toBe(true);

    form.$setPristine();

    changeInputValue(input, 'abc');
    scope.$apply();

    expect(form.$error.maxlength).toBeFalsy();
    expect(form.$dirty).toBe(false);
  });


  it('should react to validation changes in manually added controls', function() {
    doc = $compile(
      '<form name="myForm">' +
        '<input name="control" ng-maxlength="1" ng-model="value" store-model-ctrl/>' +
      '</form>')(scope);

      scope.$digest();

    var form = scope.myForm;

    var input = doc.find('input').eq(0);

    // remove control and invalidate it
    form.$removeControl(control);
    expect(form.control).toBeUndefined();

    changeInputValue(input, 'abc');
    expect(control.$error.maxlength).toBe(true);
    expect(control.$dirty).toBe(true);
    expect(form.$error.maxlength).toBeFalsy();
    expect(form.$dirty).toBe(false);

    // re-add the control; its current validation state is not propagated
    form.$addControl(control);
    expect(form.control).toBe(control);
    expect(form.$error.maxlength).toBeFalsy();
    expect(form.$dirty).toBe(false);

    // Only when the input changes again its validation state is propagated
    changeInputValue(input, 'abcd');
    expect(form.$error.maxlength[0]).toBe(control);
    expect(form.$dirty).toBe(false);
  });


  it('should use the correct parent when renaming and removing dynamically added controls', function() {
    scope.controlName = 'childControl';
    scope.hasChildControl = true;

    doc = $compile(
      '<form name="myForm">' +
        '<div ng-if="hasChildControl">' +
          '<input name="{{controlName}}" ng-maxlength="1" ng-model="value"/>' +
        '</div>' +
      '</form>' +
      '<form name="otherForm"></form>')(scope);

    scope.$digest();

    var form = scope.myForm;
    var otherForm = scope.otherForm;
    var childControl = form.childControl;

    // remove child form and add it to another form
    form.$removeControl(childControl);
    otherForm.$addControl(childControl);

    expect(form.childControl).toBeUndefined();
    expect(otherForm.childControl).toBe(childControl);

    // rename the childControl
    scope.controlName = 'childControlMoved';
    scope.$digest();

    expect(form.childControlMoved).toBeUndefined();
    expect(otherForm.childControl).toBeUndefined();
    expect(otherForm.childControlMoved).toBe(childControl);

    scope.hasChildControl = false;
    scope.$digest();

    expect(form.childControlMoved).toBeUndefined();
    expect(otherForm.childControlMoved).toBeUndefined();
  });


  it('should remove scope reference when form with no parent form is removed from the DOM', function() {
    var formController;
    scope.ctrl = {};
    doc = $compile(
      '<div><form name="ctrl.myForm" ng-if="formPresent">' +
        '<input name="alias" ng-model="value" />' +
      '</form></div>')(scope);

    scope.$digest();
    expect(scope.ctrl.myForm).toBeUndefined();

    scope.$apply('formPresent = true');
    expect(scope.ctrl.myForm).toBeDefined();

    formController = doc.find('form').controller('form');
    expect(scope.ctrl.myForm).toBe(formController);

    scope.$apply('formPresent = false');
    expect(scope.ctrl.myForm).toBeUndefined();
  });

  it('should use ngForm value as form name', function() {
    doc = $compile(
      '<div ng-form="myForm">' +
        '<input type="text" name="alias" ng-model="value"/>' +
      '</div>')(scope);

    expect(scope.myForm).toBeDefined();
    expect(scope.myForm.alias).toBeDefined();
  });

  it('should use ngForm value as form name when nested inside form', function() {
    doc = $compile(
      '<form name="myForm">' +
        '<div ng-form="nestedForm"><input type="text" name="alias" ng-model="value"/></div>' +
      '</form>')(scope);

    expect(scope.myForm).toBeDefined();
    expect(scope.myForm.nestedForm).toBeDefined();
    expect(scope.myForm.nestedForm.alias).toBeDefined();
  });


  it('should publish form to scope when name attr is defined', function() {
    doc = $compile('<form name="myForm"></form>')(scope);
    expect(scope.myForm).toBeTruthy();
    expect(doc.data('$formController')).toBeTruthy();
    expect(doc.data('$formController')).toEqual(scope.myForm);
  });


  it('should support expression in form name', function() {
    doc = $compile('<form name="obj.myForm"></form>')(scope);

    expect(scope.obj).toBeDefined();
    expect(scope.obj.myForm).toBeTruthy();
  });


  it('should support two forms on a single scope', function() {
    doc = $compile(
      '<div>' +
        '<form name="formA">' +
          '<input name="firstName" ng-model="firstName" required>' +
        '</form>' +
        '<form name="formB">' +
          '<input name="lastName" ng-model="lastName" required>' +
        '</form>' +
      '</div>'
    )(scope);

    scope.$apply();

    expect(scope.formA.$error.required.length).toBe(1);
    expect(scope.formA.$error.required).toEqual([scope.formA.firstName]);
    expect(scope.formB.$error.required.length).toBe(1);
    expect(scope.formB.$error.required).toEqual([scope.formB.lastName]);

    var inputA = doc.find('input').eq(0),
        inputB = doc.find('input').eq(1);

    changeInputValue(inputA, 'val1');
    changeInputValue(inputB, 'val2');

    expect(scope.firstName).toBe('val1');
    expect(scope.lastName).toBe('val2');

    expect(scope.formA.$error.required).toBeFalsy();
    expect(scope.formB.$error.required).toBeFalsy();
  });


  it('should publish widgets', function() {
    doc = jqLite('<form name="form"><input type="text" name="w1" ng-model="some" /></form>');
    $compile(doc)(scope);

    var widget = scope.form.w1;
    expect(widget).toBeDefined();
    expect(widget.$pristine).toBe(true);
    expect(widget.$dirty).toBe(false);
    expect(widget.$valid).toBe(true);
    expect(widget.$invalid).toBe(false);
  });


  it('should throw an exception if an input has name="hasOwnProperty"', function() {
    doc = jqLite(
      '<form name="form">' +
        '<input name="hasOwnProperty" ng-model="some" />' +
        '<input name="other" ng-model="someOther" />' +
      '</form>');
    expect(function() {
      $compile(doc)(scope);
    }).toThrowMinErr('ng', 'badname');
  });

  describe('triggering commit value on submit', function() {
    it('should trigger update on form submit', function() {
      var form = $compile(
          '<form name="test" ng-model-options="{ updateOn: \'\' }" >' +
            '<input type="text" ng-model="name" />' +
          '</form>')(scope);
      scope.$digest();

      var inputElm = form.find('input').eq(0);
      changeInputValue(inputElm, 'a');
      expect(scope.name).toEqual(undefined);
      browserTrigger(form, 'submit');
      expect(scope.name).toEqual('a');
      dealoc(form);
    });

    it('should trigger update on form submit with nested forms', function() {
      var form = $compile(
          '<form name="test" ng-model-options="{ updateOn: \'\' }" >' +
            '<div class="ng-form" name="child">' +
              '<input type="text" ng-model="name" />' +
            '</div>' +
          '</form>')(scope);
      scope.$digest();

      var inputElm = form.find('input').eq(0);
      changeInputValue(inputElm, 'a');
      expect(scope.name).toEqual(undefined);
      browserTrigger(form, 'submit');
      expect(scope.name).toEqual('a');
      dealoc(form);
    });

    it('should trigger update before ng-submit is invoked', function() {
      var form = $compile(
          '<form name="test" ng-submit="submit()" ' +
              'ng-model-options="{ updateOn: \'\' }" >' +
            '<input type="text" ng-model="name" />' +
          '</form>')(scope);
      scope.$digest();

      var inputElm = form.find('input').eq(0);
      changeInputValue(inputElm, 'a');
      scope.submit = jasmine.createSpy('submit').andCallFake(function() {
        expect(scope.name).toEqual('a');
      });
      browserTrigger(form, 'submit');
      expect(scope.submit).toHaveBeenCalled();
      dealoc(form);
    });
  });

  describe('rollback view value', function() {
    it('should trigger rollback on form controls', function() {
      var form = $compile(
          '<form name="test" ng-model-options="{ updateOn: \'\' }" >' +
            '<input type="text" ng-model="name" />' +
            '<button ng-click="test.$rollbackViewValue()" />' +
          '</form>')(scope);
      scope.$digest();

      var inputElm = form.find('input').eq(0);
      changeInputValue(inputElm, 'a');
      expect(inputElm.val()).toBe('a');
      browserTrigger(form.find('button'), 'click');
      expect(inputElm.val()).toBe('');
      dealoc(form);
    });

    it('should trigger rollback on form controls with nested forms', function() {
      var form = $compile(
          '<form name="test" ng-model-options="{ updateOn: \'\' }" >' +
            '<div class="ng-form" name="child">' +
              '<input type="text" ng-model="name" />' +
            '</div>' +
            '<button ng-click="test.$rollbackViewValue()" />' +
          '</form>')(scope);
      scope.$digest();

      var inputElm = form.find('input').eq(0);
      changeInputValue(inputElm, 'a');
      expect(inputElm.val()).toBe('a');
      browserTrigger(form.find('button'), 'click');
      expect(inputElm.val()).toBe('');
      dealoc(form);
    });
  });

  describe('preventing default submission', function() {

    it('should prevent form submission', function() {
      var nextTurn = false,
          submitted = false,
          reloadPrevented;

      doc = jqLite('<form ng-submit="submitMe()">' +
                     '<input type="submit" value="submit">' +
                   '</form>');

      var assertPreventDefaultListener = function(e) {
        reloadPrevented = e.defaultPrevented || (e.returnValue === false);
      };

      $compile(doc)(scope);

      scope.submitMe = function() {
        submitted = true;
      };

      addEventListenerFn(doc[0], 'submit', assertPreventDefaultListener);

      browserTrigger(doc.find('input'));

      // let the browser process all events (and potentially reload the page)
      setTimeout(function() { nextTurn = true;});

      waitsFor(function() { return nextTurn; });

      runs(function() {
        expect(reloadPrevented).toBe(true);
        expect(submitted).toBe(true);

        // prevent mem leak in test
        removeEventListenerFn(doc[0], 'submit', assertPreventDefaultListener);
      });
    });


    it('should prevent the default when the form is destroyed by a submission via a click event',
        inject(function($timeout) {
      doc = jqLite('<div>' +
                      '<form ng-submit="submitMe()">' +
                        '<button ng-click="destroy()"></button>' +
                      '</form>' +
                    '</div>');

      var form = doc.find('form'),
          destroyed = false,
          nextTurn = false,
          submitted = false,
          reloadPrevented;

      scope.destroy = function() {
        // yes, I know, scope methods should not do direct DOM manipulation, but I wanted to keep
        // this test small. Imagine that the destroy action will cause a model change (e.g.
        // $location change) that will cause some directive to destroy the dom (e.g. ngView+$route)
        doc.empty();
        destroyed = true;
      };

      scope.submitMe = function() {
        submitted = true;
      };

      var assertPreventDefaultListener = function(e) {
        reloadPrevented = e.defaultPrevented || (e.returnValue === false);
      };

      $compile(doc)(scope);

      addEventListenerFn(form[0], 'submit', assertPreventDefaultListener);

      browserTrigger(doc.find('button'), 'click');

      // let the browser process all events (and potentially reload the page)
      setTimeout(function() { nextTurn = true;}, 100);

      waitsFor(function() { return nextTurn; });

      runs(function() {
        expect(doc.html()).toBe('');
        expect(destroyed).toBe(true);
        expect(submitted).toBe(false); // this is known corner-case that is not currently handled
                                       // the issue is that the submit listener is destroyed before
                                       // the event propagates there. we can fix this if we see
                                       // the issue in the wild, I'm not going to bother to do it
                                       // now. (i)

        // prevent mem leak in test
        removeEventListenerFn(form[0], 'submit', assertPreventDefaultListener);
      });
    }));


    it('should NOT prevent form submission if action attribute present', function() {
      var callback = jasmine.createSpy('submit').andCallFake(function(event) {
        expect(event.isDefaultPrevented()).toBe(false);
        event.preventDefault();
      });

      doc = $compile('<form action="some.py"></form>')(scope);
      doc.on('submit', callback);

      browserTrigger(doc, 'submit');
      expect(callback).toHaveBeenCalledOnce();
    });
  });


  describe('nested forms', function() {

    it('should chain nested forms', function() {
      doc = jqLite(
          '<ng:form name="parent">' +
            '<ng:form name="child">' +
              '<input ng:model="modelA" name="inputA">' +
              '<input ng:model="modelB" name="inputB">' +
            '</ng:form>' +
          '</ng:form>');
      $compile(doc)(scope);

      var parent = scope.parent,
          child = scope.child,
          inputA = child.inputA,
          inputB = child.inputB;

      inputA.$setValidity('MyError', false);
      inputB.$setValidity('MyError', false);
      expect(parent.$error.MyError).toEqual([child]);
      expect(child.$error.MyError).toEqual([inputA, inputB]);

      inputA.$setValidity('MyError', true);
      expect(parent.$error.MyError).toEqual([child]);
      expect(child.$error.MyError).toEqual([inputB]);

      inputB.$setValidity('MyError', true);
      expect(parent.$error.MyError).toBeFalsy();
      expect(child.$error.MyError).toBeFalsy();

      child.$setDirty();
      expect(parent.$dirty).toBeTruthy();

      child.$setSubmitted();
      expect(parent.$submitted).toBeTruthy();
    });


    it('should deregister a child form when its DOM is removed', function() {
      doc = jqLite(
        '<form name="parent">' +
          '<div class="ng-form" name="child">' +
          '<input ng:model="modelA" name="inputA" required>' +
          '</div>' +
          '</form>');
      $compile(doc)(scope);
      scope.$apply();

      var parent = scope.parent,
        child = scope.child;

      expect(parent).toBeDefined();
      expect(child).toBeDefined();
      expect(parent.$error.required).toEqual([child]);
      doc.children().remove(); //remove child

      expect(parent.child).toBeUndefined();
      expect(scope.child).toBeUndefined();
      expect(parent.$error.required).toBeFalsy();
    });


    it('should deregister a child form whose name is an expression when its DOM is removed', function() {
      doc = jqLite(
        '<form name="parent">' +
          '<div class="ng-form" name="child.form">' +
          '<input ng:model="modelA" name="inputA" required>' +
          '</div>' +
          '</form>');
      $compile(doc)(scope);
      scope.$apply();

      var parent = scope.parent,
        child = scope.child.form;

      expect(parent).toBeDefined();
      expect(child).toBeDefined();
      expect(parent.$error.required).toEqual([child]);
      doc.children().remove(); //remove child

      expect(parent.child).toBeUndefined();
      expect(scope.child.form).toBeUndefined();
      expect(parent.$error.required).toBeFalsy();
    });


    it('should deregister a input when it is removed from DOM', function() {
      doc = jqLite(
        '<form name="parent">' +
          '<div class="ng-form" name="child">' +
            '<input ng-if="inputPresent" ng-model="modelA" name="inputA" required maxlength="10">' +
          '</div>' +
        '</form>');
      $compile(doc)(scope);
      scope.inputPresent = true;
      scope.$apply();

      var parent = scope.parent,
          child = scope.child,
          input = child.inputA;

      expect(parent).toBeDefined();
      expect(child).toBeDefined();

      expect(parent.$error.required).toEqual([child]);
      expect(parent.$$success.maxlength).toEqual([child]);

      expect(child.$error.required).toEqual([input]);
      expect(child.$$success.maxlength).toEqual([input]);

      expect(doc.hasClass('ng-invalid')).toBe(true);
      expect(doc.hasClass('ng-invalid-required')).toBe(true);
      expect(doc.hasClass('ng-valid-maxlength')).toBe(true);
      expect(doc.find('div').hasClass('ng-invalid')).toBe(true);
      expect(doc.find('div').hasClass('ng-invalid-required')).toBe(true);
      expect(doc.find('div').hasClass('ng-valid-maxlength')).toBe(true);

      //remove child input
      scope.$apply('inputPresent = false');

      expect(parent.$error.required).toBeFalsy();
      expect(parent.$$success.maxlength).toBeFalsy();

      expect(child.$error.required).toBeFalsy();
      expect(child.$$success.maxlength).toBeFalsy();

      expect(doc.hasClass('ng-valid')).toBe(true);
      expect(doc.hasClass('ng-valid-required')).toBe(false);
      expect(doc.hasClass('ng-invalid-required')).toBe(false);
      expect(doc.hasClass('ng-valid-maxlength')).toBe(false);
      expect(doc.hasClass('ng-invalid-maxlength')).toBe(false);

      expect(doc.find('div').hasClass('ng-valid')).toBe(true);
      expect(doc.find('div').hasClass('ng-valid-required')).toBe(false);
      expect(doc.find('div').hasClass('ng-invalid-required')).toBe(false);
      expect(doc.find('div').hasClass('ng-valid-maxlength')).toBe(false);
      expect(doc.find('div').hasClass('ng-invalid-maxlength')).toBe(false);
    });

    it('should deregister a input that is $pending when it is removed from DOM', function() {
      doc = jqLite(
        '<form name="parent">' +
          '<div class="ng-form" name="child">' +
            '<input ng-if="inputPresent" ng-model="modelA" name="inputA">' +
          '</div>' +
        '</form>');
      $compile(doc)(scope);
      scope.$apply('inputPresent = true');

      var parent = scope.parent;
      var child = scope.child;
      var input = child.inputA;

      scope.$apply(child.inputA.$setValidity('fake', undefined));

      expect(parent).toBeDefined();
      expect(child).toBeDefined();

      expect(parent.$pending.fake).toEqual([child]);
      expect(child.$pending.fake).toEqual([input]);

      expect(doc.hasClass('ng-pending')).toBe(true);
      expect(doc.find('div').hasClass('ng-pending')).toBe(true);

      //remove child input
      scope.$apply('inputPresent = false');

      expect(parent.$pending).toBeUndefined();
      expect(child.$pending).toBeUndefined();

      expect(doc.hasClass('ng-pending')).toBe(false);
      expect(doc.find('div').hasClass('ng-pending')).toBe(false);
    });


    it('should leave the parent form invalid when deregister a removed input', function() {
      doc = jqLite(
        '<form name="parent">' +
          '<div class="ng-form" name="child">' +
            '<input ng-if="inputPresent" ng-model="modelA" name="inputA" required>' +
            '<input ng-model="modelB" name="inputB" required>' +
          '</div>' +
        '</form>');
      $compile(doc)(scope);
      scope.inputPresent = true;
      scope.$apply();

      var parent = scope.parent,
          child = scope.child,
          inputA = child.inputA,
          inputB = child.inputB;

      expect(parent).toBeDefined();
      expect(child).toBeDefined();
      expect(parent.$error.required).toEqual([child]);
      expect(child.$error.required).toEqual([inputB, inputA]);

      //remove child input
      scope.inputPresent = false;
      scope.$apply();

      expect(parent.$error.required).toEqual([child]);
      expect(child.$error.required).toEqual([inputB]);
    });


    it('should ignore changes in manually removed child forms', function() {
      doc = $compile(
        '<form name="myForm">' +
          '<ng-form name="childform">' +
            '<input name="childformcontrol" ng-maxlength="1" ng-model="value"/>' +
          '</ng-form>' +
        '</form>')(scope);

      var form = scope.myForm;
      var childformController = doc.find('ng-form').eq(0).controller('form');

      var input = doc.find('input').eq(0);
      var inputController = input.controller('ngModel');

      changeInputValue(input, 'ab');
      scope.$apply();

      expect(form.$dirty).toBe(true);
      expect(form.$error.maxlength).toBeTruthy();
      expect(form.$error.maxlength[0].$name).toBe('childform');

      inputController.$setPristine();
      expect(form.$dirty).toBe(false);

      // remove child form
      form.$removeControl(childformController);
      expect(form.childform).toBeUndefined();
      expect(form.$error.maxlength).toBeFalsy();

      changeInputValue(input, 'abc');
      scope.$apply();

      expect(form.$error.maxlength).toBeFalsy();
      expect(form.$dirty).toBe(false);
    });


    it('should react to changes in manually added child forms', function() {
      doc = $compile(
        '<form name="myForm">' +
          '<ng-form name="childForm">' +
            '<input name="childformcontrol" ng-maxlength="1" ng-model="value" />' +
          '</ng-form>' +
        '</form>')(scope);

      var form = scope.myForm;
      var childFormController = doc.find('ng-form').eq(0).controller('form');

      var input = doc.find('input').eq(0);

      // remove child form so we can add it manually
      form.$removeControl(childFormController);
      changeInputValue(input, 'ab');

      expect(form.childForm).toBeUndefined();
      expect(form.$dirty).toBe(false);
      expect(form.$error.maxlength).toBeFalsy();

      // re-add the child form; its current validation state is not propagated
      form.$addControl(childFormController);
      expect(form.childForm).toBe(childFormController);
      expect(form.$error.maxlength).toBeFalsy();
      expect(form.$dirty).toBe(false);

      // Only when the input inside the child form changes, the validation state is propagated
      changeInputValue(input, 'abc');
      expect(form.$error.maxlength[0]).toBe(childFormController);
      expect(form.$dirty).toBe(false);
    });


    it('should use the correct parent when renaming and removing dynamically added forms', function() {
      scope.formName = 'childForm';
      scope.hasChildForm = true;

      doc = $compile(
        '<form name="myForm">' +
          '<div ng-if="hasChildForm">' +
            '<ng-form name="{{formName}}">' +
              '<input name="childformcontrol" ng-maxlength="1" ng-model="value"/>' +
            '</ng-form>' +
          '</div>' +
        '</form>' +
        '<form name="otherForm"></form>')(scope);

      scope.$digest();

      var form = scope.myForm;
      var otherForm = scope.otherForm;
      var childForm = form.childForm;

      // remove child form and add it to another form
      form.$removeControl(childForm);
      otherForm.$addControl(childForm);

      expect(form.childForm).toBeUndefined();
      expect(otherForm.childForm).toBe(childForm);

      // rename the childForm
      scope.formName = 'childFormMoved';
      scope.$digest();

      expect(form.childFormMoved).toBeUndefined();
      expect(otherForm.childForm).toBeUndefined();
      expect(otherForm.childFormMoved).toBe(childForm);

      scope.hasChildForm = false;
      scope.$digest();

      expect(form.childFormMoved).toBeUndefined();
      expect(otherForm.childFormMoved).toBeUndefined();
    });


    it('should chain nested forms in repeater', function() {
      doc = jqLite(
         '<ng:form name=parent>' +
          '<ng:form ng:repeat="f in forms" name=child>' +
            '<input type=text ng:model=text name=text>' +
           '</ng:form>' +
         '</ng:form>');
      $compile(doc)(scope);

      scope.$apply(function() {
        scope.forms = [1];
      });

      var parent = scope.parent;
      var child = doc.find('input').scope().child;
      var input = child.text;

      expect(parent).toBeDefined();
      expect(child).toBeDefined();
      expect(input).toBeDefined();

      input.$setValidity('myRule', false);
      expect(input.$error.myRule).toEqual(true);
      expect(child.$error.myRule).toEqual([input]);
      expect(parent.$error.myRule).toEqual([child]);

      input.$setValidity('myRule', true);
      expect(parent.$error.myRule).toBeFalsy();
      expect(child.$error.myRule).toBeFalsy();
    });
  });


  describe('validation', function() {

    beforeEach(function() {
      doc = $compile(
          '<form name="form">' +
            '<input ng-model="name" name="name" store-model-ctrl/>' +
          '</form>')(scope);

      scope.$digest();
    });


    it('should have ng-valid/ng-invalid css class', function() {
      expect(doc).toBeValid();

      control.$setValidity('error', false);
      scope.$digest();
      expect(doc).toBeInvalid();
      expect(doc.hasClass('ng-valid-error')).toBe(false);
      expect(doc.hasClass('ng-invalid-error')).toBe(true);

      control.$setValidity('another', false);
      scope.$digest();
      expect(doc.hasClass('ng-valid-error')).toBe(false);
      expect(doc.hasClass('ng-invalid-error')).toBe(true);
      expect(doc.hasClass('ng-valid-another')).toBe(false);
      expect(doc.hasClass('ng-invalid-another')).toBe(true);

      control.$setValidity('error', true);
      scope.$digest();
      expect(doc).toBeInvalid();
      expect(doc.hasClass('ng-valid-error')).toBe(true);
      expect(doc.hasClass('ng-invalid-error')).toBe(false);
      expect(doc.hasClass('ng-valid-another')).toBe(false);
      expect(doc.hasClass('ng-invalid-another')).toBe(true);

      control.$setValidity('another', true);
      scope.$digest();
      expect(doc).toBeValid();
      expect(doc.hasClass('ng-valid-error')).toBe(true);
      expect(doc.hasClass('ng-invalid-error')).toBe(false);
      expect(doc.hasClass('ng-valid-another')).toBe(true);
      expect(doc.hasClass('ng-invalid-another')).toBe(false);

      // validators are skipped, e.g. because of a parser error
      control.$setValidity('error', null);
      control.$setValidity('another', null);
      scope.$digest();
      expect(doc.hasClass('ng-valid-error')).toBe(false);
      expect(doc.hasClass('ng-invalid-error')).toBe(false);
      expect(doc.hasClass('ng-valid-another')).toBe(false);
      expect(doc.hasClass('ng-invalid-another')).toBe(false);
    });

    it('should have ng-pristine/ng-dirty css class', function() {
      expect(doc).toBePristine();

      control.$setViewValue('');
      scope.$apply();
      expect(doc).toBeDirty();
    });
  });

  describe('$pending', function() {
    beforeEach(function() {
      doc = $compile('<form name="form"></form>')(scope);
      scope.$digest();
    });

    it('should set valid and invalid to undefined when a validation error state is set as pending', inject(function($q, $rootScope) {
      var defer, form = doc.data('$formController');

      var ctrl = {};
      form.$setValidity('matias', undefined, ctrl);

      expect(form.$valid).toBeUndefined();
      expect(form.$invalid).toBeUndefined();
      expect(form.$pending.matias).toEqual([ctrl]);

      form.$setValidity('matias', true, ctrl);

      expect(form.$valid).toBe(true);
      expect(form.$invalid).toBe(false);
      expect(form.$pending).toBeUndefined();

      form.$setValidity('matias', false, ctrl);

      expect(form.$valid).toBe(false);
      expect(form.$invalid).toBe(true);
      expect(form.$pending).toBeUndefined();
    }));
  });

  describe('$setPristine', function() {

    it('should reset pristine state of form and controls', function() {

      doc = $compile(
          '<form name="testForm">' +
            '<input ng-model="named1" name="foo">' +
            '<input ng-model="named2" name="bar">' +
          '</form>')(scope);

      scope.$digest();

      var form = doc,
          formCtrl = scope.testForm,
          input1 = form.find('input').eq(0),
          input1Ctrl = input1.controller('ngModel'),
          input2 = form.find('input').eq(1),
          input2Ctrl = input2.controller('ngModel');

      input1Ctrl.$setViewValue('xx');
      input2Ctrl.$setViewValue('yy');
      scope.$apply();
      expect(form).toBeDirty();
      expect(input1).toBeDirty();
      expect(input2).toBeDirty();


      formCtrl.$setPristine();
      scope.$digest();
      expect(form).toBePristine();
      expect(formCtrl.$pristine).toBe(true);
      expect(formCtrl.$dirty).toBe(false);
      expect(input1).toBePristine();
      expect(input1Ctrl.$pristine).toBe(true);
      expect(input1Ctrl.$dirty).toBe(false);
      expect(input2).toBePristine();
      expect(input2Ctrl.$pristine).toBe(true);
      expect(input2Ctrl.$dirty).toBe(false);
    });


    it('should reset pristine state of anonymous form controls', function() {

      doc = $compile(
          '<form name="testForm">' +
            '<input ng-model="anonymous">' +
          '</form>')(scope);

      scope.$digest();

      var form = doc,
          formCtrl = scope.testForm,
          input = form.find('input').eq(0),
          inputCtrl = input.controller('ngModel');

      inputCtrl.$setViewValue('xx');
      scope.$apply();
      expect(form).toBeDirty();
      expect(input).toBeDirty();

      formCtrl.$setPristine();
      scope.$digest();
      expect(form).toBePristine();
      expect(formCtrl.$pristine).toBe(true);
      expect(formCtrl.$dirty).toBe(false);
      expect(input).toBePristine();
      expect(inputCtrl.$pristine).toBe(true);
      expect(inputCtrl.$dirty).toBe(false);
    });


    it('should reset pristine state of nested forms', function() {

      doc = $compile(
          '<form name="testForm">' +
            '<div ng-form>' +
              '<input ng-model="named" name="foo">' +
            '</div>' +
          '</form>')(scope);

      scope.$digest();

      var form = doc,
          formCtrl = scope.testForm,
          nestedForm = form.find('div'),
          nestedFormCtrl = nestedForm.controller('form'),
          nestedInput = form.find('input').eq(0),
          nestedInputCtrl = nestedInput.controller('ngModel');

      nestedInputCtrl.$setViewValue('xx');
      scope.$apply();
      expect(form).toBeDirty();
      expect(nestedForm).toBeDirty();
      expect(nestedInput).toBeDirty();

      formCtrl.$setPristine();
      scope.$digest();
      expect(form).toBePristine();
      scope.$digest();

      expect(formCtrl.$pristine).toBe(true);
      expect(formCtrl.$dirty).toBe(false);
      expect(nestedForm).toBePristine();
      expect(nestedFormCtrl.$pristine).toBe(true);
      expect(nestedFormCtrl.$dirty).toBe(false);
      expect(nestedInput).toBePristine();
      expect(nestedInputCtrl.$pristine).toBe(true);
      expect(nestedInputCtrl.$dirty).toBe(false);
    });


    it('should be idempotent on freshly created form', function() {
      doc = $compile(
          '<form name="form">' +
            '<input ng-model="inputModel" name="input">' +
          '</form>')(scope);

      var form = doc,
          inputCtrl = doc.find('input').eq(0).controller('ngModel');

      expect(form).toBePristine();

      // many times
      inputCtrl.$setPristine();
      inputCtrl.$setPristine();
      scope.$apply();
      expect(form).toBePristine();

      inputCtrl.$setDirty();
      scope.$apply();
      expect(form).toBeDirty();

      // many times
      inputCtrl.$setDirty();
      inputCtrl.$setDirty();
      scope.$apply();
      expect(form).toBeDirty();

      inputCtrl.$setPristine();
      scope.$apply();
      expect(form).toBePristine();
    });

    it('should propagate pristine-ness to the parent form', function() {
      doc = $compile(
          '<form name="parentForm">' +
            '<div ng-form name="childForm"></div>' +
          '</form>')(scope);

      var parentForm = doc,
          childForm = parentForm.find('div').eq(0),
          childFormCtrl = scope.childForm;

      childFormCtrl.$setDirty();
      scope.$apply();
      expect(parentForm).toBeDirty();

      childFormCtrl.$setPristine();
      scope.$apply();
      expect(childForm).toBePristine();
      expect(parentForm).toBePristine();
    });

    it('should be pristine if all the nested controls are pristine', function() {
      doc = $compile(
          '<form name="form">' +
            '<div ng-form name="childForm">' +
              '<input ng-model="inputModel1" name="input1">' +
              '<input ng-model="inputModel2" name="input2">' +
            '</div>' +
          '</form>')(scope);

      var form = doc,
          childForm = form.find('div').eq(0),
          input1 = form.find('input').eq(0),
          input2 = form.find('input').eq(1),
          inputCtrl1 = input1.controller('ngModel'),
          inputCtrl2 = input2.controller('ngModel');

      inputCtrl1.$setDirty();
      inputCtrl1.$setDirty();
      scope.$apply();
      expect(form).toBeDirty();
      expect(childForm).toBeDirty();

      inputCtrl2.$setDirty();
      inputCtrl2.$setDirty();
      scope.$apply();
      expect(form).toBeDirty();
      expect(childForm).toBeDirty();

      inputCtrl1.$setPristine();
      scope.$apply();
      expect(form).toBeDirty();
      expect(childForm).toBeDirty();

      inputCtrl2.$setPristine();
      scope.$apply();
      expect(form).toBePristine();
      expect(childForm).toBePristine();
    });

    it('should be pristine if all the nested forms are pristine', function() {
      doc = $compile(
          '<form name="outerForm1">' +
            '<div ng-form name="outerForm2">' +
              '<div ng-form name="childForm1"></div>' +
              '<div ng-form name="childForm2"></div>' +
            '</div>' +
          '</form>')(scope);

      var outerForm1 = doc,
          outerForm2 = doc.find('div').eq(0),
          childFormCtrl1 = scope.childForm1,
          childFormCtrl2 = scope.childForm2;

      childFormCtrl1.$setDirty();
      scope.$apply();
      expect(outerForm1).toBeDirty();
      expect(outerForm2).toBeDirty();
      childFormCtrl2.$setDirty();
      scope.$apply();
      expect(outerForm1).toBeDirty();
      expect(outerForm2).toBeDirty();

      childFormCtrl1.$setPristine();
      scope.$apply();
      expect(outerForm1).toBeDirty();
      expect(outerForm2).toBeDirty();

      childFormCtrl2.$setPristine();
      scope.$apply();
      expect(outerForm1).toBePristine();
      expect(outerForm2).toBePristine();
    });

    it('should properly handle added/removed controls and be idempotent', function() {

      var test = function(input, inputCtrl) {
        doc = $compile(
            '<form name="outerForm">' +
              '<div ng-form name="innerForm"></div>' +
            '</form>')(scope);

        var outerForm = doc,
            innerForm = doc.find('div').eq(0),
            innerFormCtrl = innerForm.controller('form');

        inputCtrl.$setDirty();
        inputCtrl.$setDirty();

        // just add control does not change form pristine-ness
        innerFormCtrl.$addControl(inputCtrl);
        scope.$apply();
        expect(innerForm).toBePristine();
        expect(outerForm).toBePristine();

        // change after adding
        inputCtrl.$setDirty();
        inputCtrl.$setDirty();
        scope.$apply();
        expect(innerForm).toBeDirty();

        innerFormCtrl.$removeControl(inputCtrl);

        // removed control does not affect
        inputCtrl.$setPristine();
        scope.$apply();
        expect(innerForm).toBeDirty();
        expect(outerForm).toBeDirty();

        innerFormCtrl.$addControl(inputCtrl);
        scope.$apply();
        expect(innerForm).toBeDirty();
        expect(outerForm).toBeDirty();

        // single $setPristine after multiple $setDirty
        inputCtrl.$setPristine();
        scope.$apply();
        expect(innerForm).toBePristine();
        expect(outerForm).toBePristine();

        // many times
        innerFormCtrl.$removeControl(inputCtrl);
        inputCtrl.$setPristine();
        inputCtrl.$setPristine();
        innerFormCtrl.$addControl(inputCtrl);
        scope.$apply();
        expect(innerForm).toBePristine();
        expect(outerForm).toBePristine();

        // single setDirty afterm multiple setPristine
        inputCtrl.$setDirty();
        scope.$apply();
        expect(innerForm).toBeDirty();
        expect(outerForm).toBeDirty();
      };

      var input1 = $compile('<input ng-model="inputModel" name="input">')(scope),
          inputCtrl1 = input1.controller('ngModel'),

          input2 = $compile('<div ng-form name="input"></div>')(scope),
          inputCtrl2 = input2.controller('form');

      // test for input
      test(input1, inputCtrl1);
      dealoc(doc);

      // test for ng-form
      test(input2, inputCtrl2);
    });
  });

  describe('$setUntouched', function() {
    it('should trigger setUntouched on form controls', function() {
      var form = $compile(
          '<form name="myForm">' +
            '<input name="alias" type="text" ng-model="name" />' +
          '</form>')(scope);
      scope.$digest();

      scope.myForm.alias.$setTouched();
      expect(scope.myForm.alias.$touched).toBe(true);
      scope.myForm.$setUntouched();
      expect(scope.myForm.alias.$touched).toBe(false);
      dealoc(form);
    });

    it('should trigger setUntouched on form controls with nested forms', function() {
      var form = $compile(
          '<form name="myForm">' +
            '<div class="ng-form" name="childForm">' +
              '<input name="alias" type="text" ng-model="name" />' +
            '</div>' +
          '</form>')(scope);
      scope.$digest();

      scope.myForm.childForm.alias.$setTouched();
      expect(scope.myForm.childForm.alias.$touched).toBe(true);
      scope.myForm.$setUntouched();
      expect(scope.myForm.childForm.alias.$touched).toBe(false);
      dealoc(form);
    });
  });


  it('should rename nested form controls when interpolated name changes', function() {
    scope.idA = 'A';
    scope.idB = 'X';

    doc = $compile(
      '<form name="form">' +
        '<div ng-form="nested{{idA}}">' +
          '<div ng-form name="nested{{idB}}"' +
          '</div>' +
        '</div>' +
      '</form'
    )(scope);

    scope.$digest();
    var formA = scope.form.nestedA;
    expect(formA).toBeDefined();
    expect(formA.$name).toBe('nestedA');

    var formX = formA.nestedX;
    expect(formX).toBeDefined();
    expect(formX.$name).toBe('nestedX');

    scope.idA = 'B';
    scope.idB = 'Y';
    scope.$digest();

    expect(scope.form.nestedA).toBeUndefined();
    expect(scope.form.nestedB).toBe(formA);
    expect(formA.nestedX).toBeUndefined();
    expect(formA.nestedY).toBe(formX);
  });


  it('should rename forms with no parent when interpolated name changes', function() {
    var element = $compile('<form name="name{{nameID}}"></form>')(scope);
    var element2 = $compile('<div ng-form="ngform{{nameID}}"></div>')(scope);
    scope.nameID = "A";
    scope.$digest();
    var form = element.controller('form');
    var form2 = element2.controller('form');
    expect(scope.nameA).toBe(form);
    expect(scope.ngformA).toBe(form2);
    expect(form.$name).toBe('nameA');
    expect(form2.$name).toBe('ngformA');

    scope.nameID = "B";
    scope.$digest();
    expect(scope.nameA).toBeUndefined();
    expect(scope.ngformA).toBeUndefined();
    expect(scope.nameB).toBe(form);
    expect(scope.ngformB).toBe(form2);
    expect(form.$name).toBe('nameB');
    expect(form2.$name).toBe('ngformB');
  });

  it('should rename forms with an initially blank name', function() {
    var element = $compile('<form name="{{name}}"></form>')(scope);
    scope.$digest();
    var form = element.controller('form');
    expect(scope['']).toBe(form);
    expect(form.$name).toBe('');
    scope.name = 'foo';
    scope.$digest();
    expect(scope.foo).toBe(form);
    expect(form.$name).toBe('foo');
    expect(scope.foo).toBe(form);
  });

  describe('$setSubmitted', function() {
    beforeEach(function() {
      doc = $compile(
          '<form name="form" ng-submit="submitted = true">' +
            '<input type="text" ng-model="name" required />' +
            '<input type="submit" />' +
          '</form>')(scope);

      scope.$digest();
    });

    it('should not init in submitted state', function() {
      expect(scope.form.$submitted).toBe(false);
    });

    it('should be in submitted state when submitted', function() {
      browserTrigger(doc, 'submit');
      expect(scope.form.$submitted).toBe(true);
    });

    it('should revert submitted back to false when $setPristine is called on the form', function() {
      scope.form.$submitted = true;
      scope.form.$setPristine();
      expect(scope.form.$submitted).toBe(false);
    });
  });
});

describe('form animations', function() {
  beforeEach(module('ngAnimateMock'));

  function assertValidAnimation(animation, event, classNameAdded, classNameRemoved) {
    expect(animation.event).toBe(event);
    expect(animation.args[1]).toBe(classNameAdded);
    expect(animation.args[2]).toBe(classNameRemoved);
  }

  var doc, scope, form;
  beforeEach(inject(function($rootScope, $compile, $rootElement, $animate) {
    scope = $rootScope.$new();
    doc = jqLite('<form name="myForm"></form>');
    $rootElement.append(doc);
    $compile(doc)(scope);
    $animate.queue = [];
    form = scope.myForm;
  }));

  afterEach(function() {
    dealoc(doc);
  });

  it('should trigger an animation when invalid', inject(function($animate) {
    form.$setValidity('required', false);

    assertValidAnimation($animate.queue[0], 'removeClass', 'ng-valid');
    assertValidAnimation($animate.queue[1], 'addClass', 'ng-invalid');
    assertValidAnimation($animate.queue[2], 'addClass', 'ng-invalid-required');
  }));

  it('should trigger an animation when valid', inject(function($animate) {
    form.$setValidity('required', false);

    $animate.queue = [];

    form.$setValidity('required', true);

    assertValidAnimation($animate.queue[0], 'addClass', 'ng-valid');
    assertValidAnimation($animate.queue[1], 'removeClass', 'ng-invalid');
    assertValidAnimation($animate.queue[2], 'addClass', 'ng-valid-required');
  }));

  it('should trigger an animation when dirty', inject(function($animate) {
    form.$setDirty();

    assertValidAnimation($animate.queue[0], 'removeClass', 'ng-pristine');
    assertValidAnimation($animate.queue[1], 'addClass', 'ng-dirty');
  }));

  it('should trigger an animation when pristine', inject(function($animate) {
    form.$setDirty();

    $animate.queue = [];

    form.$setPristine();

    assertValidAnimation($animate.queue[0], 'setClass', 'ng-pristine', 'ng-dirty ng-submitted');
  }));

  it('should trigger custom errors as addClass/removeClass when invalid/valid', inject(function($animate) {
    form.$setValidity('custom-error', false);

    assertValidAnimation($animate.queue[0], 'removeClass', 'ng-valid');
    assertValidAnimation($animate.queue[1], 'addClass', 'ng-invalid');
    assertValidAnimation($animate.queue[2], 'addClass', 'ng-invalid-custom-error');

    $animate.queue = [];
    form.$setValidity('custom-error', true);

    assertValidAnimation($animate.queue[0], 'addClass', 'ng-valid');
    assertValidAnimation($animate.queue[1], 'removeClass', 'ng-invalid');
    assertValidAnimation($animate.queue[2], 'addClass', 'ng-valid-custom-error');
    assertValidAnimation($animate.queue[3], 'removeClass', 'ng-invalid-custom-error');
  }));
});