Add unit tests for the formValidate directive

h/static/scripts/controllers.coffee

@@ -715,6 +715,7 @@ class Auth
       angular.extend $scope.model, base
       for own _, ctrl of $scope when angular.isFunction ctrl?.$setPristine
         ctrl.$setPristine()
+      form.responseErrorMessage = null
 
     _updateFormValidity = (form, reason) ->
       if reason == 'Invalid username or password.'

h/static/scripts/directives.coffee

-formField = ->
-  link: (scope, elem, attr, form) ->
-    field = form[attr.target]
-    errorClass = attr.errorClass
-
-    return unless field?
-
-    unless errorClass
-      throw new Error('FormField directive requires an error-class attribute')
-
-    field.unsetFieldError = ->
-      elem.removeClass(errorClass)
-
-    field.setFieldError = ->
-      elem.addClass(errorClass)
-
-  require: '^form'
-  restrict: 'C'
-
-
 formValidate = ->
   link: (scope, elem, attr, form) ->
+    toggleClass = (field, {addClass}) ->
+      fieldEl = elem.find("[data-target=#{field.$name}]")
+      fieldEl.toggleClass('form-field-error', addClass)
+
     updateField = (field) ->
       return unless field?
 
       if field.$valid
-        field.unsetFieldError()
+        toggleClass(field, addClass: false)
       else
-        field.setFieldError()
+        toggleClass(field, addClass: true)
 
     # Immediately show feedback for corrections.
     elem.on 'keyup', ':input', ->
@@ -465,7 +449,6 @@ whenscrolled = ['$window', ($window) ->
 
 
 angular.module('h.directives', ['ngSanitize'])
-.directive('formField', formField)
 .directive('formValidate', formValidate)
 .directive('fuzzytime', fuzzytime)
 .directive('markdown', markdown)

tests/js/directives-test.coffee

@@ -7,8 +7,12 @@ describe 'h.directives', ->
 
   beforeEach module ($provide, $filterProvider) ->
     fakeWindow = {open: sinon.spy()}
+    fakeDocument = angular.element({
+      createElement: (tag) -> document.createElement(tag)
+    })
 
     $provide.value('$window', fakeWindow)
+    $provide.value('$document', fakeDocument)
 
     $filterProvider.register 'persona', ->
       (user, part) ->
@@ -23,6 +27,76 @@ describe 'h.directives', ->
     $compile = _$compile_
     $scope = _$rootScope_.$new()
 
+  describe '.formValidate', ->
+    $element = null
+
+    beforeEach ->
+      $scope.model = {username: ''}
+
+      template = '''
+      <form form-validate name="login" onsubmit="return false">
+        <div class="form-field" data-error-class="form-field-error" data-target="username">
+          <input type="text" class="" ng-model="model.username" name="username" required ng-minlength="3" />
+        </div>
+      </form>
+      '''
+
+      # Needs to be passed through angular.element() to work. Otherwise it
+      # will not link the form-validate directive.
+      $element = $compile(angular.element(template))($scope)
+      $scope.$digest()
+
+    it 'should apply an error class to an invalid field on change', ->
+      $field = $element.find('.form-field')
+      $element.find('[name=username]').val('ab').change()
+      assert.include $field.prop('className'), 'form-field-error'
+
+    it 'should remove an error class to an valid field on change', ->
+      $field = $element.find('.form-field').addClass('form-field-error')
+      $input = $element.find('[name=username]')
+      $input.val('abc').change()
+      assert.notInclude $field.prop('className'), 'form-field-error'
+
+    it 'should apply an error class to an invalid field on submit', ->
+      $field = $element.find('.form-field')
+      $element.trigger('submit')
+      assert.include $field.prop('className'), 'form-field-error'
+
+    it 'should remove an error class from a valid field on submit', ->
+      $scope.model.username = 'abc'
+      $scope.$digest()
+
+      $field = $element.find('.form-field').addClass('form-field-error')
+
+      $element.trigger('submit')
+      assert.notInclude $field.prop('className'), 'form-field-error'
+
+    it 'should apply an error class to an invalid field on "error" event', ->
+      $scope.$emit('error', 'login')
+      $element.controller('form').username.$setValidity('response', false)
+
+      $field = $element.find('.form-field')
+      assert.include $field.prop('className'), 'form-field-error'
+
+    it 'should remove an error class on valid input on keyup', ->
+      $scope.model.username = 'abc'
+      $scope.$digest()
+
+      $field = $element.find('.form-field').addClass('form-field-error')
+      $element.find('[name=username]').keyup()
+
+      assert.notInclude $field.prop('className'), 'form-field-error'
+
+    it 'should not add an error class on invalid input on keyup', ->
+      $scope.model.username = ''
+      $scope.$digest()
+
+      $field = $element.find('.form-field')
+      $element.find('[name=username]').keyup()
+
+      assert.notInclude $field.prop('className'), 'form-field-error'
+
+
   describe '.username', ->
     $element = null