title: To test a custom validation angularjs directive
body: <p>This custom validation directive is an example presented at the official angular site.
  <a href="http://docs.angularjs.org/guide/forms">http://docs.angularjs.org/guide/forms</a>
  It checks a text input is in number format or not.</p>
  
  <pre><code>var INTEGER_REGEXP = /^\-?\d*$/;
  app.directive('integer', function() {
    return {
      require: 'ngModel',
      link: function(scope, elm, attrs, ctrl) {
        ctrl.$parsers.unshift(function(viewValue) {
          if (INTEGER_REGEXP.test(viewValue)) {
            // it is valid
            ctrl.$setValidity('integer', true);
            return viewValue;
          } else {
            // it is invalid, return undefined (no model update)
            ctrl.$setValidity('integer', false);
            return undefined;
          }
        });
      }
    };
  });
  </code></pre>
  
  <p>To unit test this code, I wrote this:</p>
  
  <pre><code>describe('directives', function() {
    beforeEach(module('exampleDirective'));
  
    describe('integer', function() {
      it('should validate an integer', function() {
        inject(function($compile, $rootScope) {
          var element = angular.element(
            '&lt;form name="form"&gt;' +
              '&lt;input ng-model="someNum" name="someNum" integer&gt;' +
            '&lt;/form&gt;'
            );
          $compile(element)($rootScope);
          $rootScope.$digest();
          element.find('input').val(5);
          expect($rootScope.someNum).toEqual(5);
        });
      });
    });
  });
  </code></pre>
  
  <p>Then I get this error:</p>
  
  <pre><code>Expected undefined to equal 5.
  Error: Expected undefined to equal 5.
  </code></pre>
  
  <p>I put print statements everywhere to see what is going on, and it looks like the directive is never called.
  What is a proper way to test a simple directive like this?</p>